Transcript
Page 1: 13 장  연주회소개  게시판  제작

13장 연주회소개 게시판 제작

Page 2: 13 장  연주회소개  게시판  제작

IT CookBook,PHP 웹 프로그래밍 입문 ( 개정판 )

[ 강의교안 이용 안내 ]• 본 강의교안의 저작권은 한빛아카데미㈜에 있습니다 . • 이 자료를 무단으로 전제하거나 배포할 경우 저작권법 136 조에 의거하여 최고 5 년

이하의 징역 또는 5 천만원 이하의 벌금에 처할 수 있고 이를 병과 ( 倂科 ) 할 수도 있습니다 .

Page 3: 13 장  연주회소개  게시판  제작

학습목표 글쓰기와 글 수정을 한 페이지에서 처리 이미지 파일 업로드 방법 숙지 이미지 파일명 변경하여 서버에 저장 저장된 이미지 가져와 화면에 출력 업로드된 이미지 파일 삭제 이미지 파일 변경

Page 4: 13 장  연주회소개  게시판  제작

목차1. 연주회 소개 게시판의 개요2. DB 테이블 설계 및 생성3. 글 작성과 이미지 파일 업로드 처리4. 글 내용 확인

Page 5: 13 장  연주회소개  게시판  제작

1.1 결과 화면과 요구사항

[ 그림 13-1] 연주회 소개의 글 내용 보기 화면

Page 6: 13 장  연주회소개  게시판  제작

1.1 결과 화면과 요구사항• 요구사항

이미지 파일 업로드• 세 개의 이미지 파일 업로드 가능• 프로그램 확장을 고려해 다섯 개의 이미지를 업로드 할 수 있도록

데이터베이스 설계• JPG, GIF 포맷만 업로드 가능• 크기가 500KB 이하인 이미지 파일만 업로드 가능

업로드하는 이미지 파일명 변경을 통한 파일명 중복 방지 글쓰기와 글 수정 페이지 ( 폼 양식 ) 통합 글 수정 / 삭제 시 업로드된 이미지 파일 삭제 회원 레벨이 1 인 부 관리자도 글을 수정 / 삭제 할 수 있도록 처리

Page 7: 13 장  연주회소개  게시판  제작

1.2 준비 파일과 페이지 구성

구분 파일 / 폴더명 기능

데이터베이스 concert.sql 연주회 소개 DB 테이블 생성

페이지

list.php 글 목록 페이지

write_form.php 글쓰기 페이지 ( 수정 포함 )

view.php 글 내용 보기 페이지

기능insert.php 글 저장 ( 수정 포함 )

delete.php 글 삭제

데이터 저장 data 이미지 업로드 폴더

[ 표 13-1] 연주회 소개 게시판 제작 실습에 사용하는 파일 / 폴더 목록

Page 8: 13 장  연주회소개  게시판  제작

1.2 준비 파일과 페이지 구성

[ 그림 13-2] 연주회 소개 게시판의 페이지와 기능 흐름

Page 9: 13 장  연주회소개  게시판  제작

2. DB 테이블 설계 및 생성

필드명 형식 추가 사항 설명

num intnot null, auto_increment, pri-mary key

일련번호

id char(15) not null 아이디

name char(10) not null 이름

nick char(10) not null 별명

subject char(100)

not null 제목

content text not null 글 내용

regist_day char(20) 작성일 및 시간

hit int 조회수

is_html char(1) HTML 쓰기

file_name_0

char(40) 업로드 이미지 1 의 파일명

file_name_1

char(40) 업로드 이미지 2 의 파일명

[ 표 13-2] 연주회 소개 데이터베이스 테이블 ( 테이블명 : concert)

Page 10: 13 장  연주회소개  게시판  제작

2. DB 테이블 설계 및 생성

필드명 형식 추가 사항 설명

file_name_3 char(40)

업로드 이미지 3 의 파일명

file_name_4 char(40)

업로드 이미지 4 의 파일명

file_copied_0

char(30)

업로드 이미지 1 의 저장 파일명

file_copied_1

char(30)

업로드 이미지 2 의 저장 파일명

file_copied_2

char(30)

