생각하는 감쟈

[JQuery] 메뉴판 만들기_01 본문

Language/Java

[JQuery] 메뉴판 만들기_01

생각하는 감쟈🥔 2024. 6. 4. 19:00

WebContent

board.jsp

<%@ 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>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link
	href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
	rel="stylesheet">
<script
	src="https://cdn.jsdelivr.net/npm/jquery@3.6.3/dist/jquery.min.js"></script>
<script
	src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>



<script src="../js/board.js"></script>

<style>
body * {
	box-sizing: border-box;
}

nav, #write {
	margin: 10px 5%;
}

nav a {
	visibility: hidden;
}

#stype {
	width: 100px;
}

#sword {
	width: 150px;
}

p {
	border: 1px dotted blue;
	padding: 4px;
	margin: 2px;
	word-break: keep-all; /* 줄바꿈: 단어단위로  */
}

.p12 {
	display: flex;
	flex-direction: row;
}

.p1 {
	flex: 70%;
}

.p2 {
	flex: 30%;
	text-align: right;
}

.card-body, .reply-body {
	display: flex;
	flex-direction: column;
}

input[name=reply] {
	height: 55px;
	vertical-align: top;
}

textarea {
	width: 70%;
}

label {
	display: inline-block;
	width: 80px;
	height: 30px;
}

#modifyform {
	display: none;
}

#modifyform textarea {
	vertical-align: bottom;
}

#btnok, #btnreset {
	height: 40px;
}
</style>

<script>
/*프로젝트 이름 얻어오기 - mypath*/

mypath = '<%=request.getContextPath()%>'
currentPage = 1;

$(function() {
	
	// 리스트 3개씩 출력하기 - 최초 호출시 파라미터 없다
	// 외부 파일 board.js에 정의되어있는 스크립트 함수
	listPerPage()
	
	
	
})
</script>
</head>
<body>
	<br>
	<br>
	<h1>게시판</h1>
	<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
		<div class="container-fluid">
			<!-- <a class="navbar-brand" href="javascript:void(0)">Logo</a>  -->
			<button class="navbar-toggler" type="button"
				data-bs-toggle="collapse" data-bs-target="#mynavbar">
				<span class="navbar-toggler-icon"></span>
			</button>
			<div class="collapse navbar-collapse" id="mynavbar">
				<ul class="navbar-nav me-auto">
					<li class="nav-item"><a class="nav-link"
						href="javascript:void(0)">Link</a></li>
					<li class="nav-item"><a class="nav-link"
						href="javascript:void(0)">Link</a></li>
				</ul>
				<form class="d-flex">
					<select class="form-select" id="stype">
						<option value="">전체</option>
						<option value="writer">이름</option>
						<option value="subject">제목</option>
						<option value="content">내용</option>
					</select> <input class="form-control me-2" type="text" id="sword"
						placeholder="Search">
					<button class="btn btn-primary" id="search" type="button">Search</button>
				</form>
			</div>
		</div>
	</nav>



	<!-- 게시판 목록 3개씩 출력 될 곳 -->
	<div id="result"></div>
	<br>
	<br>
	<!-- 페이지 리스트 출력 될 곳 -->
	<div id="pagelist"></div>
</body>
</html>

 

list.jsp

<%@page import="com.google.gson.JsonElement"%>
<%@page import="com.google.gson.JsonObject"%>
<%@page import="com.google.gson.Gson"%>
<%@page import="kr.or.ddit.board.vo.BoardVO"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%
	// controller에서 저장한 데이터ㅓ꺼내기
	List<BoardVO> list = (List<BoardVO>)request.getAttribute("list");
	
	int sp = (Integer) request.getAttribute("startp");
	int ep = (Integer) request.getAttribute("endp");
	int tp = (Integer) request.getAttribute("totalp");
	
	JsonObject obj = new JsonObject();
	obj.addProperty("sp", sp);
	obj.addProperty("ep", ep);
	obj.addProperty("tp", tp);
	
	
	Gson gson = new Gson();
// 	String rsult = gson.toJson(list);

	JsonElement result = gson.toJsonTree(list);
	
	obj.add("datas", result);
	
	out.print(obj);
	out.flush();
	



%>

src

BoardList (controller)

package kr.or.ddit.board.controller;

import java.io.BufferedReader;
import java.io.IOException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.google.gson.Gson;

import kr.or.ddit.board.service.BoardServiceImpl;
import kr.or.ddit.board.service.IBoardService;
import kr.or.ddit.board.vo.BoardVO;
import kr.or.ddit.board.vo.PListVO;
import kr.or.ddit.board.vo.PageVO;


