믿음의 개발자
블로그 이미지

Home

Write

Setting

About Me
Dark
javaScript↗

Ajax를 이용한 회원관리 예제

메타플랫폼대표
|2024. 6. 25. 10:10
반응형

 

기존에 DBBase로 만들어놨던 war 파일을 import해서 프로젝트를 생성한다.

 

 

 

DBBase.war
2.05MB

 

 

 

 

 

데이터베이스 계정 변경할 때 위 파일의 username과 password를 변경해준다.

 

 

 

 

 

 

ERD 작성하기

위 작업내용에서 visit이 member로만 그대로 들어간다. 작업내용 필히 정리해놓고 작업하기를 습관화하자.

 

 

 

데이터베이스 작성

-- 일련(회원)번호 관리객체
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,		-- 우편번호
	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','서울시 관악구','192.168.219.170',sysdate,'관리자');

insert into member values(seq_member_idx.nextVal,'일길동','one','1234','00000','서울시 관악구','192.168.219.170',default,default);

select * from member



commit

 

 

 

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 MemberVo() {
		// TODO Auto-generated constructor stub
	}
	
	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 작성

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 얻어오기(킵해놨던 sql문 출력하기)
			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"));
				vo.setMem_grade(rs.getString("mem_grade"));

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

			}

		} catch (Exception e) {
			// TODO: handle exception
			e.printStackTrace();
		} finally {
			// 예외 처리에서 무조건 실행되는 부분
			// 마무리 작업(열린역순으로 닫기)
			// 한 번에 잡아서 try catch 하기 : alt + shift + s
			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;
	}

}

 

 

 

Servlet 생성하기

package action.member;

import java.io.IOException;
import java.util.List;

import dao.MemberDao;
import db.vo.MemberVo;
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;

/**
 * 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 binding
		request.setAttribute("list", list);

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

	}

}

 

 

 

 

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="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>wonder .. let's go</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">
	@font-face {
	    font-family: 'MabinogiClassicR';
	    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2207-01@1.0/MabinogiClassicR.woff2') format('woff2');
	    font-weight: normal;
	    font-style: normal;
	}
	* {
		font-family: "MabinogiClassicR";
	}
	#box {
		width: 1000px;
		margin: auto;
		margin-top: 50px;
	}
	#title {
		text-align: center;
		font-weight: bold;
		font-size: 32px;
		color: skyblue;
		text-shadow: 1px 1px 1px gray;
	}
	.go {
		background: skyblue;
		border: white;
		margin-bottom: 35px;
	}
	#empty_msg {
		text-align: center;
		margin-top: 150px;
	}
	td {
		vertical-align : middle !important;
	}
</style>
</head>
<body>

	<div id="box">
		<h1 id="title">방문하신 여러분 환영합니다.</h1>
			<div style="margin-top: 50px">
				<input class="btn btn-primary go" type="button" value="회원가입">
				<input class="btn btn-primary go" type="button" value="로그인">
				<input class="btn btn-primary go" 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>
			<!-- 데이터가 있는 경우 -->
			<!-- for(Member Vo 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-primary" type="button" value="수정">
						<input class="btn btn-danger" type="button" value="삭제">
					</td>
				</tr>
			</c:forEach>
			</table>
			<!-- 데이터가 없는 경우 -->
			<c:if test="${ empty requestScope.list }">
				<div id="empty_msg">등록된 회원 정보가 없습니다.</div>
			</c:if>
			
	</div>

</body>
</html>

 

 

 

 

index.html 생성하기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

	location.href = "member/list.do"

</script>
</head>
<body>

</body>
</html>

 

 

index.html에 location.href 자바 스크립트안에 경로를 넣으면, Run on Server를 할 시에, 기본 화면이 member/list.do가 나오게 된다.

 

 

 

InsertFormAction Servlet 생성하기

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;

/**
 * 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 {

		// Dispatcher형식으로 호출
		String forward_page = "member_insert_form.jsp";
		RequestDispatcher disp = request.getRequestDispatcher(forward_page);
		disp.forward(request, response);

	}
}

 

 

 

 

Insert_Form JSP 작성하기

<%@ 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>
<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">
@font-face {
    font-family: 'MabinogiClassicR';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2207-01@1.0/MabinogiClassicR.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
* {
	font-family: "MabinogiClassicR";
}
/* .all {
	postion: relative;
	width: 100%;
	background: url(https://www.nintendo.co.kr/wallpapers/file/Kirby_Star_Allies/Kirby_Star_Allies-01.jpg) no-repeat 100% 0 fixed;
	background-size: cover;
}
.all::before {
	content: "";
	opactiy: 0.5;
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	background-color: #000;
} */
#title {
	text-align: center;
	margin: 50px;
}
#box {
	width: 60vw;
	margin: auto;
	margin-top: 50px;
	margin-bottom: 200px;
}
th {
	vertical-align: middle !important;
	text-align: right;
	font-size: 14px;
}
#id_msg {
	display: inline-block;
	width: 300px;
	height: 20px;
	margin-left: 10px;
}

