0. 프로젝트 만드는 순서
- HTML
- CSS
- Javascript
- .java 파일 (servlet => post, get)
- web.xml 등록
- Controller에서 Front 값을 이관
- View가 필요할 경우 .jsp파일도 생성
1. 로그인 만들기
login.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Servlet + 로그인 만들기</title>
</head>
<body>
<form id="frm" method="get" action="./loginok.do" onsubmit="return ck()">
아이디 : <input type="text" name="mid"><br>
패스워드 : <input type="password" name="mpass"><br>
<input type="submit" value="로그인">
</form>
</body>
<script>
function ck(){
if(frm.mid.value==""){
alert("아이디를 입력하세요!");
frm.mid.focus();
return false;
} else if(frm.mpass.value==""){
alert("패스워드를 입력하세요!");
frm.mpass.focus();
return false;
} else{
return true;
}
}
</script>
</html>
- name속성은 Backend에게 전달되는 속성
- submit에 onclick : 더블이벤트 발생
=> form으로 묶은 후 form에 onsubmit 사용 //submit을 사용하면 무조건 form 사용하기
- form 사용 및 name 속성 이름을 이미 사용하였으므로 getElementById 없이 사용
- return 사용한 이유는 input에 submit을 사용했기 때문
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
version="3.1">
<display-name>web</display-name>
<servlet>
<servlet-name>loginok</servlet-name> <!-- 변수명느낌 -->
<servlet-class>web.login</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>loginok</servlet-name>
<url-pattern>/loginok.do</url-pattern>
</servlet-mapping>
</web-app>
- servlet-name : 가상의 이름이며, 동일한 이름은 사용하지 못함
- servlet-class : package + java 클래스명
- url-pattern : 해당 java파일을 WEB에서 가상의 경로로 사용할 수 있도록 설정
- 8줄씩 한 세트 : 한페이지 만들때마다 한세트씩 만들기
- java파일이나 xml파일 수정시 꼭 서버를 재시작 해야 반영
login.java (servlet)
package web;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
//HttpServlet : java를 웹에서 사용할 수 있도록 처리하는 클래스
public class login extends HttpServlet {
//serialVersionUID : Backend 가상의 페이지 일련번호
private static final long serialVersionUID = 1L;
//doGet, doPost : Front-end가 Form태그에 method를 설정한 사항과 동일한 정보를 처리하는 메소드
//request : Front-end에게 전달받는 값
//response : Back-end가 처리한 결과값을 출력하는 역할
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//받는언어세팅 : Front의 한글일 경우 한글깨짐 방지 (언어셋)
request.setCharacterEncoding("utf-8");
//결과 내용을 한글 깨짐 없이 사용하는 언어셋 세팅
response.setCharacterEncoding("utf-8");
response.setContentType("text/html");
String mid = request.getParameter("mid"); //getParameter : Front-end에서 전달 받는 name 이름을 말함
String mpass = request.getParameter("mpass");
//PrintWriter : javascript를 핸들링
PrintWriter pw = response.getWriter(); //response.getWriter() : 현재 패이지에 문자로 출력
if(mid.equals("hong") && mpass.equals("a123456")) { //무조건 문자로 날아옴. 그리고 입력받은 값이니까 equals 사용
pw.write("<script>"
+"alert('정상적으로 로그인 하셨습니다.');"
+"</script>"
);
}else {
pw.write("<script>"
+"alert('아이디 및 패스워드를 다시 확인하세요');"
+"location.href='login.html';"
+"</script>");
}
}
}
- HttpServlet : java를 웹에서 사용할 수 있도록 처리하는 클래스
- doGet, doPost : Front-end가 Form태그에 method를 설정한 사항과 동일한 정보를 처리하는 메소드
- request : Front-end에게 전달받는 값
- response : Back-end가 처리한 결과값을 출력하는 역할
- 받는언어세팅 Front의 한글일 경우 한글깨짐 방지 (언어셋)
- request.setCharacterEncoding("utf-8");
- 결과 내용을 한글 깨짐 없이 사용하는 언어셋 세팅
- response.setCharacterEncoding("utf-8");
- response.setContentType("text/html");
- getParameter : Front-end에서 전달 받는 name 이름을 말함
- response.getWriter() : 현재 패이지에 문자로 출력
2. 할인율 계산
pay.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>상품 할인 및 적립금 사용 적용</title>
</head>
<body>
<form id="frm" method="post" action="./payok.do">
<fieldset style="height: 90px;">
<legend>상품 할인 및 적립금 사용 적용</legend>
결제금액 : <input type="text" value="50000" name="money" class="m1" readonly>
원 | 할인율 : <input type="text" class="m2" name="sales" value="0" maxlength="2"> % 할인 |
적립금 사용 : <input type="text" class="m1" name="point" value="0" maxlength="4"> <input
type="button" value="적용하기" class="btn"> <span class="view">
<font class="font1"> 최종 결제 금액 : </font>
<div class="total">50000</div>
</span>
</fieldset>
</form>
<input type="button" value="결제하기" class="btn" onclick="step_pay()">
</body>
<script>
function step_pay(){
if(frm.sales.value==""){
alert("할인율을 입력해주세요");
frm.sales.value = 0;
}
else if(frm.point.value==""){
alert("적립금을 입력해주세요");
frm.point.value = 0;
}else{
frm.submit();
}
}
</script>
</html>
- div, span => name 사용 불가능
- 버튼은 form밖에 나와있어도 된다 //submit은 불가능
- return은 submit에만 사용
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
version="3.1">
<display-name>web</display-name>
<servlet>
<servlet-name>payok</servlet-name>
<servlet-class>web.payok</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>payok</servlet-name>
<url-pattern>/payok.do</url-pattern>
</servlet-mapping>
</web-app>
payok.java (servlet)
package web;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class payok extends HttpServlet {
private static final long serialVersionUID = 1L;
//Controller (Front-end 전송된 값 처리 및 사칙연산 처이 후 View 전달)
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html");
response.setCharacterEncoding("utf-8");
PrintWriter pw = response.getWriter(); //javascript
try {
//Front-end 값을 받는 역할
String m = request.getParameter("money");
String s = request.getParameter("sales");
String p = request.getParameter("point");
//해당 데이터를 숫자로 변환 후 사칙연산
int product_m = Integer.parseInt(m);
int product_s = Integer.parseInt(s);
int product_p = Integer.parseInt(p);
int total = (product_m - (product_m *product_s) / 100) - product_p;
//Controller => View(.jsp에서 사용할 수 있도록 함)
request.setAttribute("product_m", product_m);
request.setAttribute("product_s", product_s);
request.setAttribute("product_p", product_p);
request.setAttribute("total", total);
//RequestDispatcher : View를 선언하여 웹페이지에 출력되도록 설정
RequestDispatcher rd = request.getRequestDispatcher("/payok.jsp"); //여기에 결과값 뿌릴거야
rd.forward(request, response); //forward : Controller에서 사용된 정보를 jsp로 이관
}
catch (Exception e) { //Front-end값이 숫자로 변환시 비정상적일 경우 해당 스크립트 실행
pw.write("<script>"
+ "alert('올바른 값이 전달되지 않았습니다.');"
+ "history.go(-1);" //이전페이지로 이동
+ "</script>");
}
}
}
- 1.Front-end
2. Back-end => Controller => View(JSP)
payok.java(do) : controller
payok.jsp : view
Database : module
- RequestDispatcher : View를 선언하여 웹페이지에 출력되도록 설정
- forward : Controller에서 사용된 정보를 jsp로 이관
payok.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//getAttribute : Controller에서 setAttribute로 생성된 값을 이관받음
int product_m = (int)request.getAttribute("product_m");
int product_s = (int)request.getAttribute("product_s");
int product_p = (int)request.getAttribute("product_p");
int total = (int)request.getAttribute("total"); //getAttribute는 문자형이기 때문에 int로 받을거면 변환해줘야함
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>결제 진행 사항</title>
</head>
<body>
<%-- : jsp 주석
out.print : <%=%>
--%>
상품금액 : <% out.print(product_m); %><br>
할인율 : <%=product_s%>%<br>
적립금 : <%=product_p%><br>
최종 결제 금액 : <%=total%><br>
<input type="button" value="결제하기">
</body>
</html>
- getAttribute : Controller에서 setAttribute로 생성된 값을 이관받음
- jsp 주석 : <%-- --%>
- <% %> : html 사이에 jsp코드 삽입
- <%= %> : 값 출력 //<% out.print() %>의 줄임
3. 아이디 찾기
idsearch.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form id="frm" method="post" action="./idsearch.do">
고객명 : <input type="text" name="mname"><br>
연락처 : <input type="text" name="mcall">"-"미포함 숫자만 입력하세요<br>
이메일 : <input type="text" name="memail"><br>
<input type="button" value="아이디찾기" class="btn" onclick="step_id()">
</form>
</body>
<script>
function step_id(){
if(frm.mname.value==""){
alert("고객명을 입력해주세요");
}else if(frm.mcall.value==""){
alert("연락처를 입력해주세요");
}else if(frm.memail.value==""){
alert("이메일을 입력해주세요");
}else{
frm.submit();
}
}
</script>
</html>
idsearch.java (servlet)
package web;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class idsearch extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
response.setContentType("text/html");
PrintWriter pw = response.getWriter();
try {
String mname = request.getParameter("mname");
String mcall = request.getParameter("mcall");
String memail = request.getParameter("memail");
String mid = "";
if(mname.equals("홍길동")&&mcall.equals("01010041919")&&memail.equals("hong@naver.com")) {
mid = "hong2025";
}else {
mid = "가입정보가 확인 되지 않습니다.";
}
request.setAttribute("mid", mid);
RequestDispatcher rd = request.getRequestDispatcher("/idsearch.jsp"); //여기에 결과값 뿌릴거야
rd.forward(request, response);
}catch (Exception e) {
pw.write("<script>"
+ "alert('올바른 값이 전달되지 않았습니다.');"
+ "history.go(-1);"
+ "</script>");
}
}
}
idsearch.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String mid = (String)request.getAttribute("mid");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
아이디 : <%=mid%>
</body>
</html>
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
version="3.1">
<display-name>web</display-name>
<servlet>
<servlet-name>idsearch</servlet-name>
<servlet-class>web.idsearch</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>idsearch</servlet-name>
<url-pattern>/idsearch.do</url-pattern>
</servlet-mapping>
</web-app>
idsearch.html 선생님코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>아이디 찾기</title>
</head>
<body>
<form id="frm" method="post" action="./idsearch_t.do">
고객명 : <input type="text" name="mname" required><br>
연락처 : <input type="tel" pattern="[010|011]\d{3,4}\d{3,4}" name="mtel" maxlength="11" required>"-"미포함 숫자만 입력하세요<br>
이메일 : <input type="text" pattern="[a-zA-Z0-9._-]+@" name="memail" required><br> <!-- 이메일 패턴 도메인부분은 한글일수도있으니 설정 ㄴㄴ -->
<input type="submit" value="아이디찾기">
</form>
</body>
</html>
- required(submit전용) : 무조건 필수로 값을 받는 속성
- HTML5 전용
- 웹, 모바일에서 요즘 많이 쓰임
- pattern : 정규식 코드 형태로 규칙적인 데이터를 입력하도록 설정하는 속성
- (,) 형식
- [|] 형식
- {,} 자릿수
- \d(숫자), \b(단어) 파티션 입력값의 범위를 설정가능
- \D(문자)
- =>자바스크립트가 필요없어짐
idsearch.java (servlet) 선생님코드
package web;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class idsearch_t extends HttpServlet {
private static final long serialVersionUID = 1L;
PrintWriter pw = null;
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8"); //text/html : do를 가상으로 html로 만들겠다는 뜻
//API쓸땐 json/application 이런식으로 다르게 써야함
try {
this.pw = response.getWriter();
String mname = request.getParameter("mname");
String mtel = request.getParameter("mtel");
String memail = request.getParameter("memail");
String result = ""; //결과를 View(jsp)에 전달할 변수값
if(mname.equals("홍길동") && mtel.equals("01010041919") && memail.equals("hong@naver.com")) {
result = "hong2025";
}else {
result = "가입정보가 확인되지 않습니다.";
}
request.setAttribute("result", result); //결과값 jsp로 전달
RequestDispatcher rd = request.getRequestDispatcher("./idsearch.jsp");
rd.forward(request, response);
}catch (Exception e) {
pw.write("<script>"
+ "alert('올바른 값이 전달되지 않았습니다.');"
+ "history.go(-1);"
+ "</script>");
}finally {
this.pw.close();
}
}
}
idsearch.jsp 선생님코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//Controller에서 데이터 값을 이관
String result = (String)request.getAttribute("result");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>아이디 찾기 검색결과</title>
</head>
<body>
아이디 : <%=result%>
</body>
</html>