[Board] 화면구현 : 게시글 목록, 상세조회, 수정 [Start Bootstrap : SB Admin 테마 적용]

2022. 3. 16. 21:31·◈ Human Project/Custom : Board📖
728x90


 

[Board] 웹 페이지 화면구현 틀 구축하기[JSP를 활용한 게시글 목록조회, 상세조회 구현]

[Board] 게시판 관련 DB 서버로 이관하기[DB 서버용 계정 생성, Connection 적용] [Board] MVC 디자인 패턴, 싱글턴(Singleton) 적용[콘솔 출력에서 웹 페이지 출력으로 변경하기] [Board] DB 연동 : 게시글 세부..

yermi.tistory.com


- Bootstrap 무료 테마 사이트

 

[꿀팁] Bootstrap 무료 테마 사이트[Start Bootstrap : Free Bootstrap themes, Templates and UI tools]

- Start Bootstrap : Bootstrap 무료 테마 사이트 Free Bootstrap Themes, Templates, Snippets, and Guides - Start Bootstrap Landing Page A clean, functional landing page theme startbootstrap.com

yermi.tistory.com

1. 게시글 목록조회 페이지

- list.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 lang="ko">
<head>
<%@ include file="../common/head.jsp"%>
</head>
<body class="sb-nav-fixed">
	<%@ include file="../common/nav.jsp"%>
	<main class="mt-5 pt-5">
	<div class="container-fluid px-4">
		<h1 class="mt-4">Board</h1>

		<div class="card mb-4">
			<div class="card-header">
				<a class="btn btn-primary float-end" href="register"> <!-- <i class="fas fa-table me-1"></i> -->
					<i class="fas fa-edit"></i> 글 작성
				</a>
			</div>
			<div class="card-body">
				<table class="table table-hover table-striped">
					<thead>
						<tr>
							<th>글번호</th>
							<th>제목</th>
							<th>작성자</th>
							<th>조회수</th>
							<th>작성일</th>
						</tr>
					</thead>
					<tbody>
						<c:forEach items="${boards}" var="board">
							<tr>
								<td>${board.bno}</td>
								<td><a href="get?bno=${board.bno} ">${board.title}</a></td>
								<td>${board.writer}</td>
								<td>${board.hitCount}</td>
								<td>${board.regDate}</td>
							</tr>
						</c:forEach>
					</tbody>
				</table>
			</div>
		</div>
	</div>
	</main>
	<%@ include file="../common/footer.jsp"%>
</body>
</html>

 

게시글 목록조회 페이지 / 적용테마 : SB Admin


2. 게시글 상세조회 페이지

- get.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 lang="ko">
<head>
<%@ include file="../common/head.jsp"%>
</head>
<body class="sb-nav-fixed">
	<%@ include file="../common/nav.jsp"%>
	<main class="mt-5 pt-5">
	<div class="container-fluid px-4">
		<h1 class="mt-4">Board</h1>
		<div class="card mb-4">
			<div class="card-body">
				<form>
					<div class="mb-3 mt-3">
						<label for="bno" class="form-label">bno</label> <input type="text"
							class="form-control" id="bno" name="bno" value="${board.bno}"
							disabled>
					</div>
					<div class="mb-3">
						<label for="title" class="form-label">title</label> <input
							type="text" class="form-control" id="title" name="title"
							value="${board.title}" disabled>
					</div>
					<div class="mb-3">
						<label for="content" class="form-label">content</label>
						<textarea class="form-control" id="content" name="content"
							disabled>${board.content}</textarea>
					</div>
					<div class="mb-3">
						<label for="regDate" class="form-label">regDate</label> <input
							type="text" class="form-control" id="regDate" name="regDate"
							value="${board.regDate}" disabled>
					</div>
					<div class="mb-3">
						<label for="writer" class="form-label">writer</label> <input
							type="text" class="form-control" id="writer" name="writer"
							value="${board.writer}" disabled>
					</div>
					<a href="list" class="btn btn-outline-secondary">list</a> <a
						href="modify?bno=${board.bno}" class="btn btn-outline-warning">modify</a>
					<a href="remove?bno=${board.bno}" class="btn btn-outline-danger"
						onclick="return confirm('삭제하시겠습니까?')">remove</a>
				</form>
			</div>
		</div>
	</div>
	</main>
	<%@ include file="../common/footer.jsp"%>
</body>
</html>

 

게시글 상세조회 페이지 / 적용테마 : SB Admin


3. 게시글 수정 페이지

- controller.board.Modify.java

package controller.board;

import java.io.IOException;

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 domain.Board;
import service.BoardService;

