본문 바로가기
ICIA 수업일지

2021.08.24 수업일지(Servlet, Mysql, Spring)

by 주성씨 2021. 8. 24.

- 카카오 지도 검색 서비스를 이용해서 지역검색을 하는 웹을 만들어보겠다. 

- 새로운 프로젝트를 만들어보자.

1. ex06이라는 이름의 다이나믹 웹 프로젝트를 생성하겠다.

2. 아파치 톰캣이 타켓 런타임에 지정되어있는지 확인한다.

3. 피니시를 입력한다.

4. 웹컨텐츠에 main.jsp를 만든다.

5. 웹 메인페이지 틀을 만들자.

- main.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script
	src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>이주성의 지역관리 시스템</title>
<style>
@font-face {
	font-family: 'SpoqaHanSansNeo-Regular';
	src:
		url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Regular.woff')
		format('woff');
	font-weight: normal;
	font-style: normal;
}

body {
	font-family: 'SpoqaHanSansNeo-Regular';
	background: rgb(233, 242, 251);
}

#container {
	width: 960px;
	border: 1px solid rgb(233, 242, 251);
	margin: 0 auto;
	padding: 20px;
	background: white;
}

#header {
	padding: 20px;
	border: 1px solid rgb(36, 117, 194);
	background: rgb(36, 117, 194);
}

#center {
	padding: 20px;
	border: 1px solid black;
	margin-top: 10px;
	margin-bottom: 10px;
}

#footer {
	padding: 20px;
	border: 1px solid rgb(36, 117, 194);
	color: white;
	background: rgb(36, 117, 194);
}

#menu {
	overflow: hidden;
	border-bottom: 1px dotted black;
	background: rgb(36, 117, 194);
}

#menu h4 {
	float: left;
	width: 150px;
	margin-left: 20px;
	margin-right: 20px;
}

h1, h3 {
	text-align: center;
}

#content {
	border: 1px solid black;
	padding: 10px;
	margin-top: 10px;
}

a {
	text-decoration: none;
	color: white;
	padding: 10px;
}

a:hover {
	cursor: pointer;
	text-decoration: none;
	background: rgb(32, 104, 172);
	color: white;
	padding: 10px;
	border-radius: 10px;
}

a:VISITED {
	color: white;
}
</style>
</head>
<body>
	<div id="container">
		<div id="header">
			<h1>
				<a href="/">지역검색 시스템</a>
			</h1>
		</div>
		<div id="center">
			<div id="menu">
				<h4>
					<a href="">🗺️지역관리</a>
				</h4>
				<h4>
					<a href="">🗺️지역검색</a>
				</h4>
			</div>
			<div id="contents"></div>
		</div>
		<div id="footer">
			<h3>Copyright 2021. 지역검색 시스템 All rights reserved.</h3>
		</div>
	</div>
</body>
</html>

 

출력물

 

- 컨트롤러 역할을 하는 메인 서블릿을 만들자.

- new mainservlet.java

package controller;

import java.io.IOException;

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

@WebServlet("/")
public class MainServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		RequestDispatcher dis = request.getRequestDispatcher("/main.jsp");
		request.setAttribute("pageName", "/about.jsp");
		dis.forward(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

	}

}

ㄴ 메인페이지에서 지역관리 란으로 들어갈 수 있게, 보여줄 수 있게 pageName으로 about 페이지를 넣어주도록 하자.

 

- new about.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<h1>[지역관리]</h1>

 

- main.jsp

<body>
	<div id="container">
		<div id="header">
			<h1>
				<a href="/">지역검색 시스템</a>
			</h1>
		</div>
		<div id="center">
			<div id="menu">
				<h4>
					<a href="/local/list">🗺️지역관리</a>
				</h4>
				<h4>
					<a href="/local/search">🗺️지역검색</a>
				</h4>
			</div>
			<div id="contents">
			<jsp:include page="${pageName}"/>
			</div>
		</div>
		<div id="footer">
			<h3>Copyright 2021. 지역검색 시스템 All rights reserved.</h3>
		</div>
	</div>
</body>

 

- 지역, 지도 관련 각 페이지를 서버에 요청하기 위한 서블릿을 만들어보자.

