Spring/SpringMVC

서블릿으로 회원 웹 애플리케이션 만들기

느리지만 꾸준하게 2022. 4. 23. 12:14

 servlet 폴더안에 MemberFormServlet 파일을 만들어주자.

// MemberFormServlet Class

package hello.setvlet.web.servlet;

import hello.setvlet.domain.member.MemberRepository;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet(name = "memberFormServlet", urlPatterns = "/servlet/members/new-form")
public class MemberFormServlet extends HttpServlet {

    private MemberRepository memberRepository = MemberRepository.getInstance();

    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        response.setContentType("text/html");
        response.setCharacterEncoding("utf-8");

        PrintWriter w = response.getWriter();

        // basic에 있는 hello-form.html과 같은 모양이다.
        w.write("<!DOCTYPE html>\n" +
                "<html>\n" +
                "<head>\n" +
                "    <meta charset=\"UTF-8\">\n" +

                "    <title>Title</title>\n" +
                "</head>\n" +
                "<body>\n" +
                "<form action=\"/servlet/members/save\" method=\"post\">\n" +
                "    username: <input type=\"text\" name=\"username\" />\n" +
                "    age:      <input type=\"text\" name=\"age\" />\n" +
                " <button type=\"submit\">전송</button>\n" + "</form>\n" +
                "</body>\n" +
                "</html>\n");
    }
}

 

html로 작성된 부분은 hello-form.html과 형식이 비슷하다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="/request-param" method="post">
    username: <input type="text" name="username" /> age: <input type="text" name="age" /> <button type="submit">전송</button>
</form>
</body>
</html>

 

ServletApplication을 돌려주고 

package hello.setvlet;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.web.servlet.ServletComponentScan;


@ServletComponentScan // 서블릿 자동 등록
@SpringBootApplication
public class SetvletApplication {

   public static void main(String[] args) {
      SpringApplication.run(SetvletApplication.class, args);
   }

}

 

 

위에서 지정해준 /servlet/members/new-form경로로 들어가보자.

http://localhost:8080/servlet/members/new-form으로 들어가서 소스보기를 누르면 지정한대로 잘 나오게 된다.

 

이 경로도 만들어 줘서 username에 kim  / age 20을 넣었을 때 화면이 넘어가도록 해보자.

"<form action=\"/servlet/members/save\" method=\"post\">\n" +

Form Data는 제대로 나오는 것을 볼 수 있다.

 

 

 

  • 이번에는HTML Form에서 데이터를 입력하고 전송을 누르면 실제 회원 데이터가 저장되도록 해보자.
  • POST / HTML / Form에서 학습한 내용과 같다.

MemberSaveServlet도 만들어 준다.

package hello.setvlet.web.servlet;

import hello.setvlet.domain.member.Member;
import hello.setvlet.domain.member.MemberRepository;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet(name = "memberSaveServlet", urlPatterns = "/servlet/members/save")
public class MemberSaveServlet extends HttpServlet {

    private MemberRepository memberRepository = MemberRepository.getInstance();

    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // get에 string에서 꺼내든 form 전송방식이든 둘 다 request.getParameter로 보낼 수 있다.
        System.out.println("MemberSaveServlet.service");
        String username = request.getParameter("username");
        // 나이가 request의 getParameter는 항상 문자이다.
        // 폼에서 온 것을 getParameter해서 꺼내온 다음에
        int age = Integer.parseInt(request.getParameter("age"));

        // Member 만들어서 save를 한다.
        Member member = new Member(username, age);
        memberRepository.save(member);


        // 결과를 html로 응답을 해준다.
        response.setContentType("text/html");
        response.setCharacterEncoding("utf-8");
        PrintWriter w = response.getWriter();
        // 동적으로 코드가 들어가있다.
        w.write("<html>\n" +
                "<head>\n" +
                " <meta charset=\"UTF-8\">\n" + "</head>\n" +
                "<body>\n" +
                "성공\n" +
                "<ul>\n" +
                "    <li>id="+member.getId()+"</li>\n" +
                "    <li>username="+member.getUsername()+"</li>\n" +
                " <li>age="+member.getAge()+"</li>\n" + "</ul>\n" +
                "<a href=\"/index.html\">메인</a>\n" + "</body>\n" +
                "</html>");
    }
}

 

만들고 난 후 ServletApplication도 돌려주면

