20230803 _[44일차]_01. jquery + json 으로 board2 만들기2

Map 10개가 들어있는 list를

JSONArray 객체에 (JSON의 배열형태) 넣어주고

그걸 JSON객체인 json으로 감싸줌 (josn에 .put () 으로 arr를 담아서 json을 리턴)

 

list에 있는 것들을 그냥 내보내면 ajax가 알아볼 수가 없으니

json 객체 형태로 만들어준 후에(json 언어로 바꿔줌) string으로 맞춰줘야 한다.

(통신을 위해 언어를 맞춰준다고 생각하면 될듯)

 

** 위에서 만들어준 객체들은 전부 자바객체 (Json객체로 활용하기 위해 자바에서 만들어준 자바객체)

tostring으로 내보내는 시점부터 JSON 객체가 된다.

 

---

arr를 바로 리턴하지 않고 json 객체로 감싼 후에 json을 리턴하는 이유

=> 지금은 리턴 값이 list (배열) 하나지만 나중에 아래처럼 여러값을 넣어서 리턴할 예정이라 일단 json으로 감싸주는거.

 

객체 : {키 : 값, 키2 : 값, 이름 : 값 .......} 요런 형태인건데 

위의 list 처럼 값 부분에 object가 들어갈 수 있다. 

---

콘솔창에 연습해보자.

 

human이라는 객체 안에 name, age, addr 가(key값) 들어있고 

(콤마+키값)으로 해당 key값의 value값을 뽑아낼 수 있다. 

 

human2의 객체의 value 값으로 객체(배열)를 넣어줬다. 다시 배열의 값을 뽑아내려면

human2.study[0] 

이걸 활용해서 게시판 글들을 브라우저에 띄워보자

---

한번 json을 출력해보면 (안에 list가 들어있으니 얘를 출력하는거)

 

 

윗부분은 그냥 list를 출력했을 때

아래는 json객체를(내부에 list) 출력했을 때

---

http://localhost/boardList2?pageNo=1

 주소로 불러와봤더니이렇게 한글이 깨진 형태다.

 

한글깨짐 처리하려면 RestController에서 

그러면 아래처럼 한글이 뜬다.

크롬기반 JSONView 설치해주면

아래처럼 정리된 모양으로 확인할 수 있다.

 

이제 board2에서

받은 data의 list배열의 0번째의 bno를 뽑아내보자.

아래처럼 최신글번호(bno)를 팝업으로 띄운다.

 

이번에는 title을 뽑아보자

아래처럼 title을 팝업으로 띄운다.

 

---

data의 list를 함수 내부에서 만들어줬었던 list 라는 배열의 변수에 담아주고

이걸 콘솔창에 띄워보자 console.log()

게시판2 를 눌러보면 아래처럼 콘솔창에서 확인가능

배열의 각 index의 값이 list 한줄이다.

---

이제 db의 data를 잘 가져오는걸 확인했으니

아래쪽에 있었던 for문을 success 함수내부에 넣어주면

 db에 있는 최신 게시글 10개를 불러온다.

짜잔

 

---

컨트롤러에서 json 객체에 pageNo 랑 totalCount 를 넣어주고 (임시로 각각 1, 10으로 넣어줌)

board2에서 text로 해당값들을 div에 넣어줌

 

div는 요기 테이블 아래에 만들어줌

 

아래처럼 jquery로 div 내부에 버튼을 넣어준다.

 

for문으로 페이지 버튼 여러개 생성

board.jsp에서도 페이징 버튼의 class이름을 page로 지정해서 css 스타일을 줬어서 

board2.jsp 의 페이징 버튼에도 css 스타일이 적용됨. 아래처럼 버튼이 나온다.

 

 

페이지번호에 페이지 이동기능을 넣어주자 

일단 해당 페이지 번호를 팝업으로 띄우는 기능을 쓸건데 그냥 onclick이 아니라

document에 .on () 을 실행 

     (기능, 적용할부분, function () ~ ) 

클릭하면 button 내부의 text가 팝업으로 뜬다.

3번 버튼을 누르면 3이 뜬다.

 

---

아래처럼 this 대신에 .page 를 넣었더니 아래처럼 뜬다

=> 버튼을 눌렀을때 모든 버튼들의 text들을 불러온듯 하다.

---

ajax_call 이라는 함수를 만들어주고 (매개변수는 pageNo)

그안에 ajax 실행함수를 넣어줬다. (받아오는 데이터(pageNo)의 값부분을 매개변수 pageNo 로 맞춰줌)

 

이렇게 만들어준 함수를 호출해보자 _ 호이스팅 때문에 생성한 함수 위쪽에서 호출가능 _까먹고있었당

 

이제 컨트롤러에서 

pageNo 를 받아와서 출력해보자

브라우저를 새로고침 하면 매개변수 1을 가진채 ajax_call 함수가 실행되어서 콘솔창에 아래처럼 찍히고

---

다음 페이지의 글들을 넣어주기 위해 아래처럼 공백으로 비워준듯 하다.

 

