프로젝트 완료 개요

프로젝트 개요

프로젝트 명

『 ACE 그룹 활동 콘테스트 평가 시스템 』개발

프로젝트 요약

대학 선진화 사업으로 관청과 대학이 힘을 합쳐 진행 중인 프로젝트 중 하나로, ACE 대학이 있는데, 여기서 인문대학은 ACE 산하 프로젝트를 여러 가지 진행하고 있다. 5가지 남짓의 프로젝트 중 여러 학생들에게 가장 관심있게 보여지는 활동은 그룹 활동 콘테스트다. 이는 학생들끼리 3인 정도의 그룹을 구성하여 동양 문화에 관한 발표를 하여, 학생 서로간에 평가를 하여 발전하는데 의미가 있다. 그러나 이 평가 과정을 계획 단계에선 수작업과 거수 방식을 혼용한 것으로 기획하여 많은 혼란이 예상되었고, 이에 참가자인 개발자 본인이 담당 교수 ‘세키네 히데유키’의 허락을 얻어 진행한 모바일 웹 프로젝트다.

본 프로젝트를 통하여 참가자 발표 정보를 간략하게 보여주고, 참가자임을 인증하면 다른 조를 평가하여 최종적으로는 발표 당일 마지막에 전면 프로젝터를 통해 즉시 조별 순위를 나타내고, 예상 장학금을 표시하여 학생과 교수의 혼란을 방지하고 일 처리를 신속하게 하는 효과를 거둘 수 있다.

팀구성

역할	학번	이름	email	비고
전체 구성 및 개발	201131307	이진백	[email protected]

프로젝트 과정

기획

코딩

업로드

데이터 구성

테스트

개발 후 느낀 점(개발 후기)

이 프로젝트는 매우 단순한 구조를 갖고 있지만, 그에 요구되는 코드 난이도는 적지 않게 느껴졌다. 아직 써보지 못한 UI 프레임워크인 Materialize와 어느 정도 초보적으로 익숙해진 jQuery의 혼합된 기술은 생소하긴 했지만, 결과적으로 성공하고 보니 무척 매끄럽게 돌아가는 것으로 보인다. 그 외 PHP 서버 사이드 코드를 통해서 데이터베이스 제어가 가능했는데, 이 부분은 별도로 데이터베이스 수업을 듣지 않고, 배경 지식을 통해서 해낸 것이라 역시 의미가 있었다. 또한 이런 경험이 앞으로의 웹 개발에서 작업이 막히지 않고 진행 가능한 원동력으로서 작동할 것을 생각하면, 뜻 깊은 경험이자 도전이었다고 되돌아보게 된다.

프로그램 구성

실행환경 구성도

실행기능

주요기능	상세기능	사용자
주요기능	상세기능	관리자	일반사용자^[1]
순서 수정	직접 입력, 랜덤 수정	●	●
결과 열람	제목 숨김, 장학금 계산	●	●
조회	학생 인증, 조원 및 발표 개요 조회		●
평가	끌어서 평가, 다시 평가		●

실행환경

서버OS: Linux 호스팅 서버

서버IP: 183.***.***.***

서버 접속 URL: http://vote.yeon.me/

지원 브라우저: IE11 이상, Chrome, Safari, Firefox 등 HTML5 지원 브라우저

(모바일의 경우) 모바일플랫폼: Chrome, Safari, Opera (Android, iOS, Windows Phone^[2])

프로그램 실행화면

사용자 인증

그림 1 유효하지 않은 학번 입력

그림 2 학생 번호를 입력하지 않음

그림 3 학번 입력 인증 화면

평가 화면

그림 4 평가 페이지 상단 부분

그림 5 평가 페이지 하단 부분 (긴 스크롤 화면을 좌상-우상-좌하-우하 순으로 재구성)

정렬 화면 (관리자)
본 화면은 첫 인증 페이지에서 ‘ordr’ 키워드 입력으로 접근할 수 있다.

그림 6 정렬 순서 지정 페이지. 프로젝터 가독성 확보용으로 큰 글씨 적용.