업로드 이미지 3 의 저장 파일명

file_copied_3

char(30)

업로드 이미지 4 의 저장 파일명

file_copied_4

char(30)

업로드 이미지 5 의 저장 파일명

[ 표 13-2] 연주회 소개 데이터베이스 테이블 ( 테이블명 : concert)

Page 11: 13 장  연주회소개  게시판  제작

concert 데이터베이스 테이블 생성 concert.sql

create table concert ( num int not null auto_increment, id char(15) not null, name char(10) not null, nick char(10) not null, subject char(100) not null, content text not null, regist_day char(20), hit int, is_html char(1), file_name_0 char(40), file_name_1 char(40), file_name_2 char(40), file_name_3 char(40), file_name_4 char(40), file_copied_0 char(30), file_copied_1 char(30), file_copied_2 char(30), file_copied_3 char(30), file_copied_4 char(30),

primary key(num) );

Page 12: 13 장  연주회소개  게시판  제작

3.2 글쓰기 페이지 생성

[ 그림 13-6] 글쓰기 페이지

Page 13: 13 장  연주회소개  게시판  제작

예제 13-2 연주회 소개 게시판의 글쓰기 페이지 write_form.php

001 <? 002 session_start(); 003 include "../lib/dbconn.php";004 005 if($mode=="modify")006 {007 $sql="select * from $table where num=$num";008 $result=mysql_query($sql, $connect);009 $row=mysql_fetch_array($result); 010 011 $item_subject=$row[subject];012 $item_content=$row[content];014 $item_file_0=$row[file_name_0];015 $item_file_1=$row[file_name_1];016 $item_file_2=$row[file_name_2];017018 $copied_file_0=$row[file_copied_0];019 $copied_file_1=$row[file_copied_1];020 $copied_file_2=$row[file_copied_2];

Page 14: 13 장  연주회소개  게시판  제작

예제 13-2 연주회 소개 게시판의 글쓰기 페이지 write_form.php

021 }022 ?>023 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">024 <html>

<!-- 생 략 -->050 <body>

<!-- 생 략 -->080 <?081 if($mode=="modify")082 {083 ?>084 <form name="board_form" method="post" action="insert.php?mode=modify &num=<?=$num?>&page=<?=$page?>&table=<?=$table?>" enctype="multipart/form-data">085 <?086 }

Page 15: 13 장  연주회소개  게시판  제작

예제 13-2 연주회 소개 게시판의 글쓰기 페이지 write_form.php

087 else088 {089 ?>090 <form name="board_form" method="post" action="insert.php? table=<?=$table?>" enctype="multipart/form-data"> 091 <?092 }093 ?>094 <div id="write_form">095 <div class="write_line"></div>096 <div id="write_row1"><div class="col1"> 닉네임 </div> <div class="col2"><?=$usernick?></div>097 <?098 if($userid && ($mode!="modify"))099 {100 ?>101 <div class="col3"><input type="checkbox" name="html_ok" value="y"> HTML 쓰기 </div>102 <?103 }

Page 16: 13 장  연주회소개  게시판  제작

예제 13-2 연주회 소개 게시판의 글쓰기 페이지 write_form.php

104 ?>105 </div>106 <div class="write_line"></div>107 <div id="write_row2"><div class="col1"> 제목 </div>108 <div class="col2"><input type="text" name="subject" value="<?=$item_subject?>" ></div>109 </div>110 <div class="write_line"></div>111 <div id="write_row3"><div class="col1"> 내용 </div>112 <div class="col2"><textarea rows="15" cols="79" name="content"> <?=$item_content?></textarea></div>113 </div>114 <div class="write_line"></div>115 <div id="write_row4"><div class="col1"> 이미지파일 1 </div>116 <div class="col2"><input type="file" name="upfile[]"> </div>117 </div>118 <div class="clear"></div>

Page 17: 13 장  연주회소개  게시판  제작

예제 13-2 연주회 소개 게시판의 글쓰기 페이지 write_form.php

