게시판 만들기 - 1. 기본 설정

JAVA/웹 프로그래밍 - JSP 2020. 11. 20. 18:53

일반적으로 HTML에서 구성 요소들은 header, body, footer 태그로 나눈다.

그래서 보통 header는 로그인, 회사소개 등등의 내용이 들어간다.

body는 기사글 등의 본문이 들어있다.

footer는 물품을 파는 사이트라면 회사의 위치등이 들어간다.

그래서 우리가 만드는 게시판에서는 각 이동한 사이트에 따라

header, body, footer는 같은 내용이 들어올 수도 있고 다를 수도 있다.

만약 예를 들어서 로그인 페이지로 이동했다고 하면

header와 footer는 같은 그 이전 페이지와 내용이 같고 다만 body의 내용만 다를 수 있다.

즉, header와 footer를 공유하고 body만 변경이 되는 원리이다.

그렇기 때문에 공통적인 내용을 담는 header,body,footer 내용이 있다.

우선, 아래의 두 파일을 다운 받아서 열어보도록 하자.

아래의 내용을 기반으로 환경 구축을 할 것이다.

Dynamic Web Project를 생성해서 프로젝트 이름을 NoticeBoard적고, Next를 클릭한다.

Next를 클릭하자.

아래와 같이 Generate를 체크하고 Finish를 하자.

아래의 두 파일의 내용을 우선 열어서 확인을 해보자.

이 내용을 기반으로 만들 것이다.

DB에 접속해야하고, ctag를 써야 하므로 WebContent/WEB-INF/lib폴더에 다음과 같이 두 개의 파일을 추가하자.

ojdbc6.jar 파일은 DB에 접속하기 위해서 필요한 파일이다.

그리고, jstl-1.2.jar 파일은 아래의 taglib문법을 사용하기 위해 필요하다.

그리고 아래의 내용에서 여러 개의 서버가 실행 시에 현재의 프로젝트의 서버만을 실행하고

나머지 프로젝트들의 서버를 제거하는 방법도 있다.

이 두 내용을 다 같이 보고 오도록 하자.

designatedroom87.tistory.com/314?category=901206

taglib문법

${ } 태그(html에서 넘어온 문법)와 setAttribute함수(자바 문법)에서 쓸 수 있다. 새 프로젝트를 생성한다. 다이나믹 프로젝트로 만드는데 이름은 El 이라 하자. 차분히 Next를 선택하다가 아래와

designatedroom87.tistory.com

그리고 현재 프로젝트의 서버만 실행되도록 설정을 했다면, 서버가 우선 돌아가는지 체크를 해보자.

index.jsp 파일에 다음과 같은 내용을 적고 실행해보자.

index.jsp 파일은 WebContent 폴더에 만든다.

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	index.jsp
</body>
</html>

index.jsp를 각 각 header, body, footer로 나누어보자.

header.jsp, body.jsp, footer.jsp 파일을 만들어보자.

header.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<div>
header
</div>

body.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<div>
body
</div>

footer.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<div>
footer
</div>

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
  
<title>Insert title here</title>
</head>

<body>
	<jsp:include page="header.jsp"></jsp:include>
	<jsp:include page="body.jsp"></jsp:include>
	<jsp:include page="footer.jsp"></jsp:include>
</body>
</html>

index.jsp를 실행해보자.

그리고, 맨 위의 파일들을 보면, 스타일을 지정해주는 CSS부분과

버튼의 기능을 담당하는 자바스크립트가 있음을 알 수 있다.

그러므로, WebContent 폴더에 하위로 css와 js 폴더를 각 각 만들자.

위와 같이 적은 이유는 C언어에서의 파일 분할의 내요을 떠올리면 쉬울 것이다.

스타일을 지정해주는 부분을 따로 떼어내서 별도의 style.css 파일로 만들어 두면

다른 파일에서 해당 스타일의 내용을 참고하기만 하면 된다.

즉, style.css 로 파일을 하나 만들어두면 사용하는 쪽에서는 일일히 새로 만들 필요없이

가져다 쓰기만 하면 된다.

즉, 편리할 것이다.

JavaScript의 내용 또한 script.js에 만들어 두면 이 자바스크립트 내용이 다른 여러 파일에서

이 파일을 참고해서 가져다 쓰기만 하면 될 것이다.

맨 위의 두 파일에서 각 각 CSS에 관한 내용과 자바스크립트에 관한 내용을 가지고 와서

style.css와 script.js에 두도록 하자.

style.css

