웹 사이트 초기 화면 제작

9장 웹 사이트 초기 화면 제작 한빛미디어(주)

학습 목표 • 완성된 실습 홈페이지의 기능을 이해한다 • 홈페이지의 프레임 구성을 이해한다 • 세션 변수를 이용하는 법을 익힌다 • 홈페이지 초기 화면을 제작하는 법을 익힌다.

주요 학습 내용 01. 완성된 홈페이지 02. 홈페이지 초기 화면

완성된 홈페이지 01 [그림 9-1] 완성된 홈페이지(http://php.swc.ac.kr)

실습 홈페이지 기능 02 ⑴ 회원가입 및 로그인 기능 ⑵ 블로그형 방명록 ⑶ 누구나 자유롭게 글을 쓸 수 있는 자유게시판 ⑷ 관리자만이 글을 쓸 수 있는 리플형의 공지사항 게시판 ⑸ 답변글을 올릴 수 있는 질의응답 게시판 ⑹ 파일 첨부 기능이 있는 자료실 ⑺ 설문조사

홈페이지 초기 화면 (로그인 전) 03 [그림 9-2] 로그인 전의 홈페이지 초기 화면

홈페이지 초기 화면 (로그인 후) 04 [그림 9-3] 로그인 후의 홈페이지 초기 화면

초기 홈페이지 프레임 구성 05 • 사용되는 3개 파일 ⑴ index.php : 메인 화면의 틀 ⑵ top.php : 메인 화면의 상단 프레임(메뉴 부분) ⑶ main_init.php : 메인 화면의 하단 프레임(메인 부분)

【예제 9-1】index.php 02 • 홈페이지 화면의 프레임 틀 1 : <html> 2 : <head> 3 : <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ks_c_5601-1987"> 4 : <title>:: PHP 프로그래밍 입문에 오신 것을 환영합니다~~ ::</title> 5 : </head> 6 : 7 :<frameset framespacing="0" border="0" frameborder="0“ rows="210,*"> 8 :<frame name="top" src="top.php" scrolling="auto" noresize> 9 :<frame name="main" src="main_init.php" scrolling="auto" noresize> 10 : </frameset> 11 : 12 : </html>

【예제 9-2】top.php 02 • 상단 프레임 1 : <? session_start(); ?>// 세션 변수 초기화 4 : <html> 5 : <head> 6 : <title>:: PHP 프로그래밍 입문에 오신것을 환영합니다~~ ::</title> 7 : <link rel="stylesheet" href="style.css" type="text/css"> 8 : </head> 9 : <body leftmargin="0" topmargin="0" marginwidth="0“ marginheight="0"> 10 :<table width="776" align="center" cellspacing="0" cellpadding="0" border="0"> 11 :<tr><td> 13 : <table width=776 cellspacing="0" cellpadding="0" border="0"> 15 : <tr> <td colspan="10"> 17 : <img border="0" src="img/sub_title.gif" width="776" height="146"></td></tr>

【예제 9-2】top.php 02 31 : <? 32 :if (!$userid) 33 :{ 34 : echo "<TD> 36 : <a href='login/login_form.html' target='main'> 37 : <img SRC='img/menu_02.gif' WIDTH=87 HEIGHT=47 border=0 ALT=''></a></TD> "; 39 :} 40 :else 41 :{ 42 :echo " <TD> 44 : <a href='login/logoff.php' target='main'> 45 : <img SRC='img/menu_10.gif' WIDTH=87 HEIGHT=47 border=0 ALT=''></a></TD> "; 47 :}

【예제 9-2】top.php 02 48 :if (!$userid) 49 :{echo " 51 : <TD> 52 : <a href='login/member_form.html' target='main'> 53 : <img SRC='img/menu_03.gif' WIDTH=84 HEIGHT=47 border=0 ALT=''></a></TD> "; 55 :} 56 :else 57 : {echo " 59 : <TD> 60 : <a href='login/modify_memberinfo.php' target='main'> 61 : <img SRC='img/menu_11.gif' WIDTH=84 HEIGHT=47 border=0 ALT=''></a></TD> "; 63 :} 64 : ?>

【예제 9-2】top.php 02 방명록 65 : <TD> 66 : <a href="guestbook/guestbook.php" target="main"> 67 : <img SRC="img/menu_04.gif" WIDTH=86 HEIGHT=47 border=0 ALT=""></a></TD> 68 : <TD> 69 : <a href="freeboard/list.php" target="main"> 70 : <img SRC="img/menu_05.gif" WIDTH=86 HEIGHT=47 border=0 ALT=""></a></TD> 71 : <TD> 72 : <a href="notice/list.php" target="main"> 73 : <img SRC="img/menu_06.gif" WIDTH=90 HEIGHT=47 border=0 ALT=""></a></TD> 74 : <TD> 75 : <a href="qna/list.php" target="main"> 76 : <img SRC="img/menu_07.gif"WIDTH=85 HEIGHT=47 border=0 ALT=""></a></TD> 자유게시판 목록보기 방명록 버튼 공지사항 목록보기 자유게시판 버튼 질의응답 목록보기 공지사항 버튼 자유게시판 버튼

【예제 9-2】top.php 02 자료실 목록보기 77 : <TD> 78 : <a href="down/list.php" target="main"> 79 : <img SRC="img/menu_08.gif" WIDTH=88 HEIGHT=47 border=0 ALT=""></a></TD> 80 : <TD> 81 : <a href="survey/survey.php" target="main"> 82 : <img SRC="img/menu_09.gif" WIDTH=89 HEIGHT=47 border=0 ALT=""></a></TD> 83 : </TR> 84 : </table> 85 : </td> 86 : </tr> 87 : </table> 88 :  89 : </body> 90 : </html> 자료실 버튼 설문조사 설문조사 버튼

【예제 9-3】main_init.php 02 • 초기 하단 프레임 1 : <html> 2 : <head> 3 : <title> :: PHP 프로그래밍 입문에 오신 것을 환영합니다~~ :: </title> 4 : <link rel="stylesheet" href="style.css" type="text/css"> 5 : </head> 7 : <body leftmargin="0" topmargin="0" marginwidth="0“ marginheight="0"> 8 : <table width="776" align="center" cellspacing="0" cellpadding="0“ border="0"> 9 : <tr height=150><td></td></tr> 10 : <tr align=center> 11 : <td> 메인화면 입니다. </td></tr> 15 : </table> 16 : </body> 17 : </html>

웹 사이트 초기 화면 제작

웹 사이트 초기 화면 제작

Presentation Transcript