아래에서는 pageNo 잘 가져오는지 확인해 준 듯 하다.

오류잡느라 놓침

---

컨트롤러에서 pageNo을 매개변수로 넣어줌

pageNo 매개변수로 boardList2() 메소드를 실행시킬건데

아래처럼 해줘야된다

이제 boardList2() 메소드를 만들어보자.

서비스에 만들어주고 매개변수에는 int i 넣어주기.

DAO에서도  boardList2() 메소드 만들고 매개변수 추가. 

mapper 에서도 0 대신에 i 값으로 변경

오류가 나서 연산부분을 아래처럼 괄호로 묶어줌

버튼을 클릭했을 때 pageNo를 매개변수로 가지는 ajax_call 함수를 실행시킨다

 

thead / tbody 추가하고 클래스명 지정

list를 function 내부인 아래에서 선언 (전역변수 => 지역변수로 바꿔줌)

 

totalCount 변수 선언하고 0으로 해주고

data에서 받아온 totalCount가 콘솔창에 뜨는지 확인

그러면 버튼을 눌렀을 때 콘솔창에 10이 뜬다

왜냐면 컨트롤러에서 10으로 해줬음

이제 이걸 db에서 가져오자

서비스에서 totalCount() 메소드 만들어주고 type은 자동으로 collection<?>으로 잡히는데 이걸 int로 바꿔줘

 

DAO에서도 만들어주고

mapper 에서는 

 

그러면 아래 버튼을 눌렀을때 콘솔창에 총 글의 갯수(totalCount)가 뜬다.

 

---

이제 글을 전부 불러와서 10개씩 쪼개서 뜨게 만들건데 글의 totalCount만큼 버튼의 갯수를 정해줘야 한다

토탈 페이지 / 10 한 값을 pages 에 넣어준다

그런데 소수점이 나온다면 페이지번호 하나를 더 만들어줘야 하니

소수점이 나오면 올림해줘야한다 (페이지번호 하나더 추가)

 

지금 글이 201개여서 버튼이 21개가 되었다. 

---

이제 페이징 버튼 앞뒤로 이동버튼을 만들어준다.

 

버튼 크기가 너무 크니 스타일 지정 해줘보자

페이지 하나씩 이동하는 기능을 foward 버튼에 넣어줄건데

 

기능에서 먼저 사용해준 pageNo라는 변수를 1로 선언해주고

data에서 받아온 pageNo에 1을 더해 위의 변수 pageNo에 다시 넣어준다.

 

 

그런데 이렇게 하면 +1 이 딱 한번만 적용이 되어서 한페이지 이동 후에는 페이지 이동버튼이 작동을 멈춘다.

이렇게 해주면 계속 넘어가는데 

마지막페이지에서도 글이 없는데 계속 넘어간다

 

 

 

근데 foward 클래스를 ▶ 요기가 아니라 ▶▶ 요기에 했었다

다시 ▶ 요기에다가 클래스 지정해주고 조건문 걸어주기

만약에 페이지 갯수보다 작으면 작동하게 만들고 

페이지 갯수보다 커지면 버튼이 작동 안하도록  disabled = ' disabled ' 해준다

 

 

 

 

 ▶▶  버튼을 누르면 맨 끝 페이지로 가도록 만들자 

 

요 기능은 복잡해서 쌤이 만들어주셨다...... 어렵다.

---

for문 대신 jquery의 foreach문으로 게시글을 불러내보자.

tbody 와 page버튼div를 .empty () 로 비워주고 html로 채워줄건데 

 

html은 일단 값없이 선언만 해준 후에 (null) 

html에  tr 여는 태그 + td 태그 + tr 닫는 태그 넣어줌

          (td에는 list의 값들을 index로 뽑아와서 넣어줌)

이렇게 테이블 요소들이 들어있는 html을 .append () 로 tbody의 마지막에 추가해준다. 

---

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="shortcut icon" href="./image/favicon2.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="./css/menu.css">
<link rel="stylesheet" href="./css/board.css">
<script src="./js/jquery-3.7.0.min.js"></script>

