로그인 페이지
login.php 파일은 우측 상단의 'Login'버튼을 클릭했을 때 연결되는 로그인 페이지를 생성한다.
login.php의 입력부분을 통해 사용자가 입력한 ID/PW 내용은 form 태그를 통해 login_action.php로 전달된다.
ID, PW 정보가 올바른지 확인하고 세션을 생성하는 동작은 login_action.php에서 수행하고, login.php는 입력 폼만 제공하는 형태이다.
login.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
session_start();
if(isset($_SESSION['userid'])) {
?>
<div class = account_display>
<?php
echo $_SESSION['userid'];?>님
<font style="cursor: hand" onClick="location.href='./logout.php'" class = bt>Logout</font>
</div>
<?php
}
else {
?>
<div class = account_display>
<div class = bt>
<font style="cursor: hand" onClick="location.href='./login.php'">Login</font>
</div>
</div>
<?php }
?>
</header>
<div id="side_box">
<div class="bt" id="bt1">
<font style="cursor: hand" onClick="location.href='./join.php'">회원가입</font>
</div>
</div>
<section>
<div id="menu_title">로그인</div>
<form method='post' action='login_action.php'>
<p>ID <input name="id" type="text"></p>
<p>PW <input name="pw" type="password"></p>
<input type="submit" value="로그인" class="bt2">
</form>
</section>
</body>
</html>(1) 웹서비스 이름 / 계정정보 출력
(2) 사이드 박스: 회원가입 버튼
클릭하면 join.php 페이지로 연결되는 회원가입 버튼을 출력한다.
(3) ID/PW 입력창 출력
input 태그를 이용해 입력창을 생성한다.
(4) 로그인 버튼 출력
'로그인' 버튼을 클릭하면 form 태그를 이용해 사용자가 작성한 내용을 POST 메소드 방식으로 login_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;
}
CSS 설명:
2022.01.13 - [project] - [웹게시판] CSS 태그/스타일
[ 참고한 블로그 ]
'project' 카테고리의 다른 글
| [웹게시판] (10) 로그아웃(logout.php) (0) | 2022.01.17 |
|---|---|
| [웹게시판] (9) 로그인 세션 생성(login_action.php) (0) | 2022.01.17 |
| [웹게시판] (7) 게시글 보기(view.php) (0) | 2022.01.17 |
| [웹게시판] (6) 게시글 등록(write_action.php) (0) | 2022.01.17 |
| [웹게시판] (5) 게시글 작성(write.php) (0) | 2022.01.17 |