우선 그동안 해온 것들을 정리하는거니 양해 바랍니다!
앞서 프레임워크 분석에서 프레임워크는
VO에 데이터가 담겨
Controller > (Service) > ServiceImpl > DAO > SQL > DAO > ServiceImpl > (Service) > Controller 순으로 이동한다고 했다.
따라서 회원가입 기능을 위해서는
1. MemberVO.java 정의
2. MemberService.java 정의 (인터페이스)
3. MemberServiceImpl.java 구현
4. MemberDAO.java 구현
5. Member_SQL.xml 생성 및 구현
6. MemberController.java 구현
프로그램으로는
- MemberWrite.do
- MemberWriteSub.do
이렇게 두개 생성 할 예정이다.
7. MemberWrtie.jsp 생성 및 구현
큰 틀은 이렇게 된다.
우선 VO부터 ,,
만들어 두었던 service 패키지에 MemberVO파일을 생성했다.
모델링했던 내용을 토대로 VO 필드를 잡아줬고 private 선언으로 캡슐화 시켰당
필드를 선언한 이후, alt+shift+s를 누른다음 R을 누르면 게터세터 메소드를 추가시킬 수 있는 창이 나타난다!
이 창에서 selelct All을 누르고 OK를 누르면 게터세터 메소드가 자동으로 추가된다.
VO를 만들었으면 이제 Service를 만들어보자.
Service 파일은 인터페이스 파일로, 명세를 해놓고 Impl파일에서 구현을 진행한다.(개발자들간 협업을 위해서 이렇게 작업을 한다고 함, 이걸 객체지향에서는 추상화 라고 한다.)
Service에서는 명세만 해놓는데, 여기서 throws Exception은 DB에 접근하게되면 SQL을 잘못 작성하면 에러가 나는 상황이 잦기에 throws Exception 처리를 한다고 한다.
벌써 구현해놓은 기능이 꽤 돼서 이만큼 작성을 해놨지만,, 일단 첫줄의 insertMember만 명세하도록 하자.
다음은 ServiceImpl 파일이다. 앞서 만든 Service 파일의 구현을 위해서 만들어진 파일이다.
때문에 implements를 통해 앞서 만든 Service 파일과 연결해준다.
또한 여기선 컨트롤러에서 호출한 서비스의 실제 구현을 위해서 어노테이션이 들어간다.
이렇게 Service 어노테이션에 해당 서비스의 이름을 적어주고, 접근할 DAO 파일을 Resource 어노테이션으로 선언해준다.
어노테이션을 선언하면 빨간색 밑줄이 뜰텐데, import가 안되어있어서이니 마우스를 올려두고 밑에 뜨는 import 버튼을 눌러 자동 import를 해주자!
다음은 DAO 파일이다.
DAO 파일도 마찬가지로 어노테이션을 추가해줘야 컴파일러가 인식을 할 수 있다.
Repository라고 선언하고 이름을 선언해준다.
그리고 전자정부의 SQL 메서드를 사용 할 예정이므로 EgovAbstractDAO 파일을 extends 해준다.
마찬가지로.. insertMember 까지만 따라해주시면 됩니다..!
다음은 SQL 작성인데, SQL도 샘플에서는 너무 깊숙히 폴더가 들어가있기 때문에
따로 폴더를 생성해서 만들어줬다.
그리고 생성한 폴더가 인식하기 위해서는 (나는 ibatis이기 때문에) 저 위에 sql-map-config에
sqlMap 태그의 resource 속성에 해당 파일을 추가해주었다.
선언을 해줬으면 생성한 파일을 보면
<sqlMap> 태그가 있을건데,
해당 태그에 namespace를 선언해주고,
typeAlias를 통해 출력시 필요한 변수를 담아 둘 객체를 만들어주었다.
이런식으로 alias에는 별칭을 써주면 되고, type에는 담을 객체의 위치를 적어주면 된다.
resultMap은 지금은 필요없음!
그리고 <insert 구문에 id값으로 아까 DAO에서 선언했던 insert("abcd",vo) 이 abcd를 같게한다.
이게 id값이라고하는데 , 이걸 통해서 저 SQL xml파일에서 해당 id값에 맞는 SQL구문을 찾아서 사용한다고함.
이렇게 SQL문을 작성까지 했으니 이제 Controller를 작성해보자
컨트롤러도 메인 메서드를 생성해서 어노테이션을 붙여준다.
그리고, 필드에 Resource 어노테이션을 붙이고 아까 ServiceImpl에서 선언했던 값을 name 태그에 적어주고 필드 선언을 해준다.
이렇게 하고, RequestMapping을 써서 도메인에서 입력되는 값을 적어준다. 저 .do가 호출되면 이 프로그램이 실행된다는 의미이다.
일단 첫 memberWrite()를 보면 memberWrite.do가 되면 아래의 member/memberWrite라는 jsp파일을 실행하게 해뒀다.
그리고 화면에서 입력값을 받고서 가입하기 버튼을 누르면 memberWriteSave.do를 실행하게 할거기 때문에
아래의 RequestMapping에 memberWriteSave.do를 선언해준다.
그리고 Ajax를 사용하기위해 ResponseBody 어노테이션을 선언하였고,
result 필드에 만들어뒀던 서비스를 실행한다.
insert이후 result값이 null이면 insert가 성공한거기 때문에 (실패하면 null이 아니라 다른 값이 나온다고 했는데 잘 기억이..) message에 ok를 넣어 return해준다.
이제 jsp를 만들어보자
일단 jsp파일도 따로 폴더를 만들기 위해서 dispatche-servelet.xml 파일을 수정한다.
<bean class="org.springframework.web.servlet.view.UrlBasedViewResolver" p:order="1"
p:viewClass="org.springframework.web.servlet.view.JstlView"
이부분을 p:prefix="/WEB-INF/jsp/egovframework/example/" p:suffix=".jsp"/>
이렇게 수정 p:prefix="/" p:suffix=".jsp"/>
여기서 prefix부분이 jsp파일 앞의 패키지인데 그걸 이렇게 비우면 상위 폴더가 src.main.webapp이 된다.
webapp에 member라는 폴더를 추가해서 memberWrite.jsp 파일을 추가해준다.
이후 우선 jquery를 사용하기 위해서 script라는 폴더를 만들어 jquery에 필요한 js 파일을 넣어준다.
jsp파일이 들어가는 member폴더와 같은 계층에 script 폴더를 만들어 넣어준다.
저 jquery 파일은
이걸 넣어주면 된다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Pines</title>
<link href="images/pines.JPG" rel="shortcut icon" type="image/x-icon">
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="/pines/script/jquery-1.12.4.js"></script>
<script src="/pines/script/jquery-ui.js"></script>
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
$( function() {
$( "#birth" ).datepicker({
changeMonth: true,
changeYear: true
});
window.onload = function(){
document.getElementById("address_button").addEventListener("click", function(){ //주소입력칸을 클릭하면
//카카오 지도 발생
new daum.Postcode({
oncomplete: function(data) { //선택시 입력값 세팅
document.getElementById("zipCode").value = data.address; // 주소 넣기
document.querySelector("input[name=address]").focus(); //상세입력 포커싱
}
}).open();
});
}
$("#btn_idcheck").click(function(){
var userId = $("#userId").val();
userId = $.trim(userId);
if(userId == ""){
alert("아이디를 입력해주세요.");
$("#userId").focus();
return false;
} // idcheck.do로 데이터 전송 ,, ajax방식
$.ajax({
type:"POST",
data:"userId="+userId, // json설정
url:"idcheck.do",
dataType:"text",
success: function(result){
if(result == "ok"){
alert("사용 가능한 아이디 입니다.");
} else{
alert("이미 사용중인 아이디 입니다.");
}
},
error: function(){
alert("오류발생");
}
});
});
$("#btn_submit").click(function(){//데이터 유효성 검사
var userId = $("#userId").val();
var pass= $("#pass").val();
var name = $("#name").val();
userId = $.trim(userId);
pass = $.trim(pass);
name = $.trim(name);
if(userId == ""){
alert("아이디를 입력해주세요.");
$("#userId").focus();
return false;
}
if(pass == ""){
alert("비밀번호를 입력해주세요.");
$("#pass").focus();
return false;
}
if(name == ""){
alert("이름을 입력해주세요.");
$("#name").focus();
return false;
}
$("#userId").val(userId);
$("#pass").val(pass);
$("#name").val(name);
var formData = $("#frm").serialize(); // serialize 함수로 frm아이디값의 구성요소를 전부 가져옴
$.ajax({
type:"POST",
data:formData,
url:"memberWriteSave.do",
dataType:"text",
success: function(result){
if(result == "ok"){
alert("저장 완료");
location="loginWrite.do"
} else{
alert("저장실패. \n 관리자에게 연락해주세요");
}
},
error: function(){
alert("오류발생");
}
});
});
});
</script>
</head>
<style>
*{
margin: 0;
padding:0;
}
/* 화면 전체 렙 */
.wrapper{
width: 1900px;
}
/* content 랩 */
.wrap{
width : 800px;
margin: auto;
}
/* 페이지 제목 */
.subject{
text-align: center;
margin: 50px 0;
}
.subject span{
cursor:pointer;
}
/* 아이디 영역 */
.id_wrap{
width: 100%;
margin-top: 20px;
}
.id_input_box{
border: 1px solid #A5A5A5;
height:31px;
padding: 10px 14px;
width: 800;
}
.id_input{
width:80%;
height:100%;
border:none;
font-size:28px;
}
/*아이디 찾기영역*/
.btn_idcheck{
position: absolute;
border: 1px solid #A5A5A5;
height: 40px;
width: 6%;
float: right;
font-size: 14px;
line-height: 40px;
text-align : center;
font-weight: 900;
color: #BFBFBF;
background-color: #FFFFFF;
cursor: pointer;
margin-left : 670px;
margin-top : -48px;
}
/* 비밀번호 영역 */
.pw_wrap{
margin-top: -1px;
width: 100%;
}
.pw_input_box{
border: 1px solid #A5A5A5;
height:31px;
padding: 10px 14px;
}
.pw_input{
width:100%;
height:100%;
border:none;
font-size:28px;
}
/* 비밀번호 확인 영역 */
.pwck_wrap{
width: 100%;
margin-top: -1px;
}
.pwck_input_box{
border: 1px solid #A5A5A5;
height:31px;
padding: 10px 14px;
}
.pwck_input{
width:100%;
height:100%;
border:none;
font-size:28px;
}
/* 이름 영역 */
.user_wrap{
width: 100%;
margin-top: -1px;
}
.user_input_box{
border: 1px solid #A5A5A5;
height:31px;
padding: 10px 14px;
}
.user_input{
width:100%;
height:100%;
border:none;
font-size:28px;
}
/* 생년월일 영역 */
.birth_wrap{
width: 100%;
margin-top: -1px;
}
.birth_input_box{
border: 1px solid #A5A5A5;
height:31px;
padding: 10px 14px;
}
.birth_input{
width:100%;
height:100%;
border:none;
font-size:28px;
}/* 휴대폰 번호 영역 */
.phone_wrap{
width: 100%;
margin-top: -1px;
}
.phone_input_box{
border: 1px solid #A5A5A5;
height:31px;
padding: 10px 14px;
}
.phone_input{
width:100%;
height:100%;
border:none;
font-size:28px;
}
/* 주소 영역 */
.address_wrap{
width: 100%;
margin-top: -1px;
}
.address_input_1_box{
border: 1px solid #A5A5A5;
height:31px;
padding: 10px 14px;
width: 800;
}
.address_input_1{
width:80%;
height:100%;
border:none;
font-size:28px;
}
.address_button{
position: absolute;
border: 1px solid #A5A5A5;
height: 40px;
width: 6%;
float: right;
font-size: 14px;
line-height: 40px;
text-align : center;
font-weight: 900;
color: #BFBFBF;
background-color: #FFFFFF;
cursor: pointer;
margin-left : 675px;
margin-top : -48px;
}
.address_input_2_wrap{
margin-top: -1px;
}
.address_input_2_box{
border: 1px solid #A5A5A5;
height:31px;
padding: 10px 14px;
}
.address_input_2{
width:100%;
height:100%;
border:none;
font-size:28px;
}
/* 가입하기 버튼 */
.first_page_button_wrap{
margin: 20px;
text-align: center;
}
.join_button{
border: 1px solid #A5A5A5;
width: 45%;
height: 80px;
background-color: #FA6A6A;
font-size: 20px;
font-weight: 900;
color: white;
margin-left : 20px;
cursor:pointer;
}
.first_page_button{
border: 1px solid #A5A5A5;
width: 45%;
height: 80px;
color: #FA6A6A;
background-color: #FFFFFF;
font-size: 20px;
font-weight: 900;
cursor:pointer;
}
/* float 속성 해제 */
.clearfix{
clear: both;
}
</style>
<body>
<form name ="frm" id="frm">
<div class="wrapper">
<div class="wrap">
<div class="subject">
<span onClick="location.href='productList.do'">
<img src="images/pines.JPG" alt="" width="100px" height="100px"/>
</span>
</div>
<div class="id_wrap">
<div class="id_input_box">
<input id="userId" name="userId" class="id_input" placeholder="아이디 설정">
</div>
<input type="button" id="btn_idcheck" class="btn_idcheck" value="중복 확인">
</div>
<div class="pw_wrap">
<div class="pw_input_box">
<input id="pass" name="pass" class="pw_input" placeholder="비밀번호 설정">
</div>
</div>
<div class="pwck_wrap">
<div class="pwck_input_box">
<input class="pwck_input" placeholder="비밀번호 확인">
</div>
</div>
<div class="user_wrap">
<div class="user_input_box">
<input id="name" name="name" class="user_input" placeholder="이름">
</div>
</div>
<div class="birth_wrap">
<div class="birth_input_box">
<input id="birth" name="birth" class="birth_input" placeholder="생년월일 (8자리)">
</div>
</div>
<div class="phone_wrap">
<div class="phone_input_box">
<input id="phone" name="phone" class="phone_input" placeholder="휴대폰 번호(010-1234-5678)">
</div>
</div>
<div class="address_wrap">
<div class="address_input_1_wrap">
<div class="address_input_1_box">
<input id="zipCode" name="zipCode" class="address_input_1" placeholder="우편 번호">
</div>
<input type="button" id="address_button" class="address_button" value="우편번호 찾기">
<div class="clearfix"></div>
</div>
<div class ="address_input_2_wrap">
<div class="address_input_2_box">
<input id="address" name="address" class="address_input_2" placeholder="상세 주소">
</div>
</div>
</div>
<div class="first_page_button_wrap">
<input type="button" class="first_page_button" value="이전" OnClick="location.href='loginWrite.do'">
<input type="button" id="btn_submit" class="join_button" value="가입하기">
</div>
</div>
</div>
</form>
</body>
</html>이제 서버를 돌려보면..
예.. 데이터 추가된게 확인이 됩니다..
앞으로의 글에서는 .. 내가 어려워서 해결했던 기능을 위주로 쓰려고 했었기 때문에..
조금 더 디테일한 기초적인 설명을 원하시면
유튜브주소
[ java , html+css , javascript , mysql , jsp , 전자정부프레임워크 ] 강좌입니다. - 순서는 역순입니다.- 혹시 처음부터 보시는 분들은 맨 아래에서 부터 보세용 ~- 실제 온라인 강의의 영상입니다.- 편집
cafe.daum.net
이 카페에서 강의를 들어보시는것을 추천합니다.!
'💻Spring' 카테고리의 다른 글
| 프로젝트 - 전자정부프레임워크 이미지 업로드 (0) | 2022.11.01 |
|---|---|
| 전자정부 프레임워크 - 컨트롤러와 jsp ajax로 json 주고받기 (1) | 2022.10.28 |
| 전자정부 프레임워크_도소매 플랫폼 프로젝트_프로젝트 생성 (0) | 2022.10.28 |
| 전자정부 프레임워크_도소매 플랫폼 프로젝트_데이터 모델링 (0) | 2022.10.28 |
| 전자정부 프레임워크 3일차 - 프레임워크 커스터마이징 (0) | 2022.08.03 |
