본문 바로가기

JSP, Servlet/JSP를 이용하여 회원관리 페이지 만들기

[JSP] 회원관리 페이지 만들기 - 로그인 폼 만들기

회원관리 페이지에서는 크게 관리자와 회원으로 나눈다.

관리자는 회원을 등록할 수도 있고 수정할 수도 있으며, 회원 자신의 정보만 볼 수 있다고 하자.

그래서 처음 필요한 것은 회원정보를 저장할 DB를 만드는 것이다.

이번 JSP 회원관리 페이지 만들기는 오라클 데이터베이스를 기반으로 한다.

 

먼저 테이블을 생성한다.

create table employees(
id varchar2(10) PRIMARY KEY NOT NULL, -- 사용자 아이디
pass varchar2(10) NOT NULL, -- 비밀번호
name varchar2(24), -- 이름
lev char(1) DEFAULT 'A', --A:운영자, B:일반회원
enter DATE DEFAULT SYSDATE, -- 입사일자
gender char(1) DEFAULT '1', --1:남자, 2:여자
phone varchar2(30)
);

오라클에서 회원정보에 필요한 데이터가 들어있는 테이블을 생성한다.

자료형 옆에 primary는 고유값을 의미하며 중복해서 데이터를 집어넣을 수 없다.

그리고 해당 데이터의 키 역할을 한다.

그 다음에 자료형 옆에 default는 자료가 입력되지 않았을 때 자동으로 입력되는 값을 의미한다. 지금 enter 컬럼 같은 경우는 입사날짜를 나타내는 데이터로 해당날짜를 수기로 입력하기보단 내장되어있는 날짜함수를 이용하여 자동으로 입력한다.

NOT NULL같은 경우는 절대로 빈 값이 입력되면 안되는 값들을 지정한 것이다.

 

그럴때 insert를 이용하여 데이터를 넣어보자

insert into employees (ID, PASS, NAME, LEV, GENDER, PHONE) values('chulsoo', '3333', '김철수', 'A', '1', '02-333-2222');
insert into employees (ID, PASS, NAME, LEV, GENDER, PHONE) values('admin', '1111', '정운영', 'A', '2', '02-4455-6666');

SQL Developer나 다른 프로그램을 이용해서 직접 수기로 입력할 수 있지만 SQL문을 이용하여 자료를 입력하는 방법도 알아야한다. 입력하고 싶은 데이터의 컬럼을 입력하고 그 다음에 순서에 맞춰서 데이터를 입력한다.

 

데이터가 잘 들어간 것을 확인할 수 있다.


우리는 웹페이지에서 jstl을 사용할 예정이다. 이 때, jstl.jar 파일을 

WebContent > WEB-INF > lib 에 추가한다.

https://jamesyleather.tistory.com/347?category=834565

 

[JSP/Servlet] c태그 사용하기()

갑자기 이클립스에서 톰캣오류가 발생하는 바람에 앞에서 했던 예제들이 다 날아간 상황 ㅠㅠㅠ 여튼 c태그를 사용하기 위해서는 라이브러리가 필요하다 jakarta.apache.org The Jakarta Site - The Apache Ja

jamesyleather.tistory.com


그리고 로그인 페이지를 만든다.

JSP 편집 프로그램인 이클립스를 열어서 Dynamic web project를 생성한 후 WebContent에 JSP파일을 생성한다.

<login_form.jsp>

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="header.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login</title>
<style>
td {
	border: 1px solid black;
	text-align: center;
	width: 200px;
}
</style>
</head>
<body>
	<form action="LoginServlet" method="post">
		<table align="center">
			<tr>
				<td colspan="2">Login</td>
			</tr>
			<tr>
				<td>ID</td>
				<td><input type="text" name="id"></td>
			</tr>
			<tr>
				<td>PASS</td>
				<td><input type="password" name="pass"></td>
			</tr>
			<tr>
				<td>LEV</td>
				<td><select name="lev">
						<option value="A">admin</option>
						<option value="B">member</option>
				</select></td>
			</tr>
			<tr>
				<td colspan="2"><input type="submit" value="login"> &nbsp;<input type="reset" value="cancle"></td>
			</tr>
		</table>
		<div style="color: red; text-align: center;">${message}</div>
	</form>
</body>
</html>

 

그리고 고정적으로 상단 메뉴바를 따로 작성하여 include를 통해 가져온다.

<header.jsp>

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#header {
	height: 80px;
}

td {
	border: 1px solid black;
	text-align: center;
	width: 200px;
}
</head>
<body>
	<table>
		<c:if test="${empty loginUser }">
			<!-- if loginUser is empyty -->
			<tr>
				<td></td>
				<td></td>
				<td>Login</td>
				<td>Enroll<br> <span style="color: red;">(Only Admin)</span></td>
				<td>Mypage<br> <span style="color: red;">(After login)</span></td>
			</tr>
		</c:if>

		<c:if test="${!empty loginUser }">
			<tr>
				<td>Welcome ${loginUser.name }</td>
				<td>LEV: ${loginUser.lev }</td>
				<td><a href="LogoutServlet">Logout</a></td>
				<td><c:choose>
						<c:when test="${loginUser.lev=='A'}">
							<a href="EmpAddServlet">Enroll</a>
						</c:when>
						<c:when test="${loginUser.lev=='B'}">
				Enroll<br>
							<span style="color: red;">(Only Admin)</span>
						</c:when>
					</c:choose></td>
				<td><a href="MypageServlet">Mypage</a></td>
			</tr>
		</c:if>
	</table>
</body>
</html>

로그인 페이지가 잘 만들어진걸 확인할 수 있다.

728x90
반응형