안녕하세요 ~ 오늘은 미세먼지에 대해서 설명해드리겠습니다. 백 부분에 대해서 좀 더 설명해드릴 예정입니다 ~ ლ(╹◡╹ლ)

 

제일 먼저 테이블에 있는 내용과 동일하게 작성한 

 

AirqualityDTO 먼저 보여드리겠습니다.

package com.project.airquality;

public class AirqualityDTO {
	private String stationname; //측정소 이름
	private String datatime;	//데이터 시간
	private String pm10value;		//미세먼지
	private String pm25value;		//초미세먼지
	
	public AirqualityDTO() {
		super();
	}

	public AirqualityDTO(String stationname, String datatime, String pm10value, String pm25value) {
		super();
		this.stationname = stationname;
		this.datatime = datatime;
		this.pm10value = pm10value;
		this.pm25value = pm25value;
	}

	@Override
	public String toString() {
		return "AirqualityDTO [stationname=" + stationname + ", datatime=" + datatime + ", pm10value=" + pm10value
				+ ", pm25value=" + pm25value + "]";
	}

	public String getStationname() {
		return stationname;
	}

	public void setStationname(String stationname) {
		this.stationname = stationname;
	}

	public String getDatatime() {
		return datatime;
	}

	public void setDatatime(String datatime) {
		this.datatime = datatime;
	}

	public String getPm10value() {
		return pm10value;
	}

	public void setPm10value(String pm10value) {
		this.pm10value = pm10value;
	}

	public String getPm25value() {
		return pm25value;
	}

	public void setPm25value(String pm25value) {
		this.pm25value = pm25value;
	}
	
	
	
}

 

AirqualityController 입니다.

package com.project.airquality;

import java.io.IOException;
import java.time.LocalDate;
import java.time.LocalTime;
import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import com.project.station.StationDTO;
import com.project.station.StationService;
import com.project.weather.WeatherUtil;

@Controller
public class AirqualityController {
	AirqualityAPIPull pull;
	StationService stationservice;
	AirqualityService airqualityService;
	
	@Autowired
	public AirqualityController(AirqualityAPIPull pull, StationService stationservice,
			AirqualityService airqualityService) {
		super();
		this.pull = pull;
		this.stationservice = stationservice;
		this.airqualityService = airqualityService;
	}
	
	@RequestMapping("/airquality/getDataDust.do")
	public String WeathergetData(String stationId, String path,Model model) throws IOException{
		String result = pull.GetAPIDataDust();
		airqualityService.delete();
		List<AirqualityDTO> dustList = pull.DataSaveDust(result);
		for (int i = 0; i < dustList.size(); i++) {
			airqualityService.insert(dustList.get(i));
		}
		return "redirect:/monitoring/main?stationId="+stationId;
	}
	
	@RequestMapping("/airquality/getDataDustWeather.do")
	public String WeathergetData2(String stationId, String path,Model model) throws IOException{
		String result = pull.GetAPIDataDust();
		airqualityService.delete();
		List<AirqualityDTO> dustList = pull.DataSaveDust(result);
		for (int i = 0; i < dustList.size(); i++) {
			airqualityService.insert(dustList.get(i));
		}
		return "redirect:/weather/getlistDust.do?stationId="+stationId;
	}
	
}

 

AirqualityDAO입니다 ~

package com.project.airquality;

import java.util.List;

import com.project.station.StationDTO;

public interface AirqualityDAO {
	List<AirqualityDTO> readList(String statilonname);
	int insert(AirqualityDTO dto);
	int delete();
	AirqualityDTO read(String stationname);
	List<AirqualityDTO> allReadList();
}

 

AirqualityDAOImpl 입니다 ~

package com.project.airquality;

import java.util.HashMap;
import java.util.List;

import org.apache.ibatis.session.SqlSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;

@Repository
public class AirqualityDAOImpl implements AirqualityDAO{
	SqlSession sqlSession;
	
	@Autowired
	public AirqualityDAOImpl(SqlSession sqlSession) {
		super();
		this.sqlSession = sqlSession;
	}
	
	@Override
	public List<AirqualityDTO> readList(String stationname) {
		return sqlSession.selectList("com.project.airquality.select", stationname);
	}

