728x90
코드 : https://github.com/suhong99/jspLecture/tree/master/SampleModelOne
GitHub - suhong99/jspLecture
Contribute to suhong99/jspLecture development by creating an account on GitHub.
github.com
1. eclipse에서 Dynamic Web Project로 파일을 만든다.
이후 \주소\내프로젝트 이름\src\main\webapp\WEB-INF\lib에 mysql-connector-j-8.0.33.jar파일 넣으면 초기세팅이 끝난다.
2. 신세계에서 배우는 프로젝트에선 db, jsp , bootstrap, jquery를 이용해서 만들었다.
3. db는 MYSQL을 사용했는데,
create table member(
id varchar(50) primary key,
pwd varchar(50) not null,
name varchar(50) not null,
email varchar(50) unique,
auth int
);
select count(*)
from member
where id='abc';
select * from member;
delete from member
where id='abc';회원가입은 다음과 같다. 아이디와 비밀번호 email name을 입력받는다.
auth는 추후 관리자 관련 값이다. 관리자는 1 회원은 3
이를 eclipse에서 만든 java코드를 통해서 db에 값을 추가해준다.
프론트쪽에서 값을 입력하기 전에 db와 연결할 java코드를 먼저 작성한다.
3. 데이터에 접근할 때는 dto와 dao를 사용한다.
dto 는 Data Transfer Object로 데이터로 주로 db와 주고 받은 값을 담는데 사용한ㄷ.
dao는 데이터 베이스에 접근하기 위한 객체 Data Access Object이다.
4. dao에는instance생성, 생성자 , 아이디 확인, 로그인 , 회원가입이 있다.
public boolean addMember(MemberDto dto) {
String sql = " insert into member(id, pwd, name, email, auth) "
+ " values(?, ?, ?, ?, 3) ";
Connection conn = null;
PreparedStatement psmt = null;
int count = 0;
try {
conn = DBConnection.getConnection();
System.out.println("addMember 1/3 success");
psmt = conn.prepareStatement(sql);
psmt.setString(1, dto.getId());
psmt.setString(2, dto.getPwd());
psmt.setString(3, dto.getName());
psmt.setString(4, dto.getEmail());
System.out.println("addMember 2/3 success");
count = psmt.executeUpdate();
System.out.println("addMember 3/3 success");
} catch (SQLException e) {
System.out.println("addMember fail");
e.printStackTrace();
} finally {
DBClose.close(psmt, conn, null);
}
return count>0?true:false;
}
위의 코드는 구중에 회원가입에 관련된 코드다.
위와 같이 db와 dao dto가 준비가 끝나면 이제 프론트쪽 코드를 작성하면 된다.
회원가입 코드는 아래와 같다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<style type="text/css">
.center{
margin: auto;
width: 60%;
border: 3px solid #0000ff;
padding: 10px;
}
</style>
</head>
<body>
<h2>회원가입</h2>
<p>환영합니다</p>
<div class="center">
<form action="regiAf.jsp" method="post">
<table border="1">
<tr>
<th>아이디</th>
<td>
<input type="text" name="id" id="id" size="20" placeholder="아이디">
<input type="button" id="id_chk_btn" value="id확인"><br>
<p id="idcheck" style="font-size: 8px"></p>
</td>
</tr>
<tr>
<th>패스워드</th>
<td>
<input type="text" name="pwd" id="pwd" size="20">
</td>
</tr>
<tr>
<th>이름</th>
<td>
<input type="text" name="name" size="20">
</td>
</tr>
<tr>
<th>이메일</th>
<td>
<input type="text" name="email" size="20">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="회원가입">
</td>
</tr>
</table>
</form>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#id_chk_btn").click(function(){
// id의 규칙: 대소문자 + 특수문자 포함
// id 글자의 갯수
// id가 사용할 수있는지 없는지 -ajax
$.ajax({
url:"idcheck.jsp",
type:"post",
data:{ "id":$("#id").val() },
success:function( answer ){
// alert("success");
// alert(answer);
if(answer.trim() == "YES"){
$("#idcheck").css("color", "#0000ff");
$("#idcheck").text("사용할 수 있는 아이디입니다");
}else{
$("#idcheck").css("color", "#ff0000");
$("#idcheck").text("사용중인 아이디입니다");
$("#id").val("");
}
},
error:function(){
alert('error');
}
});
});
});
</script>
</body>
</html>간단하게 id가 이미 존재하는지 확인하고, 만약 존재하지 않는다면 회원가입을 진행하면 된다.
이때 idcheck.jsp에서 아이디를 확인하고 있는데
<%@page import="dao.MemberDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String id = request.getParameter("id");
MemberDao dao = MemberDao.getInstance();
boolean b = dao.getId(id);
if(b == true){ // id가 있음
out.println("NO");
}else{ // id가 없음(사용할 수 있음)
out.println("YES");
}
%>jsp에서는 <% %> 사이에 자바코를 작성하고, dao 인스턴스를 생성한 후, dao에 있는 id 확인 함수를 실행한다.
public boolean getId(String id) {
String sql = " select count(*) "
+ " from member "
+ " where id=? ";
Connection conn = null;
PreparedStatement psmt = null;
ResultSet rs = null;
int count = 0;
try {
conn = DBConnection.getConnection();
System.out.println("getId 1/4 success");
psmt = conn.prepareStatement(sql);
psmt.setString(1, id);
System.out.println("getId 2/4 success");
rs = psmt.executeQuery();
System.out.println("getId 3/4 success");
if(rs.next()) {
count = rs.getInt(1);
}
System.out.println("getId 4/4 success");
} catch (SQLException e) {
System.out.println("getId fail");
e.printStackTrace();
} finally {
DBClose.close(psmt, conn, rs);
}
return count>0?true:false;
}sql의 where문을 통해 아이디를 확인하고 있따면 count를 올려서 true값이 반환되게 한다.
그리고 따라서 위의 regi.jsp에서 true일 때 아이디가 중복됩니다라고 알려준다.
이후 중복되지 않는다면
<%@page import="dto.MemberDto"%>
<%@page import="dao.MemberDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("utf-8");
String id = request.getParameter("id");
String pwd = request.getParameter("pwd");
String name = request.getParameter("name");
String email = request.getParameter("email");
MemberDao dao = MemberDao.getInstance();
MemberDto dto = new MemberDto(id, pwd, name, email, 0);
boolean isS = dao.addMember(dto);
if(isS == true){ // 가입성공!
%>
<script type="text/javascript">
alert("가입에 성공하셨습니다!");
location.href = "login.jsp";
</script>
<%
}else{ // 가입실패
%>
<script type="text/javascript">
alert("다시 가입해 주십시오");
location.href = "regi.jsp";
</script>
<%
}
%>가입 성공을 시키면 된다.
'프론트엔드' 카테고리의 다른 글
| React swiper 라이브러리 사용 (0) | 2023.08.21 |
|---|---|
| 리엑트 fullCalender 라이브러리 사용 (0) | 2023.08.16 |
| 리엑트 페이지네이션 라이브러리(react+ SpringBoot) (0) | 2023.08.11 |
| React 프로젝트 생성 및 기초 (0) | 2023.08.08 |
| form속에 버튼 자동으로 submit되는 거 막기 (0) | 2023.07.24 |