0519 | Servlet&Jsp (6) //게시글 JSP프로그래밍, 스파게티코드를 MVC로 분할, 데이터구조화, view은닉, tag라이브러리와 JSTL

unikue 2023. 5. 19. 15:02

2023. 5. 19. 15:02

[1] JSP 프로그래밍

: Jasper가 작성할 서블릿 코드에 코드 블록을 적절히 끼워 달라고 지시하는 방식

<% %>

<%= %>

<%! %> 멤버변수, 멤버함수 정의

<%@ %> 지시용 코드블럭

1-1) HTML ▶ JSP 만들기

① 복사하여 확장자 변경 .jsp

② 한글이 깨져있을것이므로 file-properities 나 alt+enter

③ text file encoding 을 utf-8로 변경

④ out.write()로 렌더링시 깨지지 않도록 페이지 지시자 등록

* 모든 jsp페이지에 한글 깨짐을 방지하기 위한 페이지 지시자 등록

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

1-2) JSP에 DB연결하기

<%@page import="java.sql.ResultSet"%> // connection에서 ctrl+space를 통해 import시키기
<%@page import="java.sql.Statement"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%
String url = "jdbc:oracle:thin:@localhost:1521/xepdb1";
String sql = "SELECT * FROM NOTICE WHERE HIT>10";

Class.forName("oracle.jdbc.driver.OracleDriver");
Connection con = DriverManager.getConnection(url, "id", "pw");
Statement st = con.createStatement();
ResultSet rs = st.executeQuery(sql);
%>

<!DOCTYPE html>
<html>
<tbody>

		<%
		while(rs.next()) {
		%>
// DB에 있는 이름에 맞춰서 정보를 꽂아준다
		<tr>
			<td><%= rs.getInt("ID")%></td>
			<td class="title indent text-align-left"><a	href="detail.html"><%= rs.getString("TITLE") %></a></td>
			<td><%=rs.getString("WRITER_ID") %></td>
			<td><%=rs.getDate("REGDATE") %></td>
			<td><%=rs.getInt("HIT") %></td>
		</tr>

		<%
		}
		%>

</tbody>
</html>

<%
rs.close(); // 자원을 사용 후 클로즈
st.close();
con.close();
%>

* build path연결시에는 기존처럼 java buildpath 내에 jar파일을 연결하는게 아니라 (톰캣 구동시 경로가 또 변경되므로) WEB_INF하위의 lib안에 jar파일을 넣어준다. 웹개발시에는 이렇게 해줘야 함!!!!!

1-3) 게시글 보여주기

localhost/notice/detail.jsp?id=3 👉 쿼리값을 전달하는 방식으로 해당 게시글을 연결시켜 보여줄 수 있다.

<%

int id = Integer.parseInt(request.getParameter("id")); // 사용자 입력값을 받음

String url = "jdbc:oracle:thin:@localhost:1521/xepdb1";
String sql = "SELECT * FROM NOTICE WHERE ID=?";

Class.forName("oracle.jdbc.driver.OracleDriver");
Connection con = DriverManager.getConnection(url, "id", "pw"); // 서버,아이디,패스워드
PreparedStatement st = con.prepareStatement(sql); // id를 ?로 받기 때문에 preparedStatement로 변경하여 지정
st.setInt(1, id);

ResultSet rs = st.executeQuery(); // 쿼리문을 읽은 결과를 rs.next()로 조회
rs.next();
%>

<tbody>

<%
	while(rs.next()) {
%>

<tr>
	<td><%= rs.getInt("ID")%></td>
	<td class="title indent text-align-left">
    <a href="detail.jsp?id=<%= rs.getInt("ID")%>"><%= rs.getString("TITLE") %></a></td>
    //detail.html에서 jsp로 변경, 쿼리값을 받는 id=? 자리에 아이디를 받는 <%= rs.getInt("ID")%>를 그대로 넣어준다
	<td><%=rs.getString("WRITER_ID") %></td>
	<td><%=rs.getDate("REGDATE") %></td>
	<td><%=rs.getInt("HIT") %></td>
</tr>

<%
	}
%>

</tbody>

<div class="margin-top text-align-center">
					<a class="btn btn-list" href="list.jsp">목록</a>
                    //목록을눌렀을때 원래 list페이지로 갈 수 있도록 list.html이 아닌 list.jsp로 변경
</div>

[2] MVC 모델2로 수정

