AJAX_국비DAY65~66

Ajax를 사용한 회원관리 구현 -> 회원가입 기능

[도식화]

간단하게 구현하고자 하는 회원관리의 기능을 도식화한 내용은 다음과 같다. 

    ----이미지 받아서 넣기

 

1. [DB]

가장 먼저 사용하고자 하는 DB를 구현해보자. 테이블을 만들고 필요한 제약 조건은 다음과 같이 설정하였다. 

--일련번호 관리 객체
create sequence seq_member_m_idx
 
--테이블 생성 
create table memember
(
    m_idx     int,                            --일련번호
    m_name    varchar2(100) not null,        --이름
    m_id      varchar2(100) not null,        --아이디
    m_pwd      varchar2(100) not null,        --비밀번호
    m_zipcode varchar2(100) not null,        --우편번호
    m_addr      varchar2(100) not null,        --주소
    m_grade   varchar2(100) default '일반', --회원등급(일반 or 관리자)
    m_ip      varchar2(100),                --IP
    m_regdate date                            --등록날짜
)
 
 
--기본키 
alter table memember
add constraint pk_member_m_idx primary key(m_idx)
 
--아이디 유니크 제약 
alter table memember 
add constraint unique_member_m_id unique(m_id)
 
--회원등급의 체크 제약 
alter table memember 
add constraint ck_member_m_grade check(m_grade in ('일반', '관리자'));

 

2. [MemberVO]

다음으로 생성한 테이블의 컬럼에 알맞도록 Vo를 먼저 설정해준다. 이후에 데이터를 포장하는데 편리성을 주기 위해서 오버로드 생성자를 생성한다. 

insert용 생성자에서 idx는 시퀀스가 자동으로 할당하고, regdate는 sysdate로 db에서 처리하면 되니 제외한다. 

update용 생성자에서 idx는 어떤 회원을 수정할지 알아야 하기에 추가하고, regdate는 똑같이 sysdate로 처리하면 되니 제외한다. 

package vo;
 
public class MemberVo {
    int m_idx;
    String m_name;
    String m_id;
    String m_pwd;
    String m_zipcode;
    String m_addr;
    String m_grade;
    String m_ip;
    String m_regdate;
    
    public MemberVo() {
        
    }
    
    //insert용
    public MemberVo(String m_name, String m_id, String m_pwd, String m_zipcode, String m_addr, String m_grade,
            String m_ip) {
        super();
        this.m_name = m_name;
        this.m_id = m_id;
        this.m_pwd = m_pwd;
        this.m_zipcode = m_zipcode;
        this.m_addr = m_addr;
        this.m_grade = m_grade;
        this.m_ip = m_ip;
    }
    
    //update용
    public MemberVo(int m_idx, String m_name, String m_id, String m_pwd, String m_zipcode, String m_addr,
            String m_grade, String m_ip) {
        super();
        this.m_idx = m_idx;
        this.m_name = m_name;
        this.m_id = m_id;
        this.m_pwd = m_pwd;
        this.m_zipcode = m_zipcode;
        this.m_addr = m_addr;
        this.m_grade = m_grade;
        this.m_ip = m_ip;
    }
 
    public int getM_idx() {
        return m_idx;
    }
 
    public void setM_idx(int m_idx) {
        this.m_idx = m_idx;
    }
    public String getM_name() {
        return m_name;
    }
    public void setM_name(String m_name) {
        this.m_name = m_name;
    }
    public String getM_id() {
        return m_id;
    }
    public void setM_id(String m_id) {
        this.m_id = m_id;
    }
    public String getM_pwd() {
        return m_pwd;
    }
    public void setM_pwd(String m_pwd) {
        this.m_pwd = m_pwd;
    }
    public String getM_zipcode() {
        return m_zipcode;
    }
    public void setM_zipcode(String m_zipcode) {
        this.m_zipcode = m_zipcode;
    }
    public String getM_addr() {
        return m_addr;
    }
    public void setM_addr(String m_addr) {
        this.m_addr = m_addr;
    }
    public String getM_grade() {
        return m_grade;
    }
    public void setM_grade(String m_grade) {
        this.m_grade = m_grade;
    }
    public String getM_ip() {
        return m_ip;
    }
    public void setM_ip(String m_ip) {
        this.m_ip = m_ip;
    }
    public String getM_regdate() {
        return m_regdate;
    }
    public void setM_regdate(String m_regdate) {
        this.m_regdate = m_regdate;
    }
    
    
}
 

 

3. [MemberDao] 

다음으로 실질적으로 CRUD 명령을 수행할 Dao를 만들어 주겠다. 

• 전체 조회 기능 -> selectList()
• 특정 인덱스에 해당하는 vo를 조회 -> selectOne(m_idx)
• 로그인 시 id 중복체크용 조회         -> selectOne(m_id)
• 회원가입에 성공하면 테이블에 회원정보를 저장 -> insert(vo)
• 회원정보를 수정하기 위한 메소드  -> udpate(vo)
• 회원정보를 삭제하기 위한 메소드  -> delete(m_idx)

package dao;
 
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
 
import service.DBService;
import vo.MemberVo;
 
public class MemberDao {
    //single-ton : 객체 1개만 생성해서 사용하자
    static MemberDao single = null;
 
    public static MemberDao getInstance() {
 
        //객체가 생성되어 있지 않으면 만들어라.
        if (single == null) {
            single = new MemberDao();
        }
        //이전에 만들어 놨던 객체를 그대로 반환한다.
        return single;
    }
 
