-
(국비교육) 46 - project1 이어하기13 (JSON view + 페이징 처리 + 댓글 기능)개발/국비교육 2023. 8. 3. 18:43
■ json 배열
그냥 내보내면 ajax 가 형식이 맞지 않아 못받기 때문에 json 으로 바꿔준다.
json 객체를 만들어주고 배열도 만들어준다.
그리고 리스트 맵타입을 제이슨 배열에 담아준다.
이 배열을 다시 json 에다 담아주고 출력해주면 정상 출력된다.
* 에러해결
나의 경우 배열에 list 를 담지 않아서 뜨지 않았다.
추후에 다음과 같이 사용하여 페이징 처리할 예정이다.
이제 json 에 넣고 출력하면 다음과 같이 나온다.
즉 다음과 같이 객체 안에 객체가 있는 형태이다.
안에 값을 변수를 통해 부를 수 있으며 객체 안의 객체는 변수의 배열로 부를 수 있다.
다음과 같이 글이 안이쁘게 나온다.
json 형태로 예쁘게 보여줄 수 있다.
https://chrome.google.com/webstore/detail/jsonview/gmegofmjomhknnokphhckolhcffdaihd?hl=ko
JSONView
브라우저에서 JSON 문서를 보세요.
chrome.google.com
JSONView – 🦊 Firefox용 확장 기능 (ko)
Firefox용 JSONView 부가 기능을 다운로드하세요. 브라우저에서 JSON 문서를 보세요.
addons.mozilla.org
boardList2?pageNo=1 링크를 타고 들어가면 데이터가 정상적으로 들어가면 알림이 뜬다.
여기서 각 변수를 입력하면 그 값을 출력할 수 있는데,
list 의 경우 배열로 되어 있기 때문에 배열에 해당하는 번호와 그 안에 변수를 출력하면 안에 값이 나온다.
정상적으로 출력되는 것 확인 가능
data.list 는 각 한줄씩을 나타낸다.
lists 를 list 로 변경
왜냐면 그 전에는 확인값을 보려고 list 를 쓰느라 중복값 피하기 위해서 lists 를 썼기 때문이다.
for 문을 여기로 넣어준다.
그러면 게시글을 다음과 같이 다 불러온다.
■ 페이징 처리
테이블 밑에 페이징처리가 출력되게 표시할 것이다.
class 이름 paging 으로 해준다.
현재 내 페이지와 토탈페이지를 출력한다.
출력 보인다.
현재 페이지 수는 1페이지, 총 게시글 수는 125개이다.
해당 숫자는 우리가 초기에 잡아준 숫자가 나왔으며, 이후에는 db 와 연결할 것이다.
버튼 생성되었다.
class='page' 라고 준다.
동적으로 생성된 버튼 클릭하기 위해서는 다음과 같이 on 을 써줘야 한다.
on 은 동적으로 동작할 떄 사용해준다. append 가 동적으로 생성되었기 때문이다.
버튼 클릭시 정상적으로 해당 버튼 페이지를 가져오는 것 확인 가능
ajax 생성이 필요할때마다 부르기 위해서 함수로 만든다.
잘라내기 해서 함수 안에 넣어준다.
호출하면 사용 가능하다.
처음 불렀을때의 값은 1 이다.
버튼을 클릭했을때는 해당 페이지 ajax 진행되도록 처리해준다.
그런데 append 로 추가돼서 버튼과 내용이 추가된다.
html("") 을 넣으면 데이터가 비워져서 추가되지 않는다.
* 밑에서 empty() 로 비워주는 것으로 변경한다.
pageNo 가 1부터 시작함으로 db 데이터는 0부터 시작함으로 맟추기 위해 -1 처리 + 10 한다.
이제 안에 int 값이 들어갔으므로 서비스 고쳐준다.
마찬가지로 bao 도 타입 바꿔준다.
맵퍼도 동적으로 받은 값으로 바꿔준다.
에러뜨는 이유는 pageNo - 1 을 괄호로 묶어주지 않았기 때문이다.
묶어주지 않으면 곱셈 먼저 계산돼 오류 뜨게 된다.
이렇게 설정해줘야 페이지 바꿔도 위에 상단 살아있다.
전역변수 지역변수로 바꾸기
초기에 정해준 125 가 나온다.
이제 데이터베이스에서 전체 게시글을 받기 위해 서비스를 통해 받아온다.
메소드 처음 생성 시 컬렉션으로 생성되는데 우리는 값 1개만 받으면 되므로 int 로 변경해준다.
하나의 값만 받으니 selectOne 으로 받는다.
전체 개시글 수 받는 sql 문 작성한다.
게시글 전체 수가 나온다.
내가 보여줄 전체 페이지수를 pages 변수에 넣어준다.
그러나 나머지를 올림처리해야 한다.
왜냐면 172개 글수에서 17개만 보이면 안되기 때문이다.
따라서 나머지가 있다면 +1 처리를 해주면 한 개의 페이지가 추가적으로 나온다.
기호 넣어준다.
변수를 위에 선언해줘야 아래에서 사용할 수 있다.
페이지 하나씩 추가한다.
그러면 ▶ 키를 눌렀을 때 1개씩 페이지가 넘어간다.
생성된 pages 보다 pageNo + 1 이 작았을 경우에는 활성화하지만
그렇지 않을 경우에는 비활성화 처리한다.
비워지는 것은 empty() 처리로 바꿔준다.
foreach 문으로 쓰면 다음과 같다.
<%@ 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="./img/favicon.ico" type="image/x-icon"> <link rel="icon" href="./img/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; let startPage = pageNo; let endPage = pageNo + 9; //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"%> <div class="board-div"> <h1>보드2</h1> <table> <thead> <tr> <td class="td1">번호</td> <td class="title">제목</td> <td class="td1">글쓴이</td> <td class="td2">날짜</td> <td class="td1">읽음</td> </tr> </thead> <tbody class="tableHead"></tbody> </table> <div class="paging"></div> </div> </body> </html>■ 개발자 협업 툴
잔디
잔디(JANDI) - 기능
협업에 관한 모든 기능을 제공하는 잔디. 잔디 위에서 새로운 협업문화가 자라납니다.
www.jandi.com
지라
Jira | 이슈 & 프로젝트 트래킹 소프트웨어 | Atlassian
Jira에서 불가능을 가능으로 바꾸세요. 애자일 팀을 위한 최고의 프로젝트 관리 도구로 세계적인 수준의 소프트웨어를 계획, 추적 및 릴리스하세요.
www.atlassian.com
레드마인
Redmine 설치 및 사용법 - REDMINE 커뮤니티 - Redmine 커뮤니티
www.redmine.or.kr
■ 취업한 선배 조언
- AWS 서버 직접 열어보고 네트워크 서버 잘 알고 있어야
- 문제해결을 하기 위해 무엇을 햇는데 어디서 문제가 생겼다 -> 시도 어필
- JAVA 알고리즘 공부- 클라우드 컴퓨팅 자격증 (+가산)
■ 댓글 기능 만들기
members m_no 가 연결됩니다.
다음과 같이 보드와 회원을 연결해준다.
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 ;AQueryTool
AQueryTool은 웹 기반 ERD 툴 + SQL 자동 생성 프로그램입니다.
aquerytool.com
dbeaver 에서 다음과 같이 확인 가능하다.
다음과 같이 테이블에 행삽입해본다.
'개발 > 국비교육' 카테고리의 다른 글
(국비교육) 48 - project1 이어하기15 ( 댓글 삭제하기 자바스크립트 + jquery + ajax) + 깃허브 조직 추가 (0) 2023.08.07 (국비교육) 47 - project1 이어하기14 ( (0) 2023.08.04 (국비교육) 45 - 7회차 시험문제 + project1 이어하기12 (회원가입 중복체크 + 비동기vs동기 + JSON ) (0) 2023.08.02 (국비교육) 44 - vs code + jQuery CDN + project1 이어하기11 + append + Toggle + Show/Hide + 로그인 검사하기 + ajax (0) 2023.08.01 (국비교육) 43 - 자바 그래픽 + jQuery + vs code (0) 2023.07.31