(1) Controller인 NoticeDetailController.java파일 생성

			rs.next();
            
			String title = rs.getString("TITLE");
			Date regdate = rs.getDate("REGDATE");
			String writerId = rs.getString("WRITER_ID");
			String hit = rs.getString("HIT");
			String files = rs.getString("FILES");
			String content = rs.getString("CONTENT");
            
			request.setAttribute("title", title);
			request.setAttribute("regdate", regdate);
			request.setAttribute("writerId", writerId);
			request.setAttribute("hit", hit);
			request.setAttribute("files", files);
			request.setAttribute("content", content);
			
			
			rs.close(); // 자원을 사용 후 클로즈
			st.close();
			con.close();
		

		//redirect 다른페이지로 아예 가버리는 방법 예)로그인하고 다시오라고 로그인페이지로 보내버림
		//forward 작업 내용을 이어받아서 처리하고 싶을 때
		
        request.getRequestDispatcher("/notice/detail.jsp").forward(request, response);
        //컨트롤러 값을 뷰단으로 forward하기

(2) 원래는 list에서 Detail.jsp로 넘어갔지만 Detail.jsp는 이제 view역할만 하므로 컨트롤러주소로 연결해야 한다.

//list.jsp
<td class="title indent text-align-left">
<a href="detail?id=<%= rs.getInt("ID")%>"><%= rs.getString("TITLE") %></a></td>

----
//컨트롤러
@WebServlet("/notice/detail")
public class NoticeDetailController extends HttpServlet {...}

[3] 데이터의 구조화

: Model데이터를 위한 구조화의 필요성

: 개념적으로 말할 수 있는 데이터 집합 = 개념화된 데이터 집합 = entity = 개체 = 계층화된 구조적인 데이터

: 낱개로 설정되어있는 데이터를 한묶음으로 묶어주기

//NoticeDetailController.java

	String title = rs.getString("TITLE");
	Date regdate = rs.getDate("REGDATE");
	String writerId = rs.getString("WRITER_ID");
	String hit = rs.getString("HIT");
	String files = rs.getString("FILES");
	String content = rs.getString("CONTENT");

	Notice notice = new Notice(id,title,regdate,writerId, hit, files, content); //Notice 객체 생성필요
	request.setAttribute("n", notice); // entity를 만들어서 값을 담기
			
	/*
	request.setAttribute("title", title);
	request.setAttribute("regdate", regdate);
	request.setAttribute("writerId", writerId);
	request.setAttribute("hit", hit);
	request.setAttribute("files", files);
	request.setAttribute("content", content);
	*/
			
			
	rs.close(); // 자원을 사용 후 클로즈
	st.close();
	con.close();
			
		} catch (ClassNotFoundException e) {
			e.printStackTrace();	
		} catch (SQLException e) {
			e.printStackTrace();
		}
		
		
		request.getRequestDispatcher("/notice/detail.jsp").forward(request, response);
	}

//Notice.java

package com.newlecturepre.web.entity; // entity패키지를 따로만들어서 관리

import java.util.Date;

public class Notice {
	private int id;
	private String title;
	private Date regdate;
	private String writerId;
	private String hit;
	private String files;
	private String content;

	public Notice() {
	}

	public Notice(int id, String title, Date regdate, String writerId, String hit, String files, String content) {
		this.id = id;
		this.title = title;
		this.regdate = regdate;
		this.writerId = writerId;
		this.hit = hit;
		this.files = files;
		this.content = content;
	}

	public int getId() {
		return id;
	}

	public void setId(int id) {
		this.id = id;
	}

	public String getTitle() {
		return title;
	}

	public void setTitle(String title) {
		this.title = title;
	}

	public Date getRegdate() {
		return regdate;
	}

	public void setRegdate(Date regdate) {
		this.regdate = regdate;
	}

	public String getWriterId() {
		return writerId;
	}

	public void setWriterId(String writerId) {
		this.writerId = writerId;
	}

	public String getHit() {
		return hit;
	}

	public void setHit(String hit) {
		this.hit = hit;
	}

	public String getFiles() {
		return files;
	}

	public void setFiles(String files) {
		this.files = files;
	}

	public String getContent() {
		return content;
	}

	public void setContent(String content) {
		this.content = content;
	}

	@Override
	public String toString() {
		return "Notice [id=" + id + ", title=" + title + ", regdate=" + regdate + ", writerId=" + writerId + ", hit="
				+ hit + ", files=" + files + ", content=" + content + "]";
	}

}

[4] view 페이지 은닉하기