    //외부에서 생성하지 못하도록 접근제한. 객체는 getInstance메소드를 통해서만 생성가능.
    private MemberDao() {
        // TODO Auto-generated constructor stub
    }
    
    //전체조회 
    public List<MemberVo> selectList() {
 
        List<MemberVo> list = new ArrayList<MemberVo>();
        Connection conn = null;
        PreparedStatement pstmt = null;
        ResultSet rs = null;
        String sql = "select * from memember order by m_idx";
 
        try {
            //1. connection 얻어오기
            conn = DBService.getInstance().getConnection();
 
            //2. PreparedStatement 얻어오기
            pstmt = conn.prepareStatement(sql);
 
            //3. ResultSet 얻어오기 
            rs = pstmt.executeQuery();
 
            //4. 포장
            while (rs.next()) {
                //rs가 가리키는 행(레코드)의 값을 읽어 온다.
 
                //Vo로 포장(반복을 1회 돌아서 새로운 데이터를 읽을 때마다 이 레코드를 저장할 vo를 만들어서 포장해햐 한다.)
                MemberVo vo = new MemberVo();
                vo.setM_idx(rs.getInt("m_idx"));
                vo.setM_name(rs.getString("m_name"));
                vo.setM_id(rs.getString("m_id"));
                vo.setM_pwd(rs.getString("m_pwd"));
                vo.setM_zipcode(rs.getString("m_zipcode"));
                vo.setM_addr(rs.getString("m_addr"));
                vo.setM_grade(rs.getString("m_grade"));
                vo.setM_ip(rs.getString("m_ip"));
                vo.setM_regdate(rs.getString("m_regdate"));
 
                //list에 추가 
                list.add(vo);
 
            }
 
        } catch (Exception e) {
            // TODO: handle exception
            e.printStackTrace();//
        } finally {//반드시 실행하는 구문
 
            try {
 
                //연결되어 있는 상태면 끊어라.(생성 역순으로)
 
                if (rs != null)
                    rs.close(); //3
                if (pstmt != null)
                    pstmt.close();//2
                if (conn != null)
                    conn.close();//1
 
            } catch (SQLException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
        }
 
        return list;
    }
    
    //m_idx에 해당되는 객체 1건 조회 
    public MemberVo selectOne(int m_idx) {
 
        MemberVo  vo = null;
        Connection conn = null;
        PreparedStatement pstmt = null;
        ResultSet rs = null;
        String sql = "select * from memember where m_idx=?";
 
        try {
            //1. connection 얻어오기
            conn = DBService.getInstance().getConnection();
 
            //2. PreparedStatement 얻어오기
            pstmt = conn.prepareStatement(sql);
            
            //3. pstmt setting
            pstmt.setInt(1, m_idx);
            //3. ResultSet 얻어오기 
            rs = pstmt.executeQuery();
 
            //4. 포장
            if (rs.next()) {
                //rs가 가리키는 행(레코드)의 값을 읽어 온다.
 
                //Vo로 포장(반복을 1회 돌아서 새로운 데이터를 읽을 때마다 이 레코드를 저장할 vo를 만들어서 포장해햐 한다.)
                vo = new MemberVo ();
                
                vo.setM_idx(rs.getInt("m_idx"));
                vo.setM_name(rs.getString("m_name"));
                vo.setM_id(rs.getString("m_id"));
                vo.setM_pwd(rs.getString("m_pwd"));
                vo.setM_zipcode(rs.getString("m_zipcode"));
                vo.setM_addr(rs.getString("m_addr"));
                vo.setM_grade(rs.getString("m_grade"));
                vo.setM_ip(rs.getString("m_ip"));
                vo.setM_regdate(rs.getString("m_regdate"));
 
            }
 
        } catch (Exception e) {
            // TODO: handle exception
            e.printStackTrace();//
        } finally {//반드시 실행하는 구문
 
            try {
 
                //연결되어 있는 상태면 끊어라.(생성 역순으로)
 
                if (rs != null)
                    rs.close(); //3
                if (pstmt != null)
                    pstmt.close();//2
                if (conn != null)
                    conn.close();//1
 
            } catch (SQLException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
        }
 
        return vo;
    }
    
    //m_id에 해당되는 객체 1건 조회 
    public MemberVo selectOne(String m_id) {
        
        MemberVo  vo = null;
        Connection conn = null;
        PreparedStatement pstmt = null;
        ResultSet rs = null;
        String sql = "select * from memember where m_id = ?";
        
        try {
            //1. connection 얻어오기
            conn = DBService.getInstance().getConnection();
            
            //2. PreparedStatement 얻어오기
            pstmt = conn.prepareStatement(sql);
            
            //3. pstmt setting
            pstmt.setString(1, m_id);
            
            //3. ResultSet 얻어오기 
            rs = pstmt.executeQuery();
            
            //4. 포장
            if (rs.next()) {
                //rs가 가리키는 행(레코드)의 값을 읽어 온다.
                
                //Vo로 포장(반복을 1회 돌아서 새로운 데이터를 읽을 때마다 이 레코드를 저장할 vo를 만들어서 포장해햐 한다.)
                vo = new MemberVo ();
                
                vo.setM_idx(rs.getInt("m_idx"));
                vo.setM_name(rs.getString("m_name"));
                vo.setM_id(rs.getString("m_id"));
                vo.setM_pwd(rs.getString("m_pwd"));
                vo.setM_zipcode(rs.getString("m_zipcode"));
                vo.setM_addr(rs.getString("m_addr"));
                vo.setM_grade(rs.getString("m_grade"));
                vo.setM_ip(rs.getString("m_ip"));
                vo.setM_regdate(rs.getString("m_regdate"));
                
            }
            
        } catch (Exception e) {
            // TODO: handle exception
            e.printStackTrace();//
        } finally {//반드시 실행하는 구문
            
            try {
                
                //연결되어 있는 상태면 끊어라.(생성 역순으로)
                
                if (rs != null)
                    rs.close(); //3
                if (pstmt != null)
                    pstmt.close();//2
                if (conn != null)
                    conn.close();//1
                
            } catch (SQLException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
        }
        
        return vo;
    }
    
    //insert 
    public int insert(MemberVo vo) {//버튼을 누름으로써 자바에게 전달받은 vo
        // TODO Auto-generated method stub
        int res = 0;
        Connection         conn = null;
        PreparedStatement pstmt = null;
        
        String sql = "insert into memember values(seq_member_m_idx.nextVal,?,?,?,?,?,?,?,sysdate)";
        try {
            //1. Connection얻어오기
            conn = DBService.getInstance().getConnection();
            //2. 명령 처리 객체 얻어오기
            pstmt = conn.prepareStatement(sql);
            //3. pstmt의 파라미터 설정//데이터의 자료형을 필히 파악하라!//문자던 숫자던 자료형에 상관없이 변수는 무조건 "?"이다.
            pstmt.setString(1, vo.getM_name());
            pstmt.setString(2, vo.getM_id());
            pstmt.setString(3, vo.getM_pwd());
            pstmt.setString(4, vo.getM_zipcode());
            pstmt.setString(5, vo.getM_addr());
            pstmt.setString(6, vo.getM_grade());
            pstmt.setString(7, vo.getM_ip());
            //4. DML(insert/update/delete) : res는 처리된 행의 수를 반환합니다. 한번의 삽입은 무조건 1줄만 수행되므로 삽입이 성공했다면 res는 반드시 1, 만약에 res가 0이라면 삽입연산이 제대로 수행되지 않은 것이다.
            res = pstmt.executeUpdate();
        } catch (Exception e) {
            // TODO: handle exception
            e.printStackTrace();
        } finally {
            try {
                //닫기(열린역순)
                if(pstmt != null) pstmt.close(); //2
                if(conn  != null) conn.close();  //1
            } catch (SQLException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
        }
        
        return res;
    }
    
    public int delete(int m_idx) {//버튼을 누름으로써 자바에게 전달받은 vo
        // TODO Auto-generated method stub
        int res = 0;
        Connection         conn = null;
        PreparedStatement pstmt = null;
        
        String sql = "delete from memember where m_idx = ?";
        try {
            //1. Connection얻어오기
            conn = DBService.getInstance().getConnection();
            //2. 명령 처리 객체 얻어오기
            pstmt = conn.prepareStatement(sql);
            //3. pstmt의 파라미터 설정//데이터의 자료형을 필히 파악하라!//문자던 숫자던 자료형에 상관없이 변수는 무조건 "?"이다.
            pstmt.setInt(1, m_idx);
            //4. DML(insert/update/delete) : res는 처리된 행의 수를 반환합니다. 한번의 삽입은 무조건 1줄만 수행되므로 삽입이 성공했다면 res는 반드시 1, 만약에 res가 0이라면 삽입연산이 제대로 수행되지 않은 것이다.
            res = pstmt.executeUpdate();
        } catch (Exception e) {
            // TODO: handle exception
            e.printStackTrace();
        } finally {
            try {
                //닫기(열린역순)
                if(pstmt != null) pstmt.close(); //2
                if(conn  != null) conn.close();  //1
            } catch (SQLException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
        }
        
        return res;
    }
    
    public int update(MemberVo vo) {//버튼을 누름으로써 자바에게 전달받은 vo
        // TODO Auto-generated method stub
        int res = 0;
        Connection         conn = null;
        PreparedStatement pstmt = null;
        
        String sql = "update memember set m_name=?, m_id=?, m_pwd=?, m_zipcode=?, m_addr=?, m_grade=?, m_ip=?, m_regdate=sysdate where m_idx = ?";
        try {
            //1. Connection얻어오기
            conn = DBService.getInstance().getConnection();
            //2. 명령 처리 객체 얻어오기
            pstmt = conn.prepareStatement(sql);
            //3. pstmt의 파라미터 설정//데이터의 자료형을 필히 파악하라!//문자던 숫자던 자료형에 상관없이 변수는 무조건 "?"이다.
            pstmt.setString(1, vo.getM_name());
            pstmt.setString(2, vo.getM_id());
            pstmt.setString(3, vo.getM_pwd());
            pstmt.setString(4, vo.getM_zipcode());
            pstmt.setString(5, vo.getM_addr());
            pstmt.setString(6, vo.getM_grade());
            pstmt.setString(7, vo.getM_ip());
            pstmt.setInt(8, vo.getM_idx());
            //4. DML(insert/update/delete) : res는 처리된 행의 수를 반환합니다. 한번의 삽입은 무조건 1줄만 수행되므로 삽입이 성공했다면 res는 반드시 1, 만약에 res가 0이라면 삽입연산이 제대로 수행되지 않은 것이다.
            res = pstmt.executeUpdate();
        } catch (Exception e) {
            // TODO: handle exception
            e.printStackTrace();
        } finally {
            try {
                //닫기(열린역순)
                if(pstmt != null) pstmt.close(); //2
                if(conn  != null) conn.close();  //1
            } catch (SQLException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
        }
        
        return res;
    }
}
 

 

4. [MemberListAction]

회원의 리스트를 조회하기 위한 서블릿을 생성한다. dao로부터 selectList() 메소드를 실행시켜 전달받은 리스트를 뷰에 출력하도록 포워딩 시킨다. 

package action;
 
import java.io.IOException;
import java.util.List;
 
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import dao.MemberDao;
import vo.MemberVo;
 
/**
 * Servlet implementation class MemberListAction
 */
@WebServlet("/member/list.do")
public class MemberListAction extends HttpServlet {
    private static final long serialVersionUID = 1L;
 
    /**
     * @see HttpServlet#service(HttpServletRequest request, HttpServletResponse response)
     */
    protected void service(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // TODO Auto-generated method stub
        
        //회원 목록 가져오기 
        List<MemberVo> list = MemberDao.getInstance().selectList();
        
        
        //리퀘스트 바인딩
        request.setAttribute("list", list);
        
        
        //forward
        String forward_page = "member_list.jsp";
        RequestDispatcher disp = request.getRequestDispatcher(forward_page);
        disp.forward(request, response);
 
    }
 
}
 

 

5. [member_list.jsp] 

서블릿으로부터 출력을 명령받은 뷰단의 jsp파일이다. jstl과 el 표현식을 사용하여 포워딩으로 전달받은 리스트를 출력한다. 자바스크립트를 사용해서 회원가입, 수정, 삭제 버튼을 눌렀을 때, 해당 기능을 사용할 수 있도록 서블릿을 호출한다.

동기함수인 alert를 대신하여 비동기 함수인 sweetalert를 사용했다. cdn코드와 자세한 사용방법은 여기를 참고하길 바란다

<%@ 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="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script
    src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
 
<style type="text/css">
#box {
    width: 1100px;
    margin: auto;
    margin-top: 30px;
}
 
#title {
    text-align: center;
    font-size: 25px;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 3px black;
}
 
th {
    text-align: center;
}
 
td {
    text-indent: 10px; /* 들여쓰기 */
}
</style>
<!-- SweetAlert2 Library -->
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
 
<script type="text/javascript">
    function del(m_idx){
        
        //if(confirm("정말 삭제하시겠습니까?")==false) return; //동기함수 -> 사용자가 응답하기 전까지 이후에 나올 후속코드를 진행하지 않고 기다린다.
        
        //sweet alert 비동기 함수이다.----------------------------------------
        Swal.fire({
              title: '정말 삭제하시겠습니까?',
              //html: "<h4>선택한 사용자가 삭제됩니다.</h4>", text 대신 html로 사용가능
              text: "선택한 사용자가 삭제됩니다.",
              icon: 'question',
              showCancelButton: true,
              confirmButtonColor: '#3085d6',
              cancelButtonColor: '#d33',
              confirmButtonText: '삭제',
              cancelButtonText: '취소',
              
            }).then((result) => {
                
                //삭제버튼을 누르면,,
                if(result.isConfirmed){
                    alert('삭제한다');
                    location.href='delete.do?m_idx=' + m_idx;                    
                }
                
            });
        //----------------------------------------------------------------------
    }
</script>
</head>
<body>
    <div id="box">
        <h1 id="title">:::::회원 목록:::::</h1>
 
        <!-- 회원가입 -->
        <div>
            <input class="btn btn-primary" type="button" value="회원가입"
                onclick="location.href='insert_form.do'">
        </div>
 
        <!-- 데이터 출력 -->
        <div>
            <table class="table table-striped">
                <tr class="info">
                    <th>번호</th>
                    <th>이름</th>
                    <th>아이디</th>
                    <th>비밀번호</th>
                    <th>우편번호</th>
                    <th>주소</th>
                    <th>회원등급</th>
                    <th>아이피</th>
                    <th>가입일자</th>
                    <th>편집</th>
                </tr>
 
                <!-- data 없는 경우-->
                <c:if test="${empty list }">
                    <tr>
                        <td colspan="10" align="center"><font color="red">등록된
                                회원이 없습니다.</font></td>
                    </tr>
                </c:if>
 
                <!-- data가 있는 경우 -->
                <c:forEach var="vo" items="${list }">
                    <tr>
                        <td>${vo.m_idx }</td>
                        <td>${vo.m_name }</td>
                        <td>${vo.m_id }</td>
                        <td>${vo.m_pwd }</td>
                        <td>${vo.m_zipcode }</td>
                        <td>${vo.m_addr }</td>
                        <td>${vo.m_grade }</td>
                        <td>${vo.m_ip }</td>
                        <td>${fn:substring(vo.m_regdate, 0, 10) }</td>
                        <td><input class="btn btn-info" type="button" value="수정" onclick="location.href='modify_form.do?m_idx=${vo.m_idx}';">
                        <!-- 상태 유지 기술을 세션트래킹이라고 한다. 현재 페이지에 있는 정보를 페이지를 변경할때에도 유지한 상태로 페이지 이동 -->
                            <input class="btn btn-danger" type="button" value="삭제"
                            onclick="del('${vo.m_idx}');"></td>
                    </tr>
                </c:forEach>
            </table>
        </div>
    </div>
</body>
</html>

6. [MemberInsertFormAction]

회원가입 버튼을 누르면 관련된 서블릿(/member/insert_form.do)을 호출한 후, 호출된 서블릿이 회원가입 입력폼을 띄워주도록 포워딩한다. 일반적으로 웹 프로그래밍을 할 때, 보안상의 문제로 url주소 상에 jsp파일이 나타나지 않도록 서블릿을 거쳐서 호출한다.

package action;
 
import java.io.IOException;
 
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
/**
 * Servlet implementation class MemberInsertFormAction
 */
@WebServlet("/member/insert_form.do")
public class MemberInsertFormAction extends HttpServlet {
    private static final long serialVersionUID = 1L;
 
    /**
     * @see HttpServlet#service(HttpServletRequest request, HttpServletResponse response)
     */
    protected void service(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // TODO Auto-generated method stub
 
        //forward
        String forward_page = "member_insert_form.jsp";
        RequestDispatcher disp = request.getRequestDispatcher(forward_page);
        disp.forward(request, response);
 
    }
 
}
 
 

 

7. [member_insert_form.jsp] 

회원가입을 위해 DB에 insert작업을 하고자 필요한 데이터를 사용자에게 입력받는 페이지다. "가입하기"버튼을 누르면 폼에 입력된 데이터가 db에 전송되어 테이블에 추가가 되면서 회원가입이 완료된다.

아이디 중복 여부에 따라 버튼을 활성화 시키고, 다음 주소찾기api를 사용하여 주소찾기 기능을 추가했다. 

기본 api의 사용법을 그대로 사용했다. 자세한 사용법을 알고자 한다면 여기에서 확인하길 바란다.

기본적인 형식을 복사 붙여넣기 하면, 주소를 검색할 수 있도록 익숙한 폼이 등장할 것인데, function의 인자로 들어오는 data는 json형식으로 들어온다. 위의 사이트에서 반환되는 데이터 확인하기 버튼을 눌러보면 실제로 검색했을 때, 반환되는 json데이터의 key값을 확인할 수 있다. 여기서 우리는 필요한 키값과 그에따른 value값만 송수신하면서 사용한다. 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 다음 우편번호 검색 -->
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
 
<style type="text/css">
    #box{
        width: 800px;
        margin: auto;
        margin-top: 60px;
    }
    
    #id_msg{
        margin-left: 10px;
        display: inline-block;
        width: 350px;
    }
</style>
 
 
<script type="text/javascript">
 
    var regular_id = /^[a-zA-Z0-9]{3,16}$/;
 
    //문서내 element배치가 완료가 되면,,, 
    $(document).ready(function(){
        
        //아이디 입력창에서 키가 입력되면,,,(키가 눌리면 시스템에 의해 자동호출되는 함수 -> 콜백함수이자 익명함수)  
        $("#m_id").keyup(function(event){
                        //this는 자기 자신 $("m_id")이다.    
            var m_id = $(this).val();
            //console.log(m_id);
            
            if(regular_id.test(m_id)==false){
                $("#id_msg").html("영문자(대/소문자) 숫자 조합의 3~16자리만 가능합니다.").css("color", "red");
                $("#btn-register").attr("disabled", true);
                return;
            }
            
            //$("#id_msg").html("정규식 만족합니다").css("color", "blue");
            
            
            //서버에 사용가능 여부 확인(Ajax)
            $.ajax({
                url         :'check_id.do',                 //MemberCheckAction
                data    :{'m_id':m_id},                    //parameter :check_id.do?m_id=one
                dataType:'json',
                success :function(res_data){
                     //res_data = {"result": true} 사용가능//
                     //res_data = {"result": false} 사용불가//
                     
                    if(res_data.result){ //사용가능한 아이디
                        $("#id_msg").html("사용가능한 아이디입니다.").css("color", "blue");
                        
                        //가입하기 버튼 활성화
                        $("#btn-register").attr("disabled", false);
                     
                             
                    }else{//이미 사용중인 아이디
                        $("#id_msg").html("이미 사용중인 아이디입니다.").css("color", "red");
                        //가입버튼 비활성화
                        $("#btn-register").attr("disabled", true);
                    }
                },
                error   :function(err){
                    alert(err.responseText);
                }
            });
        });
        
    });
    
    
    function find(){
        var width = 500; //팝업의 너비
        var height = 600; //팝업의 높이
        
        new daum.Postcode({
            oncomplete: function(data) {
                // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분입니다.
                // 예제를 참고하여 다양한 활용법을 확인해 보세요.
                // data = {'zonecode':12345, 'address':'서울시 마포구 노고산동', ...} 이런식으로 data가 json 형식으로 들어온다.
                
                //선택된 주소의 우편번호 넣기 
                $("#m_zipcode").val(data.zonecode);
                
                //선택된 주소를 넣기 
                $("#m_addr").val(data.address);
            },
            theme: {
                searchBgColor: "#0B65C8", //검색창 배경색
                queryTextColor: "#FFFFFF" //검색창 글자색
            },
            width: width,
            height: height
        }).open(
                //주소검색 팝업창을 중앙에 배치하겠다.
                {
                    left: (window.screen.width / 2) - (width / 2),
                    top: (window.screen.height / 2) - (height / 2)
                }        
        );
        
    }
    
    
    function send(f){
        var m_name    = f.m_name.value.trim();
        var m_pwd     = f.m_pwd.value.trim();
        var m_zipcode = f.m_zipcode.value.trim();
        var m_addr    = f.m_addr.value.trim();
        
        if(m_name==''){
            alert('이름을 입력해주세요.');
            f.m_name.value='';
            f.m_name.focus();
            return;
        }
        
        if(m_pwd==''){
            alert('비밀번호를 입력해주세요.');
            f.m_pwd.value='';
            f.m_pwd.focus();
            return;
        }
        
        if(m_zipcode==''){
            alert('우편번호를 입력해주세요.');
            f.m_zipcode.value='';
            f.m_zipcode.focus();
            return;
        }
        
        if(m_addr==''){
            alert('주소를 입력해주세요.');
            f.m_addr.value='';
            f.m_addr.focus();
            return;
        }
        
        
        f.action="insert.do" //MemberInsertAction
        f.submit();
    }
</script>
</head>
<body>
<form>
    <div id="box">
        <div class="panel panel-primary">
            <div class="panel-heading"><h4>회원가입</h4></div>
            <div class="panel-body">
                <table class="table table-striped">
                    <tr>
                        <th>이름</th>
                        <td><input name="m_name"></td>
                    </tr>
                    
                    <tr>
                        <th>아이디</th>
                        <td>
                            <input name="m_id" id="m_id">
                            <span id="id_msg"></span>
                        </td>
                    </tr>
                    
                    <tr>
                        <th>비밀번호</th>
                        <td><input type="password" name="m_pwd"></td>
                    </tr>
                    
                    <tr>
                        <th>우편번호</th>
                        <td>
                            <input id="m_zipcode" name="m_zipcode">
                            <input class="btn btn-warning" type="button" value="주소찾기" onclick="find();">
                        </td>
                    </tr>
                    
                    <tr>
                        <th>주소</th>
                        <td><input id="m_addr" name="m_addr" size="60"></td>
                    </tr>
                    
                    <tr>
                        <td colspan="2" align="center">
                            <input class="btn btn-primary" type="button" value="가입하기" id="btn-register" disabled="disabled" onclick="send(this.form);"> <!-- 실시간으로(id값이 입력될 때마다 사용가능한지 체크. onkeydown이벤트를 사용할 듯) 사용자가 입력한 아이디에 대한 사용 가능 여부(기본키 이므로 값이 겹치면 안됨)를 파악(ajax로 할 듯)해서 가능하면 btn풀기, 불가능하면 버튼 막기 -->
                            <input class="btn btn-success" type="button" value="목록보기" onclick="location.href='list.do';">
                        </td>
                    </tr>
                    
                </table>
            </div>
        </div>
    </div>
</form>
</body>
</html>

 

8. [MemberCheckIdAction]

아이디 입력창에서 사용자가 키보드를 누르면(키보드 이벤트 활용) 입력된 값을 ajax를 사용하여 실시간으로 서버로 전송하면서 사용할 수 있는 아이디인지 중복 체크를 진행할 것이다. 데이터는 json으로 포장해서 송수신한다.

package action;
 
import java.io.IOException;
 
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import org.json.simple.JSONObject;
 
import dao.MemberDao;
import vo.MemberVo;
 
/**
 * Servlet implementation class MemberCheckIdAction
 */
@WebServlet("/member/check_id.do")
public class MemberCheckIdAction extends HttpServlet {
    private static final long serialVersionUID = 1L;
 
    /**
     * @see HttpServlet#service(HttpServletRequest request, HttpServletResponse response)
     */
    protected void service(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // TODO Auto-generated method stub
        
        // /member/check_id.do?m_id=one
        
        //1. 수신 인코딩 설정 
        request.setCharacterEncoding("utf-8");
        
        //2. 파라미터 수신
        String m_id = request.getParameter("m_id");
        
        //3. m_id에 해당되는 회원정보 1건 가져오기 
        MemberVo vo = MemberDao.getInstance().selectOne(m_id);
        
        //true -> 사용 가능, false -> 사용 불가능
        //boolean bResult = (vo==null); or
        
        //4. 클라이언트측에 m_id 사용 유무 전송
        boolean bResult = false;
        if(vo==null) bResult = true;
        
        //5. 결과 전송데이터 생성(JSON)
        JSONObject json = new JSONObject();
        json.put("result", bResult);
        
        String json_str = json.toJSONString(); //{"result" : true}
        
        //전송
        response.setContentType("text/json; charset=utf-8;");
        response.getWriter().print(json_str);
    }
 
}
 

9. [MemberInsertAction]

package action;
 
import java.io.IOException;
 
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import dao.MemberDao;
import vo.MemberVo;
 
/**
 * Servlet implementation class MemberInsertAction
 */
@WebServlet("/member/insert.do")
public class MemberInsertAction extends HttpServlet {
    private static final long serialVersionUID = 1L;
 
    /**
     * @see HttpServlet#service(HttpServletRequest request, HttpServletResponse response)
     */
    protected void service(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // TODO Auto-generated method stub
        request.setCharacterEncoding("utf-8");
        
        //파라미터
        String m_name = request.getParameter("m_name");
        String m_id = request.getParameter("m_id");
        String m_pwd = request.getParameter("m_pwd");
        String m_zipcode = request.getParameter("m_zipcode");
        String m_addr = request.getParameter("m_addr");
        
        String m_grade = "일반";
        String m_ip = request.getRemoteAddr();
        
        MemberVo vo = new MemberVo(m_name, m_id, m_pwd, m_zipcode, m_addr, m_grade, m_ip);
        
        MemberDao.getInstance().insert(vo);
        
        response.sendRedirect("list.do");
 
    }
 
}
 

 

10. [MemberDeleteAction]

package action;
 
import java.io.IOException;
 
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import dao.MemberDao;
 
/**
 * Servlet implementation class MemberDeleteAction
 */
@WebServlet("/member/delete.do")
public class MemberDeleteAction extends HttpServlet {
    private static final long serialVersionUID = 1L;
 
    /**
     * @see HttpServlet#service(HttpServletRequest request, HttpServletResponse response)
     */
    protected void service(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // TODO Auto-generated method stub
 
        // /member/delete.do?m_idx=1
        //1. 파라미터 받기 
        int m_idx = Integer.parseInt(request.getParameter("m_idx"));
        
        //2. DB delete
        int res = MemberDao.getInstance().delete(m_idx);
        
        //3. 목록보기 이동
        response.sendRedirect("list.do");
    }
 
}
 

 

11. [MemberModifyFormAction]

package action;
 
import java.io.IOException;
 
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import dao.MemberDao;
import vo.MemberVo;
 
/**
 * Servlet implementation class MemberModifyFormAction
 */
@WebServlet("/member/modify_form.do")
public class MemberModifyFormAction extends HttpServlet {
    private static final long serialVersionUID = 1L;
 
    /**
     * @see HttpServlet#service(HttpServletRequest request, HttpServletResponse response)
     */
    protected void service(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // TODO Auto-generated method stub
        
        // /modify_form.do?m_idx=3
        
        //1. 파라미터 받기 
        int m_idx = Integer.parseInt(request.getParameter("m_idx"));
        
        //2. m_idx에 해당된 1건 데이터 가져오기(수정 원본 데이터 )
        MemberVo vo = MemberDao.getInstance().selectOne(m_idx);
        
        //3. binding
        request.setAttribute("vo", vo);
        
        //forward
        String forward_page = "member_modify_form.jsp";
        RequestDispatcher disp = request.getRequestDispatcher(forward_page);
        disp.forward(request, response);
 
    }
 
}
 

 

12. [member_modify_form.jsp]

142번행에 제이쿼리 문은 특정 회원을 선택하면 회원의 수정 전 등급이 선택되어야 하기 때문에 이를 처리하기 위한 코드이다. 이 때 주의할 점은 제이쿼리에서의 $와 EL표현식에서의 $가 이름이 같아서 컴파일 과정에서 충돌이 일어날 수 있으므로 EL표현식의 $는 ' '으로 감싸줘야 한다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 다음 우편번호 검색 -->
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
 
<!-- SweetAlert2 Library -->
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
 
<style type="text/css">
    #box{
        width: 800px;
        margin: auto;
        margin-top: 60px;
    }
    
