이번 프로젝트를 하면서 기록하며 정리해둬야 겠단 생각이 들었다..!
이전까지 개발 블로그 없이 메모장이나 파일에 주석으로 메모를 많이 해뒀는데 집 - 학원 - 노트북으로 파일을 war 파일로 import, export 반복하다보니 주석에 한글이 모두 와장창 깨져버린것을 보고,,,ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ
따로 잘 정리해 두기로 했다..
이번 프로젝트는 학원에서 있는 평가 때문에 만들게 되었고 CRUD(+로그인) 기능이 있는 페이지를 만드는 것 이다.
디자인은 모두 자유였지만 원래 있는 페이지에 디자인 부분을 참고하여 만들고 기능을 넣는 식으로 만들었다.
개발환경은 이렇다!
[index.do]
더보기
내가 애정하는 카페 엑셀시오르 카페를 보며 만들었고 나는 백엔드를 공부하고 있기 때문에 프론트는 간략하게 표현했다.
때문에 MENU는 구동하지 않는다. (아예 없애기엔 nav가 너무 조촐하기도 하고..명색이 카페인데 메뉴가 없는것도 좀 아닌거 같아서..)
.do로 접근하는 요청들을 서블릿 어노테이션으로 매핑해서 처리했다.
[Controller]
package org.project.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 org.project.commend.DeleteOkCommend;
import org.project.commend.ExcuteCommend;
import org.project.commend.JoinOkCommend;
import org.project.commend.LoginOkCommend;
import org.project.commend.LogoutCommend;
import org.project.commend.MemberViewCommend;
import org.project.commend.UpdateOkCommend;
@WebServlet("*.do")
public class Controller extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
String path=request.getContextPath();
// => /webProject_KM
String uri=request.getRequestURI();
// => /webProject_KM/index.do
String basicURL=uri.substring(path.length());
// => /index.do
System.out.println(basicURL);
ExcuteCommend commend=null;
String url="";
if(basicURL.equals("/index.do")) {
url="/index.jsp";
}
RequestDispatcher disp=request.getRequestDispatcher(url);
disp.forward(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
doGet(request, response);
}
}index.do는 jsp로 연결만 시켜주면 되서 간단하다.
[index.jsp]
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Index page</title>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<%@include file="common/header.jsp" %>
<div class="container">
<div class="inner-con">
<div class="text">
<p class="title">To your daily "valuable time"</p>
<p class="txt">
The moment to be relieved and to feel relaxing in your daily life. <br />
Why don't you to make the most of something at any time of the day or night?
</p>
</div>
</div>
</div>
<%@include file="common/footer.jsp" %>
</body>
</html>/*index.css*/
@import url("common/reset.css");
@import url("common/header.css");
@import url("common/footer.css");
@import url('https://fonts.googleapis.com/css2?family=Fredericka+the+Great&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Annie+Use+Your+Telescope&display=swap');
.container {
width: 100%;
height: calc(100vh - 180px);
}
.inner-con {
width: 100%;
height: calc(100vh - 180px);
background-image: url("../img/ekuse1.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: bottom;
position: relative;
}
.text {
color: #FFFFFF;
vertical-align: middle;
font-family: 'Annie Use Your Telescope', cursive;
letter-spacing: 2px;
position: absolute;
top: 50%;
left: 60px;
text-shadow: 2px 2px 2px gray;
}
.text > .title {
font-family: 'Fredericka the Great', cursive;
font-size: 1.5em;
letter-spacing: 2px;
}
.text > .txt {
font-size: 1.2em;
}페이지를 모듈화해서 header.jsp와 footer.jsp를 따로 만들고 include 했다.
처음엔 container도 분리를 했었는데 그렇게 하니까 파일이 너무 많아져서 오히려 힘들길래... header와 footer만 분리 시켰다.
[header.jsp]
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<div class="header">
<div class="nav">
<div class="top-nav">
<div class="gnb">
<ul>
<%
String sessionId=(String)session.getAttribute("sessionId");
if(sessionId==null) {
%>
<li><a href="index.do">HOME</a></li>
<li><a href="#">MENU</a></li>
<li><a href="joinView.do">JOIN</a></li>
<li><a href="loginView.do">LOGIN</a></li>
<%
} else if(sessionId.equals("admin")) {
%>
<li><a href="index.do">HOME</a></li>
<li><a href="#">MENU</a></li>
<li><a href="admin.do" class="a1">#관리자 페이지</a></li>
<li><a href="logout.do" class="a2">LOGOUT</a></li>
<li><a href="#"><%=sessionId %>님</a></li>
<%
} else if(sessionId!=null) {
%>
<li><a href="index.do">HOME</a></li>
<li><a href="#">MENU</a></li>
<li><a href="memberView.do?userId=<%=sessionId %>">MY PAGE</a></li>
<li><a href="logout.do" class="a2">LOGOUT</a></li>
<li><a href="#"><%=sessionId %>님</a></li>
<%
}
%>
</ul>
</div>
</div>
<div class="bottom-nav">
<div class="logo">
<img src="img/logo.png" alt="" />
</div>
</div>
</div>
</div>/*header.css*/
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300&display=swap');
.header {
width: 100%;
background-color: #F8F8F8;
height: 180px;
}
.top-nav {
width: 100%;
display: flex;
justify-content: center;
}
.gnb {
flex: 0 1 600px;
}
.gnb > ul {
display: flex;
justify-content: space-between;
}
.gnb > ul > li > a {
color: #434343;
font-family: 'Nunito', sans-serif;
line-height: 60px;
font-size: 0.9em;
}
.a1 {
color: #ff6688 !important;
}
.a2 {
color: #ff8a80 !important;
}
.bottom-nav {
width: 100%;
display: flex;
}
.logo {
width: 100%;
display: flex;
justify-content: center;
margin-top: 20px;
}session을 이용해서 세션값이 없으면 회원가입과 로그인을 표시하고, 세션값이 있으면 마이 페이지와 로그아웃을 표시, 세션값이 admin(관리자)이면 관리자페이지와 로그아웃을 표시하게 했다.
[footer.jsp]
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<div class="footer">
Copyright © Doutor Coffee Co., Ltd. All Rights Reserved.
</div>/*footer*/
.footer {
width: 100%;
line-height: 50px;
background-color: #F8F8F8;
text-align: center;
color: #636363;
font-size: 0.8em;
}푸터 is 심플,,,,ㅎ
일단 여기까지가 인덱스 페이지이다!
인덱스 페이지는 특별한 기능이랄게 없다보니 비교적 간단하다.
내일 본격적으로 회원가입, 로그인 등등 기능에 대한 정리를 해야겠당!
'[개발 언어 & 프레임워크] > JSP' 카테고리의 다른 글
| [JSP] 5. WebProject(홈페이지 만들기) - 회원 탈퇴 구현하기 (0) | 2022.08.15 |
|---|---|
| [JSP] 4. WebProject(홈페이지 만들기) - 회원 상세 조회하기, 회원정보 수정하기 (0) | 2022.08.15 |
| [JSP] 3. WebProject(홈페이지 만들기) - 회원목록 조회하기 (0) | 2022.08.15 |
| [JSP] 2. WebProject(홈페이지 만들기) - 로그인 구현하기 (0) | 2022.08.11 |
| [JSP] 1. WebProject(홈페이지 만들기) - 회원가입 구현하기 (0) | 2022.08.09 |
