{Java}
21.06.24{코딩일기} 동빈나 유튜버 JSP게시판 만들기 (8~10) | 전자정부프레임워크 eclipse 게시판 만들기{day6}
Davey
2021. 6. 24. 22:41
728x90
게시판 코드작성완료 후기 생생하게 공유드립니다. 많이 놀러와주세여:)
https://www.youtube.com/watch?v=P5s5JwvZjBA&t=27s&pp=sAQA
이제부턴 속도가 좀 붙어서 빠르게 만들어보자:)
# list.jsp code 수정
우선 동빈나에서는 bbs.jsp로 '게시판'페이지를 만들었지만 나는 list.jsp에서 만들었다.
글쓰기 버튼까지 추가완료
우선 db를 먼저 생성하기전에 인위적인 데이터를 넣어서 출력도 해보았다.
자세한건 아래 영상을 참조하길 바란다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.io.PrintWriter"%>
<%@ page import="list.ListDAO"%>
<%@ page import="list.Board"%>
<%@ page import="java.util.ArrayList"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" , initial-scale="1">
<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.5.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>BluevulpeBoard</title>
</head>
<body style="background-color: lightblue;">
<%
String userID = null;
if (session.getAttribute("userID") != null) {
userID = (String) session.getAttribute("userID");
}
int pageNumber = 1;
if (request.getParameter("pageNumber") != null) {
pageNumber = Integer.parseInt(request.getParameter("pageNumber"));
}
%>
<nav class="navbar navbar-default">
<!-- navbar-색상(inverse = 검은색, default = 색x) -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
aria-expanded="false">
<!-- class="navbar-toggle collapsed"=>네비게이션의 화면 출력유무
data-toggle="collapse" : 모바일 상태에서 클릭하면서 메뉴가 나오게 설정 -->
<span class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
<!-- 아이콘 이미지 -->
</button>
<a class="navbar-brand" href="main.jsp">BluevulpeBoard</a>
<!-- Bootstrap navbar 기본 메뉴바 -->
</div>
<div class="collapse navbar-collapse"
id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<!-- navbar-nav => 네비게이션 바의 메뉴 -->
<li><a href="main.jsp">메인</a></li>
<li class="active"><a href="list.jsp">게시판</a></li>
<!-- 메뉴, 게시판의 main.jsp와 bbs.jsp의 파일로 각각 이동 -->
</ul>
<%
if (userID == null) {
%>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"><a href="#" class="dropdown-toggle"
data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">회원관리<span class="caret"></span></a>
<!-- 임시의 주소링크 "#"을 기재한다. -->
<!-- caret = creates a caret arrow icon (▼) -->
<ul class="dropdown-menu">
<!-- dropdown-menu : 버튼을 눌렀을때,
생성되는 메뉴(접속하기를 눌렀을때 로그인, 회원가입 메뉴 -->
<li><a href="login.jsp">로그인</a></li>
<!-- active = 활성화 되었을때 로그인, 회원가입-->
<li><a href="join.jsp">회원가입</a></li>
</ul></li>
</ul>
<%
} else {
%>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"><a href="#" class="dropdown-toggle"
data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">회원관리<span class="caret"></span></a>
<!-- caret = creates a caret arrow icon (▼) -->
<ul class="dropdown-menu">
<li><a href="logout.jsp">로그아웃</a></li>
</ul>
</li>
</ul>
<%
}
%>
</div>
</nav>
<div class="container">
<div class="row">
<table class="table table-striped" style="text-align: center; border: 1px solid #dddddd">
<thead>
<tr>
<th style="background-color: #eeeeee; text-align: center;">번호</th>
<th style="background-color: #eeeeee; text-align: center;">제목</th>
<th style="background-color: #eeeeee; text-align: center;">작성자</th>
<th style="background-color: #eeeeee; text-align: center;">작성일</th>
</tr>
</thead>
<tbody>
<%
ListDAO listDAO = new ListDAO();
ArrayList<Board> list = listDAO.getList(pageNumber);
for(int i = 0; i < list.size(); i++) {
%>
<tr>
<td><%= list.get(i).getListID() %></td>
<td><a href="list.jsp?listID=<%= list.get(i).getListID() %>">
<%= list.get(i).getListTitle() %></a></td>
<td><%= list.get(i).getUserID() %></td>
<td><%= list.get(i).getListDate().substring(0, 11) +
list.get(i).getListDate().substring(11, 13) + "시" +
list.get(i).getListDate().substring(14, 16) + "분"%></td>
</tr>
<%
}
%>
</tbody>
</table>
<a href="write.jsp" class="btn btn-primary pull-right">글쓰기</a>
</div>
</div>
</body>
</html>
https://www.youtube.com/watch?v=pCqaGoexV5c&list=PLRx0vPvlEmdAZv_okJzox5wj2gG_fNh_6&index=8
DB가 아닌 html에 날로 데이터 입력하는 방법은 아래코드를 추가하면 된다.
<tbody> <tr> <td>270</td> <td>BLUEVULPE BOARD</td> <td>Bluevulpe</td> <td>2021-06-23</td> </tr> </tbody>
# LIST 테이블 생성
나는 이미 11강까지 코드를 짰기때문에
이미 list라는 테이블을 만들었고, 이 테이블 만드는 방법은 아래와 같이 쿼리를 짰다.
나는 잘 몰라서 '_'언더바로 구분 못했지만 테이블명_label명으로 column label을 설정하도록 주의하자:)
#List package code
이제 db에 원하는 데이터를 주고 받기위해 getter와 setter를 활용해서 아래와 같이 Board class와
ListDAO class를 생성하면 아래와 같이 생성한다. 참고로 List라는 class는 java 패키지 내부 클래스 포함이므로
중복되지 않는 'Board'라는 이름으로 class를 리팩토링 해주었다.
# class refactoring
class명을 우클릭하고 refactor>Rename> option탭을 클릭> Rename Type을 통해 New name을 설정해주면 끝~
# Board.java code
package list;
public class Board {
private int listID;
private String listTitle;
private String userID;
private String listDate;
private String listContent;
private int listAvailable;
public int getListID() {
return listID;
}
public void setListID(int listID) {
this.listID = listID;
}
public String getListTitle() {
return listTitle;
}
public void setListTitle(String listTitle) {
this.listTitle = listTitle;
}
public String getUserID() {
return userID;
}
public void setUserID(String userID) {
this.userID = userID;
}
public String getListDate() {
return listDate;
}
public void setListDate(String listDate) {
this.listDate = listDate;
}
public String getListContent() {
return listContent;
}
public void setListContent(String listContent) {
this.listContent = listContent;
}
public int getListAvailable() {
return listAvailable;
}
public void setListAvailable(int listAvailable) {
this.listAvailable = listAvailable;
}
}
# ListDAO.java code
package list;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
public class ListDAO {
private Connection conn;
private ResultSet rs;
public ListDAO() {
try {
String dbURL = "jdbc:mysql://localhost:3306/nvrg";
String dbID = "nvsg";
String dbPassword = "1234";
Class.forName("org.mariadb.jdbc.Driver");
conn = DriverManager.getConnection(dbURL, dbID, dbPassword);
} catch (Exception e) {
e.printStackTrace();
}
}
public String getDate() {
String SQL = "SELECT NOW()";
try {
PreparedStatement pstmt = conn.prepareStatement(SQL);
rs = pstmt.executeQuery();
if (rs.next()) {
return rs.getNString(1);
}
} catch (Exception e) {
e.printStackTrace();
}
return ""; //데이터베이스 오류
}
public int getNext() {
String SQL = "SELECT listID FROM LIST ORDER BY listID DESC";
try {
PreparedStatement pstmt = conn.prepareStatement(SQL);
rs = pstmt.executeQuery();
if (rs.next()) {
return rs.getInt(1) + 1;
}
return 1; // 첫번째 게시물인 경우
} catch (Exception e) {
e.printStackTrace();
}
return -1; //데이터베이스 오류
}
public int write(String listTitle, String userID, String listContent) {
String SQL = "INSERT INTO LIST VALUES (?, ?, ?, ?, ?, ?)";
try {
PreparedStatement pstmt = conn.prepareStatement(SQL);
pstmt.setInt(1, getNext());
pstmt.setString(2, listTitle);
pstmt.setString(3, userID);
pstmt.setString(4, getDate());
pstmt.setString(5, listContent);
pstmt.setInt(6, 1);
return pstmt.executeUpdate();
} catch (Exception e) {
e.printStackTrace();
}
return -1; //데이터베이스 오류
}
public ArrayList<Board> getList(int pageNumber) {
String SQL = "SELECT * FROM LIST WHERE listID < ? AND listAvailable = 1 ORDER BY listID DESC LIMIT 10";
ArrayList<Board> list = new ArrayList<Board>();
try {
PreparedStatement pstmt = conn.prepareStatement(SQL);
pstmt.setInt(1, getNext() - (pageNumber - 1) * 10);
rs =pstmt.executeQuery();
while ( rs.next()) {
Board text = new Board();
text.setListID(rs.getInt(1));
text.setListTitle(rs.getString(2));
text.setUserID(rs.getString(3));
text.setListDate(rs.getString(4));
text.setListContent(rs.getString(5));
text.setListAvailable(rs.getInt(6));
list.add(text);
}
} catch (Exception e) {
e.printStackTrace();
}
return list; //데이터베이스 오류
}
public boolean nextPage(int pageNumber) {
String SQL = "SELECT * FROM LIST WHERE listID < ? AND listAvailable = 1";
try {
PreparedStatement pstmt = conn.prepareStatement(SQL);
pstmt.setInt(1, getNext() - (pageNumber - 1) * 10);
rs =pstmt.executeQuery();
if (rs.next()) {
return true;
}
} catch (Exception e) {
e.printStackTrace();
}
return false;
}
}
# write.jsp 코드 생성
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.io.PrintWriter"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" , initial-scale="1">
<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.5.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>BluevulpeBoard</title>
</head>
<body style="background-color: lightblue;">
<%
String userID = null;
if (session.getAttribute("userID") != null) {
userID = (String) session.getAttribute("userID");
}
%>
<nav class="navbar navbar-default">
<!-- navbar-색상(inverse = 검은색, default = 색x) -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
aria-expanded="false">
<!-- class="navbar-toggle collapsed"=>네비게이션의 화면 출력유무
data-toggle="collapse" : 모바일 상태에서 클릭하면서 메뉴가 나오게 설정 -->
<span class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
<!-- 아이콘 이미지 -->
</button>
<a class="navbar-brand" href="main.jsp">BluevulpeBoard</a>
<!-- Bootstrap navbar 기본 메뉴바 -->
</div>
<div class="collapse navbar-collapse"
id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<!-- navbar-nav => 네비게이션 바의 메뉴 -->
<li><a href="main.jsp">메인</a></li>
<li class="active"><a href="list.jsp">게시판</a></li>
<!-- 메뉴, 게시판의 main.jsp와 bbs.jsp의 파일로 각각 이동 -->
</ul>
<%
if (userID == null) {
%>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"><a href="#" class="dropdown-toggle"
data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">회원관리<span class="caret"></span></a>
<!-- caret = creates a caret arrow icon (▼) -->
<ul class="dropdown-menu">
<li><a href="login.jsp">로그인</a></li>
<!-- active = 활성화 되었을때 로그인, 회원가입-->
<li><a href="join.jsp">회원가입</a></li>
</ul></li>
</ul>
<%
} else {
%>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"><a href="#" class="dropdown-toggle"
data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">회원관리<span class="caret"></span></a>
<!-- caret = creates a caret arrow icon (▼) -->
<ul class="dropdown-menu">
<li><a href="logout.jsp">로그아웃</a></li>
</ul></li>
</ul>
<%
}
%>
</div>
</nav>
<div class="container">
<div class="row">
<form method="post" accept-charset="utf-8" action="writeGo.jsp">
<table class="table table-striped"
style="text-align: center; border: 1px solid #dddddd">
<thead>
<tr>
<th colspan="2"
style="background-color: #eeeeee; text-align: center;">
게시판글쓰기양식
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control" placeholder="글제목"
name="listTitle" maxlength="50">
</td>
</tr>
<tr>
<td>
<textarea class="form-control" placeholder="글내용"
name="listContent" maxlength="2048" style="height: 350px;">
</textarea>
</td>
</tr>
</tbody>
</table>
<input type="submit" class="btn btn-primary pull-right" value="글쓰기">
</form>
</div>
</div>
</body>
</html>위와같이 코드를 짜고 나면 로그인 한 후에 글쓰기가 가능하다.
만약 로그인을 안한다면 userID = null값이 되므로 '로그인을 하세요'라는 알림창이 뜨면서 login.jsp로
이동하도록 if문을 writeGo.jsp에 걸었다.
해당코드는 아래를 참조하자:)
# writeGo.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="list.ListDAO"%>
<%@ page import="java.io.PrintWriter"%>
<jsp:useBean id="list" class="list.Board" scope="page" />
<jsp:setProperty name="list" property="listTitle" />
<jsp:setProperty name="list" property="listContent" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" , initial-scale="1">
<title>BluevulpeBoard</title>
</head>
<body style="background-color: lightblue;">
<%
String userID = null;
if (session.getAttribute("userID") != null) {
userID = (String) session.getAttribute("userID");
}
if (userID == null) {
PrintWriter script = response.getWriter();
script.println("<script>");
script.println("alert('로그인을 하세요.')");
script.println("location.href = 'login.jsp'");
script.println("</script>");
} else {
if (list.getListTitle() == null || list.getListContent() == null) {
PrintWriter script = response.getWriter();
script.println("<script>");
script.println("alert('입력이 안된 사항이 있습니다.')");
script.println("history.back()");
script.println("</script>");
} else {
ListDAO listDAO = new ListDAO();
int result = listDAO.write(list.getListTitle(), userID, list.getListContent());
if (result == -1) {
PrintWriter script = response.getWriter();
script.println("<script>");
script.println("alert('글쓰기에 실패했습니다.')");
script.println("history.back()");
script.println("</script>");
} else {
PrintWriter script = response.getWriter();
script.println("<script>");
script.println("location.href = 'list.jsp'");
script.println("</script>");
}
}
}
%>
</body>
</html>글쓰기 결과를 넘겨주는 jsp까지 만들고 나면
이제 database에 값이 잘들어 갔는지 확인해보자
뭔가 이상한 외계어 같은 데이터를 본것 같지 않은가?..
그렇다..뭔가 데이터들이 깨진걸 알 수 있다.ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
그래서 처음엔 아래 코드를 write.jsp와 writeGo.jsp 추가해주었다.
<%@page import="java.util.*"%>
<% request.setCharacterEncoding("UTF-8"); %>UTF-8으로 한글이 깨지지 않고 인코딩이 잘되는 것을 확인했다.
하지만 이게 과연 최선의해결책일까?? 아니었다...
다음포스트에서 더 나은 해결책을 소개하겠다.
Copyright ⓒ 2021 by bluevulpe All Contents cannot be copied without permission.
728x90