[JSP] 간단 회원관리 실습

이번 실습은 저번 js에서 공부했던 유효성 검사, jsp에서 공부했던 java Beans를 이용하여 진행하였다.

만약 내용이 궁금하면 카테고리에서 글을 확인하면 알 수 있다.

요구조건부터 알아보자

요구조건

동작

처음에는 회원가입 페이지에서 회원가입 처리하고 로그인 페이지로 이동하여 로그인을 하게되면 메인 페이지가 보여진다.
관리자 아이디로 접속 했을경우 메인 페이지에서 관리자 페이지인 회원 목록 페이지로 이동할 수 있도록 구현할 것이다.
관리자 아이디 : admin 설정할 것

페이지 구성

loginForm.jsp - 로그인 폼 페이지(로그인 정보를 입력하는 페이지)
joinForm.jsp - 회원가입 폼 페이지(회원가입 정보를 입력하는 페이지)
loginProcess.jsp - 로그인 실제 처리부분
joinProcess.jsp - 회원가입을 실제처리부분
Main.jsp - 메인페이지(로그인하면 보여질 페이지)
Member_list.jsp - 회원 목록을 확인하는 페이지
Member_into.jsp - 회원정보를 확인하는 페이지
Member_delete.jsp - 회원 삭제를 처리하는 페이지

회원가입을 누르게 되면

다시 로그아웃하고

회원가입을 들어가서 admin계정을 만들어보자

admin계정으로 접속하였으니 회원관리를 해보자

회원 목록을 늘려 관리해보겠다.

이렇게 데이터의 목록이 똑같이 나타난다.

can9243을 삭제하면

db에도 사라지니 목록에도 사라진다.

로그아웃을 하면 session을 날려서

loginForm.jsp로 돌아가게된다!

끝!

이제 코드를 살펴보자

[소스코드]

join.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
    
    <head>
        <title>내가 만든 html문서</title>
        
    <body>
        <div class="background">
        <form method="get" id="form" onsubmit="return check();">
       
        <table border="1">
            
            <table border="1" border=skyblue" width="700" height="500" align="center">
                <tr bgcolor="skyblue" align="center">
                <p><td colspan="3"span style="color:rgb(0, 0, 0)">회원 기본 정보</td></p>
            </tr>
            <tr>
                <td bgcolor="lightgray" align="center">아이디:</td>
                <td><input type="text" id="userid" name="id"> 4~12자의 영문 대소문자와 숫자로만 입력
                </td>
            </tr>
            <tr>
                <td bgcolor="lightgray" align="center">비밀번호:</td>
                <td><input type="password" id="pw" name="pw"> 4~12자의 영문 대소문자와 숫자로만 입력
                </td>
            </tr>
            <tr>
                <td bgcolor="lightgray" align="center">비밀번호 확인:</td>
                <td><input type="text" id="repw">
                </td>
            </tr>
            <tr>
                <td bgcolor="lightgray" align="center">메일주소:</td>
                <td><input type="text" size="40" id="useremail" name="email"> 예) id@domain.com
                </td>
            </tr>
            <tr>
                <td bgcolor="lightgray" align="center">이름:</td>
                <td><input type="text" size="40" id="username" name="name">
                </td>
            </tr>
            <tr bgcolor="skyblue" align="center">
                <p><td colspan="3"span style="color:rgb(0, 0, 0)">개인 신상 정보</td></p>
            </tr>
            
            <tr>
                <td bgcolor="lightgray" align="center">생일:</td>
                <td><input type="text" id="birth" name="year">년 
                    <select name="month" id="month" >
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>

                  </select>월
                  <select name="day" id="day" >
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                    <option value="13">13</option>
                    <option value="14">14</option>
                    <option value="15">15</option>
                    <option value="16">16</option>
                    <option value="17">17</option>
                    <option value="18">18</option>
                    <option value="19">19</option>
                    <option value="20">20</option>
                    <option value="21">21</option>
                    <option value="22">22</option>
                    <option value="23">23</option>
                    <option value="24">24</option>
                    <option value="25">25</option>
                    <option value="26">26</option>
                    <option value="27">27</option>
                    <option value="28">28</option>
                    <option value="29">29</option>
                    <option value="30">30</option>
                    <option value="31">31</option>
                    
                    
                  </select>일
                </td>
            </tr>
            <tr>
                <td bgcolor="lightgray" align="center">관심분야:</td>
                <td><input type="checkbox" name="inter" value="컴퓨터"> 컴퓨터 <input type="checkbox" name="inter" value="인터넷"> 인터넷 <input type="checkbox" name="inter" value="여행"> 여행 <input type="checkbox" name="inter" value="영화감상"> 영화감삼 <input type="checkbox"name="inter" value="음악감상"> 음악감상
                </td>
            </tr>
            <tr>
                <td bgcolor="lightgray">자기소개:</td>
                <td><textarea rows="7" cols="60" id="introduce" name="my"></textarea>
                </td>
            </tr>
            
            
            
            </table><br><br>
            <div align="center">
                <button type="button" onclick="check();">회원가입</button>
                <button type="reset" value="Reset">다시입력</button></div>
            </form>
        </div>
    </body>
    </head>
    <script src="sign.js"> </script>