119 <?120 if($mode=="modify" && $item_file_0)121 {122 ?>123 <div class="delete_ok"><?=$item_file_0?> 파일이 등록되어 있습니다 . <input type="checkbox" name="del_file[]" value="0"> 삭제 </div>124 <div class="clear"></div>125 <?126 }127 ?>128 <div class="write_line"></div>129 <div id="write_row5"><div class="col1"> 이미지파일 2 </div>130 <div class="col2"><input type="file" name="upfile[]"></div>131 </div>132 <?133 if($mode=="modify" && $item_file_1)134 {135 ?>136 <div class="delete_ok"><?=$item_file_1?> 파일이 등록되어 있습니다 . <input type="checkbox" name="del_file[]" value="1"> 삭제 </div>

Page 18: 13 장  연주회소개  게시판  제작

예제 13-2 연주회 소개 게시판의 글쓰기 페이지 write_form.php

137 <div class="clear"></div>138 <?139 }140 ?>141 <div class="write_line"></div>142 <div class="clear"></div>143 <div id="write_row6"><div class="col1"> 이미지파일 3 </div>144 <div class="col2"><input type="file" name="upfile[]"></div>145 </div>146 <?147 if($mode=="modify" && $item_file_2)148 {149 ?>150 <div class="delete_ok"><?=$item_file_2?> 파일이 등록되어 있습니다 . <input type="checkbox" name="del_file[]" value="2"> 삭제 </div>151 <div class="clear"></div>

Page 19: 13 장  연주회소개  게시판  제작

예제 13-2 연주회 소개 게시판의 글쓰기 페이지 write_form.php

152 <?153 }154 ?>155 <div class="write_line"></div>156 <div class="clear"></div>157 </div>158159 <div id="write_button"><a href="#"> <img src="../img/ok.png" onclick="check_input()"></a>&nbsp;160 <a href="list.php?table=<?=$table?>&page=<?=$page?>"> <img src="../img/list.png"></a>161 </div>162 163 </form>

<!-- 생 략 -->169 </body>170 </html>

Page 20: 13 장  연주회소개  게시판  제작

3.2 글쓰기 페이지 생성

배열 설명

$_FILES ["upfile"]["name"] 업로드하는 실제 파일명

$_FILES ["upfile"]["tmp_name"]

서버에 저장되는 임시 파일명

$_FILES ["upfile"]["type"] 업로드 파일 형식

$_FILES ["upfile"]["size"] 업로드 파일 크기

$_FILES ["upfile"]["error"] 에러 발생 확인

[ 표 13-3] name 속성이 upfile[] 일 때 , 전달되는 배열 변수

Page 21: 13 장  연주회소개  게시판  제작

예제 13-3 연주회 소개 글 저장 insert.php

001 <? session_start(); ?>002003 <meta charset="euc-kr">004 <?

<!-- 생 략 -->026 // 다중 파일 업로드027 $files=$_FILES["upfile"];028 $count=count($files["name"]);029 030 $upload_dir='./data/';031 032 for($i=0; $i<$count; $i++)033 {034 $upfile_name[$i]=$files["name"][$i];035 $upfile_tmp_name[$i]=$files["tmp_name"][$i];036 $upfile_type[$i]=$files["type"][$i];037 $upfile_size[$i]=$files["size"][$i];038 $upfile_error[$i]=$files["error"][$i];039

Page 22: 13 장  연주회소개  게시판  제작

예제 13-3 연주회 소개 글 저장 insert.php