	@Override
	public int insert(AirqualityDTO dto) {
		return sqlSession.insert("com.project.airquality.insert", dto);
	}

	@Override
	public int delete() {
		return sqlSession.delete("com.project.airquality.delete");
	}

	@Override
	public AirqualityDTO read(String stationname) {
		return sqlSession.selectOne("com.project.airquality.read", stationname);
	}

	@Override
	public List<AirqualityDTO> allReadList() {
		return sqlSession.selectList("com.project.airquality.allreadlist");
	}

}

 

AirqualityService 입니다.

package com.project.airquality;

import java.util.List;

import com.project.station.StationDTO;

public interface AirqualityService {
	List<AirqualityDTO> airqualityList(String stationname);
	int insert(AirqualityDTO dto);
	int delete();
	AirqualityDTO read(StationDTO station);
	List<AirqualityDTO> allReadList();
}

 

AirqualityServiceImpl 입니다.

package com.project.airquality;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.project.station.StationDTO;

@Service
public class AirqualityServiceImpl implements AirqualityService {
	AirqualityDAO dao;

	@Autowired
	public AirqualityServiceImpl(AirqualityDAO dao) {
		super();
		this.dao = dao;
	}

	@Override
	public int insert(AirqualityDTO dto) {
		return dao.insert(dto);
	}

	@Override
	public List<AirqualityDTO> airqualityList(String stationname) {
		return dao.readList(stationname);
	}

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

	@Override
	public AirqualityDTO read(StationDTO station) {
		String stationname = "";
		double lon = Double.parseDouble(station.getMap_longtude());
		double lat = Double.parseDouble(station.getMap_latitude());
		String mapaddr = station.getAddr_detail().substring(0,3);
		if(mapaddr.equals("한림읍")) { //주소에서 한번 거름
			stationname = "한림읍";
		}else if(mapaddr.equals("성산읍")){
			stationname = "성산읍";
		}else if(mapaddr.equals("대정읍")){
			stationname = "대정읍";
		}else if(mapaddr.equals("애월읍")){
			stationname = "애월읍";
		}else if(mapaddr.equals("남원읍")){
			stationname = "남원읍";
		}else if(mapaddr.equals("조천읍")){
			stationname = "조천읍";
		}else { //나머지는 좌표로 대략적으로
			if(lon<=126.22) {
				if(lat<33.28) {
					stationname = "대정읍";
				}else {
					stationname = "고산리";
				}
			}else if(lon<=126.27) {
				if(lat<=33.28) {
					stationname = "대정읍";
				}else if(lat<=33.38) {
					stationname = "고산리";
				}else {
					stationname = "한림읍";
				}
			}else if(lat<=33.33) {
				if(lon<=126.37) {
					stationname = "대정읍";
				}else if(lon<=126.54) {
					stationname = "강정동";
				}else if(lon<=126.67) {
					stationname = "동홍동";
				}else {
					stationname = "남원읍";
				}
			}else if(lat>33.33) {
				if(lon<=126.30) {
					stationname = "한림읍";
				}else if(lat<=33.38 && lon<126.37) {
					stationname = "한림읍";
				}else if(lat>33.38 && lon<126.37) {
					stationname = "애월읍";
				}else if(lon<126.42) {
					stationname = "애월읍";
				}else if(lon<126.49) {
					stationname = "노형로";
				}else if(lon<126.53) {
					stationname = "연동";
				}else if(lon<126.55) {
					stationname = "이도동";
				}else if(lon<126.62) {
					stationname = "화북동";
				}else if(lon<126.82) {
					stationname = "조천읍";
				}else {
					stationname = "성산읍";
				}
			}
		}
		return dao.read(stationname);
	}

	@Override
	public List<AirqualityDTO> allReadList() {
		System.out.println("에어퀄리티서비스임플 실행되나?????????????????????????");
		return dao.allReadList();
	}
	

}

 

airquality.xml 메퍼입니다 ~

