상세 컨텐츠

본문 제목

프로그래머 도전기 76일차

프로그래머가 될거야!

by Choyee 2023. 11. 30. 22:09

본문

오늘은

 

오늘은 또 어느새 11월의 마지막 날입니다

내일부터는 올해의 마지막 한달입니다

연말이 되면 또 올 한해를 돌아보게 될것같은데요

후회가 남지 않도록 남은 한달이라도 부지런히 노력해야겠습니다

 

 

 

JSP 프로젝트

 

회원 커뮤니티 프로젝트(members)
회원 + 게시판
- 사용자 요구 분석 : UML 다이어그램
  회원 기능 구현 : 회원가입, 회원목록(관리자), 회원정보(사용자), 회원수정, 삭제
  로그인 기능 구현 : 로그인 인증(세션발급), 로그아웃
  게시판 기능 구현 : 글쓰기, 글 상세보기, 삭제, 수정, 댓글
- DB 모델링 : jweb(db)/member(테이블), 관계, jweb
- MainController = 경로 설정 및 index 페이지, 회원 목록
- 회원 클래스 : MemberVO, MemberDAO, MainController
- 게시판 : BoardVO, BoardDAO, MainController

화면구성
index.jsp -> main.jsp(header.jsp, footer.jsp)
1. 회원 목록 - /memberlist.do - get방식(id링크)   (-> /member/memberlist.jsp)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원 목록</title>
<link rel="stylesheet" href="resources/css/style.css">
</head>
<body>
	<jsp:include page="../header.jsp"/>
	<div id="container">
		<section id="memberlist">
			<h2>회원 목록</h2>
			<div class="logout">
				<p><a href="/logout.do">[관리자 로그아웃]</a></p>
			</div>
			<table>
				<thead>
					<tr>
						<th>번호</th>
						<th>아이디</th>
						<th>비밀번호</th>
						<th>이름</th>
						<th>이메일</th>
						<th>성별</th>
						<th>가입일</th>
					</tr>
				</thead>
				
				<tbody>
					<c:forEach items="${memberList}" var="m">
						<tr>
						<!-- m.mno - m.getMno()와 같음 -->
							<td>${m.mno}</td>
							<!-- id를 클릭하면 상세보기로 이동함 -->
							<td><a href="/memberview.do?id=${m.id}">${m.id}</a></td>
							<td>${m.passwd}</td>
							<td>${m.name}</td>
							<td>${m.email}</td>
							<td>${m.gender}</td>
							<td><fmt:formatDate value ="${m.joinDate}" pattern="yyyy-MM-dd HH:mm:ss a"/></td>
						</tr>
					</c:forEach>
				</tbody>
			</table>
		</section>
	</div>
	<jsp:include page="../footer.jsp"/>
</body>
</html>


4. 회원 정보(상세 보기) - /memberview.do - get방식(id링크) (-> /member/memberview.jsp)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원 정보</title>
<link rel="stylesheet" href="resources/css/style.css">
</head>
<body>
	<jsp:include page="../header.jsp"/>
	<div id="container">
		<section id="memberview">
			<h2>회원 정보</h2>
			<table>
				<tbody>
					<tr>
						<td><label for="id">아이디</label></td>
						<!-- dispatcher가 보내준 모델을 받음 -->
						<td>${member.id}</td>
					</tr>
					<tr>
						<td><label for="passwd">비밀번호</label></td>
						<td>${member.passwd}</td>
					</tr>
					<tr>
						<td><label for="name">이름</label></td>
						<td>${member.name}</td>
					</tr>
					<tr>
						<td><label for="email">이메일</label></td>
						<td>${member.email}</td>
					</tr>
					<tr>
						<td><label for="gender">성별</label></td>
						<td>${member.gender}</td>
					</tr>
					<tr>
						<td><label for="joindate">가입일</label></td>
						<td ><fmt:formatDate value ="${member.joinDate}" pattern="yyyy-MM-dd HH:mm:ss a"/></td>
					</tr>
					<tr>
						<td colspan="2">
						<c:if test="${sessionId eq member.id}">
							<a href="#"><button>수정</button></a>
							<a href="#"><button>탈퇴</button></a>
						</c:if>
							<a href="/memberlist.do"><button>목록</button></a>
						</td>
					</tr>
				
				</tbody>
			</table>
		</section>
	</div>
	<jsp:include page="../footer.jsp"/>
