오늘의 노래!!!
소년은 커다란 모험 앞에 서있다 (Remaster)
- 아티스트
- 세진
- 앨범
- PROLOGUE
- 발매일
- 1970.01.01
각 controller, service, dao, mapper 3개씩 만들기~ dto는 4개(변수명확인)!!
Spring Legacy (Spring MVC) 프로젝트 생성
[1] 프로젝트 이름 : MemBoard
[2] 패키지 : com.icia.mbp
src/main/java에 패키지4 + mapper폴더 생성
(1) com.icia.mbpo.dto : BOARD.java // COMMENT.java // MEMBER.java // PAGING.java // SEARCH.java 4개 DTO(class생성)
(2) com.icia.mbp.controller : BController.java // CController.java // MController.java 3개 Controller(class생성)
(3) com.icia.mbp.service : BService.java // CService.java // MService.java 3개 Service(class생성)
(4) com.icia.mbp.dao : BDAO.java // CDAO.java // MDAO.java 3개 DAO(class생성)
(5) com.icia.bo.dao.mapper(폴더) : bMapper.xml (Namaspace = "Board") // cMapper.xml (Namaspace = "Comment") // mMapper.xml (Namaspace = "Member") 3개의 xml생성
(6) src/main/resoureces : mybatis-config.xml 파일 생성 :
type-> BOARD / alias -> board
type-> COMMENT / alias -> comment
type-> MEMBER / alias -> member
type-> PAGING / alias -> paging
type-> SEARCH / alias -> search
[3] pom.xml
: <properties> 아래로 다 복사해서 붙여넣기
[4] web.xml
: 모두 복사
[5] root-context.xml
: 모두 복사 후 mapperLocations의 value값 확인(패키지)
[6] servlet-context.xml
: 모두 복사 후 base-package 확인하기
[7] 프로젝트 우클릭 - properties
(1) Java Build Path - Library - JRE System Library 선택
: workspace default JRE 으로 바꾸기
(2) Java Compiler : 1.6 버전에서 11 버전으로 변경
(3) Project Facets
- Dynamic Web Module 4.0
- Java 11
- Runtimes -> tomcat 9.0 선택//index 확인!
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원제 게시판 프로젝트</title>
<link rel="stylesheet" href="./resources/css/table.css" />
<style>
body {
width: 100%;
background:
url("https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMjExMDRfMjg2%2FMDAxNjY3NDkxMDg4NjE4.qCQ-XgJR18OSajGtBJZIgjekSv6wIwOzBTUH_jytEJkg.TqIRlxtolDshiJN1K-pASlPB8QeYhh-Ur_iRbJ-ViZMg.JPEG.lsw999777%2FFB%25A3%25DFIMG%25A3%25DF1667491032133.jpg&type=sc960_832")
top center;
text-align: center;
color: white;
}
</style>
</head>
<body>
<button id="join">회원가입</button>
<button id="login">로그인</button>
<button id="mypage">내정보보기</button>
<button id="logout">로그아웃</button>
</body>
<script src="https://code.jquery.com/jquery-3.6.4.js"
integrity="sha256-a9jBBRygX1Bh5lt8GZjXDzyOB+bWve9EiO7tROUtj/E="
crossorigin="anonymous">
</script>
<script>
$('#join').click(function() {
location.href = "joinForm";
});
$('#login').click(function() {
location.href = "boardList";
});
$('#mypage').click(function() {
location.href = "pagingList";
});
$('#logout').click(function() {
location.href = "pagingList";
});
</script>
</html>
// view폴더 안에서 >> join.jsp생성
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입</title>
<link rel="stylesheet" href="./resources/css/table.css" />
</head>
<body>
<form>
<table>
<caption>회원가입</caption>
<tr>
<th>아이디</th>
<td>
<input type="text" name="mId" id="mId"/>
<br/><span id="check1"></span>
</td>
</tr>
<tr>
<th>비밀번호</th>
<td>
<input type="password" name="mPw" id="mPw" placeholder="영문, 숫자, 특수문자를 혼합해서 8자 이상" size="40"/>
<br/><span id="check2"></span>
</td>
</tr>
<tr>
<th>비밀번호 확인</th>
<td>
<input type="password" id="checkPw"/>
<br/><span id="check3"></span>
</td>
</tr>
<tr>
<th>이름</th>
<td><input type="text" name="mName"/></td>
</tr>
<tr>
<th>생년월일</th>
<td><input type="date" name="mBirth"/></td>
</tr>
<tr>
<th>성별</th>
<td>
여자 <input type="radio" name="mGender" value="여자"/>
남자 <input type="radio" name="mGender" value="남자"/>
</td>
</tr>
<tr>
<th>이메일</th>
<td><input type="email" name="mEmail" /></td>
</tr>
<tr>
<th>연락처</th>
<td><input type="text" name="mPhone" /></td>
</tr>
<tr>
<th>주소</th>
<td><input type="text" name="mAddr"/></td>
</tr>
<tr>
<th>프로필 사진</th>
<td><input type="file" name="mProfile"/></td>
</tr>
<tr>
<th colspan="2">
<input type="submit" value="가입"/>
</th>
</tr>
</table>
</form>
</body>
<script src="https://code.jquery.com/jquery-3.7.0.js"
integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM="
crossorigin="anonymous"></script>
<script>
$('#join').click(function() {
location.href = "member/joinForm";
});
/* 키를 눌렀다 땟을때 실행 */
$('#mId').keyup(function(){
let mId = $('#mId').val();
let check1 = $('#check1');
if(mId=='icia'){
check1.html("사용중인 아이디 입니다.");
check1.css("color", "red");
} else {
check1.html("사용가능한 아이디 입니다.");
check1.css("color", "blue");
}
});
$('#mPw').keyup(function(){
let mPw = $('#mPw').val();
let check2 = $('#check2');
// 기본값 -1
let num = mPw.search(/[0-9]/); // 숫자 입력 여부 : 입력하면 -1이 아니다
let eng = mPw.search(/[a-z]/); // 영문 입력 여부 : 입력하면 -1이 아니다
let spe = mPw.search(/[`~!@#$%^&*|\\\'\":;\/?]/); // 특수문자 입력 여부 : 입력하면 -1이 아니다
let spc = mPw.search(/\s/); // 공백 여부 : 입력하면 -1이 아니다
// console.log("num = " + num + ", eng = " + eng + ", spe = " + spe + ", spc = " + spc);
if(mPw.length < 8 || mPw.length > 16){
check2.html("비밀번호는 8자리에서 16자리 이내로 입력해주세요.");
check2.css("color", "red");
} else if(spc != -1 ) {
check2.html("비밀번호는 공백없이 입력해주세요");
check2.css("color", "red");
} else if(num == -1 || eng == -1 || spe == -1){
check2.html("영문, 숫자, 특수문자를 혼합하여 입력해주세요.");
check2.css("color", "red");
} else {
check2.html("사용가능한 비밀번호 입니다.");
check2.css("color", "blue");
}
});
$('#checkPw').keyup(function(){
let mPw = $('#mPw').val();
let checkPw = $('#checkPw').val();
let check3 = $('#check3');
if(mPw==checkPw){
check3.html("비밀번호 일치");
check3.css("color", "blue");
} else {
check3.html("비밀번호 불일치");
check3.css("color", "red");
}
});
</script>
</html>
'IT코딩공부!' 카테고리의 다른 글
| #39 스프링(ajax사용)-게시글목록, 댓글작성 (0) | 2023.06.05 |
|---|---|
| #38 스프링(Ajax쿼리문) (0) | 2023.06.01 |
| #36 스프링(Board(게시판프로젝트 만들어서 페이지, 검색찾기 기능 구현) (0) | 2023.05.30 |
| #35 스프링(Board(게시판프로젝트, 어노테이션 기본개념!!) (0) | 2023.05.26 |
| #34 스프링(spring) 공부중~! (0) | 2023.05.23 |
