지능웹설계 프로젝트 "스타듀밸리 팬 페이지"

3학년 2학기 지능웹설계 과목의 텀프로젝트 결과물을 소개하겠다.

지능웹설계에서는 jsp를 이용한 웹 페이지 구성, 서버 연결, 데이터베이스 연결을 다뤘다.

​

학기 중에 배운 내용들을 모두 활용해야하는 개인 프로젝트의 주제는 자유였으며,

나는 내가 가장 좋아하는 게임인 스타듀밸리의 팬 페이지를 주제로 프로젝트를 진행했다.

 

프로젝트는 Eclipse에서 Dynamic Web Project를 생성하여 개발을 진행하였고

JSP를 기반으로 만들었으며 css는 부트스트랩을 활용했고 데이터베이스는 MySQL과 연결했다.

실제 서버에 등록하진 않았고 Tomcat을 이용해서 로컬 호스트 상에서 실행시킬 수 있는 상태까지 개발했다.

​

메인 화면

​

웹 페이지의 기본 틀은 상단에 메뉴바가 있고 중앙에 웹 페이지의 내용이 있다.

메뉴바를 보면 메인 화면 / 캐릭터 소개 / 커뮤니티 / 마이페이지 / 사이트 평가 / 로그인 및 회원가입 기능이 있다.

 

다국어 처리

​

화면 왼쪽, 오른쪽에 있는 주니모 (사과 캐릭터) 들이 있는데

왼쪽 주니모는 한국어로, 오른쪽 주니모는 영어로 사이트 번역을 해준다.

 

회원가입

​

메뉴바 오른쪽에 있는 회원가입 버튼을 클릭하면 회원가입 폼으로 이동하게 된다.

아이디, 비밀번호에 대해서는 유효성 검사를 거치게 된다.

​

​

​

회원가입 직후에는 로그인 폼을 거치지 않고 바로 로그인을 할 수 있다. (쿠키 이용)

 

캐릭터 소개

​

스타듀밸리 팬 페이지인만큼, 게임에 대한 정보를 사이트에서 제공하면 좋겠다고 생각했고

간단하게 캐릭터 소개 페이지만 만들었다.

 

캐릭터 정보 수정

​

캐릭터 정보를 수정하기 위해서는 관리자 로그인이 필요하다.

이것은 팬 페이지 사용자 로그인과는 별개로 이루어진다.

​

​

​

캐릭터 정보 수정 완료 화면이다.

 

커뮤니티 공간

​

팬 페이지에서는 유저들간의 소통이 원활하게 이루어져야한다고 생각했다.

그래서 각 유저들이 자신의 플레이 내용을 공유할 수 있도록

게시물을 작성하고 확인하는 기능을 제공한다.

​

​

​

저 스크린샷은 내가 직접 찍은 플레이 장면인데 가을에 심은 호박 중 거대 호박이 2개나 자랐다.

게시물에는 제목, 내용, 작성자, 작성일, 사진이 나와있다.

​

​

​

그리고 해당 게시물에 다른 사람들도 댓글을 등록하여 소통할 수 있다.

 

댓글 등록 및 삭제

​

본인이 등록한 댓글 옆에는 빨간색 X버튼이 있는데

이 버튼을 클릭하면 댓글을 삭제할 수 있다.

댓글 작성은 로그인한 사용자만 가능하다.

 

게시물 작성

​

게시물 작성 역시 로그인한 사용자만 이용 가능하고

제목, 내용, 이미지 파일을 첨부하면 된다.

​

​

​

게시물이 등록된 모습이다.

 

마이페이지

​

사용자 로그인을 한 상태라면 마이페이지에서 자신이 작성한 게시물과 댓글을 확인할 수 있다.

게시물 제목과 댓글 내용을 클릭하면 관련 게시물로 바로 이동한다.

 

사이트 평가

​

사이트 평가는 게시물의 댓글 등록하는 것과 거의 유사하다.

실제로 운영되는 사이트는 아니지만, 팬 페이지를 만든다면

운영자와 이용자들간의 원활한 소통과 피드백이 이루어져야 한다고 생각해서 만든 메뉴이다.

---

프로젝트를 자체 평가하자면 큰 스케일로, 디테일을 많이 살리지 못해서 조금 아쉬운 느낌이 있다.

그래도 학기 내내 배운 JSP 내용들을 총 집합하여 웹 페이지를 구성했다는 점,

MySQL 데이터베이스를 이클립스에 연결하여 DB를 이용한 첫 개발이라 의미가 있는 웹 개발 프로젝트였다.

 

https://github.com/askges20/StardewValleyFanPage

askges20/StardewValleyFanPage

⬆ 해당 프로젝트는 GitHub에 소스 코드를 업로드하였다.