WEB/Study

[0326][Web-JSP] Model 1 방식으로 만드는 기본 CRUD

게시판 기능 만들기

1. index.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
	pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>HOME</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<style>
#content {
	width: 100%;
}

#content table {
	width: 350px;
	margin: auto
}
</style>
</head>
<body>
	<div id="wrap">
		<div id="navigation">
			<ul>
				<li><a href="">Home</a></li>
				<li><a href="">로그인</a></li>
				<li><a href="">회원가입</a></li>
				<li><a href="board/list.jsp">게시판</a></li>
				<li><a href="">갤러리</a></li>
			</ul>
		</div>
		<div id="content"></div>
	</div>
</body>
</html>

 

2. main.css

@charset "EUC-KR";
	/* css에서의 주석 
	E : element 요소
	id : id 속성 = 반드시 한 페이지에서는 유일해야한다. (unique) #아이디
	class : class 속성, 한 페이지에서 중복 가능, 하나 이상을 설정 할 수 있다. .클래스
	[E, #id, .class, 자식 > , 부모 후손, 이웃요소] { css문법 -> 예) color:"red"; size:200px; } 
	*/
#wrap {
	width: 800px;
	margin: auto; /* 레이아웃이 중앙으로 배치가 된다 */
}

#navigation {
	height: 40px;
	background: #0080ff;
	color: #ffffff;
	font-weight: bold;
	clear: borth; /* float을 취소한다(가로정렬) */
}

#navigation ul {
	padding: 0;
	margin: 0;
}

#navigation ul li {
	list-style: none;
	float: left;
	margin-left: 20px;
}
/* link style */
#navigation ul li a {
	text-decoration: none; /* 링크선 해제 */
	color: #ffffff;
	background: #ff3333;
	padding: 5px;
	margin: 0;
}

#navigation ul li a:hover { /* 마우스를 올렸을 때 */
	background: #6666;
}

 

3. head.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
	pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>자유게시판</title>
<link rel="stylesheet" type="text/css" href="../css/main.css">
<style>
#content {
	width: 100%; margin: auto;
}

#content table {
	width: 350px;
	margin: auto
}

#content table, td, th {
	border: 1px solid black;
}

#content table {
	  width: 100%;
	  border-collapse: collapse;
}
</style>
</head>
<body>
	<div id="wrap">
		<div id="navigation">
			<ul>
				<li><a href="../index.jsp">Home</a></li>
				<li><a href="">로그인</a></li>
				<li><a href="">회원가입</a></li>
				<li><a href="../board/list.jsp">게시판</a></li>
				<li><a href="">갤러리</a></li>
			</ul>
		</div>
		<div id="bgx"></div>

 

4. list.jsp

<%@page import="dao.BoardDao"%>
<%@page import="vo.BoardVO"%>
<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=EUC-KR"
	pageEncoding="EUC-KR"%>
<%
	ArrayList<BoardVO> list = BoardDao.getDao().list();
%>
<%@include file="../head.jsp" %>
		<div id="content" style="text-align: center;">
			<table>
				<tr>
					<th colspan="5">게시물 목록</th>
				</tr>
				<tr>
					<td>번호</td>
					<td width="352">제목</td>
					<td>작성자</td>
					<td>등록일</td>
					<td>조회수</td>
				</tr>
				<!-- 데이터 반복 시작 -->
				<%
				for (BoardVO e : list) {
				%>
				<tr>
					<td><%=e.getNo()%></td>
					<td><a href="hit.jsp?no=<%=e.getNo()%>"> <%=e.getTitle()%>
					</a></td>
					<td><%=e.getWriter()%></td>
					<td><%=e.getRegdate()%></td>
					<td><%=e.getHit()%></td>
				</tr>
				<%
				}
				%>
				<!-- 데이터 반복 끝 -->
				<tr>
					<th colspan="5"><input type="button" value="새 글쓰기" 
                    onclick="location.href='write.jsp'">
					</th>
				</tr>
			</table>
		</div> <%-- content 종료 --%>
	</div>	<%-- wrap 종료 --%>
</body>
</html>

 

5. info.jsp

<%@page import="dao.BoardDao"%>
<%@page import="vo.BoardVO"%>
<%@ page language="java" contentType="text/html; charset=EUC-KR"
	pageEncoding="EUC-KR"%>
