반응형
# MVC01_6 회원관리UI 및 파라메터 수집(VO)하기
## 작업 설명
- Controller (Servlet 로 생성)
- Model (JAVA 로 생성)
- DB (MySQL 로 진행)
- DAO 에서 DB 접근 시 JDBC 로 진행
- 해당 모델을 이용하여 작업 예정.
## tablesgenerator (테이블 구조 생성기) 사용방법
- tablesgenerator 활용하여 form 생성 예정
- https://www.tablesgenerator.com/
Create LaTeX tables online – TablesGenerator.com
You can import table data by uploading file in CSV format (Comma Separated Value). Most spreadsheet software, both desktop and online, allows to save tabular data in CSV format — it is usually available in the File menu under the name "Save As..." or "Ex
www.tablesgenerator.com
1. 상단 HTML 클릭 > File 클릭
2. 생성할 테이블의 Rows 와 Columns 입력 후 Create
3. 생성된 table 크기 조절 후 안에 값 입력
4. 작업 완료된 결과를 가져와서 HTML에 입력
<table style="undefined;table-layout: fixed; width: 376px">
<colgroup>
<col style="width: 107px">
<col style="width: 269px">
</colgroup>
<thead>
<tr>
<th>아이디</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>패스워드</td>
<td></td>
</tr>
<tr>
<td>이름</td>
<td></td>
</tr>
<tr>
<td>나이</td>
<td></td>
</tr>
<tr>
<td>이메일</td>
<td></td>
</tr>
<tr>
<td>전화번호</td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</tbody>
</table>## 생성된 테이블 작업
- 테이블에 input 등 필요한 태그 추가 및 해당 태그에 id값 설정.
- id 값 설정 시 VO에 맞게 설정해 준다.
- 기존 HTML 코드에서 불필요한 코드 제거
- 신청, 취소 버튼 추가
- 부트스트랩을 이용한 CSS 작업
## Servlet 생성
- kr.bit.controller > New 클릭 후 Servlet 클릭
- MemberInsertController 입력 후 Next
- 그리고 URL Mapping 에 form의 action에 입력한 /memberInsert.do 입력 후 service 만 클릭 한 뒤 Finish.
- Servlet에 회원가입에 따른 memberVO 에 set 되도록 아래와같이 설정.
package kr.bit.controller;
import java.io.IOException;
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 kr.bit.model.MemberVO;
@WebServlet("/memberInsert.do")
public class MemberInsertController extends HttpServlet {
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 1. 파라미터 수집(VO)
String id = request.getParameter("id");
String pass = request.getParameter("pass");
String name = request.getParameter("name");
int age = Integer.parseInt(request.getParameter("age"));
String email = request.getParameter("email");
String phone = request.getParameter("phone");
// 파라미터 수집(VO)
//MemberVO vo = new MemberVO(id, pass, name, age, email, phone);
MemberVO vo = new MemberVO();
vo.setId(id);
vo.setPass(pass);
vo.setName(name);
vo.setAge(age);
vo.setEmail(email);
vo.setPhone(phone);
System.out.println("vo : " + vo); // vo.toString() 이 생략되어있는 것.
}
}
## HTML 경로 수정 및 작동확인
- form의 경로를 기존 /memberInsert.do 에서 /MVC01/memberInsert.do 로 변경/.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>신규 회원 가입</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<h1>회원가입화면</h1>
<!-- /MVC01 에서 앞에 /는 http://127.0.0.1:8080/ 에서의 /를 의미. -->
<!-- /MVC01 를 ../ 로 할 수도 있지만, 매번 이렇게 하면 복잡하므로 위처럼 진행. -->
<form action="/MVC01/memberInsert.do" method="POST" >
<table class="table table-bordered">
<tr>
<td>아이디</td>
<th><input type="text" name="id" /></th>
</tr>
<tr>
<td>패스워드</td>
<th><input type="password" name="pass" /></th>
</tr>
<tr>
<td>이름</td>
<th><input type="text" name="name" /></th>
</tr>
<tr>
<td>나이</td>
<th><input type="text" name="age" /></th>
</tr>
<tr>
<td>이메일</td>
<th><input type="text" name="email" /></th>
</tr>
<tr>
<td>전화번호</td>
<th><input type="text" name="phone" /></th>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="가입" class="btn btn-primary"/>
<input type="reset" value="취소" class="btn btn-warning"/>
</td>
</tr>
</table>
</form>
</body>
</html>## 작업 내용 확인
- 회원가입 form에 입력 후 가입 진행 시 vo에 설정되는 값 확인
반응형
'인프런 강의 학습 > MVC 프레임워크_나프1탄' 카테고리의 다른 글
| 인프런 MVC 프레임워크는 내손에 21일차 : MVC01_8 회원가입 구현 (0) | 2021.06.06 |
|---|---|
| 인프런 MVC 프레임워크는 내손에 20일차 : MVC01_7 한글처리와 JDBC(DAO) (0) | 2021.06.06 |
| 인프런 MVC 프레임워크는 내손에 18일차 : MVC01_5 Controller에서 Model 분리하기 (0) | 2021.06.05 |
| 인프런 MVC 프레임워크는 내손에 17일차 : MVC01_4 GET과 POST 요청 이해하기 (0) | 2021.06.05 |
| 인프런 MVC 프레임워크는 내손에 16일차 : MVC01_3 요청과 응답 이해하기 (0) | 2021.06.05 |