// ServletApplication Clss

package hello.setvlet;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.web.servlet.ServletComponentScan;


@ServletComponentScan // 서블릿 자동 등록
@SpringBootApplication
public class SetvletApplication {

   public static void main(String[] args) {
      SpringApplication.run(SetvletApplication.class, args);
   }

}

 

 

 

 

 

localhost:8080/servlet/members/save로 들어가게 되면 결과값이 잘 나오는 것을 확인할 수 있다.

 

 

 

 

 

이번에는 저장된 모든 회원 목록을 조회하는 기능을 만들어보면

// MemberListServlet

package hello.setvlet.web.servlet;

import hello.setvlet.domain.member.Member;
import hello.setvlet.domain.member.MemberRepository;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

@WebServlet(name = "memberListServlet", urlPatterns = "/servlet/members")
public class MemberListServlet extends HttpServlet {

    private MemberRepository memberRepository = MemberRepository.getInstance();

    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html");
        response.setCharacterEncoding("utf-8");

        List<Member> members = memberRepository.findAll();

        PrintWriter w = response.getWriter();
        w.write("<html>");
        w.write("<head>");
        w.write("    <meta charset=\"UTF-8\">");
        w.write("    <title>Title</title>");
        w.write("</head>");
        w.write("<body>");
        w.write("<a href=\"/index.html\">메인</a>");
        w.write("<table>");
        w.write("    <thead>");
        w.write("    <th>id</th>");
        w.write("    <th>username</th>");
        w.write("    <th>age</th>");
        w.write("    </thead>");
        w.write("    <tbody>");

        for (Member member : members) {
            w.write(" <tr>");
            w.write(" <td>" + member.getId() + "</td>");
            w.write(" <td>" + member.getUsername() + "</td>");
            w.write(" <td>" + member.getAge() + "</td>");
            w.write(" </tr>");
        }

        w.write("    </tbody>");
        w.write("</table>");
        w.write("</body>");
        w.write("</html>");
    }
}

 

테스트를 돌려보자. 에러가 떳는데

Web server failed to start. Port 8080 was already in use.

lsof -i tcp:8080 8080 포트로 실행중인 프로세스를 파악한 다음에

sudo kill -9 {PID번호}를 출력하자

잘 나온다. 참고

servlet/members url에서 결과가 잘 나오는 것을 확인할 수 있다.

 

서블릿에서 아래와 같이 html로 만드는 것이 굉장히 별로다.(자바코드에 html 코드)

PrintWriter w = response.getWriter();
    w.write("<html>");
    w.write("<head>");
    w.write("    <meta charset=\"UTF-8\">");
    w.write("    <title>Title</title>");
    w.write("</head>");
    w.write("<body>");
    w.write("<a href=\"/index.html\">메인</a>");
    w.write("<table>");
    w.write("    <thead>");
    w.write("    <th>id</th>");
    w.write("    <th>username</th>");
    w.write("    <th>age</th>");
    w.write("    </thead>");
    w.write("    <tbody>");

    for (Member member : members) {
        w.write(" <tr>");
        w.write(" <td>" + member.getId() + "</td>");
        w.write(" <td>" + member.getUsername() + "</td>");
        w.write(" <td>" + member.getAge() + "</td>");
        w.write(" </tr>");
    }

    w.write("    </tbody>");
    w.write("</table>");
    w.write("</body>");
    w.write("</html>");
}

다음에 템플릿 엔진을 써서 html에다가 자바코드를 넣어보고 JSP를 써보면서 경험해보자.

  • JSP는 성능과 기능면에서 템플릿 엔진과의 경쟁에서 밀리면서, 사장되어 가는 추세
  • 템플릿 엔진들은 각각 장단점이 있고 JSP는 앞부분에서 조금 다루기만 하자 / Thymeleaf를 나중에 주로 사용

 

 

 

 

 

 

 

 

 

 

 

<출처 김영한: 스프링 MVC 1편 - 벡앤드 웹 개발 핵심 기술>

https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-mvc-1/dashboard

 

스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술 - 인프런 | 강의

웹 애플리케이션을 개발할 때 필요한 모든 웹 기술을 기초부터 이해하고, 완성할 수 있습니다. 스프링 MVC의 핵심 원리와 구조를 이해하고, 더 깊이있는 백엔드 개발자로 성장할 수 있습니다., -

www.inflearn.com