이제 이와 같은 웹 페이지를 만들어 볼 것이다.
게시판은 답변형, 댓글형 등의 게시판이 있는데 댓글형은 다음에 만들어보고 여기서는 답변형 게시판을 만들 것이다.
로그인 기능도 구현해보고 포토 갤러리에는 파일을 첨부할 수 있도록 만들 것이다. 메일 보내기도 해 볼 것인데 서버를 직접 구축하지는 않고 서비스를 이용할 것이다. 그리고 호스팅까지 해보자
새로운 Dynamic Web Project를 생성하자. java를 통해 웹페이지를 만들 때 가장 기본은 Dynamic Web Project이다.
프로젝트명은 myweb으로 한다.
작업에 필요한 폴더들을 생성하고 css 폴더에는 reset.css, js 폴더에는 jquery와 moment, lib 폴더에 jdbc와 servlet(내부 객체 사용 시 에러 표시가 안 뜨게 하기 위함)을 복사하여 넣어놓자
Backend 작업을 위한 패키지를 생성하자. 패키지명은 net.utility로 한다. 그리고 basic04_web에서 만들어 놓은 DBOepn.java와 DBClose.java를 복사하여 붙여 넣자
인트로 화면
빨간색 부분은 어느 페이지로 가던 항상 고정되는 부분이고 초록색 페이지만 변경되는 부분이다.
index.jsp파일을 생성한다.
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_theme_me_complete&stacked=h
W3Schools online HTML editor
The W3Schools online code editor allows you to edit code and view the result in your browser
www.w3schools.com
여기서 소스코드를 가져와 그대로 붙여 넣는다.
그리고 스타일 태그 안의 코드를 따로 layout.css로 만들고 index.jsp이 import 한다.
index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<!-- Theme Made By www.w3schools.com - No Copyright -->
<title>index.jsp</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/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.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- 사용자 정의 스타일과 자바스크립트 -->
<!-- 주의사항 : CSS와 JS는 각 웹브라우저에서 쿠키 삭제하고 확인할 것 -->
<!-- layout.css import -->
<link rel="stylesheet" href="./css/layout.css">
</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="#">Me</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">WHO</a></li>
<li><a href="#">WHAT</a></li>
<li><a href="#">WHERE</a></li>
</ul>
</div>
</div>
</nav>
<!-- First Container -->
<div class="container-fluid bg-1 text-center">
<h3 class="margin">Who Am I?</h3>
<img src="bird.jpg" class="img-responsive img-circle margin" style="display:inline" alt="Bird" width="350" height="350">
<h3>I'm an adventurer</h3>
</div>
<!-- Second Container -->
<div class="container-fluid bg-2 text-center">
<h3 class="margin">What Am I?</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<a href="#" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-search"></span> Search
</a>
</div>
<!-- Third Container (Grid) -->
<div class="container-fluid bg-3 text-center">
<h3 class="margin">Where To Find Me?</h3><br>
<div class="row">
<div class="col-sm-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<img src="birds1.jpg" class="img-responsive margin" style="width:100%" alt="Image">
</div>
<div class="col-sm-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<img src="birds2.jpg" class="img-responsive margin" style="width:100%" alt="Image">
</div>
<div class="col-sm-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<img src="birds3.jpg" class="img-responsive margin" style="width:100%" alt="Image">
</div>
</div>
</div>
<!-- Footer -->
<footer class="container-fluid bg-4 text-center">
<p>Bootstrap Theme Made By <a href="https://www.w3schools.com">www.w3schools.com</a></p>
</footer>
</body>
</html>
layout.css
@charset "UTF-8";
/* layout.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: #1abc9c; /* Green */
color: #ffffff;
}
.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: 70px;
padding-bottom: 70px;
}
.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;
}
index.jsp 수정
메인 카테고리
빨간색 물결로 표시된 myweb처럼 저렇게 절대적인 주소를 사용하면 안 된다. 이 이름은 개발 당시에 필요하지 실제 배포할 때는 다른 이름으로 준다. 따라서 변수로 처리해야 한다.
<!-- 메인 카테고리 시작 -->
<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">게시판</a></li>
<li><a href="./notice/noticeList.jsp">공지사항</a></li>
<li><a href="./member/loginForm.jsp">로그인</a></li>
<li><a href="./pds/pdsList.jsp">포토갤러리</a></li>
<li><a href="./mail/mailForm.jsp">메일보내기</a></li>
</ul>
</div>
</div>
</nav><!-- 메인카테고리 끝 -->
First Container
<!-- First Container -->
<div class="container-fluid bg-1 text-center">
<img src="./images/flower.png" style="display:inline" alt="ITWILL" width="50%">
</div><!-- First Container 끝 -->
Second Container는 삭제하였고 Third Container는 Contents로 변경하였다.
Contents
<!-- Contents 시작 -->
<div class="container-fluid bg-3 text-center">
<div class="row">
<div class="col-xs-12">
<!-- 본문 시작 -->
본문은 여기에 작성해 주세요
<!-- 본문 끝 -->
</div><!-- col 끝 -->
</div><!-- row 끝 -->
</div><!-- Contents 끝 -->
Footer
<!-- Footer -->
<footer class="container-fluid bg-4 text-center">
Copyright © 2022 MYWEB
</footer>
앞서 빨간색으로 표시한 고정된 부분과 파란색으로 표시한 변동되는 부분으로 나누어서 작업할 것이라고 했다. 윗부분을 header.jsp, 아랫부분을 footer.jsp로 나눠 작업할 것이다.
이를 코드로 보자면 아래와 같다.
이제 index.jsp는 나중을 위해 그대로 두고 복사본을 만들어 여기서 작업하자
index2.jsp를 복사해서 herder.jsp와 footer.jsp를 만든다.
header.jsp
header.jsp에서 해당 부분을 삭제한다. 또 First Container 부분도 삭제하자
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<!-- Theme Made By www.w3schools.com - No Copyright -->
<title>index.jsp</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/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.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- 사용자 정의 스타일과 자바스크립트 -->
<!-- 주의사항 : CSS와 JS는 각 웹브라우저에서 쿠키 삭제하고 확인할 것 -->
<!-- layout.css import -->
<link rel="stylesheet" href="../css/layout.css">
</head>
<body>
<!-- 메인 카테고리 시작 -->
<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()%>/index2.jsp">HOME</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="../bbs/bbsList.jsp">게시판</a></li>
<li><a href="../notice/noticeList.jsp">공지사항</a></li>
<li><a href="../member/loginForm.jsp">로그인</a></li>
<li><a href="../pds/pdsList.jsp">포토갤러리</a></li>
<li><a href="../mail/mailForm.jsp">메일보내기</a></li>
</ul>
</div>
</div>
</nav><!-- 메인카테고리 끝 -->
<!-- Contents 시작 -->
<div class="container-fluid bg-3 text-center">
<div class="row">
<div class="col-xs-12">
footer.jsp
본문 아랫부분에 위치한 <!-- col 끝--> 위로 전부 삭제한다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
</div><!-- col 끝 -->
</div><!-- row 끝 -->
</div><!-- Contents 끝 -->
<!-- Footer -->
<footer class="container-fluid bg-4 text-center">
Copyright © 2022 MYWEB
</footer>
</body>
</html>
다음으로 template.jsp를 생성하여 header.jsp와 footer.jsp를 합칠 것이다.
template.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="../header.jsp"%>
<!-- 본문 시작 template.jsp-->
본문은 여기에 작성해 주세요
<!-- 본문 끝 -->
<%@ include file="../footer.jsp"%>
'웹개발 교육 > jsp' 카테고리의 다른 글
| [53일] jsp (19) - myweb 프로젝트(게시판-답변 쓰기) (0) | 2022.10.13 |
|---|---|
| [51~52일] jsp (18) - myweb 프로젝트(게시판) (0) | 2022.10.11 |
| [50일] jsp (16) - 성적 데이터베이스 관련 비즈니스 로직 구현 (0) | 2022.10.07 |
| [50일] jsp (15) - Java Bean (0) | 2022.10.07 |
| [50일] jsp (14) - 계산기 (0) | 2022.10.07 |