- new bookservlet.java

package controller;

import java.io.IOException;

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

@WebServlet(value={"/local/list","/local/search","/local/insert","/local/read","/local/delete","/local/update"})
public class LocalServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		switch (request.getServletPath()) {
		case "/local/list":
			RequestDispatcher dis = request.getRequestDispatcher("/main.jsp");
			request.setAttribute("pageName", "/local/list.jsp");
			dis.forward(request, response);
			break;

		case "/local/search":
			dis = request.getRequestDispatcher("/main.jsp");
			request.setAttribute("pageName", "/local/search.jsp");
			dis.forward(request, response);
			break;
		}
	}


	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

	}

}

 

- new list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<h1>&lt; 🗺️지역관리 &gt;</h1>

 

- new search.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<h1>&lt; 🗺️지역검색 &gt;</h1>

 

출력물

 

- 지역 검색 페이지를 완성해보겠다.

- search.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<h1>&lt; 🗺️지역검색 &gt;</h1>
<div id="locals"></div>

<script>
	getList();
	function getList() {
		$.ajax({
			type : 'get',
			url : "https://dapi.kakao.com/v2/local/search/keyword.json",
			dataType : 'json',
			headers : {
				"Authorization" : "KakaoAK e894d8fa1f666b36374484eab825e5c8"
			},
			data : {
				"query" : "카카오"
			},
			success : function(data) {
				alert(data.meta.total_count);
			}
		});
	}
</script>

 

- 이제 템플릿을 이용해 간단하게 데이터를 가지고와서 출력해보겠다.