</html>

joinProcess.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<jsp:useBean id="beanslogin" class="beanslogin11.Beanslogin" scope="page"/>
<jsp:setProperty name="beanslogin" property="*"/>
  
<%@page import="java.sql.*" %>
<%@page import="javax.sql.*" %>
<%@page import="javax.naming.*" %>
<%
Connection conn = null;
String sql="INSERT INTO Member1(ID,PW,EMAIL,NAME,birthday,hobby,intro) VALUES(?,?,?,?,?,?,?)";

try{
	Context init = new InitialContext();
	DataSource ds = (DataSource) init.lookup("java:comp/env/jdbc/OracleDB");
	conn = ds.getConnection();
	PreparedStatement pstmt = conn.prepareStatement(sql);
	System.out.println(beanslogin.getId());
	String[] listhobby= beanslogin.getInter();
	String hobby = null;
	   for(int i=0;i<listhobby.length;i++)
	   {
	      if(hobby == null)
	      {
	         hobby = listhobby[i];
	      }
	      else if(i==listhobby.length-1)
	      {
	         hobby += listhobby[i];
	      }
	      else
	      {
	         hobby += listhobby[i]+",";
	      }
	   }
	pstmt.setString(1,beanslogin.getId());
	pstmt.setString(2,beanslogin.getPw());
	pstmt.setString(3,beanslogin.getEmail());
	pstmt.setString(4,beanslogin.getName());
	pstmt.setString(5,beanslogin.getYear()+"/"+beanslogin.getMonth()+"/"+beanslogin.getDay());
	pstmt.setString(6,hobby);
	pstmt.setString(7,beanslogin.getMy());
	
	if(pstmt.executeUpdate()!=0){
		response.sendRedirect("loginForm.jsp");
	}
	
}
catch(Exception e){
	out.println("<h3>레코두 등록에 실패하였습니다.</h3>");
	e.printStackTrace();
}

%>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>

loginForm.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
    
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<%
    session.invalidate(); //세션 날리기
%>
</head>
<body>
<form action="loginProcess.jsp" method="post">
	<table border="1" align="center">
		<tr>
			<td colspan="2">
				<h3 align="center">로그인 페이지</h3>
			</td>
		</tr>
		<tr>
			<td>아이디:</td><td><input type="text" name="id"/></td>
		</tr>
		<tr>
			<td>비밀번호:</td><td><input type="text" name="pw"/></td>
		</tr>
		<tr >
			<td colspan="2" align="center">
				<input type="submit" value="로그인">  |  <a href="joinForm.jsp">회원가입</a>
			</td>
		</tr>
	</table>
</form>
</body>
</html>

loginProcess.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@page import="java.sql.*" %>
<%@page import="javax.sql.*" %>
<%@page import="javax.naming.*" %>
<%
Connection conn = null;
String sql="SELECT * FROM Member1 WHERE id =? and pw=?";
String id = request.getParameter("id");
String pw = request.getParameter("pw");
System.out.println(id);
DataSource ds = null;
ResultSet rs=null;

try{
	Context init = new InitialContext();
	ds = (DataSource) init.lookup("java:comp/env/jdbc/OracleDB");
	conn = ds.getConnection();
	 
	PreparedStatement pstmt = conn.prepareStatement(sql);
	pstmt.setString(1,id);
	pstmt.setString(2,pw);
	rs = pstmt.executeQuery();
	if(rs.next()) {//있으면 세션에 id 등록하고 메인화면 이동
        session.setAttribute("id", id);
        response.sendRedirect("main.jsp");
    } else {//없으면 alert창 띄우고 로그인 화면으로 이동
        out.println("<script>alert('로그인 정보가 존재하지 않습니다');" +
                "location.href='loginForm.jsp';</script>");
    }
	
}
catch(Exception e){
	out.println("<h3>로그인실패</h3>");
	e.printStackTrace();
}

%>