@WebServlet("/BoardList.do")
public class BoardList extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
   
    public BoardList() {
        super();
        // TODO Auto-generated constructor stub
    }


	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		
		
		// 전송 데이터 읽기 - page, stype, sword
		StringBuffer buf = new StringBuffer();
		String line = null;
		
		try {
			BufferedReader reader = request.getReader();
			while(true) {
				line = reader.readLine();
				if(line == null) break;
				buf.append(line);
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
		
		
		String reqdate = buf.toString();
		//{page : 1 stype : "" sword : ""}
		
		//역직렬화 - 자바 객체로
		Gson gson = new Gson();
		PListVO vo = gson.fromJson(reqdate, PListVO.class);
		//vo.setpage(1) vo.setStype("") vo.setSwod("") >> 실행 됨
		
		
		//service 객체 얻기
		IBoardService service = BoardServiceImpl.getservice();
		
		//service메소그 호출 - serviceImpl에 pageInfo를 호출
		PageVO pvo = service.pageInfo(vo.getPage(), vo.getStype(), vo.getSword());
		// 리턴 값 pvo : start, end, startpage, endpage, totalpage
		
		// 실제 리스트 3개씩 꺼내는 메소드 호출
		Map<String, Object> map = new HashMap<String, Object>();
		
		//pvo.getStart >> BoardServiceImpl.java 에 있음
		map.put("start", pvo.getStart());
		map.put("end", pvo.getEnd());
		map.put("stype", vo.getStype());
		map.put("sword", vo.getSword());
		
		List<BoardVO> list = service.selectByPage(map);
		
		//request에 저장
		request.setAttribute("list", list);
		request.setAttribute("startp", pvo.getStartPage());
		request.setAttribute("endp", pvo.getEndPage());
		request.setAttribute("totalp", pvo.getTotalPage());
		
		
		//view페이지로 이동
		request.getRequestDispatcher("/boardview/list.jsp").forward(request, response);
		
		
	}

}

IBoardDao

package kr.or.ddit.board.dao;

import java.util.List;

import com.sun.javafx.collections.MappingChange.Map;

import kr.or.ddit.board.vo.BoardVO;
import kr.or.ddit.board.vo.ReplyVO;

public interface IBoardDao {
	// 리스트 가져오기 - 3개씩
	public List<BoardVO> selectByPage(Map<String, Object>map);
	
	// 글쓰기 
	public int writerBoard(BoardVO vo);
	
	// 글 수정
	public int updateBoard(BoardVO vo);
	
	// 글 삭제 - 파라미터 :글 번호
	public int deleteBoard(int num);
	
	// 조회수 증가 - 파라미터 : 글 번호
	public int updateHit(int num);
	
	// 전체 글 갯수 가져오기
	public int getTotalCount(Map<String, Object> map);
	
	// 댓글 쓰기
	public int writerReply(ReplyVO vo);
	
	// 댓글 수정
	public int updateReply(ReplyVO vo);
	
	// 댓글 삭제
	public int deleteReply(int renum);
	
	// 댓글 리스트
	public List<ReplyVO> selectReply(int bonum);

}

 

BoardDaoImpl

package kr.or.ddit.board.dao;

import java.util.List;

import org.apache.ibatis.session.SqlSession;

import com.sun.javafx.collections.MappingChange.Map;

import kr.or.ddit.board.vo.BoardVO;
import kr.or.ddit.board.vo.ReplyVO;
import kr.or.ddit.mybatis.config.MyBatisUtil;

public class BoardDaoImpl implements IBoardDao {

	// 싱클톤 객체 변수 생성 리턴
	private static IBoardDao dao;

	public static IBoardDao getDao() {
		if (dao == null)
			dao = new BoardDaoImpl();

		return dao;
	}

	// 생성자
	private BoardDaoImpl() {
	}

	// -----------
	
	@Override
	public List<BoardVO> selectByPage(Map<String, Object> map) {
		// 1. 리턴변수 선언
		List<BoardVO> list = null;
		SqlSession session = null;

		try {
			// 2. 실행
			session = MyBatisUtil.getSqlSession();
			list = session.selectList("board.selectByPage", map);

		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			session.commit();
			session.close();
		}

		// 3. 리턴
		return list;
	}

