웹 사이트 초기 화면 제작

4 장 웹 사이트 초기 화면 제작9 장

2 2

Section 01Section 01학습 목표학습 목표

완성된 실습 홈페이지의 기능을 이해한다

홈페이지의 프레임 구성을 이해한다

세션 변수를 이용하는 법을 익힌다

홈페이지 초기 화면을 제작하는 법을 익힌다 .

3 3

Section 01Section 01주요 학습 내용주요 학습 내용

01. 완성된 홈페이지

02. 홈페이지 초기 화면

4 4

Section 01Section 01 완성된 홈페이지 완성된 홈페이지 01

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

5 5

Section 01Section 01 실습 홈페이지 기능실습 홈페이지 기능02

⑴ 회원가입 및 로그인 기능

⑵ 블로그형 방명록

⑶ 누구나 자유롭게 글을 쓸 수 있는 자유게시판

⑷ 관리자만이 글을 쓸 수 있는 리플형의 공지사항

게시판

⑸ 답변글을 올릴 수 있는 질의응답 게시판

⑹ 파일 첨부 기능이 있는 자료실

⑺ 설문조사

6 6

Section 01Section 01 홈페이지 초기 화면 ( 로그인 전 )홈페이지 초기 화면 ( 로그인 전 )03

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

7 7

Section 01Section 01 홈페이지 초기 화면 ( 로그인 후 )홈페이지 초기 화면 ( 로그인 후 )04

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

8 8

Section 01Section 01 초기 홈페이지 프레임 구성초기 홈페이지 프레임 구성05

상단 프레임 ( 메뉴 부분 ) : top.php

하단 프레임 ( 메인 부분 ) : main_init.php

사용되는 3 개 파일

⑴ index.php : 메인 화면의 틀⑵ top.php : 메인 화면의 상단 프레임 ( 메뉴 부분 ) ⑶ main_init.php : 메인 화면의 하단 프레임 ( 메인 부분 )

9 9

Section 01Section 01

홈페이지 화면의 프레임 틀

02【예제 9-1 】 index.php 【예제 9-1 】 index.php

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>

10 10


상단 프레임

02【예제 9-2 】 top.php 【예제 9-2 】 top.php

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>

11 11

Section 01Section 0102【예제 9-2 】 top.php 【예제 9-2 】 top.php

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 : }

12 12


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 : ?>

13 13


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>

방명록

자유게시판 버튼

자유게시판 목록보기 방명록 버튼

공지사항 버튼

자유게시판 버튼

공지사항 목록보기

질의응답 목록보기

14 14


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>

설문조사 버튼

설문조사자료실 버튼

자료실 목록보기

15 15


초기 하단 프레임

02【예제 9-3 】 main_init.php 【예제 9-3 】 main_init.php

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>

Documents

웹 사이트 초기 화면 제작