프로그래밍/자바, JDBC
뉴렉처 학습(서블릿/JSP) 50강 ~ 51강
현호s
2020. 6. 3. 16:30
반응형
#50강 수업용 프로젝트 준비하기
- 파일 다운로드 후(http://www.newlecture.com/customer/notice/9) 압축해제 후 WebContent에 복사
- 실행 하여 확인해본 후 http://localhost:8080/admin/html.index 입력하여 관리자 관련 항목으로 진입
- 공지사항 관리와 관련된 구축작업 진행 예정(sql 사용 예정)
#51강 JSP를 이용해서 자바 웹 프로그램 만들기 시작
*Jasper를 이용한 코드 작성 방법
- 서블릿을 직접 손대지 않고 JSP만 갖고 적절하게 활용.(코드블럭 이용)(확장자는 JSP 이지만, 결과물은 서블릿이다.)
<%
int x = 3;
int y = 4;
%>
<html>
...
<form action="add.jsp" method="get">
<ul>
<li><label for="x">X :</label><input name="x" /></li>
<li><label for="y">Y :</label><input name="y" /></li>
</ul>
<p><input type="submit" value="Sum " /></p>
</form>
// 출력 코드블럭
<%out.print(x+y);%>
// 위 출력 코드블럭과 동일한 결과를 나타내지만, 단순화.
<%=(x+y)%>
</body>
</html>- 모든 JSP 페이지에 한글 깨짐을 방지하기 위한 페이지 지시자 등록( JSP 파일 최상단에 등록 )
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
*작업시작
- notice > list.html 파일을 복사 하여 list.jsp 파일 생성
- 생성 후 열여보면 기본 인코딩 방식이 UTF-8이 아니기 때문에 아래코드처럼 한글이 깨져서 나온다.
- 이를 해결하기 위해
- 상단 file > Properties > 밑에 text-file-encoding을 other을 눌러서 UTF-8로 변경
- 최상단에 출력 시 UTF-8로 출력되도록 입력 위에서 언급했던 페이지 지시자 등록
// 한글 깨짐현상 해결을 위한 페이지 지시자
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>// 인코딩 방식이 UTF-8이 아니기 때문에 아래와같이 한글깨짐 현상이 발생.
<!DOCTYPE html>
<html>
<head>
<title>ì½ë© ì 문ê°ë¥¼ ë§ë¤ê¸° ìí ì¨ë¼ì¸ ê°ì ìì¤í
</title>
<meta charset="UTF-8">
<title>ê³µì§ì¬í목ë¡</title>
<link href="/css/customer/layout.css" type="text/css" rel="stylesheet" />
<style>
#visual .content-container{
height:inherit;
display:flex;
align-items: center;
background: url("../../images/customer/visual.png") no-repeat center;
}
</style>
</head>
<body>
<!-- header ë¶ë¶ -->
<header id="header">
<div class="content-container">
<!-- ---------------------------<header>--------------------------------------- -->
<h1 id="logo">
<a href="/index.html">
<img src="/images/logo.png" alt="ë´ë ì² ì¨ë¼ì¸" />
</a>
</h1>
<section>
<h1 class="hidden">í¤ë</h1>
<nav id="main-menu">
<h1>ë©ì¸ë©ë´</h1>
<ul>
<li><a href="/guide">íìµê°ì´ë</a></li>
<li><a href="/course">ê°ì¢ì í</a></li>
<li><a href="/answeris/index">AnswerIs</a></li>
</ul>
</nav>
<div class="sub-menu">
<section id="search-form">
<h1>ê°ì¢ê²ì í¼</h1>
<form action="/course">
<fieldset>
<legend>ê³¼ì ê²ìíë</legend>
<label>ê³¼ì ê²ì</label>
<input type="text" name="q" value="" />
<input type="submit" value="ê²ì" />
</fieldset>
</form>
</section>
<nav id="acount-menu">
<h1 class="hidden">íìë©ë´</h1>
<ul>
<li><a href="/index.html">HOME</a></li>
<li><a href="/member/login.html">ë¡ê·¸ì¸</a></li>
<li><a href="/member/agree.html">íìê°ì
</a></li>
</ul>
</nav>
<nav id="member-menu" class="linear-layout">
<h1 class="hidden">ê³ ê°ë©ë´</h1>
<ul class="linear-layout">
<li><a href="/member/home"><img src="/images/txt-mypage.png" alt="ë§ì´íì´ì§" /></a></li>
<li><a href="/notice/list.html"><img src="/images/txt-customer.png" alt="ê³ ê°ì¼í°" /></a></li>
</ul>
</nav>
</div>
</section>
</div>
</header>
<!-- --------------------------- <visual> --------------------------------------- -->
<!-- visual ë¶ë¶ -->
<div id="visual">
<div class="content-container"></div>
</div>
<!-- --------------------------- <body> --------------------------------------- -->
<div id="body">
<div class="content-container clearfix">
<!-- --------------------------- aside --------------------------------------- -->
<!-- aside ë¶ë¶ -->
<aside class="aside">
<h1>ê³ ê°ì¼í°</h1>
<nav class="menu text-menu first margin-top">
<h1>ê³ ê°ì¼í°ë©ë´</h1>
<ul>
<li><a class="current" href="/customer/notice">ê³µì§ì¬í</a></li>
<li><a class="" href="/customer/faq">ì주íë ì§ë¬¸</a></li>
<li><a class="" href="/customer/question">ìê°ë¬¸ì</a></li>
<li><a class="" href="/customer/event">ì´ë²¤í¸</a></li>
</ul>
</nav>
<nav class="menu">
<h1>íë ¥ì
ì²´</h1>
<ul>
<li><a target="_blank" href="http://www.notepubs.com"><img src="/images/notepubs.png" alt="ë
¸í¸íì¤" /></a></li>
<li><a target="_blank" href="http://www.namoolab.com"><img src="/images/namoolab.png" alt="ë무ë©ì°êµ¬ì" /></a></li>
</ul>
</nav>
</aside>
<!-- --------------------------- main --------------------------------------- -->
<main class="main">
<h2 class="main title">ê³µì§ì¬í</h2>
<div class="breadcrumb">
<h3 class="hidden">ê²½ë¡</h3>
<ul>
<li>home</li>
<li>ê³ ê°ì¼í°</li>
<li>ê³µì§ì¬í</li>
</ul>
</div>
<div class="search-form margin-top first align-right">
<h3 class="hidden">ê³µì§ì¬í ê²ìí¼</h3>
<form class="table-form">
<fieldset>
<legend class="hidden">ê³µì§ì¬í ê²ì íë</legend>
<label class="hidden">ê²ìë¶ë¥</label>
<select name="f">
<option value="title">ì 목</option>
<option value="writerId">ìì±ì</option>
</select>
<label class="hidden">ê²ìì´</label>
<input type="text" name="q" value=""/>
<input class="btn btn-search" type="submit" value="ê²ì" />
</fieldset>
</form>
</div>
<div class="notice margin-top">
<h3 class="hidden">ê³µì§ì¬í 목ë¡</h3>
<table class="table">
<thead>
<tr>
<th class="w60">ë²í¸</th>
<th class="expand">ì 목</th>
<th class="w100">ìì±ì</th>
<th class="w100">ìì±ì¼</th>
<th class="w60">ì¡°íì</th>
</tr>
</thead>
<tbody>
<tr>
<td>8</td>
<td class="title indent text-align-left"><a href="detail.html">ì¤íë§ 8ê°ê¹ì§ì ìì ì½ë</a></td>
<td>newlec</td>
<td>
2019-08-18
</td>
<td>146</td>
</tr>
<tr>
<td>7</td>
<td class="title indent text-align-left"><a href="detail.html">ì¤íë§ DI ìì ì½ë</a></td>
<td>newlec</td>
<td>
2019-08-15
</td>
<td>131</td>
</tr>
<tr>
<td>6</td>
<td class="title indent text-align-left"><a href="detail.html">ë´ë ì¤ 9ì ì´ êµê¸°ê³¼ì ëª¨ì§ ìë´</a></td>
<td>newlec</td>
<td>
2019-06-11
</td>
<td>517</td>
</tr>
<tr>
<td>5</td>
<td class="title indent text-align-left"><a href="detail.html">ë´ë ì² ê°ì ìê° ë°©ì ìë´</a></td>
<td>newlec</td>
<td>
2019-05-24
</td>
<td>448</td>
</tr>
<tr>
<td>4</td>
<td class="title indent text-align-left"><a href="detail.html">ìë° êµ¬ì¡°ì ì¸ íë¡ê·¸ëë° ê°ì ìì íì¼</a></td>
<td>newlec</td>
<td>
2019-04-24
</td>
<td>520</td>
</tr>
</tbody>
</table>
</div>
<div class="indexer margin-top align-right">
<h3 class="hidden">íì¬ íì´ì§</h3>
<div><span class="text-orange text-strong">1</span> / 1 pages</div>
</div>
<div class="margin-top align-center pager">
<div>
<span class="btn btn-prev" onclick="alert('ì´ì íì´ì§ê° ììµëë¤.');">ì´ì </span>
</div>
<ul class="-list- center">
<li><a class="-text- orange bold" href="?p=1&t=&q=" >1</a></li>
</ul>
<div>
<span class="btn btn-next" onclick="alert('ë¤ì íì´ì§ê° ììµëë¤.');">ë¤ì</span>
</div>
</div>
</main>
</div>
</div>
<!-- ------------------- <footer> --------------------------------------- -->
<footer id="footer">
<div class="content-container">
<h2 id="footer-logo"><img src="/images/logo-footer.png" alt="íì¬ì ë³´"></h2>
<div id="company-info">
<dl>
<dt>주ì:</dt>
<dd>ìì¸í¹ë³ì </dd>
<dt>ê´ë¦¬ìë©ì¼:</dt>
<dd>admin@newlecture.com</dd>
</dl>
<dl>
<dt>ì¬ì
ì ë±ë¡ë²í¸:</dt>
<dd>111-11-11111</dd>
<dt>íµì í매ì
:</dt>
<dd>ì ê³ ì 1111 í¸</dd>
</dl>
<dl>
<dt>ìí¸:</dt>
<dd>ë´ë ì²</dd>
<dt>ëí:</dt>
<dd>í길ë</dd>
<dt>ì íë²í¸:</dt>
<dd>111-1111-1111</dd>
</dl>
<div id="copyright" class="margin-top">Copyright â newlecture.com 2012-2014 All Right Reserved.
Contact admin@newlecture.com for more information</div>
</div>
</div>
</footer>
</body>
</html>
- 공지사항 게시물 기존 정적 게시물 > 동적(DB에서 받아오도록) 게시물로 추후 변경작업 예정
- 일단은 공지사항 게시물을 반복문을 이용하여 출력
<!-- 공지사항 게시물 기존 정적 게시물 > 동적(DB에서 받아오도록) 게시물로 변경예정 -->
<!-- 기존 공지사항 게시물
<tr>
<td>8</td>
<td class="title indent text-align-left"><a href="detail.html">스프링 8강까지의 예제 코드</a></td>
<td>newlec</td>
<td>
2019-08-18
</td>
<td>146</td>
</tr>
-->
<!-- 반복문을 이용 한 동적 게시물로의 변경작업 중 -->
<% for(int i = 0; i < 10; i++){ %>
<tr>
<td><%=(i + 1)%></td>
<td class="title indent text-align-left"><a href="detail.html">스프링 8강까지의 예제 코드</a></td>
<td>newlec</td>
<td>
2019-08-18
</td>
<td>146</td>
</tr>
<%} %>
*코드블럭의 종류
- Jasper가 작성할 서블릿 코드에 아래 코드 블록을 적절히 이용하여 구현.
<% %> : 일반 로직 작성하는 코드블럭
<%= %> : 출력을 위한 코드블럭
<%! %> : 맴버 변수, 맴버 함수 등을 정의하기 위한 코드블럭
<%@ %> : 자바 코드는 아니지만, 지시를 하기 위한 코드블럭 반응형