https://startbootstrap.com/theme/sb-admin-2#google_vignette
Start Bootstrap
startbootstrap.com
로그인페이지 > 회원가입 버튼 있음 > join
로그인 컨트롤러 > 조인 만들기
//2024.02.28 애플리케이션 테스트 수행
//아이디 -> 중복검사
//비밀번호1
//비밀번호2
//이메일 검증 -> 중복 불가
//닉네임
2024.02.28 애플리케이션 테스트 수행
서비스 기획자를 위한 프로토타이핑 툴 소개
대한민국에서 서비스 기획자의 업무 범위는 딱 떨어지지 않고 포괄적인 것 같다. 지금 바로 생각나는 업무만 나열해보면 시장조사, 벤치마킹, 사업계획서 작성, 요구사항정의서 작성, 정보구조
godplanner.tistory.com
* 스케치 -> 와이어프레임 -> 목업 -> 프로토타입 -> 스토리보드
와이업프레임 : 기획 단계의 기초를 제작하는 단계. 페이지의 레이아웃이나 UI요소 등// 뼈대
목업 : 와이어프레임보다 조금 더 설계 화면과 유사하게 만드는 것.// 정적 모델링
프로토타입 : 다양한 인터렉션이 결합되어 실제 서비스처럼 동작하는 것.
스토리보드 : 설명, 기능 명세서, 와이어프레임, 프로세스, 정책 등등// 설계문서
카카오 오븐
OvenApp.io
Oven(오븐)은 HTML5 기반의 무료 웹/앱 프로토타이핑 툴입니다. (카카오 제공)
ovenapp.io
로그인 > 새로운 프로젝트 만들기
이런식으로 만들기> 아 ..난 귀찮아서 못하겠다....ㅎ
그래도...난 만들었다...
페이지 > 웹테스트 > 새 창으로 보기 > 페이지소스로 볼 수 있다.
loginController
//화면만 띄워주고 끝날거라 파라미터 필요없다.
@GetMapping("/join")
public String join() {
return "join";
}
login.jsp > 가입하기 버튼 누르면 join페이지로 넘어가도록 설정.
id="joinButton" 으로 설정하고, 아래 스크립트 추가
<div class="text-center">
<button type="button" id="joinButton" class="btn btn-info">가입하기</button>
</div>
login.jsp </c:if> 끝나고, </body>위 공간에 스크립트 만들어주기
<!-- "가입하기" 버튼 클릭 시 join 페이지로 이동하는 JavaScript 코드 -->
<script>
// "가입하기" 버튼을 클릭하면 join 페이지로 이동
document.getElementById("joinButton").addEventListener("click", function() {
window.location.href = "./join"; // join 페이지로 이동
});
</script>
join.jsp(mail.jsp복사)
<body id="page-top">
<!-- Navigation-->
<%@ include file="menu.jsp" %>
<div class="mb-10">회원가입</div>
<!-- 회원가입-->
<section class="page-section" id="join">
<div class="d-flex justify-content-center">
<div class="text-center mb-5 w-50">
<form action="./join" method="post">
<!-- 아이디 (중복검사) -->
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon3">아이디</span>
<input type="text" name="email" class="form-control" id="basic-url" aria-describedby="basic-addon3">
<!-- 중복검사 버튼 -->
<button type="button" class="btn btn-primary">아이디 검사</button>
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon3">비밀번호</span>
<input type="password" name="password1" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
<!-- 비밀번호2 -->
<div class="input-group mb-3" style="height: 300px;">
<span class="input-group-text">비밀번호 확인</span>
<input type="password" name="password2" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
<!-- 이메일 (중복검사) -->
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon3">이메일</span>
<input type="email" name="email" class="form-control" id="basic-url" aria-describedby="basic-addon3">
<!-- 중복검사 버튼 -->
<button type="button" class="btn btn-primary">중복검사</button>
</div>
<!-- 닉네임 -->
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon3">닉네임</span>
<input type="text" name="nickname" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
<button type="submit" class="btn btn-primary">가입하기</button>
</form>
</div>
</div>
</section>
>이렇게 만들어진다. : 지금보니 이상하닼ㅋㅋㅋㅋㅋㅋㅋ글쓰기 폼같다. 나중에 수정
id 호출해서 쓸 수 있도록 맞춰 주자. 제이쿼리 호출해서 쓰자.
구동 되었는지 Swal로 확인
join을 클릭하면 이벤트 발생
$(function(){
Swal.fire('title','content', 'success');
//join을 클릭하면 이벤트 발생
$('#join').click(function(){
Swal.fire('회원가입', '회원가입 버튼을 클릭하셨습니다.' , 'success');
});
});
id값 가져오기
$('#join').click(function(){ 이렇게 조인으로 설정해줬는데
<section class="page-section" id=""> 이부분의 id를 join으로 잡으니까 어딜 눌러도 Swal이 나와서 당황했다.
$(function(){
//Swal.fire('title','content', 'success');
//join을 클릭하면 이벤트 발생
$('#join').click(function(){
//Swal.fire('회원가입', '회원가입 버튼을 클릭하셨습니다.' , 'success');
//id값 가져오기
let id=$('#id').val();
//Swal.fire('회원가입','아이디:' + id, 'success' );
let pw1 = $('#password1').val();
let pw2 = $('#password2').val();
let name = $('#name').val();
let email= $('#email').val();
Swal.fire('회원가입','아이디 : ' + id + "비밀번호 : " + pw1 + "/" + pw2, 'success')
});
});
</script>
전송하기 > 실제로 값이 가는지 loginController에서 값을 잡아보면 된다.
//전송하기
let loginForm = $('<form></form>');
loginForm.attr('name', 'login')
loginForm.attr('method', 'post')
loginForm.attr('action', 'post')
loginForm.append($('<input>', {'type':'hidden','name':'id', 'value':id}));
loginForm.append($('<input>', {'type':'hidden','name':'pw', 'value':pw}));
loginForm.append($('<input>', {'type':'hidden','name':'name', 'value':name}));
loginForm.append($('<input>', {'type':'hidden','name':'email', 'value':email}));
loginForm.appendTo('body');
loginForm.submit();
});
loginController> join> 포스트 방식
@PostMapping("/join")
public String join(HttpServletRequest request) {
System.out.println(request.getParameter("id"));
System.out.println(request.getParameter("pw"));
System.out.println(request.getParameter("name"));
System.out.println(request.getParameter("email"));
return "redirect:/login";
}가입하기 누르면 콘솔에 떠야한다.
들어오는 값을 dto에 담아서 전달
멤버DTO > email없음> dto에 먼저 넣어줘여한다. >> 난 있지.
loginController
콘솔로 넘어오고, 데이터베이스에 저장 안된다.
콘솔로 넘어오는건 선생님 id랑 맞추니까 된다.
loginService.join(join) 생성해주기
LoginDAO.join(join); 생성해주기
LoginDAO
login-mapper
이제 데이터베이스에 저장되게 만들어야한다.
>저장된다.
'2023.11.21-2024.05.31' 카테고리의 다른 글
| 20240229 스프링(아이디중복체크(idCheck), 페이징, 검색(search ) (3) | 2024.02.29 |
|---|---|
| 20240228 스프링(데이터베이스 암호화, 회원가입 -비밀번호 확인) (2) | 2024.02.28 |
| 20240227 스프링(공지 게시판-jsp만들기, detail만들기, 수정 삭제 버튼만들기, 페이징 ,배지(new)) (1) | 2024.02.27 |
| 20240227 스프링(공지 게시판) (1) | 2024.02.27 |
| 20240226 스프링(갤러리 상세보기(detail), 갤러리 컨트롤러/서비스 상속만들기 , 공지게시판) (1) | 2024.02.26 |