040 $file=explode(".", $upfile_name[$i]);041 $file_name=$file[0];042 $file_ext=$file[1];043044 if(!$upfile_error[$i])045 {046 $new_file_name=date("Y_m_d_H_i_s");047 $new_file_name=$new_file_name."_".$i;048 $copied_file_name[$i]=$new_file_name.".".$file_ext; 049 $uploaded_file[$i]=$upload_dir.$copied_file_name[$i];050 051 if($upfile_size[$i]>500000)052 {053 echo("054 <script>055 alert(' 업로드 파일 크기가 지정된 용량 (500KB) 을 초과합니다 !<br> 파일 크기를 체크해주세요 ! ');056 history.go(-1)057 </script>

Page 23: 13 장  연주회소개  게시판  제작

예제 13-3 연주회 소개 글 저장 insert.php

058 ");059 exit;060 }061 062 if(($upfile_type[$i]!="image/gif") && ($upfile_type[$i]!="image/jpeg") && ($upfile_type[$i]!="image/pjpeg"))063 {064 echo("065 <script>066 alert('JPG 와 GIF 이미지 파일만 업로드 가능합니다 !');067 history.go(-1)068 </script>069 ");070 exit;071 }072

Page 24: 13 장  연주회소개  게시판  제작

예제 13-3 연주회 소개 글 저장 insert.php

073 if(!move_uploaded_file($upfile_tmp_name[$i], $uploaded_file[$i]))074 {075 echo("076 <script>077 alert(' 파일을 지정한 디렉토리에 복사하는데 실패했습니다 .');078 history.go(-1)079 </script>080 ");081 exit;082 }083 }084 } // for 문 종료 (32 행 )085 086 include "../lib/dbconn.php"; // dcnn.php 파일을 불러옴087

Page 25: 13 장  연주회소개  게시판  제작

예제 13-3 연주회 소개 글 저장 insert.php

088 if($mode=="modify") // 수정 글 저장089 {090 $num_checked=count($_POST['del_file']);091 $position=$_POST['del_file'];092 093 for($i=0; $i<$num_checked; $i++) // 삭제 표시한 항목094 {095 $index=$position[$i];096 $del_ok[$index]="y";097 }098 099 $sql="select * from $table where num=$num"; // 수정할 레코드 검색100 $result=mysql_query($sql);101 $row=mysql_fetch_array($result);102

Page 26: 13 장  연주회소개  게시판  제작

예제 13-3 연주회 소개 글 저장 insert.php

103 for($i=0; $i<$count; $i++)104 {105 $field_org_name="file_name_".$i;106 $field_real_name="file_copied_".$i;107 108 $org_name_value=$upfile_name[$i];109 $org_real_value=$copied_file_name[$i];110 if($del_ok[$i]=="y")111 {112 $delete_field="file_copied_".$i;113 $delete_name=$row[$delete_field];114 $delete_path="./data/".$delete_name;115116 unlink($delete_path);117 118 $sql="update $table set $field_org_name='$org_name_value', $field_real_name='$org_real_value' where num=$num";119 mysql_query($sql, $connect); // $sql 에 저장된 명령 실행120 }

Page 27: 13 장  연주회소개  게시판  제작

예제 13-3 연주회 소개 글 저장 insert.php

121 else122 {123 if(!$upfile_error[$i])124 {125 $sql="update $table set $field_org_name='$org_name_value', $field_real_name='$org_real_value' where num=$num";126 mysql_query($sql, $connect); // $sql 에 저장된 명령 실행127 }128 }129 } //end of for 문130 $sql="update $table set subject='$subject', content='$content' where num=$num";131 mysql_query($sql, $connect); // $sql 에 저장된 명령 실행132 }

Page 28: 13 장  연주회소개  게시판  제작

예제 13-3 연주회 소개 글 저장 insert.php

133 else // 새로 작성되는 글 저장134 {135 if($html_ok=="y")136 {137 $is_html="y";138 }139 else140 {141 $is_html="";142 $content=htmlspecialchars($content);143 }144 145 $sql="insert into $table (id, name, nick, subject, content, regist_day, hit, is_html, ";146 $sql.="file_name_0, file_name_1, file_name_2, file_copied_0, file_copied_1, file_copied_2) ";147 $sql.="values('$userid', '$username', '$usernick', '$subject', '$content', '$regist_day', 0, '$is_html', ";

Page 29: 13 장  연주회소개  게시판  제작

예제 13-3 연주회 소개 글 저장 insert.php

148 $sql.="'$upfile_name[0]', '$upfile_name[1]', '$upfile_name[2]', '$copied_file_name[0]', '$copied_file_name[1]', '$copied_file_name[2]')";149 mysql_query($sql, $connect); // $sql 에 저장된 명령 실행150 }151 mysql_close(); // 데이터베이스 연결 끊기 152 echo ("153 <script>154 location.href='list.php?table=$table&page=$page';155 </script>156 ");157 ?>

Page 30: 13 장  연주회소개  게시판  제작

4.1 글 내용 보기 페이지 생성

[ 그림 13-8] 글 내용 보기 페이지

Page 31: 13 장  연주회소개  게시판  제작

예제 13-4 연주회 소개 게시판의 글 내용 보기 페이지 view.php

001 <? 002 session_start(); 003 include "../lib/dbconn.php";004005 $sql="select * from $table where num=$num";006 $result=mysql_query($sql, $connect);007 $row=mysql_fetch_array($result); 008 // 하나의 레코드 가져오기009 010 $item_num=$row[num];011 $item_id=$row[id];012 $item_name=$row[name];013 $item_nick=$row[nick];014 $item_hit=$row[hit];015 016 $image_name[0]=$row[file_name_0];017 $image_name[1]=$row[file_name_1];018 $image_name[2]=$row[file_name_2];019

Page 32: 13 장  연주회소개  게시판  제작

예제 13-4 연주회 소개 게시판의 글 내용 보기 페이지 view.php

020 $image_copied[0]=$row[file_copied_0];021 $image_copied[1]=$row[file_copied_1];022 $image_copied[2]=$row[file_copied_2];023 024 $item_date=$row[regist_day];025 $item_subject=str_replace(" ", "&nbsp;", $row[subject]);026 $item_content=$row[content];027 $is_html=$row[is_html];028 029 if($is_html!="y")030 {031 $item_content=str_replace(" ", "&nbsp;", $item_content);032 $item_content=str_replace("\n", "<br>", $item_content);033 }034035 for($i=0; $i<3; $i++)036 {

Page 33: 13 장  연주회소개  게시판  제작

예제 13-4 연주회 소개 게시판의 글 내용 보기 페이지 view.php

037 if($image_copied[$i]) 038 {039 $imageinfo=GetImageSize("./data/".$image_copied[$i]);040041 $image_width[$i]=$imageinfo[0];042 $image_height[$i]=$imageinfo[1];043 $image_type[$i]=$imageinfo[2];044 045 if($image_width[$i]>785)046 $image_width[$i]=785;047 }048 else049 {050 $image_width[$i]="";051 $image_height[$i]="";052 $image_type[$i]="";053 }054 }055

Page 34: 13 장  연주회소개  게시판  제작

예제 13-4 연주회 소개 게시판의 글 내용 보기 페이지 view.php

056 // 글 조회수 증가057 $new_hit=$item_hit + 1;058 $sql="update $table set hit=$new_hit where num=$num"; 059 mysql_query($sql, $connect);060 ?>061 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">062 <html>063 <head> 064 <meta charset="euc-kr">065 <link href="../css/common.css" rel="stylesheet" type="text/css" media="all">066 <link href="../css/concert.css" rel="stylesheet" type="text/css" media="all">067 <script>068 function del(href) 069 {070 if(confirm(" 한번 삭제한 자료는 복구할 방법이 없습니다 . \n\n 정말 삭제하시겠습니까 ?"))

Page 35: 13 장  연주회소개  게시판  제작

예제 13-4 연주회 소개 게시판의 글 내용 보기 페이지 view.php

071 {072 document.location.href=href;073 }074 }075 </script>076 </head>077078 <body>

<!-- 생 략 -->096 <div id="col2"> 097 <div id="title">098 <img src="../img/title_concert.gif">099 </div>100 <div id="view_comment"> &nbsp;</div>101 <div id="view_title">102 <div id="view_title1"><?=$item_subject ?></div><div id="view_title2"> <?=$item_nick ?> | 조회 : <?=$item_hit ?> | <?=$item_date ?></div>103 </div>

Page 36: 13 장  연주회소개  게시판  제작

예제 13-4 연주회 소개 게시판의 글 내용 보기 페이지 view.php

105 <div id="view_content">106 <?107 for($i=0; $i<3; $i++)108 {109 if($image_copied[$i])110 {111 $img_name=$image_copied[$i];112 $img_name="./data/".$img_name;113 $img_width=$image_width[$i];114115 echo "<img src='$img_name' width='$img_width'>"."<br><br>";116 }117 }118 ?>119 <?= $item_content ?>120 </div>121

Page 37: 13 장  연주회소개  게시판  제작

예제 13-4 연주회 소개 게시판의 글 내용 보기 페이지 view.php

122 <div id="view_button">123 <a href="list.php?table=<?=$table?>&page=<?=$page?>"><imgsrc="../img/list.png"> </a>&nbsp;124 <? 125 if($userid==$item_id || $userid="admin" || $userlevel==1 )126 {127 ?>128 <a href="write_form.php?table=<?=$table?>&mode=modify& num=<?=$num?>&page=<?=$page?>"><img src="../img/modify.png"></a>&nbsp;129 <a href="javascript:del('delete.php?table=<?=$table?>&num=<?=$num?>')"> <img src="../img/delete.png"></a>&nbsp;130 <?131 }132 ?>

Page 38: 13 장  연주회소개  게시판  제작

예제 13-4 연주회 소개 게시판의 글 내용 보기 페이지 view.php

133 <? 134 if($userid)135 {136 ?>137 <a href="write_form.php?table=<?=$table?>"><img src="../img/write.png"></a>138 <?139 }140 ?>141 </div>142 <div class="clear"></div>143 </div> <!-- end of col2 -->144 </div> <!-- end of content -->145 </div> <!-- end of wrap -->146147 </body>148 </html>

Page 39: 13 장  연주회소개  게시판  제작

예제 13-5 연주회 소개 글과 이미지 삭제 delete.php

01 <?02 session_start();03 include "../lib/dbconn.php";0405 $sql="select * from $table where num=$num";06 $result=mysql_query($sql, $connect); 07 $row=mysql_fetch_array($result);0809 $copied_name[0]=$row[file_copied_0];10 $copied_name[1]=$row[file_copied_1];11 $copied_name[2]=$row[file_copied_2];1213 for($i=0; $i<3; $i++)14 {

Page 40: 13 장  연주회소개  게시판  제작

예제 13-5 연주회 소개 글과 이미지 삭제 delete.php

15 if($copied_name[$i])16 {17 $image_name="./data/".$copied_name[$i];18 unlink($image_name);19 }20 }2122 $sql="delete from $table where num=$num";23 mysql_query($sql, $connect);24 25 mysql_close();26 27 echo ("28 <script>29 location.href='list.php?table=$table';30 </script>31 ");32 ?>

Page 41: 13 장  연주회소개  게시판  제작

count() 함수• 형식 int count(mixed $var) - 인자 : 배열 변수

• 기능 배열에 포함된 원소의 개수를 알려준다 .

• 사용 예 <? $a[0] =1; $a[1] =3; $a[2] =5; $result = count($a); echo $result; // 실행 결과 : 3 ?>

Page 42: 13 장  연주회소개  게시판  제작

move_uploaded_file() 함수• 형식 bool move_uploaded_file(string $filename , string $destination) - 첫 번째 인자 : 이동하려는 파일의 현재 위치 - 두 번째 인자 : 이동하려는 파일의 목적지

• 기능 첫 번째 인자에 업로드된 파일을 두 번째 인자가 있는 곳으로 이동시킨다 . 함수가 성공적으로 실행되면 TRUE 를 그렇지 않으면 FALSE 를 반환한다 . 목적지에 이미 파일이 존재한다면 새로운 파일로 교체되므로 주의한다 .

unlink() 함수• 형식 bool unlink (string $filename) - 인자 : 삭제하려는 파일명과 파일의 위치 ( 경로 )

• 기능 인자로 들어간 파일을 삭제한다 . 파일을 삭제하면 TRUE 를 그렇지 않으면 FALSE 를 반환한다 .

Page 43: 13 장  연주회소개  게시판  제작

GetImageSize() 함수• 형식 array GetImageSize(string $filename) - 인자 : 이미지 파일명과 파일의 위치 ( 경로 )

• 기능 인자로 들어간 이미지의 크기와 형식을 배열 형태로 반환한다 . 함수의 반환값인 배열에서 인덱스 [0], [1], [2] 는 각 이미지의 폭 (width), 높이 (height), 형식 (type) 을 의미한다 .


Recommended