본문 바로가기

국비과정/JAVA

20230706 _[24일차]_01. 게시판 글쓰기 기능만들기

게시판에 글쓰기 버튼 만들자

[ board.jsp ]

table 들어있는 div 바깥에 버튼생성

	<!-- 글쓰기 버튼 : 로그인한 사용자만 쓸 수 있어요 -->
	<button onclick="location.htrf='./write'">글쓰기</button>

 

 

[ Write.java 서블릿 생성 ]

 

package com.poseidon.board;

import java.io.IOException;

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;

@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());
		// System.out.println("get으로 들어옵니다.");
		// 글쓰기 화면 불러오기
		// 로그인 여부를 검사하는 if문
		
		RequestDispatcher rd = request.getRequestDispatcher("write.jsp");
		rd.forward(request, response);
	}
	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//		doGet(request, response);
		//실제 글쓰기 => 글저장하기
	}

}

@WebServlet("/write")  => 소문자w로 바꿔주기

 

[ write.jsp ] _ webapp 에 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">
</head>
<body>
	<jsp:include page="./menu.jsp"/>
	<div class="writeDiv">
		<input type="text" name="title" placeholder="제목을 입력하세요." maxlength="30">
		<textarea name="content"></textarea> 
		<button>저장하기</button>
	</div>
</body>
</html>

 

[ write.css ] _ css파일 생성 

 

@charset "UTF-8";
.writeDiv{
	margin: 0 auto;
	width: 800px;
	height: 500px;
	background-color: gray;
	padding:10px;
}

 

( 원하는 스타일 위해서 기본값 초기화 ) 

 

textarea{
	margin: 0;
	padding: 0;
	border: 0px;
	width: 100%;
	height: calc(100% - 80px);
	/* height: 450px; */
	margin: 10px 0px;
}

위에서의 height들 계산

패딩값 10 + 10 / 아래 height 30 => 총 50px

height: calc(100% - 50px);

height: 450px;

같은 표현

 

( 버튼스타일지정 )

button{
	width: 100%;
	height: 30px;
}

 

@charset "UTF-8";
.writeDiv{
	margin: 0 auto;
	width: 800px;
	height: 500px;
	background-color: gray;
	padding:10px;
}
input{
	margin: 0;
	padding: 0;
	border: 0px;
	width: 100%;
	height: 30px;
	font-size: large; 
}
textarea{
	margin: 0;
	padding: 0;
	border: 0px;
	width: 100%;
	height: calc(100% - 80px);
	/* height: 450px; */
	margin: 10px 0px;
}
button{
	width: 100%;
	height: 30px;
}


요부분 수정

 

 

[write.jsp] _ form action으로 묶어주기

post 적어주기 안적어주면 get으로 인식

 

원하는 만큼으로 움직임

 

얘도 수정

한글깨짐 => 잡아주자

 

이제 입력값들 받아오자 dto에

 

response.sendRedirect("./board"); 

=> 저장완료되면 다시 게시판 페이지로

 

제목 및 내용에 입력하고 저장하기 누르면

다시 게시판 페이지로 이동함~


 

(자바 수정하면 restart 해주기)

워크스페이스에서 톰캣서버로 올려주는 작업

=> 워크스페이스 <--> 톰캣서버 간의 업데이트는 딜레이가 걸림 (톰캣과 클라이언트는 바로 왔다갔다가 가능)

=> 강제적으로 restart 시켜줘서 톰캣으로 업데이트된 내용을 빠르게 보내주는것


		// DAO
		BoardDAO dao = new BoardDAO();
		int result = dao.write(dto);
		
		System.out.println(result);

int로 받는 이유 (처리결과를 받아오기 위해)

글이 정확히 데이터베이스에 저장이 됐다면 1로 받고 아니라면(글저장 실패했다면) 0으로 받음 

result가 1이라면 받아와서 저장

 

이제 BoardDAO에 write메소드 만들어주면 됨.

 

일단 요렇게 세개 받아오자

 

