로그인 안해도 글쓸 수 있는 자유 게시판 만들기 - 댓글 포함

eunja511005 commented 1 year ago

ChatGPT에 질문하기

- 로그인 안해도 글쓸 수 있는 자유 게시판 만들려고 하는데 댓글 기능도 있었으면 좋겠어 비밀글도 있었으면 좋겠고 혹시 schema.sql, data.sql 만들어 줄 수 있어?
- 아 나는 오라클 DBMS 사용하고 있어

eunja511005 commented 1 year ago

/Tutorial/src/main/resources/schema.sql


drop table posts;
CREATE TABLE posts (
id NUMBER(11) PRIMARY KEY,
title VARCHAR2(255) NOT NULL,
content CLOB NOT NULL,
is_secret NUMBER(1) DEFAULT 0 NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP NOT NULL
);

drop table comments; CREATE TABLE comments ( id NUMBER(11) PRIMARY KEY, post_id NUMBER(11) NOT NULL, content CLOB NOT NULL, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP NOT NULL );

eunja511005 commented 1 year ago

/Tutorial/src/main/resources/data.sql

INSERT INTO posts (id, title, content, is_secret, created_at) 
SELECT 1, '첫 번째 게시글', '안녕하세요. 첫 번째 게시글입니다.', 0, CURRENT_TIMESTAMP FROM DUAL UNION ALL
SELECT 2, '두 번째 게시글', '안녕하세요. 두 번째 게시글입니다.', 1, CURRENT_TIMESTAMP FROM DUAL UNION ALL
SELECT 3, '세 번째 게시글', '안녕하세요. 세 번째 게시글입니다.', 0, CURRENT_TIMESTAMP FROM DUAL;

eunja511005 commented 1 year ago

ChatGPT에 물어 보기

- 이제 이 게시판을 조회 할 수 있는 jsp 화면을 만들어 줘. 나는 스프링 부트 사용하고 있어 테이블은 jquery datatable을 이용하고 싶고, 데이터 컨트롤은 서버에서 하고 싶어. 그리고 아까 말했듯이 나는 오라클 DB 쓰고 있어 잊지마.
- 난 js와 jsp 파일은 분리 하고 싶어
- 서버에서 데이터 처리를 위해서는 ajax 호출시 파라미터를 던져야 하지 않아?
- jquery datatable에서 자동으로 호출 파라미터 세팅해주지 않아? 그걸 이용해줘
- title, is_secret, created_at 필드에 대해서 입력 받을 수 있도록 하고 search 버튼 클릭시 이 입력값을 가지고 ajax 호출 하도록 변경 해줘
- 아 나는 jqeury 3.6버젼 사용하고 있어
- jquery datatable에서 제공하는 기본 search 기능은 비활성화 하고 search_btn을 눌렀을때 검색 조건에 맞는 데이터만 서버에서 가져 오고 싶어
- 좋아 이제 내가 원하는대로 된거 같아. jsp, js 전체 파일 내용 보여줘.

eunja511005 commented 1 year ago

list.jsp

<!DOCTYPE html>
<html>
<head>
<title>게시판</title>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
</head>
<body>
<div>
    <label for="title">Title:</label>
    <input type="text" id="title" name="title">
</div>
<div>
    <label for="is_secret">Is Secret:</label>
    <select id="is_secret" name="is_secret">
        <option value="">전체</option>
        <option value="1">비밀글</option>
        <option value="0">일반글</option>
    </select>
</div>
<div>
    <label for="created_at">Created At:</label>
    <input type="text" id="created_at" name="created_at">
</div>
<div>
    <button id="search_btn">Search</button>
</div>
<table id="table_id">
    <thead>
        <tr>
            <th>ID</th>
            <th>Title</th>
            <th>Is Secret</th>
            <th>Created At</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>
</body>
<script src="${pageContext.request.contextPath}/js/list.js"></script>
</html>

eunja511005 commented 1 year ago

list.js


$(document).ready(function() {
$('#table_id').DataTable({
    "serverSide": true,
    "processing": true,
    "searching": false, // 검색 기능 비활성화
    "ajax": {
        "url": "/posts/list",
        "type": "POST",
        "data": function (d) {
            d.page = Math.ceil(d.start / d.length) + 1; // 페이지 번호 계산
            d.size = d.length; // 페이지당 표시할 아이템 수
            d.title = $('#title').val(); // title 검색 조건
            d.is_secret = $('#is_secret').val(); // is_secret 검색 조건
            d.created_at = $('#created_at').val(); // created_at 검색 조건
        }
    },
    "columns": [
        {"data": "id"},
        {"data": "title", "searchable": true, "orderable": true},
        {"data": "is_secret", "searchable": true, "orderable": true},
        {"data": "created_at", "searchable": true, "orderable": true}
    ]
});

$('#search_btn').click(function() {
    $('#table_id').DataTable().ajax.reload();
});
});

eunja511005 commented 1 year ago

ChatGPT

- 이제 게시판 리스트 조회를 위한 controller, service, serviceImpl, mapper.java, mapper.xml 구현해줘
- BoardController 에서 입력값 받을때 DTO 통해서 받도록 변경 해줘
- 롬복 사용하고 있어
- Post로 시작하도록 모든 클래스 네이밍룰 바꿔서 다시 보여줘. 
- 리턴할때도 jquery datatable에서 제대로 동작하기 위해 여러가지 정보를 포함해서 리턴해야 하는거 아냐?
- 그러면 위의 내용 포함해서 리턴 될 수 있도록 전체 클래스 내용 변경 해줘
- PostMapper.xml도 보여 줘야지.
- resultMap은 써는게 좋을까?
- searchTitle 조회할때 대소문자 구분 없이 해줘
- d 전체를 보내고 이걸 받을 수 있는 DTO를 만들어 줘. 롬복 사용해
- 그니까 d 전체를 보내는 소스와 이걸 받는 dto 소스 보여줘
- postSearch는 리스트로 해줘
- 오라클 OFFSET #{offset} ROWS FETCH NEXT #{limit} ROWS ONLY 이용하는 걸로 바꿔 줘

eunja511005 / AutoCoding

로그인 안해도 글쓸 수 있는 자유 게시판 만들기 - 댓글 포함 #2