@charset "UTF-8";

      body {
          margin: 0;
          padding: 0;
      }
      
      #panel {
          background-color: lightgray;
          width: 300px;
          height: 100%;
          left: -300px;
          position: fixed;
          z-index: 0;        /*   페이지가 중첩이 될 때, 값이 클수록 렌더가 뒤늦게 된다.  */
      }
      #btn { 
          z-index: 1;        /*   페이지가 중첩이 될 때, 값이 클수록 렌더가 뒤늦게 된다.  */
          position:fixed;
          left: 0px;
          top: 200px;
      }
      .navbar{
          background-color: #263343;
          justify-content: center;
          align-items: center; 
          position: relative; 
          display: flex;          
      }
      /*  navbar클래스의 ul태그의 스타일을 변경  */
      .navbar > ul{
          display: flex;  list-style: none;   /*  리스트들을 가로로 보이게 하고, 리스트 목록 앞의 점을 제거   */
      }
      /*  navbar클래스의 ul태그의 li태그의 스타일을 변경  */
      .navbar > ul > li{
          color: white;
          padding: 8px 12px;  /*리스트들의 간격을 조정*/
      }
      /*  navbar클래스의 ul태그의 li태그의 a태그의 스타일을 변경  */
      .navbar > ul > li > a{
          color: white;
          padding: 8px 12px;  /*리스트들의 간격을 조정*/
          text-decoration: none;  /*a태그의 글자의 밑줄이 사라지게 한다.*/
      }
      /*   /*  navbar클래스의 ul태그의 li태그에 마우스가 갖다 댄 상태라면 배경색 변경*/
      .navbar > ul > li:hover{
          background-color: #d49466;
          border-radius: 4px; /*  테두리를 약간 둥근 사각형 처럼 보이게 설정  */
      }
      #panel > ul > li > a{
          color: red;
          font-size: medium;
          font-style:initial;
          text-decoration: none;  /*a태그의 글자의 밑줄이 사라지게 한다.*/
      }
      #panel > ul > li:hover{
          background-color: lightgreen;
          border-radius: 4px;
          display:inline;     /*배경색상이 글자길이만큼만 칠해지도록 설정*/
      }
      #panel > ul{
          border: 1px solid;  /*디버깅 용으로 아이디가 panel인 ul태그의 영역을 표시*/
      }

script.js

 $(document).ready(function() 
 {
        //  버튼을 토글 기능으로 만들자.
        $('#btn').click(function() 
        {
            var p = document.getElementById('panel');
            var b = document.getElementById('btn');
                
            //  패널이 안 보이는 상태에서 클릭 버튼을 누르면 패널이 보이면서 버튼도 같이 이동
            if ( $('#panel').css('left') == "-300px")
            {
                //  panel의 left를 증가시킨다.
                var left = -300;    //  현재 panel의 초기 left값
                var dir = 1;
                var id = setInterval(ShowOrHideframe,10);
                var max = 0;        //  도달해야할 left값
            }
            else 
            {
                var left = 0;    //  현재 panel의 초기 left값
                var dir = -1;
                var id = setInterval(ShowOrHideframe,10);
                var max = -300;     //  도달해야할 left값
            }
                
            function ShowOrHideframe()
            {
                //  0px에 도달하면 멈춤
                if (left == max) 
                {
                    p.style.left = left + "px";
                    
                    b.style.left = 300 + left + "px";   

                    clearInterval(id);
                }
                else
                {
                    left = left + 10*(dir);
                    
                    p.style.left = left + "px";

                    b.style.left = 300 + left + "px";   //  button의 위치는 0px에서부터 시작.
                }
            }

            function Showframe()
            {
                //  0px에 도달하면 멈춤
                if (left >= 0)
                {
                    left = 0;
                    
                    p.style.left = left + "px";
                    
                    b.style.left = 300 + left + "px";   //  button의 위치는 0px에서부터 시작.

                    clearInterval(id);
                }
                else
                {
                    left = left + 10;
                    
                    p.style.left = left + "px";

                    b.style.left = 300 + left + "px";   //  button의 위치는 0px에서부터 시작.
                }
            }

            function Hideframe()
            {
                 //  -300px에 도달하면 멈춤
                 if (left <= -300)
                {
                    left = -300;
                    
                    p.style.left = left + "px";
                    
                    b.style.left = 300 + left + "px";   //  button의 위치는 0px에서부터 시작.

                    clearInterval(id);
                }
                else
                {
                    left = left - 10;
                    
                    p.style.left = left + "px";

                    b.style.left = 300 + left + "px";   //  button의 위치는 0px에서부터 시작.
                }
            }
     })
});

header.jsp파일을 다음과 같이 수정하고, index.jsp파일을 실행해보자.

css폴더 내의 style.css 파일을 참조한다.

header.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/css/style.css" rel="stylesheet">
<div>
<!--nav 태그에서 메뉴를 만들면 된다.-->
    <nav class="navbar">
        <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">HOME</a></li>
            <li><a href="#">HOME</a></li>
            <li><a href="#">HOME</a></li>
            <li><a href="#">HOME</a></li>
        </ul>
    </nav>
</div>

그리고, body.jsp 파일에서는 로그인 폼 양식으로 만들어보자.

body.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<div>

 <div class="container">
  <h2>로그인</h2>
  <form action=login.jsp method=post>
    <div class="form-group">
      <label for="id">아이디:</label>
      <input type="text" class="form-control" id="id" name="id" placeholder="아이디를 입력하세요">
    </div>
    <div class="form-group">
      <label for="pwd">패스워드:</label>
      <input type="password" class="form-control" id="pwd" name="password" placeholder="패스워드를 입력하세요">
    </div>
    <div class="checkbox">
      <label><input type="checkbox" name="remeber">아이디/패스워드 저장</label>
    </div>
    <button type="submit" class="btn btn-default">로그인</button>
  </form>
  
