저는 기능사 시험을 보지만 학원에서 실습은 산업기사로 해서!
실기 연습은 산업기사 기준으로 연습했습니당
이클립스 초기 설정은 https://km713.tistory.com/11 이쪽에 정리해 두었으니 이쪽에서 확인해주세용
실기 예제인 쇼핑몰 회원관리 프로그램을 만들어 봅시다.
실기 예제 PDF파일은 위에 올려두었습니당
PDF에서 지시한대로 설정해주고, DB연결 함수는 알려주니까 걱정 안하셔두 됩니다.
url이 쪼오끔 다르긴 한데 똑같습니다
시험에서 제시한대로 테이블을 생성해주고 제시한대로 더미데이터를 추가해줍니다.
cmd창에 바로 입력하면 오타 수정시 번거로우니까 메모장에 미리 작성후 cmd에 복사해서 넣는게 좋습니당
**cmd에 입력후 Commit에 주의하세요**
커밋 안하면 데이터 출력이 안됩니다!!
저는 이전에도 연습한 적이 있어서 테이블을 03으로 만들었습니다!
그리고 제시한 이미지를 참고하며 인덱스 페이지를 만들어줍시다.
색깔은 선택사항이길래 그냥 제가 맘에 드는 색으로 했습니다.
[index.jsp]
인덱스 jsp페이지를 이렇게 만들고 나서 header.jsp , footer.jsp를 만들어주고 그 다음 index.css를 만들고 reset.css, header.css, footer.css 를 임포트 해준 후 각각의 css를 만들어줍니다!
[header.jsp]
[footer.jsp]
이렇게 인덱스 페이지를 구성하는 요소들을 먼저 만들어주고 index.do로 요청했을때 연결해주는 서블릿을 만들어 줍니다.
[Controller]
바로 View 페이지를 뿌려주면 되는 인덱스와 회원가입은 바로url로 jsp를 연결해줍니다.
한글처리도 빼먹지말고 꼬옥 해줍시다
이제 index.do 요청시 index.jsp의 화면이 잘 출력될 것입니다.
그럼 이제 회원가입 페이지를 만들어줍시다!
제시한 사항을 확인해보면 회원번호는 자동생성(마지막번호 +1)되며 각 항목에 유효성 검사를 하라고 되어있네요.
제시한 이미지를 보고 DTO를 먼저 만들어줍시다.
[MemberDto]
[Dao - maxNo]
회원번호 마지막번호 +1을 가져오는 메서드를 먼저 만들어 줍시다.
그리고 회원가입을 통해서 DB에 값을 추가시키는 메서드 insertDo를 만들어 줍니다.
[joinView.jsp]
<%@page import="org.project.Dao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
Dao dao=Dao.getInstance();
int custNo=dao.maxNo();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Join</title>
<link rel="stylesheet" href="css/join.css" />
<script src="js/joinOk.js" defer></script>
</head>
<body>
<%@include file="header.jsp" %>
<div class="container">
<div class="inner-con">
<form action="joinOk.do" method="post" id="joinForm" >
<table>
<thead>
<tr>
<th colspan="2">홈쇼핑 회원 등록</th>
</tr>
</thead>
<tbody>
<tr>
<td><label for="custNo">회원번호(자동발생)</label></td>
<td><input type="hidden" name="custNo" id="custNo" value="<%=custNo %>" />
<span><%=custNo %></span>
</td>
</tr>
<tr>
<td><label for="custName">회원성명</label></td>
<td><input type="text" name="custName" id="custName" /></td>
</tr>
<tr>
<td><label for="phone">회원전화</label></td>
<td><input type="text" name="phone" id="phone" /></td>
</tr>
<tr>
<td><label for="address">회원주소</label></td>
<td><input type="text" name="address" id="address" /></td>
</tr>
<tr>
<td><label for="joinDate">가입일자</label></td>
<td><input type="text" name="joinDate" id="joinDate" /></td>
</tr>
<tr>
<td><label for="grade">고객등급[A:VIP,B:일반,C:직원]</label></td>
<td>
<select name="grade" id="grade">
<option value="">::선택::</option>
<option value="A">VIP</option>
<option value="B">일반</option>
<option value="C">직원</option>
</select>
</td>
</tr>
<tr>
<td><label for="city">도시코드</label></td>
<td>
<select name="city" id="city">
<option value="">::선택::</option>
<option value="01">서울</option>
<option value="30">울릉도</option>
<option value="60">제주도</option>
</select>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">
<input type="button" value="등록" id="joinOkBtn" class="td_last" />
<a href="memberListView.do" class="td_last">조회</a>
</td>
</tr>
</tfoot>
</table>
</form>
</div>
</div>
<%@include file="footer.jsp" %>
</body>
</html>
중요한 부분은 회원번호는 가입하는 사람이 입력하는게 아닌, 자동으로 입력되어야 한다는 것 입니다.
위에서 만든 maxNo를 불러와야겠죠?
<%
Dao dao=Dao.getInstance();
int custNo=dao.maxNo();
%>
maxNo의 값을 int custNo 변수에 대입했습니다.
그리고 이 값을 input의 value에 담아 보내주고
span 태그에 감싸서 값을 고정적으로 보여주게 해줍니다.
그리고 자바스크립트를 통해서 각 항목에 유효성 검사를 합니다.
/*joinOk.js*/
const joinForm=document.querySelector('#joinForm');
const custNo=document.querySelector('#custNo');
const custName=document.querySelector('#custName');
const phone=document.querySelector('#phone');
const address=document.querySelector('#address');
const joinDate=document.querySelector('#joinDate');
const grade=document.querySelector('#grade');
const city=document.querySelector('#city');
const joinOkBtn=document.querySelector('#joinOkBtn');
joinOkBtn.addEventListener('click', ()=>{
if(custNo==null || custNo.value=="" || custNo.value<=0) {
alert("회원번호가 입력되지 않았습니다.");
custNo.focus();
return false;
}
if(custName==null || custName.value=="" || custName.value<=0) {
alert("회원성명이 입력되지 않았습니다.");
custName.focus();
return false;
}
if(phone==null || phone.value=="" || phone.value<=0) {
alert("전화번호가 입력되지 않았습니다.");
phone.focus();
return false;
}
if(address==null || address.value=="" || address.value<=0) {
alert("주소가 입력되지 않았습니다.");
address.focus();
return false;
}
if(joinDate==null || joinDate.value=="" || joinDate.value<=0) {
alert("가입일자가 입력되지 않았습니다.");
joinDate.focus();
return false;
}
if(grade==null || grade.value=="" || grade.value<=0) {
alert("등급이 입력되지 않았습니다.");
grade.focus();
return false;
}
if(city==null || city.value=="" || city.value<=0) {
alert("도시코드가 입력되지 않았습니다.");
city.focus();
return false;
}
alert("회원등록이 완료 되었습니다.")
joinForm.submit();
});이렇게 joinForm이 submit되면 joinOk.do로 전송되는데 이걸 컨트롤러가 다시 받아서 처리해줍니다.
[Commend 패턴]
클라이언트로부터 받은 요청을 서블릿이 직접 처리하지 않고, 해당 클래스가 처리하도록 합니다. (모듈화)
분기된 클래스가 Dao에 접근해서 로직 수행
-> 모듈화 하지 않고 서블릿에서 직접 처리하면 소스가 번잡해진다. 가독성 좋은 코드가 최고
이전의 컨트롤러 코드에서 빨간 박스로 표시한 부분이 추가된 코드입니다.
다형성 구현을 위해 인터페이스 ExcuteCommend를 생성해 주었습니다.
[joinOkCommend]
가입 성공시 바로 회원상세조회/수정 페이지로 연결했는데 이건 나중에 구현할 부분이라 이 부분에선 가입 성공시 index.do로 우선 보내셔도 괜찮습니다.
양이 많아져서..나눠서 작성해야 할 것 같네요 ㅜㅜ
이어서 회원목록조회와 회원 매출 조회, 회원 정보 수정 구현을 구현해보겠습니당 :-)
'[자기계발] > 자격증' 카테고리의 다른 글
| [과정평가형 정보처리기능사] 22년도 4회차 실기 합격! 후기😒 (0) | 2022.10.12 |
|---|---|
| [과정평가형 정보처리산업기사] 실기 예제 - 쇼핑몰 회원관리 프로그램(3) 회원정보수정 구현하기 (0) | 2022.08.19 |
| [과정평가형 정보처리산업기사] 실기 예제 - 쇼핑몰 회원관리 프로그램(2) 회원목록조회 구현하기(ArrayList로 값 출력하기) (0) | 2022.08.19 |