새로 받아올 경우 기존에 있는 데이터를 삭제하고 새로운 데이터를 받아오도록 하였습니다.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "https://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.project.airquality">
	<insert id="insert" parameterType="airquality">
		insert into AIRQUALITY_TB values(
		#{stationname}, #{datatime}, #{pm10value}, #{pm25value})
	</insert>
	<delete id="delete">
		delete from AIRQUALITY_TB 
	</delete>
	<select id="read" parameterType="String" resultType="airquality">
		select * from AIRQUALITY_TB where stationname = #{stationname}
	</select>
	<select id="allreadlist" resultType="airquality">
		select * from AIRQUALITY_TB
	</select>
</mapper>

미세먼지API

미세먼지는 아픈 손가락이에요 ..

포스팅을 할 때 A와 B로 Back과 Front로 계획했습니다만, 미세먼지는 좀 더 복잡하여 한 파트 더 글 작성을 하겠습니다.

제일 중요한 부분만 보여드리겠습니다.

 

package com.project.airquality;

import java.io.InputStreamReader;
import java.net.HttpURLConnection;
import java.net.URL;
import java.net.URLEncoder;
import java.util.ArrayList;
//import java.util.List;
//
//import javax.xml.parsers.DocumentBuilderFactory;
//
//import org.json.simple.JSONObject;
//import org.json.simple.parser.JSONParser;
//
//import com.project.dust.dustDTO;
import java.util.List;

import org.json.simple.JSONArray;
import org.json.simple.JSONObject;
import org.json.simple.parser.JSONParser;
import org.json.simple.parser.ParseException;
import org.springframework.stereotype.Service;

import java.io.BufferedReader;
import java.io.IOException;

//시도별 실시간 측정정보 조회
//https://www.data.go.kr/tcs/dss/selectApiDataDetailView.do?publicDataPk=15073861
//요청주소 http://apis.data.go.kr/B552584/ArpltnInforInqireSvc/getCtprvnRltmMesureDnsty
//서비스URL http://apis.data.go.kr/B552584/ArpltnInforInqireSvc

@Service
public class AirqualityAPIPull {
	public String GetAPIDataDust() throws IOException {
		StringBuilder urlBuilder = new StringBuilder(
				"http://apis.data.go.kr/B552584/ArpltnInforInqireSvc/getCtprvnRltmMesureDnsty"); /* URL */
		urlBuilder.append("?" + URLEncoder.encode("serviceKey", "UTF-8")
				+ "=serviceKey"); /*
																																 * 서비스
																																 */
		urlBuilder.append("&" + URLEncoder.encode("returnType", "UTF-8") + "="
				+ URLEncoder.encode("json", "UTF-8")); /* xml 또는 json */
		urlBuilder.append("&" + URLEncoder.encode("numOfRows", "UTF-8") + "="
				+ URLEncoder.encode("100", "UTF-8")); /* 한 페이지 결과 수 */
		urlBuilder
				.append("&" + URLEncoder.encode("pageNo", "UTF-8") + "=" + URLEncoder.encode("1", "UTF-8")); /* 페이지번호 */
		urlBuilder.append("&" + URLEncoder.encode("sidoName", "UTF-8") + "=" + URLEncoder.encode("제주",
				"UTF-8")); /*
							 * 시도 이름(전국, 서울, 부산, 대구, 인천, 광주, 대전, 울산, 경기, 강원, 충북, 충남, 전북, 전남, 경북, 경남, 제주, 세종)
							 */
		urlBuilder.append(
				"&" + URLEncoder.encode("ver", "UTF-8") + "=" + URLEncoder.encode("1.0", "UTF-8")); /* 버전별 상세 결과 참고 */
		URL url = new URL(urlBuilder.toString());
		HttpURLConnection conn = (HttpURLConnection) url.openConnection();
		conn.setRequestMethod("GET");
		conn.setRequestProperty("Content-type", "application/json");
		BufferedReader rd;
		if (conn.getResponseCode() >= 200 && conn.getResponseCode() <= 300) {
			rd = new BufferedReader(new InputStreamReader(conn.getInputStream()));
		} else {
			rd = new BufferedReader(new InputStreamReader(conn.getErrorStream()));
		}
		StringBuilder sb = new StringBuilder();
		String line;
		while ((line = rd.readLine()) != null) {
			sb.append(line);
		}
		rd.close();
		conn.disconnect();
		return sb.toString();
	}

	public List<AirqualityDTO> DataSaveDust(String result) {
		// Json parser를 만들어 만들어진 문자열 데이터를 객체화
		List<AirqualityDTO> dustList = new ArrayList<AirqualityDTO>();
		JSONParser parser = new JSONParser();
		JSONObject obj;

		try {
			obj = (JSONObject) parser.parse(result);
			// response 키를 가지고 데이터를 파싱
			JSONObject parse_response = (JSONObject) obj.get("response");
			// response 로 부터 body 찾기
			JSONObject parse_body = (JSONObject) parse_response.get("body");
			// body 로 부터 items 찾기
			JSONArray parse_items = (JSONArray) parse_body.get("items");

			String category;
			JSONObject data; // parse_item은 배열형태이기 때문에 하나씩 데이터를 하나씩 가져올때 사용
			// 카테고리와 값만 받아오기
			String dataTime = ((JSONObject) parse_items.get(0)).get("dataTime").toString();
			for (int i = 0; i < parse_items.size(); i++) {
				AirqualityDTO dust = new AirqualityDTO();
				data = (JSONObject) parse_items.get(i);
				Object pm10Value = data.get("pm10Value");
				Object pm25Value = data.get("pm25Value");
				Object stationName = data.get("stationName");
				dust.setPm10value((String) pm10Value);
				dust.setPm25value((String) pm25Value);
				dust.setStationname((String) stationName);
				dust.setDatatime(dataTime);
				dustList.add(dust);
				}
			
		} catch (ParseException e) {
			e.printStackTrace();
		}
		return dustList;
		
	}
}

공공데이터에 있는 코드에서 수정해서 사용했고 xml은 손대기 번거로워서 json으로 받아올 수 있게 작업하였습니다.

 

공공데이터API

https://www.data.go.kr/tcs/dss/selectApiDataDetailView.do?publicDataPk=15073861 

 

한국환경공단_에어코리아_대기오염정보

각 측정소별 대기오염정보를 조회하기 위한 서비스로 기간별, 시도별 대기오염 정보와 통합대기환경지수 나쁨 이상 측정소 내역, 대기질(미세먼지/오존) 예보 통보 내역 등을 조회할 수 있다.

www.data.go.kr

밑에 있는 건 검색해도 정보 없어서 위에 있는 걸로 다시 사용했고, 여기서 '시도별 측정정보조회'로 봤습니다.

시를 '제주'로 설정하여, 제주도에 있는 13곳의 미세먼지 측정소 값을 가져오게 하였습니다.

 

측정소명 / 업데이트 시간 (미세먼지 API는 1시간에 한 번씩 받을 수 있습니다) / 미세먼지 / 초미세먼지 순입니다.

Oracle 테이블
오라클 내 미세먼지 테이블 데이터

 

이렇게 가져온 가져온 데이터를 가공하여 사이트에 뿌릴 수 있게 하였는데요,

https://www.jejudatahub.net/data/view/data/895

 

제주데이터허브

 

www.jejudatahub.net

제주데이터허브를 통해서 측정소의 정보를 가져왔습니다만,

실제로 API로 받아오는 측정소 값은 총 13개, 하지만 제주데이터허브에서는 9개 ..

수기로 미세먼지 측정소의 위치를 찾는 작업을 하였고, 구글 맵을 통해서 측정소의 위치를 경도와 위도로 바꿨습니다만,

 

제주도는 .. 가로가 더 긴 섬이잖아요 .. ?

그래서 경도와 위도를 x와 y로 바꾸는 작업도 하였습니다 .. (흘러내리는 눈물)

 

밑작업은 이 정도 했고 목요일엔 좀 더 상세한 미세먼지 API Back 작업 부분을 보여드리겠습니다 ~! (. ❛ ᴗ ❛.)

 

안녕하세요 ~ 오늘은 FAQ 프론트 부분을 포스팅하겠습니다 ~

 

service_faq.jsp 입니다.

유저가 보는 리스트/리드 화면이고요, 페이징, 서치 기능이 있습니다. 처음에 구상할 때 카카오 고객센터(FAQ)처럼 누르면 아래로 열리게끔(아코디언) 만들고 싶었는데 CSS 적용해서 그렇게 표현했습니다.

<%@page import="com.project.faq.FaqDTO"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles"%>
<!DOCTYPE html>
<html>
<head>
<!-- <link rel="stylesheet" href="/evweb/css/FAQ.css"> -->
<script
	src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
	integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
	crossorigin="anonymous"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>service</title>
<style type="text/css">
.collapsible-link::before {
	content: '';
	width: 14px;
	height: 2px;
	background: #333;
	position: absolute;
	top: calc(50% - 1px);
	right: 1rem;
	display: block;
	transition: all 0.3s;
}
/* Vertical line */
.collapsible-link::after {
	content: '';
	width: 2px;
	height: 14px;
	background: #333;
	position: absolute;
	top: calc(50% - 7px);
	right: calc(1rem + 6px);
	display: block;
	transition: all 0.3s;
}

.collapsible-link[aria-expanded='true']::after {
	transform: rotate(90deg) translateX(-1px);
}

.collapsible-link[aria-expanded='true']::before {
	transform: rotate(180deg);
}
/* 내용 css바꾸기 */
.card {
	background-color: #e7f1ff;
}
</style>
</head>
<body>
	<div class="card-body">
		<h1 class="pagetitle">자주 찾는 도움말</h1>
		<hr>
		<div class="col-lg-12 stationWrap">
			<!-- 검색 기능 -->
			<form class="search-bar d-flex" method="post"
				action="/evweb/faq/search">
				<select name="field" class="form-control" style="width: 150px">
					<option value="title">제목</option>
					<option value="content">글내용</option>
				</select> <input class="col-md-4" type="hidden" name="criteria" value="is"
					text="="> <input type="text" class="form-control"
					name="value" id="keywordInput" style="width: 250px;" />
				<button type="submit" id="searchBtn" class="btn btn-primary">검색</button>
			</form>



			<div id="accordionExample" class="accordion shadow">
				<%
				List<FaqDTO> faqlist = (List<FaqDTO>) request.getAttribute("faqlist");
				int size = faqlist.size();

				for (int i = 0; i < size; i++) {
					FaqDTO faq = faqlist.get(i);
				%>
				<!-- Accordion item 1 -->
				<div class="card">
					<div id="heading<%=+i%>"
						class="card-header bg-white shadow-sm border-0">
						<h6 class="mb-0 font-weight-bold">
							<a href="#" data-toggle="collapse" data-target="#collapse<%=+i%>"
								aria-expanded="false" aria-controls="collapse<%=+i%>"
								class="d-block position-relative text-dark text-uppercase collapsible-link py-2"><%=faq.gettitle()%></a>
						</h6>
					</div>
					<div id="collapse<%=+i%>" aria-labelledby="heading<%=+i%>"
						data-parent="#accordionExample" class="collapse">
						<div class="card-body p-10">
							<p class="font-weight-light m-0"><%=faq.getcontent()%></p>
						</div>
					</div>
				</div>
				<%
				} int faqcount = (int)request.getAttribute("faqcount");
				%>
				<table align="center">
					<tr>
						<td colspan="10">
							<div></div> <%for(int i=0; i<(Math.ceil(faqcount/10.0)); i++){ %>
							<a href="/evweb/faq/paginglist?pageNo=<%=i%>"><%=i+1 %></a>
							<%} %>
						</td>
					</tr>
				</table>
			</div>
		</div>
	</div>
</body>
</html>

 

service_faq2.jsp 입니다. 어드민 시점 뷰고요. 유저뷰는 제목을 눌러야지 열려서  화면에서 한 번에 제목과 내용을 볼 수 있게 했지만, 어드민은 한 번에 글 제목과 내용을 볼 수 있게하였습니다.

밑에는 새로운 글을 등록할 수 있는 버튼을 만들어두었습니다.

<%@page import="com.project.faq.FaqDTO"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>service</title>
</head>
<body>
<!-- Admin View -->
	<div>
		<h1 class="pagetitle">자주 찾는 도움말</h1>
		<br>
		<%
		List<FaqDTO> faqlist = (List<FaqDTO>) request.getAttribute("faqlist");
		int size = faqlist.size();
		%>

		<table class="table table-hover">
			<tr bgcolor="#FFFFFF">
				<th></th>
				<th>제목</th>
				<th>내용</th>
				<!-- <th>수정</th> -->
			</tr>
			<%
			for (int i = 0; i < size; i++) {
				FaqDTO faq = faqlist.get(i);
			%>
			<tr>
				<td></td>
				<td><a 
					href="/evweb/faq/detail?key=_id&value=<%=faq.get_id()%>&action=read"><%=faq.gettitle()%></a></td>
				<td><%=faq.getcontent()%></td>
			</tr>
			<%
				} int faqcount = (int)request.getAttribute("faqcount");
				%>
				<table align="center">
					<tr>
						<td colspan="10">
							<div></div> <%for(int i=0; i<(Math.ceil(faqcount/10.0)); i++){ %>
							<a href="/evweb/admin_faq.do?pageNo=<%=i%>"><%=i+1 %></a>
							<%} %>
						</td>
					</tr>
				</table>
		<div class="nav navbar-nav">
			<button type="button" onclick="location.href='/evweb/service/faqinsert'" style="margin-left: auto;" class="btn btn-primary"><i class="bi bi-pencil-square"></i> 등록</button>
		</div>
	</div>
</body>
</html>

 

service_faqinsert.jsp 화면입니다. 기본적인 문구를 넣어뒀고 틀은 공지사항과 동일하게 하였습니다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#content{
padding-top 
}
padding:1px; 
</style>
</head>
<body>
	<div class="col-lg-8">
		<!-- 가로범위 -->
		<div>
			<h5 class="card-title">
				<strong>FAQ 작성하기</strong>
			</h5>
			<hr>
			<form role="form" class="form-horizontal"
				action="/evweb/service/faqinsert" method="POST">

					<div class="row mb-3">
						<label for="content" class="col-sm-2 col-form-label">제목</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" name="title">
						</div>
					</div>

					<div class="row mb-3">
						<label for="content" class="col-sm-2 col-form-label">내용</label>
						<div class="col-sm-10">
							<textarea class="form-control" style="height: 300px"
								id="content" name="content" >안녕하세요, 차지모양입니다.</textarea>
						</div>
					</div>

					<div class="row mb-3">
						<label class="col-sm-2 col-form-label"></label>
						<div class="col-sm-10">
							<button type="submit" class="btn btn-primary">등록하기</button>
						</div>
					</div>

			</form>
		</div>
	</div>
