안녕하세요 ~ 오늘은 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에 대해서 포스팅하겠습니다 ~!~! (●'◡'●)
'coding > Java' 카테고리의 다른 글
| 웹서비스 백엔드 개발자 과정 수료 후기 - 7 (API/미세먼지B) (0) | 2023.02.09 |
|---|---|
| 웹서비스 백엔드 개발자 과정 수료 후기 - 6 (API/미세먼지A) (0) | 2023.02.06 |
| 웹서비스 백엔드 개발자 과정 수료 후기 - 4 (게시판/FAQ A) (0) | 2023.02.04 |
| 웹서비스 백엔드 개발자 과정 수료 후기 - 3 (게시판/공지사항B) (0) | 2023.02.03 |
| 웹서비스 백엔드 개발자 과정 수료 후기 - 2 (게시판/공지사항A) (0) | 2023.02.02 |
