휴먼교육센터 개발자과정 70일차

조하영·2022년 11월 14일

휴먼교육센터 코딩공부

목록 보기

56/66

HTTP/응답 코드

https://namu.wiki/w/HTTP/%EC%9D%91%EB%8B%B5%20%EC%BD%94%EB%93%9C

통신과정의 이해

가 view의 이해 - 서버의 응답(response)
네이버 화면의 원본소스는 서버에 있고
서버에서는 클라이언트에게 보여줄 화면을 미리 만들어 놓는다.
기본은 html문서이며 우리는 jsp로 병행해서 만들것이다.
이것은 view라고 한다.

나. 요청(request)
a. 요청에서 반드시 필요한 것은 요청명
요청명이란 전공단어는 아니고 의미는 요청하는 의도
전공단어로는 서블릿 요청(중복불가)

b. 서블릿 요청시 넘겨줄 데이터(파라미터) 유무
예) 메인화면 요청: 파라미터 필요 없음
로그인 요청: 파라미터 필요함(아이디, 비번)
게시글에서 3번 글을 자세히 보고 싶다면? : 파라미터 필요(sql에 where 절이 필요하기때문)

c. 파라미터를 서버에게 전송할때
1. get 방식 - 일반적으로 a태그에서
2. post 방식 - 일반적으로 form태그에서
3. json 방식(js객체) - 일반적으로 jquery에서

다. 서버
a. 서블릿 분석: 클라이언트가 원하는 서비스 분석
b. 클라이언트가 보낸 파라미터를 받는다.
*클라이언트가 보낸 방식(get, post, json)에 따라 처리방법이 다름
c. 필요에 따라 DB에서 데이터를 조작
d. 클라이언트에게 보낼 화면을 만든다.
화면을 정의한것이 view 파일(html , jsp 등)
e. 실제 코드(html, css, js)를 클라이언트에게 전송

지금까지 우리가 공부한 js의 사용목적은
html 문서의 요소를 조작하여 전체화면이 아닌 화면의 일부를 제어한다.

응용)인스타그램 사용중 좋아요를 누를때 누를때마다 화면이 갱신 된다면 불편함.
클라이언트가 사용하는 주요기능을 방해하지 않으면서 세부기능을 구현해야 한다.
이때 비동기식 통신(Ajax)를 사용

정리

웹서비스의 구조(서버와 클라이언트)
설치한 웹서버프로그램
서블릿이 무엇인가?
클라이언트가 서블릿 호출하는 법 2가지
컨트롤러가 클라이언트에게 파라미터 받는 것
컨트롤러가 view를 선택하여 포워딩하는 과정
클라이언트가 직접 view를 호출하는 것과 컨트롤러를 거쳐서 호출하는 것의 차이점

과제
jsp문서 만들기
login.jsp : 아이디와 암호를 입력 받고 폼타입으로 loginPass로 get방식으로 보내기
TestloginView.jsp : login.jsp에서 보낸 파라미터를 컨트롤러를 거쳐 받은 후 화면에 출력

요청 컨트롤러처리
login login.jsp 포워딩
loginPass 파라미터 받아 TestloginView.jsp로 파라미터 전송, TestloginView.jsp 포워딩

심화
아이디와 비번을 입력하고 버튼을 누리면
자바스크립트에서 4글자 이상 여부를 확인하여 4글자 이상이면 서버로 전송
4글자 미만이면 다시 입력하라는 알림창을 띄운다.

추가문제
라디오 버튼으로 성별

select로 직업 선택(군인,일반인)

select로 커피 선택(에스프레소, 카라멜, 라떼, 더치)-다중선택

check박스로 취미 선택(여행, 낚시, 등산, 집콕)-다중선택

