[D+76] 과정평가형 정보처리산업기사 : 회원등록화면(register.jsp) 구현

국비지원 D+76

과정평가형 정보처리산업기사

- 회원등록화면(register.jsp) 구현 -

회원등록화면(register.jsp) 구현

회원등록 화면은 SQL문을 사용해 회원번호가 자동으로 생성될 수 있도록 하며, 데이터가 입력될 때 빈칸이 입력되지 않고 올바른 데이터타입이 들어갈 수 있도록 유효성 검사가 진행될 수 있도록 작성되어야 한다.

• register.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.Statement" %>
<%@ page import="java.sql.ResultSet" %>

<%@ page import="DBPKG.DBConnection" %>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>홈쇼핑 회원 등록</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
	<header>
		<div>
			<h2>쇼핑몰 회원관리 ver 1.0</h2>
		</div>
	</header>
	
	<nav>
		<div>
			<a href="register.jsp">회원등록</a>
			<a href="inquiry.jsp">회원목록조회/수정</a>
			<a href="sale.jsp">회원매출조회</a>
			<a href="index.jsp">홈으로</a>
		</div>
	</nav>
	
	<section>
		<div>
			<h3>홈쇼핑 회원 등록</h3>
			
<%
Connection conn = null;
Statement stmt = null;
ResultSet rset = null;

String sql = "select max(custno)+1 from member_tbl_02";

String custno = "";

try
{
	conn = DBConnection.getConnection();
	stmt = conn.createStatement();
	rset = stmt.executeQuery(sql);
	
	while(rset.next())
	{
		custno = rset.getString(1);
	}
	
	rset.close();
	stmt.close();
	conn.close();
}

catch(Exception e)
{
	System.out.println("[Error] " + e.getMessage());
	e.printStackTrace();
}
%>
			
			<form method="post" id="frm_register" name="frmRegister">
				<table border="1" style="width: 550px">
					<tr>
						<th>회원번호(자동발생)</th>
						<td><input type="text" value=<%= custno %> readonly name="custno"></td>
					</tr>
					<tr>
						<th>회원성명</th>
						<td><input type="text" id="custname" name="custname"></td>
					</tr>
					<tr>
						<th>회원전화</th>
						<td><input type="text" id="phone" name="phone"></td>
					</tr>
					<tr>
						<th>회원주소</th>
						<td><input type="text" id="address" name="address"></td>
					</tr>
					<tr>
						<th>가입일자</th>
						<td><input type="text" id="joindate" name="joindate"></td>
					</tr>
					<tr>
						<th>고객등급[A:VIP, B:일반, C:직원]</th>
						<td><input type="text" id="grade" name="grade"></td>
					</tr>
					<tr>
						<th>도시코드</th>
						<td><input type="text" id="city" name="city"></td>
					</tr>
				</table>
			</form>
			
			<table border="1" style="width: 550px">
				<tr>
					<td>
						<input type="button" id="btn_register" value="등록"> 
						<input type="button" id="btn_inquiry" value="조회">
					</td>
				</tr>
			</table>
		</div>
	</section>
	
	<footer>
		<div>
			<h4>HRDKOREA Copyright@2016 All rights reserved. Human Resources Development Service of Korea</h4>
		</div>
	</footer>
	
	<iframe name="hiddenframe" style="display: none"></iframe>
<script>
(function(){
	const btnRegister = document.querySelector("#btn_register");
	const btnInquiry = document.querySelector("#btn_inquiry");
	
	const frmRegister = document.querySelector("#frm_register");
	
	const objsArr = [
		{elem: document.querySelector("#custname"), size: 20, blankMsg: "회원성명이 입력되지 않았습니다.", validMsg: "회원성명이 올바르지 않습니다."},
		{elem: document.querySelector("#phone"), size: 13, blankMsg: "회원전화가 입력되지 않았습니다.", validMsg: "회원전화가 올바르지 않습니다."},
		{elem: document.querySelector("#address"), size: 60, blankMsg: "주소가 입력되지 않았습니다.", validMsg: "주소가 올바르지 않습니다."},
		{elem: document.querySelector("#joindate"), size: 10, blankMsg: "가입일자가 입력되지 않았습니다.", validMsg: "가입일자가 올바르지 않습니다."},
		{elem: document.querySelector("#grade"), size: 1, blankMsg: "고객등급이 입력되지 않았습니다.", validMsg: "고객등급이 올바르지 않습니다."},
		{elem: document.querySelector("#city"), size: 2, blankMsg: "거주도시가 입력되지 않았습니다.", validMsg: "거주도시가 올바르지 않습니다."}
	];
	
	const checkBlank = function()
	{
		let result = true;
		
		for(let i = 0; i < objsArr.length; i++)
		{
			if(objsArr[i].elem.value.length === 0) return i;
		}
		return result;
	}
	
	const checkValid = function()
	{
		let result = true;
		
		for(let i = 0; i < objsArr.length; i++)
		{
			if(objsArr[i].elem.value.length > objsArr[i].size) return i;
		}
		
		if(isNaN(objsArr[3].elem.value.replaceAll("-", "")) === true) return 3;
		
		if(isNaN(objsArr[4].elem.value) === false) return 4;
		
		if(isNaN(objsArr[5].elem.value) === true) return 5;
		
		return result;
	}
	
	btnRegister.addEventListener("click", function()
	{
		let res = checkBlank();
		
		if(res !== true)
		{
			alert(objsArr[res].blankMsg);
			objsArr[res].elem.focus();
			return;
		}
		
		res = checkValid();
		
		if(res !== true)
		{
			alert(objsArr[res].validMsg);
			objsArr[res].elem.focus();
			return;
		}
		
		frmRegister.action = "member.jsp";
		frmRegister.target = "hiddenframe";
		frmRegister.submit();
	});
	
	btnInquiry.addEventListener("click", function(){
		location.href = "./inquiry.jsp";
	});
})();
</script>
</body>
</html>

