-
[ERMaster] shoppingmall - login, logout, joinWEB/ERMaster 2022. 9. 10. 12:17
로그인 화면
header.jsp에 loginForm 주소 추 else if(command.equals("loginForm")) ac=new LoginFormAction();
package com.sam.shop.controller.action; import java.io.IOException; import javax.servlet.RequestDispatcher; import javax.servlet.ServletException; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class LoginFormAction implements Action { @Override public void execute(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String url="member/login.jsp"; request.setAttribute("message",request.getParameter("message")); RequestDispatcher dp=request.getRequestDispatcher(url); dp.forward(request,response); } }
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ include file="../header.jsp" %> <%@ include file="sub_image_menu.html" %> <article> <h1>Login</h1> <form method="post" action="shop.do" name="loginFrm"> <input type="hidden" name="command" value="login"> <fieldset> <legend></legend> <label>User ID</label> <input name="id" type="text"><br> <label>Password</label> <input name="pwd" type="password"><br> </fieldset> <div id="buttons"> <input type="submit" value="로그인" class="submit" onclick="return loginCheck()"> <input type="button" value="회원가입" class="cancel" onclick=""> <input type="button" value="아이디 비밀번호 찾기" class="submit" onclick=""> </div><br><br> <div> ${message }</div> </form> </article> <%@include file="../footer.jsp" %>
function loginCheck(){ if(document.loginFrm.id.value==""){ alert("아이디는 필수입력사항입니다"); document.loginFrm.id.focus(); return false; }else if(document.loginFrm.pwd.value==""){ alert("비밀번호는 필수입력사항입니다"); document.loginFrm.pwd.focus(); return false; }else{ return true; } }
<div id="sub_img"> <img src="images/member/sub_img.jpg" style="border-radius:20px 20px 20px 20px;"> </div> <div class="clear"></div> <nav id="sub_menu"> <ul> <li><a href="shop.do?command=loginForm">Login</a> <li><a href="">Join</a> <c:if test="${empty loginUser}"> <li><a href="#" onclick="find_account()">Find Account</a> </c:if> </ul> </nav>
function find_account(){ var url="shop.do?command=findAccount"; var opt="toolbar=no, menubar=no, scrollbars=no, resizable=no, " +"width=700, height=500, top=300, left=300"; window.open(url , "Find Id/Pw", opt); }
css
article h2, div h2{font-family:Verdana; font-size:30px; color:#6F0C78; padding-bottom:15px; border-bottom:1px dotted #666;} a{color:#6F0C78; text-decoration:none;} a:hover{color:#F90; text-decoration:underline;} #sub_img{text-align:center;} #sub_img img{margin:9px 0 0 0;} #sub_menu{width:250px; float:left; margin:20px 0;} #sub_menu ul{margin:20px 0 0 16px; list-style:none;} #sub_menu a{text-decoration:none; color:6F0C78; font-family:Verdana; font-weight:bold; font-size:16px; display:block; height:15px; width:160px; padding:7px; border-bottom:1px dotted #999; background-image:url(../images/bullet.jif); background-repeat:no-repeat; background-position:right center;} #sub_menu a:hover{ background-image:url(../images/bullet_orange.gif); background-repeat:no-repeat; background-position:right center; color:#F90; font-weight:bold; font-size:16px; font-family:Arial, Helvetica, sans-serif;} article h1, div h1{font-family:Verdana; font-size:45px; color:#6F0C78; margin:20px 0; font-weight:normal;} article{float:right; width:680px; padding-right:10px; font-family:Verdana; font-size:1em; line-height:1.5em;} form{margin:10px 0 0 0; width:670px;} form fieldset{padding:10px 0 20px 5px; border:none;} form fieldset legend{font-size:20px; width:600px; padding:5px 0; border-bottom:1px dotted #666;} form label{width:140px; float:left; margin:5px 0; } form input{margin:5px 0; border:1px sollid #999; background-color: #FCFDEA;} form #buttons{margin:20px 0 0 0;} form .submit, form .cancel{height:30px; width:150px; border:1px solid #666; border-radius:10px; box-shadow:3px 3px 2px #ccc; font-size:14px; background-repeat:repeat-x; background-position:center center; color:#fff; margin:0 0 0 20px;} form .submit{background-image:url(../images/submit_back.jpg);} form .cancel{background-image:url(../images/cancel_back.jpg);}
로그인 화면 Member Dto
package com.sam.shop.dto; import java.sql.Timestamp; public class MemberVO { private String id; private String pwd; private String name; private String email; private String zip_num; private String address1; private String address2; private String phone; private String useyn; private Timestamp indate; public String getAddress1() { return address1; } public void setAddress1(String address1) { this.address1 = address1; } public String getAddress2() { return address2; } public void setAddress2(String address2) { this.address2 = address2; } 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 getName() { return name; } public void setName(String name) { this.name = name; } public String getEmail() { return email; } public void setEmail(String email) { this.email = email; } public String getZip_num() { return zip_num; } public void setZip_num(String zip_num) { this.zip_num = zip_num; } public String getPhone() { return phone; } public void setPhone(String phone) { this.phone = phone; } public String getUseyn() { return useyn; } public void setUseyn(String useyn) { this.useyn = useyn; } public Timestamp getIndate() { return indate; } public void setIndate(Timestamp indate) { this.indate = indate; } }
Member Dao
package com.sam.shop.dao; import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; import java.util.ArrayList; import com.sam.shop.dto.AddressVO; import com.sam.shop.dto.MemberVO; import com.sam.shop.util.Dbman; public class MemberDao { private MemberDao() {} private static MemberDao itc = new MemberDao(); public static MemberDao getInstance() { return itc; } Connection con=null; PreparedStatement pstmt=null; ResultSet rs=null; }
로그인 실행
header.jsp에 Logout 주소 추가 else if(command.equals("login")) ac=new LoginAction();
package com.sam.shop.controller.action; import java.io.IOException; import javax.servlet.RequestDispatcher; import javax.servlet.ServletException; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; import com.sam.shop.dao.MemberDao; import com.sam.shop.dto.MemberVO; public class LoginAction implements Action { @Override public void execute(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String id=request.getParameter("id"); String pwd=request.getParameter("pwd"); MemberDao mdao=MemberDao.getInstance(); MemberVO mvo=mdao.getMember(id); // getMember 메서드를 만들고 // 상황에 맞는 if문을 이용해서 로그인을 구현 // 최종 목적지는 main.jsp임 String url="member/login.jsp"; if( mvo==null) request.setAttribute("message","아이디가 없습니다"); else if( mvo.getPwd() == null) request.setAttribute("message","시스템 오류"); else if( !mvo.getPwd().equals(pwd) ) request.setAttribute("message","비밀번호가 틀립니다"); else if(mvo.getUseyn().equals("n")) { request.setAttribute("meaasge","휴면계정"); } else if( mvo.getPwd().equals(pwd)) { HttpSession session = request.getSession(); session.setAttribute("loginUser", mvo); url = "shop.do?command=index"; }else request.setAttribute("message","관리자에게 문의"); RequestDispatcher rd =request.getRequestDispatcher(url); rd.forward(request,response); } }
MemberDao에 getMember 생성
public MemberVO getMember(String id) { MemberVO mvo=null; String sql="select*from member where id=?"; con=Dbman.getConnection(); try { pstmt=con.prepareStatement(sql); pstmt.setString(1, id); rs = pstmt.executeQuery(); if(rs.next()) { mvo= new MemberVO(); mvo.setId(rs.getString("id")); mvo.setPwd(rs.getString("pwd")); mvo.setName(rs.getString("name")); mvo.setEmail(rs.getString("email")); mvo.setZip_num(rs.getString("zip_num")); mvo.setAddress1(rs.getString("address1")); mvo.setAddress2(rs.getString("address2")); mvo.setPhone(rs.getString("phone")); mvo.setUseyn(rs.getString("useyn")); mvo.setIndate(rs.getTimestamp("indate") ) ; } } catch (SQLException e) {e.printStackTrace(); } finally { Dbman.close(con, pstmt, rs);} return mvo; }
로그인 후 화면 로그아웃
else if(command.equals("logout")) ac=new LogoutAction();
package com.sam.shop.controller.action; import java.io.IOException; import javax.servlet.RequestDispatcher; import javax.servlet.ServletException; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; public class LogoutAction implements Action { @Override public void execute(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { HttpSession session = request.getSession(); session.removeAttribute("loginUser"); RequestDispatcher rd =request.getRequestDispatcher("shop.do?command=index"); rd.forward(request, response); } }
회원 약관 동의
header.jsp에 회원약관동의 주소 넣기 else if(command.equals("contract")) ac=new ContractAction();
package com.sam.shop.controller.action; import java.io.IOException; import javax.servlet.RequestDispatcher; import javax.servlet.ServletException; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class ContractAction implements Action { @Override public void execute(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { RequestDispatcher dp =request.getRequestDispatcher("member/contract.jsp"); dp.forward(request, response); } }
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ include file="../header.jsp" %> <%@ include file="sub_image_menu.html" %> <article> <h2>회원 가입 약관</h2> <form id="join" method="post" name="contractFrm"> 언제나 새로운 즐거움이 가득한 Shoes Shop의 회원가입 페이지 입니다. <br> Shoes Shop의 회원가입은 무료이며, 회원님의 개인신상에 관한 정보는 ‘정보통신망이용촉진 및 정보보호등에 관한 법률’에 의해 회원님의 동의없이 제 3자에게 제공되지 않으며, 철저히 보호되고 있사오니 안심하고 이용하시기 바랍니다.<br><br> <textarea rows="15" cols="100"> // 회원 약관 내용 입력칸 </textarea> <br><br> <div style="text-align:center;"> <input type="radio" name="okon">동의함 <input type="radio" name="okon" checked>동의안함 </div> <input type="button" value="Next" class="submit" onClick="go_next();" style="float:right;"> </form> </article> <%@include file="../footer.jsp" %>
약관 동의 실행 코드
function go_next(){ // 자바스크립트에서 jsp페이지 내의 radio 버튼을 바라볼 때 // 같은 name의 okon인 것이 여러개라면 // name값에 의한 배열로 인식되어 사용됨 // 동의함 버튼: okon[0], 동의안함 버튼: okon[1] if(document.contractFrm.okon[1].checked==true){ // 동의안함이 선택되었다면 alert('회원 약관의 동의 하셔야 가입이 가능합니다'); }else{ document.contractFrm.action="shop.do?command=joinForm"; document.contractFrm.submit(); // contractFrm 품에 action도 없고 submit 버튼도 없는 것을 // 스크립트 명령으로 action 값을 설정하고 // submit() 메서드로 이동까지 실행함 } }
가입할 회원 정보 입력
else if(command.equals("joinForm")) ac=new JoinFormAction();
package com.sam.shop.controller.action; import java.io.IOException; import javax.servlet.RequestDispatcher; import javax.servlet.ServletException; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class JoinFormAction implements Action { @Override public void execute(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { RequestDispatcher dp =request.getRequestDispatcher("member/join.jsp"); dp.forward(request, response); } }
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ include file="../header.jsp" %> <%@ include file="sub_image_menu.html" %> <article> <form method="post" name="joinForm"> <input type="hidden" name="command" value="join"> <fieldset><legend>Basic info</legend> <label>User ID</label> <input type="text" name="id" size="12"> <input type="hidden" name="reid"> <input type="button" value="중복 체크" class="dup" onclick="idcheck()"><br> <label>Password</label> <input type="password" name="pwd"><br> <label>Retype Password</label> <input type="password" name="pwdCheck"><br> <label>Name</label> <input type="text" name="name"><br> <label>E-Mail</label> <input type="text" name="email"><br> </fieldset> <fieldset><legend>Optional</legend> <label>Zip Code</label> <input type="text" name="zip_num" size="10"> <input type="button" value="주소 찾기" class="dup" onclick="post_zip()"><br> <label>Address</label> <input type="text" name="address1" size="50"><br> <label> </label> <input type="text" name="address2" size="25"><br> <label>Phone Number</label> <input type="text" name="phone"><br> </fieldset> <div class="clear"></div> <div id="buttons"> <input type="button" value="회원가입" class="submit" onclick="go_save()"> <input type="reset" value="취소" class="cancel"> </div> </form> </article> <%@include file="../footer.jsp" %>
function go_save(){ if( document.joinForm.id.value==""){ alert("아이디를 입력해 주세요"); document.joinForm.id.focus(); }else if( document.joinForm.id.value != document.joinForm.reid.value){ alert("아이디 중복체크를 하지 않았습니다"); document.joinForm.id.focus(); }else if( document.joinForm.pwd.value==""){ alert("비밀번호을 입력해 주세요"); document.joinForm.pwd.focus(); }else if( document.joinForm.pwd.value!= document.joinForm.pwdCheck.value){ alert("비밀번호가 일치하지 않습니다"); document.joinForm.pwd.focus(); }else if( document.joinForm.name.value==""){ alert("이름을 입력해 주세요"); document.joinForm.name.focus(); }else if( document.joinForm.email.value==""){ alert("이메일을 입력해주세요"); document.joinForm.email.focus(); }else{ document.joinForm.action="shop.do"; document.joinForm.submit(); } }
(左)약관 동의 후 화면 (右)빈칸으로 회원 가입 클릭 시 아이디 중복체크
function idcheck(){ if( document.joinForm.id.value==""){ alert("아이디를 입력하고 중복체크를 진행하세요"); document.joinForm.id.focus(); return; } var url = "shop.do?command=idCheckForm&id=" +document.joinForm.id.value; var opt = "toolbar=no, menubar=no, scrollbars=no, " +"resizable=no, width=500, height=250"; window.open(url , "idCheck", opt); }
else if(command.equals("idCheckForm")) ac=new IdCheckFormAction();
package com.sam.shop.controller.action; import java.io.IOException; import javax.servlet.RequestDispatcher; import javax.servlet.ServletException; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.sam.shop.dao.MemberDao; import com.sam.shop.dto.MemberVO; public class IdCheckFormAction implements Action { @Override public void execute(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String id=request.getParameter("id"); MemberDao mdao=MemberDao.getInstance(); MemberVO mvo=mdao.getMember(id); if(mvo==null) request.setAttribute("result", -1); else request.setAttribute("result", 1); request.setAttribute("id", id); RequestDispatcher rd =request.getRequestDispatcher("member/idcheck.jsp"); rd.forward(request, response); } }
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>idcheck.jsp</title> <link rel="stylesheet" href="css/shopping.css"> <script src="member/member.js"></script> </head> <body> <h1>ID 중복확인</h1> <form action="shop.do" method="post" name="idCheckForm"> <input type="hidden" name="command" value="idCheckForm"> User ID: <input type="text" name="id" value="${id}"> <input type=submit value="검색" class="submit"><br><br><br> <div> <c:if test="${result==1}"> <script type="text/javascript"> opener.document.joinForm.id.value = "";</script> ${id}는 이미 사용 중인 아이디입니다. </c:if> <c:if test="${result==-1}"> ${id}는 사용 가능한 아이디입니다. <input type="button" value="사용" class="cancel" onclick="idok('${id}')"> </c:if> </div> </form> </body> </html>
function idok( userid ){ opener.joinForm.id.value = userid; opener.joinForm.reid.value = userid; self.close(); }
ID 중복확인 사용 클릭 후 function post_zip(){ var url="shop.do?command=findZipNum"; var opt="toolbar=no, menubar=no, scrollbars=no, resizable=no," +"width=550, height=300, top=300, left=300"; window.open(url,"우편번호 찾기",opt); }
else if(command.equals("findZipNum")) ac=new FindZipNumAction()
package com.sam.shop.controller.action; import java.io.IOException; import java.util.ArrayList; import javax.servlet.RequestDispatcher; import javax.servlet.ServletException; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.sam.shop.dao.MemberDao; import com.sam.shop.dto.AddressVO; public class FindZipNumAction implements Action { @Override public void execute(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String dong=request.getParameter("dong"); if(dong!=null) { // 주소 검색 후 결과 list를 request에 담음 if(dong.equals("")==false) { MemberDao mdao=MemberDao.getInstance(); ArrayList<AddressVO> list=mdao.selectAddress(dong); System.out.println(list.size()); request.setAttribute("addressList",list); } } RequestDispatcher rd =request.getRequestDispatcher("member/findZipNum.jsp"); rd.forward(request, response); } }
MemberDao에 selectAddress 생성
public ArrayList<AddressVO> selectAddress(String dong) { ArrayList<AddressVO> list=new ArrayList<AddressVO>(); String sql="select*from address where dong like '%'||?||'%'"; // ?가 null이면 조건이 없는 것과 같은 검색 결과를 얻음 con=Dbman.getConnection(); try { pstmt=con.prepareStatement(sql); pstmt.setString(1, dong); rs = pstmt.executeQuery(); while(rs.next()) { AddressVO avo= new AddressVO(); avo.setZip_num(rs.getString("zip_num")); avo.setSido(rs.getString("sido")); avo.setGugun(rs.getString("gugun")); avo.setDong(rs.getString("dong")); avo.setZip_code(rs.getString("zip_code")); avo.setBunji(rs.getString("bunji")); list.add(avo); } } catch (SQLException e) {e.printStackTrace(); } finally { Dbman.close(con, pstmt, rs);} return list; }
jsp 파일
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>findZipNum.jsp</title> <link rel="stylesheet" href="css/shopping.css"> <script src="member/member.js"></script> </head> <body> <div id="popup"> <h1>우편번호검색</h1> <form method="post" name="formm" action="shop.do"> <input type="hidden" name="command" value="findZipNum"> 동 이름:<input name="dong" type="text"> <input type="submit" value="찾기" class="submit"> </form> <!-- 검색된 우편번호와 동이 표시되는 곳 --> <table id="zipcode"> <tr><th width="100">우편번호</th><th>주소</th></tr> <c:forEach items="${addressList}" var="add"> <tr> <td><a href="#" onClick="result('${add.zip_num}','${add.sido}','${add.gugun}','${add.dong}');"> ${add.zip_num}</a></td> <td><a href="#" onClick="result('${add.zip_num}','${add.sido}','${add.gugun}','${add.dong}');"> ${add.sido} ${add.gugun} ${add.dong}</a></td> <!-- 함수 호출 형태: result('123-123','서울시','서대문구','대현동') --> </tr> </c:forEach> </table> </div> </body> </html>
css
body{overflow-x:hidden;} #popup{padding:0 10px; font-family:Verdana;} table#zipcode{border-collapse:collapse; border-top:3px solid #6F0C78; border-bottom:3px solid #6F0C78; margin-top:15px; width:100%; font-size:110%;} table#zipcode th, table#zipcode td {text-align:center; border-bottom:1px dotted #6F0C78;} table th, td{padding:10px;} table#zipcode a{display:block; height:20px; text-decoration:none; padding:10px;} table#zipcode a:hover{font-weight:bold;} #itemdetail img{width:300px; margin-right:20px;} #table#cartList{border-collapse:collapse; border-top:2px solid #333; border-bottom:1px solid #333; width:100%; margin-bottom:20px;} table#cartList th, td{border-bottom:1px dotted #333; text-align:center;} #kindProduct{border:solid 1px #FFFFFF; border-radius:10px; width:610px; min-height:900px; background:#ebebeb; padding:10px; text-align:center;}
function result(zip_num,sido,gugun,dong){ // 함수 호출 형태: result('123-123','서울시','서대문구','대현동') opener.document.joinForm.zip_num.value =zip_num; opener.document.joinForm.address1.value =sido+" "+gugun+" "+dong; self.close(); }
대현동 검색 시 해당하는 주소 클릭 후 회원가입 실행하기
else if(command.equals("join")) ac=new JoinAction();
package com.sam.shop.controller.action; import java.io.IOException; import java.net.URLEncoder; import javax.servlet.ServletException; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.sam.shop.dao.MemberDao; import com.sam.shop.dto.MemberVO; public class JoinAction implements Action { @Override public void execute(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { MemberDao mdao=MemberDao.getInstance(); MemberVO mvo=new MemberVO(); mvo.setId(request.getParameter("id")); mvo.setPwd(request.getParameter("pwd")); mvo.setName(request.getParameter("name")); mvo.setEmail(request.getParameter("email")); mvo.setZip_num(request.getParameter("zip_num")); mvo.setAddress1(request.getParameter("address1")); mvo.setAddress2(request.getParameter("address2")); mvo.setPhone(request.getParameter("phone")); int result=mdao.insertMember(mvo); String message=""; if(result==1) message="회원가입 완료"; else message="회원가입 실패. 다시 시도하세요."; response.sendRedirect("shop.do?command=loginForm&message=" +URLEncoder.encode(message,"UTF-8")); } }
public int insertMember(MemberVO mvo) { int result=0; String sql="insert into member(id,pwd,name,zip_num,address1," + "address2,email,phone) values(?,?,?,?,?,?,?,?)"; con=Dbman.getConnection(); try { pstmt=con.prepareStatement(sql); pstmt.setString(1, mvo.getId()); pstmt.setString(2, mvo.getPwd()); pstmt.setString(3, mvo.getName()); pstmt.setString(4, mvo.getZip_num()); pstmt.setString(5, mvo.getAddress1()); pstmt.setString(6, mvo.getAddress2()); pstmt.setString(7, mvo.getEmail()); pstmt.setString(8, mvo.getPhone()); result=pstmt.executeUpdate(); } catch (SQLException e) {e.printStackTrace(); } finally { Dbman.close(con, pstmt, rs);} return result; }
(左) 정보 입력 (右) 회원가입 클릭 후 'WEB > ERMaster' 카테고리의 다른 글
[ERMaster] shoppingmall - category (0) 2022.09.10 [ERMaster] shoppingmall - find ID, PW (0) 2022.09.10 [ERMaster] shoppingmall - update (0) 2022.09.10 [ERMaster] shoppingmall - main (0) 2022.09.10 [ERMaster] 설치 후 테이블 생성 (0) 2022.09.10