로그인 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>
    <form id="form" action="LoginPass" method="get">
        아이디 <input type="text" id="idIn" name="id"> <br> 비밀번호 <input
            type="password" name="pass"><br> 성별<input type="radio"
            name="gender" value="m">남 <input type="radio" name="gender"
            value="w">여<br> 직업 <select name="job">
            <option value="army">군인</option>
            <option value="gener">일반인</option>
        </select><br> 좋아하는 커피 <select multiple name="coffe">
            <option value="espreso">에스트레소</option>
            <option value="caramel">카라멜마끼아또</option>
            <option value="latte">라떼</option>
            <option value="dotch">카라멜마끼아또</option>
        </select><br> 취미 <input type="checkbox" name="hobby" value="trip">
        여행 <input type="checkbox" name="hobby" value="fishing"> 낚시 <input
            type="checkbox" name="hobby" value="hiking"> 등산 <input
            type="checkbox" name="hobby" value="bangkok"> 집콕 <input
            type="button" onclick="chkId()" value="로그인">
    </form>

</body>
<script>
    function chkId() {
        let id = document.getElementById('idIn').value;
        if (id.length < 4) {
            alert("아이디는 4글자 이상으로 입력하세요");
        } else {
            document.getElementById('form').submit();
        }
    };
</script>
</html>

컨트롤러에서 파라미터 받은 후 출력 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>
    <b>아이디: ${id}</b><br>
    <b>비밀번호: ${pass}</b><br>
    <b>성별: ${gender}</b><br>
    <b>직업: ${job}</b><br>
    <b>커피: </b>

    <% String[] coffe = request.getParameterValues("coffe"); %>
    <% 
    for(int i = 0; i < coffe.length; i++){
    %>
    <b><%=coffe[i] %></b>
    <% }; %><br>

    <b>취미: </b>
    <% String[] hobby = request.getParameterValues("hobby"); %>
    <% 
    for(int i = 0; i < hobby.length; i++){
    %>
    <b><%=hobby[i] %></b>
    <% }; %><br>
</body>
</html>

로그인 컨트롤러

import java.io.IOException;

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;

/**
 * Servlet implementation class Login
 */
@WebServlet("/Login")
public class Login extends HttpServlet {
    private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#HttpServlet()
     */
    public Login() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
//		response.getWriter().append("Served at: ").append(request.getContextPath());

        String url = "login.jsp";
        RequestDispatcher dispatcher = request.getRequestDispatcher(url);
        dispatcher.forward(request, response);
    }

    /**
     * @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);
    }

}

로그인 jsp에서 받은 파라미터를 처리 후 출력하는 컨트롤러

import java.io.IOException;

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;

/**
 * Servlet implementation class LoginPass
 */
@WebServlet("/LoginPass")
public class LoginPass extends HttpServlet {
    private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#HttpServlet()
     */
    public LoginPass() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
//		response.getWriter().append("Served at: ").append(request.getContextPath());
        String id = request.getParameter("id");
        String pass = request.getParameter("pass");
        String gender = request.getParameter("gender");
        String job = request.getParameter("job");
        String[] coffe  = request.getParameterValues("coffe");
        String[] hobby = request.getParameterValues("hobby");
        String url = "TestloginView.jsp";
        RequestDispatcher dispatcher = request.getRequestDispatcher(url);
        request.setAttribute("id", id); //��Ʈ�ѷ����� view���� �����͸� ����
        request.setAttribute("pass", pass); //��Ʈ�ѷ����� view���� �����͸� ����
        request.setAttribute("gender", gender); //��Ʈ�ѷ����� view���� �����͸� ����
        request.setAttribute("job", job); //��Ʈ�ѷ����� view���� �����͸� ����
        request.setAttribute("coffe", coffe); //��Ʈ�ѷ����� view���� �����͸� ����
        request.setAttribute("hobby", hobby); //��Ʈ�ѷ����� view���� �����͸� ����
        dispatcher.forward(request, response);
    }

    /**
     * @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);
    }

}

조하영

공부하는 개발자

이전 포스트

휴먼교육센터 개발자과정 68일차

다음 포스트

휴먼교육센터 개발자과정 70일차

휴먼교육센터 코딩공부

휴먼교육센터 개발자과정 68일차

휴먼교육센터 개발자과정 71일차

0개의 댓글