• member.jsp

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

<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.Statement" %>

<%@ page import="DBPKG.DBConnection" %>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DB 회원등록</title>
</head>
<body>
<%
Connection conn = null;
Statement stmt = null;

request.setCharacterEncoding("UTF-8");

String custno = request.getParameter("custno");
String custname = request.getParameter("custname");
String phone = request.getParameter("phone");
String address = request.getParameter("address");
String joindate = request.getParameter("joindate");
String grade = request.getParameter("grade");
String city = request.getParameter("city");

joindate = joindate.replaceAll("-", "");

String sql = "insert into member_tbl_02 values (" +
					  custno + ", " + 
				"'" + custname + "', " +
				"'" + phone + "', " +
				"'" + address + "', " +
		"to_date('" + joindate + "', 'YYYYMMDD'), " +
				"'" + grade + "', " +
				"'" + city + "')";
int result = 0;

try
{
	conn = DBConnection.getConnection();
	stmt = conn.createStatement();
	
	result = stmt.executeUpdate(sql);
	
	if(conn.getAutoCommit() == false) conn.commit();
	
	stmt.close();
	conn.close();
}

catch(Exception e)
{
	System.out.println("[Error] " + e.getMessage());
	e.printStackTrace();
}

finally
{
	out.println("<h1>" + result + "</h1>");
}
%>

<script>
(function(){
	const h1Elem = document.querySelector("h1");
	
	if(h1Elem.textContent === "1")
	{
		alert("회원등록이 완료되었습니다.");	
	}
	else
	{
		alert("회원등록이 진행되지 않았습니다.");
	}
	
	parent.location.reload();
})();
</script>
</body>
</html>

member.jsp는 register.jsp화면에서 등록버튼을 눌렀을때 SQL문 명령이 전송되어 DB에 데이터가 추가될 수 있도록 하는 화면으로 register.jsp에 ifram 태그를 만들어 해당 태그안에 정보가 들어가되 숨김처리가 되어 매끄럽게 진행될수 있도록 만들었다.

저작자표시

'시도 > 국비지원' 카테고리의 다른 글

[D+78] 과정평가형 정보처리산업기사 : 회원수정화면(modify.jsp) 구현 (0)	2023.01.10
[D+77] 과정평가형 정보처리산업기사 : 회원목록조회화면(inquiry.jsp) 구현 (0)	2023.01.09
[D+75] 과정평가형 정보처리산업기사 : 데이터 추가 및 메인화면(index.jsp)구현 (0)	2023.01.05
[D+74] UI 테스트 (0)	2023.01.04
[D+73] 과정평가형 정보처리산업기사 : 이클립스 셋팅 및 데이터베이스 연동 (0)	2023.01.03

IT Information Notebook

[D+76] 과정평가형 정보처리산업기사 : 회원등록화면(register.jsp) 구현

국비지원 D+76

과정평가형 정보처리산업기사

- 회원등록화면(register.jsp) 구현 -

회원등록화면(register.jsp) 구현

• register.jsp

• member.jsp

'시도 > 국비지원' 카테고리의 다른 글

댓글

티스토리툴바

[D+76] 과정평가형 정보처리산업기사 : 회원등록화면(register.jsp) 구현

국비지원 D+76

과정평가형 정보처리산업기사

- 회원등록화면(register.jsp) 구현 -

회원등록화면(register.jsp) 구현

• register.jsp

• member.jsp

'시도 > 국비지원' 카테고리의 다른 글

관련글

댓글

티스토리툴바