2023.04.10 52일차 JSP

52일차 JSP

17.8 business logic- 3

삭제하는 기능 강사님 풀이

<c:url var="deleteUrl" value="/lec/sample12" />
<form action="${deleteUrl }" method="post" >
    <input type="hidden" name="index" id="input3" />
    <input type="submit" value="삭제" />
</form> --%>

---

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

    public Servlet12() {
        super();
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.getWriter().append("Served at: ").append(request.getContextPath());
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 삭제
        // 1. request 파라미터 얻기
        int index = Integer.parseInt(request.getParameter("index")); 

        // 2. business logic 처리(삭제 처리)
        HttpSession session = request.getSession();
        List<String> list = (List<String>) session.getAttribute("db");
        list.remove(index);

        // 3. add attribute

        // 4. forward / redirect
        String location = request.getContextPath() + "/lec/sample09";
        response.sendRedirect(location);
    }
}

17.9 10버전 톰캣

new - server -아파치 톰캣 10.1 서버 추가해줘야 사용할 수 있다.

https://blog.itcode.dev/posts/2022/02/12/tomcat-9-and-10
톰캣 9에서는 javax를 사용햇엇는데 톰캣 10버전은 jakarta로 바뀌었다.
어플리케이션 설정을 다시 해줘야한다.
javax.servlet.*; <-> jakarta.servlet.ServletException;

서블릿을 만들고 일을 하게 만드는 방법이 2가지가 있다.
1.어노테이션을 사용하는 방법
2.web.xml에 매핑하는 방법이 있다.
일관성있게 작성하는게 좋다.

<servlet>
    <description></description>
    <display-name>ListServlet</display-name>
    <servlet-name>ListServlet</servlet-name>
    <servlet-class>com.study.ListServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>ListServlet</servlet-name>
    <url-pattern>/ListServlet</url-pattern>
</servlet-mapping>

서블릿은 스프링가선 잘 사용되지 않으니 흐름이 있다만 알아두자.
taglib가 에러가 난다.
그런데 이전에 사용한 taglib은 사용이 불가능해서 따로 다운을 받아야한다.
https://mvnrepository.com/ 가서 두개를 다운 받아준다.
Jakarta Standard Tag Library API
Jakarta Standard Tag Library Implementation

<%@ taglib prefix="c" uri="jakarta.tags.core" %>
uri가 바뀌었으니 주의하자.

다른 코드들은 이전과 비슷하다.

마리아 db 접속가능한 프로그램 중 여러개가 있는데 mysql과 호환이 된다.
mysql workbench를 사용하면 된다.

17.10 깃

git bash

git ignore에 추가해주기
.classpath
.project
.settings/
.class
build/
bin/

git init

git status볼때 .gitignore와 src/만 있으면된다.

git add .

git commit -m '주석'

git hub descktop - add local repository로 찾아서 등록하면된다.

17.11 서블릿 개선

톰캣 10.1버전에 맞춰서 다시한번 작성해보았다.
전체적인 코드는 같고 jakarta.servlet.*;사용하는 패키지 명이 바뀌었다.
실무에서와 비슷하게 서블릿이 담당하는 업무와 비슷한 이름으로 서블릿이름을 작성했다.

17.11.1 ListServlet

import java.io.*;
import java.util.*;

import jakarta.servlet.*;
import jakarta.servlet.annotation.*;
import jakarta.servlet.http.*;

@WebServlet("/list")
public class ListServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1. request.param

        //2.busineess logic
        HttpSession session = request.getSession();
        Object o = session.getAttribute("db");

        if (o == null) {
            o = new ArrayList<String>();
            session.setAttribute("db", o);
        }

        //3.add attribute
        request.setAttribute("list", o);
        //request.setAttribute("list", List.of("서태웅", "강백호", "채치수"));

        //forward / redirect
        String view = "/WEB-INF/view/list.jsp";
        request.getRequestDispatcher(view).forward(request, response);
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }
}

17.11.2 addServlet

