본문 바로가기
HTML

231229 HTML

코딩하는딩굴 2023. 12. 29. 13:52

오늘은 게시판 만들기

기본 페이지

<%@page import="com.poseidon.dao.BoardDAO"%>
<%@page import="com.poseidon.db.DBConnection"%>
<%@page import="java.util.HashMap"%>
<%@page import="java.util.Map"%>
<%@page import="java.util.List"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>index</title>
<style type="text/css">
table {
	width: 600px;
	border-collapse: collapse;
}

td {
	text-align: center;
	border-bottom: gray 1px solid;
}

tbody tr:hover {
	background-color: silver;
}

.w1 {
	width: 10%;
}

.w2 {
	width: 20%;
}

.w5 {
	width: 50%;
	/* text-align: left; */
}
</style>
</head>
<body>
	<h1>index</h1>
	<!-- 게시판 내용 보기 -->
	<%
	BoardDAO dao = new BoardDAO();
	List<Map<String, String>> list = dao.boardList();
	%>
	<%-- 자바 코드를 여러 줄 쓸 경우 <% %>
	자바의 값 하나를 출력할 경우 <%= %> --%>
	<table>
		<thead>
			<tr>
				<th>번호</th>
				<th>제목</th>
				<!-- <th>내용</th> -->
				<th>작성자</th>
				<th>작성날짜</th>
				<th>조회수</th>
			</tr>
		</thead>
		<tbody>
			<%
			// servlet 서블릿 : 자바 코드 속에 html 이 있음
			// jsp, Java Server Page : html 코드 속에 java 가 있음
			for (int i = 0; i < list.size(); i++) {
			%>
			<tr>
				<td class="w1"><%=list.get(i).get("board_no")%></td>
				<td class="w5"><a
					href="./detail.jsp?no=<%=list.get(i).get("board_no")%>"> <%=list.get(i).get("board_title")%>
				</a></td>
				<%-- <td class="w2"><%=list.get(i).get("board_content")%></td> --%>
				<td class="w1"><%=list.get(i).get("board_write")%></td>
				<td class="w2"><%=list.get(i).get("board_date")%></td>
				<td class="w1"><%=list.get(i).get("board_count")%></td>
			</tr>
			<%
			}
			%>
		</tbody>
	</table>
	연습
	<a href="./test">버튼</a>을 눌러보세요.
	<br>
	<button onclick="write1()">글쓰기버튼~</button>

	<script type="text/javascript">
		function write1() {
			if (confirm("정말 글쓰기를 하시겠습니까?")) {
				alert("ㅏㅇㅅ");
				location.href = "./write.jsp";
			} else {
				alert("취소하였습니다.");
			}
		}
	</script>
</body>
</html>

 

test Servlet 페이지

package com.poseidon.web;

import java.io.IOException;
import java.io.PrintWriter;

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("/test")
public class Test extends HttpServlet {
	private static final long serialVersionUID = 1L;

	public Test() {
		super();
	}

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// response.getWriter().append("Served at: ").append(request.getContextPath());
		String str = "poseidon";

		response.setContentType("text/html;charset=UTF-8");
		PrintWriter pw = response.getWriter();
		pw.println("<html>");
		pw.println("<head>");
		pw.println("<title>타이틀</title>");
		pw.println("</head>");
		pw.println("<body>");
		pw.println("<h1>서블릿이 호출됨</h1>");
		pw.println("하나하나 작업해야함");
		pw.println("수정 시 다시 컴파일하여 실행이 필요<br>");
		pw.println("이것보다 jsp 가 더 편함<br>");
		pw.println(str + "<br>");
		pw.println("<a href=\"./main.jsp\">main으로 이동</a><br>");
		pw.println("<a href=\"./index.jsp\">index로 이동</a>");
		pw.println("</body>");
		pw.println("</html>");
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}
}

/*
 * request : 클라이언트가 서버에 요청하는 것
 * response : 서버가 클라이언트의 요청에 응답하는 것
 * 
 * get 방식 : 오픈, url 뒤에 요청 정보를 붙여 보내는 방식
 * https://developer.mozilla.org/ko/search?q=%3Ctr%3E
 * ? 뒤에 필요한 값을 붙임, 주소가 공개되어 있음
 * 
 * post 방식 : 숨김, url 은 그대로, http 바디에 요청 정보를 숨겨서 보냄
 * https://developer.mozilla.org/ko/search
 * ex) 로그인 시 id, pw 등 노출되면 안되는 중요한 정보를 송수신할 때 사용
 */

 

