본문 바로가기
HTML

240102 HTML, Servlet 등

코딩하는딩굴 2024. 1. 2. 10:55

저번 주 금요일 처리 하던 것 생성

먼저 글 쓰기

<%@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>Servlet 으로 변경 예정</title>
</head>
<body>
	<!-- 데이터베이스에 값 전달하고 종료 -->
	<%
	request.setCharacterEncoding("UTF-8"); // request 의 값을 UTF-8 로 인코딩
	String title = request.getParameter("title");
	String content = request.getParameter("content");
	// 필요한 일
	// DAO 호출
	BoardDAO dao = new BoardDAO();

	// int write(title, content);
	// write 가 정상으로 작동되면 정수 1 반환, 올바른 페이지로 이동
	// 작동되지 않으면 0 반환, 오류 페이지로 이동
	int result = dao.write(title, content);

	// 페이지 이동
	if (result == 1) {
		response.sendRedirect("./index.jsp");
	} else {
		response.sendRedirect("./error.jsp");
	}
	/*
	페이지 이동하는 방법
  <jsp:forward page="./main.jsp" />
  줄에 닿자마자 페이지 이동, 액션 태그
  
  <script type="text/javascript">
    location.href = "./main.jsp";
  </script>
	*/
	%>

</body>
</html>

 

글 쓰는 DAO 도 생성

// 글 작성하기, 2024-01-02
  public int write(String title, String content) {
    int result = 0;

    PreparedStatement pstmt = null;
    String sql = "INSERT INTO board (board_title, board_content, board_write) VALUES (?, ?, ?)";
    String name = "내가씀"; // 나중에 세션에서 받아오기

    try {
      pstmt = dbConn.getConn().prepareStatement(sql);
      pstmt.setString(1, title); // 첫 번째 물음표에 값 넣기
      pstmt.setString(2, content);
      pstmt.setString(3, name);

      // execute(); 실행, boolean 타입 = update, insert, delete
      // executeQuery(); 실행, ResultSet = select
      // executeUpdate(); 실행, 숫자 = update, insert, delete

      // 결과를 숫자로 되돌려 줌, 변경된 레코드 수
      result = pstmt.executeUpdate();
    } catch (SQLException e) {
      e.printStackTrace();
    } finally {
      close(null, pstmt);
    }
    return result;
  }

 

post 로 전송할 경우 jsp 의 자바로 할 필요 없이 servlet 으로 바로 생성

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

  public Write() {
    super();
  }

  protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    response.getWriter().append("Served at: ").append(request.getContextPath());
  }

  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    request.setCharacterEncoding("UTF-8"); // request 의 값을 UTF-8 로 인코딩
    String title = request.getParameter("title");
    String content = request.getParameter("content");
    // 필요한 일
    // DAO 호출
    BoardDAO dao = new BoardDAO();

    // int write(title, content);
    // write 가 정상으로 작동되면 정수 1 반환, 올바른 페이지로 이동
    // 작동되지 않으면 0 반환, 오류 페이지로 이동
    int result = dao.write(title, content);

    // 페이지 이동
    if (result == 1) {
      response.sendRedirect("./index.jsp");
    } else {
      response.sendRedirect("./error.jsp");
    }

    // response.setContentType("text/html;charser=UTF-8");
    // 내보내는 데이터 인코딩 방식 설정
  }
}

 

write 페이지의 action 도 수정

<%@ 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="./write" method="post">
    <input type="text" name="title"> <br>
    <textarea name="content"></textarea>
    <button type="submit">글쓰기</button>
  </form>

</body>
</html>

 

틈새 SQL 강의

DATE_FORMAT(date, format[, locale])
-- DATE 가 들어오면 해당 형식으로 변경하여 보여줌

NOW()
-- 현재 시간을 출력해주는 명령어

-- 연, 월, 일
-- 시, 분, 초
SELECT DATE_FORMAT(NOW(), '%Y-%m-%d') FROM DUAL; -- 2024-01-02
-- Y : 2024, y : 24
-- M : January, m : 01
-- D : 2nd, d : 02