</body>
</html>

 

service_faqlist.jsp 입니다.

<%@page import="com.project.faq.FaqDTO"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles"%>
<!DOCTYPE html>
<html>
<head>
<!-- <link rel="stylesheet" href="/evweb/css/FAQ.css"> -->
<script
	src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
	integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
	crossorigin="anonymous"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>service</title>
<style type="text/css">
.collapsible-link::before {
	content: '';
	width: 14px;
	height: 2px;
	background: #333;
	position: absolute;
	top: calc(50% - 1px);
	right: 1rem;
	display: block;
	transition: all 0.3s;
}
/* Vertical line */
.collapsible-link::after {
	content: '';
	width: 2px;
	height: 14px;
	background: #333;
	position: absolute;
	top: calc(50% - 7px);
	right: calc(1rem + 6px);
	display: block;
	transition: all 0.3s;
}

.collapsible-link[aria-expanded='true']::after {
	transform: rotate(90deg) translateX(-1px);
}

.collapsible-link[aria-expanded='true']::before {
	transform: rotate(180deg);
}
/* 내용 css바꾸기 */
.card {
	background-color: #e7f1ff;
}
</style>
</head>
<!-- faq search 화면 -->
<body>
	<div class="card-body">
		<h1 class="pagetitle">자주 찾는 도움말</h1>
		<hr>
		<div class="row">
			<div class="col-lg-12 stationWrap">
				<!-- 검색 기능 -->
				<form class="search-bar d-flex" method="post"
					action="/evweb/faq/search">
					<select name="field" class="form-control" style="width: 150px">
						<option value="title">제목</option>
						<option value="content">글내용</option>
					</select> <input class="col-md-4" type="hidden" name="criteria" value="is"
						text="="> <input type="text" class="form-control"
						name="value" id="keywordInput" style="width: 250px;" />
					<button type="submit" id="searchBtn" class="btn btn-primary">검색</button>
				</form>
			</div>

			<div class="col-lg-12 stationWrap">
				<div id="accordionExample" class="accordion shadow">
					<%
					List<FaqDTO> faqlist = (List<FaqDTO>) request.getAttribute("faqlist");
					int size = faqlist.size();

					for (int i = 0; i < size; i++) {
						FaqDTO faq = faqlist.get(i);
					%>
					<!-- Accordion item 1 -->
					<div class="card">
						<div id="heading<%=+i%>"
							class="card-header bg-white shadow-sm border-0">
							<h6 class="mb-0 font-weight-bold">
								<a href="#" data-toggle="collapse"
									data-target="#collapse<%=+i%>" aria-expanded="false"
									aria-controls="collapse<%=+i%>"
									class="d-block position-relative text-dark text-uppercase collapsible-link py-2"><%=faq.gettitle()%></a>
							</h6>
						</div>
						<div id="collapse<%=+i%>" aria-labelledby="heading<%=+i%>"
							data-parent="#accordionExample" class="collapse">
							<div class="card-body p-10">
								<p class="font-weight-light m-0"><%=faq.getcontent()%></p>
							</div>
						</div>
					</div>
					<%
					}
					%>
					<table align="center">
						<tr>
							<td colspan="10">
								<div></div> <a href="/evweb/faq/paginglist?pageNo=0">1</a> <a
								href="/evweb/faq/paginglist?pageNo=1"></a>
							</td>
						</tr>
					</table>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

 