#footer {
	width: 100%;
	text-align: center;
}
</style>
<!-- 주소검색 API -->
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script type="text/javascript">

	function check_id() {
		
		// 회원가입 버튼은 비활성화
		// <input id="btn_register" type="button" ... disabled="disabled">
		$("#btn_register").prop("disabled", true);
		
		// document.getElementById("mem_id").value
		let mem_id = $("#mem_id").val();
		
		if(mem_id.length==0) {
			$("#id_msg").html("");
			return;
		}
		
		if(mem_id.length<3) {
			$("#id_msg").html("id는 3자리 이상이여야 합니다. -글로벌아이티 운영자-").css("color","red");
			return;
		}
		
		// 서버에 현재 입력된 ID를 체크 요청(jQuery Ajax이용)
		$.ajax({
			url		:	"check_id.do",		// MemberCheckIdAction
			data	:	{"mem_id":mem_id},	// parameter => check_id.do?mem_id=one
			dataType:	"json",
			success :	function(res_data){
				// res_data = {"result": true} or {"result": false}
				if(res_data.result) {
					$("#id_msg").html("사용가능한 아이디 입니다.").css("color","blue");
					$("#btn_register").prop("disabled", false);
				} else {
					$("#id_msg").html("이미 사용중인 아이디 입니다.").css("color","red");
				}
			},
			error	:	function(err){
				alert(err.responseText);
			}
		});
		
	}// end:check_id()
	
	function find_addr(){
		
		var themeObj = {
			bgColor: "#C4F7FF" // 바탕배경색
		};
		
	    new daum.Postcode({
	    	theme: themeObj,
	        oncomplete: function(data) {
	        	// input 태그에 넣는 것이니 value 값을 넣어야 한다.
	        	$("#mem_zipcode").val(data.zonecode);
	        	$("#mem_addr").val(data.address);
	        }
	    }).open();
		
	}// end:find_addr()
	
	function send(f){
		
		let mem_name = f.mem_name.value.trim();
		let mem_pwd = f.mem_pwd.value.trim();
		let mem_zipcode = f.mem_zipcode.value.trim();
		let mem_addr = f.mem_addr.value.trim();
		
		if(mem_name=='') {
			alert("이름을 입력하세요");
			f.mem_name.value="";
			f.mem_name.focus();
			return;
		}
		if(mem_pwd=='') {
			alert("비밀번호을 입력하세요");
			f.mem_pwd.value="";
			f.mem_pwd.focus();
			return;
		}
		if(mem_zipcode=='') {
			alert("우편번호를 입력하세요");
			f.mem_zipcode.value="";
			f.mem_zipcode.focus();
			return;
		}
		if(mem_addr=='') {
			alert("주소를 입력하세요");
			f.mem_addr.value="";
			f.mem_addr.focus();
			return;
		}
		
		f.action="insert.do"; // MemberInsertAction
		f.submit();
	}// end:send()
	
</script>

</head>
<body>
<div id="title"><h4>글로벌 IT 온라인 ver 1.0.05</h4>
	<img alt="" src="https://www.wonderking.co.kr/upload/img/write/notice/wUZw05Sl87KakaoTalk_20240502_110610130.png">
