티스토리 뷰

web & develop/웹 공부

[MVC SPRING] 06. 회원관리 UI 및 파라미터 수집(VO) 하기

Nerd_Lee 2022. 4. 30. 01:31
반응형

안녕하세요. Nerd-Lee입니다.

공부 내용은, 인프런 박매일님의
[NarP Series]MVC 프레임워크는 내 손에[나프1탄] 을 참고하였습니다.

MVC 1단계인, Servlet 환경으로만 만들어보고, MVC 2단계로 넘어가고

나중에는 Spring Framework를 사용하는 방식의 강의입니다.

MVC 1단계는, Controller + Model 만을 사용하는 방식입니다.

1. Servlet에서 Controller와 Model의 동작원리

  • Servlet에서, Controller는 Servlet으로, Model은 Java class 파일로 만든다.
  • 모델은 데이터베이스를 연동하는 DAO를 만든다.
  • JDBC로, DAO와 DB를 연결한다.
  • DAO에는, method들이 있을 것이고 생성,삭제,업데이트,추가와 같은 기능을 하는 메서드들이 있을 것이다.
  • Client가 요청을 Controller에게 하면, Controller가 Model(DAO) 에게, 해당 요청에 맞는 메서드를 실행하고

    Model(DAO)에서, DB에 접근해서, 요청에 맞는 쿼리문을 실행하고, 그 값을 Controller에게 전달한다.

    하지만 Servlet에서, Controller는 View의 역할도 하기 때문에, 상당히 까다롭지만...

    요청에 맞는 View를 실행시켜서 Client에게 응답한다.

2. Tables Generator 홈페이지에서 테이블 만들기

  • 테이블을 만들어서, 회원가입 틀을 만들 것이다. html 태그를 편하게 가져올 수 있게

    Tables Generator라는 곳에서 7행 2열의 테이블을 쉽게 만들 수 있다.

    File에, New table을 클릭해서, Row : 7, Column : 2로 테이블을 생성한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script
    src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script
    src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script
    src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    회원가입 화면
    <form action="memberInsert.do" method="post">
        <table class="table table-bordered">
            <tr>
                <td>아이디</td>
                <td><input type="text" name="id" /></td>
            </tr>
            <tr>
                <td>패스워드</td>
                <td><input type="text" name="password" /></td>
            </tr>
            <tr>
                <td>이름</td>
                <td><input type="text" name="name" /></td>
            </tr>
            <tr>
                <td>나이</td>
                <td><input type="text" name="age" /></td>
            </tr>
            <tr>
                <td>이메일</td>
                <td><input type="text" name="email" /></td>
            </tr>
            <tr>
                <td>전화번호</td>
                <td><input type="text" name="phone" /></td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input class="btn btn-primary" type="submit" value="가입" />
                    <input class="btn btn-warning" type="reset" value="취소" />
                </td>
            </tr>
        </table>
    </form>
</body>
</html>
  • 만든 코드는 다음과 같다. 값을 다 입력하고, 전송버튼을 누르면, form 태그에 있는 action 속성에 맵핑되어 있는 url로 넘어가서

    DB에 있는 user 테이블에 값을 추가해주는 기능을 만들면 된다.

2. Servlet을 만들자.

  • controller 패키지에, MemberInsertController 서블릿을 만든다. 맵핑은 /memberInsert.do.
@WebServlet("/memberInsert.do")
public class MemberInsertController extends HttpServlet {
    private static final long serialVersionUID = 1L;

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

        // 1. 클라이언트에서 넘어온 파라미터 수집(VO에 하나의 정보로 묶어서 넣어주면 된다.)
        String id = request.getParameter("id");
        String password = request.getParameter("password");
        String name = request.getParameter("name");
        int age = Integer.parseInt(request.getParameter("age"));
        String email = request.getParameter("email");
        String phone = request.getParameter("phone");

        // vo 수집은, 생성자로 해도 되고, Setter로 해도 된다.
        //MemberVO vo = new MemberVO(id, password, name, age, email, phone);
        MemberVO vo = new MemberVO();
        vo.setId(id);
        vo.setPassword(password);
        vo.setAge(age);
        vo.setName(name);
        vo.setEmail(email);
        vo.setPhone(phone);

        System.out.println(vo.toString());
    }
}
  • 코드는 위에처럼 짰다. DB작업은 다음 강의에서 공부를 할 수 있을 것 같다.
  • 일단, 이 상태로 테스트를 진행해보자. 그런데, 404 에러가 뜬다. 그 이유가 있다.

    memberRegister.html에 있는 form 태그에 action 속성이 /memberInsert.do 로 되어 있다.

    이렇게 되면, 경로가 member/memberInsert.do로 나오게 되기 때문에

    action의 속성을 ../memberInsert.do로 만들어줘야 한다.

    그리고 다시 서버를 껐다 킨 다음, 테스트를 진행해보면, Console창에 잘 뜨게 된다. 아주 귀찮다..

    Spring이라면 더 편하게 했을텐데ㅠㅠ하지만 Spring까진 많은 강의가 남았고..

    기본을 알아둬야 나중에 편하기 때문에.. 귀찮더라도 열심히 하자ㅠㅠ

이 글이 도움이 되셨다면 댓글 부탁드립니다^^
다음 글로 찾아오겠습니다!
반응형
저작자표시 비영리 변경금지

'web & develop > 웹 공부' 카테고리의 다른 글

[MVC SPRING] 08. 회원가입 구현하기  (0) 2022.04.30
[MVC SPRING] 07. 한글처리와 JDBC(DAO)  (0) 2022.04.30
[MVC SPRING] 05. Controller에서 Model 분리하기  (0) 2022.04.30
[MVC SPRING] 04. GET과 POST 요청 이해하기  (0) 2022.04.30
[MVC SPRING] 03. 요청(HttpServletRequest)과 응답(HttpServletResponse) 이해하기  (1) 2022.04.30
댓글
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함