main.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<h3><%=session.getAttribute("id")%>님이 로그인 한 상태입니다.</h3>
<%
  if(session.getAttribute("id").equals("admin")){
%>
<a href="Member_list.jsp">관리자모드 접속(회원목록 보기)</a>
<%}%>

<input type="button" onclick="location.href='loginForm.jsp'" value="로그아웃">
</body>
</html>

Member_delete.jsp

<%@ page import="javax.naming.Context" %>
<%@ page import="javax.naming.InitialContext" %>
<%@ page import="javax.sql.DataSource" %>
<%@ page import="java.sql.PreparedStatement" %>
<%@ page import="java.sql.Connection" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String id= request.getParameter("id");
    String sql = "Delete  from Member1 where id=?";
    Connection conn=null;
    try {
        Context init = new InitialContext();
        DataSource ds = (DataSource) init.lookup("java:comp/env/jdbc/OracleDB");
        conn = ds.getConnection();
        PreparedStatement pstmt = conn.prepareStatement(sql);
        pstmt.setString(1,id);
        if(pstmt.executeUpdate()!=0) {
            response.sendRedirect("Member_list.jsp");
        }

    } catch (Exception e) {

    }
%>

Member_into.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="beanslogin11.*"%>
<%
    String id= request.getParameter("id");
    MemberListDAO dao = new MemberListDAO();
    MemberDTO member= dao.memberInfo(id);
%>
<html>
<head>
    <title>Title</title>
</head>
<body>
<table border="1">
    <tr>
        <td colspan="2">
            회원목록
        </td>
    </tr>
    <tr>
        <td>
            아이디:
        </td>
        <td>
            <%=member.getId()%>
        </td>
    </tr>
    <tr>
        <td>
            비밀번호:
        </td>
        <td>
            <%=member.getPw()%>
        </td>
    </tr>
    <tr>
        <td>
            이름:
        </td>
        <td>
            <%=member.getName()%>
        </td>
    </tr>
    <tr>
        <td>
            Email:
        </td>
        <td>
            <%=member.getEmail()%>
        </td>
    </tr>
    <tr>
        <td>
            생년월일:
        </td>
        <td>
            <%=member.getBirthday()%>
        </td>
    </tr>
    <tr>
        <td>
           관심분야:
        </td>
        <td>
            <%=member.getHobby()%>
        </td>
    </tr>
    <tr>
        <td>
            자기소개:
        </td>
        <td>
            <%=member.getIntro()%>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <a href="Member_list.jsp">리스트로 돌아가기</a>
        </td>
    </tr>
</table>
</body>
</html>

Member_list.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="beanslogin11.*"%>
<%@ page import="java.util.ArrayList" %>
<%
    MemberListDAO dao = new MemberListDAO();
    ArrayList<MemberDTO> memberList = dao.getList();

%>
<html>
<head>
    <title>Title</title>
</head>
<body>
<table border="1">
            <tr>
                <td colspan="2">
                    회원목록
                </td>
            </tr>
<%
System.out.println(memberList);
    for(int i = 0; i <memberList.size(); i++) {
        MemberDTO member=memberList.get(i);

%>
            <tr>
                <td>
                    <a href="Member_into.jsp?id=<%=member.getId()%>"><%=member.getId()%></a>
                </td>
                <td>
                    <a href="Member_delete.jsp?id=<%=member.getId()%>">삭제</a>
                </td>
            </tr>
            <%
                }
            %>
            <tr>
                <td colspan=2>
                    <input type="button" onclick="location.href='loginForm.jsp'" value="로그아웃">
                </td>
            </tr>
</table>



</body>
</html>

sign.js

