웹서비스 백엔드 개발자 과정 수료 후기

웹서비스 백엔드 개발자 과정 수료 후기 - 5 (게시판/FAQ B)

PrayHee 2023. 2. 5. 19:07

2023. 2. 5. 19:07

안녕하세요 ~ 오늘은 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

PrayHee

웹서비스 백엔드 개발자 과정 수료 후기 - 5 (게시판/FAQ B)

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

+ Recent posts

티스토리툴바