게시판의 글을 조회하는 페이지

<%@page import="java.util.Map"%>
<%@page import="java.util.List"%>
<%@page import="com.poseidon.dao.BoardDAO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<style>
.delete_letter {
  cursor: pointer;
} <!-- 마우스 커서가 올라가면 변하는 모양 설정 -->

</style>
<head>
<meta charset="UTF-8">
<title>제목</title>
</head>
<body>
	<h1>보기</h1>
	<%
	String no = request.getParameter("no");
	BoardDAO dao = new BoardDAO();
	Map<String, String> detail = dao.detail(no);
	%>
	글 번호 :
	<%=detail.get("board_no")%>
	<br>
	<h3>
		제목 :
		<%=detail.get("board_title")%>
	</h3>
	<a href="./delete.jsp?no=<%=detail.get("board_no")%>"> <img
		alt="삭제" src="./image/scissor_picture.png"
		title="버튼을 누르면 삭제됩니다. (a 태그 이용)"><br>
	</a>
	<img class = "delete_letter" onclick="del(<%=detail.get("board_no")%>)" alt="삭제"
		src="./image/scissor_picture.png" title="버튼을 누르면 삭제됩니다. (js 이용)">
	<%-- <button onclick="location.href='./delete.jsp?no=<%=detail.get("board_no") %>'">
	<img alt="삭제" src="./image/scissor_picture.png" title = "버튼을 누르면 삭제됩니다."><br>
	</button> --%>
	글쓴이 :
	<%=detail.get("board_write")%>
	<br> 날짜 :
	<%=detail.get("board_date")%>
	<br> 조회수 :
	<%=detail.get("board_count")%>
	<br>
	<hr>
	<!-- 삭제를 누르면 지워지는   이미지를 넣어보기 -->
	<%=detail.get("board_content")%>
	<br>
	<!-- html 문서에서 간혹 click, onclick 버튼 = 자바스크립트 -->
	<button onclick="location.href='./index.jsp'">돌아가기</button>
	<br>
	<button onclick="what()">눌러보세요</button> <!-- 클릭 가능한 버튼 만들기 -->
	<br>

	<script type="text/javascript"> /* 자바 스크립트 구역 */
		function what() {
			for (var i = 0; i < 3; i++) {
				alert("메롱"); /* 메롱 이 써진 팝업창이 생김, 3 번 반복*/
			}
		}
		function del(no){
			if(confirm("삭제하시면 복구가 불가능합니다.\n삭제 하시겠습니까?")) {
			 location.href="./delete.jsp?no=" + no;
			}
		}
	</script>
</body>
</html>

 

DBConnection 하는 페이지는 생략

서버 주소, 아이디 비밀번호 있어서

 

DAO 만들기, delete, 글 한개만 조회하기, 전체 조회하기

package com.poseidon.dao;

import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import com.poseidon.db.DBConnection;

public class BoardDAO {
	DBConnection dbConn = new DBConnection();

	// 글 삭제하기
	public void delete(String no) {
		PreparedStatement pstmt = null;
		String sql = "DELETE FROM board WHERE board_no = ?";

		try {
			pstmt = dbConn.getConn().prepareStatement(sql);
			pstmt.setString(1, no);
			pstmt.execute();
			// executeQuery : 리턴 값이 있는 것, execute() : 실행만 진행
		} catch (SQLException e) {
			e.printStackTrace();
		} finally {
			close(null, pstmt);
		}

	}

