고정 헤더 영역
상세 컨텐츠
본문
오늘은
오늘부터 드디어 본격적인 팀 프로젝트 기간이 시작되었습니다
그런데... 생각보다 가이드가 아무것도 없었습니다
그저 여태 배웠던것들을 활용하여 프로젝트를 진행하라는 말 정도..?
학원 선생님이 보통 팀 깃 허브 사용법이나
형식적으로 진행하는 방법 등을 설명해줄줄 알았는데
별 말씀이 없으셔서 질문을 했습니다만...
그런 질문을 처음 받아본다고 하셔서 오히려 당황해 하셨습니다
친구들 말이나 주변 학우들의 지인들의 말이나
이런 경우가 오히려 처음이라고 하는데...
이 난관을 어떻게 극복해 나가야 할지 막막한 기분입니다
하지만 그나마 제가 진행하던 쇼핑몰 페이지를 템플릿으로 제공하고
회의를 거치면서 어느정도 진행을 하고 있는 상황이기 때문에
스스로 알아서 찾아서 해야될 것 같습니다
커뮤니티 프로젝트
Main 페이지 - 데이터 처리
1. 인덱스 요청 - /main.do (->/main.jsp)
2. 최신 게시글 3개 출력
if(command.equals("/main.do")) {
// 메인 페이지에 게시글 보내기
List<Board> boardList = bDAO.getBoardList();
out.println(boardList.size() + "개");
request.setAttribute("boardList", boardList);
if(boardList.size() >= 3) {
Board[] newBoards = {boardList.get(0), boardList.get(1), boardList.get(2)};
request.setAttribute("boardList", newBoards);
}
nextPage = "/main.jsp";
}
유효성 검사 - 입력 정확하게 -> DB에 정확하게 저장
= 밸리데이션(validation) -> 구현(자바스크립트 알림창)
-> 정규 표현식
1. 아이디 - 4~15자 이내 입력 (아이디 중복: Ajax - 제이쿼리)
2. 비밀번호 - 8자 이상, 영문자, 숫자, 특수문자 포함
3. 비밀번호 확인 - 비밀번호를 동일하게 입력
4. 이름 - 한글로 입력
<%@ 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>회원 가입 폼</title>
<link rel="stylesheet" href="resources/css/style.css">
<script>
function checkmember(){
/* alert("test..."); */
/* input의 name속성을 변수에 할당 */
let form = document.member; // 폼 이름
let id = form.id.value;
let pw1 = form.passwd.value;
let pw2 = form.passwd2.value;
let name = form.name.value;
// 정규 표현식
// 비밀번호
let regexPw1 = /[0-9]+/; // 숫자
let regexPw2 = /[a-zA-Z]+/; // 영문자
let regexPw3 = /[~!@#$%^&*()]+/; // 영문자
// 이름
let regexName = /^[가-힣]+$/;
if(id.length < 4 || id.length > 15){
alert("아이디는 4 ~ 15자 이내로 작성해주세요");
id.select();
return false;
}else if(pw1.length < 8 || !regexPw1.test(pw1)
|| !regexPw2.test(pw1)
|| !regexPw3.test(pw1)){
alert("비밀번호는 영문자, 숫자, 특수문자(~!@#$%^&*()만 가능)를 포함하여 8자 이상으로 작성해주세요");
pw1.select();
return false;
}else if(pw1 != pw2){ // pw1 과 pw2 문자열이 일치하지 않을 때
alert("비밀번호를 동일하게 입력해주세요");
pw2.select();
return false;
}else if(!regexName.test(name)){
alert("이름은 한글로 입력해주세요")
name.select();
return false;
}else {
form.submit(); // 오류가 없으면 폼을 메인 컨트롤러로 전송
}
}
</script>
</head>
<body>
<jsp:include page="../header.jsp"/>
<div id="container">
<section id="join">
<h2>회원 가입</h2>
<form action="insertmember.do" method="post" name="member">
<fieldset>
<ul>
<li>
<label for="id">아이디</label>
<input type="text" id="id" name="id" placeholder="4~15자 이내">
</li>
<li>
<label for="passwd">비밀번호</label>
<input type="password" id="passwd" name="passwd" placeholder="영문자, 숫자, 특수문자 포함 8자 이상">
</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>
<label for="email">이메일</label>
<input type="email" id="email" name="email">
</li>
<li>
<label for="gender">성별</label>
<input type="radio" id="gender" name="gender" value="남" checked>남
<input type="radio" id="gender" name="gender" value="여">여
</li>
</ul>
</fieldset>
<div>
<button type="button" onclick="checkmember()">가입</button>
<button type="reset">취소</button>
</div>
</form>
</section>
</div>
<jsp:include page="../footer.jsp"/>
</body>
</html>
쇼핑몰 페이지 만들기
<div id="mid">
<h3>Notice / Event</h3>
<div class="Board">
<table id="board_tb">
<thead>
<tr>
<th class="board_no">no</th>
<th class="board_title">title</th>
<th class="board_writer">writer</th>
<th class="board_date">date</th>
<th class="board_hit">hit</th>
</tr>
</thead>
<tbody>
<tr>
<td>notice</td>
<td>Notice 1 첫번째 공지사항입니다</td>
<td>Notice team</td>
<td>2023-11-01</td>
<td>12</td>
</tr>
<tr>
<td>notice</td>
<td>Notice2 두번째 공지사항입니다</td>
<td>Notice team</td>
<td>2023-11-23</td>
<td>9</td>
</tr>
<tr>
<td>3</td>
<td>Event3 리뷰 작성 이벤트!! 리뷰 작성 횟수에 따라 포인트 획득!!</td>
<td>Event team</td>
<td>2023-11-30</td>
<td>21</td>
</tr>
<tr>
<td>2</td>
<td>Event2 첫 구매고객 이벤트!! 첫 구매시라면~</td>
<td>Event team</td>
<td>2023-11-16</td>
<td>26</td>
</tr>
<tr>
<td>1</td>
<td>Event1 회원가입 이벤트!!</td>
<td>Event team</td>
<td>2023-11-02</td>
<td>32</td>
</tr>
</tbody>
</table>
</div>
<div id="page">
<a href=""><button class="arrow"><</button></a>
<a href=""><button>1</button></a>
<a href=""><button>2</button></a>
<a href=""><button>3</button></a>
<a href=""><button>4</button></a>
<a href=""><button class="arrow">></button></a>
</div>
</div>
/* #mid */
#mid {
background-color: #fff;
margin: 30px;
margin-bottom: 0;
padding-bottom: 100px;
}
#mid h3 {
padding: 50px;
text-align: center;
background-color: #ffa;
}
#board_tb {
width: 90%;
margin: 40px auto;
padding: 0 5px 20px 5px;
line-height: 2.5;
border-top: 2px solid #ccc;
border-bottom: 2px solid #ccc;
border-collapse: collapse;
text-align: center;
}
#board_tb tbody td:nth-child(2) {
text-align: left;
}
#board_tb thead {
background: #ffe;
border-bottom: 2px solid #ccc;
line-height: 3;
font-size: 0.8rem;
}
.board_no {
width: 10%;
}
.board_title {
width: 50%;
}
.board_writer {
width: 15%;
}
.board_date {
width: 20%;
}
.board_hit {
width: 5%;
}
#board_tb tr, td {
border-top: 1px dotted #ccc;
border-bottom: 1px dotted #ccc;
}
#page {
text-align: center;
margin: 20px;
}
#page button {
width: 30px;
height: 30px;
margin: 0 5px;
border: 1px solid #aa1;
border-radius: 50%;
background: #ffe;
}
#page .arrow {
width: 25px;
height: 25px;
}
2023. 12. 04 (월)
'프로그래머가 될거야!' 카테고리의 다른 글
| 프로그래머 도전기 81일차 (1) | 2023.12.07 |
|---|---|
| 프로그래머 도전기 80일차 (4) | 2023.12.05 |
| 프로그래머 도전기 78일차 (0) | 2023.12.02 |
| 프로그래머 도전기 77일차 (0) | 2023.12.01 |
| 프로그래머 도전기 76일차 (0) | 2023.11.30 |