<%
// list.jsp에서 선택한 링크를 통해서 get방식으로 전송 되어온 파라미터 값
// no
int no = Integer.parseInt(request.getParameter("no"));
BoardVO vo = BoardDao.getDao().info(no);
%>
<%@include file="../head.jsp"%>
<div id="content">
		<table border="1">
			<tr>
				<th colspan="2">게시물 상세보기</th>
			</tr>
			<tr>
				<td>번호</td>
				<td><input type="text" name="no" id="no" value="<%=no%>"
					readonly="readonly"></td>
			</tr>
			<tr>
				<td>작성자</td>
				<td><input type="text" name="writer" id="writer"
					value="<%=vo.getWriter()%>" readonly="readonly"></td>
			</tr>
			<tr>
				<td>제목</td>
				<td><input type="text" name="title" id="title"
					value="<%=vo.getTitle()%>" readonly="readonly"></td>
			</tr>
			<tr>
				<td>내용</td>
				<td><textarea style="width: 90%;" name="content" id="content" 
                readonly="readonly"><%=vo.getContent()%></textarea></td>
			</tr>
			<tr>
				<th colspan="2">
				<%-- onclick 속성 : 해당 Element를 클릭 했을 때
					 자바 스크립트를 실행 할 수 있는 속성
					 " location = '이동할 경로' " 
				--%>
				<input type="button" value="수정" 
				onclick="location='pwdCheckForm.jsp?keyv=up&no=<%=no%>'"> &nbsp;
				<input type="button" value="삭제"
				onclick="location='pwdCheckForm.jsp?keyv=del&no=<%=no%>'"> &nbsp;
				<input type="button" value="리스트"
				onclick="location='list.jsp'"> </th>
			</tr>
		</table>
</div>
<%-- content 종료 --%>
</div>
<%-- wrap 종료 --%>
</body>
</html>

 

6. write.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
	pageEncoding="EUC-KR"%>
<%@include file="../head.jsp"%>
<div id="content">
	<form method="post" action="insert.jsp">
		<table border="1">
			<tr>
				<th colspan="2">게시물 작성하기</th>
			</tr>
			<tr>
				<td>제목</td>
				<td><input type="text" name="title" id="title"></td>
			</tr>
			<tr>
				<td>작성자</td>
				<td><input type="text" name="writer" id="writer"></td>
			</tr>
			<tr>
				<td>내용</td>
				<td ><textarea style="width: 90%;" name="content" 
                id="content"></textarea></td>
			</tr>
			<tr>
				<td>비밀번호</td>
				<td><input type="password" name="pwd" id="pwd"></td>
			</tr>
			<tr>
				<th colspan="2"><input type="submit" value="등록"> <input
					type="reset" value="취소"></th>
			</tr>
		</table>
	</form>
</div>
<%-- content 종료 --%>
</div>
<%-- wrap 종료 --%>
</body>
</html>

 

7. hit.jsp

<%@page import="dao.BoardDao"%>
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%
	// 리스트에서 전송 되어 온 파라미터 no를 받아서
	// Dao에 전달해서 조회수를 업데이트 시킨다.
	int no = Integer.parseInt(request.getParameter("no"));
	BoardDao.getDao().hit(no);
	response.sendRedirect("info.jsp?no="+no);
%>

 

8. pwdCheckForm.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
	pageEncoding="EUC-KR"%>
<%@include file="../head.jsp"%>
<%--
	<link rel= .. => 외부 스타일, 공통적인 스타일 : 우선순위 3
	<style></style> => 내부 스타일 : 우선순위 2
	<element style=""> => 인라인(inline) 스타일 : 우선순위 1

 --%>
 <%
	request.setCharacterEncoding("euc-kr");
 	String no = request.getParameter("no");
 	String keyv = request.getParameter("keyv");
 %>
<div id="content">
<div style="height: 80px;">&nbsp;</div>
<form method="post" action="pwdCheck.jsp">
<input type="hidden" name="no" id="no" value="<%=no%>">
<input type="hidden" name="keyv" id="keyv" value="<%=keyv%>">
<table border="1" style="width: 70%; margin: auto;">
	<tr>
		<th colspan="2">비밀번호 입력</th>
	</tr>
	<tr>
		<td>비밀번호</td>
		<td><input type="password" name="pwd" id="pwd"></td>
	</tr>
	<tr>
		<th colspan="2">
		<input type="submit" value="전송">
		</th>
	</tr>
</table>
</form>
</div> <%-- content 종료 --%>
</div> <%-- wrap 종료 --%>
</body>
</html>

 

9. pwdCheck.jsp

