9장 웹 사이트 초기 화면 제작 한빛미디어(주)
학습 목표 완성된 실습 홈페이지의 기능을 이해한다 홈페이지의 프레임 구성을 이해한다 세션 변수를 이용하는 법을 익힌다 홈페이지 초기 화면을 제작하는 법을 익힌다.
주요 학습 내용 01. 완성된 홈페이지 02. 홈페이지 초기 화면
[그림 9-1] 완성된 홈페이지(http://php.swc.ac.kr) 01 [그림 9-1] 완성된 홈페이지(http://php.swc.ac.kr)
실습 홈페이지 기능 02 ⑴ 회원가입 및 로그인 기능 ⑵ 블로그형 방명록 ⑶ 누구나 자유롭게 글을 쓸 수 있는 자유게시판 ⑷ 관리자만이 글을 쓸 수 있는 리플형의 공지사항 게시판 ⑸ 답변글을 올릴 수 있는 질의응답 게시판 ⑹ 파일 첨부 기능이 있는 자료실 ⑺ 설문조사
홈페이지 초기 화면 (로그인 전) 03 [그림 9-2] 로그인 전의 홈페이지 초기 화면
홈페이지 초기 화면 (로그인 후) 04 [그림 9-3] 로그인 후의 홈페이지 초기 화면
하단 프레임(메인 부분) : main_init.php 초기 홈페이지 프레임 구성 05 상단 프레임(메뉴 부분) : top.php 하단 프레임(메인 부분) : main_init.php 사용되는 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 : { 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 71 : <TD> 72 : <a href="notice/list.php" target="main"> 73 : <img SRC="img/menu_06.gif" WIDTH=90 HEIGHT=47 74 : <TD> 75 : <a href="qna/list.php" target="main"> 76 : <img SRC="img/menu_07.gif" WIDTH=85 HEIGHT=47 자유게시판 목록보기 방명록 버튼 공지사항 목록보기 자유게시판 버튼 질의응답 목록보기 공지사항 버튼 자유게시판 버튼
【예제 9-2】top.php 02 77 : <TD> 자료실 목록보기 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 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>