- search.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<h1>&lt; 🗺️지역검색 &gt;</h1>
<div id="locals"></div>
<script id="temp" type="text/x-handlebars-template">
{{#each documents}}
<div class="item">
	<div class="info">
		<div class="name">{{place_name}}</div>
	</div>
</div>
{{/each}}
</script>
<script>
	getList();
	function getList() {
		$.ajax({
			type : 'get',
			url : "https://dapi.kakao.com/v2/local/search/keyword.json",
			dataType : 'json',
			headers : {
				"Authorization" : "KakaoAK e894d8fa1f666b36374484eab825e5c8"
			},
			data : {
				"query" : "카카오"
			},
			success : function(data) {
				var temp = Handlebars.compile($('#temp').html());
				$('#locals').html(temp(data));
			}
		});
	}
</script>

 

출력물

 

- CSS 와 나머지 출력할 데이터를 넣어보자.

- 검색할 수 있는 란을 만들자.

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<style>
table {
	width: 910px;
	border-collapse: collapse;
}

td, th {
	border-bottom: 1px solid gray;
	padding: 5px;
	font-size: 15px;
}

.row:hover {
	cursor: pointer;
	background-color: rgb(36, 117, 194);
	color: white;
}

#condition {
	border-bottom: 1px solid rgb(36, 117, 194);
	margin-bottom: 5px;
	padding-bottom: 10px;
}
</style>
<h1>&lt; 🗺️지역검색 &gt;</h1>
<div id="condition">
	검색 : <input type="text" id="query" value="카카오" />
</div>
<table id="locals"></table>
<script id="temp" type="text/x-handlebars-template">
<tr>
	<th>Place Name</th>
	<th>Address Name</th>
	<th>Phone</th>
</tr>
{{#each documents}}
<tr class="row">
	<td class="name">{{place_name}}</td>
	<td class="address">{{address_name}}</td>
	<td class="phone">{{phone}}</td>
</tr>
{{/each}}
</script>
<script>
	getList();

	$('#query').on('keypress', function(e) {
		if (e.keyCode == 13) {
			getList();
		}
	})

	function getList() {
		var query = $('#query').val();
		$.ajax({
			type : 'get',
			url : "https://dapi.kakao.com/v2/local/search/keyword.json",
			dataType : 'json',
			headers : {
				"Authorization" : "KakaoAK e894d8fa1f666b36374484eab825e5c8"
			},
			data : {
				"query" : query
			},
			success : function(data) {
				var temp = Handlebars.compile($('#temp').html());
				$('#locals').html(temp(data));
			}
		});
	}
</script>

 

출력물

 

- 총 몇건이 검색되는지 확인해보자.

<div id="condition">
	검색 : <input type="text" id="query" value="카카오" />
	/ 총 <span id="total"></span>건
</div>
			success : function(data) {
				var temp = Handlebars.compile($('#temp').html());
				$('#locals').html(temp(data));
				$('#total').html(data.meta.total_count);
			}

 

- 더보기 버튼 추가

</script>
<hr />
<button id="more">더보기</button>
<script>
	var page = 1;
	getList();

	$('#query').on('keypress', function(e) {
		if (e.keyCode == 13) {
			page = 1;
			$('#locals').html('');
			getList();
		}
	})

	$('#more').on('click', function() {
		page++;
		getList();
	})
			data : {
				"query" : query,
				"page" : page,
				"size" : 5
			},
			success : function(data) {
				var temp = Handlebars.compile($('#temp').html());
				$('#locals').append(temp(data));
				$('#total').html(data.meta.total_count);
				if (data.meta.is_end) {
					$('#more').attr('disabled', true);
				} else {
					$('#more').attr('disabled', false);
				}
			}

출력물

 

- 지도출력해보도록 하자.

- 지도의 위도 경도를 확인하여 보기 버튼을 누르면 얼럿으로 위도 경로를 확인할 수 있도록 한다.

<table id="locals">
	<tr style="text-align: center;">
		<th>Place Name</th>
		<th>Address Name</th>
		<th>Phone</th>
		<th>Location</th>
	</tr>
</table>
<script id="temp" type="text/x-handlebars-template">
{{#each documents}}
<tr class="row">
	<td class="name">{{place_name}}</td>
	<td class="address">{{address_name}}</td>
	<td class="phone">{{phone}}</td>
	<td class="location" x="{{x}}" y="{{y}}">보기</td>
</tr>
{{/each}}
</script>
<hr />
<button id="more">더보기</button>
<script>
	var page = 1;
	getList();

	$('#locals').on('click','.row .location', function(){
		var x = $(this).attr("x");
		var y = $(this).attr("y");
		alert(x+" / "+y);
	})

 

 

출력물

 

- 지도 보기를 라잇박스를 통해서 볼 수 있도록 하자.

- search.jsp

#darken-background {
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	height: 100%;
	display: none;
	background: rgba(0, 0, 0, 0.5);
	z-index: 10000;
	overflow-y: scroll;
}

#lightbox {
	width: 700px;
	margin: 20px auto;
	padding: 15px;
	border: 1px solid #333333;
	border-radius: 5px;
	background: white;
	box-shadow: 0px 5px 5px rgba(34, 25, 25, 0.4);
	text-align: center;
}
<button id="more">더보기</button>
<!-- 지도를 출력하기위한 lightbox -->
<div id="darken-background">
	<div id="lightbox">
		<div>
			<button id="close">닫기</button>
		</div>
	</div>
</div>
<script>
	var page = 1;
	getList();

	$('#locals').on('click', '.row .location', function() {
		var x = $(this).attr("x");
		var y = $(this).attr("y");
		$('#darken-background').show();
	})

	$('#close').on('click', function() {
		$('#darken-background').hide();
	})

 

출력물

 

- 지도를 담을 영역

<!-- 지도를 출력하기위한 lightbox -->
<div id="darken-background">
	<div id="lightbox">
		<div>
			<div id="map"
				style="width: 500px; height: 500px; border: 1px solid black;"></div>
			<button id="close">닫기</button>
		</div>
	</div>
</div>

https://apis.map.kakao.com/web/

 

- 실제 지도를 띄우는 자바스크립 api

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다."></script>

 

- 지도를 띄우는 코드

	$('#locals').on('click', '.row .location', function() {
		var x = $(this).attr("x");
		var y = $(this).attr("y");
		$('#darken-background').show();
		var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
		var options = { //지도를 생성할 때 필요한 기본 옵션
			center : new kakao.maps.LatLng(y, x), //지도의 중심좌표.
			level : 3
		//지도의 레벨(확대, 축소 정도)
		};

		var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴
	})

 

출력물

 

- 이제 내가 보기를 선택한 주소의 마커와 해당 주소의 상호명 및 전화번호가 웹에 출력될 수 있게 하겠다.

	$('#locals').on('click', '.row .location', function() {
		var item = $(this).parent().parent();
		var x = $(this).attr("x");
		var y = $(this).attr("y");
		var place = item.find(".name").html();
		var tel = item.find(".phone").html();
		$('#darken-background').show();
		var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
		var options = { //지도를 생성할 때 필요한 기본 옵션
			center : new kakao.maps.LatLng(y, x), //지도의 중심좌표.
			level : 3
		//지도의 레벨(확대, 축소 정도)
		};

		var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴
		// 마커 생성
		var marker = new kakao.maps.Marker({
			position : new kakao.maps.LatLng(y, x)
		});
		marker.setMap(map);
		
		// 마커에 hover시 해당 상호명과 전화번호 출력
		var str = "<div style='padding:5px;font-size:12px;'>";
		str += place + "<br>" + tel;
		str += "</div>";
		
		var info = new kakao.maps.InfoWindow({
			content : str
		});
		
		kakao.maps.event.addListener(marker, "mouseover", function() {
			info.open(map, marker);
		});
		kakao.maps.event.addListener(marker, "mouseout", function() {
			info.close(map, marker);
		});
	})

 

출력물

 

- 일반지도와 스카이뷰로 지도 타입을 변경할 수 있고 지도 확대 축소 컨트롤을 추가하였다.

		// 일반 지도와 스카이뷰로 지도 타입을 전환할 수 있는 지도타입 컨트롤을 생성합니다
		var mapTypeControl = new kakao.maps.MapTypeControl();

		// 지도에 컨트롤을 추가해야 지도위에 표시됩니다
		// kakao.maps.ControlPosition은 컨트롤이 표시될 위치를 정의하는데 TOPRIGHT는 오른쪽 위를 의미합니다
		map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);

		// 지도 확대 축소를 제어할 수 있는  줌 컨트롤을 생성합니다
		var zoomControl = new kakao.maps.ZoomControl();
		map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);

 

출력물

 

- 카카오에서 가지고온 정보를 내 DB에 저장하는 작업을 하도록 하겠다.

- html

<table>
	<tr style="text-align: center;">
		<td>Place Name</td>
		<td>Address Name</td>
		<td>Phone</td>
		<td>Location</td>
		<td>Save</td>
	</tr>
</table>
<table id="locals">
</table>
<script id="temp" type="text/x-handlebars-template">
{{#each documents}}
<tr class="row">
	<td class="name">{{place_name}}</td>
	<td class="address">{{address_name}}</td>
	<td class="phone">{{phone}}</td>
	<td class="location" x="{{x}}" y="{{y}}">보기</td>
	<td class="save" x="{{x}}" y="{{y}}" key="{{id}}">저장</td>
</tr>
{{/each}}
</script>

 

- js

	// 저장란을 클릭할 경우
	$('#locals').on('click', '.row .save', function() {
		var x = $(this).attr("x");
		var y = $(this).attr("y");
		var id = $(this).attr("key");
		var name = $(this).parent().find(".name").html();
		var phone = $(this).parent().find(".phone").html();
		var address = $(this).parent().find(".address").html();
		if (!confirm("등록하시겠습니까?"))
			return;
	})

 

- back to mysql

- 입력할 테이블을 만들어보자.

create table local (
	id nvarchar(100) primary key,
    name nvarchar(200) not null,
    phone nvarchar(20),
    address nvarchar(200),
    x double,
    y double,
    wdate datetime default now()
);

디스크립션

- back to 이클립스

- database connection 을 위한 파일을 어제 작업한 것에서 model\에 넣는다.

위치

package model;

import java.sql.Connection;
import java.sql.DriverManager;

public class Database {
	public static Connection CON;
	static {
		try {
			Class.forName("com.mysql.jdbc.Driver");
			CON = DriverManager.getConnection("jdbc:mysql://localhost:3306/webdb", "web", "pass");
			System.out.println("접속성공");
		} catch (Exception e) {
			System.out.println("접속실패:" + e.toString());
		}
	}
}

 

- new LocalVO.java

package model;

import java.util.Date;

public class LocalVO {
	private String id;
	private String name;
	private String phone;
	private String address;
	private Double x;
	private Double y;
	private Date wdate;
	
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getPhone() {
		return phone;
	}
	public void setPhone(String phone) {
		this.phone = phone;
	}
	public String getAddress() {
		return address;
	}
	public void setAddress(String address) {
		this.address = address;
	}
	public Double getX() {
		return x;
	}
	public void setX(Double x) {
		this.x = x;
	}
	public Double getY() {
		return y;
	}
	public void setY(Double y) {
		this.y = y;
	}
	public Date getWdate() {
		return wdate;
	}
	public void setWdate(Date wdate) {
		this.wdate = wdate;
	}
	
	@Override
	public String toString() {
		return "LocalVO [id=" + id + ", name=" + name + ", phone=" + phone + ", address=" + address + ", x=" + x
				+ ", y=" + y + ", wdate=" + wdate + "]";
	}
	
}

 

- new LocalDAO.java

package model;

import java.sql.PreparedStatement;

public class LocalDAO {
	//1. 서버로부터 DB로 데이터 등록 메서드
	public void insert(LocalVO vo){
		try {
			String sql = "insert into local(id,name,address,phone,x,y) values(?,?,?,?,?,?)";
			PreparedStatement ps = Database.CON.prepareStatement(sql);
			ps.setString(1, vo.getId());
			ps.setString(2, vo.getName());
			ps.setString(3, vo.getAddress());
			ps.setString(4, vo.getPhone());
			ps.setDouble(5, vo.getX());
			ps.setDouble(6, vo.getY());
			ps.execute();
		} catch (Exception e) {
			System.out.println("insert : "+e.toString());
		}
	}
}

 

- search.jsp

	// 저장란을 클릭할 경우
	$('#locals').on('click', '.row .save', function() {
		var x = $(this).attr("x");
		var y = $(this).attr("y");
		var id = $(this).attr("key");
		var name = $(this).parent().find(".name").html();
		var phone = $(this).parent().find(".phone").html();
		var address = $(this).parent().find(".address").html();
		if (!confirm("등록하시겠습니까?"))
			return;

		$.ajax({
			type : 'post',
			url : '/local/insert',
			data : {
				'id' : id,
				'name' : name,
				'phone' : phone,
				'address' : address,
				'x' : x,
				'y' : y
			},
			success : function() {
				alert("등록 성공");
			}
		})
	})

 

- localservlet.java

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		LocalVO vo = new LocalVO();
		vo.setId(request.getParameter("id"));
		vo.setName(request.getParameter("name"));
		vo.setPhone(request.getParameter("phone"));
		vo.setAddress(request.getParameter("address"));
		vo.setX(Double.parseDouble(request.getParameter("x")));
		vo.setY(Double.parseDouble(request.getParameter("y")));
		System.out.println(vo.toString());
	}

 

vo에 저장된 데이터를 콘솔창에서 확인가능하다.

 

- localservlet.java

package controller;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
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 model.LocalDAO;
import model.LocalVO;

@WebServlet(value={"/local/list","/local/search","/local/insert","/local/read","/local/delete","/local/update"})
public class LocalServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	LocalDAO dao = new LocalDAO(); // new
       
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		switch (request.getServletPath()) {
		case "/local/list":
			RequestDispatcher dis = request.getRequestDispatcher("/main.jsp");
			request.setAttribute("pageName", "/local/list.jsp");
			dis.forward(request, response);
			break;

		case "/local/search":
			dis = request.getRequestDispatcher("/main.jsp");
			request.setAttribute("pageName", "/local/search.jsp");
			dis.forward(request, response);
			break;
		}
	}


	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		LocalVO vo = new LocalVO();
		vo.setId(request.getParameter("id"));
		vo.setName(request.getParameter("name"));
		vo.setPhone(request.getParameter("phone"));
		vo.setAddress(request.getParameter("address"));
		vo.setX(Double.parseDouble(request.getParameter("x")));
		vo.setY(Double.parseDouble(request.getParameter("y")));
		System.out.println(vo.toString());
		dao.insert(vo); // new
	}

}

 