function check(){
     //변수에 담아주기
  var userid = document.getElementById("userid");
  var pw = document.getElementById("pw");
  var repw = document.getElementById("repw");
  var username = document.getElementById("username");
  var useremail = document.getElementById("useremail");
  var inter = document.getElementsByName("inter");
  var introduce = document.getElementById("introduce");
  var birth = document.getElementById("birth");
  var cnt=0;
  if (userid.value == "") { 
    alert("아이디를 입력하세요.");
    userid.focus(); 
    return false; 
  };
  if (pw.value == "") {
    alert("비밀번호를 입력하세요.");
    pw.focus();
    return false;
  };
 console.log("asdasdas");
    if(userid.value.length<4 || userid.value.length>12){
      alert("아이디는 4~12자의 영문 대소문자와 숫자로만 입력해야 합다.");
      userid.focus();
      return false;
    }
    else{  //4-12글자이면
     
        for(var i=0;i<userid.value.length;i++){
          if(userid.value.charCodeAt(i)>=65 && userid.value.charCodeAt(i)<=90){  //영대문자
            cnt++;
          }
        
        
        else if(userid.value.charCodeAt(i)>=97 && userid.value.charCodeAt(i)<=122){  //영소문자
          cnt++;
          }
        
        
        else if(userid.value.charCodeAt(i)>=48 && userid.value.charCodeAt(i)<=57){  //숫자
            cnt++;
          }
        }
      
    if(userid.value.length != cnt){
      alert("아이디는 4~12자의 영문 대소문자와 숫자로만 입력해야 합니.");
      userid.focus();
      return false;
    }
           cnt=0;
    
  }
//=========================비밀번호===============================
    if(pw.value.length<4 || pw.value.length>12){
      alert("비밀번호는 4~12자의 영문 대소문자와 숫자로만 입력해야 합니다.");
      userid.focus();
      return false;
    }
    else{  //4-12글자이면
     
        for(var i=0;i<pw.value.length;i++){
          if(pw.value.charCodeAt(i)>=65 && pw.value.charCodeAt(i)<=90){  //영대문자
            cnt++;
          }
        
        
        else if(pw.value.charCodeAt(i)>=97 && pw.value.charCodeAt(i)<=122){  //영소문자
          cnt++;
          }
        
        
        else if(pw.value.charCodeAt(i)>=48 && pw.value.charCodeAt(i)<=57){  //숫자
            cnt++;
          }
        }
      
      if(pw.value.length != cnt){
        alert("비밀번호는 4~12자의 영문 대소문자와 숫자로만 입력해야 합니다.");
        pw.focus();
        return false;
      }
           cnt=0;
    
    }
    console.log("asdasdas");
    if(userid.value == pw.value){
      alert("!아이디와 비밀번호가 일치합니다!");
      pw.focus();
      return false;
    }
    if (repw.value !== pw.value) {
      alert("!비밀번호가 일치하지 않습니다!");
      repw.focus();
      return false;
    }
   console.log("asdasdas");

    if(!username.value.length>=2){
      alert("!이름 두 글자 이상 입력!");
      username.focus();
      return false;
    }
    if (username.value == "") {
      alert("!이름을 입력하세요!");
      username.focus();
      return false;
    };
    if(useremail.value==""){
      alert("!이메일 주소를 입력하세요!");
      useremail.focus();
      return false;
    }
   console.log("asdasdas");
    var semail=[];
    semail = useremail.value.split("@");
    if(semail.length !== 2){
      alert("!이메일 형식이 올바르지 않습니다!");
      useremail.focus();
      return false;
    }
    else{
     
        for(var i=0;i<semail[0].length;i++){
          if(semail[0].charCodeAt(i)>=65 && semail[0].charCodeAt(i)<=90){  //영대문자
            cnt++;
          }
        
        
        else if(semail[0].charCodeAt(i)>=97 && semail[0].charCodeAt(i)<=122){  //영소문자
          cnt++;
          }
        
        
        else if(semail[0].charCodeAt(i)>=48 && semail[0].charCodeAt(i)<=57){  //숫자
            cnt++;
          }
        }
      
      if(semail[0].length != cnt){
        alert("이메일 형식이 올바르지 않습니다");
        useremail.focus();
        return false;
      }
           
           cnt=0;
    }
    console.log("asdasdas");

    if(birth.value.length <4){
      alert("생년 4자리를 입력해 주세요");
      return false;
    }else{
        cnt = 0;
        for(var i=0; i<birth.value.length;i++){
            if(birth.value.charCodeAt(i) >= 48 && birth.value.charCodeAt(i) <= 57){
                cnt++;
            }
        }
        if(birth.value.length != cnt){
            alert("!숫자만 입력가능!");
            return false;
        }
    }
console.log("asdasdas");
    var count = 0;
    for(var i = 0; i < inter.length; i++){
        if(inter[i].checked){ count++; }
    }
    if(count == 0){ alert("!관심분야를 체크해주세요!"); return;}

console.log("asdasdas");
    if(introduce.value.length<11){
      alert("!자기소개는 10글자 이상 입력해주세요!");
      return false;
    }

console.log("asdasdas");
  form.action = "joinProcess.jsp";
  form.mothod = "GET";
  form.submit();
}

java클래스 3개 이용

파일은 이렇게 저장시키면 된다.

Beanslogin.java

package beanslogin11;

