CRUD 게시판 만들기_4(회원가입 -> jsp)
Sign Up jsp 페이지를 생성하면
이 화면이 바로 보일 것이다.
간단히 이 틀을 설명하자면
이 정도의 태그를 볼 수 있다.
위에서 쓴 것은 html언어지만 jsp는 톰캣서버가 번역해 웹브라우저로 볼 수 있다.
1-2행에 쓴 것이 꼭 있어야하고, 톰캣서버거 꼭 있어야 jsp를 쓸 수 있다.
1. 어떤 페이지인지 소개해주기 위해 h1태그를 이용해 페이지를 설명해준다.
<h1>Welcome AshSilver Page</h1>2. form 태그를 이용해 table 생성
form태그를 이용하면 어디로 어떤 전송을 할지 정할 수 있게 된다.
tr태그는 table row로 가로줄을 만들고, td태그는 table data로 셀을 만든다.
th는 굵은 글씨에 중앙정렬이 된다.
table은 border="(숫자)"를 적용해주면 눈으로 테이블처럼 쉽게 보인다.
3. 입력 받기
input 태그를 이용하면 사용자로부터 데이터를 받을 수 있다.
예를 들어
<input type="text" name="id">라면
text 타입으로 id를 받아오겠다는 것이다.
다양한 input 형식은 첨부하겠다.
이것들을 table 안에 넣게되면
<table border="1">
<tr>
<th>id</th>
<td><input type="text" name="id"></td>
</tr>
<tr>
<th>password</th>
<td><input type="password" name="password"></td>
</tr>
<tr>
<th>name</th>
<td><input type="text" name="name"></td>
</tr>
<tr>
<th>phoneNumber</th>
<td><input type="text" name="phoneNumber"></td>
</tr>
<tr>
<th>email</th>
<td><input type="text" name="email"></td>
</tr>
</table>이렇게 넣을 수 있고 결과물로
이렇게 볼 수있다.
4. 데이터 전송
여기에 다 완료했을 경우에 가입하기 버튼과, 잘못 입력했을 때 다시 입력할 수 있는 초기화 버튼을 넣을 수 있다.
<input type="reset" name="reset">
<input type="submit" name ="sign up">이 두 문장을 form 안에 추가해주면
이렇게 만들 수 있다!
5. 제출버튼을 눌렀을 때 동작
form에서 action은 제출 버튼 눌렀을 때의 동작이다.
${pageContext.request,contextPath}는 지금 프로젝트의 contextpath를 가져온다는 뜻이고 그 뒤에 나머지 경로를 쓰면 그 경로로 이동된다.
form에서 method는 어떤 방식으로 서버에 넘겨줄지 정할수 있게 해준다.
4가지 정도에 대해 알아보자면
| get | 데이터 조회 |
| post | 데이터 추가 |
| put | 데이터 수정 |
| delete | 데이터 삭제 |
결론적으로
<form action="${pageContext.request.contextPath}/SignUpController" method="post">제출했을 때 signupController로 이동하도록 해줬다.
(추가적으로 더 꾸미자면)
1. title을 설정해줬다.
<title>AshSilver page Sign Up</title>2. 눈 아픈게 싫어서 배경색을 회색으로 설정했다.
<body bgcolor="grey">3. 전체적으로 가운데 정렬을 적용했다.
<div align="center"><%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>AshSilver page Sign Up</title>
</head>
<body bgcolor="grey">
<div align="center">
<h1>Welcome AshSilver Page</h1>
<h1>Sign up</h1>
<form action="${pageContext.request.contextPath}/SignUpController" method="post">
<table border="1">
<tr>
<th>id</th>
<td><input type="text" name="id"></td>
</tr>
<tr>
<th>password</th>
<td><input type="password" name="password"></td>
</tr>
<tr>
<th>name</th>
<td><input type="text" name="name"></td>
</tr>
<tr>
<th>phoneNumber</th>
<td><input type="text" name="phoneNumber"></td>
</tr>
<tr>
<th>email</th>
<td><input type="text" name="email"></td>
</tr>
</table>
<input type="reset" value="reset">
<input type="submit" value="signup">
</form>
</div>
</body>
</html>