service_faqreadadmin.jsp입니다. 용도는 어드민으로 로그인할 시 FAQ를 리드하는 화면이고

글 수정 / 삭제를 위해서 만들었습니다.

<%@page import="com.project.faq.FaqDTO"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>service</title>
</head>
<body>
	<!-- Admin View -->
	<div class="col-lg-8">
		<!-- 가로범위 -->
	<div>
		<h1 class="pagetitle">FAQ 읽기</h1>
		<br />
			
<%
	FaqDTO list = (FaqDTO)request.getAttribute("list");
	%>
			<!-- General Form Elements -->

			<div class="row mb-3">
				<div class="col-sm-8">
					<label class="col-sm-2 col-form-label">제목 :</label> ${list.title}
				</div>
			</div>

			<div class="row mb-3">
				<div class="col-sm-10">
					<!-- <label class="col-sm-2 col-form-label">내용</label> -->
					<div class="card">
						<div class="card-body" style="height: 150px">
							${list.content}</div>
					</div>
				</div>
			</div>

			<div class="row mb-3">
				<div class="col-sm-10">
					<button type="button" class="btn btn-primary"
						onclick="location.href='/evweb/faq/detail.do?key=_id&value=<%=list.get_id()%>&action=update'">수정하기</button>
					<button type="button" class="btn btn-primary"
						onclick="location.href='/evweb/faq/delete.do?_id=<%=list.get_id()%>&action=delete'">삭제하기</button>
					<button type="button" class="btn btn-primary"
						onclick="location.href='/evweb/admin_faq.do?pageNo=0'">목록보기</button>
				</div>
			</div>
		</div>
	</div>
	
