기본 게시판 만들기
1. 초기 JDBC 환경 설정
2. 게시판 초기화면 구현하기
3. 로그인(인증), 로그아웃 구현하기
기본 게시판 만들기
1. 초기 JDBC 환경 구성
- 기본 틀(템플릿)은 미리 만들어둔 것으로 사용했습니다. ( 아래 샘플 다운주소 )
- jQuery js라이브러리, Bootstrap 프레임워크를 사용했습니다.
- jar파일로 JSTL파일(jstl-1.2.jar)과 ojdbc6.jar, cos.jar를 사용했습니다.
- 샘플 다운로드: https://github.com/yhyuk/server_study/blob/main/server/myapp/myapp_%EC%83%98%ED%94%8C.war
yhyuk/server_study
Contribute to yhyuk/server_study development by creating an account on GitHub.
github.com
[ 패키지 구성 ]
1) com.test.myapp
- 메인 패키지
- Index.Java (index.jsp) : 시작 페이지
- EncodingFilter.java : 인코딩 필터
2) comtest.myapp.board
- 게시판 패키지
3) com.test.myapp.member
- 회원 패키지
여기까지 기본 콘텐츠 구성이다.
이제 각 패키지 구성 안에서 만들 페이지(Servlet + JSP)
1) com.test.myapp ( 메인 패키지 )
- DBUtil.java -> Oracle DB 연결 클래스
2) com.test.myapp.board ( 게시판 패키지 )
- List.java ( list.jsp )
- Add.java ( add.jsp )
- AddOk.java
- Edit.java ( edit.jsp )
- EditOk.java
- Del.java ( del.jsp )
- DelOk.java
- View.java ( view.jsp)
- BoardDAO.java
- BoardDTO.java
3) com.test.myapp.member ( 회원 패키지 )
- Login.java ( login.jsp )
- LoginOk.java
- Logout.java
- MemberDAO.java
- MemberDTO.java
[ 콘텐츠 구성 ]
[ asset ]
- jQuery, Bootstrap, Images
[ inc ]
- 조각 페이지
- asset.jsp : 클라이언트 코드 참조 페이지
- header.jsp : 사이트 공통 헤더
- init.jsp : 초기 JavaScript 실행 페이지
[ WEB-INF ]
1) lib
- cos.jar : 파일 업로드
- jstl-1.2jar : JSTL 파일
- ojdbc6.jar : 오라클 JDBC 연결 파일
2) views
- index.jsp : 시작 페이지
a. board 폴더 ( list.jsp, add.jsp, edit.jsp, view.jsp, del.jsp )
b. member 폴더 ( login.jsp )
[ SQL-Developer - DB 테이블 만들기 ]
- tblUsers
- tblBoards
-- 유저 테이블
create table tblUsers (
id varchar2(30) primary key, -- 아이디 (PK)
pw varchar2(30) not null, -- 비밀번호
name varchar2(30) not null, -- 이름
lv number(1) default (1) not null, -- 등급(권한)
regdate date default sysdate not null -- 가입일자
);
insert into tblUsers values ('hong', '1111', '홍길동', default, default);
insert into tblUsers values ('kim', '1111', '아무개', default, default);
insert into tblUsers values ('admin', '1111', '관리자', 3, default);
-- 게시판 테이블
create table tblBoards (
seq number primary key, -- 글번호(PK)
id varchar2(30) not null references tblUsers(id), -- 아이디(FK)
subject varchar2(500) not null, -- 제목
content varchar2(400) not null, -- 내용
regdate date default sysdate not null, -- 작성시각
readcount number default 0 not null, -- 조회수
tag varchar2(1) not null check(tag in ('y', 'n')) -- 글내용에 HTML 태그 허용 유무
);
create sequence seqBoards;
commit;
2. 게시판 초기화면 구현하기
[ DB 연결 ]
- Eclipse에 Oracle DB 연결하는 클래스 구현
- com.test.myapp > DBUtil.java
public class DBUtil {
public static Connection open() {
Connection conn = null;
String url = "jdbc:oracle:thin:@localhost:1521:xe";
String id = "hr";
String pw = "java1234";
try {
Class.forName("oracle.jdbc.driver.OracleDriver");
conn = DriverManager.getConnection(url, id, pw);
return conn;
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
}
[ 초기 페이지 구현 ]
1) com.test.myapp > Index.java
@WebServlet("/index.do")
public class Index extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
RequestDispatcher dispatcher = req.getRequestDispatcher("/WEB-INF/views/index.jsp");
dispatcher.forward(req, resp);
}
}
2) WEB-INF > views > index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>myapp</title>
<%@ include file="/inc/asset.jsp" %>
</head>
<body>
<!-- index.jsp -->
<%@ include file="/inc/header.jsp" %>
<section class="main-section">
<h1>시작 페이지</h1>
<div>웹 응용 프로그램의 시작 페이지입니다.</div>
</section>
<%@ include file="/inc/init.jsp" %>
</body>
</html>
- 초기화면 ( http://localhost:8090/myapp/index.do )
3. 로그인(인증), 로그아웃 구현하기
[ 로그인 페이지 구현 ]
1) com.tset.myapp.member > Login.java
@WebServlet("/member/login.do")
public class Login extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
RequestDispatcher dispatcher = req.getRequestDispatcher("/WEB-INF/views/member/login.jsp");
dispatcher.forward(req, resp);
}
}
2) WEB-INF > views > member > login.jsp
- 각 이름의 링크 클릭시 tblUsers 테이블에 저장된 데이터 정보(id, pw) 넘겨주기
* JSP는 body 부분만 코드 작성하겠습니다.
<section class="main-section">
<h1>User</h1>
<div class="user-list">
<button type="button" class="btn btn-default"
onclick="location.href='/myapp/member/loginok.do?id=hong&pw=1111';">홍길동</button>
<button type="button" class="btn btn-default"
onclick="location.href='/myapp/member/loginok.do?id=kim&pw=1111';">아무개</button>
<button type="button" class="btn btn-default"
onclick="location.href='/myapp/member/loginok.do?id=admin&pw=1111';">관리자</button>
</div>
</section>
- 로그인 페이지 화면 ( http://localhost:8090/myapp/member/login.do )
[ 로그인/로그아웃 후 페이지 출력 ]
1) com.test.myapp.member > MemberDTO.java
- tblUsers 테이블의 컬럼값을 MemberDTO.java 파일에 각각 getter / setter를 만들어준다.
public class MemberDTO {
private String id;
private String pw;
private String name;
private String lv;
private String regdate;
// id, pw, name, lv, regdate getter & setter 구현
// 코드는 길어서 생략하겠습니다.
}
2) com.test.myapp.member > MemberDAO.java
- DB 연결 > MemberDAO() 생성자
- DB 작업 > select > MemberDTO login(MemberDTO dto)
public class MemberDAO {
private Connection conn;
private PreparedStatement pstat;
private ResultSet rs;
public MemberDAO() {
try {
conn = DBUtil.open();
} catch (Exception e) {
e.printStackTrace();
}
}
public MemberDTO login(MemberDTO dto) {
try {
String sql = "select * from tblUsers where id=? and pw=?";
pstat = conn.prepareStatement(sql);
pstat.setString(1, dto.getId());
pstat.setString(2, dto.getPw());
rs = pstat.executeQuery();
if ( rs.next() ) {
// 있으면 객체(DTO) 반환
MemberDTO result = new MemberDTO();
result.setId(rs.getString("id"));
result.setName(rs.getString("name"));
result.setLv(rs.getString("lv"));
result.setRegdate(rs.getString("regdate"));
return result;
}
// 없으면 null 반환
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
}
3) com.test.myapp.member > LoginOk.java
- 데이터 가져오기 (id, pw)
- DB 작업
- 인증 티켓 발급
@WebServlet("/member/loginok.do")
public class LoginOk extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 1. 데이터 가져오기 (id, pw)
String id = req.getParameter("id");
String pw = req.getParameter("pw");
// 2. DB 작업 > select
MemberDAO dao = new MemberDAO();
MemberDTO dto = new MemberDTO();
dto.setId(id);
dto.setPw(pw);
// 로그인 성공 -> 회원의 정보 반환(DTO)
// 로그인 실패 -> null 반환
MemberDTO result = dao.login(dto);
// 3. 인증 티켓 발급
if ( result != null ) {
HttpSession session = req.getSession();
session.setAttribute("id", result.getId());
session.setAttribute("name", result.getName());
session.setAttribute("lv", result.getLv());
session.setAttribute("regdate", result.getRegdate());
resp.sendRedirect("/myapp/index.do");
} else {
// 실패
resp.sendRedirect("/myapp/member/login.do");
}
}
}
4) com.test.myapp.member > Logout.java
- 로그아웃 페이지
- 인증 티켓 제거
- 부가 정보 제거
@WebServlet("/member/logout.do")
public class Logout extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
HttpSession session = req.getSession();
session.removeAttribute("id");
session.removeAttribute("name");
session.removeAttribute("lv");
session.removeAttribute("regdate");
resp.sendRedirect("/myapp/index.do");
}
}
5) webapp > inc > header.jsp (기본구성 변경하기)
- empty를 이용해서 이름(아이디), Login, Logout 감추기
- header.jsp는 기본구성에 포함되어있는 파일인데, 우리가 변경할 것은 초기 페이지에는 우측 상단 홍길동(hong) Login Logout이 다 표시되는데 로그인 안할 시 Login만 뜨게, 로그인 시 Logout만 뜨게, 이름(아이디)는 로그인 한 사용자의 이름으로 뜨게 변경해보자.
<!-- 로그인 했을 때 -->
<c:if test="${ not empty id }">
<div>${ name}(${ id })</div>
<div class="btn-auth" onclick="location.href='/myapp/member/logout.do';" title="로그아웃">Logout</div>
</c:if>
<!-- 로그인 안했을 때 -->
<c:if test="${ empty id }">
<div class="btn-auth" onclick="location.href='/myapp/member/login.do';" title="로그인">Login</div>
</c:if>
- 로그인 전 페이지 ( http://localhost:8090/myapp/member/login.do )
- 로그인 후 페이지 ( http://localhost:8090/myapp/index.do )
'교육 > Server' 카테고리의 다른 글
| JDBC 개발자 수업 79일차 - 기본 게시판 만들기(3) - 상세 페이지, 수정하기, 삭제하기 (0) | 2021.07.20 |
|---|---|
| JDBC 개발자 수업 79일차 - 기본 게시판 만들기(2) - 리스트, 글 쓰기 (1) | 2021.07.20 |
| JDBC 개발자 수업 77일차 - JSP MVC, JSP Model 2 - 'Hello' 웹 페이지 만들기 (0) | 2021.07.15 |
| JDBC 개발자 수업 76일차 - PreparedStatement 클래스, CallableStatement 클래스 (0) | 2021.07.14 |
| JDBC 개발자 수업 75일차(2) - Statement 클래스, ResultSet 클래스 (0) | 2021.07.13 |
댓글