    #id_msg{
        margin-left: 10px;
        display: inline-block;
        width: 350px;
    }
</style>
 
 
<script type="text/javascript">
    
    function find(){
        var width = 500; //팝업의 너비
        var height = 600; //팝업의 높이
        
        new daum.Postcode({
            oncomplete: function(data) {
                // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분입니다.
                // 예제를 참고하여 다양한 활용법을 확인해 보세요.
                // data = {'zonecode':12345, 'address':'서울시 마포구 노고산동', ...} 이런식으로 data가 json 형식으로 들어온다.
                
                //선택된 주소의 우편번호 넣기 
                $("#m_zipcode").val(data.zonecode);
                
                //선택된 주소를 넣기 
                $("#m_addr").val(data.address);
            },
            theme: {
                searchBgColor: "#0B65C8", //검색창 배경색
                queryTextColor: "#FFFFFF" //검색창 글자색
            },
            width: width,
            height: height
        }).open(
                //주소검색 팝업창을 중앙에 배치하겠다.
                {
                    left: (window.screen.width / 2) - (width / 2),
                    top: (window.screen.height / 2) - (height / 2)
                }        
        );
        
    }
    
    
    function send(f){
        var m_name    = f.m_name.value.trim();
        var m_pwd     = f.m_pwd.value.trim();
        var m_zipcode = f.m_zipcode.value.trim();
        var m_addr    = f.m_addr.value.trim();
        
        if(m_name==''){
            //swal이 비동기 함수이므로 focus함수가 실행되지 않는다. 
            //focus함수가 실행은 되지만 swal의 확인 버튼을 누르면 포커스가 알림창으로 빼앗긴다.
            //해결 방법1
            Swal.fire({
                  icon: 'error',
                  title: '이름을 입력하세요...',
                  text: '수정할 이름이 비어있습니다.',
                  returnFocus: false
            }).then((result) => {
                
                if(result.isConfirmed){
                    f.m_name.value='';
                    f.m_name.focus();
                }
                
            });
            return;
        }
        
        if(m_pwd==''){
            Swal.fire({
                  icon: 'error',
                  title: '비밀번호를 입력하세요...',
                  text: '수정할 비밀번호가 비어있습니다.',
                  returnFocus: false
            }).then((result) => {
                
                if(result.isConfirmed){
                    f.m_pwd.value='';
                    f.m_pwd.focus();
                }
                
            });
            return;
        }
        
        //방법2-1. lambda
        if(m_zipcode==''){
            Swal.fire({
                  icon: 'error',
                  title: '우편번호를 입력하세요...',
                  text: '수정할 우편번호가 비어있습니다.',
                  didClose: () =>{
                      f.m_zipcode.value='';
                      f.m_zipcode.focus();
                  }
            });
            return;
        }
        
        if(m_addr==''){
            //방법2
            Swal.fire({
                  icon: 'error',
                  title: '주소를 입력하세요...',
                  text: '수정할 주소가 비어있습니다.',
                  returnFocus: false,
                  didClose: function(){
                      f.m_addr.value='';
                      f.m_addr.focus();
                  }
            });
            return;
        }
        
        
        Swal.fire({
              title: '정말 수정하시겠습니까?',
              //html: "<h4>선택한 사용자가 삭제됩니다.</h4>", text 대신 html로 사용가능
              text: "선택한 사용자가 수정됩니다.",
              icon: 'question',
              showCancelButton: true,
              confirmButtonColor: '#3085d6',
              cancelButtonColor: '#d33',
              confirmButtonText: '수정',
              cancelButtonText: '취소',
              
            }).then((result) => {
                
                //수정버튼을 누르면,,
                if(result.isConfirmed){
                    f.action="modify.do" //MemberModifyAction
                    f.submit();                    
                }
                
            });
        
    }