</body>
</html>

 

service_faqupdate.jsp FAQ 수정 화면입니다.

<%@page import="com.project.faq.FaqDTO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<div>
		<h1 class="pagetitle">FAQ 수정</h1>
		<br />
		<form class="form-horizontal"
			action="/evweb/faq/update?_id=${list._id}" method="post">
			<%-- 				<input type="hidden" name="_id" value="${list._id }"> --%>
			

			<div class="row mb-3">
				<div class="col-sm-10">
					<label class="col-sm-12 col-form-label"><span
						class="help-block" style="color: gray;"> 게시글 유형에 맞는 내용으로 작성
							부탁드립니다. </span></label> <input type="text" class="form-control" name="title"
						value="${list.title}">
				</div>
			</div>
			<div class="row mb-3">
				<div class="col-sm-10">
					<div class="card">
						<textarea name="content"
							style="border: 1px; border-color: gray; height: 200px;">  ${list.content }</textarea>
					</div>
				</div>
			</div>
			<br> <br>
			<div class="row mb-3">
				<div class="col-sm-10" style="text-align: right;">
					<button type="submit" class="btn btn-primary">수정</button>
					<button type="button" class="btn btn-primary"
						onclick="location.href='/evweb/admin_faq.do?pageNo=0'">취소</button>
				</div>
			</div>
		</form>
	</div>

</body>
</html>

글 작성하는 화면과 비슷하게 만들었습니다.

 

내일은 미세먼지 API에 대해서 포스팅하겠습니다 ~!~! (●'◡'●)

+ Recent posts