index.jsp
<p><a href="<%= response.encodeUrl(request.getContextPath() + "/Controller?action=login") %>">클릭해서 로그인</a></p>
login.jsp
<%@ 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>
<style>
* {
margin: 0px;
padding: 0px;
text-decoration: none;
font-family: sans-serif;
}
body {
background-color: #34495e;
width: 100%;
height: 100%;
}
.loginForm {
position: absolute;
width: 300px;
height: 400px;
padding: 30px, 20px;
background-color: #FFFFFF;
text-align: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 15px;
}
.loginForm h2 {
text-align: center;
margin: 30px;
}
.emailForm {
border-bottom: 2px solid #adadad;
margin: 30px;
padding: 10px 10px;
}
.passForm {
border-bottom: 2px solid #adadad;
margin: 30px;
padding: 10px 10px;
}
.email {
width: 100%;
border: none;
outline: none;
color: #636e72;
font-size: 16px;
height: 25px;
background: none;
}
.pw {
width: 100%;
border: none;
outline: none;
color: #636e72;
font-size: 16px;
height: 25px;
background: none;
}
.btn {
position: relative;
left: 40%;
transform: translateX(-50%);
margin-bottom: 40px;
width: 80%;
height: 40px;
background: linear-gradient(125deg, #81ecec, #6c5ce7, #81ecec);
background-position: left;
background-size: 200%;
color: white;
font-weight: bold;
border: none;
cursor: pointer;
transition: 0.4s;
display: inline;
}
.btn:hover {
background-position: right;
}
.bottomText {
text-align: center;
}
</style>
</head>
<body>
<!-- request.getContextPath() : 프로젝트 Path만가져온다 = DATABASE -->
<form action="<%= request.getContextPath() %>/Controller?action=dologin" method="post" class="loginForm">
<input type="hidden" name="action" value="dologin" >
<h2>Login</h2>
<div class="emailForm">
<input type="text" class="email" name="email" placeholder="Email" value="<%= request.getAttribute("email") %>">
</div>
<div class="passForm">
<input type="password" class="pw" name="password" placeholder="PW" value="<%= request.getAttribute("password")
%>">
</div>
<button type="submit" class="btn">LOG IN</button>
<div class="bottomText">
<%= request.getAttribute("message") %>
</div>
</form>
</body>
</html>Controller 서블렛
doGet()
response.setContentType("text/html; charset=UTF-8"); //깨질때 한글설정
PrintWriter out = response.getWriter();
String action = request.getParameter("action");아무것도 없으면 다시 처음부터 / login페이지면 모두 초기화
if(action == null) {
request.getRequestDispatcher("/index.jsp").forward(request, response);
}else if (action.equals("login")){
request.setAttribute("email", "");
request.setAttribute("password", "");
request.setAttribute("message", "");
request.getRequestDispatcher("/login.jsp").forward(request, response);
}doPost()
response.setContentType("text/html; charset=UTF-8"); //깨질때 한글설정
PrintWriter out = response.getWriter();
// doPost DB연결전 요청의 action 파라미터의 값이 null일때 오류문구
String action = request.getParameter("action");
if(action == null) {
out.println("알 수 없는 요청입니다.");
return;
}
Connection conn = null;
try {
conn = ds.getConnection(); // DB연결
} catch (SQLException e) {
out.println("DB연결 실패");
return;
}mySQL
- 새 DATABASE생성
- 데이터베이스 웹샵이 없으면 새로 생성
- uft8mb4는 한글뿐만 아니라 이모지 포함한 문자 가능
CREATE DATABASE IF NOT EXISTS webshop DEFAULT CHARACTER SET utf8 COLLATE utf8_unicode_ci;
use webshop;
- 테이블 users 생성
DROP TABLE IF EXISTS user;
CREATE TABLE users (
id int PRIMARY KEY AUTO_INCREMENT, #유저 아이디
email varchar(50), #유저 이메일
password varchar(50) #유저 비밀번호
);
- 1명의 유저입력
INSERT INTO users(email,password) VALUES("drv98@naver.com",'abcd1234');