</div>
</div>

footer.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
      
<div>
<!-- Footer -->
<footer class="w3-container w3-padding-64 w3-center w3-opacity">  
  <div class="w3-xlarge w3-padding-32">
    <i class="fa fa-facebook-official w3-hover-opacity"></i>
    <i class="fa fa-instagram w3-hover-opacity"></i>
    <i class="fa fa-snapchat w3-hover-opacity"></i>
    <i class="fa fa-pinterest-p w3-hover-opacity"></i>
    <i class="fa fa-twitter w3-hover-opacity"></i>
    <i class="fa fa-linkedin w3-hover-opacity"></i>
 </div>
 <p>Powered by <a href="/index.jsp" target="_self">IOT WETWORK COMPANY</a></p>
</footer>
</div>

index.jsp 파일에서는 각 header,body,footer에서 필요한 내용들을 인클루드 해주도록 하자.

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="/css/style.css" rel="stylesheet">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<title>Insert title here</title>
</head>

<body>
	<jsp:include page="header.jsp"></jsp:include>
	<jsp:include page="body.jsp"></jsp:include>
	<jsp:include page="footer.jsp"></jsp:include>
</body>
</html>

그리고, index.jsp를 실행해보자.

그리고3.5.1/jquery.min.js 을 jquery 사이트에서 다운받자.

그 이유는 해당 사이트에 접속할 수 없으면 이 CSS에 대한 내용을 사용하지 못하기 때문이다.

아래의 홈페이지로 이동한다.

jquery.com/

그리고 download jquery를 선택한다.

위의 버전을 다운 받는데, 마우스 우클릭으로 "다른 이름으로 링크 저장" 을 선택한다.

그리고 이름을 위와 같이 두도록 한다. 경로는 일단 바탕화면으로 한다.

jquery-3.5.1.min.js 파일을 CTRL + C로 복사해서 자바의 WebContent/js에 CTRL + V해서 붙여넣는다.

위와 같은 모습이 된다.

그리고 현재 프로젝트의 경로에 다음과 같이 해당 파일이 있음을 알 수 있다.

그러면, 기존의 아래 경로 대신에

아래와 같이 적으면 된다.

나머지 내용들을 보자.

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/css/style.css" rel="stylesheet">
<script src="/js/jquery-3.5.1.min.js"></script>

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  
<title>Insert title here</title>
</head>

<body>
	<jsp:include page="header.jsp"></jsp:include>
	<jsp:include page="body.jsp"></jsp:include>
	<jsp:include page="footer.jsp"></jsp:include>
</body>
</html>

header.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<div>
<!--nav 태그에서 메뉴를 만들면 된다.-->
    <nav class="navbar">
        <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">HOME</a></li>
            <li><a href="#">HOME</a></li>
            <li><a href="#">HOME</a></li>
            <li><a href="#">HOME</a></li>
        </ul>
    </nav>
</div>

footer.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<div>
<!-- Footer -->
<footer class="w3-container w3-padding-64 w3-center w3-opacity">  
  <div class="w3-xlarge w3-padding-32">
    <i class="fa fa-facebook-official w3-hover-opacity"></i>
    <i class="fa fa-instagram w3-hover-opacity"></i>
    <i class="fa fa-snapchat w3-hover-opacity"></i>
    <i class="fa fa-pinterest-p w3-hover-opacity"></i>
    <i class="fa fa-twitter w3-hover-opacity"></i>
    <i class="fa fa-linkedin w3-hover-opacity"></i>
 </div>
 <p>Powered by <a href="/index.jsp" target="_self">IOT WETWORK COMPANY</a></p>
</footer>
</div>

아래는 프로젝트 내의 폴더와 파일의 구조이다.

아래의 내용으로 이동해서 로그인 폼을 만들어보자.

designatedroom87.tistory.com/319

게시판 만들기 - 2. 로그인 폼 만들기

아래의 내용과 이어진다. designatedroom87.tistory.com/318?category=901206 게시판 만들기 - 1. 기본 설정 우선, 아래의 두 파일을 다운 받아서 열어보도록 하자. 아래의 내용을 기반으로 환경 구축을 할 것이

designatedroom87.tistory.com

'JAVA > 웹 프로그래밍 - JSP' 카테고리의 다른 글

게시판 만들기 - 3. 로그인 하고 세션 유지 & 로그인 상태에 따라 게시판 보기 (0)	2020.11.24
게시판 만들기 - 2. 로그인 폼 만들기 (0)	2020.11.23
taglib문법 (0)	2020.11.17
MVC(Model View Control)2 (0)	2020.11.13
MVC(Model View Control)1 (0)	2020.11.11

ABOUT ME

Design Design

'JAVA > 웹 프로그래밍 - JSP' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'JAVA > 웹 프로그래밍 - JSP' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바