JSP 쇼핑몰 만들기
1. JSP 웹 프로그램의 이해
jsp를 왜 배워야하는지 model1과 model2가 있다.
웹프로그래밍의 본질이 무엇인지 알아보자.
웹을 통해서 데이터를 주고받는다.
서버가 jsp를 통해서 데이터를 처리받아서 다시 내보내는 것이 웹프로그래밍이다.
데이터베이스를 처리하기 어려워스 jsp를 사용햇엇으나
최근에는 js로도 가능하게 되었다.
많은 양, 관계형db를 사용한다면 아직까지도 jsp를 선수로 배우는게 좋다.
가장중요한 방식이 모델1 모델2방식이있다.
이 차이점을 잘 알아두고 판단을 해야한다.
모델1보다 모델2가 좋나? 그건아니다.
개집을 지을때 사람집을 지을 필요는 없다.
간단한 게시판만 만들면 모델1이면된다.
메인페이지를 조금더 많이 다루거나 리뉴얼 복잡할수록 재설계하기 좋기위해 모델2를 만드는 것이다.
그럼 모델1방식이 어떻게 이루어져있나?
브라우저를 통해서 주소를 입력해서 request하면
http통신을 통해 웹서버에 접근을 한다.
만약 db에 연결되어잇다면 was에서 db에 요청한후 다시 response해서 보여준다.
그래서 레이아웃은 비슷하지만 내용은 달라지게 된다.
클라이언트 프로그램을 jsp라는 프로그래밍이 요청을 받고 db와 연동해서 jsp가 보여주면 모델1이다.
그래서 모델1은 jsp만 알면된다.
jsp는 java server page의 약자이다.
고객의 요청을 jsp가 다처리하면 jsp이다.
모델2방식의 차이점은 request를 누가 처리해주냐의 차이다.
Controller 서블릿이 처리하는 것이 모델2이다.
서블릿은 순수 자바 코드로만 되어 있다.
hmtl인 jsp와 분리가 가능하게 된다.
뷰단과 자바 코드를 아예 분리해서 디자이너쪽이 리뉴얼하기 편하게 만드는 것이다.
그래서 이것을 mvc패턴이라고 한다.
3. Jsp 개발환경설정
우리가 만든 프로그램을 실행하려면 웹서버프로그램이 필요한것이다.
아파치 톰캣을 사용하자. 테스트용 방문자 수가 적으면 이런거 사용해도됨.
4. Jsp 기본 개요
어떤식으로 서버를 구성하고 어떻게 response하는지를 알아보자.
1.클라이언트 웹브라우저 url입력한다.
2.dns서버를 거쳐서 ip주소로변화한다.
3.이 ip를 이용해서 jsp페이지를 요청한다. 메인페이지요청
4.웹서버(톰캣)에서 요청을 분석하고 넘긴다.
5.jsp/서블릿컨테이너에 해당파일을 보내고 jsp를 자바파일로(서블릿) 만들고 class파일로 컴파일한다.
6.이것을 버퍼에 적재하고 이 결과들을 다시 웹브라우저에 전송한다.
webapp(WebContent)파일에 jsp파일들을 만들어서 사용한다.
페이지 지시어가 있어야 jsp이다.
고정 아이피를 사용하면 전세계에서 볼 수 있다.
localhost를 사용하기 때문에 같은 와이파이에서만 가능하다.
http://localhost:8080/JSP1/HelloWorld.jsp
jsp컨테이너가 helloworld.jsp를 서블릿으로 변경한후 자동으로 컴파일해줘서 이것을 웹브라우저에 띄어주는 것이다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
HelloWorld~ 반갑습니다 여러분
</body>
</html>5. Jsp 페이지 디렉티브 1
jsp의 기본문법이다.
크게 3가지로 나누어진다.
jsp 페이지 디렉티브
스크립트요소
액션태그가 있다.
Jsp 페이지 디렉티브는 다음과 같다.
어떤기능이 있는지 실제로 사용해보면서 알아보자.
그런데 Jsp 페이지 디렉티브가 무엇인가? 페이지 지시자라고 한다.
jsp페이지에 맨첫 줄에 들어가는 것이다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
page를 쓰면 페이지 디텍티브이다.
include taglib등등도 있다.
jsp페이지를 구성하는 요소를 말한다.
language : java언어를 사용한다는 것을 나타낸다. 스크립트 요소를 자바로 사용하겟다.
contentType : jsp페이지에 있는 것이 어떤 타입인가
charset : 언어가 무엇인가
pageEncoding : 어떤언어로 인코딩할 것인가
import : 자바의 클래스를 사용할때 import해야한다.
자바코드를 짤때 import하는 것과 같다.
session : jsp의 내장객체로 세션이다.
jsp에서 페이지 이동간에 데이터를 제공해야한다.
페이지가 바뀌어도 정보를 유지하고 싶을때 사용하는 것이 세션이다.
db에 넣지않는이상 원래 안된다. 굳이 db에 넣지 않고 유지하고 싶다면 세션이다.
기본값은 true이다. 일정시간이 지나면 세션을끊어버린다 계속 유지하면 자원을 먹기 때문이다.
buffer / autoFlush
buffer는 최소 8kb로 잡혀있다. 일정량의 데이터를 저장시켜놓고 다 차면 flush한다.
가득차지 않으면 안나간다. 이것을 대비해서 자동으로 flush하는게 autoFlush이다.
기본값은 true이다. 페이지 양이 많지않아도 그냥 보이게 보통해두자
6. Jsp 페이지 디렉티브-2
info : jsp에 대한 설명을 입력하는 것이다.
errorPage jsp페이지가 실행하는 도중 에러가 발생할때 보여줄 페이지를 지정한다.
페이지 지시자에 errorPage="jsp" 하면 원하는 페이지를 보여줄 수 있다.
isErrorPage : 에러가 발생햇을때 errorPage가 보여질지 안보여질지를 지정할수 있다.
기본값이 false이기 때문에 에러페이지를 사용하려면 true로 해줘야한다.
일부러 에러를 발생시키면 에러페이지가 보여지게 된다.
isErrorPage를 설정안했다면 exception이 나오게 된다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" errorPage="Error.jsp" isErrorPage="true" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
int sum = 10 / 0;//에러코드 작성
%>
</body>
</html>
************
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
에러페이지 입니다.
</body>
</html>7. Jsp 페이지 스크립트요소 1
제일 중요하다. 기본문법 중에서도 스크립트요소에서 가장많이 사용된다.
크게 세가지 형태로 제공이된다.
1.스크립트 릿 <% %>
가장 일반적으로 jsp페이지에서 많이 쓰이는 스크립트 요소로 주로 프로그래밍의 로직을 기술할때 많이 쓰인다.
스크립트릿에서 선언한 변수는 JSP페이지가 서블릿으로 변환될때 지역변수로 사용된다.
<% 자바 코드 삽입 %>
2.선언문 <%! %>
선어문은 일반적으로 JSP페이지에서 자바의 멤버변수 또는 멤버 메소드로사용하고자 할때
주로 사용되는 프로그래밍의 로직기술이다.
선언문의 변수는서블릿으로 변환될때 멤버변수로 변환되고
선언문에서의 메소드는 서블릿에서 메소드로 만들어진다.
점점 고급 프로그램으로 갈때 자바코드를 그대로 사용해서 선언문은 거의 사용안한다.
3.표현식 <%= %>
표현식은 일반적으로 JSP페이지에서 자바의 System.out.println()과 유사하게 사용된다.
데이터를 출력할때 주로 사용되는 프로그래밍의 로직 기술이다.
나중가면 printwriter로 출력할 수 있다. 혹은 el언어 ${}으로도 가능하다.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>1~10까지의 숫자를 화면에 표시</h2>
<%
//1~10까지의 숫자를 화면에 출력하시오
for (int i = 0; i < 10; i++) {
%>
<%=i%>
<%
}
%>
</body>
</html>model1을 하면 중간에 이렇게 삽입해야해서 코드가 복잡해진다.
이 스크립트 릿을 잘 열고 닫아야 한다.
구구단을 출력해보자
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>화면에 구구단을 출력하시오</h2>
<%
for (int i = 2; i < 10; i++) {
for (int j = 1; j < 10; j++) {
%>
<%= i + "*" + j + "=" + i * j%>
<%
}
%>
<br>
<%
}
%>
</body>
</html>는 html에서 띄어쓰기를 의미한다.
8. Jsp 페이지 스크립트요소 2
스크립트 요소 2번
이전처럼하면 매우 불편하다. 연습만이 살길이다.
선언문 사용해보자.<%! %>하면 멤버로 만들어진다.
메소드를 만들어보자. 메소드를 왜만드나? 일정한 반복적인 일을 하기 위해 만든다
<%!
public void inCrement(){
}
%>
<%!
int a = 10; //멤버변수
%>
<%
int a = 100; //지역변수
%>
<%
//int a = 1000; 같은 지역에서 만들기 때문에 에러
%>8.2 연습 별찍기
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>피라미드 쌓기</h2>
<%
for (int i = 0; i <= 5; i++) {
for (int j = 1; j <= i; j++) {
%>
<%= "*" %>
<%
}
%>
<br>
<%
}
%>
</body>
</html>기존 자바코드를 생각하고 작성후에 sysout자리에 expression을 꽃아넣는 방식으로 열고닫고를 하면될 것같다.
9. Jsp 페이지 내장객체 1
내장객체란 무엇인가 jsp에서 별도의 선언없이 사용할 수 잇는 클래스이다.
9개의 내장객체를 가지고 있다. 자주사용되는 객체가 내장객체이다.
9.1 request - 1
로그인페이지를 만들어보자.
request객체는 웹브라우저에서 jsp페이지로 전달되는 정보를 http 바디와 헤더로 전달해준다.
예를들어 사용자의 아이디와비밀번호를 서버측에서 읽어들일수 잇게하는 것이다.
<form action= "RequestLoginProc.jsp" method="post">
서버쪽으로 정보를 떠넘기는것이 form의 action속성이다.
method는 전송방식이다.
<input type ="password" name="pass">
인풋박스타입을 password로 하면 ***같은 모양으로 보인다.
submit을 누르면 action이 실행이 된다.
method="get"을 하면 주소창에 다보인다.
method="post"로 하면 주소창에 안보인다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2 align = "center">로그인 페이지 </h2>
<div align = "center">
<form action= "RequestLoginProc.jsp" method="get">
<table width="400" border="1">
<tr height = "60">
<td align="center" width ="150">아이디</td>
<td align="left" width= "250">
<input type="text" name="id">
</td>
</tr>
<tr height ="60">
<td align = "center" width="150">패스워드</td>
<td align = "left" width="250">
<!-- ***으로 보임 -->
<input type ="password" name="pass">
</td>
</tr>
<tr height ="60">
<td colspan = "2" align = "center">
<input type ="submit" value="전송">
</td>
</tr>
</table>
</form>
</div>
</body>
</html>10. Jsp 페이지 내장객체2
로그인페이지를 만들었으니 이 내장객체를 사용해보자.
10.1 request - 2
request의 getParameter로 사용자의 정보를 얻어올 수 있다.
request.getParameter("id");
<body>
<!-- RequestLogin에서 넘어온 아이디와 패스워드 읽기 -->
<%
//사용자의 정보가 저장되어 있는 객체 request 의 getParameter() 사용자 정보를 추출
//넘어온 데이터 즉 박스의 이름을 넣어주면된다.
String id = request.getParameter("id");
String pass = request.getParameter("pass");
%>
<h2>
당신의 아이디는 <%= id %> 이고 패스워드는 <%= pass %>입니다.
</h2>
</body>request가 다른데에서 또 만들어지고 이동햇을경우 이 request를 다른데서 사용하고 싶은데
또사용할수 있나? 불가능하다.
request는 그 페이지에서만 사용이 가능하다.
이것의 범위는 그 페이지까지만 가능하다.
이래서 session이 필요한 것이다.
tomcat.apache.org사이트에서 api를 볼 수 있다.
11. Jsp 페이지 내장객체 3
11.1 request - 3
이전에는 파라미터만 받아왔다. 그외에도 여러가지 데이터를 받아올 수 있다.
실제 회원가입창을 만들어보자. 체크박스등을 넣어보자.
인풋박스에 placeholder 하면 인풋박스안에 글씨를 넣을 수 있다.
인풋박스를 만들때 이메일로 설정하면 이메일를 받을 수있다.
select태그는 옵션의 밸류에 따라 선택할 수 있다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div align="center">
<h2>회원 가입</h2>
<form action="RequestJoinProc.jsp">
<table width="500" border="1">
<tr height="50">
<td width="150" align="center">아이디 </td>
<td width="350" align="center">
<input type="text" name="id" size="40" placeholder="id를 넣으세요">
</td>
</tr>
<tr height="50">
<td width="150" align="center">패스워드</td>
<td width="350" align="center">
<input type="password" name="pass1" size="40"
placeholder="비밀번호는 숫자와 영어만 넣어주세요">
</td>
</tr>
<tr height="50">
<td width="150" align="center">패스워드 확인</td>
<td width="350" align="center">
<input type="password" name="pass2" size="40">
</td>
</tr>
<tr height="50">
<td width="150" align="center">이메일</td>
<td width="350" align="center">
<input type="email" name="email" size="40">
</td>
</tr>
<tr height="50">
<td width="150" align="center">전화 번호</td>
<td width="350" align="center">
<input type="tel" name="tel" size="40">
</td>
</tr>
<tr height="50">
<td width="150" align="center">당신의 관심 분야</td>
<td width="350" align="center">
<input type="checkbox" name="hobby" value="캠핑">캠핑
<input type="checkbox" name="hobby" value="등산">등산
<input type="checkbox" name="hobby" value="독서">독서
<input type="checkbox" name="hobby" value="음악">음악
</td>
</tr>
<tr height="50">
<td width="150" align="center">당신의 직업은</td>
<td width="350" align="center">
<select name="job">
<option value="교사">교사</option>
<option value="의사">의사</option>
<option value="변호사">변호사</option>
<option value="기술사">기술사</option>
</select>
</td>
</tr>
<tr height="50">
<td width="150" align="center">당신의 연령은</td>
<td width="350" align="center">
<input type="radio" name="age" value="10">10대
<input type="radio" name="age" value="20">20대
<input type="radio" name="age" value="30">30대
<input type="radio" name="age" value="40">40대
</td>
</tr>
<tr height="50">
<td width="150" align="center">하고 싶은말</td>
<td width="350" align="center">
<textarea rows="5" cols="40" name="info"></textarea>
</td>
</tr>
<tr height="50">
<td width="150" colspan="2">
<input type="submit" value="회원 가입">
<input type="reset" value="취소">
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
2023.03.20 후기
JSP를 배운다. 스프링에선 view으로만 사용하다가 다시 jsp로 오니 불편한점이 확 느껴진다.
이전에 공부한 방법은 컨트롤러를 나누는 방식으로 갔는데 그냥 바로 jsp만 작성하니 지저분하게 느껴진다.
그래도 이것을 기반으로 점점 확장해나가면 기본을 이해하기 쉬운 강의 인 듯 하다.
'기초단계 > JSP&Servlet' 카테고리의 다른 글
| 2023.03.22 JSP (0) | 2023.03.22 |
|---|---|
| 2023.03.21 JSP (0) | 2023.03.21 |
| 2023.03.19 Servlet (0) | 2023.03.20 |
| 2023.03.18 Servlet (0) | 2023.03.19 |
| 2023.03.15 Servlet (1) | 2023.03.15 |