</script>
 
 
<script type="text/javascript">
    //현재 element가 배치가 완료되면 자동 호출
    $(document).ready(function (){
        
        //제이쿼리 $와 EL표현식의 $가 충돌할 가능성이 있기 때문에 EL표현식을 '' 싱글 쿼테이션으로 감싸야 한다.
        //수정폼에 원래 회원등급을 설정
        $("#m_grade").val('${vo.m_grade}')
        
    });
</script>
</head>
<body>
<form>
    <!-- 세션 트래킹 기법 중 하나이다. -->
    <input type="hidden" name="m_idx" value="${vo.m_idx }">
    <div id="box">
        <div class="panel panel-primary">
            <div class="panel-heading"><h4>회원수정</h4></div>
            <div class="panel-body">
                <table class="table table-striped">
                    <tr>
                        <th>이름</th>
                        <td><input name="m_name" value="${vo.m_name }"></td>
                    </tr>
                    
                    <tr>
                        <th>아이디</th>
                        <td>
                            <input name="m_id"  value="${vo.m_id}" readonly="readonly">
                        </td>
                    </tr>
                    
                    <tr>
                        <th>비밀번호</th>
                        <td><input type="password" name="m_pwd" value="${vo.m_pwd}"></td>
                    </tr>
                    
                    <tr>
                        <th>우편번호</th>
                        <td>
                            <input id="m_zipcode" name="m_zipcode" value="${vo.m_zipcode}">
                            <input class="btn btn-warning" type="button" value="주소찾기" onclick="find();">
                        </td>
                    </tr>
                    
                    <tr>
                        <th>주소</th>
                        <td><input id="m_addr" name="m_addr" value="${vo.m_addr}" size="60"></td>
                    </tr>
                    
                    <!-- 등급 수정 폼 -->
                    <!-- id는 클라이언트쪽에서 핸들링 하기 위한 선택자 정보, name은 서버 쪽으로 넘기기 위한 파라미터 이름 정보 -->
                    <tr>
                        <th>회원등급</th>
                        <td>
                            <select id="m_grade" name="m_grade">
                                <option value="일반">일반</option>
                                <option value="관리자">관리자</option>
                            </select>
                        </td>
                    </tr>
                    
                    <tr>
                        <td colspan="2" align="center">
                            <input class="btn btn-primary" type="button" value="수정하기" onclick="send(this.form);"> 
                            <input class="btn btn-success" type="button" value="목록보기" onclick="location.href='list.do';">
                        </td>
                    </tr>
                    
                </table>
            </div>
        </div>
    </div>
