09009

[Spring] 예제 1 연습 - 회원 DTO, 로그인 및 회원가입 페이지 제작 본문

Back-End/Spring
[Spring] 예제 1 연습 - 회원 DTO, 로그인 및 회원가입 페이지 제작
09009

UserDto

package com.yyi.problem1.dto;

import java.util.Date;

import org.springframework.format.annotation.DateTimeFormat;

public class UserDto {
	private int userid;
	private String user_id;
	private String user_pw;
	private String nickname;
	private String email;
	@DateTimeFormat(pattern = "yyyy-MM-dd")
	private Date birth;
	private String phone;
	private Date reg_date;
	public UserDto() {
		super();
	}
	public UserDto(int userid, String user_id, String user_pw, String nickname, String email, Date birth, String phone,
			Date reg_date) {
		super();
		this.userid = userid;
		this.user_id = user_id;
		this.user_pw = user_pw;
		this.nickname = nickname;
		this.email = email;
		this.birth = birth;
		this.phone = phone;
		this.reg_date = reg_date;
	}
	public int getUserid() {
		return userid;
	}
	public void setUserid(int userid) {
		this.userid = userid;
	}
	public String getUser_id() {
		return user_id;
	}
	public void setUser_id(String user_id) {
		this.user_id = user_id;
	}
	public String getUser_pw() {
		return user_pw;
	}
	public void setUser_pw(String user_pw) {
		this.user_pw = user_pw;
	}
	public String getNickname() {
		return nickname;
	}
	public void setNickname(String nickname) {
		this.nickname = nickname;
	}
	public String getEmail() {
		return email;
	}
	public void setEmail(String email) {
		this.email = email;
	}
	public Date getBirth() {
		return birth;
	}
	public void setBirth(Date birth) {
		this.birth = birth;
	}
	public String getPhone() {
		return phone;
	}
	public void setPhone(String phone) {
		this.phone = phone;
	}
	public Date getReg_date() {
		return reg_date;
	}
	public void setReg_date(Date reg_date) {
		this.reg_date = reg_date;
	}
	
	
}

UserController

package com.yyi.problem1.user.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("user/*")
public class UserController {
	
	@RequestMapping("loginPage")
	public String loginPage() {
		return "user/loginPage";
	}

	@RequestMapping("joinPage")
	public String joinPage() {
		return "user/joinPage";
	}
}

로그인 페이지 제작

- 부트스트랩 라이브러리

<title> 뒤에 복사 붙여넣기

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">

</head>뒤에 복사 붙여넣기

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>

기본 형식

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
</head>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
<body>

<div class="container">
	<div class="row"></div>
	<div class="row mt-5">
		<div class="col"></div>
		<div class="col"></div>
		<div class="col"></div>
	
	</div>
	<div class="row"></div>


</div>

</body>
</html>

입력 양식

<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">

 

로그인 화면

loginPage

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
</head>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
<body>

<div class="container">
	<div class="row"></div>
	<div class="row mt-5">
		<div class="col"></div>
		
		<%-- 로그인 화면 시작 --%>
		<div class="col-6">
			<form action="./loginProcess" method="post">
			
					<div class="row">
						<div class="col text-center fs-1">
							<h3>로그인</h3>
						</div>
					</div>
					
					<div class="row">
						<div class="col text-center fs-6">
							<p>로그인 하시면 다양한 혜택에 참여하실 수 있습니다.</p>
						</div>
					</div>
					
					<div class="row">
						<div class="col d-grid">
							 <input type="text" class="form-control" name="user_id" placeholder="ID">
						</div>
					</div>
					
					<div class="row mt-2">
						<div class="col d-grid">
							 <input type="password" class="form-control" name="user_pw" placeholder="Password">
						</div>
					</div>
					
					<div class="row mt-2">
						<div class="col d-grid">
							<button class="btn text-white" type="submit" style="background-color:#9bce26;">로그인</button>
						</div>
					</div>
					
					<div class="row mt-2">
						<div class="col d-grid">
							<a href="./joinPage" class="btn" style="background-color:#FFD700";>회원가입</a>
						</div>
					</div>
				</form>
				</div>
				<%-- 로그인 화면 끝 --%>
	
		<div class="col"></div>
	
	
	</div>
	<div class="row"></div>


</div>

</body>
</html>

회원가입 페이지

joinPage

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
</head>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
<body>

<div class="container">
	<div class="row"></div>
	<div class="row mt-5">
		<div class="col"></div>
		
		<%-- 회원가입 화면 --%>
		<div class="col-6">
			<form action="./joinProcess" method="post">
			<div class="row">
				<div class="col text-center fs-1">
					<h3>회원가입</h3>
				</div>
			</div>
			
			<div class="row">
				<div class="col text-center fs-6">
					<p>회원이 되어 다양한 서비스와 혜택을 누리세요.</p>
				</div>
			</div>
			
			<div class="row">
				<div class="col">
					<input type="text" class="form-control" name="user_id" placeholder="아이디">
				</div>
			</div>
			
			<div class="row mt-3">
				<div class="col">
					<input type="password" class="form-control" name="user_pw" placeholder="비밀번호">
				</div>
			</div>

			<div class="row mt-3">
				<div class="col">
					<input type="text" class="form-control" name="nickname" placeholder="닉네임">
				</div>
			</div>

			<div class="row mt-3">
				<div class="col">
					<input type="email" class="form-control" name="email" placeholder="이메일 : name@example.com">
				</div>
			</div>
			
			<div class="row mt-3">
				<div class="col">
					<input type="date" class="form-control" name="birth" placeholder="생년월일">
				</div>
			</div>									
			
			<div class="row mt-3">
				<div class="col">
					<input type="text" class="form-control" name="phone" placeholder="전화번호">
				</div>
			</div>		
			
			<div class="row mt-3">
				<div class="col d-grid">
					<button class="btn" type="submit" style="background-color:#FFD700;">회원가입</button>
				</div>
			</div>
			
			</form>
		</div>
		<%-- 회원가입 화면 --%>
		
		<div class="col"></div>
	
	</div>
	<div class="row"></div>


</div>

</body>
</html>

 

로그인 페이지

 

회원가입 페이지

'Back-End > Spring' 카테고리의 다른 글

[Spring] 예제 1 연습 - 게시판 구현  (0) 2023.05.20
[Spring] 예제 1 연습 - 로그인, 회원가입 기능 구현, 메인 페이지  (0) 2023.05.20
[Spring] 예제 1 연습 - 테이블 설계  (0) 2023.05.20
[Spring] 예제 1 연습 - 설정  (0) 2023.05.20
[Spring] 예제1 - 작성일 출력 형식 수정  (0) 2023.05.18
'Back-End/Spring' Related Articles more
Comments