<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
<br>
<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).</p>
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
<p>Tip: You can also remove the .navbar-expand-md class to ALWAYS hide navbar links and display the toggler button.</p>
</div>
</body>
</html>
cards
원하는 모양 선택
부트스트랩을 이미 넣었기 때문에 try it yourself안하고 example복사해도 됨
package com.cos.blog.controller;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.cos.blog.action.Action;
import com.cos.blog.action.user.UsersJoinAction;
import com.cos.blog.action.user.UsersJoinProcAction;
@WebServlet("/user")
public class UsersController extends HttpServlet {
private static final String TAG = "UsersController : ";
private static final long serialVersionUID = 1L;
public UsersController() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doProcess(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doProcess(request, response);
}
// 어떠한 형식의 요청이 오든 여기서 처리
protected void doProcess(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String cmd = request.getParameter("cmd");
System.out.println(TAG + "doProcess : " + cmd);
Action action = router(cmd);
action.execute(request, response);
}
public Action router(String cmd) {
if (cmd.equals("join")) {
// 회원가입 페이지로 이동
// http://localhost:8000/blog/user?cmd=join
// 컨트롤러가 해야될 일들을 위임해서 다른 클래스(UsersJoinAction)가 일을 하게 하는 것을 !팩토리패턴!이라고 한다
return new UsersJoinAction();
} else if (cmd.equals("joinProc")) {
// 회원가입을 진행 한 후 -> index.jsp로 이동
return new UsersJoinProcAction();
} else if (cmd.equals("update")) {
// 회원 수정 페이지로 이동 (세션에 User 오브젝트를 가지고 있을 예정)
} else if (cmd.equals("updateProc")) {
// 회원 수정을 진행 한 후 -> index.jsp로 이동
} else if (cmd.equals("delete")) {
// 회원 수정페이지에서 삭제할 예정 - 회원 삭제를 진행 한 후 -> 로그아웃을 하고 -> index.jsp로 이동
} else if (cmd.equals("login")) {
// 회원 로그인 페이지로 이동
} else if (cmd.equals("loginProc")) {
// 회원 로그인을 수행한 후 -> 세션에 등록을 하고 -> index.jsp로 이동
}
return null;
}
}
Repository - DB, 공공데이터, 다른 데이터 등 어떠한 데이터들을 저장하는 것을Repository라고 한다.
--------------------------------------
클라이언트가 DB정보를 들고 있을 수 없으므로 서버에 연결하여 DB에 접근하여 다시 데이터를 받게 된다.
------------------------------------
자바스크립트에는 히스토리백이 있다 (자바에는 리다이렉트 밖에 없다)
회원가입 내용을 입력하고 가입을 눌렀는데 내용이 틀려서 다시 회원가입페이지로 돌아올경우
사용자가 입력한 내용들을 유지시키는 것
-------------------------------------
프로젝트 하나 생성하고 패키지를 만들자
이렇게 만들면 된다
테이블세팅
CREATE TABLE users(
id number primary key,
username varchar2(100) not null unique,
password varchar2(100) not null,
email varchar2(100) not null,
address varchar2(100) not null,
userProfile varchar2(200),
userRole VARCHAR2(20),
createDate timestamp
) ;
CREATE TABLE board(
id number primary key,
userId number,
title varchar2(100) not null,
content clob,
readCount number default 0,
createDate timestamp,
foreign key (userId) references users (id)
);
CREATE TABLE reply(
id number primary key,
userId number,
boardId number,
content varchar2(300) not null,
createDate timestamp,
foreign key (userId) references users (id) on delete set null,
foreign key (boardId) references board (id) on delete cascade
);
readme.md 파일 생성
파일 다운받아서 복붙
시퀀스 생성
CREATE SEQUENCE USERS_SEQ
START WITH 1
INCREMENT BY 1;
CREATE SEQUENCE BOARD_SEQ
START WITH 1
INCREMENT BY 1;
CREATE SEQUENCE REPLY_SEQ
START WITH 1
INCREMENT BY 1;
package com.cos.blog.controller;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/user")
public class UsersController extends HttpServlet {
private static final String TAG = "UsersController : ";
private static final long serialVersionUID = 1L;
public UsersController() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
router(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
router(request, response);
}
// 어떠한 형식의 요청이 오든 여기서 처리
protected void router(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// http://localhost:8000/blog/user?cmd=join
String cmd = request.getParameter("cmd");
System.out.println(TAG + "router : " + cmd);
if(cmd.equals("join")) {
// 회원가입 페이지로 이동
} else if(cmd.equals("joinProc")) {
// 회원가입을 진행 한 후 -> index.jsp로 이동
} else if(cmd.equals("update")) {
// 회원 수정 페이지로 이동 (세션에 User 오브젝트를 가지고 있을 예정)
} else if(cmd.equals("updateProc")) {
// 회원 수정을 진행 한 후 -> index.jsp로 이동
} else if(cmd.equals("delete")) {
// 회원 수정페이지에서 삭제할 예정 - 회원 삭제를 진행 한 후 -> 로그아웃을 하고 -> index.jsp로 이동
} else if(cmd.equals("login")) {
// 회원 로그인 페이지로 이동
} else if(cmd.equals("loginProc")) {
// 회원 로그인을 수행한 후 -> 세션에 등록을 하고 -> index.jsp로 이동
}
}
}
주소창에 쳐보고 잘 작동되는지 테스트
---
UserController 파일에서 다른파일로 위임
package com.cos.blog.action.user;
import java.io.IOException;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class UsersJoinAction {
// 컨트롤러가 해야될 일들을 위임해서 다른 클래스가 일을 하게 하는 것을 팩토리패턴이라고 한다
public void execute(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
RequestDispatcher dis = request.getRequestDispatcher("user/join.jsp");
dis.forward(request, response);
}
}
user와 관련된 뷰를 넣을 폴더
--
유효성 체크는 모든 action에서 다해줘야 한다 (중요)
router를 doProcess로 변경하고 router를 하나 새로만든다
package com.cos.blog.action.user;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.cos.blog.action.Action;
import com.cos.blog.model.RoleType;
import com.cos.blog.model.Users;
import com.cos.blog.repository.UsersRepository;
import com.cos.blog.util.Script;
public class UsersJoinProcAction implements Action {
// 컨트롤러가 해야될 일들을 위임해서 다른 클래스가 일을 하게 하는 것을 팩토리패턴이라고 한다
@Override
public void execute(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 0. // 페이지 오류를 막기위해(공격 등) 유효성 검사부터 해야한다
if(request.getParameter("username").equals("") ||
request.getParameter("username") == null ||
request.getParameter("password").equals("") ||
request.getParameter("password") == null ||
request.getParameter("email").equals("") ||
request.getParameter("email") == null ||
request.getParameter("address").equals("") ||
request.getParameter("address") == null) {
// 로그하나 남겨야함
return;
}
// 1. 파라메터 받기 (x-www-form-urlencoded)라는 MIME타입 key=value
String username = request.getParameter("username");
String password = request.getParameter("password");
String email = request.getParameter("email"); // postman등으로 공격하면 형식에 맞지않게 보낼수 있기 때문에 유효성체크 해줘야한다(지금은 안함)
String address = request.getParameter("address");
String userRole = RoleType.USER.toString();
// 2. User 오브젝트 변환
Users user = Users.builder()
.username(username)
.password(password)
.email(email)
.address(address)
.userRole(userRole)
.build();
// 3. DB 연결 - UserRepository의 save() 호출
UsersRepository usersRepository = UsersRepository.getInstance();
int result = usersRepository.save(user);
// 4. index.jsp 페이지로 이동
if(result == 1) {
RequestDispatcher dis = request.getRequestDispatcher("index.jsp");
dis.forward(request, response);
} else {
Script.back("회원가입에 실패하였습니다.", response);
}
}
}