728x90
JSP
동적 웹 어플리케이션을 개발하기 위한 Java 기반의 서버 측 템플릿 엔진
웹 어플리케이션에서 사용자 인터페이스를 생성하는 데 사용되며
html 코드와 Java 코드를 혼합하여 웹 페이지를 동적으로 생성할 수 있게 해줌
JSP 동작 방식
- 클라이언트가 웹 서버에 JSP 페이지를 요청함
- 웹 서버는 해당 JSP 페이지를 서블릿으로 컴파일함
- 컴파일된 서블릿은 필요한 데이터를 가져오거나 계산하고, html 코드와 함께 동적으로 웹 페이지를 생성함
- 생성된 웹 페이지는 웹 서버를 통해 클라이언트에게 전송되고, 클라이언트는 그 결과를 표시함
JSP 내장 객체 종류
- request
- 클라이언트에서 전송된 데이터를 검색하거나, 요청 헤더 정보를 확인하고 수정할 수 있음
- response
- 클라이언트로 데이터를 보내거나 응답 헤더를 설정할 수 있음
- out
- html이나 텍스트와 같은 내용을 클라이언트로 출력하는데 사용
- session
- 세션 데이터를 저장하고 검색하는 데 사용
- 세션 데이터는 세션이 종료되기 전까지 유지됨
- application
- 웹 어플리케이션 전체에서 공유하는 데이터를 저장하고 검색하는 데 사용
- 웹 어플리케이션(서버)이 실행되는 동안 유지되는 데이터
- config
- JSP 페이지의 구성 정보를 제공
- 웹 어플리케이션의 초기 매개변수 및 JSP 페이지의 초기 매개변수와 같은 정보를 가져올 수 있음
- page
- 현재 JSP 페이지에 대한 정보를 제공
- 주로 페이지 지시어에서 설정된 속성 값을 검색하는 데 사용
- pageContext
- 다양한 범위(page, request, session, application) 에서 데이터를 저장하고 검색하는데 사용
- exception
- 예외 처리에서 사용
- JSP 페이지에서 발생한 예외 정보를 검색하고 처리하는 데 사용
실습 1 : 코드 분리하기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<jsp:useBean id="cb" class="test.CalcBean"/>
<%--
액션태그 == 객체화
test.CalcBean cb = new test.CalcBean();
CalcBean cb = new CalcBean();
--%>
<jsp:setProperty property="*" name="cb"/>
<%-- cb라는 객체의 멤버변수 초기화 --%>
<%-- 객체의 멤버변수 이름과 파라미터 이름을 일치시키기 --%>
<%-- 멤버변수를 초기화할때에 name값을 보고 자동호출
자동 형변환 처리됨
setter 메서드를 전부 호출 --%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>코드 분리하기</title>
</head>
<body>
<% cb.calculate(); %>
<form method="post">
<input type="number" name="num1">
<select name="op">
<option>+</option>
<option>-</option>
</select>
<input type="number" name="num2">
<input type="submit" value="결과확인">
</form>
<hr>
계산결과 : <jsp:getProperty property="result" name="cb"/>
<%= cb.getResult() %>
</body>
</html>
실습 2 : 로그인
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<jsp:useBean id="lb" class="test.LoginBean"/>
<jsp:setProperty property="*" name="lb"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인</title>
</head>
<body>
<% lb.check(); %>
<form method="POST">
아이디 <input type="text" name="mid" placeholder="아이디" required><br>
비밀번호 <input type="password" name="mpw" placeholder="비밀번호" required><br>
<input type="submit" value="로그인">
</form>
<jsp:getProperty property="result" name="lb"/>
<%= lb.getResult() %>
</body>
</html>
실습 3 : 회원가입 추가
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" import="test.MemberVO"%>
<jsp:useBean id="mDAO" class="test.MemberDAO"/>
<jsp:useBean id="mVO" class="test.MemberVO"/>
<jsp:setProperty property="*" name="mVO"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<title>실습3</title>
</head>
<body>
<script type="text/javascript">
<%
if (request.getMethod().equals("POST")) {
if (request.getParameter("action").equals("login")) {
MemberVO data = mDAO.selectOne(mVO);
if (data != null) {
out.println("alert('" + data.getMid() + "님, 로그인 성공!');");
}
else {
out.println("alert('로그인 실패...');");
}
}
// action값이 signup
else if (request.getParameter("action").equals("signup")) {
// 회원가입
boolean flag = mDAO.insert(mVO);
if (flag) {
out.println("alert('회원가입 성공!')");
} else {
out.println("alert('회원가입 실패...')");
}
}
}
%>
</script>
<script type="text/javascript">
function signup() {
var ans = confirm('입력하신 정보로 회원가입할까요?');
if (ans == true) {
// form 태그 내부에있는 action의 값이 signup이 될수있게
// 그 상태로 submit 진행
document.test.action.value="signup";
document.test.submit();
}
else {
return;
}
}
</script>
<form method="POST" name="test">
<input type="hidden" name="action" value="login">
아이디<input type="text" placeholder="아이디" name="mid" required><br>
비밀번호<input type="password" placeholder="비밀번호" name="mpw" required><br>
<input type="submit" value="로그인">
<input type="button" value="회원가입" onClick="signup()">
</form>
<hr>
<h2>회원목록</h2>
<div id="wrap">
<ul>
<%
for(MemberVO v : mDAO.selectAll(null)) {
// out.println("<li>" + v + "</li>");
%>
<li><%= v %></li>
<%
}
%>
</ul>
</div>
</body>
</html>
실습 4 : 회원 목록 추가
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" import="test.MemberVO"%>
<jsp:useBean id="mDAO" class="test.MemberDAO"/>
<jsp:useBean id="mVO" class="test.MemberVO"/>
<jsp:setProperty property="*" name="mVO"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<title>회원목록 추가</title>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
<%
if (request.getMethod().equals("POST")) {
MemberVO data = mDAO.selectOne(mVO);
if (data != null) {
out.println("alert('" + data.getMid() + "님, 로그인 성공!');");
}
else {
out.println("alert('로그인 실패...');");
}
}
%>
$('#btn3').click(function() {
<%
for(MemberVO v : mDAO.selectAll(null)) {
%>
$('#list').append('<li>' + <%= v %> + '</li>');
<%
}
%>
});
});
</script>
<form method="POST">
아이디<input type="text" placeholder="아이디" name="mid" required><br>
비밀번호<input type="password" placeholder="비밀번호" name="mpw" required><br>
<input type="submit" value="로그인">
<button>회원가입</button>
</form>
<button id="btn3">회원목록</button>
<hr>
<h2>회원목록</h2>
<div id="wrap">
<ul id="list">
<%-- <%
for(MemberVO v : mDAO.selectAll(null)) {
// out.println("<li>" + v + "</li>");
%>
<li><%= v %></li>
<%
}
%> --%>
</ul>
</div>
</body>
</html>
728x90
'Web > JSP' 카테고리의 다른 글
| [JSP] Application과 Out (0) | 2023.07.02 |
|---|---|
| [JSP] session을 활용하여 쇼핑몰 만들기 (실습) (0) | 2023.07.02 |
| [JSP] 웹 개발에서 Session (0) | 2023.07.01 |
| [JSP] 데이터 전송 방법 (forward, redirect) (0) | 2023.07.01 |
| [JSP] 에러페이지 (0) | 2023.07.01 |
