뇨내

[게시판 만들기:02] 메인페이지 본문

Practice/게시판만들기

[게시판 만들기:02] 메인페이지

삐옥 2022. 1. 14. 03:09

 

 

 

[게시판 만들기:01] 초기 작업

💪 팀프로젝트를 진행하면서 곧 게시판기능을 맡게될 것 같아 미래의 내가 좀 더 편하게 작업하기위해 자세히 적으려한다. 시간은 좀 걸리겠지만 프로젝트 구현시간를 생각하며...! 그리고 나

codingjh.tistory.com

 

이어서...

먼저 Main.java페이지로 온다.

 

 

Main.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
package com.test.main;
 
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("/main.do") // 1. OOO에 소속된 페이지구나~ 알아보도록하는 가상주소임, 외부에 공개되는 경로의 슬래쉬
public class Main extends HttpServlet { // 2. 상속받기
 
    //3. doGet 오버라이드
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
 
        //4. 디스패쳐 넣기
        RequestDispatcher dispatcher = req.getRequestDispatcher("/WEB-INF/views/main.jsp");
        // 서블릿이 jsp를 찾아가야되는 경로이다. 그래서 슬래쉬 '/' = webapp
 
        dispatcher.forward(req, resp);
        //이걸 매번 치기 그러니 코드조각으로 만든다.
    }
 
}
 
 cs

 

 

템플릿

 

 

main.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<%@ 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>Hello ppiok</title>
<%@ include file="/WEB-INF/views/inc/asset.jsp" %>
</head>
<body>
    <main class="main">
        <%@include file="/WEB-INF/views/inc/header.jsp" %>
        <section class="content">
            메인페이지
        </section>
        <%@include file="/WEB-INF/views/inc/footer.jsp" %>
    </main>
 cs
 

 

실행은 .java에서!!!!!!

 

그리고 include 헤더와 푸터부분을 본다. 

그 부분 페이지를 원하는 대로 건들여 주면 메인에 같이 출력되어서 나온다.

대신 조각페이지들은 안에 출력문들이 중복(F12로 확인가능)이니 불필요한 부분을 삭제한다(첨부자료 참고)

 

 

header.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<style>
    .title:first-letter {
        
        <c:if test="${not empty id}">
        color: cornflowerblue;
        </c:if>
        
    }
</style>
 
<!-- inc/header.jsp -->
<header class="header">
 
    <h1 class="title">Hello ppiok</h1>
    
    <ul class="menu">
        <li onclick="location.href='/makeboard/main.do';">Home</li>
        <li onclick="location.href='/makeboard/board/list.do';">Board</li>
        <li onclick="location.href='/makeboard/member/member.do';">Member</li>
        <li onclick="location.href='/makeboard/etc/?';">Etc</li>
    </ul>
 
</header>
 
 cs

 

 

footer.jsp

1
2
3
4
5
6
7
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 
    
<footer class="footer">
    &copy;Copyright PPIOK 2022 All rigth reserved. ppiok company 
</footer>
 cs

 

 

디자인을 위해 css파일도 만든다.

연결을 위해 asset파일에 link를 써준다.

css 파일에 대해선 언급하지 않겠다.(이거말고도 산더미이기때문)

1
2
3
4
5
6
7
8
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
   
<link rel="stylesheet" href="/makeboard/asset/css/bootstrap.css">
<link rel="stylesheet" href="/makeboard/asset/css/main.css">
 
<script src="/makeboard/asset/js/jquery-1.12.4js"></script>
<script src="/makeboard/asset/js/bootstrap.js"></script>
 cs

 

 

 

결과

 

여기까지 메인페이지이다. 다른건 다음 포스팅때 보겠습니다.

저작자표시 비영리 변경금지

'Practice > 게시판만들기' 카테고리의 다른 글

[게시판 만들기:01] 초기 작업  (0) 2022.01.14
'Practice/게시판만들기' Related Articles more
Comments