결과 화면 (관리자)
본 페이지는 첫 인증 화면에서 ‘rest’ 키워드 입력으로 접근할 수 있다. (일반인들에게 비밀)

그림 7 순위만 보이고 조를 숨긴 화면 (발표 후 평가 인원들 평가 마무리까지 카운트 다운 단계)

그림 8결과 전체 공개

프로그램 구조

디렉터리 구조 및 파일

tree

│ global.php

│ index.php

│ order.php

│ order_ok.php

│ result.php

│ vote.php

│ vote_submit.php

│

├─css

│ materialize.min.css

│ style.css

│

├─font

│ ├─material-design-icons

│ │ LICENSE.txt

│ │ Material-Design-Icons.eot

│ │ Material-Design-Icons.svg

│ │ Material-Design-Icons.ttf

│ │ Material-Design-Icons.woff

│ │ Material-Design-Icons.woff2

│ │

│ └─roboto

│ Roboto-Bold.ttf

│ Roboto-Bold.woff

│ Roboto-Bold.woff2

│ Roboto-Light.ttf

│ Roboto-Light.woff

│ Roboto-Light.woff2

│ Roboto-Medium.ttf

│ Roboto-Medium.woff

│ Roboto-Medium.woff2

│ Roboto-Regular.ttf

│ Roboto-Regular.woff

│ Roboto-Regular.woff2

│ Roboto-Thin.ttf

│ Roboto-Thin.woff

│ Roboto-Thin.woff2

│

├─img

│ hi1.img

│ hi2.img

│ hi3.img

│ hi4.img

│

└─js

materialize.min.js

Sortable.min.js

디렉터리	파일명	소스설명
	global.php	실행 가능 여부 플래그 (false시 오류 메시지)
	index.php	참가자 인증과 관리자 페이지 연결
	order.php	발표 순서 재배열
	order_ok.php	발표 순서 재배열 반영 후 index.php 복귀
	result.php	결과 페이지
	vote.php	평가 페이지
	vote_submit.php	평가 전송 페이지 (Ajax)
css	materialize.min.css	구글 안드로이드 Material 디자인 HTML5 CSS 프레임워크
css	style.css	스타일시트
js	materialize.min.js	Materialize 자바스크립트
js	Sortable.min.js	Sortable (끌어서 놓기) 도구 자바스크립트

데이터베이스 설명

ERD (최종구현버전)

`num` tinyint(4) NOT NULL,

`order` tinyint(2) NOT NULL,

`people` varchar(255) COLLATE

`title` varchar(255) COLLATE utf8_unicode_ci NOT NULL,

`content` text COLLATE utf8_unicode_ci NOT NULL,

`members` tinyint(2) NOT NULL,

PRIMARY KEY (`num`)

proj2_group

`ab_no` int(10) NOT NULL AUTO_INCREMENT,

`stno` varchar(10) NOT NULL,

`name` varchar(5) NOT NULL,

`group` int(11) NOT NULL,

`sc_con` tinyint(4) NOT NULL,

`sc_cre` tinyint(4) NOT NULL,

`sc_ann` tinyint(4) NOT NULL,

`agent` varchar(200) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,

PRIMARY KEY (`ab_no`)

proj2_score

`no` int(11) NOT NULL,

`name` varchar(5) COLLATE

`group` tinyint(4) NOT NULL,

PRIMARY KEY (`no`)

proj2_student

테이블명세서 (최종구현버전)

테이블 명

proj_score

개요

매 평가 순간 기록되는 개인의 조별 평가 테이블

Attribute

Data Type

Description

ab_no

int(10)

고유 번호

stno

varchar(10)

학생 번호

name

varchar(5)

이름

group

int(11)

조

sc_con

tinyint

내용 점수

sc_cre

tinyint

창의 점수

sc_ann

tinyint

발표 점수

agent

varchar(200)

UserAgent

테이블 명

proj_students

개요

학번 인증과 평가자 관리를 위한 사전 입력된 학생 정보

Attribute

Data Type

Description

int(11)

학번

name

varchar(5)

이름

group

tinyint(4)

조

테이블 명

proj_group

개요