@WebServlet("/board/modify")
public class Modify extends HttpServlet {
	private BoardService boardService = BoardService.getInstance();

	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		Long bno = Long.parseLong(req.getParameter("bno"));
		req.setAttribute("board", boardService.get(bno));
		req.getRequestDispatcher("/WEB-INF/jsp/board/modify.jsp").forward(req, resp);
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		req.setCharacterEncoding("utf-8");
		String title = req.getParameter("title");
		String content = req.getParameter("content");
		String bno = req.getParameter("bno");
		
		Board board = new Board(Long.parseLong(bno), title, content, null);
		boardService.modify(board);
		resp.sendRedirect("list");
	}
}

- service.BoardService.java

// 글 수정
public void modify(Board board) {
    boardDao.modify(board);
}

- dao.BoardDao.java

public void modify(Board board) {
    try {
        Connection conn = DBConn.getConnection();

        // 문장 생성
        String sql = "UPDATE TBL_BOARD SET\r\n" + 
                "TITLE = ?,\r\n" + 
                "CONTENT = ?,\r\n" + 
                "REGDATE = SYSDATE\r\n" + 
                "WHERE BNO = ?";
        PreparedStatement pstmt = conn.prepareStatement(sql);

        // 파라미터 바인딩
        pstmt.setString(1, board.getTitle());
        pstmt.setString(2, board.getContent());
        pstmt.setLong(3, board.getBno());

        // 문장 실행(반영)
        pstmt.executeUpdate();

    } catch (Exception e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }
}

- modify.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 lang="ko">
<head>
<%@ include file="../common/head.jsp"%>
</head>
<body class="sb-nav-fixed">
	<%@ include file="../common/nav.jsp"%>
	<main class="mt-5 pt-5">
	<div class="container-fluid px-4">
		<h1 class="mt-4">Board</h1>
		<div class="card mb-4">
			<div class="card-body">
				<form method="post">
					<div class="mb-3 mt-3">
						<label for="bno" class="form-label">bno</label> <input type="text"
							class="form-control" id="bno" name="bno" value="${board.bno}"
							readonly>
					</div>
					<div class="mb-3">
						<label for="title" class="form-label">title</label> <input
							type="text" class="form-control" id="title" name="title"
							value="${board.title}">
					</div>
					<div class="mb-3">
						<label for="content" class="form-label">content</label>
						<textarea class="form-control" id="content" name="content">${board.content}</textarea>
					</div>
					<div class="mb-3">
						<label for="regDate" class="form-label">regDate</label> <input
							type="text" class="form-control" id="regDate" name="regDate"
							value="${board.regDate}" disabled>
					</div>
					<div class="mb-3">
						<label for="writer" class="form-label">writer</label> <input
							type="text" class="form-control" id="writer" name="writer"
							value="${board.writer}" disabled>
					</div>
					<a href="list" class="btn btn-outline-secondary">list</a>
					<button class="btn btn-outline-warning">modify</button>
				</form>
			</div>
		</div>
	</div>
	</main>
	<%@ include file="../common/footer.jsp"%>
</body>
</html>

 

게시글 수정 페이지 / 적용테마 : SB Admin
게시글 수정 기능 적용 완료!

 

[Board] 화면구현 : 게시글 등록, 삭제, 회원가입[Start Bootstrap : SB Admin 테마 적용]

[Board] 화면구현 : 게시글 목록, 상세조회, 수정[Start Bootstrap : SB Admin 테마 적용] [Board] JSP : 게시글 목록조회, 상세조회 적용[controller, dao, service, jsp] [Board] 게시판 관련 DB 서버로 이관하..

yermi.tistory.com

728x90
'◈ Human Project/Custom : Board📖' 카테고리의 다른 글
  • [Board] 화면구현 : 로그인, 로그아웃 [Start Bootstrap : SB Admin 테마 적용]
  • [Board] 화면구현 : 게시글 등록, 삭제, 회원가입 [Start Bootstrap : SB Admin 테마 적용]
  • [Board] 웹 페이지 화면구현 틀 구축하기 [JSP를 활용한 게시글 목록조회, 상세조회 구현]
  • [Board] 게시판 관련 DB 서버로 이관하기 [DB 서버용 계정 생성, Connection 적용]