BoardDAO

쿼리 명령문 sql 만들러 가쟝


 

쿼리문작성 (HS)

테이블-데이터유형이 DATE (년월일) 인데 

Now() 에서는 년월일 & 시분초까지 같이 나오기 때문에 오류

=> 데이터유형을 DATETIME (년월일시분초) 으로 바꾸면 될듯...?

일단은 쿼리문을 변경해서 오류 해결해보쟈

 

INSERT INTO board (btitle, bcontent, bdate, bwrite, blike)
VALUES ('제목입니다', '본문내용입니다.', 
DATE_FORMAT(NOW(), '%Y-%m-%d'), '홍길동', 1);

 

=> Now() 에서 년월일만 뽑겠다

* Y만 대문자(2023) 주의* 소문자 y는 23

* M이랑 D도 대문자로 하면 다르게 나옴 ------한번 해보기 ㅠ

 

실행해주면

추가됨~ 성공쓰


bdateblike는 입력안해도 자동으로 들어가게 바꿔줌

저장*************

 

자동으로 지정한 두 속성은 빼줘도됨

실행하면

bdate = 현재 년월일&시분초

belike = 1

자동설정한대로 입력되고,

btitle, bcontent, bwrite 는 입력한 내용으로 저장됨!


이제 명령문 따와서 sql에 넣을건데

String sql = " INSERT INTO board (btitle, bcontent, bwrite) VALUES ('  " + dto.getBtitle() + "  ', '.', '');";

따옴표주의

String sql = "INSERT INTO board (btitle, bcontent, bwrite) VALUES ('" + dto.getBtitle() + " ', '" +dto.getBcontent()+"', '"+dto.getBwrite()+"')";

 

 stmt에 try/catch  걸어주기

	public int write(BoardDTO dto) {
		int result = 0;
		Connection con = null;
		Statement stmt = null;	// pstmt로 바꿀예정
		String sql = "INSERT INTO board (btitle, bcontent, bwrite) VALUES ('" + dto.getBtitle() + " ', '" +dto.getBcontent()+"', '"+dto.getBwrite()+"')";
		con = DBconnection.getInstance().getconConnection();
		try {
			stmt = con.createStatement();
			result = stmt.executeUpdate(sql);	// *
			
		} catch (SQLException e) {
			e.printStackTrace();
		} finally {
			try {
				stmt.close();
				con.close();
			} catch (SQLException e) {
				e.printStackTrace();
			}
		}
		
		
		return result;
	}
}

* executeUpdate = 실행 = 영향받은 행 1, 2, 0

JSP책 p387~

 


 (sql 실행메소드 execute~~ 관련)

https://codedragon.tistory.com/5961

 

 

SQL 수행 메소드 - executeQuery(String sql), executeUpdate(String sql), execute(String sql)

SQL 수행 메소드 Statement는 문자열(String)형태의 SQL문을 사용합니다. 생성된 Statement객체가 데이터베이스에게 SQL문을 전송하는 방법은 SQL문에 따라서 3가지로 나눌 수 있습니다. SELECT문의 경우에는

codedragon.tistory.com


 

웹페이지로 가서 글쓰기

새로 쓴 글 저장됨

짜잔

 


stmt랑 sql 주석처리! 아니 걍 다 지워버리고 다시 하자..

pstmt로 다시 작성할거

String sql = "INSERT INTO board(btitle, bcontent, bwrite) VALUES (?, ?, ?)";

물음표 자리에 변수들이 알아서 들어감.. 와우 => 훨씬 안정적이고 간단!

 


앞으로는 pstmt를 사용할 예정 ->  prepareStatement() 를 사용함

 

https://medium.com/@dnehd15/it%EA%B8%B0%EC%B4%88%EC%83%81%EC%8B%9D-%EC%8A%A4%ED%8A%B8%EB%9F%BF%EC%B8%A0%EC%99%80-%EC%8A%A4%ED%94%84%EB%A7%81%EC%9D%98-%EC%B0%A8%EC%9D%B4-9264dd6c967d

 

