09장 실습 웹 사이트 소개와 회원가입 페이지 제작
실습 웹 사이트 전체 구성 파악 웹 사이트의 기능 숙지 회원 정보 테이블 설계 DB에 데이터 저장 회원가입 양식 제작 아이디 중복 확인 기능
실습 웹 사이트의 개요 초기 메인 화면 제작 회원가입 처리
1.1 실습 웹 사이트의 구성 [그림 9-1] 실습 웹 사이트의 초기 메인 화면
1.1 실습 웹 사이트의 구성 회원가입(9장) 로그인/로그아웃, 회원정보 수정(10장) 낙서장(11장) 가입인사(12장) 연주회소개(13장) 자료실(14장) 자유게시판(15장) 레슨 문의(16장) 설문 조사(17장) 최근 글 불러오기(17장)
1.2 초기 메인 화면 제작 [그림 9-3] 초기 메인 화면의 구성
예제 9-1 실습 웹 사이트의 초기 메인 화면 index.php 01 <? 02 session_start(); 03 ?> 04 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 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-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를 사용한 파일과 동일한 폴더에 존재하는 것으로 간주한다.
예제 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>
예제 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>
3.1 회원정보 DB 설계 및 생성 [표 9-3] 회원정보 데이터베이스 테이블(테이블명: member) 필드명 타입 추가 사항 설명 id char(15) not null, primary key 아이디 pass not null 비밀번호 name char(10) 이름 nick 닉네임 hp char(20) 휴대폰 번호 email char(80) 이메일 주소 regist_day 가입일 level int 회원 레벨
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, email char(80), regist_day char(20), level int, primary key(id) );
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 파일 일괄 실행
3.2 회원가입 페이지 생성 [그림 9-6] 회원가입 페이지 [참고] 회원가입 페이지에서 실제로 ㅚ원으로 가입해보면서 <중복확인>,<저장하기>,<취소하기>를 클릭해본다. 여기에서는 7장에서 사용한 계정(frontosa)을 이용해 홈페이지에 회원으로 가입한다.
예제 9-4 회원가입 페이지 member_form.php 001 <? 002 session_start(); 003 ?> 004 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN“ "http://www.w3.org/TR/html4/loose.dtd"> 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">
예제 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
예제 9-4 회원가입 페이지 member_form.php 025 function check_input() 026 { 027 if(!document.member_form.id.value) 028 { 029 alert("아이디를 입력하세요"); 030 document.member_form.id.focus(); 031 return; 032 } 033 034 if(!document.member_form.pass.value) 035 { 036 alert("비밀번호를 입력하세요"); 037 document.member_form.pass.focus(); 038 return; 039 } 040
예제 9-4 회원가입 페이지 member_form.php 041 if(!document.member_form.pass_confirm.value) 042 { 043 alert("비밀번호확인을 입력하세요"); 044 document.member_form.pass_confirm.focus(); 045 return; 046 } 048 if(!document.member_form.name.value) 049 { 050 alert("이름을 입력하세요"); 051 document.member_form.name.focus(); 052 return; 053 } 055 if(!document.member_form.nick.value) 056 { 057 alert("닉네임을 입력하세요"); 058 document.member_form.nick.focus(); 059 return; 060 } 061
예제 9-4 회원가입 페이지 member_form.php 062 if(!document.member_form.hp2.value || !document.member_form.hp3.value ) 063 { 064 alert("휴대폰 번호를 입력하세요"); 065 document.member_form.nick.focus(); 066 return; 067 } 068 069 if(document.member_form.pass.value != document.member_form.pass_confirm.value) 070 { 071 alert("비밀번호가 일치하지 않습니다.\n다시 입력해주세요."); 072 document.member_form.pass.focus(); 073 document.member_form.pass.select(); 074 return; 075 } 076 077 document.member_form.submit(); 078 }
예제 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.email1.value = ""; 091 document.member_form.email2.value = ""; 092 093 document.member_form.id.focus(); 094 095 return; 096 }
예제 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 -->
예제 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>
예제 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>
예제 9-4 회원가입 페이지 member_form.php 141 <li><select class="hp" name="hp1"> 142 <option value='010'>010</option> 143 <option value='011'>011</option> 144 <option value='016'>016</option> 145 <option value='017'>017</option> 146 <option value='018'>018</option> 147 <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="email1" name="email1"> @ <input type="text" name="email2"></li> 150 </ul> 151 </div> 152 <div class="clear"></div> 153 <div id="must"> * 는 필수 입력항목입니다.^^</div> 154 </div> 155
예제 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>
예제 9-5 아이디 중복 확인 check_id.php 01 <meta charset="euc-kr"> 02 <? 03 if(!$id) 04 { 05 echo("아이디를 입력하세요."); 06 } 07 else 08 { 09 include "../lib/dbconn.php"; 10 11 $sql="select * from member where id='$id' "; 12 13 $result=mysql_query($sql, $connect); 14 $num_record=mysql_num_rows($result); 15
예제 9-5 아이디 중복 확인 check_id.php 16 if($num_record) 17 { 17 { 18 echo "아이디가 중복됩니다.<br>"; 19 echo "다른 아이디를 사용하세요.<br>"; 20 } 21 else 22 { 23 echo "사용가능한 아이디입니다."; 24 } 25 26 mysql_close(); 27 } 28 ?>
예제 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 ?>
예제 9-7 입력된 회원정보를 데이터베이스에 저장 insert.php 01 <meta charset="euc-kr"> 02 <? 03 $hp=$hp1."-".$hp2."-".$hp3; 04 $email=$email1."@".$email2; 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 { 17 echo(" 18 <script> 19 window.alert('해당 아이디가 존재합니다.') 20 history.go(-1) 21 </script> 22 ");
예제 9-7 입력된 회원정보를 데이터베이스에 저장 insert.php 23 exit; 24 } 25 else 26 { // 레코드 삽입 명령을 $sql에 입력 27 $sql="insert into member(id, pass, name, nick, hp, email, regist_day, level) "; 28 $sql.="values('$id', '$pass', '$name', '$nick', '$hp', '$email', '$regist_day', 9)"; 29 mysql_query($sql, $connect); // $sql 에 저장된 명령 실행 30 } 31 32 mysql_close(); // 데이터베이스 연결 끊기 33 echo (" 34 <script> 35 location.href = '../index.php'; 36 </script> 37 "); 38 ?>