이제는 준비가 되었다! 무슨 준비!? 회원 가입 페이지를 만들 준비!!
앞에서 배운 SQL 내용을 활용해 회원 가입 기능을 구현해볼 것이다.
우선 예.쁘.게 출력할 페이지를 준비해야 한다. 본격적으로 코드를 보기 전에
(1) index.html -> login.html로 파일 이름을 수정했다.
(2) login -> register로 넘어갈 수 있게 link를 추가해줬다.
link가 설정된 "here" 글자를 누르면 register.html로 이동하는 구조이다.
자 그럼 register.html이 어떻게 구성되어 있는 지 확인해보자.
[ register.html ]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Register</title>
<link rel="stylesheet" href="./css/register.css">
</head>
<body>
<div class="container">
<h1>REGISTER</h1>
<form action="./register.php" method="post">
<div>
<label for="name">Name</label>
<input type="text" name="name" required>
</div>
<div>
<label for="username">Username</label>
<input type="text" name="username" required>
</div>
<div>
<label for="password">Password</label>
<input type="password" name="password" required>
</div>
<div>
<label for="password_re">Check Password</label>
<input type="password" name="password_re" required>
</div>
<div>
<label for="mail">Email</label>
<input type="email" name="mail" required>
</div>
<button class="register_btn">REGISTER</button>
</form>
</div>
</body>
</html>
register page에서는 사용자의 실제 이름, 사용할 username, 비밀번호, 메일 정보를 입력하게 되어있다.
제일 바깥의 <form> tag부터 보면
action : register.php로 from 안에 있는 버튼이 눌리면 register.php가 동작하게 된다.
method : post -> 사용자가 입력한 파라미터는 $_POST로 들어갈 것이다.
<input> tag의 경우에는 required가 사용되었기 때문에
입력하지 않으면 register.php로 넘어가지 못한다.
register page의 완성된 모습은 아래와 같다.
register.html에 스타일을 입혀준 코드는 login.html에 사용한 CSS와 거의 동일하다.
[ register.css ]
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: grid;
place-items: center;
height: 100vh;
}
.container {
display: flex;
flex-direction: column;
justify-content: space-around;
width: 350px;
height: 65%;
border-radius: 10px;
padding: 20px;
background-color: #eee;
}
h1 {
text-align: center;
}
form {
height: 80%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
label {
font-size: 20px;
font-weight: bold;
}
input {
width: 100%;
padding: 5px;
border: none;
border-bottom: 1px solid rgb(1, 88, 88);
outline: none;
background-color: #eee;
font-size: 18px;
}
.register_btn {
font-size: 20px;
font-weight: bold;
border: none;
padding: 5px;
cursor: pointer;
background-color: rgb(1, 88, 88);
margin-top: 10px;
color: #fff;
}
Last updated
