클래스 => 자바빈즈(독립된 클래스)
액션 태그의 종류
인클루드 액션태그
Chap05 include를 사용 해봤다, 이떄의 include는 페이지 지시자를 이용한 것이고
Chap07의 include는 액션태그를 이용한 것이다.
차이점이라면, 페이지 지시자는 소스코드가 텍스트로 포함이 되어짐, 그래서 조각코드를 추가할
용도로 많이 사용한다.
flush을 true로 설정을 하면 포함될 페이지로 이동하기 전에 버퍼를 다 비우고 포함될
페이지로 이동하게 된다. 일반적으로 false로 설정 해주면 된다. include 액션태그는 여러 페이지를
동적으로 하나의 페이지로 묶을 수 있으므로, 각각의 페이지는 기능별로 모듈화 가능함.
==> 템플릿 페이지라고 부른다.
인클루드 액션태그 예제
include_test.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>인클루드 액션태그 테스트</title>
</head>
<body>
<h1>include_test.jsp페이지입니다.</h1>
<!--
Chap05 include를 사용 해봤다, 이떄의 include는 페이지 지시자를 이용한 것이고
Chap07의 include는 액션태그를 이용한 것이다.
차이점이라면, 페이지 지시자는 소스코드가 텍스트로 포함이 되어짐, 그래서 조각코드를 추가할
용도로 많이 사용한다.
flush을 true로 설정을 하면 포함될 페이지로 이동하기 전에 버퍼를 다 비우고 포함될
페이지로 이동하게 된다. 일반적으로 false로 설정 해주면 된다. include 액션태그는 여러 페이지를
동적으로 하나의 페이지로 묶을 수 있으므로, 각각의 페이지는 기능별로 모듈화 가능함.
==> 템플릿 페이지라고 부른다.
-->
<jsp:include page="include_test_sample.jsp" flush="false"/>
<h1>include_test.jsp페이지입니다.</h1>
</body>
</html>
include_test_sample.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>include_test_sample페이지</title>
</head>
<body>
<h1>include_test_sample.jsp페이지입니다.</h1>
</body>
</html>
include param 테스트 예제
include_param.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%request.setCharacterEncoding("UTF-8"); %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>인클루드_파람 테스트</title>
</head>
<body>
<h1>include 액션태그 테스트</h1>
<jsp:include page="include_param_result.jsp" flush="false">
<jsp:param value="이순신" name="name"/>
<jsp:param value="40" name="age"/>
</jsp:include>
<br/>
<h2>다시 include_param.jsp페이지입니다.</h2>
</body>
</html>
include_param_result
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%request.setCharacterEncoding("UTF-8"); %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>인클루드 액션태그 결과 페이지</title>
</head>
<body>
<h2>include_param_result.jsp페이지입니다.</h2>
<%
String name = request.getParameter("name");
int age = Integer.parseInt(request.getParameter("age"));
%>
넘어온 이름 : <%=name %> <br/>
넘어온 나이 : <%=age %>
</body>
</html>
템플릿 페이지
template.jsp
<%@ page errorPage="exceptionPage.jsp" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//요청들어오는 page값을 저장하고 있다.
String pagefile = request.getParameter("page");
if(pagefile==null){
System.out.println("페이지 검사 지나감");
pagefile = "newitem";
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>템플릿 페이지</title>
<style type="text/css">
table {
margin: auto; /* 바깥여백 */
width: 1024px;
height: 768px;
color: gray;
border: 2px red;
}
</style>
</head>
<body>
<table border="1">
<tr> <!-- top부분 -->
<td height="15%" width="20" align="center">Store 로고</td>
<td height="15%" colspan="2" align="right">
<jsp:include page="top.jsp"/>
</td>
</tr>
<tr> <!-- left부분 -->
<td height="20%" align="right" valign="top">
<jsp:include page="left.jsp"/>
</td>
<!-- center부분 -->
<td colspan="2" align="center">
<jsp:include page='<%=pagefile+".jsp" %>'/>
</td>
</tr>
<tr><!-- bottom부분 -->
<td width="100%" height="10%" colspan="3" align="center">
<jsp:include page="bottom.jsp"></jsp:include>
</td>
</tr>
</table>
</body>
</html>
top.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<center>
<b>환영합니다. 프론티어(Frontier)의 Store입니다.</b>
</center>
<a href="#">로그인</a>
<a href="#">회원가입</a>
left.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<center>
<a href="./template.jsp?page=newitem">신상품</a><br/>
<a href="./template.jsp?page=bestitem">인기상품</a><br/>
<a href="./template.jsp?page=springitem">봄 상품</a><br/>
<a href="./template.jsp?page=#">여름 상품</a><br/>
<a href="./template.jsp?page=#">가을 상품</a><br/>
<a href="./template.jsp?page=#">겨울 상품</a><br/>
</center>
newitem.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<b>신상품 목록입니다.</b>
bestitem.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<b>인기상품 목록입니다.</b>
springitem.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<b>봄철 목록입니다.</b>
bottom.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<center>
<b>CopyRight 프론티어(Frontier)의 소유권입니다. since 2021</b>
</center>
빈(bean) 이란?
빈즈의 작성 규칙
따로 클래스 파일을 만들어 놓고 usebean이라는 액션 태그를 활용
자바 빈즈를 사용할때 액션 태그를 사용
useBean을 사용해서 빈을 사용
빈 관련 액션태그(useBean)
빈에서 값얻기
빈 예제
kr.gov.bean
Student.java => 빈
package kr.gov.bean;
/*
* 이런 클래스를 만든 것을 JSP에서는 빈(bean)을 만들었다고 하는 것
* useBean액션태그를 이용하여 데이터를 저장, 수정, 읽기가 가능
*/
public class Student {
private String name;
private int age;
private int grade;
private int studentNum;
//기본 생성자
public Student() {
}
//setter getter
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public int getGrade() {
return grade;
}
public void setGrade(int grade) {
this.grade = grade;
}
public int getStudentNum() {
return studentNum;
}
public void setStudentNum(int studentNum) {
this.studentNum = studentNum;
}
}
useBeans.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- jsp 액션태그 중, useBean태그를 이용해서 설정함.
*id : 자바에서의 참조변수와 같은 역할(Student student = new student())
*class 속성 : student 원본 클래스의 패키지명.클래스명 지정을 해줘야한다.
==> 자바에서 new 연산자로 객체(인스턴스)를 생성한 것과 동일하게 되는 것이다.
-->
<jsp:useBean id="student" class="kr.gov.bean.Student" scope="page"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>빈생성</title>
</head>
<body>
<h1>빈에 데이터 값들을 저장하였습니다.</h1>
<!-- 속성(멤버변수)에 '*'는 빈(bean)객체의 속성 값을 기본값으로 저장하는 것이다. -->
<jsp:setProperty property="*" name="student"/>
<!-- property : 빈의 속성(멤버변수), name : bean의 id값, value : 실제값을 주어 저장 -->
<!-- setProperty : student클래스의 setter메서드를 호출하는 태그 -->
<jsp:setProperty property="name" name="student" value="이순신"/>
<jsp:setProperty property="age" name="student" value="30"/>
<jsp:setProperty property="grade" name="student" value="3"/>
<jsp:setProperty property="studentNum" name="student" value="15"/>
<h1>빈에서 데이터 가져온 값입니다.</h1><br/>
<font size="10" color="blue">
<!-- getProperty : student클래스의 getter메서드를 호출하는 태그임(중요) -->
이름 : <jsp:getProperty property="name" name="student"/><br/>
나이 : <jsp:getProperty property="age" name="student"/><br/>
학년 : <jsp:getProperty property="grade" name="student"/><br/>
번호 : <jsp:getProperty property="studentNum" name="student"/><br/>
</font>
</body>
</html>
빈을 이용한 회원가입 페이지 예제
kr.gov.bean2
Customer.java
package kr.gov.bean2;
public class Customer {
private String id;
private String pw;
private String name;
private String birthday;
private String addr;
private String email;
//기본 생성자
public Customer() {
}
//setter, getter
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getPw() {
return pw;
}
public void setPw(String pw) {
this.pw = pw;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getBirthday() {
return birthday;
}
public void setBirthday(String birthday) {
this.birthday = birthday;
}
public String getAddr() {
return addr;
}
public void setAddr(String addr) {
this.addr = addr;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
}
signup.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원 가입폼</title>
<style type="text/css">
/*스타일 지정*/
#formArea {
margin: auto;
width: 500px;
border: 1px solid black;
background-color: #ff99ff;
}
h2 {
text-align: center;
}
</style>
</head>
<body>
<section id="formArea">
<h2>회원 가입을 위해서 아래의 내용을 입력해주세요.</h2>
<form action="customerbean.jsp" method="post">
<fieldset>
<label>아이디 : </label>
<input type="text" name="id" id="id" required="required"><br/>
<label>비밀번호 : </label>
<input type="password" name="pw" id="pw" required="required"><br/>
<label>이름 : </label>
<input type="text" name="name" id="name" required="required"><br/>
<label>생년월일 : </label>
<input type="date" name="birthday" id="birthday"><br/>
<label>주소 : </label>
<input type="text" name="addr" id="addr"><br/>
<label>이메일 : </label>
<input type="email" name="email" id="email"><br/>
<input type="submit" value="가입하기">
<input type="reset" value="초기화">
</fieldset>
</form>
</section>
</body>
</html>
customerbean.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
%>
<!-- Customer클래스를 사용하겠다고 useBean태그를 사용함 -->
<jsp:useBean id="customer" class="kr.gov.bean2.Customer" scope="page"/>
<!-- 클라이언트가 입력한 값 전부를 저장하는 코드 (빈의 setter값) -->
<jsp:setProperty property="*" name="customer"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입 결과</title>
</head>
<body>
<h2>회원 정보 출력</h2>
<strong>아이디 : </strong> <%=customer.getId() %><br/>
<b>비밀번호 : </b> <%=customer.getPw() %><br/>
<b>이름 : </b> <%=customer.getName() %><br/>
<b>생년월일 : </b> <%=customer.getBirthday() %><br/>
<b>주소 : </b> <%=customer.getAddr() %><br/>
<b>이메일 : </b> <%=customer.getEmail() %><br/>
</body>
</html>
부트스트랩 적용하기 cdn
Bootstrap
The most popular HTML, CSS, and JS library in the world.
getbootstrap.com
startbootstrap.com/theme/resume
Resume - Free Resume/CV Bootstrap Template
A free Bootstrap resume and CV theme for building stylish webpages. All Start Bootstrap templates are free to download and open source.
startbootstrap.com
welcome.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>스토어</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand navbar-dark bg-dark"><!-- 네비게이션 바를 만듬 -->
<div class="container"> <!-- container라는 클래스부터 내용을 표시함 -->
<div class="navbar-header"> <!-- 네비게이션 헤더 -->
<a class="navbar-brand" href="./welcome.jsp">HOME</a>
</div>
</div>
</nav>
<%
String greating = "스토어에 오신것을 환영합니다.";
String welcome = "Welcome to the Store!";
%>
<div class="jumbotron">
<div class="container">
<h1 class="display-3"><%=greating %></h1>
</div>
</div>
<%--
<h1><%=greating %></h1>
<h3><%=welcome %></h3>
--%>
</body>
</html>
