업데이트: October 16, 2020 Show JSP 게시판 웹 사이트 만들기웹사이트 만들어 보신 적 있으신가요?훌륭한 예제를 통해, JSP 공부 겸, 간단한 웹사이트를 만들어 볼 수 있습니다. 저 역시 동빈나님의 유튜브를 보고, 개념을 잡을 수 있었습니다. 또한 매 강의에 대한, 코드를 반영해 놓았습니다. 영상을 보시면서, 아래 글을 참조하시면, 쉽게 따라 가실 수 있습니다. 저작권은 동빈나님에게 있으며, 훌륭한 강의 감사드립니다.
로그인 페이지를 구현 합니다. input 타입으로, 아이디와 비밀번호 입력 받으며, 로그인 버튼을 만드는 화면을 구성해 보겠습니다. [login.jsp]
상단 네비바를 구성 하고, 아이디/비밀번호를 입력 받으면, LoginAction.jsp 화면으로 값을 전달 하게 됩니다.
[loginAction.jsp]
Mysql DB에 접근하는, UserDAO를 jsp 파일에서 사용하기 위해, import 한다.
JavaScript를 사용하기 위해, PrintWriter를 선언한다.
넘어오는 모든 데이터를 UTF-8로 변환하게 한다.
현재 페이지 안에서, User 빈즈를 사용할 수 있게 한다. login.jsp 화면에서 입력한 값이, User 빈즈에 담기게 된다.
[UserDAO.java]
login 메서드가 호출 되면, userID로 query를 하고, userPassword와 일치하는지 확인 합니다.
회원가입 페이지를 구성 하였습니다. [join.jsp]
아이디/비밀번호/이름/성별/이메일를 입력 받으면, joinAction.jsp 화면으로 값을 전달 하게 구성하였습니다.
회원 가입 정보가 데이터 베이스에 저장 될 수 있게 구현 합니다. [UserDAO.java]
User의 정보를 SQL DB에 넣을 수 있게, join 메서드를 구현합니다. [joinAction.jsp]
join.jsp 에서 입력 받은 User 정보를 UserDAO의 join 메서드로 값을 전달합니다.
현재 접속한 회원에 고유의 아이디를 할당해 줍니다. 웹서버가 로그인에 성공한 유저를 세션 아이디로 관리 할 수 있게 합니다. [loginAction.jsp]
로그인에 성공하였다면, setAttribute을 이용하여, userID를 세션에 할당해 줍니다. [logoutAction.jsp]
logoutAction 페이지를 호출하면, session.invalidate()를 하여, logout를 할 수 있게 합니다.
게시판 테이블의 테이블 헤드 및 내용이 표시 될 레이아웃을 구성합니다. [bbs.jsp]
테이블해드로 테이블의 목차를 구성하며, 테이블바디에 내용을 넣었습니다.
글 제목 및 내용을 입력 받고, 글쓰기 버튼 클릭하면, DB에 저장 되게 구현 합니다. [writeAction.jsp]
[BbsDAO.java]
글 제목과 글 내용을 입력한 후 글쓰기 버튼을 누르면, DB에 값이 저장 된 것을 확인 할 수 있습니다.
게시판의 글 목록 입니다. 목록이 10개 이상이 되면, 다음 페이지로 이동 할 수 있는 버튼이 활성화 됩니다. [bbs.jsp]
getList()로 bbsId, bbsTitle, userID, bbsContent, bbsAvailable 정보를 DB로 부터 가지고와서, 게시판 목록에 보여 줍니다. [BbsDAO.java]
게시판 등록 된 글에 대한 상세내역을 보기 기능을 구현 합니다. [bbs.jsp]
글의 제목이 클릭되면, bbsID를 view.jsp로 이동하게 하였습니다. [view.jsp]
작성 된 글(글제목, 작성자, 작성일자, 내용)을 보여 주기 위한, 레이아웃을 구성 합니다. 현재 유저가, 글쓴이와 같다면, 수정/삭제 버튼을 보여 줍니다. [BbsDAO.java]
게시되어 있는 글을 수정 및 삭제하는 기능을 구현합니다. [update.jsp]
글수정 버튼 클릭 시, bbsID를 updateAction.jsp에 전달 합니다. [updateAction.jsp]
bbsTitle, bbsContent를 update 메서드로 전달하여, DB에 업데이트 합니다. [BbsDAO.java]
[view.jsp]
삭제 버튼 클릭 시 다이어로그 팝업이 발생하여, 글 삭제 여부를 확인한다.
웹 사이트의 메인 페이지를 구성합니다. 소개글이 있고, 하단에 사진이 보여지게 구현합니다. [main.jsp]
source전체 소스 : GitHub Reference
|