DB에서 확인가능하다.

 

- id가 중복되는지 확인하기 위한 해당 id유무를 확인하자.

- localdao.java

	// 2. id가 중복되는지 확인하기 위한 해당 id유무를 확인하자.
	public int idCheck(String id) {
		int check = 0;
		try {
			String sql = "select * from local where id = ?";
			PreparedStatement ps = Database.CON.prepareStatement(sql);
			ps.setString(1, id);
			ResultSet rs = ps.executeQuery();
			if (rs.next()) {
				check = 1;
			}
		} catch (Exception e) {
			System.out.println("idCheck : " + e.toString());
		}

		return check;
	}

 

- localservlet.java

	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		PrintWriter out = response.getWriter();

		LocalVO vo = new LocalVO();
		vo.setId(request.getParameter("id"));
		vo.setName(request.getParameter("name"));
		vo.setPhone(request.getParameter("phone"));
		vo.setAddress(request.getParameter("address"));
		vo.setX(Double.parseDouble(request.getParameter("x")));
		vo.setY(Double.parseDouble(request.getParameter("y")));
		System.out.println(vo.toString());
		int check = dao.idCheck(vo.getId());
		if (check == 0) {
			dao.insert(vo);
		}
		out.println(check);
	}

 

- search.jsp

		$.ajax({
			type : 'post',
			url : '/local/insert',
			data : {
				'id' : id,
				'name' : name,
				'phone' : phone,
				'address' : address,
				'x' : x,
				'y' : y
			},
			success : function(check) {
				if (check==1) {
					alert("이미 등록된 데이터입니다.")
				} else {
					alert("등록 성공");
				}
			}
		})

 

