실습(MVC)
- [Web_JSP] 12 이어서
1. join.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입</title>
</head>
<body>
<section>
<form action="JoinOk.me" name="joinForm" method="post">
<p>
<label>
아이디 : <input type="text" name="memberId">
</label>
<input type="button" value="중복확인" onclick="checkId()">
<p id="result"></p>
</p>
<p>
<label>
이름 : <input type="text" name="memberName">
</label>
</p>
<p>
<label>
비밀번호 : <input type="password" name="memberPw">
</label>
</p>
<p>
<label>
비밀번호 확인 : <input type="password" id="memberPw">
</label>
</p>
<p>
성별 :
<label>
남자 <input type="radio" name="memberGender" value="M">
</label>
<label>
여자 <input type="radio" name="memberGender" value="W">
</label>
<label>
선택안함 <input type="radio" name="memberGender" value="N">
</label>
</p>
<p>
<input type="text" id="sample5_address" placeholder="주소" name="memberAddress">
<input type="button" onclick="sample5_execDaumPostcode()" value="주소 검색"><br>
<input type="text" name="memberAddressDetail" placeholder="상세 주소">
<div id="map" style="width:300px;height:300px;margin-top:10px;display:none"></div>
</p>
<p>
<input type="button" value="가입 완료" onclick="join()">
</p>
</form>
</section>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script src="//dapi.kakao.com/v2/maps/sdk.js?appkey=37a9abf54fb9bec320d474d06c964451&libraries=services"></script>
<script>
function checkId(){
$.ajax({
url: "/day07/CheckIdOk.me",
type: "get",
data: {memberId: $("input[name='memberId']").val()},
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(result){
if(result.check){
$("p#result").text("중복된 아이디입니다.");
}else{
$("p#result").text("사용가능한 아이디입니다.");
}
},
error: function(request, status, error){
console.log("실패..");
console.log(request);
console.log(status);
console.log(error);
}
});
}
function join(){
joinForm.submit();
}
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new daum.maps.LatLng(37.537187, 127.005476), // 지도의 중심좌표
level: 5 // 지도의 확대 레벨
};
//지도를 미리 생성
var map = new daum.maps.Map(mapContainer, mapOption);
//주소-좌표 변환 객체를 생성
var geocoder = new daum.maps.services.Geocoder();
//마커를 미리 생성
var marker = new daum.maps.Marker({
position: new daum.maps.LatLng(37.537187, 127.005476),
map: map
});
function sample5_execDaumPostcode() {
new daum.Postcode({
oncomplete: function(data) {
var addr = data.address; // 최종 주소 변수
// 주소 정보를 해당 필드에 넣는다.
document.getElementById("sample5_address").value = addr;
// 주소로 상세 정보를 검색
geocoder.addressSearch(data.address, function(results, status) {
// 정상적으로 검색이 완료됐으면
if (status === daum.maps.services.Status.OK) {
var result = results[0]; //첫번째 결과의 값을 활용
// 해당 주소에 대한 좌표를 받아서
var coords = new daum.maps.LatLng(result.y, result.x);
// 지도를 보여준다.
mapContainer.style.display = "block";
map.relayout();
// 지도 중심을 변경한다.
map.setCenter(coords);
// 마커를 결과값으로 받은 위치로 옮긴다.
marker.setPosition(coords)
}
});
}
}).open();
}
</script>
</html>
2. loginSuccess.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인 결과</title>
</head>
<body>
<c:choose>
<c:when test="${empty memberNumber}">
<h3>로그인 실패</h3>
</c:when>
<c:otherwise>
<h1><c:out value="${memberNumber}"/>번 회원님 로그인 성공</h1>
</c:otherwise>
</c:choose>
</body>
</html>
3. login.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인</title>
</head>
<body>
<section>
<form action="MemberLoginOk.me" method="post" name="loginForm">
<div>
<input name="memberId" type="text" placeholder="아이디를 입력해주세요.">
</div>
<div>
<input name="memberPw" type="password" placeholder="패스워드를 입력해주세요.">
</div>
<div>
<input type="button" id="login" value="로그인">
</div>
</form>
</section>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
let form = document.loginForm;
$("input#login").on("click", function(){
console.log(form.memberId);
if(!form.memberId.value){
alert("아이디를 입력해주세요.");
return;
}
if(!form.memberPw.value){
alert("패스워드를 입력해주세요.");
return;
}
form.submit();
});
</script>
</html>
실습(MVC)
- board 프로젝트
1. dBeaver에서 database 생성 및 사용 설정
create database board;
use board;
2. dBeaver에서 table 생성 및 데이터 삽입
create table tbl_member(
member_number int unsigned auto_increment primary key,
member_id varchar(500) unique,
member_pw varchar(500),
member_name varchar(500),
member_age tinyint,
member_gender char(5),
member_email varchar(500),
member_zipcode char(5),
member_address varchar(500),
member_address_detail varchar(500)
);
insert into tbl_member
(member_id, member_pw, member_name, member_age, member_gender, member_email, member_zipcode, member_address, member_address_detail)
values('hong1234', '1234', '홍길동', 20, 'M', 'tedhong1204@gmail.com', '12345', '강남구 역삼동', '3층');
select * from tbl_member;
3. Action.java
package com.board.app.action;
import java.io.IOException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public interface Action {
public ActionInfo execute(HttpServletRequest req, HttpServletResponse resp) throws IOException;
}
4. ActionInfo.java
package com.board.app.action;
public class ActionInfo {
private boolean isRedirect;
private String path;
public ActionInfo() {;}
public boolean isRedirect() {
return isRedirect;
}
public void setRedirect(boolean isRedirect) {
this.isRedirect = isRedirect;
}
public String getPath() {
return path;
}
public void setPath(String path) {
this.path = path;
}
}
'웹 개발 > JSP' 카테고리의 다른 글
| [Web_JSP] 15 (0) | 2022.06.03 |
|---|---|
| [Web_JSP] 14 (0) | 2022.06.02 |
| [Web_JSP] 12 (0) | 2022.05.31 |
| [Web_JSP] 11 (0) | 2022.05.30 |
| [Web_JSP] 10 (0) | 2022.05.29 |
