모험가의 끄적노트/진행했던 프로젝트

JSTL 및 태그를 이용_JSP 게시판 만들기

DevChw 2022. 6. 21. 00:37

본 글은 혼잣말 위주로 작성되었습니다.

 

간단한 JSP 게시판 만들기!


블로그를 작성하고자 하고 마음을 먹은 지 어엿 몇 개월이 지난 후에야 드디어 끄적여보는 첫 게시물은 간단한 JSP 게시판을 만들어 보는 것이 되겠다. 사실 필자는 개발에 대해서는 위 사진 거북이처럼 아담하고 귀엽고 소중한 상태인데 이렇게 끄적이는 게 언젠간 나에게 도움이 될 것 같아 이렇게 작성하게 되었다.

 

아무튼 첫 번째 모험은 JSP를 이용한 게시판 생성인데 이 프로젝트를 진행하면서 정말 기초적인 부분이 많지만 JSP에 모르는 부분이 많아서 사실 끙끙댔었다. 물론 뚝딱뚝딱하기까지는 많은 시간이 걸린 건 아니지만 그래도 어느 정도 노력을 한 부분이 있기에 내 입장에서는 상당히 뿌듯함과 성취감을 느꼈지만 누가 보기에는 그냥 웃음밖에 안 나오겠지,,

 

이 모험의 경우 학습의 과제였기 때문에 코드를 공개하기보다는 어떤 기술과 스타일이 적용되었는지 위주로 설명해보도록 하겠다.

 

.. 서론이 너무 길었다 이제 본론으로 들어가 보자!

 


나같이 개발능력이 아담하고 귀여운 사람들이 놓치는 포인트

 

데이터베이스의 경우 MYSQL을 통하여 작성하였는데 필자가 개발 중 세상 가장 어이없던 실수는 서버를 켜지 않고 자꾸 이클립스 내에서 RUN을 해서 500번대 오류가 떴던 건데, 정말 귀여운 개발실력임을 인증하는 사례였다.


게시판을 개발하기 위하여 사용했던 개발 툴은 이클립스였으며 위에 서술한 대로 DB는 [MYSQL]을 사용하였고 이를 JSP에 연결하기 위해서 [JDBC]를 통해 연동해주었으며 당연히 [JSTL] 사용을 위한 라이브러리를 넣어주었다. 간단한 함수 실행을 위해 [JavaScript] 또한 사용하였고 서버는 [Apache Tomcat v8.5]를 사용하였다.

 

설치한 라이브러리

 

JSTL 라이브러리 및 JDBC 연동을 위해 [ jstl, mysql-Connector_8.0.25 버전, Standard 라이브러리]를 lib 폴더에 넣어주었다.

이클립스를 통한 JSP 학습을 통해 느낀 점은 생각보다 개발하기 전 설정해줘야 하는 게 많다는 것이었는데, 물론 이 부분은 내가 귀엽고 아담한 개발자이기 때문에 그렇게 느낀 것 일수도 있다. 저런 라이브러리를 설치하면서 어떻게 해야 할지 몰라서 허둥지둥 됐던 것도 그렇고,, 이러면서 배워가는 게 아닐까? 그렇다고 해주자.

 

 

 

자바빈즈 사용을 위한 클래스 파일 구성

JSP의 꽃을 피우기 위한 씨앗들의 구성을 살펴보자면 2개의 패키지와 4개의 클래스 파일들로 구성되어있다. data 패키지의 경우에는 JDBC를 이용하여 MYSQL을 사용하기 위한 커넥터 역할을 해주는 DatabaseUtil 클래스가 있으며 SimpleDateFormat을 이용한 날짜 출력을 위해 만든 Datedata 클래스가 존재한다.

 

아래 notice 패키지는 받아올 사용자의 정보와 게시글 등을 가져오기 위하여 getters/setters로 이루어진 NoticeInfo 클래스, 그리고 MYSQL을 이용하여 데이터들을 처리하기 위한 NoticeSql 클래스로 작성되어있다. NoticeSql에 존재하는 메소드들로 데이터들을 처리하는데 구성을 간단하게 서술해보자면, Connection, PreparedStatement을 이용한 변수를 선언해 SQL을 연결해준 후 데이터들을 연결 후 서버 연결 및 종료, 작성자의 정보 등록, 게시글 추가 , 삭제, 업데이트, 패스워드 확인 등의 메소드들을 만들어 주었다.

 

 

Mysql에 생성해둔 테이블 구조

페이지를 통해 받을 값들은 게시글의 번호를 나타내는 id값과 각각 이름, 비밀번호, 게시글 제목, 전자메일, 작성 날짜, 글의 내용이 되겠다.

id 값의 경우 게시글의 번호이기에 1번부터 자동 증가를 위한 AUTO_INCREMENT를 설정해주었다. 이 부분은 보완할 점이 필요한 것이 자동증가된 값이 sql문을 이용하여 게시글 삭제를 할 경우 자동 하락을 하지 않는다는 점인데 그렇다 보니 2번째 게시물이 존재하는 상태에서 3번째 게시물을 삭제를 하고 게시글을 작성하면 2번째 게시물에서 바로 4번째 게시물로 넘어가게 된다. 이러한 부분은 나중에 더 공부해보도록 하자.

 

 

