17 장 설문조사 창 제작과 메인 화면 완성

17장설문조사 창 제작과메인 화면 완성

학습목표 설문조사 기능 구현 방법 설문조사 결과 처리 설문조사 결과 막대그래프 그리기 최근 게시문 가져오기 메인 화면 완성하기

목차1. 설문조사 창의 개요2. DB 테이블 설계 및 생성3. 설문조사 창 제작4. 메인 화면 완성

1.1 결과 화면과 요구사항

• 요구사항 한 개의 질문에 대한 네 개의 선택 문항 중 하나에 투표 가능 설문조사 결과는 득표수와 함께 막대그래프 형태로 표시 득표율을 정수로 표시

[ 그림 17-1] 설문조사 메인 화면

1.2 준비 파일과 화면 구성

구분 파일 / 폴더명 기능

데이터베이스 survey.sql 설문조사 데이터베이스 테이블 생성

페이지survey.php 설문조사 페이지

result.php 설문조사 결과 페이지

기능 update.php 투표 처리

[ 표 17-1] 설문조사 창 제작 실습에 사용하는 파일 목록

1.2 준비 파일과 화면 구성

[ 그림 17-2] 설문조사 창의 페이지와 기능 흐름

2. DB 테이블 설계 및 생성

필드명 형식 설명

ans1 int 설문 첫 번째 문항의 투표수

ans2 int 설문 두 번째 문항의 투표수

ans3 int 설문 세 번째 문항의 투표수

ans4 int 설문 네 번째 문항의 투표수

[ 표 17-2] 설문조사 데이터베이스 테이블 ( 테이블명 :survey)

survey 테이블 생성 및 초기화 survey.sql

create table survey( ans1 int, ans2 int, ans3 int, ans4 int ); insert into survey values(0, 0, 0, 0);

3.1 설문조사 페이지 생성

[ 그림 17-3] 설문조사 페이지 ( 팝업창 )

예제 17-1 설문조사 페이지 survey.php

01 <html>02 <head>03 <title> 설문조사 </title>04 <link rel="stylesheet" href="../css/survey.css" type="text/css">05 <meta charset="euc-kr">06 <script>07 function update()08 {09 var vote;10 var length = document.survey_form.composer.length;11 12 for(var i=0; i<length; i++)13 {14 if(document.survey_form.composer[i].checked==true)15 {16 vote=document.survey_form.composer[i].value;17 break;18 }19 }


2021 if(i==length)22 {23 alert(" 문항을 선택하세요 !");24 return;25 }2627 window.open("update.php?composer="+vote , "", 28 "left=200, top=200, width=160, height=250, status=no, scroll-bars=no");29 }3031 function result()32 {33 window.open("result.php" , "", 34 "left=200, top=200, width=160, height=250, status=no, scroll-bars=no");35 }36 </script>3738 </head>


39 <body>40 <form name=survey_form method=post > 41 <table border=0 cellspacing=0 cellpdding=0 width='200' align='center'>42 <input type=hidden name=kkk value=100>43 <tr height=40>44 <td><img src="../img/bbs_poll.gif"></td>45 </tr>46 <tr height=1 bgcolor=#cccccc><td></td></tr>47 <tr height=7><td></td></tr>48 <tr><td><b> ♬ 가장 좋아하는 기타 작곡가는 ?</b></td></tr>49 <tr><td><input type=radio name='composer' value='ans1' > 1. 타레가 </td></tr>50 <tr height=5><td></td></tr>51 <tr><td><input type=radio name='composer' value='ans2' > 2. 빌라로보스</td></tr>52 <tr height=5><td></td></tr>53 <tr><td><input type=radio name='composer' value='ans3' > 3. 끌레양 </td></tr>54 <tr height=5><td></td></tr>55 <tr><td><input type=radio name='composer' value='ans4' > 4. 소르 </td></tr>56 <tr height=7><td></td></tr>


57 <tr height=1 bgcolor=#cccccc><td></td></tr>58 <tr>59 <tr height=7><td></td></tr>60 <tr>61 <td align=middle><img src="../img/b_vote.gif" border="0“ style='cursor:hand' onclick=update()></a>62 <img src="../img/b_result.gif" border="0" style='cursor:hand' onclick=result()></a></td></tr>63 </table>64 </form>65 </body>66 </html>

예제 17-2 투표하기 update.php

01 <?02 include "../lib/dbconn.php";03 04 $sql="update survey set $composer = $composer + 1";05 mysql_query($sql, $connect);06 07 mysql_close();08 09 Header("location:result.php");10 ?>

3.3 설문조사 결과 페이지 생성

[ 그림 17-4] 설문조사 결과 페이지

예제 17-3 설문조사 결과 페이지 result.php

001 <?002 include "../lib/dbconn.php";003004 $sql="select * from survey";005 $result=mysql_query($sql, $connect);006 $row=mysql_fetch_array($result);007008 $total=$row[ans1] + $row[ans2] + $row[ans3] + $row[ans4]; 009 010 $ans1_percent=$row[ans1]/$total * 100;011 $ans2_percent=$row[ans2]/$total * 100;012 $ans3_percent=$row[ans3]/$total * 100;013 $ans4_percent=$row[ans4]/$total * 100;014 015 $ans1_percent=floor($ans1_percent);016 $ans2_percent=floor($ans2_percent);017 $ans3_percent=floor($ans3_percent);018 $ans4_percent=floor($ans4_percent);019 ?>


