2019/09/02 프로젝트 (intro&template)

미니 프로젝트

show view -> preject exploer 프로젝트 목록 화면이 사라졌을때 체크

1. 프로젝트 생성

new-> dynamic web project -> myweb 프로젝트 생성

▶ web.xml 생성 꼭 체크해야한다 web.xml 위치를 확인해 보자

2. 내부객체를 사용하려면

외부라이브러리 복사(servlet-api.jar, ojdbc6.jar)

1) servlet-api.jar
     D:\톰캣설치폴더\lib

2) ojdbc6.jar
     C:\오라클설치폴더\app\oracle\product\11.2.0\server\jdbc\lib

▶위의 과정을 걸쳐 프로젝트의 WEB-INF의 lib폴더에 라이브러리를 넣는다

3. 첫 페이지 index.jsp 파일생성

파일 생성 후에 basicWeb 프로젝트에서 발췌해 놨던 simply me 코드를 복사해와 편집한다

▶ 라이브러리 경로(링크 편집 전)

▶ 라이브러리 경로(링크 편집 후)

▶ 편집후 라이브러리를 내 로컬 저장소에 맞게 경로를 만들어 준후, basicWeb 프로젝트에서 받았던 bootstrap 라이브러리를 넣어준다

※라이브러리 경로를 잘 맞게 해주었는데 화면 구현이 제대로 되지 않는다

우선 로컬에서의 경로가 잘 맞지 않기 때문에 처음에 발췌했던 링크를 걸어서 이용하자

구현되지 않던거는 추후에 수정해서 다시 올리겠다

4. HTML 프런트단

<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="/index.jsp">HOME</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="./bbs/bbsList.jsp"><strong>게시판</strong></a></li>
        <li><a href="./notice/noticeList.jsp"><strong>공지사항</strong></a></li>
        <li><a href="./member/loginForm.jsp"><strong>로그인</strong></a></li>
        <li><a href="./pds/pdsList.jsp"><strong>포토갤러리</strong></a></li>
        <li><a href="./mail/mailForm.jsp"><strong>메일보내기</strong></a></li>
        <li><a href="./bbs2/bbsList.do"><strong>게시판(MVC)</strong></a></li>
        <li><a href="./member2/loginForm.do"><strong>로그인(MVC)</strong></a></li>
      </ul>
    </div>
  </div>
</nav>

▶html의 index 편집부분에 가서 게시판,공지사항,로그인,포토갤러리,메일,게시판,로그인 을 추가해

프로젝트의 상대적 경로

▶ myweb이라는 경로가 내 로컬에서만 myweb이기 때문에 모두에게 맞는 프로젝트 경로를 jsp를 이용해서 경로 설정을 해준다

<a class="navbar-brand" href="<%=request.getContextPath()%>/index.jsp">HOME</a>

Container

▶ 원본에 있던 second container 와 third container 을 지우고 first 와 footer 만 남겨서 편집해 주었다

<!-- First Container -->
<div class="container-fluid bg-1 text-center">
  <h3 class="margin">Welcome to MyWeb</h3>
  <img src="images/pabbiyong.jpg" class="img-responsive img-circle margin" style="display:inline" alt="Bird" width="350" height="350">
  <h3>I'm an Papillon</h3>
</div>

<!-- 본문시작 -->
<!-- Container 시작 -->
<div class="container-fluid bg-4 text-center">
      <div class="row">
          <div class="col-sm-12">
          </div>
      </div><!-- row end -->

  <p>Copyright ⓒ 2019 MYWEB<a href=""></a></p> 
</div>
<!-- Container 끝  -->

5. CSS 와 Javascript 분리

css 파일과 javascript 코드들을 분리하기 위해 파일을 생성시켜 주었다

mystlye.css

body {
    font: 20px Montserrat, sans-serif;
    line-height: 1.8;
    color: #f5f6f7;
  }
  p {font-size: 16px;}
  .margin {margin-bottom: 45px;}
  .bg-1 { 
    background-color: #3eb3ed ; /* Green */
    color: #ffffff;
      background: #00B4DB;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #0083B0, #00B4DB);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #0083B0, #00B4DB); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  }
  .bg-2 { 
    background-color: #474e5d; /* Dark Blue */
    color: #ffffff;
  }
  .bg-3 { 
    background-color: #ffffff; /* White */
    color: #555555;
  }
  .bg-4 { 
    background-color: #2f2f2f; /* Black Gray */
    color: #fff;
  }
  .container-fluid {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .navbar {
    padding-top: 15px;
    padding-bottom: 15px;
    border: 0;
    border-radius: 0;
    margin-bottom: 0;
    font-size: 12px;
    letter-spacing: 5px;
  }
  .navbar-nav  li a:hover {
    color: #1abc9c !important;
  }

.date{ 
    background-color: black;
    color: white;
}

    .date {
  display: inline-block;
  border-radius: 4px;
  background-color: pink;
  border: none;
  color: white;
  text-align: center;
  font-size: 15px;
  padding: 5px;
  width: 60px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 1px;
}

myscript.js

function showTime(){
          //alert(moment().year());
          var now=moment();
          var hour=now.hour();
          var min=now.minute();
          var sec=now.second();

          $("#hour").text(hour+"시").appendTo();
          $("#minutes").text(min+"분").appendTo();
          $("#sec").text(sec+"초").appendTo();
      }//showTime() end

  function createYearMonthDate(){

      var nowYear=moment().year();
      var nowMonth=moment().month()+1;
      var nowDate=moment().date();

      $("#year").text(nowYear+"년").appendTo();
      $("#month").text(nowMonth+"월").appendTo();
      $("#day").text(nowDate+"일").appendTo();
  }

6. footer 와 header 를 분리해서 편집하기 편하게 template을 만들어 보자

header.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html >
<html lang="ko">
<head>
  <title>My Web</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="css/mystyle.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  <script src="js/myscript.js"></script>

  <style>

  </style>
</head>
<body>
<!-- 메인 카테고리 -->
<!-- Navbar -->
<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="<%=request.getContextPath()%>/index.jsp">HOME</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="./bbs/bbsList.jsp"><strong>게시판</strong></a></li>
        <li><a href="./notice/noticeList.jsp"><strong>공지사항</strong></a></li>
        <li><a href="./member/loginForm.jsp"><strong>로그인</strong></a></li>
        <li><a href="./pds/pdsList.jsp"><strong>포토갤러리</strong></a></li>
        <li><a href="./mail/mailForm.jsp"><strong>메일보내기</strong></a></li>
        <li><a href="./bbs2/bbsList.do"><strong>게시판(MVC)</strong></a></li>
        <li><a href="./member2/loginForm.do"><strong>로그인(MVC)</strong></a></li>
      </ul>
    </div>
  </div>
</nav>
<!-- 메인 카테고리 끝  -->

<!-- 본문시작 -->
<!-- Container 시작 -->
  <div class="container-fluid bg-3 text-center">
      <div class="row">
          <div class="col-sm-12">

footer.jsp

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

          </div>
      </div><!-- row end -->
  </div><!-- Container 끝  -->


<!--Footer  -->
  <footer class="container-fluid bg-4 text-center">
  <p>Copyright ⓒ 2019 MYWEB</p> 
  </footer>
<!-- Container 끝  -->
</body>
</html>

template.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="header.jsp"%>
<!-- 본문시작  -->
    여기에서 본문내용을 작성하세요!!
<!-- 본문 끝  -->
<%@ include file="footer.jsp"%>