JSP 파일 구조

 

다음으로는 JSP 파일 구조에 대해 알아보도록 하자 ! 현재 게시글의 목록들을 보여줄 noticeList.jsp와 Parameter 값을 이용하여 정보를 처리해줄 noticeInfo.jsp, 게시글의 내용을 알려줄 noticeContent.jsp, 게시글의 작성 및 수정을 하는 페이지인 noticeEdit.jsp로 총 4가지 jsp 파일로 구성되어있으며 간단한 함수를 처리해줄 noticeScript.js라는 자바 스크립트 파일 1개가 있다.

 

필요에 따라 자바빈즈를 이용하여 클래스를 연결해주고 지시자를 통해 필요한 클래스들을 import 해주었다. 위에 서술했듯이 이는 학습의 과제였기에 코드 공개는 따로 하지 않겠다.

 

 


 

게시글을 입력하지 않았을 경우 나타나는 noticeList.jsp

 

게시글이 존재하지 않을 경우 DB가 당연히 존재하지 않기에 게시글 리스트가 나타나 있지 않고 JSTL SET을 이용하여 count를 값으로 받아주고 이를 JSTL IF를 통해 [게시글이 현재 없습니다.]라는 테이블이 표시되게끔 구현되어있는 상태이다. 아직 게시글이 작성되지 않은 상태이기에 게시글 작성하기 버튼을 눌러서 게시글을 하나 만들어보도록 하자.

 

noticeEdit.jsp

 

이름과 이메일을 입력받고 제목 및 글의 내용, 그리고 수정 및 삭제를 위한 비밀번호까지 입력을 받은 후 어떠한 버튼이 눌렸냐에 따라 noticeScript.js로 넘어가 함수를 실행 후에 noticeInfo.jsp로 넘어가 mysql에 데이터 베이스로 저장되는 구조를 가지고 있다. 또한 게시글 작성하기가 아닌 수정을 했을 경우 버튼은 등록, 취소가 아닌 수정, 삭제, 취소로 나누어져 있다. 그렇다면 게시글을 작성 후 noticeList가 어떻게 변화하는지 보도록 하자!

게시글이 작성된 후의 noticeList.jsp

게시글이 작성되면 위의 [게시글이 현재 없습니다.]라는 테이블이 사라지고 공지사항이 생기게 되는데 이 역시 JSTL IF를 통해 작동되고 있다. 테이블을 생성 시에 id값에 AUTO_INCREMENT를 설정해두었기에 자동으로 1번 게시물이 된 것을 볼 수 있고 작성일자 정보 또한 잘 가지고 왔으며 입력받은 값들이 정확하게 게시글에 구현되어 있는 것을 확인할 수 있다. 

 

이제 여기서 게시물 번호를 클릭하게 되면 noticeEdit.jsp로 넘어가게 되는데 이때 mysql을 이용하여 jsp 페이지에 해당 번호의 게시글 정보를 넘겨주기에 수정 및 삭제가 가능하게 된다.

 

또한 제목을 클릭하게 될 시 게시글의 제목 및 내용을 확인할 수 있는 간단한 테이블로 이루어진 noticeContent.jsp로 넘어가게 된다.

noticeContent.jsp

 

위의 이미지처럼 제목과 작성자 및 게시글의 내용을 확인할 수 있는 간단한 테이블로 이루어진 jsp 페이지가 나타나게 되며 메인화면으로 버튼을 클릭하였을 경우 메인 페이지인 noticeList.jsp로 넘어가게 된다.


이로써 간단한 게시판을 JSP로 구현해보았다. 사실은 코드도 세세하게 다루면서 주석과 함께 블로그에 기술하고 싶었지만 벌써 몇 번째 말하는지 모르겠는 학습 과제이기에 이 부분에 대해 자세한 설명을 하지 못한 게 아쉽다. 하지만 프로젝트의 구조를 대충 살펴보고 흐름도 및 간단한 설명을 통해 간단하게 설명을 해보았는데 첫 게시물이어서 그런지 나도 내가 잘 쓰고 있는지도 모르겠다. 

 

본인이 지향하는 기술 쪽은 역시 백엔드이다 보니 이런 웹 프로그래밍을 다루게 되면 시간 가는 줄 모르게 코딩하면서 해냈을 때의 희열감 또한 상당히 기분이 좋다. 나중에 JSP를 얼마나 다루게 될진 모르겠지만 이러한 기초적인 부분을 탄탄히 가져가는 게 나중에 기본적인 웹페이지를 만들 때에도 도움이 될 것 같아 열심히 배워두는 것이 좋을 것 같다.

 

너무 갑자기 끝내는 느낌이 없지 않아 있지만 이제 저는 물러나 보도록 하겠습니댜.. *-*