	@Override
	public int writerBoard(BoardVO vo) {
		// 1. 리턴변수 선언
		int result = 0;
		SqlSession session = null;

		try {
			// 2. 실행
			session = MyBatisUtil.getSqlSession();
			result = session.insert("board.writerBoard", vo);

		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			session.commit();
			session.close();
		}

		// 3. 리턴
		return result;

	}

	@Override
	public int updateBoard(BoardVO vo) {
		// 1. 리턴변수 선언
		int result = 0;
		SqlSession session = null;

		try {
			// 2. 실행
			session = MyBatisUtil.getSqlSession();
			result = session.update("board.updateBoard", vo);

		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			session.commit();
			session.close();
		}

		// 3. 리턴
		return result;
	}

	@Override
	public int deleteBoard(int num) {
		// 1. 리턴변수 선언
		int result = 0;
		SqlSession session = null;

		try {
			// 2. 실행
			session = MyBatisUtil.getSqlSession();
			result = session.delete("board.deleteBoard", num);

		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			session.commit();
			session.close();
		}

		// 3. 리턴
		return result;
	}

	@Override
	public int updateHit(int num) {
		// 1. 리턴변수 선언
		int result = 0;
		SqlSession session = null;

		try {
			// 2. 실행
			session = MyBatisUtil.getSqlSession();
			result = session.update("board.updateHit", num);

		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			session.commit();
			session.close();
		}

		// 3. 리턴
		return result;
	}

	@Override
	public int getTotalCount(Map<String, Object> map) {

		// 1. 리턴변수 선언
		int result = 0;
		SqlSession session = null;

		try {
			// 2. 실행
			session = MyBatisUtil.getSqlSession();
			result = session.selectOne("board.getTotalCount", map);

		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			session.commit();
			session.close();
		}

		// 3. 리턴
		return result;
	}

	@Override
	public int writerReply(ReplyVO vo) {
		// 1. 리턴변수 선언
		int result = 0;
		SqlSession session = null;

		try {
			// 2. 실행
			session = MyBatisUtil.getSqlSession();
			result = session.insert("board.writerReply", vo);

		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			session.commit();
			session.close();
		}

		// 3. 리턴
		return result;
	}

	@Override
	public int updateReply(ReplyVO vo) {
		// 1. 리턴변수 선언
		int result = 0;
		SqlSession session = null;

		try {
			// 2. 실행
			session = MyBatisUtil.getSqlSession();
			result = session.update("board.updateReply", vo);

		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			session.commit();
			session.close();
		}

		// 3. 리턴
		return result;
	}

	@Override
	public int deleteReply(int renum) {
		// 1. 리턴변수 선언
		int result = 0;
		SqlSession session = null;

		try {
			// 2. 실행
			session = MyBatisUtil.getSqlSession();
			result = session.delete("board.deleteReply", renum);

		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			session.commit();
			session.close();
		}

		// 3. 리턴
		return result;
	}

	@Override
	public List<ReplyVO> selectReply(int bonum) {
		// 1. 리턴변수 선언
		List<ReplyVO> list = null;
		SqlSession session = null;

		try {
			// 2. 실행
			session = MyBatisUtil.getSqlSession();
			list = session.selectList("board.selectReply", bonum);

		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			session.commit();
			session.close();
		}

		// 3. 리턴
		return list;
	}

}

getTotalCount : selecteOne으로 주기

 

 

IBoardService

package kr.or.ddit.board.service;

import java.util.List;

import com.sun.javafx.collections.MappingChange.Map;

import kr.or.ddit.board.vo.BoardVO;
import kr.or.ddit.board.vo.PageVO;
import kr.or.ddit.board.vo.ReplyVO;

public interface IBoardService {
	
	// 리스트 가져오기 - 3개씩
	public List<BoardVO> selectByPage(Map<String, Object>map);
	
	
	// 글쓰기 
	public int writerBoard(BoardVO vo);
	
	// 글 수정
	public int updateBoard(BoardVO vo);
	
	// 글 삭제 - 파라미터 :글 번호
	public int deleteBoard(int num);
	
	// 조회수 증가 - 파라미터 : 글 번호
	public int updateHit(int num);
	
	// 전체 글 갯수 가져오기
	public int getTotalCount(Map<String, Object> map);
	
	// 댓글 쓰기
	public int writerReply(ReplyVO vo);
	
	// 댓글 수정
	public int updateReply(ReplyVO vo);
	
	// 댓글 삭제
	public int deleteReply(int renum);
	
	// 댓글 리스트
	public List<ReplyVO> selectReply(int bonum);
	
