1 / 43

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

13 장 연주회소개 게시판 제작. 글쓰기와 글 수정을 한 페이지에서 처리 이미지 파일 업로드 방법 숙지 이미지 파일명 변경하여 서버에 저장 저장된 이미지 가져와 화면에 출력 업로드된 이미지 파일 삭제 이미지 파일 변경. 연주회 소개 게시판의 개요 DB 테이블 설계 및 생성 글 작성과 이미지 파일 업로드 처리 글 내용 확인. 1.1 결과 화면과 요구사항. [ 그림 13-1] 연주회 소개의 글 내용 보기 화면. 1.1 결과 화면과 요구사항. 요구사항 이미지 파일 업로드

farren
Télécharger la présentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

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

  4. 1.1 결과 화면과 요구사항 [그림 13-1] 연주회 소개의 글 내용 보기 화면

  5. 1.1 결과 화면과 요구사항 • 요구사항 • 이미지 파일 업로드 • 세 개의 이미지 파일 업로드 가능 • 프로그램 확장을 고려해 다섯 개의 이미지를 업로드 할 수 있도록 데이터베이스 설계 • JPG, GIF 포맷만 업로드 가능 • 크기가 500KB 이하인 이미지 파일만 업로드 가능 • 업로드하는 이미지 파일명 변경을 통한 파일명 중복 방지 • 글쓰기와 글 수정 페이지(폼 양식) 통합 • 글 수정/삭제 시 업로드된 이미지 파일 삭제 • 회원 레벨이 1인 부 관리자도 글을 수정/삭제 할 수 있도록 처리

  6. 1.2 준비 파일과 페이지 구성 [표 13-1] 연주회 소개 게시판 제작 실습에 사용하는 파일/폴더 목록

  7. 1.2 준비 파일과 페이지 구성 [그림 13-2] 연주회 소개 게시판의 페이지와 기능 흐름

  8. 2. DB 테이블 설계 및 생성 [표 13-2] 연주회 소개 데이터베이스 테이블(테이블명: concert)

  9. 2. DB 테이블 설계 및 생성 [표 13-2] 연주회 소개 데이터베이스 테이블(테이블명: concert)

  10. concert 데이터베이스 테이블 생성 concert.sql create table concert ( numint 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_daychar(20), hit int, is_htmlchar(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) );

  11. 3.2 글쓰기 페이지 생성 [그림 13-6] 글쓰기 페이지

  12. 예제 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]; 017 018 $copied_file_0=$row[file_copied_0]; 019 $copied_file_1=$row[file_copied_1]; 020 $copied_file_2=$row[file_copied_2];

  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 }

  14. 예제 13-2 연주회 소개 게시판의 글쓰기 페이지 write_form.php 087 else 088 { 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 }

  15. 예제 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>

  16. 예제 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>

  17. 예제 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>

  18. 예제 13-2 연주회 소개 게시판의 글쓰기 페이지 write_form.php 152 <? 153 } 154 ?> 155 <div class="write_line"></div> 156 <div class="clear"></div> 157 </div> 158 159 <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>

  19. 3.2 글쓰기 페이지 생성 [표 13-3] name 속성이 upfile[]일 때, 전달되는 배열 변수

  20. 예제 13-3 연주회 소개 글 저장 insert.php 001 <? session_start(); ?> 002 003 <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

  21. 예제 13-3 연주회 소개 글 저장 insert.php 040 $file=explode(".", $upfile_name[$i]); 041 $file_name=$file[0]; 042 $file_ext=$file[1]; 043 044 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>

  22. 예제 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

  23. 예제 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

  24. 예제 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

  25. 예제 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; 115 116 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 }

  26. 예제 13-3 연주회 소개 글 저장 insert.php 121 else 122 { 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 }

  27. 예제 13-3 연주회 소개 글 저장 insert.php 133 else // 새로 작성되는 글 저장 134 { 135 if($html_ok=="y") 136 { 137 $is_html="y"; 138 } 139 else 140 { 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', ";

  28. 예제 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 ?>

  29. 4.1 글 내용 보기 페이지 생성 [그림 13-8] 글 내용 보기 페이지

  30. 예제 13-4 연주회 소개 게시판의 글 내용 보기 페이지 view.php 001 <? 002 session_start(); 003 include "../lib/dbconn.php"; 004 005 $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

  31. 예제 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 } 034 035 for($i=0; $i<3; $i++) 036 {

  32. 예제 13-4 연주회 소개 게시판의 글 내용 보기 페이지 view.php 037 if($image_copied[$i]) 038 { 039 $imageinfo=GetImageSize("./data/".$image_copied[$i]); 040 041 $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 else 049 { 050 $image_width[$i]=""; 051 $image_height[$i]=""; 052 $image_type[$i]=""; 053 } 054 } 055

  33. 예제 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 정말 삭제하시겠습니까?"))

  34. 예제 13-4 연주회 소개 게시판의 글 내용 보기 페이지 view.php 071 { 072 document.location.href=href; 073 } 074 } 075 </script> 076 </head> 077 078 <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>

  35. 예제 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]; 114 115 echo "<img src='$img_name' width='$img_width'>"."<br><br>"; 116 } 117 } 118 ?> 119 <?= $item_content ?> 120 </div> 121

  36. 예제 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 ?>

  37. 예제 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 --> 146 147 </body> 148 </html>

  38. 예제 13-5 연주회 소개 글과 이미지 삭제 delete.php 01 <? 02 session_start(); 03 include "../lib/dbconn.php"; 04 05 $sql="select * from $table where num=$num"; 06 $result=mysql_query($sql, $connect); 07 $row=mysql_fetch_array($result); 08 09 $copied_name[0]=$row[file_copied_0]; 10 $copied_name[1]=$row[file_copied_1]; 11 $copied_name[2]=$row[file_copied_2]; 12 13 for($i=0; $i<3; $i++) 14 {

  39. 예제 13-5 연주회 소개 글과 이미지 삭제 delete.php 15 if($copied_name[$i]) 16 { 17 $image_name="./data/".$copied_name[$i]; 18 unlink($image_name); 19 } 20 } 21 22 $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 ?>

  40. count() 함수 형식 int count(mixed $var) - 인자: 배열 변수 기능 배열에 포함된 원소의 개수를 알려준다. 사용 예 <? $a[0] =1; $a[1] =3; $a[2] =5; $result = count($a); echo $result; // 실행 결과: 3 ?>

  41. move_uploaded_file() 함수 • unlink() 함수 형식 bool move_uploaded_file(string $filename , string $destination) - 첫 번째 인자: 이동하려는 파일의 현재 위치 - 두 번째 인자: 이동하려는 파일의 목적지 기능 첫 번째 인자에 업로드된 파일을 두 번째 인자가 있는 곳으로 이동시킨다. 함수가 성공적으로 실행되면 TRUE를 그렇지 않으면 FALSE를 반환한다. 목적지에 이미 파일이 존재한다면 새로운 파일로 교체되므로 주의한다. 형식 bool unlink (string $filename) - 인자: 삭제하려는 파일명과 파일의 위치(경로) 기능 인자로 들어간 파일을 삭제한다. 파일을 삭제하면 TRUE를 그렇지 않으면 FALSE를 반환한다.

  42. GetImageSize() 함수 형식 array GetImageSize(string $filename) - 인자: 이미지 파일명과 파일의 위치(경로) 기능 인자로 들어간 이미지의 크기와 형식을 배열 형태로 반환한다. 함수의 반환값인 배열에서 인덱스 [0], [1], [2]는 각 이미지의 폭(width), 높이(height), 형식(type)을 의미한다.

More Related