예르미(yermi)
예르미(yermi)
끊임없이 제 자신을 계발하는 개발자입니다👨🏻‍💻
  • 예르미(yermi)
    예르미의 코딩노트
    예르미(yermi)
  • 전체
    오늘
    어제
    • 분류 전체보기 (937)
      • ◎ Java (133)
        • Java☕ (93)
        • JSP📋 (26)
        • Applet🧳 (6)
        • Interview👨🏻‍🏫 (8)
      • ◎ JavaScript (48)
        • JavaScript🦎 (25)
        • jQuery🌊 (8)
        • React🌐 (2)
        • Vue.js🔰 (6)
        • Node.js🫒 (3)
        • Google App Script🐑 (4)
      • ◎ HTML5+CSS3 (17)
        • HTML5📝 (8)
        • CSS3🎨 (9)
      • ──────────── (0)
      • ▣ Framework (67)
        • Spring🍃 (36)
        • Spring Boot🍀 (12)
        • Bootstrap💜 (3)
        • Selenium🌕 (6)
        • MyBatis🐣 (10)
      • ▣ Tools (47)
        • API🎯 (18)
        • Library🎲 (15)
        • JitPack🚀 (3)
        • Jenkins👨🏻 (7)
        • Thymeleaf🌿 (4)
      • ▣ Server (32)
        • Apache Tomcat🐱 (14)
        • Apache HTTP Server🛡️ (1)
        • Nginx🧶 (7)
        • OracleXE💿 (4)
        • VisualSVN📡 (4)
      • ▣ OS : 운영체제 (18)
        • cmd : 명령프롬프트💻 (10)
        • Linux🐧 (8)
      • ▣ SQL : Database (56)
        • Oracle SQL🏮 (26)
        • PL SQL💾 (9)
        • MySQL🐬 (6)
        • MariaDB🦦 (6)
        • H2 Database🔠 (3)
        • SQL 실전문제🐌 (6)
      • ────────── (0)
      • ◈ Human Project (86)
        • Mini : Library Service📚 (15)
        • 화면 설계 [HTML]🐯 (10)
        • 서버 프로그램 구현🦁 (15)
        • Team : 여수어때🛫 (19)
        • Custom : Student🏫 (9)
        • Custom : Board📖 (18)
      • ◈ Yermi Project (40)
        • 조사모아(Josa-moa)📬 (5)
        • Riddle-Game🧩 (6)
        • 맛있을 지도🍚 (2)
        • 어디 가! 박대리!🙋🏻‍♂️ (5)
        • 조크베어🐻‍❄️ (4)
        • Looks Like Thirty🦉 (2)
        • Toy Project💎 (12)
        • 오픈소스 파헤치기🪐 (4)
      • ◈ Refactoring (15)
        • Mini : Library Service📚 (8)
        • 서버 프로그램 구현🦁 (1)
        • Team : 여수어때🛫 (0)
        • 쿼리 튜닝일지🔧 (6)
      • ◈ Coding Test (89)
        • 백준(BOJ)👨🏻‍💻 (70)
        • 프로그래머스😎 (2)
        • 코드트리🌳 (7)
        • 알고리즘(Algorithm)🎡 (10)
      • ◈ Study (102)
        • 기초튼튼 개발지식🥔 (25)
        • HTTP 웹 지식💡 (4)
        • 클린코드(Clean Code)🩺 (1)
        • 디자인패턴(GoF)🥞 (12)
        • 다이어그램(Diagram)📈 (4)
        • 파이썬(Python)🐍 (16)
        • 에러노트(Error Note)🧱 (34)
        • 웹 보안(Web Security)🔐 (6)
      • ◈ 공부모임 (39)
        • 혼공학습단⏰ (18)
        • 코드트리 챌린지👊🏻 (2)
        • 개발도서 100독👟 (8)
        • 나는 리뷰어다🌾 (11)
      • ◈ 자격증 공부 (37)
        • 정보처리기사🔱 (16)
        • 정보처리산업기사🔅 (9)
        • 컴퓨터활용능력 1급📼 (12)
      • ─────────── (0)
      • ◐ 기타 (113)
        • 알아두면 좋은 팁(tip)✨ (46)
        • 개발자의 일상🎈 (44)
        • 개발도서 서평🔍 (10)
        • 개발관련 세미나🎤 (2)
        • 블로그 꾸미기🎀 (9)
        • 사도신경 프로젝트🎚️ (2)
  • 인기 글

  • 최근 댓글

  • 태그

    코딩
    Database
    CSS
    BOJ
    Oracle
    html
    백준
    일상
    자바스크립트
    spring
    SQL
    Error Note
    프로그래밍
    Java
    코딩 테스트
    백준 티어
    jsp
    javascript
    꿀팁
    Project
  • 250x250
  • hELLO· Designed By정상우.v4.10.3
예르미(yermi)
[Board] 화면구현 : 게시글 목록, 상세조회, 수정 [Start Bootstrap : SB Admin 테마 적용]
상단으로

티스토리툴바