</div>
<div id="title"><h2>회원가입을 환영합니다.</h2></div>
<form class="form-inline">
	<div id="box">
		<div class="panel panel-primary">
      		<div class="panel-heading"><h4>회원가입</h4></div>
      		<div class="panel-body">
      			<table class="table">
      				<tr>
      					<th>이름</th>
      					<td>
      						<input style="width:50%" class="form-control" name="mem_name">
      					</td>
      				</tr>
      				<tr>
      					<th>아이디</th>
      					<td>
      						<input style="width:50%" class="form-control" name="mem_id" id="mem_id" onkeyup="check_id();">
      						<span id="id_msg"></span>
      					</td>
      				</tr>
      				<tr>
      					<th>비밀번호</th>
      					<td>
      						<input style="width:50%" class="form-control" type="password" name="mem_pwd">
      					</td>
      				</tr>
      				<tr>
      					<th>우편번호</th>
      					<td>
      					<!-- 한 줄에 표시해주기 위해서 form-inline으로 잡아준다. -->
      						<input style="width:50%" class="form-control" name="mem_zipcode" id="mem_zipcode">
      						<input class="btn btn-info" type="button" value="주소검색" onclick="find_addr();">
      					</td>
      				</tr>
      					<th>주소</th>
      					<td>
      					<!-- 한 줄에 표시해주기 위해서 form-inline으로 잡아준다. -->
      						<input style="width:100%" class="form-control" name="mem_addr" id="mem_addr">
      					</td>
      				</tr>
      				<tr>
      					<td colspan="2" align="center">	
      						<input class="btn btn-success" type="button" value="목록보기" onclick="location.href='list.do'">
      						<input id="btn_register" class="btn btn-primary" type="button" value="가입하기" disabled="disabled" onclick="send(this.form);">
      					</td>
      				</tr>
      			</table>
      		</div>
    	</div>
	</div>
</form>
<div id="footer">
	<img alt="" src="../image/footer.JPG">
</div>
</body>
</html>

 

 

 

MemberCheckIdAction Servlet 작성하기

package action.member;

import java.io.IOException;

import dao.MemberDao;
import db.vo.MemberVo;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

/**
 * 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 {

		// /member/check_id.do?mem_id=one
		// 이메일을 id로 받는 경우에 특수문자가 들어가기 때문에 수신 인코딩을 설정해준다.
		request.setCharacterEncoding("utf-8");
		// parameter 받기
		String mem_id = request.getParameter("mem_id");
		// mem_id에 해당되는 유저정보 검색
		MemberVo vo = MemberDao.getInstance().selectOne(mem_id);
		// 중복된 아이디를 검사하는 것이기 때문에, where mem_id = '검사 id'를 했을 때 그 값이 데이터 DB에 없으면 null 값이 나온다.
		Boolean bResult = (vo==null);
		
		/* if(vo==null) bResult=true;
		else bResult=false; */
		
		// 요청한 클라이언트에게 응답처리
		response.setContentType("application/json; charset=utf-8;");
		
		// PrintWriter out = response.getWriter();
		
		String json = String.format("{\"result\": %b}", bResult);
		// 데이터를 하나만 보내기에 변수를 사용안하고 바로 보내준다.
		response.getWriter().print(json);

	}
}

 

 

 

 

 

 

 

 

 

자바스크립트 문제가 일어날 경우 f12에서 해당 경로를 눌러서 어디가 틀렸는지 확인해볼 수 있다.

 

 

 

package action.member;

import java.io.IOException;

import dao.MemberDao;
import db.vo.MemberVo;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