public class Beanslogin {
	private String id;
	private String pw;
	private String name;
	private String sex;
	private int age;
	private String email;
    private String year;
    private String month;
    private String day;
    private String[] inter;
    private String my;
	public String getMy() {
		return my;
	}
	public void setMy(String my) {
		this.my = my;
	}
	public String getYear() {
		return year;
	}
	public void setYear(String year) {
		this.year = year;
	}
	public String getMonth() {
		return month;
	}
	public void setMonth(String month) {
		this.month = month;
	}
	public String getDay() {
		return day;
	}
	public void setDay(String day) {
		this.day = day;
	}
	public String[] getInter() {
		return inter;
	}
	public void setInter(String[] inter) {
		
		this.inter = inter;
	}
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getPw() {
		return pw;
	}
	public void setPw(String pw) {
		this.pw = pw;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getSex() {
		return sex;
	}
	public void setSex(String sex) {
		this.sex = sex;
	}
	public int getAge() {
		return age;
	}
	public void setAge(int age) {
		this.age = age;
	}
	public String getEmail() {
		return email;
	}
	public void setEmail(String email) {
		this.email = email;
	}
}

MemberDTO.java

package beanslogin11;

public class MemberDTO {

    String id;
    String pw;
    String email;
    String name;
    String birthday;
    String hobby;
    String intro;

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public String getPw() {
        return pw;
    }

    public void setPw(String pw) {
        this.pw = pw;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getBirthday() {
        return birthday;
    }

    public void setBirthday(String birthday) {
        this.birthday = birthday;
    }

    public String getHobby() {
        return hobby;
    }

    public void setHobby(String hobby) {
        this.hobby = hobby;
    }

    public String getIntro() {
        return intro;
    }

    public void setIntro(String intro) {
        this.intro = intro;
    }




}

MemberListDAO.java

package beanslogin11;
import java.sql.*;
import java.util.*;
import javax.naming.*;
import javax.sql.*;
public class MemberListDAO {
    private static MemberListDAO instance;
    Connection conn = null;
    PreparedStatement pstmt = null;
    ResultSet rs = null;

    public ArrayList<MemberDTO> getList() {

        String sql = "Select * from Member1";

        ArrayList<MemberDTO> list = new ArrayList<MemberDTO>();

        try {
            Context init = new InitialContext();
            DataSource ds = (DataSource) init.lookup("java:comp/env/jdbc/OracleDB");
            conn = ds.getConnection();
            pstmt = conn.prepareStatement(sql);
            rs = pstmt.executeQuery();
            while (rs.next()) {
                MemberDTO member = new MemberDTO();
                member.setId(rs.getString("ID"));
                member.setPw(rs.getString("PW"));
                member.setEmail(rs.getString("EMAIL"));
                member.setName(rs.getString("NAME"));
                member.setBirthday(rs.getString("Birthday"));
                member.setHobby(rs.getString("Hobby"));
                member.setIntro(rs.getString("Intro"));
                list.add(member);
            }
            return list;
        } catch (Exception e) {

        } finally {
            try {
                if (rs != null)
                    rs.close();
                if (pstmt != null)
                    pstmt.close();
                if (conn != null)
                    conn.close();
            } catch (Exception ex) {
                throw new RuntimeException(ex.getMessage());
            }
        }
        return null;
    }
    public MemberDTO memberInfo(String id) {

        String sql = "Select * from Member1 where id=?";
        MemberDTO member = new MemberDTO();
        System.out.println(id);

        try {
            Context init = new InitialContext();
            DataSource ds = (DataSource) init.lookup("java:comp/env/jdbc/OracleDB");
            conn = ds.getConnection();
            pstmt = conn.prepareStatement(sql);
            pstmt.setString(1,id);
            rs = pstmt.executeQuery();
            while (rs.next()) {
                member.setId(rs.getString(1));
                member.setPw(rs.getString(2));
                member.setEmail(rs.getString(3));
                member.setName(rs.getString(4));
                member.setBirthday(rs.getString(5));
                member.setHobby(rs.getString(6));
                member.setIntro(rs.getString(7));
            }
            return member;
        } catch (Exception e) {

        } finally {
            try {
                if (rs != null)
                    rs.close();
                if (pstmt != null)
                    pstmt.close();
                if (conn != null)
                    conn.close();
            } catch (Exception ex) {
                throw new RuntimeException(ex.getMessage());
            }
        }
        return null;
    }

}

저작자표시

'JSP' 카테고리의 다른 글

게시판&회원가입 MVC 패턴(수정중) (0)	2022.10.17
JDBC 실습 - 이벤트 등록 (2)	2022.10.07
Oracle과 Jsp 연결하기 (0)	2022.10.07
Java Bean 간단 회원가입 페이지 만들기 (1)	2022.09.21
forward action tag 사용하지 않고 값 넘기기(한글 안깨짐) (2)	2022.09.20

'JSP' 카테고리의 다른 글

티스토리툴바