-- 현재 시각 : AM 11:18
SELECT DATE_FORMAT(NOW(), '%H-%I-%S') FROM DUAL; -- 11:11:18
SELECT DATE_FORMAT(NOW(), '%h-%i-%s') FROM DUAL; -- 11:18:18
-- H : 00 ~ 23 시 표시
-- h, I : 01 ~ 12 시 표시
-- S, s : 시간의 초 출력

SELECT DATE_FORMAT(NOW(), '%Y-%m-%d %h:%i:%s') FROM DUAL;
SELECT DATE_FORMAT(board_date, '%Y-%m-%d') FROM DUAL;
SELECT DATE_FORMAT(board_date, '%h:%i:%s') FROM DUAL;

-- if(조건, 참, 거짓)

SELECT 
if(DATE_FORMAT(NOW(), '%Y-%m-%d') = DATE_FORMAT(board_date, '%Y-%m-%d')
	, DATE_FORMAT(board_date, '%h:%i')
	, DATE_FORMAT(board_date, '%m-%d'))
FROM board;

-- 번호, 제목, 글쓴이, 조회수 + 정렬(역순) + 10 개 씩 보기
CREATE VIEW boardview AS
SELECT
board_no, board_title, board_write,
if(DATE_FORMAT(NOW(), '%Y-%m-%d') = DATE_FORMAT(board_date, '%Y-%m-%d')
	, DATE_FORMAT(board_date, '%h:%i')
	, DATE_FORMAT(board_date, '%m-%d')) AS board_date
	, board_count
FROM board
ORDER BY board_no DESC
LIMIT 0, 10;

 

게시글 상세보기 detail 에서 수정 버튼 추가

<%@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 태그 이용)">
  </a>
  <br>

  <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> --%>

  <img onclick="update()" alt="수정" src="./image/modify.png">
  <br>
  
  글쓴이 : <%=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 update() {
	  var check = confirm("수정하시겠습니까?");
	  if (check) {
	    // alert("글을 수정합니다.");
	    location.href="./update?no=<%=detail.get("board_no")%>";
	    // 위 문장은 서버에서 계산하여 처리됨
	    // 이후 html/css/js 에서 처리
	    // 실행 순서
	    // 1. 자바 코드를 먼저 실행 : 서버에서 처리
	    // 2. html/css/js 실행 : 클라이언트에서 처리
	  }
	}	
  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>

 

update Servlet 생성

package com.poseidon.web;

import java.io.IOException;
import java.util.Map;

import javax.servlet.RequestDispatcher;
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("/update")
public class Update extends HttpServlet {
  private static final long serialVersionUID = 1L;

  public Update() {
    super();
  }

  protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // DAO 호출하기
    BoardDAO dao = new BoardDAO();
    // return 되는 번호 잡기 : "./update?no=<%=detail.get("board_no")%>"
    String no = request.getParameter("no");
    // DB 에 질의하여 레코드 1개 가져오기
    Map<String, String> detail = dao.detail(no);
    // update.jsp 에 돌려주기 : 페이지 이동
    request.setAttribute("detail", detail); // 변수명, 값
    // "detail" 이라는 이름으로 detail 을 보냄
    
    // jsp 부르기
    RequestDispatcher rd = request.getRequestDispatcher("update.jsp");
    rd.forward(request, response);
  }

  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    request.setCharacterEncoding("UTF-8");
    String title = request.getParameter("title");
    String content = request.getParameter("content");
    String no = request.getParameter("no");
    
    BoardDAO dao = new BoardDAO();
    dao.update(no, title, content);
    
    response.sendRedirect("./detail.jsp?no="+no);
  }
}

 

update 하는 HTML

