본문 바로가기
웹 - Ajax

웹 - Ajax - 회원목록/가입 예제1 (조회까지)

우가본 2024. 6. 25. 09:56

*) Ajax는 레이아웃 일부분만 요청을 받아 수정을 할 수 있다.

-> DB와 해당 파일들 필요

-> 조회 화면까지 만들기

 

)db

--일련(회원)번호 관리객체
create sequence seq_member_idx

-- 회원테이블
create table member 
(
	mem_idx		int,								-- 회원번호
	mem_name	varchar2(100) 	not null,			-- 회원명
	mem_id		varchar2(100) 	not null,			-- 아이디
	mem_pwd		varchar2(100) 	not null,			-- 비밀번호
	mem_zipcode	char(5)	  		not null,			-- 우편번호(5자리 고정)
	mem_addr	varchar2(1000)  not null,			-- 주소
	mem_ip		varchar2(100)	not null,			-- 아이피
	mem_regdate	date			default sysdate,	-- 가입일자
	mem_grade	varchar2(100)	default '일반'		-- 회원등급
)

-- 기본키
alter table member
	add constraint pk_member_idx	primary key(mem_idx);
	
-- 아이디(unique)
alter table member
	add constraint unique_member_id unique(mem_id) ;

-- 회원등급(check)
alter table member
	add constraint ck_member_grade check(mem_grade in('일반','관리자'));		
	
-- sample data
insert into member values(seq_member_idx.nextVal, 
						  '김관리',
						  'admin', 
						  'admin', 
						  '00000', 
						  '서울시 관악구',
						  '127.0.0.1',
						  sysdate,
						  '관리자' 
						  );
						  
insert into member values(seq_member_idx.nextVal, 
						  '일길동',
						  'one', 
						  '1234', 
						  '00000', 
						  '서울시 관악구',
						  '127.0.0.1',
						  default,
						  default 
						  );

select * from member

 

)vo

package db.vo;

public class MemberVo {
	