	public Map<String, String> detail(String no) {
		Map<String, String> detail = new HashMap<>();
		PreparedStatement pstmt = null;
		ResultSet rs = null;
		String sql = "SELECT * FROM board WHERE board_no=?";

		try {
			pstmt = dbConn.getConn().prepareStatement(sql);
			// pstmt 에 no 값 추가
			pstmt.setString(1, no);
			rs = pstmt.executeQuery();

			if (rs.next()) {
				detail.put("board_no", rs.getString("board_no"));
				detail.put("board_title", rs.getString("board_title"));
				detail.put("board_content", rs.getString("board_content"));
				detail.put("board_write", rs.getString("board_write"));
				detail.put("board_date", rs.getString("board_date"));
				detail.put("board_count", rs.getString("board_count"));
			}
		} catch (SQLException e) {
			e.printStackTrace();
		} finally {
			close(rs, pstmt);
		}

		return detail;
	}

	public List<Map<String, String>> boardList() {
		List<Map<String, String>> list = new ArrayList<>();
		PreparedStatement pstmt = null;
		ResultSet rs = null;
		String sql = "SELECT * FROM board";

		try {
			pstmt = dbConn.getConn().prepareStatement(sql);
			rs = pstmt.executeQuery();

			while (rs.next()) {
				Map<String, String> map = new HashMap<>();
				map.put("board_no", rs.getString("board_no"));
				map.put("board_title", rs.getString("board_title"));
				map.put("board_content", rs.getString("board_content"));
				map.put("board_write", rs.getString("board_write"));
				map.put("board_date", rs.getString("board_date"));
				map.put("board_count", rs.getString("board_count"));
				list.add(map);
			}
		} catch (SQLException e) {
			e.printStackTrace();
		} finally {
			close(rs, pstmt);
		}

		return list;
	}

	private void close(ResultSet rs, PreparedStatement pstmt) {
		try {
			if (rs != null) {
				rs.close();
			}
			if (pstmt != null) {
				pstmt.close();
			}
		} catch (SQLException e) {
			e.printStackTrace();
		}
	}
}

 

글 삭제 Servlet 과 jsp 파일

package com.poseidon.web;

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.poseidon.dao.BoardDAO;

@WebServlet("/delete")
public class Delete extends HttpServlet {
	private static final long serialVersionUID = 1L;

	public Delete() {
		super();
	}

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// response.getWriter().append("Served at: ").append(request.getContextPath());
		String no = request.getParameter("no");
		
		BoardDAO dao = new BoardDAO();
		dao.delete(no);
		
		// 페이지 이동
		response.sendRedirect("./index.jsp");
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// doGet(request, response);
	}

}

 

<%@page import="com.poseidon.dao.BoardDAO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>삭제</title>
</head>
<body>
	<!-- 이 페이지는 삭제 기능만 수행하고 페이지 이동 -->
	<%
  String no = request.getParameter("no");
	
	BoardDAO dao = new BoardDAO();
	dao.delete(no);
	
	// 페이지 이동
	response.sendRedirect("./index.jsp");
	%>
  글자
</body>
</html>

 

글을 작성할 때에는 보안을 위해

get 방식이 아닌 post 방식으로 전송해야 함

 

글 쓰기 jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>글쓰기</title>
<link rel="stylesheet" type="text/css" href="./css/write.css">

</head>
<body>
	<h3>글쓰기</h3>
	<!-- form 글 제목, 글 내용-->
	<form action="./writeAction.jsp">
		<input type="text" name="title"> <br>
		<textarea name="content"></textarea>
		<button type="submit">글쓰기</button>
	</form>
    <!-- title, content 에 적힌 값을 가지고 writeAction.jsp 로 이동 -->
</body>
</html>

 

writeAction.jsp -> 이후 Servlet 으로 변경 예정

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Servlet 으로 변경 예정</title>
</head>
<body>
	<!-- 데이터베이스에 값 전달하고 종료 -->
	<%
	String title = request.getParameter("title");
	String content = request.getParameter("content");
	%> <!-- 넘어온 값을 받는 명령어 () 안에는 값의 key 값 입력 -->

	타이틀 :
	<%=title%><br> 
	내용 :
	<%=content%><br>
	<!-- 페이지 이동 -->
</body>
</html>

'HTML' 카테고리의 다른 글

240108  (0) 2024.01.08
240104 VScode 를 이용하기  (0) 2024.01.04
240102 HTML, Servlet 등  (2) 2024.01.02
231228 HTML  (1) 2023.12.28
231220 HTML  (0) 2023.12.20

'HTML' Related Articles

티스토리툴바