조별 발표 개요와 조원 정보

Attribute

Data Type

Description

num

tinyint(4)

학번

order

tinyint(2)

조

people

varchar(255)

조원 이름

title

varchar(255)

발표 제목

content

text

발표 내용

members

tinyint(2)

발표 순서

주요 함수 설명(10개~20개)

순차 실행이므로 별도의 클래스와 함수가 없다. 그러나 실행 순서별로 다음과 같은 핵심 기능을 제공하고 있다.

1.6.1. global.php

변수

$isBlocked: 처음 실행시 기능이 제한되었는지 여부 판별. 다른 PHP에서 참조.
$isSaveNotAllowed: 저장을 실제로 할지 판별. 다른 PHP에서 참조.

1.6.2. index.php

변수

Form/student: 학번을 전송할 폼 input이다.

함수

$(document).ready: 메인 이미지를 무작위로 지정한다.

var ranstr = Math.floor((Math.random() * 4)+1);

$(“#imgMain”).attr(“src”,”img/hi”+ranstr+”.img”);

연결

vote.php: form action=post 형식으로 student 변수를 같이 전달하여 진행한다.
미리 지정된 예약어의 경우 vote.php를 거쳐서 다른 곳으로 연결된다.
order.php: student가 “ordr”인 경우, 순서 지정 페이지로 연결된다.
result.php: student가 “rest”인 경우, 결과 페이지로 연결된다.

1.6.3. vote.php

변수

$database: MySQL 데이터베이스 접근용 medoo.php 프레임워크
$data_all: proj2_students 테이블을 가져온 데이터
$datas: $data_all의 일부를 취사 선택할 필터링 데이터. 대표적으로 평가 대상 중 본인의 조가 제외된다.
$alphabet: A ~ G까지의 7개 조 숫자와 매치할 이름

함수

PHP 블록: 데이터베이스를 가져와서 배열한다. 반복문에서는 조별 개요를 레코드에 따라 나열한다.
$(document).ready: materialize div Page 보이기 숨기기 기능과 이벤트 핸들러 연결이 있다.
$(“#sendbtn”).click: 떠서 이동하는 보내기 버튼의 클릭 이벤트. 각 리스트의 재배열된 항목을 가져와서 배열화하여, JSON String으로 구성한 뒤, ajax를 통해 vote_submit.php로 보이지 않게 전송한다. 사용자 피드백을 위해 스크롤을 아래로 내리고, 성공 멘트를 표시한다.

연결

vote.php: form action=post 형식으로 student 변수를 같이 전달하여 진행한다.
미리 지정된 예약어의 경우 vote.php를 거쳐서 다른 곳으로 연결된다.
order.php: student가 “ordr”인 경우, 순서 지정 페이지로 연결된다.
result.php: student가 “rest”인 경우, 결과 페이지로 연결된다.

특이사항

materializeCSS 프레임워크를 통해 디자인을 구성한다.
Sortable 프레임워크를 통해 리스트 항목을 끌어당겨 재배열한다.

1.6.4. vote_submit.php

변수

$database: MySQL 데이터베이스 접근용 medoo.php 프레임워크
$id_data: proj2_students의 no 열만 가져온 학번 데이터
$data: vote.php에서 넘겨받은, 조별 클래스 형식의 3가지 영역 점수 배열 데이터
$query_array: 데이터를 medoo 쿼리 형태로 조에 하나씩 모은 배열 데이터

함수

PHP 블록: 학번의 유효성을 검사하고, 넘어온 조별 각 점수를 모아서 proj2_score 테이블에 $query_array를 일시 insert 한다.

연결

이 php는 탐색되지 않으므로 아무 곳으로도 연결되지 않는다. 리턴값을 주면 vote.php에 ajax 형태로 성공 또는 에러가 표시된다.

1.6.5. order.php

변수

$database: MySQL 데이터베이스 접근용 medoo.php 프레임워크
$data: proj2_group 테이블에서 가져온 조별 발표 개요.

함수

PHP 블록: 조별 발표 개요를 출력한다.
putnum(): input에 무작위로 조 순서를 생성하여 알파벳 형식으로 나타낸다.

연결

order_ok.php: 생성된 숫자를 ord 변수에 담아 form post 형태로 전달한다.

1.6.6. order_ok.php

변수

$ord: post로 넘겨받은 ord 변수를 한글자씩 배열로 분리한 PHP String Array
$database: MySQL 데이터베이스 접근용 medoo.php 프레임워크

함수

PHP 블록: ord 유효성을 판별하고, proj2_group 테이블의 order 값을 항목별로 각각 업데이트한다.

연결

http://vote.yeon.me (index.php): header 함수를 통해 즉시 이동한다.

1.6.7. result.php

변수

show: get 방식으로 넘기는 변수. 1이면 텍스트를 가리지 않는다.
$database: MySQL 데이터베이스 접근용 medoo.php 프레임워크
$cnt: SQL1의 값을 담는다.
$imsi: SQL2의 값을 담는다.
$sc_*: 3가지 영역별 점수 배열.
$score: [1] ~ [7]까지 조별 최종 평균 점수 배열
$groups: proj2_group에서 조별 정보 테이블을 발표 순서대로 담는다.
$maxmoney = 420: 예상 최대 장학금 420만원
$pref_bonus: 100% ~ 110%까지 1위부터 7위까지 가산될 보너스 배율
$bonus: $pref_bonus를 토대로 같은 점수인 조원의 비율까지 보정된 실제 보너스 배율
$index_score: $score 배열을 재정의
$basex: 가장 점수가 낮은 사람이 받는 씨앗 금액

함수

PHP 블록 1: SQL1을 활용하여 평가 인원을 구하고, SQL2를 이용하여 PHP 배열로 출력된 조별 데이터 $score를 다시 한 번 전체 평균값으로 정렬한다.
PHP 블록 2: $pref_bonus 기반으로 랭킹 금액 보너스를 계산하고, 동점 그룹에 대한 보정값을 계산한 다음, 예상 장학금을 표시한다.
PHP 블록 3: 투표한 유저의 UserAgent 값을 같은 유저의 중복되지 않는 값으로 모두 나열한다. 같은 사람이 여럿 나타나면 다른 기기에서 투표했다는 소리이므로 부정을 의심할 수 있다.

SQL

SQL1 “SELECT stno FROM proj2_score AS t1 WHERE t1.group = “.$i.” GROUP BY `stno`;”
proj2_score에서 group이 $i와 일치하는 것만 출력
SQL2 “SELECT AVG(`sc_con`),AVG(`sc_cre`),AVG(`sc_ann`),AVG((`sc_con`+`sc_cre`+`sc_ann`)/3) FROM (SELECT * FROM (SELECT `stno`,`group`,`sc_con`,`sc_cre`,`sc_ann`,`ab_no` FROM proj2_score AS t1 WHERE t1.group = “.$i.” ORDER BY `ab_no` DESC) AS t2 GROUP BY `stno`) AS t3;”
proj2_score에서 group이 $i인 항목의 학번, 그룹 번호, 내용 점수, 창의 점수, 발표 점수 데이터를 가져온 다음, 학번 순으로 모아서, 그 항목의 내용 점수, 항의 점수, 발표 점수, 세 가지를 더한 수치의 평균값을 구한 배열을 출력한다.

일반 사용자는 프로젝트 참가자, 관리자는 프로젝트 발표자이자 참가자이므로, 교수 같은 외부인이 아닌 본 ‘관리자’는 참가자로서 일반 사용자 기능도 가능하여야 한다. ↑
Windows Phone에서는 [끌어서 평가] 기능이 작동하긴 하나, 드래그 상태가 유지되지 못하고 스크롤을 지속하므로 조작에 불편 사항이 있지만, 참가자 중에 Windows Phone 유저는 없을 것으로 예상된다. ↑

학생 프로젝트 상호 평가 투표 페이지의 제작 완료 보고서

프로젝트 완료 개요

프로젝트 개요

프로그램 구성

프로그램 실행화면

프로그램 구조

데이터베이스 설명

주요 함수 설명(10개~20개)

답글 남기기 응답 취소