<%@page import="java.util.Map"%>
<%@ 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>
  <%
  Map<String, String> detail = (Map<String, String>) request.getAttribute("detail");
  %>
  <h3>글 수정</h3>
  <!-- write 를 복사하여 사용, 이후 내용만 수정 -->
  <form action="./update" method="post">
    <!-- value 는 텍스트박스 안에 들어 갈 값을 처리 -->
    <input type="text" name="title" value="<%=detail.get("board_title")%>"> <br>
    <!-- textarea 태그 사이에 내용 값을 집어 넣음 -->
    <textarea name="content"><%=detail.get("board_content")%></textarea>
    <button type="submit">완료</button>
    <input type="text" name="no" value="<%=detail.get("board_no") %>">
  </form>
</body>
</html>

 

update DAO 작성

public void update(String no, String title, String content) {
    PreparedStatement pstmt = null;
    String sql = "UPDATE board SET board_title=?, board_content=? where board_no=?";
    
    try {
      pstmt = dbConn.getConn().prepareStatement(sql);
      pstmt.setString(1, title);
      pstmt.setString(2, content);
      pstmt.setString(3, no);
      pstmt.execute();
    } catch (SQLException e) {
      e.printStackTrace();
    } finally {
      close(null, pstmt);
    }
  }

 

write.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">
  <script type="text/javascript">
  function check() {
    // alert("!");
    // var title = document.getElementsByName("title");
    // alert(title[0].value);
    var title = document.getElementById("title");
    // alert(title.value);
    if (title.value.length < 5) {
      alert("제목은 5 글자 이상으로 작성해야 합니다.")
      title.focus(); // 커서의 위치를 title 쪽으로 이동
      return false;
    }
    
    var content = document.getElementsByClassName("content");
    // alert(content[0].value.length);
    if(content[0].value.length < 3) {
      alert("내용은 3 글자 이상으로 작성해야 합니다.")
      content[0].focus(); // 커서의 위치를 content 쪽으로 이동
      return false;
    }
  }
  </script>
</head>
<body>
  <h3>글쓰기</h3>
  <!-- form 글 제목, 글 내용-->
  <form action="./write" method="post">
    <input type="text" name="title" id="title"> <br>
    <textarea name="content" class = "content"></textarea>
    <button type="submit" onclick="return check()">글쓰기</button>
  </form>

</body>
</html>

 

글 수정하는 update 에도 글자 수 체크 집어넣기

<%@page import="java.util.Map"%>
<%@ 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">
<script type="text/javascript">
  function check() {
    // alert("!");
    // var title = document.getElementsByName("title");
    // alert(title[0].value);
    var title = document.getElementById("title");
    // alert(title.value);
    if (title.value.length < 5) {
      alert("제목은 5 글자 이상으로 작성해야 합니다.")
      title.focus(); // 커서의 위치를 title 쪽으로 이동
      return false;
    }
    
    var content = document.getElementsByClassName("content");
    // alert(content[0].value.length);
    if(content[0].value.length < 3) {
      alert("내용은 3 글자 이상으로 작성해야 합니다.")
      content[0].focus(); // 커서의 위치를 content 쪽으로 이동
      return false;
    }
  }
  </script>
</head>
<body>
  <%
  Map<String, String> detail = (Map<String, String>) request.getAttribute("detail");
  %>
  <h3>글 수정</h3>
  <!-- write 를 복사하여 사용, 이후 내용만 수정 -->
  <form action="./update" method="post">
    <!-- value 는 텍스트박스 안에 들어 갈 값을 처리 -->
    <input type="text" name="title" id = "title" value="<%=detail.get("board_title")%>"> <br>
    <!-- textarea 태그 사이에 내용 값을 집어 넣음 -->
    <textarea name="content" class = "content"><%=detail.get("board_content")%></textarea>
    <button type="submit" onclick = "return check()">완료</button>
    <input type="text" name="no" value="<%=detail.get("board_no") %>">
  </form>
</body>
</html>

'HTML' 카테고리의 다른 글

240108  (0) 2024.01.08
240104 VScode 를 이용하기  (0) 2024.01.04
231229 HTML  (0) 2023.12.29
231228 HTML  (1) 2023.12.28
231220 HTML  (0) 2023.12.20

'HTML' Related Articles

티스토리툴바