게시판 만들기(1) 시나리오 / 회원가입 페이지 만들기에 대해서 정리한다.
게시판 만들기(1) 시나리오
1. 사용자는 회원가입 후에 로그인할 수 있다.
2. 이미 가입된 사용자의 아이디는 사용할 수 없다.
3. 중복 로그인은 허용하지 않는다.
4. 로그인 하지 않은 사용자도 게시글 목록을 볼 수 있다.
5. 로그인 하지 않는 사용자는 게시글 내용을 보거나, 작성할 수 없다.
6. 로그인한 사용자는 게시글 내용을 볼 수 있으며, 게시글을 작성할 수 있다.
7. 로그인한 사용자는 자기가 작성한 게시글에 대해서 수정이나 삭제가 가능하다.
세부 기능
1. 회원가입
- 사용자 아이디, 사용자 패스워드, 이메일
- 아이디 중복체크 기능
- 공백은 허용하지 않음
2. 로그인
- 사용자 아이디, 사용자 패스워드
- 이미 로그인 되어 있는 경우에는 로그인 할 수 없다.
3. 게시글 목록 보기
- 게시판에 접속하면 게시글 목록을 출력
- 한 페이지에 최대 10개까지 출력
- 가장 최신글이 위에 올 수 있도록
- 게시글을 작성할 수 있다.
- 로그인한 사용자만이 게시글을 작성할 수 있다.
4. 게시글 작성
- 게시글 제목, 게시글 본문, 글 작성자, 작성 시간
5. 게시글 수정, 삭제
- 본인이 작성한 게시글만 수정 및 삭제가 가능
6. 게시글 확인
- 목록에서 제목을 클릭하면 게시글 내용을 출력 해준다.
- 수정 및 삭제가 가능
- 로그인한 사용자만 확인이 가능
1. 회원가입
- signup.php
DB: bbs/user( user_id, user_pw, email )
POST: user_id, user_pw, email
* 아이디 중복 체크
DB: bbs/user( user_id )
( 기능을 구현하고 이해하는게 주목적이기 때문에 디자인 부분은 부트스트랩을 이용해서 대체하였다 )
( form에 method속성을 POST로 지정해줬기 때문에 전송버튼을 누르게 되면 POST 방식으로
데이터가 전송이 되고 그 데이터는 $_POST에 들어있다 )
( 아이디 중복체크는 여러가지 방법이 있지만 여기서는 가입자가 Sign up 버튼을 눌러 가입을 요청 했을때
DB를 통해 중복아이디를 체크해서 해당 아이디가 가입 가능한 아이디인지를 알려준다 )
( 중복된 아이디 체크는 정상적으로 되고 있기 때문에 이제 이부분을 alert창을 이용해서
사용자에게 중복된 아이디가 있는지 아니면 정상적으로 가입이 되었는지를 알려주는 코드로 수정한다.. )
( DB에 이미 중복된 아이디가 존재하기 때문에 경고창을 이용해서 'already use id'라는 문구를 띄워
사용자에게 아이디가 중복 된걸 알려준다 )
- 회원가입 페이지(signup.php) 및 부트스트랩 CSS 코드
signin.css
body {
padding-top: 40px;
padding-bottom: 40px;
background-color: #eee;
}
.form-signin {
max-width: 330px;
padding: 15px;
margin: 0 auto;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
margin-bottom: 10px;
}
.form-signin .checkbox {
font-weight: normal;
}
.form-signin .form-control {
position: relative;
height: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-top-right-radius: 0;
border-top-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: -1px; // 바깥에 대한 공백
border-top-left-radius: 0; // 왼쪽 위 호
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="text"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
* margin은 바깥쪽 여백이고 padding은 안쪽 여백을 설정할때 사용한다.
signup.php
<?php
$user_id = $_POST[user_id];
$user_pw = $_POST[user_pw];
$email = $_POST[email];
if( $user_id != '' && $user_pw != '' && $email != '' ) {
$db = mysql_connect( 'localhost', 'root', '1234' );
if( !$db ) {
die( 'MYSQL connect ERROR: ' . mysql_error());
}
$ret = mysql_select_db( 'bbs', $db );
if( !$ret ) {
die( 'MYSQL select ERROR: ' . mysql_error());
}
// duplicate check
$sql = "SELECT * FROM user WHERE user_id='{$user_id}'";
$resource = mysql_query( $sql );
$num = mysql_num_rows( $resource );
if( $num > 0 ) {
echo "<script> alert('already use id'); </script>";
echo "<script> window.history.back(); </script>";
exit(0);
}
$sql = "INSERT INTO user( user_id, user_pw, email ) VALUE( '{$user_id}',
md5('{$user_pw}'), '{$email}' )";
$ret = mysql_query( $sql );
if( $ret ) {
echo "<script> alert('회원가입이 정상적으로 처리되었습니다'); </script>";
echo "<meta http-equiv='refresh' content=\"0;url=http://192.168.12.100/index.php\">";
exit(0);
}else {
die( 'MYSQL query ERROR: ' . mysql_error());
}
}else {
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>게시판</title>
<!-- Bootstrap core CSS -->
<link href="bootstrap-3.3.2-dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="bootstrap-3.3.2-dist/css/signin.css" rel="stylesheet">
</head>
<body>
<div class="container">
<form class="form-signin" method=POST>
<h2 class="form-signin-heading">Please sign up</h2>
<input type="text" name=user_id class="form-control"
placeholder="User ID" required autofocus>
<input type="password" name=user_pw class="form-control"
placeholder="Password" required>
<input type="email" name=email class="form-control"
placeholder="Email address" required>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign up</button>
</form>
</div> <!-- /container -->
</body>
</html>
<?php
}
?>
'프로그래밍 > WEB HACKING' 카테고리의 다른 글
| [WEB HACKING] 게시판 만들기(3) 로그아웃 기능 / 글쓰기 기능 / 페이징 처리 (1) | 2017.08.29 |
|---|---|
| [WEB HACKING] 게시판 만들기(2) 메인 페이지 / 로그인 구현하기 / DB 연결 페이지 (2) | 2017.08.29 |
| [WEB HACKING] DB SQL( DDL / DML / DCL ) 개념 / MySQL 설정 및 DB Query (0) | 2017.08.29 |
| [WEB HACKING] php 간단한 로그인 창 만들기 / 쿠키 & 세션 이용방법 (0) | 2017.08.29 |
| [WEB HACKING] php 연관 배열, foreach / 데이터를 서버로 전달하는 방법( GET / POST / 쿠키 ) / 웹 인증 방법 (0) | 2017.08.17 |
댓글