반응형
포스팅 하기 앞서 게시물의 소스코드는 블로그 주인(Alpreah)가 제작했음을 알려드립니다.
+ 이전 로그인 회원가입 예제 기반으로 만들어졌습니다.
-- 완성본 파일 --
DB.sql## 글을 읽기전 꼭 확인 해주세요. ##
부가적인 설명을 보시기 전, 마리아디비와 마이바티스를 연동을 해야 합니다.
만약, 연동을 하지 않았다면 아래의 링크를 확인 해주세요.
알카이브 파일을 넣는법을 모르신다면 아래의 링크를 참고 해주세요.
DB에 SQL을 넣는법을 모르신다면 아래의 링크를 참고 해주세요.
[Srping] heidisql에 테이블 생성 sql문 넣기
## 결과 화면 ##
로그인 페이지
회원가입 페이지
로그인 후 인덱스 페이지
게시글 페이지
게시글 등록 페이지
게시글 등록 후
## 간단한 소스코드 해석 ##
HomeController.java
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | @RequestMapping(value = "/board_wrtie", method = RequestMethod.GET) public String board_wrtie() { return "board_wrtie"; } @ResponseBody @RequestMapping(value = "/board_wrtie", method = RequestMethod.POST) public int board_wrtie(HttpSession session, board b) { //세션에 m으로 된 정보를 member 객체에 m으로 담음 member m = (member) session.getAttribute("m"); //만약 m이 빈값이면 -1로 리턴 if(m == null) return -1; //b 객체의 등록자 번호를 설정 b.setB_owner(m.getM_no()); //dao로 값 전달 및 해당 매소르 반환 return b_dao.board_write(b); } @RequestMapping(value = "/board_list", method = RequestMethod.GET) public String board_list() { return "board_list"; } @ResponseBody @RequestMapping(value = "/get_board", method = RequestMethod.GET) // 메소드의 반환값을 어레이리스트의 자료형을 board로 선언 public List<board> get_board() { //board_daom에 get_board 메소를 찾아 결과값을 반환 return b_dao.get_board(); } | cs |
board_list.jsp
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>게시글 작성 데모</title> </head> <body> <h3>## 게시글 목록 페이지 ##</h3> <a href="/demo/board_wrtie">게시글 작성하기</a> <table border="1"> <thead> <tr> <th scope="col">#</th> <th scope="col">제목</th> <th scope="col">작성자</th> <th scope="col">등록일</th> </tr> </thead> <tbody id="tbody"> </tbody> </table> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script> <script> //페이지가 불러 졌을때 $(document).ready(function() { //비동기 통신 $.ajax({ type: "GET", //GET 타입 url: "get_board", //URL 선언 success: function(data) { //성공시 매개변수로 DATA를 받음 //12번 눌러서 콘솔로 이동하면 json형태의 데이터 확인 console.log(data); //데이터의 크기만큼 돌려줌 for (var str in data) { //tr 태그를 생성해서 id에 tobody에 추가 var tr = $("<tr></tr>").appendTo("#tbody"); //tr에 td를 추가 후 내용을 데이터 값 $("<td></td>").text(data[str]['b_no']).appendTo(tr); $("<td></td>").text(data[str]['b_title']).appendTo(tr); $("<td></td>").text(data[str]['b_owner_nick']).appendTo(tr); $("<td></td>").text(FormatToUnixtime(data[str]['b_regdate'])).appendTo(tr); } }, error: function(error) { alert("오류 발생" + error); } }); //유닉스 타임스템프를 년 월 일 시 분 초로 변경하기 위한 함수 function FormatToUnixtime(unixtime) { var u = new Date(unixtime); return u.getUTCFullYear() + '-' + ('0' + u.getUTCMonth()).slice(-2) + '-' + ('0' + u.getUTCDate()).slice(-2) + ' ' + ('0' + u.getUTCHours()).slice(-2) + ':' + ('0' + u.getUTCMinutes()).slice(-2) + ':' + ('0' + u.getUTCSeconds()).slice(-2) }; }); </script> </body> </html> | cs |
board_wrtie.jsp
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>게시글 자성 데모</title> </head> <body> <h3>## 게시글 작성 페이지 ##</h3> <input type = "text" id = "b_title" placeholder="게시글 제목"><br> <textarea rows="5" id = "b_content" placeholder="게시글 내용"></textarea><br> <button id = "wrtie_process">게시글 작성</button> <p>게시글 목록으로 가고 싶다면 <a href = "/demo/board_list">여기</a>를 눌러주세요.</p> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script> <script> $(document).ready(function(){ //ID가 wrtie_process를 클릭할떄 $("#wrtie_process").click(function(){ //JSON 객체에 값을 담아줌 var json = { b_title : $("#b_title").val(), b_content : $("#b_content").val() }; //변수명이 JSON에 담아둔 값만큼 포이치문을 돌림 for(var str in json){ //JSON에 STR의 길이가 0일 경우 if(json[str].length == 0){ //해당하는 ID에 placeholder를 찾아 경고창을 띄움 alert($("#" + str).attr("placeholder") + "를 입력해주세요."); //해당하는 ID에 포커스를 올림 $("#" + str).focus(); //리턴 return; } } //비동기 요청 $.ajax({ type : "post", //POST로 url : "board_wrtie", //URL 지정 data : json, //전달값은 JSON success : function(data) { //성공시 //받아온 데이터를 스위치문사용 //-1은 로그인 안될때, 0은 성공, 나머지는 db오류 switch (Number(data)) { case -1: alert("로그인 후 이용해주세요."); window.location.href = "/demo/"; break; case 0: alert("정상적으로 등록이 되었습니다."); window.location.href = "/demo/board_list"; break; default: alert("알수없는 오류가 발생했습니다. [ErrorCode : " + Number(data) + "]"); break; } }, error : function(error) { alert("오류 발생"+ error); } }); }); }); </script> </body> </html> | cs |
반응형