028 <table width=250 height=250 border='0' cellspacing='0' cell-padding='0'>029 <tr>030 <td width=180 height=1 colspan=5 bgcolor=#ffffff></td>031 </tr>032 <tr>033 <td width=1 height=35 bgcolor='#ffffff'></td>034 <td width=9 bgcolor='#ffffff'></td>035 <td width=150 align=center bgcolor='#ffffff'><b> 036 총 투표수 : <? echo $total ?> 명 </b></td>037 <td width=9 bgcolor='#ffffff'></td>038 <td width=1 bgcolor='#ffffff'></td>039 </tr>040 <tr>041 <td height=29 bgcolor='#ffffff'></td>042 <td></td>


043 <td valign=middle><b>♬ 가장 좋아하는 기타 작곡가는 ?</b></td>044 <td></td>045 <td bgcolor='#ffffff'></td>046 </tr>047 <tr>048 <td height=20 bgcolor='#ffffff'></td>049 <td></td>050 <td> 타레가 (<b><? echo $ans1_percent ?></b> %)051 <font color=purple><b><? echo $row[ans1] ?></b></font> 명 </td>052 <td></td>053 <td bgcolor='#ffffff'></td>054 </tr>055 <tr>056 <td height=3 bgcolor='#ffffff'></td>057 <td></td>058 <td>059 <table width=100 border=0 height=3 cellspacing=0 cellpadding=0>060 <tr>


061 <?062 $rest=100 - $ans1_percent;063 echo("064 <td width='$ans1_percent%' bgcolor=purple></td>065 <td width='$rest%' bgcolor='#dddddd' height=5></td>066 )";067 ?>068 </tr>069 </table>070 </td>071 <td></td>072 <td bgcolor='#ffffff'></td>073 </tr>




156 <tr>157 <td height=40 bgcolor='#ffffff'></td>158 <td></td>159 <td align=center valign=middle>160 <input type='image' style='cursor:hand' src='../img/close.gif' border=0 161 onfocus=this.blur() onclick="window.close()"></td>162 <td></td>163 <td bgcolor='#ffffff'></td>164 </tr>165 <tr>166 <td height=1 colspan=5 bgcolor=#ffffff></td>167 </tr>168 </table>169 </body>170 </html>

4. 메인 화면 완성

[ 그림 17-5] 메인 화면 (index.php) 의 변화

예제 17-4 완성된 메인 화면 index.php

01 <?02 session_start();03 ?>04 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">05 <html>06 <head>07 <meta http-equiv="Content-Type" content="text/html; charset=euc-kr">08 <link rel="stylesheet" type="text/css" href="css/common.css">09 </head>1011 <body>

24 25 <? include "./lib/func.php"; ?>2627 <div id="latest">28 <div id="latest1">

예제 17-4 완성된 메인 화면 index.php

29 <div id="title_latest1"><img src="./img/title_latest1.gif"></div>30 <div class="latest_box">31 <? latest_article("greet", 10, 30); ?>32 </div>33 </div>34 <div id="latest2">35 <div id="title_latest2"><img src="./img/title_latest2.gif"></div>36 <div class="latest_box">37 <? latest_article("concert", 10, 30); ?>38 </div>39 </div>40 </div>41 42 43 </div>44 </div>45 46 </body>47 </html>

예제 17-5 최근 글 불러오기 func.php

01 <?02 function latest_article($table, $loop, $char_limit) 03 {04 include "dbconn.php";05 06 $sql="select * from $table order by num desc limit $loop";07 $result=mysql_query($sql, $connect);08 09 while($row=mysql_fetch_array($result))10 {11 $num=$row[num];12 $len_subject=strlen($row[subject]);13 $subject=$row[subject];14 15 if($len_subject>$char_limit)16 {17 $subject=mb_substr($row[subject], 0, $char_limit, 'euc-kr');

예제 17-5 최근 글 불러오기 func.php

18 $subject=$subject."...";19 }20 21 $regist_day=substr($row[regist_day], 0, 10);22 23 echo(" 24 <div class='col1'> <a href='./$table/view.php?table=$table&num=$num'>$subject</a> </div><div class='col2'>$regist_day</div>25 <div class='clear'></div>26 ");27 }28 mysql_close();29 }30 ?>

mb_substr() 함수• 사용 형식 string mb_substr(string $str , int $start , int $length , string $encoding) - 첫 번째 인자 : 문자열 - 두 번째 인자 : 글자의 개수를 세는 시작 지점 - 세 번째 인자 : 가져오려는 글자의 개수 - 네 번째 인자 : 인코딩 옵션

• 기능 시작점 ($start) 에서부터 세 번째 인자 ($length) 만큼 첫 번째 인자인 문자열 ($str)에서 글자를 가져온다 .

• 주의사항 한글은 한 글자의 크기가 2 바이트이므로 문자열을 가져올 때 한글이 깨질 수도 있다 . 이런 상황을 방지하기 위해 네 번째 인자에 인코딩 옵션으로 한글 코드인 euc-kr 또는 utf-8 을 입력한다 .

strlen() 함수• 형식 int strlen(string $string) - 인자 : 문자열

• 기능 인자로 입력된 문자열의 글자 수를 알려준다 .

Documents

17 장 설문조사 창 제작과 메인 화면 완성