	// 페이지별 정보 구하기 - 페이징 처리를 위힌 계산 - page를 처리를 위한 VO에 저장
	// db 처리를 하지 않는 단순계산, dao로 호출되지 않는다
	public PageVO pageInfo(int page, String stype, String sword);

}

 

BoardServiceImpl

package kr.or.ddit.board.service;

import java.util.List;

import com.sun.javafx.collections.MappingChange.Map;

import kr.or.ddit.board.dao.BoardDaoImpl;
import kr.or.ddit.board.dao.IBoardDao;
import kr.or.ddit.board.vo.BoardVO;
import kr.or.ddit.board.vo.PageVO;
import kr.or.ddit.board.vo.ReplyVO;
import kr.or.ddit.member.dao.IMemberDao;
import kr.or.ddit.member.dao.MemberDaoImple;

public class BoardServiceImpl implements IBoardService {
	
	 // 다오 객체 필요
	   private IBoardDao dao;
	
	// 싱클톤 자신의 객체
		private static IBoardService service;
	
	// 생성자 - dao객체 얻어오기
		private BoardServiceImpl() {
			dao = BoardDaoImpl.getDao();		
		}
		
	// 싱글톤 - 자신의 객체 생성 리턴
		public static IBoardService getservice() {
			if (service == null) service = new BoardServiceImpl();
			return service;
		}

	

	@Override
	public List<BoardVO> selectByPage(Map<String, Object> map) {
		
		return dao.selectByPage(map);
	}

	@Override
	public int writerBoard(BoardVO vo) {
		
		return dao.writerBoard(vo);
	}

	@Override
	public int updateBoard(BoardVO vo) {
		
		return dao.updateBoard(vo);
	}

	@Override
	public int deleteBoard(int num) {
		
		return dao.deleteBoard(num);
	}

	@Override
	public int updateHit(int num) {
		
		return dao.updateHit(num);
	}

	@Override
	public int getTotalCount(Map<String, Object> map) {
		
		return dao.getTotalCount(map);
	}

	@Override
	public int writerReply(ReplyVO vo) {
		
		return dao.writerReply(vo);
	}

	@Override
	public int updateReply(ReplyVO vo) {
		
		return dao.updateReply(vo);
	}

	@Override
	public int deleteReply(int renum) {
		
		return dao.deleteReply(renum);
	}

	@Override
	public List<ReplyVO> selectReply(int bonum) {
		return dao.selectReply(bonum);
	}

	@Override
	public PageVO pageInfo(int page, String stype, String sword) {
		
		return null;
	}

}

pageInfo 는service에만 있음 dao는 없음

 

 

 

 

res

 

mybatis-config

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE configuration 
	PUBLIC "-//mybatis.org/DTD Config 3.0//EN" 
	"http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
	<!-- DB연결 정보가 있는 properties파일 설정 -->
	<properties resource ="kr/or/ddit/mybatis/config/dbinfo.properties"/>
	
	<!--  MyBatis의 기본 설정 값 셋팅 -->
	<settings>
		<!--  데이터가 null로 전달되었으면 빈칸으로 인지 말고 null로 인식해라 -->
		<setting name="jdbcTypeForNull" value="NULL"/>
	</settings>
	
	<typeAliases>
		<!-- MyBatis에서 사용되는 클래스들은 사용할 때 패키지명이 포함된 전체 이름을
			 사용해야 되는데 이것을 대신해서 짧은 이름으로 사용하기 위한 별칭으로 등록한다. 
			 형식) <typeAlias type = "패키지명을 포함한 전체이름" alias="별칭이름"/>
			 
		-->
		
		<typeAlias type="kr.or.ddit.member.vo.MemberVO" alias ="memberVo"/>
		<typeAlias type="kr.or.ddit.member.vo.ZipVO" alias="zipVo" />
		<typeAlias type="kr.or.ddit.board.vo.BoardVO" alias="boardVo" />
		<typeAlias type="kr.or.ddit.board.vo.ReplyVO" alias="replyVo" />
	</typeAliases>
	
	<!-- DB에 연결할 정보 설정하기 -->
	<environments default="oracleDB">
		<environment id="oracleDB">
			<transactionManager type="JDBC"/>
			<dataSource type="POOLED">
				<property name="driver" value="${driver}"/>
				<property name="url" value="${url}"/>
				<property name="username" value="${user}"/>
				<property name="password" value="${pass}"/>
			</dataSource>
		</environment>
	</environments>
	
	<!-- DB에서 사용되는 SQL문들이 작성된 mepper파일 등록하는 부분 -->
	<mappers>
		<!-- 형식) <mapper resource = "경로명/파일명.xml"/> -->
		 
		 <mapper resource="kr/or/ddit/mybatis/mappers/member-mapper.xml"/>
		 <mapper resource="kr/or/ddit/mybatis/mappers/board-mapper.xml"/>
	</mappers>