</form>
</body>
</html>

13. [MemberModifyAction]

package action;
 
import java.io.IOException;
 
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import dao.MemberDao;
import vo.MemberVo;
 
/**
 * Servlet implementation class MemberModifyAction
 */
@WebServlet("/member/modify.do")
public class MemberModifyAction extends HttpServlet {
    private static final long serialVersionUID = 1L;
 
    /**
     * @see HttpServlet#service(HttpServletRequest request, HttpServletResponse response)
     */
    protected void service(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // TODO Auto-generated method stub
        //1. 수신 인코딩 
        request.setCharacterEncoding("utf-8");
        
        // /member/modify.do?m_idx=1&m_name=일길동&m_id=one&m_pwd=1234&m_zipcode=12345&m_addr=서울시+마포구+노고산동&m_grade=일반
        //2. 파라미터 받기 
        int m_idx        = Integer.parseInt(request.getParameter("m_idx"));
        String m_name    = request.getParameter("m_name");
        String m_id      = request.getParameter("m_id");
        String m_pwd     = request.getParameter("m_pwd");
        String m_zipcode = request.getParameter("m_zipcode");
        String m_addr    = request.getParameter("m_addr");
        String m_grade   = request.getParameter("m_grade");
        
        //3. IP얻어오기
        String m_ip      = request.getRemoteAddr();
        
        //4. 포장하기
        MemberVo vo = new MemberVo(m_idx, m_name, m_id, m_pwd, m_zipcode, m_addr, m_grade, m_ip);
        
        //5. DB Update
        int res = MemberDao.getInstance().update(vo);
        
        //6. 목록보기로 이동
        response.sendRedirect("list.do");
    }
 
}