출력물

 

- 데이터 목록 출력 메서드

- 어레이리스트를 제이손으로 바꾸지 말고 애초에 제이손어레이로 넘기도록 해보자.

- bookdao.java

	// 3. 데이터 목록 출력 메서드
	public JSONArray list() {
		JSONArray array = new JSONArray();
		try {
			String sql = "select * from local order by wdate desc";
			PreparedStatement ps = Database.CON.prepareStatement(sql);
			ResultSet rs = ps.executeQuery();
			while (rs.next()) {
				JSONObject obj = new JSONObject();
				obj.put("id", rs.getString("id"));
				obj.put("name", rs.getString("name"));
				obj.put("phone", rs.getString("phone"));
				obj.put("address", rs.getString("address"));
				obj.put("x", rs.getString("x"));
				obj.put("y", rs.getString("y"));
				obj.put("wdate", rs.getString("wdate"));
				array.add(obj);
			}
		} catch (Exception e) {
			System.out.println("list : " + e.toString());
		}

		return array;
	}

 

- bookservlet

@WebServlet(value = { "/local/list","/local/list.json", "/local/search", "/local/insert", "/local/read", "/local/delete",
		"/local/update" })
public class LocalServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	LocalDAO dao = new LocalDAO();

	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setContentType("text/html;charset=UTF-8");
		PrintWriter out = response.getWriter();
		
		switch (request.getServletPath()) {
		case "/local/list.json":
			out.println(dao.list());
			break;

 

위와 같이 웹에서 제이손 형태의 데이터를 확인할 수 있다.

 

- 총 갯수를 sql문으로 가지고 와서 object에 넣어서 리턴해보자.

	// 3. 데이터 목록 출력 메서드
	public JSONObject list() {
		JSONArray array = new JSONArray();
		JSONObject object = new JSONObject();
		try {
			int total =0;
			String sql = "select count(*) from local";
			PreparedStatement ps = Database.CON.prepareStatement(sql);
			ResultSet rs = ps.executeQuery();
			if(rs.next()){
				total=rs.getInt("count(*)");
			}
			object.put("total", total);
			
			sql = "select * from local order by wdate desc";
			ps = Database.CON.prepareStatement(sql);
			rs = ps.executeQuery();
			while (rs.next()) {
				JSONObject obj = new JSONObject();
				obj.put("id", rs.getString("id"));
				obj.put("name", rs.getString("name"));
				obj.put("phone", rs.getString("phone"));
				obj.put("address", rs.getString("address"));
				obj.put("x", rs.getString("x"));
				obj.put("y", rs.getString("y"));
				obj.put("wdate", rs.getString("wdate"));
				array.add(obj);
			}
			object.put("array", array);
		} catch (Exception e) {
			System.out.println("list : " + e.toString());
		}

		return object;
	}

 

total을 위와 같이 확인할 수 있다.

 

- 지역 관리 페이지에서 DB에 저장한 데이터를 출력할 수 있도록 하겠다. 위에서 담은 json 데이터를 ajax으로 받아오도록 하자. 더해서 데이터의 id로 삭제할 수 있는 서블릿, 메서드를 만들어보도록 하겠다.

- list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<style>
table {
	width: 910px;
	border-collapse: collapse;
}

td, tr {
	border-bottom: 1px solid gray;
	padding: 5px;
	font-size: 15px;
}

.row:hover {
	cursor: pointer;
	background-color: rgb(36, 117, 194);
	color: white;
}

#condition {
	border-bottom: 1px solid rgb(36, 117, 194);
	margin-bottom: 5px;
	padding-bottom: 10px;
}

