요청(request)
클라이언트 ------------------------> 서버
(브라우저) <----------------------- (웹서버)
응답(response)
요청(request)
- 클라이언트에서 서버쪽으로 HTML 문서를 요청하는 것
- 접근하고자 하는 페이지(URL)을 브라우저를 통해 알려줌
- GET, POST등 방식으로 요청
응답(response)
- 서버에서 결과를 HTML문서를 통해 클라이언트쪽으로 보여주는 것
- 상태코드(성공여부)와 컨텐츠타입(텍스트, 이미지, HTML, XML, JSON..등), 컨텐츠(HTML코드, 이미지, 문자열...등)을 전달
https://n.news.naver.com/article/008/0004818927?cds=news_media_pc&type=editn
----- ---------------- -----------------
프로토콜 도메인 자원위치
https(Hyper Text Transfer Protocol)
- TCP/IP 기반의 웹용 프로토콜
- Header와 Body로 구성
- 웹서버에서 서버-클라이언트 사이에 요청/응답이 가능하도록 만들어지 규약
- 서버가 먼저 클라이언트에게 데이터를 전달할 수 없음
TCP 포트
- 서버 하드웨어 상에서 돌아가는 소프트웨어를 구분하기 위한 숫자값
- 사용범위 : 0 ~ 65535 (0 ~ 1023까지는 운영체제 또는 별도의 서비스를 사용하기 위해 예약)
웹서버(web server)
- 클라이언트로부터 요청을 받아 요청한 내용을 응답해주는 프로그램
- 정적인 페이지(html, css, 이밎, javascript)만 전달
- 대표적인 웹서버 프로그램은 Apache, zeus, NGINX, IIS, Mongoose ... 등
- 동적인 컨텐츠 생성이 불가능
웹 어플리케이션 서버(web application server)
- 동적인 부분을 담당
- 프로그램 실행 환경과 데이터베이스 접속 기능을 제공
- 대표적인 WAS는 Tomcat(webserver + was)
Tomcat 공식 홈페이지
서버 페이지 실행
http://127.0.0.1:8080
Tomcat폴더
bin: 실행파일
conf:설정파일
lib:라이브러리
webapps:홈디렉토리
-Macbook-
cd 톰캣 경로/apache-tomcat-8.5.43/bin
./startup.sh 서버를 시작
./shutdown.sh 서버를 중지
ASP, PHP : 간단해서 옛날에 주로 씀
JSP(Java Server Pages)
- HTML 코드에 Java 코드를 넣어 동적 웹페이지를 생성하는 웹 어플리케이션 도구(서버 스크립트)
- JSP가 실행되면 자바 서블릿(Servlet)으로 변환되며 웹 어플리케이션 서버에서 동작하여 필요한 기능을 수행하고 생성된 데이터를 웹페이지와 함께 클라이언트로 전달
xxx.jsp
클라이언트 -----------> 서블릿 컨테이너
jsp -> servlet 파일로 변환
servlet -> class 파일로 컴파일
class -> html 형태로 변환 한 후 클라이언트에게 돌려줘서
속도가 너무 느려서 웬만하면 쓰지않는게 좋다...
3~4년 전부터 잘 안쓰게 됨
스프링 3까지는 부트가 없다가 4부터는 부트가 생겨서
옛날 스프링에서는 jsp를 지원하지만
지금나온 스프링은 jsp 지원x
스프링 부트는 jsp 아예쓰질않음
JSP 장점
- Java 코드에 HTML 코드가 삽입되는 문제를 해결
out.println("<h1>안녕하세요</h1>"); 옛날엔 이런식으로 작성했는데(X)
JSP는
<%
System.out.println("안녕");
%>
<h1>안녕하세요</h1> () (O)
- 퍼블리셔와 협업이 가능
- 간단한 페이지를 구현할 때는 JSP문서로 제작하는 것이 시간을 절약
JSP 단점
- 복잡한 로직을 구현할 때 HTML 중심의 코드가 이해하기 어렵게 만들 수 있음
- 프로그래밍 언어를 모르는 사람이 실수로 코드를 망칠 수 있음
- core(핵심)적인 부분의 로직의 유출을 막기 위해 Java 파일로 따로 작성하는 것이 보안상 유리
✅ JSP 문법
JSP 문법
<%! 선언부 %> -> 전역변수, 함수
<% 스크립릿 %> -> 코딩, 지역변수
<%=출력부 %> -> 문자열, 변수값, 함수리턴값 출력
<%— JSP주석 —%>
디렉티브 태그
- 현재 JSP 페이지에 대한 정보를 설정하는 태그
- 페이지 최상단에 선언
<%@ page ~~~~ %> 이런 모습이다~ >
* page 뒤에 들어갈수있는 속성값들
- import: 자바 클래스를 사용
- language: 사용할 프로그래밍 언어를 설정
- contentType: 생성할 문서의 컨텐츠 유형
- pageEncoding: 페이지 문자 인코딩을 설정
스크립트릿
- 자바 변수선언 및 자바 로직코드를 작성하는데 사용하는 코드
<% ~~~~~~~~~~ %>
표현문
- 변수, 계산식, 메소드 호출 등 결과를 나타내는 태그
- 타입은 항상 문자열
<%= 변수 또는 계산식 등.. 작성%>
선언문
- 자바 변수나 메소드를 정의하는데 사용하는 태그
<%! ~~~~~~~~~~~ %>
jsp는 서버쪽에서 다 처리해서 html만 보내기때문에
사용자는 jsp코드를 볼수없다
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.util.Date" %>
<%
String userid = "apple";
String name = "kimapple";
int age = 20;
double height = 160.5;
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
h2, p{color:yellow;}
</style>
</head>
<body>
<h2>변수 (현재시간 : <%=new Date()%>)</h2>
<p>아이디:<%= userid %> </p>
<p>이름:<%= name %> </p>
<p>나이:<%= age %> </p>
<p>키:<%= height %> </p>
<%
out.println("<p>안녕하세요.JSP 테스트 페이지입니다</p>");
out.println("<p>"+name+"님 환영합니다!</p>"); //웹화면에 출려
System.out.println("콘솔에 출력합니다!"); //콘솔에 출력
if(age > 19){
out.println("<p>성인입니다</p>");
}else{
out.println("<p>청소년입니다</p>");
}
%>
</body>
</html>
▶️ 데이터 요청
데이터 송신 페이지 (ex. aaa.jsp)
- form 태그 같은곳에 method="get" 또는"post"를 주고 action="수신페이지.jsp" 후
submit 타입의 버튼을 누르면 수신페이지로 value 값들이 넘어감
데이터 수신 페이지 (ex. aaa_ok.jsp)
- 수신페이지에서는 스크립트릿에 String userpw = request.getParameter("userpw")
이런식으로 "" 안에 넘겨줫던 태그의 name값을 넣어주면
넘어온 태그들의 name 값을 찾아서 그에 해당하는 value 값을 변수에 넣어주게 된다
값이 여러개라면 request.getParamterValues() 를써서 배열값을 받아주면된다.
get 방식
- 간단한 요청을 보낼 때 사용
- 내용의 크기가 제한적
- 데이터가 노출(URL)
- URL뒤에 전송할 데이터를 붙여서 보냄
- 단순히 서버에게 자원을 요청할 때 사용
- 전송과 응답의 속도가 빠름
2_get.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>
<h2>전송방식(get)</h2>
<form method= "get" action="2_get_ok.jsp">
<p>아이디 : <input type = "text" name = "userid"></p>
<p>비밀번호 : <input type = "password" name = "userpw"></p>
<p> <input type = "submit" value = "로그"></p>
</form>
<p><a href="2_get_ok.jsp?userid=banana&userpw=2222">바나나전송</a></p>
</body>
</html>
2_get_ok.jsp 파일
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
String userid = request.getParameter("userid"); //name값으로 찾는것임
String userpw = request.getParameter("userpw");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>전송방식()</title>
</head>
<body>
<h2>전송방식</h2>
<p>아이디: <%=userid%></p>
<p>비밀번호: <%=userpw%></p>
</body>
</html>
get 방식은 주소창에 저렇게 파라미터들이 노출됨
post 방식
- 복잡한 요청을 보낼 때 사용
- 전송할 데이터를 body에 넣어서 요청
- 데이터를 body에 넣어서 요청하기 때문에 노출되지 않음
- 내용의 크기 제한이 없음
- get방식에 비해 속도가 느림
3_post.jsp 파일
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
String userid = request.getParameter("userid");
String userpw = request.getParameter("userpw");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>전송방식(post)</h2>
<form method= "post" action="3_post_ok.jsp">
<p>아이디 : <input type = "text" name = "userid"></p>
<p>비밀번호 : <input type = "password" name = "userpw"></p>
<p> <input type = "submit" value = "로그"></p>
</form>
</body>
</html>
3_post_ok.jsp 파일
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<%
request.setCharacterEncoding("UTF-8");
String userid = request.getParameter("userid");
String userpw = request.getParameter("userpw");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>전송방식(post)</title>
</head>
<body>
<h2>전송방식(post)</h2>
<p>아이디 :<%=userid%></p>
<p>비밀번 :<%=userpw%></p>
</body>
</html>
post는 주소창에 파라미터가 노출안됨!
과제.
자바스크립트 day4
“6_회원가입.html”을
“4_member.jsp”로 변경하고 (확장명만 바꿔도 됨)
입력한 데이터를
“4_member_ok.jsp“에서
(단, 회원가입 페이지의 취미는
request.getParameter ()말고
request.getParameterValues() 를 통해서 전송받음,배열로 저장됨,반복문 돌려서 출력하면 됨)
송신페이지.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회원가입</title>
<script defer src="./js/regist.js"></script>
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
function sample6_execDaumPostcode() {
new daum.Postcode({
oncomplete: function(data) {
// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
// 각 주소의 노출 규칙에 따라 주소를 조합한다.
// 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
var addr = ''; // 주소 변수
var extraAddr = ''; // 참고항목 변수
//사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
addr = data.roadAddress;
} else { // 사용자가 지번 주소를 선택했을 경우(J)
addr = data.jibunAddress;
}
// 사용자가 선택한 주소가 도로명 타입일때 참고항목을 조합한다.
if(data.userSelectedType === 'R'){
// 법정동명이 있을 경우 추가한다. (법정리는 제외)
// 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){
extraAddr += data.bname;
}
// 건물명이 있고, 공동주택일 경우 추가한다.
if(data.buildingName !== '' && data.apartment === 'Y'){
extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);
}
// 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
if(extraAddr !== ''){
extraAddr = ' (' + extraAddr + ')';
}
// 조합된 참고항목을 해당 필드에 넣는다.
document.getElementById("sample6_extraAddress").value = extraAddr;
} else {
document.getElementById("sample6_extraAddress").value = '';
}
// 우편번호와 주소 정보를 해당 필드에 넣는다.
document.getElementById('sample6_postcode').value = data.zonecode;
document.getElementById("sample6_address").value = addr;
// 커서를 상세주소 필드로 이동한다.
document.getElementById("sample6_detailAddress").focus();
}
}).open();
}
</script>
</head>
<body>
<h2>회원가입</h2>
<form action="./4_member_ok.jsp" name="regform" id="regform" method="post" onsubmit="return sendit()">
<p>아이디: <input type="text" name="userid" id="userid" maxlength="20"></p>
<p>비밀번호: <input type="text" name="userpw" id="userpw" maxlength="20" ></p>
<p>비밀번호 확인: <input type="text" name="userpw_re" id="userpw_re" maxlength="20" ></p>
<p>이름: <input type="text" name="name" id="name"></p>
<p>휴대폰번호: <input type="text" name="hp" id="hp"></p>
<p>이메일: <input type="text" name="email" id="email"></p>
<p>성별: <label>남자<input type="radio" name="gender" value="남자" checked></label> <label>여자<input type="radio" name="gender" value="여자"></label></p>
<p>취미: <label>등산<input type="checkbox" name="hobby" value="등산"></label>
<label>게임<input type="checkbox" name="hobby" value="게임"></label>
<label>운동<input type="checkbox" name="hobby" value="운동"></label>
<label>드라이브<input type="checkbox" name="hobby" value="드라이브"></label>
<label>독서<input type="checkbox" name="hobby" value="독서"></label></p>
<p>우편번호: <input type="text" id="sample6_postcode" name="zipcode" maxlength="5"><button type="button" onclick="sample6_execDaumPostcode()">검색</button></p>
<p>주소: <input type="text" name="address1" id="sample6_address"></p>
<p>상세주소: <input type="text" name="address2" id="sample6_detailAddress"></p>
<p>참고항목: <input type="text" name="address3" id="sample6_extraAddress"></p>
<p><button>가입완료</button> <button type="reset">다시작성</button> </p>
</form>
</body>
</html>수신페이지.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
String userid = request.getParameter("userid");
String userpw = request.getParameter("userpw");
String name = request.getParameter("name");
String hp = request.getParameter("hp");
String email = request.getParameter("email");
String gender = request.getParameter("gender");
String[] hobby = request.getParameterValues("hobby");
String zipcode = request.getParameter("zipcode");
String address1 = request.getParameter("address1");
String address2 = request.getParameter("address2");
String address3 = request.getParameter("address3");
%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회원가입</title>
</head>
<body>
<h2>회원가입</h2>
<p>아이디: <%=userid%> </p>
<p>비밀번호: <%=userpw%> </p>
<p>이름: <%=name%></p>
<p>휴대폰번호: <%=hp%></p>
<p>이메일: <%=email%></p>
<p>성별: <%=gender%></p>
<p>취미: <%
for(int i=0;i<hobby.length;i++){
out.print(hobby[i]+" ");
}%>
</p>
<p>우편번호: <%=zipcode%></p>
<p>주소:<%=address1%></p>
<p>상세주소: <%=address2%></p>
<p>참고항목: <%=address3%></p>
</body>
</html>
'웹 개발 > 🎆 JSP' 카테고리의 다른 글
| JSP | JSP를이용한 홈페이지구현 - 게시판 (0) | 2022.11.27 |
|---|---|
| JSP | JSP를이용한 홈페이지구현 - 세션체크, 회원정보수정 (0) | 2022.11.27 |
| JSP | JSP를이용한 홈페이지구현 - 로그인,회원가입,로그아웃 (0) | 2022.11.27 |
| JSP | include,exception,pageContext,ajax (0) | 2022.11.21 |
| JSP | cookie,session,servlet (0) | 2022.11.20 |
