Download presentation
Presentation is loading. Please wait.
1
09장 실습 웹 사이트 소개와 회원가입 페이지 제작
3
실습 웹 사이트 전체 구성 파악 웹 사이트의 기능 숙지 회원 정보 테이블 설계 DB에 데이터 저장 회원가입 양식 제작 아이디 중복 확인 기능
4
실습 웹 사이트의 개요 초기 메인 화면 제작 회원가입 처리
5
1.1 실습 웹 사이트의 구성 [그림 9-1] 실습 웹 사이트의 초기 메인 화면
![1.1 실습 웹 사이트의 구성 [그림 9-1] 실습 웹 사이트의 초기 메인 화면](http://slidesplayer.org/slide/12583591/76/images/5/1.1+%EC%8B%A4%EC%8A%B5+%EC%9B%B9+%EC%82%AC%EC%9D%B4%ED%8A%B8%EC%9D%98+%EA%B5%AC%EC%84%B1+%5B%EA%B7%B8%EB%A6%BC+9-1%5D+%EC%8B%A4%EC%8A%B5+%EC%9B%B9+%EC%82%AC%EC%9D%B4%ED%8A%B8%EC%9D%98+%EC%B4%88%EA%B8%B0+%EB%A9%94%EC%9D%B8+%ED%99%94%EB%A9%B4.jpg "1.1 실습 웹 사이트의 구성 [그림 9-1] 실습 웹 사이트의 초기 메인 화면")
6
1.1 실습 웹 사이트의 구성 회원가입(9장) 로그인/로그아웃, 회원정보 수정(10장) 낙서장(11장) 가입인사(12장)
연주회소개(13장) 자료실(14장) 자유게시판(15장) 레슨 문의(16장) 설문 조사(17장) 최근 글 불러오기(17장)
7
1.2 초기 메인 화면 제작 [그림 9-3] 초기 메인 화면의 구성
![1.2 초기 메인 화면 제작 [그림 9-3] 초기 메인 화면의 구성](http://slidesplayer.org/slide/12583591/76/images/7/1.2+%EC%B4%88%EA%B8%B0+%EB%A9%94%EC%9D%B8+%ED%99%94%EB%A9%B4+%EC%A0%9C%EC%9E%91+%5B%EA%B7%B8%EB%A6%BC+9-3%5D+%EC%B4%88%EA%B8%B0+%EB%A9%94%EC%9D%B8+%ED%99%94%EB%A9%B4%EC%9D%98+%EA%B5%AC%EC%84%B1.jpg "1.2 초기 메인 화면 제작 [그림 9-3] 초기 메인 화면의 구성")
8
예제 9-1 실습 웹 사이트의 초기 메인 화면 index.php 01 <? 02 session_start();
03 ?> 04 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " 05 <html> 06 <head> 07 <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> 08 <link rel="stylesheet" type="text/css" href="css/common.css"> 09 </head> 10 11 <body> 12 <div id="wrap"> 13 <div id="header"> 14 <? include "./lib/top_login1.php"; ?> 15 </div> <!-- end of header --> 17 <div id="menu"> 18 <? include "./lib/top_menu1.php"; ?> 19 </div> <!-- end of menu -->
9
예제 9-1 실습 웹 사이트의 초기 메인 화면 include index.php 20
21 <div id="content"> 22 <div id="main_img"><img src="./img/main_img.jpg"></div> 23 </div> <!-- end of content --> 24 </div> <!-- end of wrap --> 25 26 </body> 27 </html> include 형식 include "경로/파일명"; 기능 C언어의 #include와 같이 "파일명"에 해당하는 파일을 현재의 위치에 삽입한다.만약 경로가 표시되지 않았다면, 삽입하려는 파일이 include를 사용한 파일과 동일한 폴더에 존재하는 것으로 간주한다.
10
예제 9-2 메인 화면의 상단 헤더 파일 top_login1.php
01 <div id="logo"><a href="index.php"><img src="./img/logo.gif" border="0“></a></div> 02 <div id="moto"><img src="./img/moto.gif"></div> 03 <div id="top_login"> 04 <? 05 if(!$userid) 06 { 07 ?> 08 <a href="./login/login_form.php">로그인</a> | <a href="./member/member_form.php">회원가입</a> 09 <? 10 } 11 else 12 { 13 ?> 14 <?=$usernick?> (level:<?=$userlevel?>) | 15 <a href="./login/logout.php">로그아웃</a> | <a href="./login/member_form_modify.php">정보수정</a> 16 <? 17 } 18 ?> 19 </div>
11
예제 9-3 메인 메뉴 top_menu1.php 01 <div class="menus"><a href="./memo/memo.php"> <img src="./img/menu01.gif" border="0"></a></div> 02 <div class="menus"><a href="./greet/list.php"> <img src="./img/menu02.gif" border="0"></a></div> 03 <div class="menus"><a href="./concert/list.php"> <img src="./img/menu03.gif" border="0"></a></div> 04 <div class="menus"><a href="./download/list.php"> <img src="./img/menu04.gif" border="0"></a></div> 05 <div class="menus"><a href="./free/list.php"> <img src="./img/menu05.gif" border="0"></a></div> 06 <div class="menus"><a href="./qna/list.php"> <img src="./img/menu06.gif" border="0"></a></div> 07 <div class="menus"><a href="#"><img src="./img/menu07.gif" onclick="window.open('./survey/survey.php', '','scrollbars=no, toolbars=no,width=180,height=230')" border="0"></a></div>
12
3.1 회원정보 DB 설계 및 생성 [표 9-3] 회원정보 데이터베이스 테이블(테이블명: member) 필드명 타입 추가 사항
설명 id char(15) not null, primary key 아이디 pass not null 비밀번호 name char(10) 이름 nick 닉네임 hp char(20) 휴대폰 번호 char(80) 이메일 주소 regist_day 가입일 level int 회원 레벨
![3.1 회원정보 DB 설계 및 생성 [표 9-3] 회원정보 데이터베이스 테이블(테이블명: member) 필드명 타입 추가 사항](http://slidesplayer.org/slide/12583591/76/images/12/3.1+%ED%9A%8C%EC%9B%90%EC%A0%95%EB%B3%B4+DB+%EC%84%A4%EA%B3%84+%EB%B0%8F+%EC%83%9D%EC%84%B1+%5B%ED%91%9C+9-3%5D+%ED%9A%8C%EC%9B%90%EC%A0%95%EB%B3%B4+%EB%8D%B0%EC%9D%B4%ED%84%B0%EB%B2%A0%EC%9D%B4%EC%8A%A4+%ED%85%8C%EC%9D%B4%EB%B8%94%28%ED%85%8C%EC%9D%B4%EB%B8%94%EB%AA%85%3A+member%29+%ED%95%84%EB%93%9C%EB%AA%85+%ED%83%80%EC%9E%85+%EC%B6%94%EA%B0%80+%EC%82%AC%ED%95%AD.jpg "설명. id. char(15) not null, primary key. 아이디. pass. not null. 비밀번호. name. char(10) 이름. nick. 닉네임. hp. char(20) 휴대폰 번호. . char(80) 이메일 주소. regist_day. 가입일. level. int. 회원 레벨.")
13
member 데이터베이스 테이블 생성 member.sql create table member (
id char(15) not null, pass char(15) not null, name char(10) not null, nick char(10) not null, hp char(20) not null, char(80), regist_day char(20), level int, primary key(id) );
14
3.1 회원정보 DB 설계 및 생성 member.sql 일괄 실행
C:\APM_Setup\htdocs\member>mysql -ukdhong -p1234 kdhong_db < member.sql kdhong 계정 접속 -> member 테이블 생성과 구조 확인 C:\APM_Setup\htdocs\member>mysql -ukdhong -p1234 kdhong_db mysql> show tables; mysql> desc member; [그림 9-4] kdhong 계정에 member.sql 파일 일괄 실행
15
3.2 회원가입 페이지 생성 [그림 9-6] 회원가입 페이지
[참고] 회원가입 페이지에서 실제로 ㅚ원으로 가입해보면서 <중복확인>,<저장하기>,<취소하기>를 클릭해본다. 여기에서는 7장에서 사용한 계정(frontosa)을 이용해 홈페이지에 회원으로 가입한다.
![3.2 회원가입 페이지 생성 [그림 9-6] 회원가입 페이지](http://slidesplayer.org/slide/12583591/76/images/15/3.2+%ED%9A%8C%EC%9B%90%EA%B0%80%EC%9E%85+%ED%8E%98%EC%9D%B4%EC%A7%80+%EC%83%9D%EC%84%B1+%5B%EA%B7%B8%EB%A6%BC+9-6%5D+%ED%9A%8C%EC%9B%90%EA%B0%80%EC%9E%85+%ED%8E%98%EC%9D%B4%EC%A7%80.jpg "[참고] 회원가입 페이지에서 실제로 ㅚ원으로 가입해보면서 <중복확인>,<저장하기>,<취소하기>를 클릭해본다. 여기에서는 7장에서 사용한 계정(frontosa)을 이용해 홈페이지에 회원으로 가입한다.")
16
예제 9-4 회원가입 페이지 member_form.php 001 <? 002 session_start();
003 ?> 004 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN“ " 005 <html> 006 <head> 007 <meta charset="euc-kr"> 008 <link href="../css/common.css" rel="stylesheet" type="text/css" media="all"> 009 <link href="../css/member.css" rel="stylesheet" type="text/css" media="all">
17
예제 9-4 회원가입 페이지 member_form.php 010 <script>
011 function check_id() 012 { 013 window.open("check_id.php?id="+document.member_form.id.value,"IDcheck", 014 "left=200,top=200,width=200,height=60,scrollbars=no, 015 resizable=yes"); 016 } 017 018 function check_nick() 019 { 020 window.open("check_nick.php?nick="+document.member_form.nick.value, 021 "NICKcheck", "left=200,top=200,width=200,height=60, scrollbars=no, 022 resizable=yes"); 023 } 024
18
예제 9-4 회원가입 페이지 member_form.php 025 function check_input() 026 {
027 if(!document.member_form.id.value) 028 { alert("아이디를 입력하세요"); document.member_form.id.focus(); return; 032 } 033 034 if(!document.member_form.pass.value) 035 { alert("비밀번호를 입력하세요"); document.member_form.pass.focus(); return; 039 } 040
19
예제 9-4 회원가입 페이지 member_form.php
041 if(!document.member_form.pass_confirm.value) 042 { alert("비밀번호확인을 입력하세요"); document.member_form.pass_confirm.focus(); return; 046 } 048 if(!document.member_form.name.value) 049 { alert("이름을 입력하세요"); document.member_form.name.focus(); return; 053 } 055 if(!document.member_form.nick.value) 056 { alert("닉네임을 입력하세요"); document.member_form.nick.focus(); return; 060 } 061
20
예제 9-4 회원가입 페이지 member_form.php
062 if(!document.member_form.hp2.value || !document.member_form.hp3.value ) 063 { alert("휴대폰 번호를 입력하세요"); document.member_form.nick.focus(); return; 067 } 068 069 if(document.member_form.pass.value != document.member_form.pass_confirm.value) 070 { alert("비밀번호가 일치하지 않습니다.\n다시 입력해주세요."); document.member_form.pass.focus(); document.member_form.pass.select(); return; 075 } 076 077 document.member_form.submit(); 078 }
21
예제 9-4 회원가입 페이지 member_form.php 079 080 function reset_form() 081 {
082 document.member_form.id.value = ""; 083 document.member_form.pass.value = ""; 084 document.member_form.pass_confirm.value = ""; 085 document.member_form.name.value = ""; 086 document.member_form.nick.value = ""; 087 document.member_form.hp1.value = "010"; 088 document.member_form.hp2.value = ""; 089 document.member_form.hp3.value = ""; 090 document.member_form. 1.value = ""; 091 document.member_form. 2.value = ""; 092 093 document.member_form.id.focus(); 094 095 return; 096 }
22
예제 9-4 회원가입 페이지 member_form.php 097 </script> 098 </head>
099 <body> 100 <div id="wrap"> 101 <div id="header"> 102 <? include "../lib/top_login2.php"; ?> 103 </div> <!-- end of header --> 104 105 <div id="menu"> 106 <? include "../lib/top_main2.php"; ?> 107 </div> <!-- end of menu --> 108 109 <div id="content"> 110 <div id="col1"> 111 <div id="left_menu"> 112 <? include "../lib/left_menu.php"; ?> 113 </div> 114 </div> <!-- end of col1 -->
23
예제 9-4 회원가입 페이지 member_form.php 115 116 <div id="col2">
117 <form name="member_form" method="post" action="insert.php"> 118 <div id="title"> 119 <img src="../img/title_join.gif"> 120 </div> <!-- end of title --> 121 122 <div id="form_join"> 123 <div id="join1"> 124 <ul> 125 <li>* 아이디</li> 126 <li>* 비밀번호</li> 127 <li>* 비밀번호 확인</li> 128 <li>* 이름</li> 129 <li>* 닉네임</li> 130 <li>* 휴대폰</li> 131 <li> 이메일</li> 132 </ul> 135 </div>
24
예제 9-4 회원가입 페이지 member_form.php 134 <div id="join2">
135 <ul> 136 <li><div id="id1"><input type="text" name="id"></div> <div id="id2"><a href="#"><img src="../img/check_id.gif" onclick="check_id()"></a></div> <div id="id3">4~12자의 영문 소문자, 숫자와 특수기호(_)만 사용할 수 있습니다.</div></li> 137 <li><input type="password" name="pass"></li> 138 <li><input type="password" name="pass_confirm"></li> 139 <li><input type="text" name="name"></li> 140 <li><div id="nick1"><input type="text" name="nick"></div> <div id="nick2"><a href="#"><img src="../img/check_id.gif" onclick="check_nick()"></a></div></li>
25
예제 9-4 회원가입 페이지 member_form.php
141 <li><select class="hp" name="hp1"> <option value='010'>010</option> <option value='011'>011</option> <option value='016'>016</option> <option value='017'>017</option> <option value='018'>018</option> <option value='019'>019</option> 148 </select> - <input type="text" class="hp" name="hp2"> - <input type="text" class="hp" name="hp3"></li> 149 <li><input type="text" id=" 1" <input type="text" name=" 2"></li> 150 </ul> 151 </div> 152 <div class="clear"></div> 153 <div id="must"> * 는 필수 입력항목입니다.^^</div> 154 </div> 155
26
예제 9-4 회원가입 페이지 member_form.php
156 <div id="button"><a href="#"><img src="../img/button_save.gif" onclick="check_input()"></a> 157 <a href="#"><img src="../img/button_reset.gif" onclick="reset_form()"></a> 158 </div> 159 </form> 160 </div> <!-- end of col2 --> 161 </div> <!-- end of content --> 162 </div> <!-- end of wrap --> 163 164 </body> 165 </html>
27
예제 9-5 아이디 중복 확인 check_id.php 01 <meta charset="euc-kr">
02 <? 03 if(!$id) 04 { echo("아이디를 입력하세요."); 06 } 07 else 08 { include "../lib/dbconn.php"; 10 $sql="select * from member where id='$id' "; 12 $result=mysql_query($sql, $connect); $num_record=mysql_num_rows($result); 15
28
예제 9-5 아이디 중복 확인 check_id.php 16 if($num_record) 17 {
{ echo "아이디가 중복됩니다.<br>"; echo "다른 아이디를 사용하세요.<br>"; } else { echo "사용가능한 아이디입니다."; } 25 mysql_close(); 27 } 28 ?>
29
예제 9-6 데이터베이스 접속 dbconn.php 01 <?
02 $connect=mysql_connect("localhost", "kdhong", "1234") or 03 die("SQL server에 연결할 수 없습니다."); 04 05 mysql_select_db("kdhong_db",$connect); 06 ?>
30
예제 9-7 입력된 회원정보를 데이터베이스에 저장
insert.php 01 <meta charset="euc-kr"> 02 <? 03 $hp=$hp1."-".$hp2."-".$hp3; 04 05 06 $regist_day=date("Y-m-d (H:i)"); // 현재 시간(년-월-일-시-분) 저장 07 $ip=$REMOTE_ADDR; // 방문자의 IP 주소 저장 08 09 include "../lib/dbconn.php"; // dconn.php 파일을 불러옴 10 11 $sql="select * from member where id='$id'"; 12 $result=mysql_query($sql, $connect); 13 $exist_id=mysql_num_rows($result); 14 15 if($exist_id) 16 { echo(" <script> window.alert('해당 아이디가 존재합니다.') history.go(-1) </script> ");
31
예제 9-7 입력된 회원정보를 데이터베이스에 저장
insert.php exit; 24 } 25 else 26 { // 레코드 삽입 명령을 $sql에 입력 $sql="insert into member(id, pass, name, nick, hp, , regist_day, level) "; $sql.="values('$id', '$pass', '$name', '$nick', '$hp', '$ ', '$regist_day', 9)"; mysql_query($sql, $connect); // $sql 에 저장된 명령 실행 30 } 31 32 mysql_close(); // 데이터베이스 연결 끊기 33 echo (" <script> location.href = '../index.php'; </script> 37 "); 38 ?>
Similar presentations