: SRC-MAIN-WEBAPP은 누구나 접근할 수 있는 파일인 반면 WEB-INF는 비공개파일만 모아두는 폴더. 해당 파일들을 WEB-INF 하위로 옮긴다.

[5] VIEW에서 사용하는 제어구조

: 태그를 이용해서 '행위'를 설정하는 것. JSTL을 다운받아야함 - maven에서 가능

https://mvnrepository.com/artifact/javax.servlet/jstl/1.2

: WEB-INF의 lib에 jar파일을 넣어준다.

: 지시자 설정

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> // 꼭 /jsp/jstl로 된 core를 선택할 것

//list.jsp 자바의 반복문을 이용한 제어구조
<tbody>
<%
		List<Notice> list = (List<Notice>) request.getAttribute("list");
        
		for(Notice n : list){ 
			pageContext.setAttribute("n",n);
%>
							
		<tr>
			<td>${n.id }</td>
			<td class="title indent text-align-left"><a href="detail?id=${n.id}">${n.title}</a></td>
			<td>${n.writerId}</td>
			<td>${n.regdate }</td>
			<td>${n.hit }</td>
		</tr>
	<%} %>
</tbody>

// 태그를 이용한 제어구조
<forEach>
<tr class="board-row">
	<td class="board-cell num">$<n.code}</td>
    <td class="board-cell title">
    	<a href="noticeDetail.jsp?c=${n.code}">${n.title}</a>
    </td>
    <td class="board-cell writer">${n.writer}</td>
    <td class="board-cell date">${n.regdate}</td>
    <td class="board-cell hit">${n.hit}</td>
 </tr>
 </forEach>
 
 
 
 // 지시자에서 접두사 c를 넣어놓았을때
 <c:forEach var="n" items="${list}">
//list에 있는 내용을 하나씩 꺼내서 n에 담는다
	<tr>
		<td>${n.id }</td>
			<td class="title indent text-align-left"><a href="detail?id=${n.id}">${n.title}</a></td>
		<td>${n.writerId}</td>
		<td>${n.regdate }</td>
		<td>${n.hit }</td>
	</tr>
</c:forEach>

❣ .jsp에서 작업할 때  안에 코드블럭 <%%> 이 들어가 있으면 실행시 500에러가 나므로 주의

5-1) tag라이브러리와 JSTL (Jsp Standard Tag Library)

: 태그라이브러리의 표준화

Core - 가장 기본적인 제어행위

Formating - 날짜, 숫자, 화폐단위 등 포맷

Functions - EL을 이용해서 데이터를 추출할때 문자열 조작이 필요한 경우

SQL & XML - 사용 지양됨

5-2) Core

: 접두사를 사용해서 Core 를 사용 - Jasper에게 서버에서 처리할 taglib임을 알 수 있게 함

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<c:out> <c:remove> <c:set> <c:if> <c:when> <c:forEach> <c:url> <c:catch> <c:otherwise>...

[6] 중간정리

서블릿 👉 자바 '웹' 프로그램

웹 👉 입출력 담당 (request - 입력설정, 입력값 읽기, response - 출력 설정, 출력 스트림) 👉 jasper를 통한 웹문서 출력 👉 문서기반 (jsp)의 '코드블록'

코드블록 관리의 어려움 👉 스파게티 코드블록 개선을 위한 MVC 👉 view에서 코드블록이 꼭 필요한 경우는 EL(값출력), JSTL(제어담당)

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

'🔥 Vamos > JSP & Servlet' 카테고리의 다른 글

0521 \| Servlet&Jsp (8) // 검색창구현, 현재페이지구현 (0)	2023.05.22
0520 \| Servlet&Jsp (7) // JSTL속성들, 기업형레이어, 서비스클래스구현 및 분리 (0)	2023.05.20
0518 \| Servlet&Jsp (5) // jsp개념, jsp코드블록, MVC model 1&2, EL표기법, EL연산자 (2)	2023.05.18
0509 \| Servlet&Jsp (4) // cookie, redirect, 쿠키지우기, doGet,doPost (0)	2023.05.09
0508 \| Servlet&Jsp (3) // ServletContext application, session (0)	2023.05.09

해보자 후회하지말고

0519 | Servlet&Jsp (6) //게시글 JSP프로그래밍, 스파게티코드를 MVC로 분할, 데이터구조화, view은닉, tag라이브러리와 JSTL

'🔥 Vamos > JSP & Servlet' 카테고리의 다른 글

+ Recent posts

티스토리툴바