Dynamic Web Project : 11-board
[클라이언트]
Folder : main
JSP File : WebContent/main/index.jsp
Folder : member
JSP File : WebContent/member/loginOK.jsp
WebContent/member/loginFail.jsp
Folder : image
image File : WebContent/image/tumi.png
Folder : sql
sql File : WebContetnt/sql/member.sql
- 10-member에서 작업한 파일을 그대로 넣는다 - > 복사
Folder : member
JSP File : WebContent/member/loginForm.jsp(수정)
WebContent/member/login.jsp(수정)
WebContent/member/writeForm.jsp(수정)
WebContent/member/write.jsp
WebContent/member/checkId.jsp
Folder : script
javascript File : WebContent/script/memberScript.js
- 10-member에서 작업한 파일을 그대로 넣는다 - > 복사
Package : member.bean
Class File : src/member.bean/MemberDTO.java(수정없이 그대로 사용) ( DTO : Data Transfer Objecr)
Package : member.dao
Class File : src/member.dao/MemberDAO.java(수정) (DAO : Data Access Object)
<실행 결과>
<작업 순서>
1. 11-board/WebContent/sql/member.sql
create table member(
name varchar2(30) not null,
id varchar2(30) primary key,
pwd varchar2(30) not null,
gender varchar2(3),
email1 varchar2(20),
email2 varchar2(20),
tel1 varchar2(10),
tel2 varchar2(10),
tel3 varchar2(10),
addr varchar2(100),
logtime date);
2. 11-board/WebContent/main/index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page info ="copyright by MIS" %>
<% request.setCharacterEncoding("utf-8"); %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>게시판</title>
</head>
<body>
*** 메인 화면 ***<br><br>
<a href="../member/writeForm.jsp">회원가입</a><br>
<a href="../member/loginForm.jsp">로그인</a><br>
<a href="">로그아웃</a><br>
<a href="">회원정보 수정</a><br>
</body>
</html>
3. 11-board/WebContent/member/loginFoam.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page info ="copyright by MIS" %>
<% request.setCharacterEncoding("utf-8"); %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인</title>
///////////////////////////////////////////////////////////////
<script type="text/javascript" src="../script/memberScript.js">
///////////////////////////////////////////////////////////////
</script>
</head>
<body>
<form name="loginForm" method ="post" action ="login.jsp">
<table border ="1">
<tr>
<td width="70" align="center">아이디</td>
<td><input type="text" name="id" size="25"></td>
</tr>
<tr>
<td width="70" align="center">비밀번호</td>
<td><input type="password" name="pwd" size="30"></td>
</tr>
<tr>
<td colspan="2" align ="center">
<input type="button" value="로그인" onclick="javascript:checkLogin()">
<input type="button" value="회원가입"
onclick="javascript:location.href='writeForm.jsp'">
</td>
</tr>
</table>
</form>
</body>
</html>
4. 11-board/WebContent/member/login.jsp
<%@page import="java.net.URLEncoder"%>
<%@page import="member.dao.MemberDAO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page info ="copyright by MIS" %>
<% request.setCharacterEncoding("utf-8"); %>
<%
//데이터 읽어오기
String id = request.getParameter("id");
String pwd = request.getParameter("pwd");
//DB
MemberDAO memberDAO = new MemberDAO();
String name = memberDAO.login(id, pwd);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인</title>
</head>
<body>
/////////////////////////////////////////////////
<%
if(name == null){
//아이티 또는 비밀번호가 틀렸으니 다시 로그인하세요 ->삭제
//페이지 이동
response.sendRedirect("loginFail.jsp");
}else {
//페이지이동
//get방식으로 이동되기 때문에 이름과 id가 오픈되기 때문에 get방식으로 보내면 안됨
//쿠키나 세션으로 보내야 함
//바로 name으로 하면 한글이 깨겨서 보내짐
response.sendRedirect("loginOK.jsp?name=" + URLEncoder.encode(name,"utf-8")+"&id="+id);
}
%>
///////////////////////////////////////////
</body>
</html>
5. 11-board/WebContent/member/loginOK.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page info ="copyright by MIS" %>
<% request.setCharacterEncoding("utf-8"); %>
<%
//데이터
request.setCharacterEncoding("utf-8");
String name=request.getParameter("name");
String id = request.getParameter("id");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<img src="../image/tumi.png" width="30" height="30"
onclick="location.href='../main/index.jsp'" style="cursor:pointer;">
<%=id %>님이 로그인
</body>
</html>
6. 11-board/WebContnet/member/loginFail.jsp
function checkWrite(){
if(document.writeForm.name.value == ""){
alert("이름을 입력하세요 ");
document.writeForm.name.focus();
}else if(document.writeForm.id.value == ""){
alert("아이디를 입력하세요 ");
}else if(document.writeForm.pwd.value == ""){
alert("비밀번호를 입력하세요 ");
}else if(document.writeForm.pwd.value != document.writeForm.repwd.value){
alert("비밀번호가 맞지 않습니다.");
}else {
document.writeForm.submit();
}
}
function checkLogin(){
if(document.loginForm.id.value ==""){
alert("아이디를 입력하세요");
document.loginForm.id.focus();
}else if(document.loginForm.pwd.value == ""){
alert("비밀번호를 입력하세요");
}else{
document.loginForm.submit();
}
}
function checkId(){
var sId = document.writeForm.id.value;
if(sId ==""){
alert("먼저 아이디를 입력하세요");
}else {
window.open("checkId.jsp?id=" + sId, "","width = 350 height=100 left=500 top=200")
}
}
8. 11-board/src/member.bean/MemberDTO.java
package member.bean;
public class MemberDTO {
String name;
String id;
String pwd;
String gender;
String email1;
String email2;
String tel1;
String tel2;
String tel3;
String addr;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getPwd() {
return pwd;
}
public void setPwd(String pwd) {
this.pwd = pwd;
}
public String getGender() {
return gender;
}
public void setGender(String gender) {
this.gender = gender;
}
public String getEmail1() {
return email1;
}
public void setEmail1(String email1) {
this.email1 = email1;
}
public String getEmail2() {
return email2;
}
public void setEmail2(String email2) {
this.email2 = email2;
}
public String getTel1() {
return tel1;
}
public void setTel1(String tel1) {
this.tel1 = tel1;
}
public String getTel2() {
return tel2;
}
public void setTel2(String tel2) {
this.tel2 = tel2;
}
public String getTel3() {
return tel3;
}
public void setTel3(String tel3) {
this.tel3 = tel3;
}
public String getAddr() {
return addr;
}
public void setAddr(String addr) {
this.addr = addr;
}
}
9. 11-board/src/member.dao/MemberDAO.java
package member.dao;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import member.bean.MemberDTO;
public class MemberDAO {
private String diver = "oracle.jdbc.driver.OracleDriver";
private String url = "jdbc:oracle:thin:@localhost:1521:xe";
private String username = "jspexam2";
private String password = "m1234";
private Connection conn;
private PreparedStatement pstmt;
private ResultSet rs;
public MemberDAO(){
try{
Class.forName(diver);
}catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
}
}
public Connection getConnection(){
try {
conn = DriverManager.getConnection(url,username,password);
} catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
}
return conn;
}
public int write(MemberDTO memberDTO){
int su = 0;
conn = getConnection();
String sql =
"insert into member values (?,?,?,?,?,?,?,?,?,?,sysdate)";
try {
pstmt = conn.prepareStatement(sql);
pstmt.setString(1, memberDTO.getName());
pstmt.setString(2, memberDTO.getId());
pstmt.setString(3, memberDTO.getPwd());
pstmt.setString(4, memberDTO.getGender());
pstmt.setString(5, memberDTO.getEmail1());
pstmt.setString(6, memberDTO.getEmail2());
pstmt.setString(7, memberDTO.getTel1());
pstmt.setString(8, memberDTO.getTel2());
pstmt.setString(9, memberDTO.getTel3());
pstmt.setString(10, memberDTO.getAddr());
su = pstmt.executeUpdate();
} catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
} finally{
try {
if(pstmt != null) pstmt.close();
if(conn != null) conn.close();
} catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
}
}
return su;
}
public String login(String id, String pwd){
String name="null";
conn = getConnection();
String sql = "select * from member where id=? and pwd=?";
try {
pstmt = conn.prepareStatement(sql);
pstmt.setString(1, id);
pstmt.setString(2, pwd);
rs = pstmt.executeQuery();
if(rs.next()){
name = rs.getString("name"); //rs.getString(1);
}
} catch(SQLException e){
e.printStackTrace();
}
finally {
// TODO: handle finally clause
try{
if(rs != null) rs.close();
if(pstmt != null) pstmt.close();
if(conn != null) conn.close();
}catch(Exception e){
e.printStackTrace();
}
}
return name;
}
public boolean isExistId(String id){
boolean exist = false;
conn = getConnection();
String sql = "select * from member where id=?";
try {
pstmt = conn.prepareStatement(sql);
pstmt.setString(1, id);
rs = pstmt.executeQuery();
if(rs.next()){
exist = true;
}
} catch(SQLException e){
e.printStackTrace();
}
finally {
// TODO: handle finally clause
try{
if(rs != null) rs.close();
if(pstmt != null) pstmt.close();
if(conn != null) conn.close();
}catch(Exception e){
e.printStackTrace();
}
}
return exist;
}
}
10. 11-board/WebContent/member/writeForm.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page info ="copyright by MIS" %>
<% request.setCharacterEncoding("utf-8"); %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입</title>
///////////////////////////////////////////////////////////
<script type="text/javascript"
src="../script/memberScript.js">
</script>
////////////////////////////////////////////////////////////
</head>
<body>
<form name = "writeForm" method ="post" action="write.jsp" >
<table border="1">
<tr>
<td width ="70" align="center">이름</td>
<td><input type="text" name="name" placeholder="이름 입력"></td>
</tr>
<tr>
<td width ="70" align="center">아이디</td>
<td>
<input type="text" name="id">
<input type="button" value="중복체크" onclick="checkId()">
</td>
</tr>
<tr>
<td width ="70" align="center">비밀번호</td>
<td><input type="password" name="pwd" size = "30"></td>
</tr>
<tr>
<td width ="70" align="center">재확인</td>
<td><input type="password" name="repwd" size = "30"></td>
</tr>
<tr>
<td width="70" align="center">성별</td>
<td>
<input type ="radio" name="gender" value="0" checked>남
<input type ="radio" name="gender" value="1">여
</td>
</tr>
<tr>
<td width="70" align="center">이메일</td>
<td>
<input type ="text" name = "email1">@
<select name ="email2" style ="width:100px;">
<option value="naver.com">naver.com
<option value="gmail.com">gmail.com
<option value="hanmail.com">hanmail.com
<option value="nate.com">nate.com
</select>
</td>
</tr>
<tr>
<td width="70" align="center">핸드폰</td>
<td>
<select name="tel1" style="width:70px;">
<option value ="010">010
<option value ="011">011
<option value ="019">019
</select>-
<input type="text" name="tel2" size="10">-
<input type="text" name="tel3" size="10">
</td>
</tr>
<tr>
<td width="70" align="center">주소</td>
<td>
<input type="text" name="addr" size="50"><br>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="회원가입" onclick="javascript:checkWrite()">
<input type="reset" value="다시 작성">
</td>
</tr>
</table>
</form>
</body>
</html>
11. 11-board/WebContent/member/write.jsp
<%@page import="member.dao.MemberDAO"%>
<%@page import="member.bean.MemberDTO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page info ="copyright by MIS" %>
<% request.setCharacterEncoding("utf-8"); %>
<%
//데이터 읽어오기
String name = request.getParameter("name");
String id = request.getParameter("id");
String pwd = request.getParameter("pwd");
String gender = request.getParameter("gender");
String email1 = request.getParameter("email1");
String email2 = request.getParameter("email2");
String tel1 = request.getParameter("tel1");
String tel2 = request.getParameter("tel2");
String tel3 = request.getParameter("tel3");
String addr = request.getParameter("addr");
//데이터 저장
MemberDTO memberDTO = new MemberDTO();
memberDTO.setName(name);
memberDTO.setId(id);
memberDTO.setPwd(pwd);
memberDTO.setGender(gender);
memberDTO.setEmail1(email1);
memberDTO.setEmail2(email2);
memberDTO.setTel1(tel1);
memberDTO.setTel2(tel2);
memberDTO.setTel3(tel3);
memberDTO.setAddr(addr);
//DB
MemberDAO memberDAO = new MemberDAO();//생성
int su = memberDAO.write(memberDTO);//호출
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<% if (su == 0){ %>
회원 가입 실패
<% } else { %>
회원가입 성공
<% } %>
</body>
</html>
12. 11-board/WebContent/member/checkId.jsp
<%@page import="member.dao.MemberDAO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page info ="copyright by MIS" %>
<% request.setCharacterEncoding("utf-8"); %>
<%
//데이터
String id = request.getParameter("id");
//DB
MemberDAO memberDAO = new MemberDAO();
boolean exist = memberDAO.isExistId(id);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>중복방지</title>
<script type="text/javascript">
function checkIdClose(){
opener.writeForm.id.value = '<%=id%>';
window.close();
opener.writeForm.pwd.focus();
}
</script>
</head>
<body>
<form name="" method="post" action="chechId.jsp">
<%if(exist){ %>
<%=id %>는 사용중입니다.<br><br>
아이디 <input type="text" name="id">
<input type="submit" value="중복체크">
<%}else{ %>
<%=id %>는 사용 가능합니다.<br><br>
<input type="button" value="사용" onclick="checkIdClose()">
<%} %>
</form>
</body>
</html>
'IT > Programming' 카테고리의 다른 글
JSP 자바빈즈(JavaBeans) (0) | 2023.04.19 |
---|---|
JSP 쿠키(Cookie) (0) | 2023.04.19 |
JSP 회원가입 및 로그인 - 5. 회원등록시 ID 중복 체크하기 (0) | 2023.04.19 |
JSP 회원가입 및 로그인 - 4. 로그인 처리하기 (0) | 2023.04.19 |
JSP 회원가입 및 로그인 - 3. 회원가입 정보를 DB에 저장하기 (0) | 2023.04.19 |