<최종 화면> 홈 화면 페이지, 회원가입 페이지를 만들었다. 화면에 보이는 총 2페이지 만듬.
공통으로 보이는 header, footer는 php include 이용
DB를 만들고 테이블에 회원가입 내용 삽입 ( POST방식 )
아이디 중복 확인 GET 방식으로 창 띄우기.
우선 작업 전에 여러 폴더로 나눠서 해당 파일들을 만들 것이다.
구조는 아래와 같다.
오늘 작업할 구조이다.
우선 구조를 담을 HP 폴더를 만들자. 그 안에 각 폴더들을 만들 것이다.
HP폴더 하위에 img 폴더를 만들고, 이미지를 추가하였다. (HOME 큰 이미지, 회원가입 버튼 대신 사용할 이미지 등등..)
index.php를 만들고 여기에 HOME 페이지를 만들어보자.
페이지는 크게 3개 영역으로 나눌 것이다.
(header : 상단 메뉴바, section : 해당 페이지 내용, footer : 하단 로고 )
header, footer는 어느 페이지건 공통으로 적용되는 부분으로 따로 php파일로 만들어서 inlcude 시키겠다.
[include는 그 자리에 코드를 복붙한 것과 똑같이 적용된다.]
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PHP 프로그래밍 입문</title>
</head>
<body>
<header>
<!-- 공통사용 php문서 외부 추가하기 : 공통 사용하는 php는 lib폴더에 작성 -->
</header>
<section>
</section>
<footer>
</footer>
</body>
</html>
|
HP폴더 하위폴더로 lib 폴더를 만들자. 그리고 lib폴더에 header.php를 만들자.
메뉴바를 만들어보자 우선 요소들을 배치하고, 나중에 css로 스타일을 주겠다.
header.php
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
<?php
//로그인을 하면 session에 정보를 저장하고 각 페이지들에서 모두 사용하고자 함.
//로그인에 띠라 화면구성이 다르기에 세션에 저장되어 있는 회원정보 중 id, name, level 값 읽어오기
session_start(); //세션을 저장하든 읽어오든 사용하고자 하면 이 함수로 시작
$userid="";
$username="";
$userlevel=""; //회원등급 : 1~9등급 [1등급:관리자, 9등급:신규회원]
$userpoint="";
if( isset($_SESSION['userid'])) $userid= $_SESSION['userid'];
if( isset($_SESSION['username'])) $username= $_SESSION['username'];
if( isset($_SESSION['userlevel'])) $userlevel= $_SESSION['userlevel'];
if( isset($_SESSION['userpoint'])) $userpoint= $_SESSION['userpoint'];
?>
<!-- 헤더 영역의 로고와 회원가입/로그인 표시 영역 -->
<div id="top">
<!-- 1. 로고영역 -->
<!-- include되면 삽입된 문서의 위치를 기준으로 -->
<!-- 2. 회원가입/로그인 버튼 표시 영역 -->
<ul id="top_menu">
<!-- 로그인 안되었을 때 -->
<?php if(!$userid){ ?>
<li> | </li>
<?php }else{ ?>
<li> | </li>
<?php }?>
<!-- 관리자모드로 로그인되었을 때 추가로.. -->
<?php if($userlevel==1){?>
<li> | </li>
<?php } ?>
</ul>
</div>
<!-- 헤더 영역의 네비게이션 메뉴 영역 -->
<div id="menu_bar">
<ul>
</ul>
</div>
|
<css 적용전 메뉴바 모습>
header처럼 footer도 따로 만들어서 include 해보자.
lib 폴더에 footer.php 만들자.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<div id="footer_content">
<p id="footer_logo">PHP 프로그래밍 입문 | <span>미래능력개발교육원</span></p>
<ul id="download">
<li>예제 소스 다운로드</li>
</ul>
<ul id="author">
<li>저자 문의 메일</li>
</ul>
</div>
|
이제 HP폴더에 main.php 파일을 만들자. index.php의 <section>에 내용을 따로 만들것이다.
index.php에서는 include만 해주면 된다.
index.php의 <section>들어가 내용을 main.php에 코딩하자.
main.php
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!-- 메인 이미지 영역 -->
<div id="main_img_bar">
</div>
<!-- 이미지 아래 최신 게시글 표시 영역 -->
<div id="main_content">
<!-- 1. 최신 게시글 목록 -->
<article id="latest">
<h4>최신 게시글</h4>
<ul></ul>
</article>
<!-- 2. 포인트 랭킹 목록 -->
<article id="point_rank">
<h4>포인트 랭킹</h4>
<ul></ul>
</article>
</div>
|
이제 스타일을 입히기 위해 아직 만들지 않은 common.css 파일을 link 하고 미리 생각해둔 경로에 만들자.
index.php
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PHP 프로그래밍 입문</title>
<!-- 공통 스타일시트 연결 -->
</head>
<body>
<header>
<!-- 공통사용 php문서 외부 추가하기 : 공통 사용하는 php는 lib폴더에 작성 -->
</header>
<section>
<!-- Main Content 문서를 별도로 제작 : 추루 유지보수시의 편리성 -->
</section>
<footer>
<!-- 공통모듈 추가 -->
</footer>
</body>
</html>
|
HP 하위 폴더로 css폴더를 만들고, css폴더 안에 common.css 파일을 만들자.
common.css 파일은 header와 footer의 스타일을 적용하는 코드를 작성할 것이다.
common.css
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
/* 마진 패딩 초기화 */
*{padding: 0; margin: 0;}
/* *{border: 1px dotted red;} */
/* 페이지 기본 글꼴과 크기 설정 */
body{font-family: "돋움", sans-serif; font-size: 14px;}
/* 모든 리스트의 블릿 기호 표시 제거 */
ul{list-style: none;}
/* <a>요소의 기본 밑줄 제거 */
a{display: inline-block; text-decoration: none; color: #333333;}
/* 헤더영역의 로고와 회원가입/로그인 표시 영역 */
/* 가로사이즈 지정 및 가운데 정렬 */
/* 회원가입/로그인 글씨를 오른쪽 배치할 때 absolute 포지션 사용하기 위해 부모뷰는 relative여야 함. */
#top{ width: 1000px; height: 80px; margin: 0 auto; position: relative; }
/* 로고 제목 위치와 폰트 사이즈 */
#top h3{position: absolute; top: 25px; left: 40px; font-size: 16px;}
/* 회원가입/로그인 글씨 위치 */
#top #top_menu{position: absolute; top: 30px;right: 60px;}
#top #top_menu li{display: inline-block;}
/* 헤더안에 네비게이션 메뉴 */
#menu_bar{height: 48px; background-color: #443e58; font-size: 16px;}
#menu_bar ul{width: 1000px;margin: 0 auto; padding: 14px 0px 14px 80px;}
#menu_bar ul li{display: inline; margin-right: 90px;}
#menu_bar ul li a{color: white;}
/* 하단 푸터 */
footer{ height: 100px; background-color: #2c2a29;}
/* 안에 배피는 absolute를 사용할 것이어서 부모뷰는 relative */
#footer_content{position: relative; width: 1000px; margin: 0 auto; color: #dddddd;}
#footer_logo{position: absolute; top: 30px; left: 50px; font-size: 16px;}
#footer_logo span{color: yellow;}
#download{position: absolute; top: 20px; left: 400px;}
#download a{color:aquamarine;}
#author{position: absolute; top: 20px; left: 700px;}
|
지금까지 작성한 코드를 실행하여 확인해보자.
이제 HOME의 페이지 내용인 <section>에 스타일을 입힐 main.css 파일을 만들자.
위치는 css폴더 안에 만든다.
index.php에서 main.css 파일도 link해준다.
main.css
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
/* 메인 콘텐츠 영역 가로사이즈와 가운데 정렬 */
#main_content{width: 1000px; height: 300px; margin: 0 auto;position: relative;}
/* 메인 이미지 */
#main_img_bar{height: 230px; background-color: #2092aa; text-align: center;}
#main_img_bar img{margin-top: 30px;}
/* 최신 게시글 */
#latest{position: absolute; top: 30px; left: 50px;}
#latest h4{width: 500px; font-size: 16px; padding-bottom: 5px; border-bottom: solid 1px #dddddd;}
#latest ul{margin-top: 20px;}
/* 포인트 랭킹 */
#point_rank{position: absolute; top: 30px; left: 590px;}
#point_rank h4{width: 350px; font-size: 16px; padding-bottom: 5px; border-bottom: solid 1px #dddddd;}
#point_rank ul{margin-top: 20px;}
|
코드 적용된 것을 확인하면 아래 사진처럼 HOME 화면은 배치가 잘 된것을 알 수 있다.
이제 회원가입 페이지를 만들 것이다. (member_form.php) 그러나 공통으로 들어가는 header 부분에서 문제가 발생한다.
회원 가입에서 다시 HOME을 누를 시 에러가 발생한다. 이유는 header.php의 href 경로가 상대 경로라서 그렇다.
절대 경로로 바꾸면 되지만 우선 header.php를 복사해서 header2.php를 만들고 href 경로에 맨 앞에 . 추가로 써주자.
header2.php
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
<?php
//로그인을 하면 session에 정보를 저장하고 각 페이지들에서 모두 사용하고자 함.
//로그인에 띠라 화면구성이 다르기에 세션에 저장되어 있는 회원정보 중 id, name, level 값 읽어오기
session_start(); //세션을 저장하든 읽어오든 사용하고자 하면 이 함수로 시작
$userid="";
$username="";
$userlevel=""; //회원등급 : 1~9등급 [1등급:관리자, 9등급:신규회원]
$userpoint="";
if( isset($_SESSION['userid'])) $userid= $_SESSION['userid'];
if( isset($_SESSION['username'])) $username= $_SESSION['username'];
if( isset($_SESSION['userlevel'])) $userlevel= $_SESSION['userlevel'];
if( isset($_SESSION['userpoint'])) $userpoint= $_SESSION['userpoint'];
?>
<!-- 헤더 영역의 로고와 회원가입/로그인 표시 영역 -->
<div id="top">
<!-- 1. 로고영역 -->
<!-- include되면 삽입된 문서의 위치를 기준으로 -->
<!-- 2. 회원가입/로그인 버튼 표시 영역 -->
<ul id="top_menu">
<!-- 로그인 안되었을 때 -->
<?php if(!$userid){ ?>
<li> | </li>
<?php }else{ ?>
<li> | </li>
<?php }?>
<!-- 관리자모드로 로그인되었을 때 추가로.. -->
<?php if($userlevel==1){?>
<li> | </li>
<?php } ?>
</ul>
</div>
<!-- 헤더 영역의 네비게이션 메뉴 영역 -->
<div id="menu_bar">
<ul>
</ul>
</div>
|
이제 회원가입 페이지인 member_form.php 만들자.
경로는 HP 하위 폴더로 member폴더를 만들고, 거기에 member_form.php 파일을 만든다.
공통으로 들어가는 <header>, <footer> 똑같이 기재하고 header2.php만 주의해서 쓰자. ( index.php와 다른점 )
member_form.php의 <section> 페이지 내용을 코딩하자.
member_form.php
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입</title>
<!-- 공통 스타일 연결 -->
</head>
<body>
<header>
<!-- 공통모듈 사용 -->
</header>
<section>
<div id="main_content">
<div id="join_box">
<!-- DB의 member테이블에 저장하는 member_insert.php에 입력값들 전달하도록 -->
<h2>회원 가입</h2>
<!-- 각 줄마다 라벨, 인풋요소 영역으로 나누어 지므로 col1, col2 클래스지정으로 스타일링 -->
<div class="form id">
<div class="col1">아이디</div>
<div class="col2"><input type="text" name="id"></div>
<!-- id줄만 존재하는 칸 -->
<div class="col3">
</div>
</div>
<div class="form">
<div class="col1">비밀번호</div>
<div class="col2"><input type="password" name="pass"></div>
</div>
<div class="form">
<div class="col1">비밀번호 확인</div>
<div class="col2"><input type="password" name="pass_confirm"></div>
</div>
<div class="form">
<div class="col1">이름</div>
<div class="col2"><input type="text" name="name"></div>
</div>
<div class="form email">
<div class="col1">이메일</div>
<div class="col2">
<input type="text" name="email">@<input type="text" name="email2">
</div>
</div>
<!-- input요소의 submit, reset으로 만들면 이미지로 못 만듬 -->
<!-- input요소의 타입 중 image 타입으로 하면 이미지 버튼이면서 submit 기능 -->
<!-- 값을 전송할 때 값이 비어있는지 검증하는 작업도 하고 싶어서.. -->
<!-- Javascript를 이용해서 submit()해보기 -->
<div class="bottom_line"></div>
<div class="buttons">
</div>
</form>
</div>
</div>
</section>
<footer>
<!-- 공통모듈 추가 -->
</footer>
</body>
</html>
|
이제 회원가입 페이지의 스타일을 적용하기 위해 css폴더에 member.css 파일을 만들자.
member.css
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
/* 메인 콘텐츠 영역의 가로사이즈 및 가운데 정렬 */
#main_content{width: 1000px; height: 400px; margin: 0 auto;}
/* 가입양식 폼의 사이즈 지정 */
#join_box{width: 600px; margin: 0 auto;}
/* 회원가입 제목의 아래쪽 경계선 */
#join_box h2{border-bottom: solid 1px #dddddd; padding-top: 50px;}
/* 라벨 영역 */
#join_box .col1{float: left; width: 110px; margin-top: 4px;}
/* input상자 영역 */
#join_box .col2{float: left; width: 400px;}
/* float 영향 제거 */
.clear{clear: both;}
/* id 입력 줄에만 있는 중복 확인 버튼 */
#join_box .col3{float: left;}
/* 모든 input요소의 사이즈 */
#join_box .form input{width: 390px; height: 22px; }
/* 각 항목 줄별 높이 */
#join_box .form{height: 38px;}
/* 맨 윗줄이 제목과 너무 붙어있어서 */
#join_box .id{margin-top: 20px;}
/* 이메일 칸의 input 요소 사이즈 재지정*/
#join_box .email input[name=email1]{width: 100px;}
#join_box .email input[name=email2]{width: 275px;}
/* 서밋버튼영역의 hr 용도 */
#join_box .bottom_line{margin-top: 10px; border-bottom: solid 1px #cccccc;}
/* 버튼 위치 오른쪽 정렬 */
#join_box .buttons {text-align: right; margin: 20px 100px 0 0;}
|
회원 가입 페이지의 라벨과 input 요소를 float 속성을 주었기때문에 가로로 길게 아이디, 비밀번호...나열되게 된다.
그래서 아이디와 input요소까지 후 그 다음줄에서 다시 나열되게 하고 싶다면... (도중에 float 속성을 적용 안시키려면)
아래 사진과 같이 <div class="form"> 덩어리가 끝나때 <div class="clear"></div> 기재하자.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입</title>
<!-- 공통 스타일 연결 -->
<!-- 내부 자바스크립트 작성 -->
<script>
// 서밋 버튼 이미지 클릭시
function submitForm(){
// 입력값 중에 비어있으면 안되는 것들이 있음.
// id칸이 비어 있는가?
alert("아이디를 입력하세요.");
//커서(포커스)를 아이디 인풋요소로 이동
document.member_form.id.focus();
//아래의 submit()을 하면 안되므로...
return;
}
// 비밀번호 비어 있는가?
alert("비밀번호를 입력하세요.");
document.member_form.pass.focus();
return;
}
// 비밀번호 확인 비어 있는가?
alert("비밀번호 확인을 입력하세요.");
return;
}
// 이름 비어 있는가?
if(!document.member_form.name.value){
alert("이름을 입력하세요.");
document.member_form.name.focus();
return;
}
// 비밀번호와 비밀번호 확인 칸의 입력값이 같은지 비교
alert("비밀번호가 일치하지 않습니다.\n다시 입력해 주세요.");
document.member_form.pass.focus();
// 커서가 이동하고 그곳에 써있는 글씨가 선택되어 있음.
document.member_form.pass.select();
return;
}
// form요소를 직접 submit하는 메소드
}
// 초기화 버튼 이미지 클릭시
function resetForm(){
document.member_form.name.value="";
// 첫번째 입력 요소로 이동
document.member_form.id.focus();
}
</script>
</head>
<body>
<header>
<!-- 공통모듈 사용 -->
</header>
<section>
<div id="main_content">
<div id="join_box">
<!-- DB의 member테이블에 저장하는 member_insert.php에 입력값들 전달하도록 -->
<h2>회원 가입</h2>
<!-- 각 줄마다 라벨, 인풋요소 영역으로 나누어 지므로 col1, col2 클래스지정으로 스타일링 -->
<div class="form id">
<div class="col1">아이디</div>
<div class="col2"><input type="text" name="id"></div>
<!-- id줄만 존재하는 칸 -->
<div class="col3">
</div>
</div>
<div class="form">
<div class="col1">비밀번호</div>
<div class="col2"><input type="password" name="pass"></div>
</div>
<div class="clear"></div>
<div class="form">
<div class="col1">비밀번호 확인</div>
<div class="col2"><input type="password" name="pass_confirm"></div>
</div>
<div class="clear"></div>
<div class="form">
<div class="col1">이름</div>
<div class="col2"><input type="text" name="name"></div>
</div>
<div class="clear"></div>
<div class="form email">
<div class="col1">이메일</div>
<div class="col2">
<input type="text" name="email1">@<input type="text" name="email2">
</div>
</div>
<div class="clear"></div>
<!-- input요소의 submit, reset으로 만들면 이미지로 못 만듬 -->
<!-- input요소의 타입 중 image 타입으로 하면 이미지 버튼이면서 submit 기능 -->
<!-- 값을 전송할 때 값이 비어있는지 검증하는 작업도 하고 싶어서.. -->
<!-- Javascript를 이용해서 submit()해보기 -->
<div class="bottom_line"></div>
<div class="buttons">
</div>
</form>
</div>
</div>
</section>
<footer>
<!-- 공통모듈 추가 -->
</footer>
</body>
</html>
|
<실행 화면>
이제 저장하기, 취소하기 이미지에 onclick 속성을 부여하고, 그에 맞는 기능을 하도록 작성하자.
클릭이 되었을때 기능은 따로 파일로 만들지 않고 내부 스크립트로 작성하겠다. ( <head> 태그 안에 <script>추가 )
member_form.php <header>태그 안에 추가할 스크립트문
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
<script>
// 서밋 버튼 이미지 클릭시
function submitForm(){
// 입력값 중에 비어있으면 안되는 것들이 있음.
// id칸이 비어 있는가?
alert("아이디를 입력하세요.");
//커서(포커스)를 아이디 인풋요소로 이동
//아래의 submit()을 하면 안되므로...
return;
}
// 비밀번호 비어 있는가?
alert("비밀번호를 입력하세요.");
return;
}
// 비밀번호 확인 비어 있는가?
alert("비밀번호 확인을 입력하세요.");
return;
}
// 이름 비어 있는가?
alert("이름을 입력하세요.");
return;
}
// 비밀번호와 비밀번호 확인 칸의 입력값이 같은지 비교
alert("비밀번호가 일치하지 않습니다.\n다시 입력해 주세요.");
// 커서가 이동하고 그곳에 써있는 글씨가 선택되어 있음.
return;
}
// form요소를 직접 submit하는 메소드
}
// 초기화 버튼 이미지 클릭시
function resetForm(){
// 첫번째 입력 요소로 이동
}
</script>
|
<실행화면> - 저장하기를 누르면 빈칸이 있는지 판별
이제 입력된 값을 받아 데이터베이스에 저장하는 member_insert.php 파일을 만들자.
경로는 member폴더안에 만들자.
데이터베이스로 보내기 전에 우선 데이터베이스를 만들어 놓자.
xampp\mysql\bin 경로까지 가서 접속하자.
우선 관리자 권한으로 (임의 이름) hp_db 데이터베이스를 만들고, 내 계정에 권한을 주자.
만약에 계정이 없다면?
(임의로 hp_db 데이터베이스에 id는 cw , pw는 1234로 하였다.)
명령어 : grant all on hp_db.* to 'cw'@'localhost' identified by '1234';
위와 같이 하면 계정을 만들 수 있다.
계정이 있다면?
명령어 : grant all on hp_db.* to 'cw'@'localhost';
이제 cw 계정으로 접속하여 hp_db에서 작업하자.
테이블 작성은 따로 . sql파일을 작성하여 cmd에 복사&붙여넣기 할 것이다.
코드를 작성하고 복사하자.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
CREATE TABLE member(
num INTEGER NOT NULL AUTO_INCREMENT,
id VARCHAR(15) NOT NULL,
pass VARCHAR(15) NOT NULL,
name VARCHAR(20) NOT NULL,
email VARCHAR(80),
regist_day VARCHAR(20),
level INTEGER,
point INTEGER,
PRIMARY KEY(num),
UNIQUE(id)
);
|
아까 cmd창에서 붙여넣기하면 코드가 써진다. Enter를 누르자.
POST방식으로 받아 올 것이다. 그런데 여기서 데이터베이스 접속이 파일마다 중복이 된다.
(회원가입,로그인 등마다 계속 DB에 접속하는 코드를 쓸 것인가? 한번만 쓰고 파일만 include 시키자.)
중복 내용 두줄(16, 18번째줄)을 공용파일 만들어서 include하겠다.
잘라내서 옮길 파일을 만든다. lib 폴더에 dbconn.php파일을 만들자.
member_insert.php 잘라낸 부분을 dbconn.php에 붙여넣자.
dbconn.php에 붙여넣기
dbconn.php
|
1
2
3
4
5
6
7
8
9
|
<?php
// 데이터베이스 접속도 공통 모듈에 작성해서 사용
$conn= mysqli_connect('localhost','cw','1234','hp_db');
// 한글깨짐 방지 쿼리 실행
mysqli_query($conn,"set names utf8");
?>
|
이제 member_insert.php 나머지 부분을 작성해보자.
저장하기 누르면 post방식으로 데이터를 받고, DB 내용과 id가 중복 체크를 한다.
신규 회원이라면 DB 테이블에 insert시키자.
member_insert.php
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
<?php
$id= $_POST['id'];
$pass= $_POST['pass'];
$name= $_POST['name'];
$email1= $_POST['email1'];
$email2= $_POST['email2'];
$email= $email1 . "@" . $email2;
// 등록일
$regist_day= date("Y-m-d H:i"); //2020-01-08 (14:19)
// 레벨은 신규회원은 9,포인트는 0점으로 기본설정
include "../lib/dbconn.php";
// 중복된 아이디 여부를 확인해서 사용자에게 안내
$sql= "SELECT * FROM member WHERE id='$id'";
$result=mysqli_query($conn, $sql);
$rowNum= mysqli_num_rows($result); //결과표로부터 레코드 수 얻어오기
// 혹시 $rowNum이 0이 아니면 id가 있다는 것이므로 중복!!
if($rowNum){
// 경고창을 보여주면서 이전 회원가입 페이지로 다시 이동
echo("
<script>
alert('해당 아이디가 존재합니다.');
</script>
");
// 중복이 되었으니 다음 작업들 못하도록.. php 종료
exit;
}
//exit가 안되었다면 신규 id라는 것임
//회원정보 insert
//insert 쿼리문
$sql= "INSERT INTO member(id, pass, name, email, regist_day, level, point) VALUES('$id','$pass','$name','$email','$regist_day','9','0')";
// 쿼리문 실행
mysqli_query($conn,$sql);
mysqli_close($conn);
// 데이터 저장이 완료된 후 index.php로 페이지 이동
echo "
<script>
</script>
";
?>
|
모든 사항을 입력하고 저장이 잘됐다면, 자동으로 HOME 화면으로 넘어간다.
member 테이블 내용을 확인해보자.
이제 아이디 중복 확인 버튼 기능을 넣어보자. 중복 확인 이미지에 onclick 속성 부여
member_form.php 에서 <script> 태그 마지막에 추가하자.
최종 member_form.php 코드
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입</title>
<!-- 공통 스타일 연결 -->
<!-- 내부 자바스크립트 작성 -->
<script>
// 서밋 버튼 이미지 클릭시
function submitForm(){
// 입력값 중에 비어있으면 안되는 것들이 있음.
// id칸이 비어 있는가?
alert("아이디를 입력하세요.");
//커서(포커스)를 아이디 인풋요소로 이동
document.member_form.id.focus();
//아래의 submit()을 하면 안되므로...
return;
}
// 비밀번호 비어 있는가?
alert("비밀번호를 입력하세요.");
document.member_form.pass.focus();
return;
}
// 비밀번호 확인 비어 있는가?
alert("비밀번호 확인을 입력하세요.");
return;
}
// 이름 비어 있는가?
if(!document.member_form.name.value){
alert("이름을 입력하세요.");
document.member_form.name.focus();
return;
}
// 비밀번호와 비밀번호 확인 칸의 입력값이 같은지 비교
alert("비밀번호가 일치하지 않습니다.\n다시 입력해 주세요.");
document.member_form.pass.focus();
// 커서가 이동하고 그곳에 써있는 글씨가 선택되어 있음.
document.member_form.pass.select();
return;
}
// form요소를 직접 submit하는 메소드
}
// 초기화 버튼 이미지 클릭시
function resetForm(){
document.member_form.name.value="";
// 첫번째 입력 요소로 이동
document.member_form.id.focus();
}
//아이디 중복 확인 버튼 클릭
function checkId(){
// 사용자가 입력한 id값 얻어오기
// DB에서 같은 아이디가 있는지 확인하고 결과를 보여주는 새로운 윈도우 띄우기
}
</script>
</head>
<body>
<header>
<!-- 공통모듈 사용 -->
</header>
<section>
<div id="main_content">
<div id="join_box">
<!-- DB의 member테이블에 저장하는 member_insert.php에 입력값들 전달하도록 -->
<h2>회원 가입</h2>
<!-- 각 줄마다 라벨, 인풋요소 영역으로 나누어 지므로 col1, col2 클래스지정으로 스타일링 -->
<div class="form id">
<div class="col1">아이디</div>
<div class="col2"><input type="text" name="id"></div>
<!-- id줄만 존재하는 칸 -->
<div class="col3">
</div>
</div>
<div class="form">
<div class="col1">비밀번호</div>
<div class="col2"><input type="password" name="pass"></div>
</div>
<div class="clear"></div>
<div class="form">
<div class="col1">비밀번호 확인</div>
<div class="col2"><input type="password" name="pass_confirm"></div>
</div>
<div class="clear"></div>
<div class="form">
<div class="col1">이름</div>
<div class="col2"><input type="text" name="name"></div>
</div>
<div class="clear"></div>
<div class="form email">
<div class="col1">이메일</div>
<div class="col2">
<input type="text" name="email1">@<input type="text" name="email2">
</div>
</div>
<div class="clear"></div>
<!-- input요소의 submit, reset으로 만들면 이미지로 못 만듬 -->
<!-- input요소의 타입 중 image 타입으로 하면 이미지 버튼이면서 submit 기능 -->
<!-- 값을 전송할 때 값이 비어있는지 검증하는 작업도 하고 싶어서.. -->
<!-- Javascript를 이용해서 submit()해보기 -->
<div class="bottom_line"></div>
<div class="buttons">
</div>
</form>
</div>
</div>
</section>
<footer>
<!-- 공통모듈 추가 -->
</footer>
</body>
</html>
|
이제 중복 확인 시, 결과를 알려줄 창을 만들어 보자. member폴더 안에 check_id.php 파일을 만들자.
check_id.php
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<meta charset="utf-8">
<?php
$id= $_GET['id'];
// 값을 전달하지 않을 수도 있으니
if(!$id){
echo "아이디를 입력하세요.";
exit;
}
// 데이터베이스 접속 공통모듈 사용
include "../lib/dbconn.php";
// 전달받은 id가 member테이블에 있는지 검사
$sql= "SELECT * FROM member WHERE id='$id'";
$result= mysqli_query($conn, $sql);
$rowNum=mysqli_num_rows($result);
// $rowNum이 0이 아니면 중복
if($rowNum){
echo "아이디가 중복 됩니다.<br>";
echo "다른 아이디를 사용하세요.<br>";
}else{
echo "사용가능한 아이디 입니다.<br>";
}
mysqli_close($conn);
?>
|
아까 aaa라는 아이디를 만들었었다. 다시 만들려고 aaa를 입력해보자.
cmd로 테이블 정보 확인해보자.
phpmyadmin에서 확인해보 잘 저장 되었다.
'안드로이드 웹앱 콘테츠 개발자 양성(국비지원) > DBMS' 카테고리의 다른 글
| db,php,html,script 홈페이지 1-2 (로그인, 쪽지 페이지 작업) (2) | 2020.01.09 |
|---|---|
| DBMS 다양한 방법 2(php 파일로 일괄 적용 PDO로 php와 DBMS 연결) (0) | 2020.01.07 |
| DBMS 다양한 방법 1 (php 파일로 일괄 적용 php와 DBMS 연결) (0) | 2020.01.07 |
| DBMS 1-2 (DML를 이용 테이블 필드 추가,변경,삭제) (0) | 2020.01.07 |
| DBMS 1-1 (DDL를 이용 데이터 베이스와 테이블을 만들고 필드 추가 삭제) (0) | 2020.01.07 |
댓글