MVC 패턴 돌아가는 방법 공부 !
🔰 w3schools
https://www.w3schools.com/
➡기본적 HTML,CSS,JS 사용 튜토리얼 알려줌
1) Panels
https://www.w3schools.com/bootstrap/bootstrap_panels.asp
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_panels_footer&stacked=h
➡ 복사해서 원하는 JSP에 넣어주기
➡ link, script 꼭 가져오고
➡ body에 해당 태그들 넣어주기
2) Jumbotron
https://www.w3schools.com/bootstrap/bootstrap_jumbotron_header.asp
➡ 해당 코드만 복사해오기
3) Navbar
https://www.w3schools.com/bootstrap/bootstrap_navbar.asp
4) Forms
https://www.w3schools.com/bootstrap/bootstrap_forms.asp
5) CSS Buttons
https://www.w3schools.com/bootstrap/bootstrap_ref_css_buttons.asp
6) CSS Table
https://www.w3schools.com/bootstrap/bootstrap_ref_css_tables.asp
main.jsp
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<meta charset="EUC-KR">
<title>join.jsp</title>
</head>
<body>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
<div class="jumbotron">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing
responsive, mobile-first projects on the web.</p>
</div>
<div class="panel panel-default">
<div class="panel-heading">회원가입</div>
<div class="panel-body">
<form action="JoinController" method="post">
<div class="form-group">
<label for="id">ID : </label>
<input name="id" type="text" class="form-control" id="id">
</div>
<div class="form-group">
<label for="pwd">PW : </label>
<input name="pw" type="password" class="form-control" id="pwd">
</div>
<div class="form-group">
<label for="nick">NICK : </label>
<input name="nick" type="text" class="form-control" id="nick">
</div>
<button type="reset" class="btn btn-basic">RESET</button>
<button type="submit" class="btn btn-info">JOIN</button>
</form>
</div>
<div class="panel-footer">AISCHOOL2024 - HAHAHA</div>
</div>
</div>
</body>
</html>
JoinController
package com.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("/JoinController")
public class JoinController extends HttpServlet {
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("EUC-KR");
String id = request.getParameter("id");
String pw = request.getParameter("pw");
String nick = request.getParameter("nick");
System.out.println(id+"/"+pw+"/"+nick);
}
}
jdbc 찾아와서
lib에 넣기
WMemberVO 만들기
package com.model;
public class WMemberVO {
private String id;
private String pw;
private String nick;
public WMemberVO(String id, String pw, String nick) {
this.id = id;
this.pw = pw;
this.nick = nick;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getPw() {
return pw;
}
public void setPw(String pw) {
this.pw = pw;
}
public String getNick() {
return nick;
}
public void setNick(String nick) {
this.nick = nick;
}
}
회원가입
WMemberDAO
package com.model;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
public class WMemberDAO {
private Connection conn;
private PreparedStatement psmt;
private ResultSet rs;
private void dbOpen() {
try {
Class.forName("oracle.jdbc.driver.OracleDriver");
String db_id = "hr";
String db_pw = "12345";
String db_url = "jdbc:oracle:thin:@localhost:1521:xe";
conn = DriverManager.getConnection(db_url, db_id, db_pw);
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
}
}
private void dbClose() {
try {
if (rs != null)
rs.close();
if (psmt != null)
psmt.close();
if (conn != null)
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
// 회원가입
public int join(WMemberVO vo) {
int cnt = 0;
dbOpen();
String sql = "INSERT INTO WMEMBER VALUES(?,?,?)";
try {
psmt = conn.prepareStatement(sql);
psmt.setString(1, vo.getId());
psmt.setString(2, vo.getPw());
psmt.setString(3, vo.getNick());
cnt = psmt.executeUpdate();
} catch (SQLException e) {
e.printStackTrace();
} finally {
dbClose();
}
return cnt;
}
}
main.jsp
join.jsp 복사하여 지울 태그들 지우고 바꿀 태그들 넣어주기
<div class="panel panel-default">
<div class="panel-heading">메인페이지</div>
<div class="panel-body">
<button class="btn btn-success">로그인</button>
<a href="join.jsp"><button class="btn btn-info">회원가입</button></a>
</div>
<div class="panel-footer">AISCHOOL2024 - HAHAHA</div>
</div>
회원가입 누르면 join.jsp 페이지로 넘어갈 수 있게 a태그 넣어준다~
회원가입 성공시
console 창 출력
DB에 저장된 거 확인해보기
로그인
login.jsp
<div class="panel panel-default">
<div class="panel-heading">로그인</div>
<div class="panel-body">
<form action="LoginController" method="post">
<div class="form-group">
<label for="id">ID : </label>
<input name="id" type="text" class="form-control" id="id">
</div>
<div class="form-group">
<label for="pwd">PW : </label>
<input name="pw" type="password" class="form-control" id="pwd">
</div>
<button type="submit" class="btn btn-success">LOGIN</button>
</form>
</div>
<div class="panel-footer">AISCHOOL2024 - HAHAHA</div>
</div> WMemberVO에 생성자 추가
public WMemberVO(String id, String pw) {
this.id = id;
this.pw = pw;
}LoginConotroller
package com.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 javax.servlet.http.HttpSession;
import com.model.WMemberDAO;
import com.model.WMemberVO;
@WebServlet("/LoginController")
public class LoginController extends HttpServlet {
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String id = request.getParameter("id");
String pw = request.getParameter("pw");
WMemberVO vo = new WMemberVO(id, pw);
WMemberDAO dao = new WMemberDAO();
WMemberVO info = dao.login(vo);
if (info != null) {
System.out.println("로그인 성공");
HttpSession session = request.getSession();
session.setAttribute("info", info);
} else {
System.out.println("로그인 실패");
}
response.sendRedirect("main.jsp");
}
}
WMemberDAO
// 로그인
public WMemberVO login(WMemberVO vo) {
WMemberVO info = null;
dbOpen();
String sql = "SELECT * FROM WMEMBER WHERE ID = ?, PW = ?";
try {
psmt = conn.prepareStatement(sql);
psmt.setString(1, vo.getId());
psmt.setString(2, vo.getPw());
rs = psmt.executeQuery();
if (rs.next()) {
String id = rs.getString("ID");
String pw = rs.getString("PW");
String nick = rs.getString("NICK");
info = new WMemberVO(id, pw, nick);
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
dbClose();
}
return info;
}로그아웃
logoutController
package com.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 javax.servlet.http.HttpSession;
@WebServlet("/logoutController")
public class logoutController extends HttpServlet {
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
HttpSession session = request.getSession();
session.invalidate();
response.sendRedirect("main.jsp");
}
} main.jsp 수정
-> 로그인 안 했을 때 로그인, 회원가입 버튼
-> 로그인 했을 때 로그아웃 버튼
-> 관리자(ID가 admin일 때)로 로그인했을 때 회원정보 버튼
<!-- 1. if 사용 방법 -->
<!-- 로그인 안 했을 때 -->
<c:if test="${empty info}">
<a href="login.jsp"><button class="btn btn-success">로그인</button></a>
<a href="join.jsp"><button class="btn btn-info">회원가입</button></a>
</c:if>
<!-- 로그인 했을 때 -->
<c:if test="${not empty info}">
<c:out value="${info.nick}"/>
님 Welcome
<br>
<a href="logoutController" class="btn btn-warning">로그아웃</a>
<!-- 아이디가 admin인 사람만 볼 수 있는 회원정보-->
<c:if test="${info.id eq 'admin'}">
<a href="ListController" class="btn btn-info">회원정보</a>
</c:if>
</c:if>
<!-- 2. choose-when-otherwise 사용 방법-->
<c:choose>
<!-- 로그인 했을 때 -->
<c:when test="${not empty info}">
<c:out value="${info.nick}"/>
님 Welcome
<br>
<a href="logoutController" class="btn btn-warning">로그아웃</a>
<!-- 아이디가 admin인 사람만 볼 수 있는 회원정보-->
<c:if test="${info.id eq 'admin'}">
<a href="ListController" class="btn btn-info">회원정보</a>
</c:if>
</c:when>
<!-- 로그인 안 했을 때 -->
<c:otherwise>
<a href="login.jsp"><button class="btn btn-success">로그인</button></a>
<a href="join.jsp"><button class="btn btn-info">회원가입</button></a>
</c:otherwise>
</c:choose>
회원정보 목록
listController
package com.controller;
import java.io.IOException;
import java.util.ArrayList;
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.model.WMemberDAO;
import com.model.WMemberVO;
@WebServlet("/ListController")
public class ListController extends HttpServlet {
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
WMemberDAO dao = new WMemberDAO();
ArrayList<WMemberVO> list = dao.list();
HttpSession session = request.getSession();
session.setAttribute("list", list);
response.sendRedirect("list.jsp");
}
}
WMemberDAO
// 회원 정보 리스트
public ArrayList<WMemberVO> list() {
ArrayList<WMemberVO> list = new ArrayList<WMemberVO>();
dbOpen();
String sql = "SELECT * FROM WMEMBER";
try {
psmt = conn.prepareStatement(sql);
rs = psmt.executeQuery();
while (rs.next()) {
String id = rs.getString("ID");
String pw = rs.getString("PW");
String nick = rs.getString("NICK");
WMemberVO vo = new WMemberVO(id, pw, nick);
list.add(vo);
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
dbClose();
}
return list;
}list.jsp
<table class="table table-bordered table-hover">
<tr>
<td>ID</td>
<td>PW</td>
<td>NICK</td>
</tr>
<!-- JSTL을 활용하여 회원의 정보를 출력 -->
<c:forEach items="${list}" var="list">
<tr>
<td><c:out value="${list.id}"/></td>
<td><c:out value="${list.pw}"/></td>
<td><c:out value="${list.nick}"/></td>
</tr>
</c:forEach>
</table> 
Hello, World!