프로그래머 도전기 81일차

프로그래머가 될거야!

by Choyee 2023. 12. 7. 20:56

오늘은

어제는 학원에서 시험을 보고 오늘은 수업을 했습니다

오후시간에는 팀 프로젝트를 위해 시간을 사용했습니다

erd를 작성하여 필요한 테이블과 DB작업의 틀을 마련했습니다

모두가 집중해서 자신이 맡은 일을 하는 것이 이렇게나

즐거운 일인지 새삼 깨닫게 되었던 하루였습니다

Test

Page

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>인덱스 페이지</title>
</head>
<body>
	<h3><a href="/list.do">상품 목록</a></h3>
	<h3><a href="/cart.do">장바구니 목록</a></h3>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>상품 목록 페이지</title>
</head>
<body>
	<h3>상품 목록</h3>
	<p>${list}</p>  <!-- EL언어 사용 list를 받아옴 -->
</body>
</html>

DAO 모델

package model;

import java.util.ArrayList;
import java.util.List;

public class ProductDAO {
	public List<String> list() {
		List<String> products = new ArrayList<>();
		products.add("김치 냉장고");
		products.add("notebook");
		products.add("AI 스피커");
		System.out.println("list 메서드가 실행됩니다.");
		return products;
	}

	public void addCart() {
		System.out.println("addCart 메서드가 실행됩니다.");
	}
}

Controller

package controller;

import java.io.IOException;
import java.util.ArrayList;
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 model.ProductDAO;

@WebServlet("*.do")
public class FrontController extends HttpServlet {
	private static final long serialVersionUID = 1L;
       // DAO를 가져옴
		ProductDAO dao;
       
    public FrontController() {
    	dao = new ProductDAO();
    }

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String uri = request.getRequestURI();
		// 서버 경로 설정
		String command = uri.substring(uri.lastIndexOf("/"));
		// 연결 페이지 선언
		String nextPage = "";
		
		if(command.equals("/list.do")) {
			nextPage = "/product/list.jsp";
			// dao.list()로 받아온 상품list를 "list"이름으로 보내줌
			request.setAttribute("list", dao.list());
		}else if (command.equals("/cart.do")) {
			dao.addCart();
			nextPage = "/product/cart.jsp";
		}
		// 페이지 연결
	    RequestDispatcher dispatch = request.getRequestDispatcher(nextPage);
	    dispatch.forward(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}
}

HTML

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원 가입 페이지</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/validation.js"></script>
</head>
<body>
	<form action="joinProcess.jsp" method="post" name="member">
		<fieldset>
			<legend>회원 가입</legend>
			<ul>
				<!-- required, autofocus, placeholder 사용 -->
				<li><label for="uid">아이디</label> <input type="text" id="uid"
					name="uid" required autofocus placeholder="아이디는 5~12자까지 입력해주세요"></li>
				<li><label for="passwd">비밀번호</label> <input type="password"
					id="passwd" name="passwd" required placeholder="영문자, 숫자, 특수문자 포함 7자 이상 입력"></li>
				<li><label for="passwd2">비밀번호 확인</label> <input type="password"
					id="passwd2" name="passwd2" placeholder="비밀번호를 동일하게 입력해주세요"></li>
				<li><label for="name">이름</label> <input type="text" id="name"
					name="name" placeholder="이름은 숫자로 시작할 수 없습니다"></li>
				<li>
					<button type="button" onclick="checkForm()">가입</button>
					<button type="reset">취소</button>
				</li>
			</ul>
		</fieldset>
	</form>
</body>
</html>

CSS

@charset "UTF-8";

*{margin: 0 auto; padding: 0;}
body {margin: 40px;}
form {
	width: 500px;
	padding: 20px;
}
legend {margin-left:20px;}
ul {margin: 20px;}
ul li {
	list-style: none;
	line-height: 3;
	margin-left: 40px;
}sWhrd
ul li label {
	width: 130px;
	float: left;
}
ul li input {
	width: 280px;
	line-height: 2;
}
button {padding: 5px;}

JS - 유효성 검사, 오류 처리

function checkForm() {
	let form = document.member;
	let uid = form.uid.value;
	let passwd = form.passwd.value;
	let passwd2 = form.passwd2.value;
	let name = form.name.value;
	
	let regexPasswd = /^[a-zA-Z0-9~!@#$%^&*()]+$/;
	/*let regexName = /^[0-9]/;*/
	let regexName = /^[a-zA-Z가-힣]+$/;
	
	if(uid.length < 5 || uid.length > 12) {
		alert("아이디는 5~12자까지 입력해주세요");
		form.uid.select();
		return false;
	}else if (!regexPasswd.test(passwd)) {
		alert("비밀번호는 영문자, 숫자, 특수문자 포함 7자 이상 입력해주세요");
		form.passwd.select();
		return false;
	}else if (passwd != passwd2) {
		alert("비밀번호를 동일하게 입력해주세요");
		form.passwd2.select();
		return false;
	}else if (!regexName.test(name)) {
		alert("이름은 숫자로 시작할 수 없습니다");
		form.name.select();
		return false;
	}else {
		form.submit();
	}
}

2023. 12. 07 (목)

저작자표시 비영리 변경금지

'프로그래머가 될거야!' 카테고리의 다른 글

프로그래머 도전기 83일차 (0)	2023.12.10
프로그래머 도전기 82일차 (0)	2023.12.09
프로그래머 도전기 80일차 (4)	2023.12.05
프로그래머 도전기 79일차 (0)	2023.12.04
프로그래머 도전기 78일차 (0)	2023.12.02