#darken-background {
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	height: 100%;
	display: none;
	background: rgba(0, 0, 0, 0.5);
	z-index: 10000;
	overflow-y: scroll;
}

#lightbox {
	width: 700px;
	margin: 20px auto;
	padding: 15px;
	border: 1px solid #333333;
	border-radius: 5px;
	background: white;
	box-shadow: 0px 5px 5px rgba(34, 25, 25, 0.4);
	text-align: center;
}

#close {
	background-color: rgb(36, 117, 194);
	color: white;
	padding: 5px;
	border-radius: 5px;
}
</style>
<h1>&lt; 🗺️지역관리 &gt;</h1>
<div id="condition">
	검색 : <input type="text" id="query" value="" /> / 총 <span id="total">0</span>건
</div>
<table>
	<tr>
		<td>Place Name</td>
		<td>Address Name</td>
		<td>Phone</td>
		<td>Location</td>
		<td>Save</td>
	</tr>
</table>
<table id="locals">
</table>
<script id="temp" type="text/x-handlebars-template">
{{#each array}}
<tr class="row">
	<td class="name">{{name}}</td>
	<td class="address">{{address}}</td>
	<td class="phone">{{phone}}</td>
	<td class="location" x="{{x}}" y="{{y}}">보기</td>
	<td class="delete" x="{{x}}" y="{{y}}" key="{{id}}">삭제</td>
</tr>
{{/each}}
</script>
<script>
	getList();

	$('#locals').on('click', '.row .delete', function() {
		var id = $(this).attr("key");
		if (!confirm(id+" 을(를) 삭제하시겠습니까?"))
			return;
		$.ajax({
			type : 'get',
			url : '/local/delete',
			data : {
				'id' : id
			},
			success : function() {
				alert("삭제 성공");
				getList();
			}
		})
	})

	function getList() {
		$.ajax({
			type : 'get',
			url : '/local/list.json',
			dataType : 'json',
			success : function(data) {
				var temp = Handlebars.compile($('#temp').html());
				$('#locals').html(temp(data));
				$('#total').html(temp(data.total));
			}
		})
	}
</script>

 

- localservlet.java

@WebServlet(value = { "/local/list","/local/list.json", "/local/search", "/local/insert", "/local/read", "/local/delete",
		"/local/update" })
public class LocalServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	LocalDAO dao = new LocalDAO();

	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setContentType("text/html;charset=UTF-8");
		PrintWriter out = response.getWriter();
		
		switch (request.getServletPath()) {
		case "/local/delete":
			dao.delete(request.getParameter("id"));
			break;
		case "/local/list.json":
			out.println(dao.list());
			break;

 

- localdao.java

	// 4. 데이터 삭제 메서드
	public void delete(String id){
		try {
			String sql = "delete from local where id=?";
			PreparedStatement ps = Database.CON.prepareStatement(sql);
			ps.setString(1, id);
			ps.execute();
		} catch (Exception e) {
			System.out.println("delete : "+e.toString());
		}
	}

 

출력물 gif

 

- 이제 read 페이지로 들어가서 데이터를 불러오겠다.

- localdao.java

	// 5. 지역 데이터 하나만 정보 불러오는 메서드
	public LocalVO read(String id){
		LocalVO vo = new LocalVO();
		try {
			String sql = "select * from local where id=?";
			PreparedStatement ps = Database.CON.prepareStatement(sql);
			ps.setString(1, id);
			ResultSet rs = ps.executeQuery();
			if(rs.next()){
				vo.setId(rs.getString("id"));
				vo.setName(rs.getString("name"));
				vo.setAddress(rs.getString("address"));
				vo.setPhone(rs.getString("phone"));
				vo.setX(rs.getDouble("x"));
				vo.setY(rs.getDouble("y"));
			}
		} catch (Exception e) {
			System.out.println("read : "+e.toString());
		}
		return vo;
	}

 

- localservlet.java

		case "/local/read":
			String id = request.getParameter("id");
			dis = request.getRequestDispatcher("/main.jsp");
			request.setAttribute("vo", dao.read(id));
			request.setAttribute("pageName", "/local/read.jsp");
			dis.forward(request, response);
			break;
		}

 

- new read.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<script type="text/javascript"
	src="//dapi.kakao.com/v2/maps/sdk.js?appkey=437cd2932e9baa6f039994ed90c57549"></script>
<style>
form[name="frm"]{
	overflow: hidden;
}
#map{
	float: left;
	border: 1px solid black;
}
.info{
	float: left;
	width: 590px;
	padding: 10px;
}
.control{
	float: none;
}
input[type="text"]{
	width: 100%;
}
</style>
<h1>&lt; 🗺️지역정보 &gt;</h1>
<form name="frm">
	<div id="map" style="width: 300px; height: 300px;"></div>
	<div class="info">
		주소 코드<input type="text" name="id" value="${vo.id}" readonly />
		<hr />
		상호 이름<input type="text" name="name" value="${vo.name}" />
		<hr />
		상호 주소<input type="text" name="address" value="${vo.address}" />
		<hr />
		전화 번호<input type="text" name="phone" value="${vo.phone}" />
		<hr />
	</div>
	<div class="control" style="text-align: center">
		<input type="submit" value="정보수정" /> <input type="reset" value="수정취소" />
	</div>
</form>
<script>
	var x = ${vo.x};
	var y = ${vo.y};
	console.log(x, y);
	var container = document.getElementById('map');
	var options = {
		center : new kakao.maps.LatLng(y, x),
		level : 3
	};

	var map = new kakao.maps.Map(container, options);
	
	// 마커 생성
	var marker = new kakao.maps.Marker({
		position : new kakao.maps.LatLng(y, x)
	});
	marker.setMap(map);
	
	// 일반 지도와 스카이뷰로 지도 타입을 전환할 수 있는 지도타입 컨트롤을 생성합니다
	var mapTypeControl = new kakao.maps.MapTypeControl();

	// 지도에 컨트롤을 추가해야 지도위에 표시됩니다
	// kakao.maps.ControlPosition은 컨트롤이 표시될 위치를 정의하는데 TOPRIGHT는 오른쪽 위를 의미합니다
	map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);

	// 지도 확대 축소를 제어할 수 있는  줌 컨트롤을 생성합니다
	var zoomControl = new kakao.maps.ZoomControl();
	map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
</script>

 

출력물 gif

 

ex06.zip
1.09MB

저작자표시

'ICIA 수업일지' 카테고리의 다른 글

2021.08.26 수업일지(Servlet, Spring, Mysql)  (0) 2021.08.26
2021.08.25 수업일지(Servlet, Spring, Mysql)  (0) 2021.08.25
2021.08.23 수업일지(Servlet, Spring, Mysql)  (0) 2021.08.23
2021.08.20 수업일지(Spring, Servlet)  (0) 2021.08.20
2021.08.19 수업일지(Spring, Servlet)  (0) 2021.08.19

관련글

티스토리툴바