	int mem_idx;
	String mem_name;
	String mem_id;
	String mem_pwd;
	String mem_zipcode;
	String mem_addr;
	String mem_ip;
	String mem_regdate;
	String mem_grade;
	
	
	public int getMem_idx() {
		return mem_idx;
	}
	public void setMem_idx(int mem_idx) {
		this.mem_idx = mem_idx;
	}
	public String getMem_name() {
		return mem_name;
	}
	public void setMem_name(String mem_name) {
		this.mem_name = mem_name;
	}
	public String getMem_id() {
		return mem_id;
	}
	public void setMem_id(String mem_id) {
		this.mem_id = mem_id;
	}
	public String getMem_pwd() {
		return mem_pwd;
	}
	public void setMem_pwd(String mem_pwd) {
		this.mem_pwd = mem_pwd;
	}
	public String getMem_zipcode() {
		return mem_zipcode;
	}
	public void setMem_zipcode(String mem_zipcode) {
		this.mem_zipcode = mem_zipcode;
	}
	public String getMem_addr() {
		return mem_addr;
	}
	public void setMem_addr(String mem_addr) {
		this.mem_addr = mem_addr;
	}
	public String getMem_ip() {
		return mem_ip;
	}
	public void setMem_ip(String mem_ip) {
		this.mem_ip = mem_ip;
	}
	public String getMem_regdate() {
		return mem_regdate;
	}
	public void setMem_regdate(String mem_regdate) {
		this.mem_regdate = mem_regdate;
	}
	public String getMem_grade() {
		return mem_grade;
	}
	public void setMem_grade(String mem_grade) {
		this.mem_grade = mem_grade;
	}
	
	
}

 

)dao (조회 메서드 추가 - 전체(list) - 부분(one-idx)/(one-id)

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 db.vo.MemberVo;
import service.DBService;

public class MemberDao {

	// single-ton pattern : 객체 1개만 생성해서 이용하자
	static MemberDao single = null;

	public static MemberDao getInstance() {

		//없으면 생성해라
		if (single == null)
			single = new MemberDao();

		return single;
	}

	// 외부에서 객체생성하지 말아라...
	private MemberDao() {

	}
	
	//전체조희
	public List<MemberVo> selectList() {

		List<MemberVo> list = new ArrayList<MemberVo>();

		Connection conn = null;
		PreparedStatement pstmt = null;
		ResultSet rs = null;

		String sql = "select * from member order by mem_idx";

		try {
			//1.Connection 얻어오기
			conn = DBService.getInstance().getConnection();

			//2.PreparedStatement
			pstmt = conn.prepareStatement(sql);

			//3.ResultSet 얻어온다
			rs = pstmt.executeQuery();

			while (rs.next()) {

				//저장객체 생성->레코드에서 읽은 값을 넣는다
				MemberVo vo = new MemberVo();

				//rs가 가리키는 레코드값을 vo에 넣는다
				vo.setMem_idx(rs.getInt("mem_idx"));
				vo.setMem_name(rs.getString("mem_name"));
				vo.setMem_id(rs.getString("mem_id"));
				vo.setMem_pwd(rs.getString("mem_pwd"));
				vo.setMem_zipcode(rs.getString("mem_zipcode"));
				vo.setMem_addr(rs.getString("mem_addr"));
				vo.setMem_ip(rs.getString("mem_ip"));
				vo.setMem_regdate(rs.getString("mem_regdate").substring(0, 19));
				vo.setMem_grade(rs.getString("mem_grade"));

				//ArrayList에 추가
				list.add(vo);

			} //end:while

		} catch (Exception e) {
			// TODO: handle exception
			e.printStackTrace();

		} finally {

			//마무리 작업(열린역순으로 닫기)
			try {
				if (rs != null)
					rs.close();
				if (pstmt != null)
					pstmt.close();
				if (conn != null)
					conn.close();
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}

		return list;
	}
	
	// mem_idx에 해당되는 1건의 정보 얻어온다
	// 일부만 조회
	public MemberVo selectOne(int mem_idx) {

		MemberVo vo = null;

		Connection conn = null;
		PreparedStatement pstmt = null;
		ResultSet rs = null;

		String sql = "select * from member where mem_idx=?";

		try {
			//1.Connection 얻어오기
			conn = DBService.getInstance().getConnection();

			//2.PreparedStatement
			pstmt = conn.prepareStatement(sql);

			//3.pstmt parameter index채우기
			pstmt.setInt(1, mem_idx);

			//4.ResultSet 얻어온다
			rs = pstmt.executeQuery();

			if (rs.next()) {

				//저장객체 생성->레코드에서 읽은 값을 넣는다
				vo = new MemberVo();

				//rs가 가리키는 레코드값을 vo에 넣는다
				vo.setMem_idx(rs.getInt("mem_idx"));
				vo.setMem_name(rs.getString("mem_name"));
				vo.setMem_id(rs.getString("mem_id"));
				vo.setMem_pwd(rs.getString("mem_pwd"));
				vo.setMem_zipcode(rs.getString("mem_zipcode"));
				vo.setMem_addr(rs.getString("mem_addr"));
				vo.setMem_ip(rs.getString("mem_ip"));
				vo.setMem_regdate(rs.getString("mem_regdate").substring(0, 19));
				vo.setMem_grade(rs.getString("mem_grade"));

			} //end:if

		} catch (Exception e) {
			// TODO: handle exception
			e.printStackTrace();

		} finally {

			//마무리 작업(열린역순으로 닫기)
			try {
				if (rs != null)
					rs.close();
				if (pstmt != null)
					pstmt.close();
				if (conn != null)
					conn.close();
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}

		return vo;
	}
	
	// mem_id에 해당되는 1건의 정보 얻어온다
	public MemberVo selectOne(String mem_id) {
		
		MemberVo vo = null;
		
		Connection conn = null;
		PreparedStatement pstmt = null;
		ResultSet rs = null;
		
		String sql = "select * from member where mem_id=?";
		
		try {
			//1.Connection 얻어오기
			conn = DBService.getInstance().getConnection();
			
			//2.PreparedStatement
			pstmt = conn.prepareStatement(sql);
			
			//3.pstmt parameter index채우기
			pstmt.setString(1, mem_id);
			
			//4.ResultSet 얻어온다
			rs = pstmt.executeQuery();
			
			if (rs.next()) {
				
				//저장객체 생성->레코드에서 읽은 값을 넣는다
				vo = new MemberVo();
				
				//rs가 가리키는 레코드값을 vo에 넣는다
				vo.setMem_idx(rs.getInt("mem_idx"));
				vo.setMem_name(rs.getString("mem_name"));
				vo.setMem_id(rs.getString("mem_id"));
				vo.setMem_pwd(rs.getString("mem_pwd"));
				vo.setMem_zipcode(rs.getString("mem_zipcode"));
				vo.setMem_addr(rs.getString("mem_addr"));
				vo.setMem_ip(rs.getString("mem_ip"));
				vo.setMem_regdate(rs.getString("mem_regdate").substring(0, 19));
				vo.setMem_grade(rs.getString("mem_grade"));
				
			} //end:if
			
		} catch (Exception e) {
			// TODO: handle exception
			e.printStackTrace();
			
		} finally {
			
			//마무리 작업(열린역순으로 닫기)
			try {
				if (rs != null)
					rs.close();
				if (pstmt != null)
					pstmt.close();
				if (conn != null)
					conn.close();
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
		
		return vo;
	}
}

 

)조회 서블릿

package action.member;

import jakarta.servlet.RequestDispatcher;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;

import dao.MemberDao;
import db.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 {
		
		// 회원목록 가져오기
		List<MemberVo> list = MemberDao.getInstance().selectList();

		// request 바인딩
		request.setAttribute("list", list);
		
		// Dispatcher형식으로 호출
		String forward_page = "member_list.jsp";
		RequestDispatcher disp = request.getRequestDispatcher(forward_page);
		disp.forward(request, response);

	}

}

 

)조회 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="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.7.1/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: 1000px;
		margin: auto;
		margin-top: 50px;
	}
	
	#title{
		text-align: center;
		font-weight: bold;
		font-size: 32px;
		color: green; 
		text-shadow: 1px 1px 1px black;
	}
	
	#empty_msg{
		text-align: center;
		color: red;
		margin-top: 130px;
		font-weight: bold;
		font-size: 20px;
		
	}