/**
 * 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 {
		
		// 수신인코딩 설정하기
		request.setCharacterEncoding("utf-8");
		
		String mem_name = request.getParameter("mem_name");
		String mem_id = request.getParameter("mem_id");
		String mem_pwd = request.getParameter("mem_pwd");
		String mem_zipcode = request.getParameter("mem_zipcode");
		String mem_addr = request.getParameter("mem_addr");
		String mem_ip = request.getRemoteAddr();
		
		MemberVo vo = new MemberVo(mem_name, mem_id, mem_pwd, mem_zipcode, mem_addr, mem_ip);
		
		int res = MemberDao.getInstance().insert(vo);
		
		response.sendRedirect("list.do");
		
		
		
	}
}

 

 

 

 

Vo 수정

	public MemberVo(String mem_name, String mem_id, String mem_pwd, String mem_zipcode, String mem_addr,
			String mem_ip) {
		super();
		this.mem_name = mem_name;
		this.mem_id = mem_id;
		this.mem_pwd = mem_pwd;
		this.mem_zipcode = mem_zipcode;
		this.mem_addr = mem_addr;
		this.mem_ip = mem_ip;
	}

 

 

 

 

Dao 수정

	public int insert(MemberVo vo) {
		// TODO Auto-generated method stub

		int res = 0;
		Connection conn = null;
		PreparedStatement pstmt = null;

		String sql = "insert into member values(seq_member_idx.nextVal,?,?,?,?,?,?,default,default)";

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

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

			// 3. pstmt parameter index 채우기
			pstmt.setString(1, vo.getMem_name());
			pstmt.setString(2, vo.getMem_id());
			pstmt.setString(3, vo.getMem_pwd());
			pstmt.setString(4, vo.getMem_zipcode());
			pstmt.setString(5, vo.getMem_addr());
			pstmt.setString(6, vo.getMem_ip());

			// 4. DB insert
			res = pstmt.executeUpdate();

		} catch (Exception e) {
			// TODO: handle exception
			e.printStackTrace();
		} finally {
			// 예외 처리에서 무조건 실행되는 부분
			// 마무리 작업(열린역순으로 닫기)
			// 한 번에 잡아서 try catch 하기 : alt + shift + s
			try {
				if (pstmt != null)
					pstmt.close();
				if (conn != null)
					conn.close();
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}

		return res;

	}// end:insert()

 

 

 

list 수정

<%@ 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>wonder .. let's go</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">
	@font-face {
	    font-family: 'MabinogiClassicR';
	    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2207-01@1.0/MabinogiClassicR.woff2') format('woff2');
	    font-weight: normal;
	    font-style: normal;
	}
	* {
		font-family: "MabinogiClassicR";
	}
	#box {
		width: 1000px;
		margin: auto;
		margin-top: 50px;
	}
	#title {
		text-align: center;
		font-weight: bold;
		font-size: 32px;
		color: skyblue;
		text-shadow: 1px 1px 1px gray;
	}
	.go {
		background: skyblue;
		border: white;
		margin-bottom: 35px;
	}
	#empty_msg {
		text-align: center;
		margin-top: 150px;
	}
	td {
		vertical-align : middle !important;
	}

</style>
</head>
<body>

	<div id="box">
		<div id="title">
			<h1>방문하신 여러분 환영합니다.</h1>
			<img alt="" src="https://www.wonderking.co.kr/img/WonderKingLogo.png">
		</div>
		<div style="text-align: left; float: right;">
			<input class="btn btn-primary go" type="button" value="로그인" onclick="location.href='login_form.do'">
		</div>
			<div style="margin-top: 50px">
				<input class="btn btn-primary go" type="button" value="회원가입" onclick="location.href='insert_form.do'">
				<input class="btn btn-primary go" 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>
			<!-- 데이터가 있는 경우 -->
			<!-- for(Member Vo 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>${ fn:substring(vo.mem_regdate,0,10) }</td>
					<td>${ vo.mem_grade }</td>
					<td>
						<input class="btn btn-primary" type="button" value="수정">
						<input class="btn btn-danger" type="button" value="삭제">
					</td>
				</tr>
			</c:forEach>
			</table>
			<!-- 데이터가 없는 경우 -->
			<c:if test="${ empty requestScope.list }">
				<div id="empty_msg">등록된 회원 정보가 없습니다.</div>
			</c:if>
			
	</div>

</body>
</html>

 

 

 

로그인 Servlet 만들기

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;

/**
 * Servlet implementation class MemberLoginFormAction
 */
@WebServlet("/member/login_form.do")
public class MemberLoginFormAction 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 {

		// Dispatcher형식으로 호출
		String forward_page = "member_login_form.jsp";
		RequestDispatcher disp = request.getRequestDispatcher(forward_page);
		disp.forward(request, response);

	}

}

 

 

 

로그인 form 만들기

<%@ 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>
<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: 400px;
		margin: auto;
		margin-top: 200px;
	}
	
	input[type="button"] {
		width: 100px;
	}
</style>
</head>
<body>
<form>
	<div id="box">
		<div class="panel panel-primary">
    		<div class="panel-heading"><h5>로그인</h5></div>
    		<div class="panel-body">
    			<table class="table">
    				<tr>
    					<th>아이디</th>
    					<td><input class="form-control" name="mem_id"></td>
    				</tr>
    				<tr>
    					<th>비밀번호</th>
    					<td><input class="form-control" type="password" name="mem_pwd"></td>
    				</tr>
    				<tr>
    					<td colspan="2" align="center">
    						<input class="btn btn-success" type="button" value="메인화면" onclick="location.href='list.do'">
    						<input class="btn btn-primary" type="button" value="로그인">
    					</td>
    				</tr>
    			</table>
    		</div>
    	</div>
	</div>
</form>
</body>
</html>

 

 

 

 

 

 

 

 

반응형
저작자표시

'javaScript↗' 카테고리의 다른 글

웹 파일 업로드  (0) 2024.06.27
웹페이지 로그인 로직(Session 활용)  (0) 2024.06.26
[오류해결]프로젝트 xar 파일로 import시, 오류날 때  (0) 2024.06.24
Ajax 실전 활용 게시판 예시 (비밀번호 체크)  (0) 2024.06.24
★★AJax Start★★  (0) 2024.06.24

티스토리툴바