<%@page import="vo.BoardVO"%>
<%@page import="dao.BoardDao"%>
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%
	// To do : 비밀번호를 받아와서 dao에 전달하고 
	request.setCharacterEncoding("euc-kr");
	if (request.getMethod().equals("POST")) {
		BoardDao dao = BoardDao.getDao();
		BoardVO vo = new BoardVO();
		String keyv = request.getParameter("keyv");
		vo.setNo(Integer.parseInt(request.getParameter("no")));
		vo.setPwd(request.getParameter("pwd"));
		int res = dao.pwdCheck(vo);
		if (res > 0) {
			if (keyv.equals("up")) {
				System.out.println("글수정");
				response.sendRedirect("modify.jsp?no="+vo.getNo());
			} else if (keyv.equals("del")){
				System.out.println("글삭제");
				dao.delete(vo.getNo());
				%>
				<script type="text/javascript"> alert('게시글이 삭제되었습니다!');
					location.href="list.jsp";
				</script>
				<%
			}
		} else {
			%>
			<script type="text/javascript"> alert('비밀번호가 틀렸습니다!');
				location.href="info.jsp?no=<%=vo.getNo()%>";
			</script>
			<%
		}
		System.out.println("no? : " + vo.getNo());
		System.out.println("pwd? : " + vo.getPwd());
		System.out.println("keyv? : " + keyv);
	} else {
%>
		<p style="color:red">잘못 된 접근입니다.</p>
		<h2>당신의<%=request.getRemoteAddr() %> 아이피는 저장되었습니다.</h2>
<%
	}
%>

 

10. modify.jsp

<%@page import="dao.BoardDao"%>
<%@page import="vo.BoardVO"%>
<%@ page language="java" contentType="text/html; charset=EUC-KR"
	pageEncoding="EUC-KR"%>
<%
	request.setCharacterEncoding("euc-kr");
	int no = Integer.parseInt(request.getParameter("no"));
	BoardVO vo = BoardDao.getDao().info(no);
	System.out.println("no1 : " + vo.getNo());
	System.out.println("title1 : " + vo.getTitle());
	System.out.println("content1 : " + vo.getContent());
%>
<%@include file="../head.jsp"%>
<form method="post" action="update.jsp">
<div id="content">
		<table border="1">
			<tr>
				<th colspan="2">게시물 수정하기</th>
			</tr>
			<tr>
				<td>번호</td>
				<td><input type="text" name="no" id="no" value="<%=no%>"
					readonly="readonly"></td>
			</tr>
			<tr>
				<td>작성자</td>
				<td><input type="text" name="writer" id="writer"
					value="<%=vo.getWriter()%>" readonly="readonly"></td>
			</tr>
			<tr>
				<td>제목</td>
				<td><input type="text" name="title" id="title"
					value="<%=vo.getTitle()%>" ></td>
			</tr>
			<tr>
				<td>내용</td>
				<td><textarea style="width: 90%;" name="content" id="content">
                <%=vo.getContent()%></textarea></td>
			</tr>
			<tr>
				<th colspan="2">
				<input type="submit" value="게시글 수정"></th>
			</tr>
		</table>
</div>
<%-- content 종료 --%>
</form>
</div>
<%-- wrap 종료 --%>
</body>
</html>

 

11. update.jsp

<%@page import="dao.BoardDao"%>
<%@page import="vo.BoardVO"%>
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%
	request.setCharacterEncoding("euc-kr");
	BoardVO vo = new BoardVO();
	vo.setNo(Integer.parseInt(request.getParameter("no")));
	vo.setTitle(request.getParameter("title"));
	vo.setContent(request.getParameter("content"));
	System.out.println("no2 : " + vo.getNo());
	System.out.println("title2 : " + vo.getTitle());
	System.out.println("content2 : " + vo.getContent());
	
	BoardDao.getDao().update(vo);
%>
	<script type="text/javascript"> alert('게시글이 수정되었습니다!');
				location.href="info.jsp?no=<%=vo.getNo()%>";
	</script>

 

저작자표시 (새창열림)

'WEB > Study' 카테고리의 다른 글

[0406][JSP] MyBatis 구조 이해  (0) 2021.04.06
[0401][JSP] 로그인 세션 , 파일 업로드 구현 하기  (0) 2021.04.01
[0325][Web - JSP] Connection Pool, DAO, DTO, Model 1 의 개념과 실습  (0) 2021.03.25
[0324] [Web - JSP] HTML5 : Form태그 요소, GET,POST , Parameter정리, JSP등 기본 문법  (0) 2021.03.24
[0323] [Web - JSP] HTML5, Servlet 생명주기 , Servlet에서 이동방식  (0) 2021.03.23