</body>
</html>


2. 회원 가입 폼 - /joinform.do - get방식

<%@ 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">
</head>
<body>
	<jsp:include page="../header.jsp"/>
	<div id="container">
		<section id="join">
			<h2>회원 가입</h2>
			<form action="insertmember.do" method="post">
				<fieldset>
					<ul>
						<li>
							<label for="id">아이디</label>
							<input type="text" id="id" name="id" required>
						</li>
						<li>
							<label for="passwd">비밀번호</label>
							<input type="password" id="passwd" name="passwd" required>
						</li>		
						<li>
							<label for="passwd2">비밀번호 확인</label>
							<input type="password" id="passwd2" name="passwd2" required>
						</li>	
						<li>
							<label for="name">이름</label>
							<input type="text" id="name" name="name">
						</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="submit">가입</button>
					<button type="reset">취소</button>
				</div>

			</form>
		</section>
	</div>
	<jsp:include page="../footer.jsp"/>
</body>
</html>


3. 회원 가입 - /insertmember.do - post방식(submit)

// 회원 가입
public void insertmember(Member m) {
    try {
        conn = JDBCUtil.getConnection();
        String sql = "INSERT INTO member(mno, id, passwd, name, email, gender) "
                + "VALUES(seq_mno.NEXTVAL, ?, ?, ?, ?, ?)";
        pstmt = conn.prepareStatement(sql);
        // 폼에 입력 된 데이터를 가져와서 db에 저장
        pstmt.setString(1, m.getId());
        pstmt.setString(2, m.getPasswd());
        pstmt.setString(3, m.getName());
        pstmt.setString(4, m.getEmail());
        pstmt.setString(5, m.getGender());
        // sql 실행
        pstmt.executeUpdate();
    } catch (SQLException e) {
        e.printStackTrace();
    } finally {
        JDBCUtil.close(conn, pstmt);
    }


5. 로그인 폼 - /loginform.do (-> /member/loginform.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>로그인 폼</title>
<link rel="stylesheet" href="resources/css/style.css">
</head>
<body>
	<jsp:include page="../header.jsp"/>
	<div id="container">
		<section id="login">
			<h2>로그인</h2>
			<form action="/login.do" method="post">
				<fieldset>
					<ul>
						<li>
							<label for="id">아이디</label>
							<input type="text" id="id" name="id" required>
						</li>
						<li>
							<label for="passwd">비밀번호</label>
							<input type="password" id="passwd" name="passwd" required>
						</li>		
					</ul>
				</fieldset>
				<div class="error">${error}</div>
				<div class="button">
					<button type="submit">로그인</button>
				</div>

			</form>
		</section>
	</div>
	<jsp:include page="../footer.jsp"/>
</body>
</html>


6. 로그인 처리 - /login.do - 세션 발급

// 로그인 인증
public boolean checkLogin(Member m) {
    try {
        conn = JDBCUtil.getConnection();
        String sql = "SELECT * FROM member WHERE id=? and passwd=?";
        pstmt = conn.prepareStatement(sql);
        pstmt.setString(1, m.getId());
        pstmt.setString(2, m.getPasswd());
        rs = pstmt.executeQuery();
        if(rs.next()) {
            return true;
        }
    } catch (SQLException e) {
        e.printStackTrace();
    } finally {
        JDBCUtil.close(conn, pstmt, rs);
    } 
    return false;
}


7. 로그아웃 - 세션 삭제

if(command.equals("/login.do")) { // 로그인 처리
			// 아이디, 비번 파라미터 받기
			String id = request.getParameter("id");
			String passwd = request.getParameter("passwd");
			// 빈 객체 생성 -> 아이디 비번 셋팅
			Member m = new Member();
			m.setId(id);
			m.setPasswd(passwd);
			// 로그인 인증
			boolean result = mDAO.checkLogin(m);
			if(result == true) {   // 결과가 true 이면 session 발급
				session.setAttribute("sessionId", id);
				// 로그인 후 페이지 이동
				nextPage = "/index.jsp";
			}else if(result == false) {   // 결과가 false일때 오류 처리
				// 에러 알림창 띄움
//				out.println("<script>");
//				out.println("alert('아이디나 비밀번호를 확인해주세요);");
//				out.println("history.back();");
//				out.println("</script>");
				String error = "아이디나 비밀번호를 다시 확인해주세요";
				request.setAttribute("error", error);
				// 에러 발생 후 페이지 이동
				nextPage = "/member/loginform.jsp";
			}
		}else if(command.equals("/logout.do")) {
			session.invalidate();   // 모든 세션 삭제
			nextPage = "/index.jsp";
		}




게시판
1. 게시글 목록 - /boardlist.do (-> /board/boardlist.jsp)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>게시글 목록</title>
<link rel="stylesheet" href="resources/css/style.css">
</head>
<body>
	<jsp:include page="../header.jsp"/>
	<div id="container">
		<section id="boardlist">
			<h2>게시글 목록</h2>
			<table>
				<thead>
					<tr>
						<th>글번호</th>
						<th>글제목</th>
						<th>작성일</th>
						<th>조회수</th>
						<th>작성자</th>
					</tr>
				</thead>
				<tbody>
					<c:forEach items="${boardList}" var="b">
						<tr>
						<!-- b.bno - b.getBno()와 같음 -->
							<td>${b.bno}</td>
							<!-- title를 클릭하면 상세보기로 이동함 -->
							<td><a href="/boardview.do?id=${b.title}">${b.title}</a></td>
							<td><fmt:formatDate value ="${b.createDate}" pattern="yyyy-MM-dd HH:mm:ss a"/></td>
							<td>${b.hit}</td>
							<td>${b.id}</td>
						</tr>
					</c:forEach>
				</tbody>
			</table>
			<!-- 글쓰기 버튼 -->
			<div>
				<a href="/writeform.do"><button type="button">글쓰기</button></a>
			</div>
		</section>
	</div>
	<jsp:include page="../footer.jsp"/>
</body>
</html>


2. 글쓰기 폼 페이지 - /writeform.do (->/board/writeform.jsp)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>글쓰기 폼</title>
<link rel="stylesheet" href="resources/css/style.css">
</head>
<body>
	<jsp:include page="../header.jsp"/>
	<div id="container">
		<section id="writeform">
			<h2>글쓰기</h2>
			<form action="/write.do" method="post">
				<table>
					<tbody>
						<tr>
							<td><input type="text" name="title" placeholder="글제목" required></td>
						</tr>
						<tr>
							<td>
								<textarea rows="7" cols="100" name="content" placeholder="글내용"></textarea>
							</td>
						</tr>	
						<tr>
							<td>
								<button type="submit">등록</button>
								<button type="reset">작성 취소</button>
							</td>				
						</tr>
					</tbody>
				</table>
			
			
			</form>
		</section>
	</div>
	<jsp:include page="../footer.jsp"/>
</body>
</html>


3. 글쓰기 - /write.do 

if (command.equals("/write.do")) {
			// 폼 데이터 닫기
			String title = request.getParameter("title");
			String content = request.getParameter("content");
			// 세션 가져오기(id)
			String id = (String)session.getAttribute("sessionId");
			// db에 저장
			Board b = new Board();
			b.setTitle(title);
			b.setContent(content);
			b.setId(id);
			// write()호출, 실행
			bDAO.write(b);
			
			nextPage = "/board/boardlist.jsp";
		}

 

* CSS

@charset "UTF-8";
/* 공통 스타일 */
* {margin: 0; padding: 0;}
#container {width: 90%; margin: 30px auto 100px;}
ul li {list-style: none;}
a {text-decoration: none;}

/* 상단메뉴 - header 스타일 */
header {height: 80px; background: #99f;}
header #logo {width: 20%; float: left; line-height: 80px;}
#logo h1 a {color: #df9; padding-left: 24px; font-style: italic;}
#logo h1 a:hover {color: #eee;}
header nav {width: 70%; float: right;}
#topMenu {line-height: 80px;}
#topMenu li {float: left; margin: 0 20px;}
#topMenu li a {color: #fee; padding: 0 20px;}
#topMenu li a:hover {color: #444;}

/* main 스타일 */
#main {margin: 0 auto; text-align: center;}
#main .main_img {margin: 20px; }
#main .main_img img {border-radius: 5px; width: 400px; height: 500px;}

/* 하단메뉴 - footer 스타일 */
footer {height: 80px; border-top: 2px solid #222;}
#bottomMenu {margin: 10px 20px;}
#bottomMenu li {float: left; 
				margin: 10px 0;
				padding: 0 10px; 
				border-right: 1.5px solid #aaa;
				}
#bottomMenu li a {color: #444;}
#bottomMenu li:last-child{border: none;}

/* 회원 목록 스타일 */
#memberlist {width: 750px; margin: 20px auto;}
#memberlist table {width: 750px; margin: 20px auto;}
#memberlist table, th, td {border: 1px solid #ccc; 
						   border-collapse: collapse;
						   text-align: center;}
table th, td {padding: 10px;}
table thead {background: #eee;}
#memberlist .logout {text-align: right;}

/* 회원 가입 스타일 */
#join {width: 500px; margin: 20px auto;}
#join form {margin: 20px auto;}
#join form ul li {margin: 20px}
form fieldset {margin-bottom: 16px;}
form button {padding: 5px;}
form label {width: 120px; float: left; padding-left: 20px;}
form input {padding: 5px;}

/* 회원 정보 스타일 */
#memberview {width: 450px; margin: 20px auto;}
#memberview table {width: 450px; margin: 20px auto;}
#memberview table, th, td {border: 1px solid #ccc; 
						   border-collapse: collapse;
						   text-align: center;}
table th, td {padding: 10px;}

/* 로그인 스타일 */
#login {width: 400px; margin: 30px auto 100px;}
#login form {margin: 30px auto;}
#login form ul li {margin: 30px}
form button {width: 100%; padding: 10px 0;}
form label {width: 120px; float: left; padding-left: 20px;}
form input {padding: 5px;}
#login .error{color: #b00; margin-top: 16px; font-size: 0.9rem;}

/* 게시글 목록 스타일 */
#boardlist {width: 750px; margin: 20px auto;}
#boardlist table {width: 750px; margin: 20px auto;}
#boardlist table, th, td {border: 1px solid #ccc; 
						   border-collapse: collapse;
						   text-align: center;}
table th, td {padding: 10px;}
table thead {background: #eee;}
#boardlist button {padding: 10px;}

/* 글작성 스타일 */
#writeform {width: 600px; margin: 20px auto;}
#writeform table {width: 600px; margin: 20px auto;}
#writeform table, th, td {border: 1px solid #ccc; 
						   border-collapse: collapse;
						   text-align: center;}
#writeform input {width: 600px; height: 25px; padding: 5px;}
#writeform textarea{width: 600px; resize: none; overflow-y: scroll auto ;}
table th, td {padding: 10px;}
table thead {background: #eee;}
#writeform button {width: 50%; padding: 10px; float: left;}

 

 

 

 

 

 

 

2023. 11. 30 (목)

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

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

프로그래머 도전기 78일차  (0) 2023.12.02
프로그래머 도전기 77일차  (0) 2023.12.01
프로그래머 도전기 75일차  (2) 2023.11.28
프로그래머 도전기 74일차  (1) 2023.11.27
프로그래머 도전기 73일차  (4) 2023.11.23

관련글 더보기

티스토리툴바