[대한상공회의소] HTML, JSP and servlet 1

카테고리 없음

[대한상공회의소] HTML, JSP and servlet 1

och 2024. 3. 19. 18:40

기본개념

Web에서 http://localhost:9000/index.html 을 쳤을 때 동작 과정. (port번호가 이렇게 된 것은 나중에 Tomcat과 오라클이 충돌나지 않게 Tomcat서버 포트를 변경했다.) 타임리프를 사용하지 않고 이클립스로 서블릿과 JSP로 하게 되면 경로에 프로젝트이름이 포함된다.
http://localhost:9000/my_proj/index.html이런식으로..

서블릿과 JSP를 쓰는 것은 타임리프와 스프링에 비해 너무 불편한 것이 많다..

지금 하고 있는 것은
Tomcat 내부에서 실행되고 그 결과를 html로 반환.
Servelet : .java -> .class -> Servlet객체 생성 및 실행
JSP : .jsp -> _jsp.jsp -> Servlet객체 생성 및 실행

톰켓에서 실행되므로 톰켓은 서블릿 컨테이너라고 불리기도 한다.
servlet : java코드를 통해 html을 출력.
jsp : <%@ %>와 같은 형태로 jsp 선언부가 존재한다. 전체적으로 html이고 필요시 자바 코드가 들어간다. 6개의 문법
서블릿을 하려면 디자이너, 뷰를 담당하는 사람들이 자바를 알아야 해서 나온 것이 jsp인데 성능, 기능 상의 이유로 지금은 혼재해서 쓰고 있다.
Thymleaf : 동적 웹페이지를 다루기 위한 또다른 방법. 매우 편하나 속도가 중요한 시스템에는 jsp와 서블릿을 써야한다.

JSP 문법 (3/6)

<%@ %> : 지시
<% %> : 자바코드 삽입
<%= %> : 간단한 결과 출력

html : 전체적인 web page구성
css : html꾸미기, 반응형 web
js : 이벤트 처리(사용자 입력)

html

DOCTYPE : html5 선언
head : 숨은 데이터들 영역. 헤드 내부 대표 테그.

<title> 
<meta> 
<link> 
<style> 
<script>

body : 유저가 보는 영역

<form> : action(경로)와 method(get/post)가 존재. 데이터를 전달할 때 사용한다. 
<filedset> : 연관된 요소를 묶을 때 사용.
<legend> :  필드셋의 이름. 
<input> : 입력을 받기 위한 요소. 요소의 타입(type), 속성(name), 필수입력(required), 입력안내(placeholder), 정의된 값(value) 등의 기능이 있다.
input... 
-text : 텍스트
-password : 비밀번호 안보이게
-radio : 동그란 버튼
name="rButton": 라디오 버튼 그룹을 식별하기 위한 이름입니다. 동일한 그룹 내에서는 하나의 옵션만 선택될 수 있습니다.
-checkbox : 네모난 버튼
name="chk": 체크박스 그룹을 식별하기 위한 이름입니다. 동일한 그룹 내에서 다수의 옵션을 선택할 수 있습니다.
-submit : 서버로 데이터를 전송

<select> : <option>과 같이 쓰이며 서버로 전송하기 위해선 name속성이름이 필요하다

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<% response.sendRedirect("forms.html"); %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>메이이이인</title>
</head>
<body>
    mmmmmain
</body>
</html>

sendredirect로 아래 html파일로 이동하게 된다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action = "formtest">
        <fieldset>
        <legend>ID / PW 입력 (*필수)</legend>
            <input type = "text" name ="id" required="required" placeholder = "아이디입력">
            <input type = "password" name ="pw" required="required" placeholder = "비밀번호입력">

        </fieldset>

        <fieldset>
            <legend>성별/취미 (선택)</legend>
            <input type="radio" value="M" name="rButton">man  <br>
            <input type="radio" value="F" name="rButton">woman<br>

            <input type="checkbox" value="c1" name="chk">등산 <br>
            <input type="checkbox" value="c2" name="chk">여행 <br>
            <input type="checkbox" value="c3" name="chk">서핑 <br>
        </fieldset>

        <fieldset>
            <legend>HTML5만 지원</legend>
            <input type = "date" name="date">
            <input type = "color" name="color">
            <input type = "email" name="email" required="required">
            <input type = "url" name="url">
            <input type = "range" name="range" min="0" max="10" step="2">
            <input type = "number" name="number" min="10" max="100" step="10">
        </fieldset>
        <fieldset>
            <legend>ComboBox / list Menu</legend>
            <select name="selone">
                <option value = "1">02
                <option value = "2">031
                <option value = "3">032
                <option value = "4">064
                <option value = "5">070
            </select>

            <select size="3">
                <option value = "1">search
                <option value = "2">name
                <option value = "3">content
                <option value = "4">writer
                <option value = "5">Reader
            </select>
        </fieldset>

        <fieldset>
            <legend>여러줄 입력</legend>
            <textarea row ="5", cols="100" name="textarea"></textarea>
        </fieldset>
        <fieldset>
            <legend> 입력 글자 수 제한</legend>
            <input type="text" name="txt" maxlength="10">
        </fieldset>
        <input type = "submit" name ="서버전송">
    </form>
</body>
</html>

던져진 데이터가 오는 곳. form태그의 메소드가 여기로 설정되어있다.

Servlet /formtest

@WebServlet("/formtest")
public class FormTestServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

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

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//        response.getWriter().append("Served at: ").append(request.getContextPath());
        //외부 전달값은 request를 통해 들어오게 된다. request내부 id=asdf&pw=asd
        String id = request.getParameter("id");
        String pw = request.getParameter("pw");

        System.out.println("ID & PW : " + id +" & " + pw);
        RequestDispatcher rd = request.getRequestDispatcher("result.jsp"); // 데이터를 전송할 경로
        request.setAttribute("id", id); // 전송할 데이터
        request.setAttribute("pw",  pw); // 전송할 데이터
        rd.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);
    }

}

view Data -> Servlet은 컨트롤러 mapping -> getParameter -> setAttribute -> JSP

result.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Result.jps file is called</title>
</head>
<body>
<%= request.getAttribute("id") %>
<br>
<%= request.getAttribute("pw") %>
</body>
</html>

request : 리퀘스트는 데이터가 이동하는 DTO느낌.
페이지 -> 서블릿 parameter
서블릿 -> 서블릿 : requestDispatcher
jsp -> jsp :requestDispatcher
jsp -> servlet :requestDispatcher
response : 리다이렉션, 내용 출력, 쿠키 등의 기능을 사용할 때.

저작자표시 비영리 변경금지 (새창열림)