<script type="text/javascript">

	$(function(){
		// var list = []; // 보드 내용 가져오기
		let totalCount = 0;
		let pageNo = 1;
		// ajax 호출
		ajax_call(1);
		function ajax_call(pageNo) {
			//alert(pageNo);
			
			$.ajax({
				url: "./boardList2",   // http://localhost/boardList2?pageNo=1
				type: "get",
				data: {"pageNo": pageNo},
				dataType: "json",
				success: function(data){
					totalCount = data.totalCount;
					pageNo = data.pageNo
					console.log(totalCount);
					let list = data.list;
					$(".tableHead").empty(""); // 비워지나요?
					$(".paging").empty("");
					let html = "";
					$.each(list, function (index) {
						html += "<tr>";
						html += "<td>" + list[index].bno + "</td>";
						html += "<td>" + list[index].btitle + "</td>";
						html += "<td>" + list[index].m_name + "</td>";
						html += "<td>" + list[index].bdate + "</td>";
						html += "<td>" + list[index].blike + "</td>";
						html += "</tr>";
					});
					$(".tableHead").append(html);
					
					
					//페이징하기
					let pages = totalCount / 10;
					if(totalCount % 10 != 0){pages += 1;}
					startPage = pageNo;
					endPage = startPage + 10 < pages ? startPage + 9 : pages;
					
					//   << < 1 2 3 4 5 6 7 8 10 > >>
					if(pageNo - 10 > 0){
						$(".paging").append("<button class='start'>◀◀</button>");
					}else{
						$(".paging").append("<button disabled='disabled'>◀◀</button>");
					}
					if(pageNo - 1 > 0){
						$(".paging").append("<button class='backward'>◀</button>");
					}else{
						$(".paging").append("<button disabled='disabled'>◀</button>");
					}
					for (let i=startPage; i <= endPage; i++) {
						$(".paging").append("<button type='button' class='page'>" + i + "</button>");
					}
					if(pageNo + 1 < pages){						
						$(".paging").append("<button class='forward'>▶</button>");
					}else{
						$(".paging").append("<button disabled='disabled'>▶</button>");
					}
					if(pageNo + 10 < pages){
						$(".paging").append("<button class='end'>▶▶</button>");
					}else{
						$(".paging").append("<button disabled='disabled'>▶▶</button>");
					}
				},
				error : function(error) {
					alert("에러가 발생했습니다. : " + error);
				}
			});//ajax end
		}//ajax_call

		$(document).on("click", ".page", function() {//동적으로 생성된 버튼 클릭하기
			pageNo = $(this).text();
			ajax_call(pageNo);
		});
		$(document).on("click", ".start", function(){
			pageNo = pageNo - 10;
			ajax_call(pageNo);
		});
		$(document).on("click", ".backward", function(){
			pageNo = pageNo - 1;
			ajax_call(pageNo);
		});
		$(document).on("click", ".forward", function(){
			pageNo = pageNo + 1;
			ajax_call(pageNo);
		});
		$(document).on("click", ".end", function(){
			pageNo = pageNo + 10;
			ajax_call(pageNo);
		});
		
	});
</script>

</head>

<body>
<%@ include file = "menu.jsp" %>
	<h1>보드2</h1>
	<table>
		<thead>
			<tr>
				<td>번호</td>		
				<td>제목</td>		
				<td>글쓴이</td>		
				<td>날짜</td>		
				<td>읽음</td>		
			</tr>
		<thead>
		<tbody class="tableHead"></tbody>
	</table>
	<div class="paging"></div>
</body>
</html>

 

버튼을 누르면 해당버튼 번호부터 10개가 불러와지도록 만들어진 코드다.

4번을 누르면 4 ~ 13 번까지

---

오류가 났을 때 혼자 해결해기,  어느 부분에서 문제가 발생했는지 구체적인 부분까지 생각해본 후 질문하기.

취업을 하더라도 내가 원하는 방향성에 대해서 고민해보고 계속 공부 필요

클라우드 컴퓨팅을 요즘은 다 한단다.. 

---

 

댓글창 만들자

 

https://aquerytool.com/

AQueryTool

 

테이블 두개 생성해주고 표시된 부분 채워준 후에 ( 두 테이블 Name이랑 Type 을 맞춰줘야한다. )

화살표 방향대로 끌어서 넣어주면 연결된다.

테이블 두개 생성해주고 표시된 부분 채워준 후에 ( 두 테이블 Name이랑 Type 을 맞춰줘야한다. )

화살표 방향대로 끌어서 넣어주면 연결된다.

테이블 하나더 생성해서 서로 연결시켜줄건데 

아래 연결은 sql문으로 해주자

아래 표시한 부분 채워줘야 된다.

그런데 그냥 카톡으로 보내주셨다. 아래꺼로 실행

 

CREATE TABLE `comment` (
   `c_no` INT(11) NOT NULL AUTO_INCREMENT,
   `m_no` INT(11) NOT NULL,
   `bno` INT(11) NOT NULL,
   `c_comment` VARCHAR(1000) NOT NULL COLLATE 'utf8mb4_general_ci',
   `c_date` TIMESTAMP NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp(),
   PRIMARY KEY (`c_no`) USING BTREE,
   INDEX `FK_comment_board` (`bno`) USING BTREE,
   INDEX `FK_comment_members` (`m_no`) USING BTREE,
   CONSTRAINT `FK_comment_board` FOREIGN KEY (`bno`) REFERENCES `board` (`bno`) ON UPDATE NO ACTION ON DELETE NO ACTION,
   CONSTRAINT `FK_comment_members` FOREIGN KEY (`m_no`) REFERENCES `members` (`m_no`) ON UPDATE NO ACTION ON DELETE NO ACTION
)
COLLATE='utf8mb4_general_ci'
ENGINE=InnoDB
;

하이디에서 comment 테이블 생성해주고

 

예전에 다운받아뒀던 DBeaver 에서 관계도 확인할 수 있다.

아래 부분 더블클릭하면 한번에 확인가능

일단 여기에서 데이터 한번 넣어보자 

 

내일 계속