/* 	th{
		background: #333333 !important;
		color: white;
	} */
	
	td{
		vertical-align: middle !important;
	}
</style>

</head>

<body>
	
	<div id="box">
		<h1 id="title">::::회원목록::::</h1>
		<div style="margin-top: 50px; margin-bottom: 5px" >
			<input class="btn btn-primary" type="button" value="회원가입">
		</div>
		
		<table class="table">
			<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 출력 -->
		<!-- for(MemberVo vo : list) -->
		<c:forEach var="vo" items="${ list }">
			<tr>
				<td>${ vo.mem_idx }</td>
				<td>${ vo.mem_name }</td>
				<td>${ vo.mem_id }</td>
				<td>${ vo.mem_pwd }</td>
				<td>${ vo.mem_zipcode }</td>
				<td>${ vo.mem_addr }</td>
				<td>${ vo.mem_ip }</td>
				<td>${ vo.mem_regdate }</td>
				<td>${ vo.mem_grade }</td>
				<td>
					<input class="btn btn-success" type="button" value="수정">
					<input class="btn btn-danger" type="button" value="삭제">
				</td>
			</tr>
		</c:forEach>
				
		</table>
				
		<!-- Data가 없는 경우 -->
		<c:if test="${ empty requestScope.list }">
			<div id="empty_msg">등록된 회원정보가 없습니다.</div>
		</c:if>
			
	</div>
</body>
</html>

'웹 - Ajax' 카테고리의 다른 글

웹 - Ajax - 로그인 화면  (0) 2024.06.25
웹 - Ajax - 회원목록/가입 예제2(id 체크, 회원 가입)  (0) 2024.06.25
웹 - Ajax - 계산기 예제  (0) 2024.06.24
웹 - Ajax - 방명록  (0) 2024.06.24
웹 - Ajax - jQuery Ajax(많이 사용)  (0) 2024.06.24

'웹 - Ajax' Related Articles

티스토리툴바