@WebServlet("/add")
public class addServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        String view = "/WEB-INF/view/add.jsp";
        request.getRequestDispatcher(view).forward(request, response);
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // 1. request.param
        String name = request.getParameter("name");

        // 2.busineess logic
        HttpSession session = request.getSession();
        Object o = session.getAttribute("db");

        if (o == null) {
            o = new ArrayList<String>();
            session.setAttribute("db", o);
        }
        List<String> list = (List<String>) o;
        list.add(name);
        // 3.add attribute

        // 4.fowrad/ redircet
        request.getRequestDispatcher("/list").forward(request, response);
    }
}

17.11.3 updateServelt

@WebServlet("/update")
public class updateServelt extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //parametr
        int index = Integer.parseInt(request.getParameter("index"));
        String name = request.getParameter("name");

        //bussiness logic
        HttpSession session = request.getSession();
        List<String> list = (List<String>) session.getAttribute("db");
        list.set(index, name);

        //foward
        request.getRequestDispatcher("/list").forward(request, response);
    }
}

17.11.4 deleteServlet

@WebServlet("/delete")
public class deleteServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        int index = Integer.parseInt(request.getParameter("index"));
        HttpSession session = request.getSession();
        List<String> list = (List<String>) session.getAttribute("db");
        list.remove(index);

        request.getRequestDispatcher("/list").forward(request, response);
    }
}

17.12 css로 다듬기

만들어본 선수 목록을 css로 꾸며보자.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="jakarta.tags.core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Insert title here</title>
<link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css"
    rel="stylesheet"
    integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ"
    crossorigin="anonymous">
<link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
    integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
    <c:url value="/add" var="addUrl" />

    <div class="container">
        <div class="row justify-content-center">
            <div class="col-12 col-md-4 .col-lg-2">

                <div>

                    <div class="d-flex justify-content-between">
                        <h3>목록</h3>

                        <a href="${addUrl }" class="btn btn-primary"><i
                            class="fa-solid fa-plus"></i></a>
                    </div>
                    <div>
                        <c:forEach items="${list }" var="item" varStatus="status">
                            <div class="card">
                                <div id="${status.index }" class="card-body name-item">

                                    ${item }</div>
                            </div>
                        </c:forEach>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 삭제 폼 -->
    <c:url value="/delete" var="deleteUrl" />
    <form action="${deleteUrl }" method="post" id="deleteForm">
        <input type="hidden" name="index" id="input3" /> 
    </form>

    <!-- 모달 -->
    <div class="modal fade" id="updateModal" tabindex="-1"
        aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">수정</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <c:url value="/update" var="updateUrl" />
                    <form action="${updateUrl }" method="post" id="updateForm">
                        <input type="hidden" id="input1" name="index" />
                        <input class="form-control" type="text" name="name" id="input2" />

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary"
                        data-bs-dismiss="modal">닫기</button>
                    <input type="submit" class="btn btn-primary" form="updateForm" value="수정" />
                    <input type="submit" class="btn btn-danger" form="deleteForm" value="삭제" />
                </div>
            </div>
        </div>
    </div>


    <script
        src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
        crossorigin="anonymous"></script>
    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"
        integrity="sha512-pumBsjNRGGqkPzKHndZMaAG+bir374sORyzM3uulLV14lN5LyykqNk8eEeUlUkB3U0M4FApyaHraT65ihJhDpQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <script>
        const myModal = new bootstrap.Modal("#updateModal");

        $(".name-item").click(function() {
            const name = $(this).text().trim();
            const index = $(this).attr("id");

            $("#input1").val(index);
            $("#input2").val(name);
            $("#input3").val(index);

            myModal.show();
        });
    </script>
</body>
</html>

17.13 aws 배포

기능은 기능대로 view는 view대로 나눠져 있기 때문에
css를 꾸미는데 html코드 제외하고는 만질일이 없다는 것을 알 수 있다.
프로젝트 오른쪽 export war파일
저장한곳에 가서 git bash here

cp : 복사하기
명령어 scp : 복사해서 서버로 전송
scp -i 키 파일 bitnami@ip주소:.

접속 ssh
ssh -i 키 bitnami@ip주소

톰캣에 복사
sudo cp jsp.war /opt/bitnami/tomcat/webapps/

2023.04.10

aws를 통해 배포를 해보았다. 앞으로 많이 사용될 기능이니 잘 알아두는 것이 중요한 것 같다.