회원가입을 위한 코드이다.
회원가입 페이지
join.php 파일은 login.php에서 '회원가입'버튼을 클릭했을 때 연결되는 회원가입 페이지를 생성한다.
join.php의 입력부분에 사용자가 입력한 내용을 form 태그를 통해 join_action.php로 넘겨준다.
join_action.php에서는 입력내용을 DB의 member_db 테이블에 등록한다.
join.php
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
</head>
<style>
<!-- 생략: 아래의 css -->
</style>
<body>
<header>
<div class="site_name">
<img src=./images/logo.png></div>
<font style="color: #FFB722;">노랑</font>이 제일 좋아
</div>
<?php
// ##FIXME##
session_start();
if(isset($_SESSION['userid'])) {
?>
<div class = account_display>
<?php
echo $_SESSION['userid'];?>님
<font style="cursor:pointer" onClick="location.href='./logout.php'" class = bt>Logout</font>
</div>
<?php
}
else {
?>
<div class = account_display>
<div class = bt>
<font style="cursor:pointer" onClick="location.href='./login.php'">Login</font>
</div>
</div>
<?php }
?>
</header>
<section>
<div id="menu_title">회원가입</div>
<form method='post' action='join_action.php'>
<p>ID: <input type="text" name="id"></p>
<p>PW: <input type="password" name="pw"></p>
<p>Email: <input type="email" name="email" id="long_box"></p>
<input type="submit" value="회원가입" class="bt2">
</form>
</section>
</body>
</html>(1) 웹서비스 이름 / 계정정보 출력
| PHP 함수, 변수 |
session start() / isset() / $_SESSION
|
(2) ID/PW/E-mail 입력창 출력
input 태그를 이용해 입력창을 생성한다.
(3) 회원가입 버튼 출력
'회원가입' 버튼을 클릭하면 form 태그를 이용해 사용자가 작성한 내용을 POST 메소드 방식으로 join_action.php에 넘겨준다.
CSS
header {
width: 1000px;
height: 45px;
margin-left: 20%;
background-color: #FFF3DD;
padding: 15px 0;
text-align: center;
font-size: 1.5em;
font-weight: bold;
margin-bottom: 10px;
}
.site_name {
display: inline;
vertical-align: middle;
margin-left: 10%;
}
.account_display {
font-size: 16px;
font-weight: normal;
margin-right: 10px;
vertical-align: top;
float: right;
}
#side_box {
width: 1000px;
margin-left: 20%;
background-color: #FFFFFF;
padding: 15px 0;
text-align: center;
font-size: 1.5em;
margin-bottom: 10px;
}
section {
width: 1000px;
height: 500px;
margin-left: 20%
}
#menu_title {
display: block;
width: 900px;
text-align: left;
font-size: 1.5em;
margin-top: 0.83em;
margin-bottom: 0.83em;
}
.bt{
width: 70px;
height: 25px;
text-align:center;
color:#000000;
}
.bt:hover{
text-decoration: underline;
}
#bt1 {
margin-top: 20px;
border: 1px solid #BFBFBFBF;
float: right;
font-size: 15px;
}
.bt2 {
width: 70px;
height: 25px;
text-align:center;
margin-top: 20px;
border: 1px solid #BFBFBFBF;
font-size: 15px;
}
img {
object-fit: contain;
vertical-align: middle;
}
input {
border: 2px solid #FFB722;
border-radius: 0px;
width: 150px;
height: 20px;
}
#long_box {
width: 250px;
}CSS 설명:
2022.01.13 - [project] - [웹게시판] CSS 태그/스타일
[ 참고한 블로그 ]
'project' 카테고리의 다른 글
| [웹게시판] (13) 게시글 수정(modify.php) (0) | 2022.01.17 |
|---|---|
| [웹게시판] (12) 회원정보 등록(join_action.php) (0) | 2022.01.17 |
| [웹게시판] (10) 로그아웃(logout.php) (0) | 2022.01.17 |
| [웹게시판] (9) 로그인 세션 생성(login_action.php) (0) | 2022.01.17 |
| [웹게시판] (8) 로그인(login.php) (0) | 2022.01.17 |