[IT기초상식]스트럿츠와 스프링의 차이

스트럿츠

medium.com


pstmt 에 try/catch 걸어주기

	public int write(BoardDTO dto) {
		int result = 0;
		Connection con = null;
		PreparedStatement pstmt = null;
		String sql = "INSERT INTO board(btitle, bcontent, bwrite) VALUES (?, ?, ?)";
		con = DBconnection.getInstance().getconConnection();
		try {
			pstmt = con.prepareStatement(sql);
			// 물음표에 값 세팅
			pstmt.setString(1, dto.getBtitle());
			pstmt.setString(2, dto.getBcontent());
			pstmt.setString(3, dto.getBwrite());
            
			result = pstmt.executeUpdate();
			
		} catch (SQLException e) {
			e.printStackTrace();
		} finally {
			try {
				pstmt.close();
			} catch (SQLException e) {
				e.printStackTrace();
			}
		}
		
		return result;
	}

pstmt.setString(1, dto.getBtitle());  => 첫번째 행의  btitle 데이터 가져와

btitle, bcontent, bewrite 데이터를 먼저 세팅해준 후에 쿼리문 실행**

아니면 finally 부분 아래처럼도 가능

 

* executeUpdate() 는 영향받은 행의 갯수를 반환 (여기에서는 글쓰기로 입력한 게시글, 즉 1개의 데이터 행)

	finally {
			try {
				if(pstmt != null) pstmt.close();
				if(con != null) {con.close();}
			} catch (SQLException e) {
				e.printStackTrace();
			}
		}

이제 새로 글쓰기 하고 저장하면

콘솔창에 1이 뜸!!

1이 뜨면 저장완료

0이 뜨면 저장실패


[ write.jsp ] 

input에 required="required" 추가!!

 

 

내용부분에 글쓰면 엔터키가 적용이 안됨  => 이건 다음시간!!!

 

[ Write.java ]

 

protected void doPost() 에서 처리해줘야 막을 수 있음..........?

글자수 제한 걸어주고, html코드도 못치게 막아줘야함

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//		doGet(request, response);
		// 실제 글쓰기 => 글저장하기
		// 한글
		request.setCharacterEncoding("UTF-8");
		
		// 제목에 들어온 글자수 5개 이상이야?
		// 본문내용 글자 5글자 이상이야?
		if(request.getParameter("title").length() >= 5 
				&& request.getParameter("content").length() >= 5) {
			// 아래 로직을 여기에
			BoardDTO dto = new BoardDTO();
			dto.setBtitle(request.getParameter("title"));
			dto.setBcontent(request.getParameter("content"));
			dto.setBwrite("poseidon"); // 나중에 수정해야 합니다.
			
			// DAO
			BoardDAO dao = new BoardDAO();
			int result = dao.write(dto);
			
			System.out.println(result);
			
			// 저장 완료되면 페이지 이동
			response.sendRedirect("./board");
			
		} else {
			response.sendRedirect("./write");
		}

	}
}

제목 & 내용이 5글자 이상이여야 저장이 됨

5글자 미만이면 다시 글쓰는 페이지로 돌아감


[ write.jsp ]

자바스크립트 

scr + ctrl + space

 

[ write.jsp ] _ 경고창 띄우기

 

<script type="text/javascript">
//alert("경고창");
let my_name = "홍길동";
alert(my_name);
const num = 100;	// 싱수처리

</script>

var my_name = "홍길동";

* 호이스팅 문제

변수가 선언이 안되어 있어도 오류 뜨지 않고 넘어감

그래서 let 사용 

 

<script type="text/javascript">
//alert("경고창");
alert(my_name);

let my_name = "홍길동";
const num = 100;
//var my_name = "홍길동"; // var 호이스팅 문제
// 호이스팅
// 선언된 변수들이 코드상 실제로 이동하지 않지만 최상위로 올려집니다.

// == 값비교
// === 값비교 + 자료형태까지 비교


</script>