</configuration>

 

 

board-mapper

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE mapper
		  PUBLIC "-//mybatis.org/DTD Mapper 3.0//EN"
		  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="board">
	<!-- 동적쿼리 -->
	<sql id="dynamicCondition">
		<where>
			<if test="!(stype == '' or sword == '')">
				${stype} like '%'||#{sword}||'%'
			</if>
		</where>
	</sql>

	<!-- 게시판 리스트 가져오기 3개씩 -->
	<select id="selectByPage" parameterType="map"
		resultType="boardVo">
		select A.* from
		(select rownum as rnum , B.* from
		( select * from boardtab
		<include refid="dynamicCondition" />
		order by num desc ) B 
    <![CDATA[
          where rownum <= #{end}) A
       where A.rnum >= #{start} 
     ]]>
	</select>
	
	<!-- 게시판 글 갯수 구하기 -->
	<select id="getTotalCount" parameterType="map" resultType="int">
		select count(*) from boardtab
		<include refid="dynamicCondition" />
	</select>

	<!-- 글 쓰기 -->			<!--  config에서 alise값을 줘야하 -->
	<insert id="writerBoard" parameterType="boardVo">
		insert into boardtab
		values (
			boardtab_num_seq.nextval,
			#{subject},
			#{writer},
			#{mail},
			#{password},
			#{content},
			0
			#{wip},
			sysdate
		)
	</insert>


	<!-- 글 수정 -->
	<update id="updateBoard" parameterType="boardVo">
	update boardtab set SUBJECT = #{subject},
	MAIL = #{mail}, PASSWORD = #{password},
	CONTENT = #{content}, WIP = #{wip}, WDATE = sysdate
	where NUM = #{num}
	
	</update>


	<!-- 글 삭제 -->
	<delete id="deleteBoard" parameterType="int">
		delete boardtab where NUM = #{num}
	</delete>


	<!-- 조회수 증가 -->
	<update id="updateHit" parameterType="int" >
		update boardtab set HIT = HIT + 1 where NUM = #{num}
	</update>


	<!-- 댓글 쓰기 -->
	<insert id="writerReply" parameterType="replyVo">
		insert into replytab
		values(
			replytab_renum_seq.nextval,
			#{bonum},
			#{name},
			#{cont},
			sysdate
		)
	
	</insert>


	<!-- 댓글 수정 -->
	<update id="updateReply" parameterType="replyVo">
		update replytab 
			set CONT = #{cont}, REDATE = sysdate
			where RENUM = #{renum}
	</update>
	
	
	<!-- 댓글 삭제 -->
	<delete id="deleteReply" parameterType="int">
		delete replytab where RENUM = #{renum}
	</delete>


	<!-- 댓글 리스트 -->
	<select id="selectReply" parameterType="int" resultType="replyVo">
		select * from replytab
		where BONUM = #{bonum}
	</select>

</mapper>

 

js

board.js

board.js 따로 파일 만들어주기

/**
 * 
 */


const listPerPage = () => {
	
	// 검색 대비를 위해서 값을 가지고 와야함
	vtype = $('#stype option:selected').val().trim();
	vword = $('#sword').val().trim();
	
	
	
	// 서버전송
	$.ajax({
		url : `${mypath}/BoardList.do`,
		type : 'post',
		data : JSON.stringify({
			page : currentPage,
			stype : vtype,
			sword : vword
		}),
		success : function(res){
			console.log(res);
			
			//id=result인곳에 출력
		},
		error : function(xhr){
			alert("상태 : " + xhr.status)
		},
		dataType : 'json'
		
	})
	
}

 

 

 

 

최종 결과 화면

'Language > Java' 카테고리의 다른 글

[JAVA] 파일_01 : File_Upload Form  (0) 2024.06.05
[JAVA] $.ajax - LprodTest (Ajax / Non Ajax)  (0) 2024.06.05
[JAVA] $.ajax - jsonTest 코드  (0) 2024.06.04
[JAVA] Cookie 생성, 조회 ,삭제  (0) 2024.06.04
[JAVA] Mybatis-confing / mapper . xml 설정 코드 파일  (0) 2024.05.28
'Language/Java' Related Articles more
Comments