43일차 JSP
jsp 서버프로그래밍
클라이언트에게 요청받고 적절한 것을 응답해준다.
하나의 서버가 여러 클라이언트한테 요청을 받는다.
그리고 요청 받은거에 대한 응답을 해준다. 이게 동시에 일어나니 스레드를 사용해야한다.
데이터를 주고 받으니 인풋스트림아웃풋스트림을 한다.
이런일을 직접해도 되는데 서버프로그램(WAS, 톰캣)이 해준다.
이 위에서 실행되는 HTML코드만 잘 작성해주면된다
1. 스크립트 릿
두 개는 같은 역할을 한다.
실제 자바코드를 보면 스크립트 릿에 있는 것은 메소드에 그대로 들어가게 된다.
<h1>HELLO JSP</h1>
<%
out.write("<h1>HELLO JSP</h1>");
%>2. 표현식(Expression)
자바코드를 쓰는 방법은 세가지이다.
출력 메소드의 파라미터이다.
자바 코드로 변환된걸보면 out.print()에 들어가게 된다.
그래서 파라미터로 명령문을 넣을 수없고 boolean string, int 연산식등등을 값으로 넣을 수 있다.
밑의 코드는 같은 역할을 한다.
<%=1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 + 10%>
<%
out.print(1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 + 10);
%>3. 선언식(declation)
익스프레션과 스크립트 릿은 서비스 메소드 안에 작성된다.
선언식은 클래스 레벨에 작성이된다.
즉 필드나 메소드를 작성할 수 있다.
클래스 레벨에 작성되니 아무데서나 사용할 수 있다.
그리고 보통 맨위에 몰아서 작성하는 것이 편하다.
<h2>Declaration (선언부)</h2>
<%
myMethod(99);
%>
<%!
private void myMethod(int num){
System.out.println(num);
}
%>4. 페이지 디렉티브
페이지 디렉티브란 jsp만들면서 가장위에 작성되는 것이다.
<%@ %>안에 들어간다. <%@ page %>라쓰면 page디렉티브이다.
이 jsp를 어떻게 톰캣이 해석할지를 설정하는 것이다.
import하고 싶을때도 페이지 디렉티브를 사용해야한다.
html코드이기 때문에 자바 클래스를 사용하려면 풀네임을 작성해줘야한다.
<%
java.util.List list = java.util.List.of("java", "css", "jsp");
%>
<p><%= list.get(0) %></p>
<p><%= list.get(1) %></p>
<p><%= list.get(2) %></p>이것이 귀찮으니 쉽게 해주는 것이 페이지 디렉티브의 import attribute이다.
<%@page import="java.util.List"%>라고 써주면 된다.
여러개 import하려면 ,로 구분하거나 import 페이지 디렉티브를 여러번 써주면된다.
한번에 같은 패키지내의 여러개를 import하려면 자바코드에서 처럼 java.util.*처럼 import할 수 있다.
<%@page import="java.util.Calendar"%>
<%@ 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>
<%
Calendar cal = Calendar.getInstance();
%>
오늘은
<%= cal.get(java.util.Calendar.YEAR) %>년
<%= cal.get(java.util.Calendar.MONTH) + 1 %>월
<%= cal.get(java.util.Calendar.DATE) %>일
입니다.
</body>
</html>5. comment 주석
jsp코드안에 css, js, java코드 들을 다 작성할 수 있다.
jsp에서는 <%-- --%> 안에 주석을 작성할 수 있다.
jsp주석은 자바코드로 변경할때 출력이 되지 않는다.
클라이언트에게 출력되는 주석은 자바 코드 주석과 jsp주석 제외하고 다 보이게 된다.
css주석, html주석, js주석은 브라우저 소스 코드보기에 보이게 된다.
이 세부분에는 민감한 내용을 달지 말아야 한다.
민감한 정보를 주석으로 작성하려면 java코드 주석이나 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>
<style>
h1 {
background-color: black;
color: while;
/* css 주석*/
}
</style>
<body>
<h1>Lorem ipsum dolor.</h1>
<!-- html주석 -->
<%
System.out.println("this is scriptlet");
// java한줄주석
/*
java 여러줄 주석
*/
%>
<%-- jsp주석 --%>
<script>
console.log("js console log");
//js 주석
/*
js 여러줄 주석
*/
</script>
</body>
</html>6. jsp 객체
pageContext session application config out page request response가 기본객체이다.
이 기본객체(jsp implicit objects)들을 잘 활용해야한다.
책 114쪽표에 정리되어 있다.
오늘은 request에 대해서 배울 것이다.
request에 어떤 메소드가 있는지 알고 싶으면 객체 설계도를 보면된다.
javax.servlet.http.HttpServletRequest 인터페이스이다.
실제 메소드를 보고 싶다면 검색해서 알아보자.
인터페이스를 통해서 추상메소드를 볼수 있다.
getXXX와 같은 메소드를 가지고 있다.
클라이언트와 서버가 요청을 주고 응답을 받는다.
HTML을 전달받기 위해서 HTTP규약이 정해져있다는 것을 알고 있다.
클라이언트가 서버에게 request(요청)를 보내면
톰캣이 요청메시지를 잘 파싱해서 request객체에 담는다.
그래서 우리는 getXXX메소드로 잘꺼내서 사용하면된다.
request는 jsp spring 프로젝트까지 계속 사용한다.
코드 이면에 request가 동작한다.
6.1 request (HttpServletRequest)
요청 메시지, 요청자 정보를 파싱해서 넣어둔 객체이다.
톰캣이 알아서 요청을 받고 알아서 파싱해서 객체에 넣어둔다.
f12 개발자 도구를 눌러서 network탭을 보면된다.
jsp파일을 받는것을 볼 수 있다.
헤더 정보를 보면 Request Headers를 보면 소스와 파싱된것을 볼 수 있다.
첫번째줄을 보면 GET /JSP2023/ch03/lecture/05request/01request.jsp HTTP/1.1
요청메소드 / 요청경로 / 버전이 나온다.
getMethod(): request의 요청메소드를 볼 수 있다.
getRequestURI() : request의 요청경로를 볼 수 있다.
getProtocol() : request의 사용 프로토콜 버전 (HTTP 버전)을 볼 수 있다.
getHeaderNames() : 헤더들의 이름을 알 수 있다.
java.util.Enumeration<java.lang.String> 타입으로 리턴된다. Enumeration은 iterator의 엣날버전으로 asIterator()메소드로 Iterator로 변환할 수 있다.
getHeader(헤더이름) : 헤더의 value를 알 수 있다.
<h1>request (HttpServletRequest)</h1>
<h1>요청 메시지, 요청자 정보를 파싱해서 넣어둔 객체</h1>
<p>method : <%= request.getMethod() %></p>
<p>요청경로 : <%= request.getRequestURI() %></p>
<p>http 버전 : <%= request.getProtocol() %></p>
<hr />
<%
Iterator<String> headerNames = request.getHeaderNames().asIterator();
while(headerNames.hasNext()){
out.print("<li>");
out.print(headerNames.next());
out.print("</li>");
}
%>
<hr />
<h1>Header Name : Header Value</h1>
<%
headerNames = request.getHeaderNames().asIterator();
while(headerNames.hasNext()){
String name = headerNames.next();
out.print("<p>");
out.print(name + ": " + request.getHeader(name));
out.print("</p>");
}
%>method : GET
요청경로 : /JSP2023/ch03/lecture/05request/01request.jsp
http 버전 : HTTP/1.1
header이름들
header밸류들이 출력된다.
클라이언트IP = <%= request.getRemoteAddr() %> <br>
요청정보길이 = <%= request.getContentLength() %> <br>
요청정보 인코딩 = <%= request.getCharacterEncoding() %> <br>
요청정보 컨텐츠타입 = <%= request.getContentType() %> <br>
요청정보 프로토콜 = <%= request.getProtocol() %> <br>
요청정보 전송방식 = <%= request.getMethod() %> <br>
요청 URI = <%= request.getRequestURI() %> <br>
컨텍스트 경로 = <%= request.getContextPath() %> <br>
서버이름 = <%= request.getServerName() %> <br>
서버 포트 = <%= request.getServerPort() %> 이 외에도 다양한 클라이언트 및 서버 정보를 얻을 수 있다.
외우지말고 request 정보를 request에 담아 놓았다는 것을 알아 두자.
6.2 웹 주소
주소?q=값 을 하면 그 결과가 나온다.
?뒤의 값에 따라서 클라이언트가 받는 정보가 달라지게 된다.
이게 무엇이냐면 query string이다.
주소를 뜯어보면
www.domain.com/page?key1=value1&key2=value2가 된다.
?이후에 있는것이 query string이다. &로 구분해서 여러개로 나뉘어져 있다.
각각 나뉜 것이 request parameter라고 한다.
각 request parameter는 =으로 구분되어 있다. 좌측이 parameter name 우측이 parameter value이다.
즉 쿼리스트링들은 파라미터들로 이루어져잇고 파라미터들은 name과 value로 나뉘어져있다.
주소에 request파라미터 조합으로 이루어져있고 서버가 이 파라미터를 보고 다른 정보를 줄 수 있다.
그래서 서버 프로그래밍을 하려면 이 파라미터를 어떻게 받아내는지를 배워야한다.
6.3 getQueryString
q=slamdunk하면 getQueryString()메소드를 통해서 쿼리스트링을 얻을 수 있다.
getParameter메소드를 사용하면 쿼리스트링의 밸류값을 얻을 수 있다.
<h1>request parameter</h1>
<h3>query string</h3>
<h3><%=request.getQueryString() %></h3>
<h3>q 파라미터</h3>
<h3><%= request.getParameter("q") %></h3>
<h3>age 파라미터</h3>
<h3><%= request.getParameter("age") %></h3>6.4 query
query가 null일때 처리를 해주면 query값이 없을때도 처리할 수 있다.
<%
String query = request.getParameter("q");
query = query == null ? "" : query;
%>
<h1><%= query %> 검색 결과</h1>6.5 form element
그런데 우리가 인터넷을 하면서 직접 query를 작성한적이 없다.
그래서 값을 받는 방법은 form element를 사용해서 값을 받을 수 있다.
form태그안의 input박스에 값을 넣고 submit버튼을 누르면 값이 전달된다.
이 input박스에 필요한것이 name 속성과 value속성이다.
name이 쿼리스트링의 name값이고 value가 쿼리스트링의 value값이다.
submit버튼을 누르면 name과 value를 모아서 주소에 붙여서 보내게 된다.
여기서 받은 값을 꺼내서 사용할 수 있다.
<body>
<h1>form 요소</h1>
<form>
<input type="text" value="slamdunk" name="q"/> <br/>
<input type="text" value="99" name="age"/> <br/>
<button type="submit">전송</button>
</form>
<hr />
<%
String age = request.getParameter("age");
String q = request.getParameter("q");
%>
<h1><%= age %>세를 위한 <%=q %> 검색결과</h1>
</body>6.6 form -2
form에는 여러개가 들어올 수 있다.
input요소를 사용하면 타입에 따라 알맞는 필드가 생기고 text필드가 기본값이다.
type
text : 텍스트필드
number : 수 입력 필드
email : 이메일 형식만 가능
date : 날짜 형식
datetime-local : 날짜 시간 형식
submit : 전송버튼(중요하다)
button : 그냥 버튼 무슨일이 일어나게 하려면 js코드를 사용해야한다.
등등 이 있다..
<button></button>으로 만들면 이것도 전송버튼이 된다.
전송버튼을 누르면 쿼리스트링 요청이 가게 된다.
button의 type을 button으로하면 그냥버튼이 된다.
전송버튼을 누르면 input박스에 잇는 value들이 쿼리스트링으로 넘어가게 된다.
쿼리스트링을 잘 파싱해서 담아놓은게 파라미터고
파라미터를 꺼내서 활용할 수 있다.
input element의 타입에 따라서 활용방법이 달라진다.
6.7 name 속성, value 속성
input element의 중요한 것이 name 속성, value 속성이다.
쿼리스트링에 값을 받기 위해서는 name을 넣어줘야한다.
submit을 하면 입력한 값들이 value 가 되어서 쿼리스트링이 완성되서 넘어오게 된다.
스프링에서는 이 값을 꺼내는 것 조차 해주는 것이다.
value 속성은 input element의 초기값이 된다.
사용자가 값을 바꾸면 바뀐값이 넘어가게 된다.
<h1>name 속성, value 속성</h1>
<form>
<input type="text" name="name" value="backho"/> <br />
<input type="text" name="age" /> <br />
<input type="submit" /> <br />
</form>
<hr />
<%
String name = request.getParameter("name");
String age = request.getParameter("age");
%>
<h1><%=name %>님은 <%= age %>세 입니다.</h1>6.8 form 요소 연습
주소와 도시 를 받아서 출력해주기
<h1>form 요소 연습</h1>
<form>
<!-- 코드완성 -->
도시 : <input type="text" name="city" /> <br />
주소 : <input type="text" name="address"/> <br />
<input type="submit" value="전송" />
</form>
<hr />
<%
String city = request.getParameter("city");
String address = request.getParameter("address");
%>
<h3>도시 : <%= city %></h3>
<h3>주소 : <%= address %></h3>6.9 form 요소 연습 2
num1값과 num2값을 받아서 더해주기
처음 로드햇을때는 값이 없으니 null처리를 해줘야한다.
또한 빈문자열이 들어올수도 있다. ?="" 그래서 빈문자열일때 처리도 해줘야한다.
값이 들어오면 파라미터는 문자열이기 때문에 integer로 파싱을 해줘야한다.
<h1>form 요소 연습</h1>
<form>
<input type="number" name="num1" value="100" />
<input type="submit" value = "+" />
<input type="number" name="num2" value="200" />
</form>
<hr />
<!-- num1과 num2를 더한 값 출력 -->
<%
String num1_ = request.getParameter("num1");
String num2_ = request.getParameter("num2");
if (num1_ == null || num2_ == null ){
out.print("<h3>값을 입력해주세요</h3>");
} else if (num1_.isEmpty() || num2_.isEmpty()){
out.print("<h3>값을 입력해주세요</h3>");
} else {
int num1 = Integer.parseInt(num1_);
int num2 = Integer.parseInt(num2_);
%>
<%= num1 + " + " + num2 + " = " + (num1+num2) %>
<%
}
%>6.10 form 요소 연습 3
숫자를 받아서 값만큼 별 삼각형을 쌓자.
표현식을 섞어서 푸는 것과 out객체를 사용해서 푸는 방식 두가지로 풀었다.
<h1>form 요소 연습 3 </h1>
<form >
몇 줄 ? <input type="number" name="line" />
<input type="submit" value="그리기" />
</form>
<hr />
<%
String line_ = request.getParameter("line");
int line = 0;
if (line_ == null || line_.equals("")){
out.print("<h3>값을 입력해주세요</h3>");
} else {
line = Integer.parseInt(line_);
for (int i = 0 ; i < line ; i++){
for (int j = 0 ; j <= i ; j ++){
out.print("*");
}
out.print("<br/>");
}
%>
<hr />
<%
for (int i = 0 ; i < line ; i++){
for (int j = 0 ; j <= i ; j ++){
%>
<%="*"%>
<%}%>
<br />
<%
}
}
%>6.11 checkbox
체크박스는 여러개 체크할 수 있다.
input element를 checkbox로 만들어주면 체크박스가 된다.
체크하면 값이 넘어가고 안하면 안넘어간다.
체크하고 전송하면 on이라는 값이 전송된다.
on이라는 값말고 원하는 값이 전송되게 하고 싶다면 value에 값을 넣어주면된다.
처음 보낼때 체크된 상태로 로딩하고 싶다면 checked속성을 checked로 넣어주면된다.
<body>
<h1>checkbox</h1>
<form>
<input type="text" name="name"/> <br />
<input type="checkbox" name="agree"/> <br />
<input type="checkbox" name="agree2" checked="checked" value="yes"/> <br />
<input type="submit" value="전송" />
</form>
<hr />
<h1>name : <%= request.getParameter("name") %></h1>
<h1>agree : <%= request.getParameter("agree") %></h1>
<h1>agree2 : <%= request.getParameter("agree2") %></h1>
</body>6.12 checkbox - 2
체크박스는 주로 같은것을 여러개 선택하기 위해 사용된다.
즉 하나의 파라미터에 여러값을 줄때사용한다.
같은 이름으료 &로 엮어서 전송되게 된다.
그러면 읽을때 어떻게 읽어야하나?
지금까지 request.getParameter()로 값을 하나씩 읽어왔었다.
여러개의 값을 얻어오려면 request.getParameterValues()를 사용해서 배열로 받아올 수있다.
파라미터가 존재하지 않으면 null이니 null체크를 해줘야한다.
<h1>checkbox 2 : 하나의 파라미터에 여러값을 줄때</h1>
<h2>취미를 고르세요</h2>
<form>
<input type="checkbox" name="hobby" value="baseball" />야구 <br />
<input type="checkbox" name="hobby" value="soccer" />축구 <br />
<input type="checkbox" name="hobby" value="reading" />독서 <br />
<input type="checkbox" name="hobby" value="tv" />tv <br />
<input type="checkbox" name="hobby" value="basketball" />농구 <br />
<input type="submit" value="전송" />
</form>
<hr />
<%
String[] hobbies = request.getParameterValues("hobby");
if (hobbies != null){
System.out.println(Arrays.toString(hobbies));
}
%>6.13 checkbox 활용 연습
좋아하는 영화 장르들 출력 & 좋아하는 음악 장르들 출력
만약 선택한 값이 없다면 없다고 출력해준다.
<h1>checkbox 연습 2 </h1>
<form>
<h3>좋아하는 영화 장르</h3>
<!-- input[type=checkbox][name=movie][value]*3 -->
<input type="checkbox" name="movie" value="sf" /> sf <br />
<input type="checkbox" name="movie" value="action" /> action <br />
<input type="checkbox" name="movie" value="comedy" /> comedy <br />
<h3>좋아하는 음악 장르</h3>
<input type="checkbox" name="song" value="dance" /> dance <br />
<input type="checkbox" name="song" value="rock" /> rock <br />
<input type="checkbox" name="song" value="ballad" /> ballad <br />
<br />
<input type="submit" value="전송" />
</form>
<hr />
<%
String[] movies = request.getParameterValues("movie");
String[] songs = request.getParameterValues("song");
String movie = "";
String song = "";
if (movies == null){
movie = "없음";
} else {
for(int i = 0; i < movies.length ; i ++){
movie += movies[i] + " ";
}
}
if (songs == null){
song = "없음";
} else {
for(int i = 0; i < songs.length ; i ++){
song += songs[i] + " ";
}
}
%>
<h3>좋아하는 영화들</h3>
<%= movie %>
<h3>좋아하는 음악들</h3>
<%= song %> 6.14 radio
radio 박스는 같은 name중에 하나만 선택이 가능하다.
선택한 value값만 넘어간다.
checkbox와 마찬가지로 checked속성이 있으면 체크된 상태로 로드된다.
<h1>radiobutton (하나의 값만 선택) </h1>
<form>
선택1 <br />
<input type="radio" name="param1" checked="checked" value="val1" />
<input type="radio" name="param1" value="val2" />
<input type="radio" name="param1" value="val3" />
<br />
선택2 <br />
<input type="radio" name="param2" value="val3" />
<input type="radio" name="param2" value="val4" />
<input type="radio" name="param2" value="val5" />
<br />
<input type="submit" value="전송" />
</form>6.15 radio 연습해보기
성별과 통신사를 radio박스로 선택한후 출력하기
텍스트는 보여주는 정보이고 진짜 전송되는 값은 value의 값이다.
<h1>radiobutton (하나의 값만 선택) </h1>
<form>
<h3>성별</h3>
<input type="radio" name="gender" value="남"/>남 <br />
<input type="radio" name="gender" value="여"/>여 <br />
<h3>통신사</h3>
<input type="radio" name="phone" value="skt"/>skt <br />
<input type="radio" name="phone" value="kt"/>kt <br />
<input type="radio" name="phone" value="lg"/>lg <br />
<input type="submit" value="전송" />
</form>
<hr />
<!-- 남여 -->
<h3>성별 : <%= request.getParameter("gender") %></h3>
<!-- skt kt lg -->
<h3>통신사 : <%= request.getParameter("phone") %></h3>6.16 post 요청
from element는 다양하게 이용이 된다.
만약 아이디와 비밀번호를 넣고 로그인을 한다고 해보자.
그런데 기존대로 요청을하면 쿼리스트링이 주소에 적혀보내지게 되서 아이디와 비밀번호가 노출되게 된다.
form 에 method속성을 post로 넣게 되면 쿼리스트링이 안보이게 된다.
요청이 post로 변경되고 전송버튼을 눌럿을때 쿼리스트링으로 주소에 붙지않는다.
post방식으로 보내면 몸통에 붙어서 보내지게 된다.
개발자 도구에 네트워크 payload를 누르면 값이 보여진다.
지금까지 작성하지 않았는데 기본값이 get이라 그렇다.
2023.03.28 후기
JSP의 request객체에 대해서 배우게 되었다. 각 input박스 별로 값을 받는 방법들을 정리할 수 있었다.
스프링에서는 이런 값을 받는 것을 대신 해준다. 이런 것들을 잘 생각해보자.
'국비 > JSP' 카테고리의 다른 글
| 2023.04.03 47일차 JSP (0) | 2023.04.03 |
|---|---|
| 2023.03.31 46일차 JSP (0) | 2023.04.02 |
| 2023.03.30 45일차 JSP (0) | 2023.03.30 |
| 2023.03.29 44일차 JSP (0) | 2023.03.29 |
| 2023.03.27 42일차 Java & JSP (0) | 2023.03.27 |