저번에는 로그인 페이지를 만들어서
이번에는 회원가입기능을 넣으려고 한다.
- login.php : 수정 및 css 추가
- register.php: 회원가입 만들기 및 유효성검사,css추가
1. login.php (로그인 페이지)
✅로그인페이지 수정하기
<form action="login_proc.php" method="post">
<div class="input_field">
<input type="text" name="user_id" placeholder="아이디" required>
<input type="password" name="user_pw" placeholder="비밀번호" required>
</div>
<a href="register.php" id="register_link">회원가입</a>
<button type="submit">로그인</button>
</form>➡️저번에 만들었던 login.php에서 form태그에 회원가입을 추가했다.
#register_link {
display:block;
text-align:left;
margin-left:10px;
margin-bottom: 10px;
font-weight: bold;
font-size: 13px;
color:#888;
text-decoration:none;
transition: color 0.3s ease;
}
#register_link:hover {
text-decoration: underline;
color:#4B9CD3;
}➡️그에 맞게 css도 수정
➡️회원가입을 클릭시 색깔과 밑줄 추가
2. register.php (회원가입 페이지)
✅회원가입 페이지 만들기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회원가입</title>
<link rel="stylesheet" href="/CSS/style.css">
</head>
<body>
<div class="register_box">
<h2>회원가입</h2>
<form action="register_proc.php" method="POST">
<div class="input_field">
<input type="text" name="user_id" placeholder="아이디" required>
<button type="submit" name="action" value="check" id="check_id">중복확인</button>
<input type="password" name="user_pw" placeholder="비밀번호" required>
<input type="text" name="name" placeholder="이름" required>
<input type="text" name="address" placeholder="주소" required>
<button type="submit" name="action" value="register" id="register_btn">가입하기</button>
</div>
</form>
</div>
<script src="JS/register.js"></script>
</body>
</html>➡️중복확인, 가입하기 버튼 두개를 만들고 값 주기
➡️아이디,비밀번호,이름 ,주소 입력칸을 만들기
➡️JS디렉터리 만들어서 register.js에 required로 입력을 안했을 시 공지해주기
2.1. JS/register.js
document.querySelector("button[name='action'][value='check']").addEventListener("click", function (e) {
document.querySelector("input[name='user_pw']").removeAttribute("required","");
document.querySelector("input[name='name']").removeAttribute("required","");
document.querySelector("input[name='address']").removeAttribute("required","");
});
document.querySelector("button[name='action'][value='register']").addEventListener("click", function (e) {
document.querySelector("input[name='user_pw']").setAttribute("required","");
document.querySelector("input[name='name']").setAttribute("required","");
document.querySelector("input[name='address']").setAttribute("required","");
});➡️JS문법을 몰라서 찾아봐서 했다 ㅠㅠ..
- querySelector = html태그 가져오기
- addEventListener = click했을 시 함수실행
- 중복확인 버튼 누를 때 removeAttribute로 required잠깐 꺼주기
- 회원가입 버튼 누를 때 setAttribute로 required 다시 활성화 해주기
2.2. CSS 추가해주기
register_box{
background: white;
padding: 40px 30px;
border-radius: 12px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
width: 360px;
}
.register_box h2 {
text-align: center;
margin-bottom: 24px;
color: #333;
}
#register_btn {
width: 100%;
padding: 12px;
margin-top: 10px;
background: linear-gradient(45deg, #4B9CD3, #9370DB);
border: none;
border-radius: 8px;
color: white;
font-weight: bold;
font-size: 15px;
cursor: pointer;
transition: 0.3s;
}
#register_btn:hover {
filter: brightness(1.1);
}
#check_id {
padding: 10px 14px;
background: linear-gradient(45deg, #4B9CD3, #9370DB);
border: none;
border-radius: 8px;
color: white;
font-size: 13px;
cursor: pointer;
transition: 0.3s;
}
#check_id:hover {
filter: brightness(1.1);
}➡️css는 거의 login.php랑 비슷해서 복붙했다
다음에 이어서 register_proc.php 파일로 DB연결하고
회원가입 데이터를 DB에 삽입 하는것과
login_proc.php에서 DB조회 후 로그인이 가능해지는 것까지 해보겠다.
'Web > Web 개발' 카테고리의 다른 글
| 세션설정 및 로그아웃 구현하기 (0) | 2025.04.23 |
|---|---|
| 메인페이지 만들기 (1) | 2025.04.22 |
| 회원가입 만들기 (2/2) (0) | 2025.04.15 |
| GET 파라미터로 DB 조회하고 화면에 출력해보기 (0) | 2025.04.11 |
| 간단한 로그인 페이지 만들기(DB연동x) (0) | 2025.04.10 |
