✿∘˚˳°∘°
51일차 2 : web, servlet 기초 본문
20230209
web
src/main/java : java 관련 패키지 클래스가 들어가는 폴더
webapp : 프론트관련된 파일(html,css,js,jquery)들이 들어가는 폴더
http://192.168.10.15/
http는 기본적으로 포트번호 80을 사용하기때문에 접속 시 생략가능하다
포트번호가 80이 아닐경우 생략불가
http://192.168.10.15/index.html -- 정식요청
webapp까지가 /인것
서버를 재시작하는 경우
- src/main/java 내부의 파일을 생성/수정/삭제할 경우
- 서버자체의 설정을 바꾼 경우
화면만 새로고침하는경우
- /webapp 폴더 아래파일을 수정한 경우 -> 예외) 단, web.xml을 수정하면 서버재시작
1. 연결 기초
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>[신혜빈]</h1>
<a href="/test/test.html">테스트페이지로 이동</a>
<br>
<a href="/test/todolist.html">todolist</a>
</body>
</html>- webapp에 text폴더를 만들어서 테스트파일html과 todolist.html파일을 넣고 클릭하면 이동
- todolist는 이전 javascipt수업때 실습한파일을 그대로 가져옴 (js와 css폴더도 가져와서 webapp아래에 넣어준다)
- test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>여기는 test.html파일입니다.</h3>
</body>
</html>- todolist.html (이전실습과 동일)
<!DOCTYPE html>
<html lang="ko">
<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>To-Do List</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<link rel="stylesheet" href="/css/todolist.css">
</head>
<body>
<div class="wrapper">
<div class="header">
<h1>Todo List</h1>
</div>
<div class="content">
<div class="input-box">
<input type="text" name="input">
<button class="add-btn">입력</button>
</div>
<div class="list-box">
<!--
<ul class="todolist">
<li class="like">
<span class="material-symbols-outlined like-icon">favorite</span>
</li>
<li class="todo-text">고양이 양치시키기</li>
<li class="check-zone">
<span class="material-symbols-outlined done">done</span>
<span class="material-symbols-outlined delete">delete</span>
</li>
</ul>
<!--
<ul class="todolist">
<li class="like">
<span class="material-symbols-outlined like-icon">favorite</span>
</li>
<li class="todo-text">복습하기</li>
<li class="check-zone">
<span class="material-symbols-outlined done">done</span>
<span class="material-symbols-outlined delete">delete</span>
</li>
</ul>
-->
</div>
</div>
</div>
<script src="/js/todolist.js"></script>
</body>
</html>
2. DB는 연결하지않고 java파일과 연결해보기
- 서버에 값을 전송하는방법 1. form태그 2. a태그
2 - 1 ) 서버요청하기 / 서버응답받기 / 서버에 값 전송하기(a태그)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>[신혜빈]메인페이지입니다.</h1>
<h3><a href="/request.do">1. 서버요청하기</a></h3>
<h3><a href="/response.do">2. 서버요청하고 응답받기</a></h3>
<!-- get / post 방식으로 데이터를 보냄 -->
<!-- get방식으로 보내기 : 서블릿주소?(파라미터구분자)내가보내는데이터 -->
<h3><a href="/sendData1.do?name=신혜빈&test=abc">3. 서버로 값 전송하기(a태그로 전송)</a></h3>
<hr>
</body>
</html>- Servlet을 만들 때는 서블릿명Servlet으로 작성한다
NameServlet -> Name -> name.do
-- 서버요청하기 : RequestServlet.java(request.do)
package kr.or.iei;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class RequestServlet
*/
@WebServlet(name = "Request", urlPatterns = { "/request.do" })
public class RequestServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public RequestServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("서버 호출 완료!");
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}doGet에 작성해준다.
-- 서버응답받기 : ResponseServlet.java(response.do)
package kr.or.iei;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class ResponseServlet
*/
@WebServlet(name = "Response", urlPatterns = { "/response.do" })
public class ResponseServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public ResponseServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("서버호출2");
//응답처리과정
//클라이언트에게 응답할 문서의 타입은 html로 지정
//문자셋은 utf-8
response.setContentType("text/html;charset=utf-8"); //이 셋팅이 없으면 한글이 깨짐
//사용자가 볼 HTML문서를 작성해주는 객체 생성
PrintWriter out = response.getWriter();
//HTML 문서 작성
out.println("<!DOCTYPE html>");
out.println("<html><head><title>응답페이지</title></head>");
out.println("<body>");
out.println("<h1>서블릿 응답 페이지 입니다</h1>");
out.println("<a href='/'>메인페이지로 돌아가기</a>");
out.println("</body></html>");
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
-- 서버에 값 전송하기(a태그)
package kr.or.iei;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class SendData1Servlet
*/
@WebServlet(name = "SendData1", urlPatterns = { "/sendData1.do" })
public class SendData1Servlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public SendData1Servlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//요청하는정보 중 한글이 있는 경우 인코딩
//한글은 있을수도 있고 없을수도있음 - 무조건 인코딩 해줄 것
request.setCharacterEncoding("utf-8");
//요청정보 중 전달된 데이터 추출
//name=신혜빈 & test=abc
String name = request.getParameter("name");//key값이 name인 것을 가지고있는 데이터를 String타입으로 추출
String test = request.getParameter("test");
//없는 이름으로 데이터를 추출하면 null리턴
String data = request.getParameter("data");
System.out.println("name : "+name);
System.out.println("test : "+test);
System.out.println("data : "+data);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
2 - 2 ) form태그를 이용해서 서버에 데이터전송
<form action="/sendData2.do" method="get">
<label for="id">아이디</label>
<input type="text" name="memberId" id=id><br>
<label for="pw">비밀번호</label>
<input type="password" name=memberPw id=pw><br>
<input type="submit" value="서버로 전송">
<!-- http://192.168.10.15/sendData2.do?memberId=asdf&memberPw=1234
?(파라미터구분자)뒤부터 확인하면 입력값이 주소창을 통해 이동하고 있음
input의 name이 key값이 된다. vo변수명이랑 맞추면 된다 -->
</form>
<hr>
<form action="/sendData3.do" method="post">
<input type="text" name="data1"><br>
<input type="text" name="text"><br>
<input type="text" name="abc"><br>
<input type="submit" value="제출">
</form>
<hr>
<form action="/sendData.do" method="post">
문자열 전송 : <input type="text" name="str"><br>
숫자 전송 : <input type="text" name="num"><br>
성별 :
<input type="radio" name="gender" value="남" id="m">
<label for="m">남자</label>
<input type="radio" name="gender" value="여" id="f">
<label for="f">여자</label>
<br>
취미 :
<input type="checkbox" name="hobby" value="공부" id="study">
<label for="study">공부</label>
<input type="checkbox" name="hobby" value="독서" id="book">
<label for="book">독서</label>
<input type="checkbox" name="hobby" value="잠" id="sleep">
<label for="sleep">잠자기</label>
<br>
연령대 :
<select name="age">
<option value="10">10대</option>
<option value="20">20대</option>
<option value="30">30대</option>
<option value="40">40대</option>
</select>
<br>
<input type="hidden" name="hiddenData" value="히든데이터">
<input type="text" name="input1" value="테스트1" readonly><br>
<input type="text" name="input2" value="테스트2" disabled><br>
<textarea name="comment"></textarea><br>
<div name="test3" value="테스트3">div데이터</div>
<input type="submit" value="서버로전송">
</form>
<input type="text" name="input3" value="테스트4">
package kr.or.iei;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class SendData2Servlet
*/
@WebServlet(name = "SendData2", urlPatterns = { "/sendData2.do" })
public class SendData2Servlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public SendData2Servlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
String memberId = request.getParameter("memberId");
String memberPw = request.getParameter("memberPw");
System.out.println("memberId : "+memberId);
System.out.println("memberPw : "+memberPw);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}package kr.or.iei;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class SendData3Servlet
*/
@WebServlet(name = "SendData3", urlPatterns = { "/sendData3.do" })
public class SendData3Servlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public SendData3Servlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
String data1 = request.getParameter("data1");
String text = request.getParameter("text");
String abc = request.getParameter("abc");
System.out.println(data1+", "+text+", "+abc);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}package kr.or.iei;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class SendDataServlet
*/
@WebServlet(name = "SendData", urlPatterns = { "/sendData.do" })
public class SendDataServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public SendDataServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
String str = request.getParameter("str");
//request.getParameter() : 무조건 문자열로 값을 읽어옴
//숫자로 사용하고 싶은 경우 읽어온 문자열을 숫자로 변환(Wrapper클래스 활용)
//정상적인 숫자가 아닌경우 숫자 변환과정에서 에러발생 -> 정규표현식으로 숫자가 맞는경우에 서버로 전송하게 설정
int num = Integer.parseInt(request.getParameter("num"));
//radio는 선택된 input의 value가 넘어옴
String gender = request.getParameter("gender");
//checkbox는 돌일한 name값이 여러개 넘어올 수 있음 -> 동일한 자료형을 여러개 저장 -> 배열사용
String[] hobby = request.getParameterValues("hobby");
//select는 radio랑 비슷
//select는 select태그에 있는 name을 키값으로 선택한 option의 value가 넘어옴
String age = request.getParameter("age");
//hidden : 화면에서 보이지는 않지만 value에 있는 값이 전송됨
String hiddenData = request.getParameter("hiddenData");
//readonly : 화면에서 수정은 불가능하지만 value에 있는 값이 전송됨
String input1 = request.getParameter("input1");
//disabled : 화면에서 수정을 못하고, 데이터 전송도 안함 -> 실제로 받을때 input2라는 key값이 없다는 뜻 -> null리턴
String input2 = request.getParameter("input2");
//textarea : 입력한 값을 전송
String comment = request.getParameter("comment");
//div : 데이터 전송을 할 수 없음(br태그 label태그도 form태그안에 있지만 데이터전송X) -> null
String div = request.getParameter("test3");
//submit버튼이 소속되어있는 form태그 내부의 데이터만 전송 -> null
String input3 = request.getParameter("input3");
System.out.println("str : "+str);
System.out.println("num : "+num);
System.out.println("gender : "+gender);
for(int i=0; i<hobby.length; i++) {
System.out.println(i+"-hobby:"+hobby[i]);
}
System.out.println("age : "+age);
System.out.println("hiddenData :"+hiddenData);
System.out.println("input1 : "+input1);
System.out.println("input2 : "+input2);
System.out.println("comment : "+comment);
System.out.println("div : "+div);
System.out.println("input3 : "+input3);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
2 - 3 ) 서버에 숫자를 보내서 더하기연산
<form action="/plus.do" method="post">
<input type="text" name="num1">
+
<input type="text" name="num2">
<input type="submit" value="더하기">
</form>package kr.or.iei;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class PlusServlet
*/
@WebServlet(name = "Plus", urlPatterns = { "/plus.do" })
public class PlusServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public PlusServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//서블릿 단계
//1. 인코딩
request.setCharacterEncoding("utf-8");
//2. 값추출(보내주는 데이터가 없으면 하지않아도 된다)
int num1 = Integer.parseInt(request.getParameter("num1"));
int num2 = Integer.parseInt(request.getParameter("num2"));
//3. 비즈니스로직(해당 서블릿이 처리해야할 작업) db작업이 주로 여기서 이루어짐
int result = num1+num2;
//4. 사용자 화면처리
//응답형식 및 문자셋 지정
response.setContentType("text/html;charset=utf-8");
//HTML을 작성하는 객체생성
PrintWriter out = response.getWriter();
//결과화면 제작
out.println("<!DOCTYPE html>");
out.println("<html><head><title>더하기</title></head>");
out.println("<body>");
out.println("<style>h2{color:pink;}</style>");
out.println("<h1>더하기 결과<h1>");
out.println("<hr>");
out.println("<h2>"+num1+" + "+num2+" = "+result+"</h2>");
out.println("</body></html>");
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
2 - 4 ) 서버에 숫자를 보내 사칙연산
<form action="/calc.do" method="post">
<input type="text" name="su1">
<select name=oper>
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
<option value="%">%</option>
</select>
<input type="text" name="su2">
<input type="submit" value="계산하기">
</form>package kr.or.iei;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class CalcServlet
*/
@WebServlet(name = "Calc", urlPatterns = { "/calc.do" })
public class CalcServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public CalcServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.인코딩
request.setCharacterEncoding("utf-8");
//2.값추출
int su1 = Integer.parseInt(request.getParameter("su1"));
int su2 = Integer.parseInt(request.getParameter("su2"));
String oper = request.getParameter("oper");
//3. 비즈니스로직
//oper에 있는 값에 따라 다른 연산
//-> 조건문(if, switch)
int result = 0;
//if(oper.equals("+"){}
switch (oper) {
case "+":
result = (su1+su2);
break;
case "-":
result = (su1-su2);
break;
case "*":
result = (su1*su2);
break;
case "/":
result = (su1/su2);
break;
case "%":
result = (su1%su2);
break;
default:
result = 0;
break;
}
//4.화면처리
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
out.println("<!DOCTYPE html>");
out.println("<html><head><title>실습계산기</title></head>");
out.println("<body>");
out.println("<h1>계산결과</h1>");
out.println("<hr>");
out.println("<h2>"+su1+" "+oper+" "+su2+" = "+result+"</h2>");
out.println("</body></html>");
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
'국비수업 > Server' 카테고리의 다른 글
| 56일차 : mvc2WebProject - 3 (0) | 2023.02.16 |
|---|---|
| 55일차 : mvc2WebProject - 2 (0) | 2023.02.16 |
| 54일차 : mvc2WebProject - 1 (0) | 2023.02.16 |
| 53일차 : JSP, MVC1, MVC2 (0) | 2023.02.16 |
| 52일차 : DB연결 (0) | 2023.02.10 |
'국비수업/Server' Related Articles
more
Comments