스폰지밥 커뮤니티 웹 사이트 "바닷속 이야기" (1)

Jiyeon Jeong·2021년 7월 15일
0
post-thumbnail

서론

스폰지밥 커뮤니티 웹 사이트인 "바닷속 이야기"는 애니메이션인 "네모바지 스폰지밥"관련 소개와 등장인물을 소개하고 본 애니메이션을 즐겨보는 애청자들과 소통을 할 수 있게끔 게시판을 생성하여 커뮤니케이션이 가능한 웹 사이트이다.

웹 사이트 시작시 기본적인 화면은 위와 같다. 웹 사이트에 대한 상세한 설명은 아래에서 따로 설명하도록 하겠다.


전체 구성도


웹 사이트의 전체 구성도는 위의 화면과 같다. 웹 사이트의 정보 및 사용자들의 정보 등은 모두 데이터베이스에서 처리하였다. 웹 사이트의 목록을 살펴보면 "메인 화면", "프로그램 소개", "등장인물 소개", "정보 나눔", "로그인/로그아웃"으로 나누어져 있다. 웹 사이트의 사용자들은 목록을 선택하여 사이트와 상호작용할 수 있다.



화면 설계

1. UI Design


웹 사이트에 접속하면 기본적으로 뜨게 되는 화면이다. 이는 로그인을 하지 않았을 시 뜨는 화면이며, 로그인을 진행하게 되면 우측 상단에 "OO님 환영합니다!"라는 문구가 출력된다. 또한, 로그인 메뉴가 로그아웃 메뉴로 변경되어 있다.


그리고 인터넷의 Title은 "바닷속 이야기 - 스폰지밥 커뮤니티"라고 지정하였고, 아이콘도 따로 지정하여 출력되게 하였다.


프로그램 소개 메뉴를 선택하면 프로그램 소개 페이지로 접속하게 된다. 스크롤을 아래로 내리면 왼쪽 그림과 같이 우측 하단에 "관리자 수정 요청" 버튼이 존재한다. 본 버튼을 누르면 아래의 그림과 같이 수정 요청할 정보를 입력하는 화면이 출력되게 된다.


내용을 입력한 후 등록을 선택하게 되면 웹 사이트의 정보들이 저장되어 있는 데이터베이스에 따로 저장되게 된다 이전 버튼을 선택하면 프로그램 소개 화면으로 돌아간다.


다음은 등장인물 소개 메뉴를 선택했을 때 이동되는 페이지이다. 시간이 부족해 따로 등장인물 소개에 대해 구현하지 않았다.


정보 나눔 메뉴를 선택할 시 위의 그림과 같이 게시판이 출력하게 된다. 게시글의 순서는 번호, 제목, 글쓴이, 작성날짜가 기재되어 있다. 글 작성 버튼을 선택하면 글 작성 페이지로 넘어가게 된다. 또한, 본 게시판 하단에 키워드를 입력하고 검색을 선택하면 키워드에 관한 검색 결과가 나오게 된다.


위의 그림은 정보 나눔 게시판에서 글 작성 버튼을 선택했을 시 나오게되는 화면이다. 제목과 내용을 작성하고, 원하면 사진을 입력할 수 있다. 등록 버튼을 선택하면 게시글 리스트에 작성한 글이 저장된다.

게시글을 선택하면 나오는 화면이다. 상단 진한 글씨는 제목이고, 제목 아래에 작성자, 날짜, 번호가 출력되며 하단에는 작성자가 올린 사진과 내용이 출력된다. 그리고 사이트 우측 하단에 [목록] 버튼이 존재하는데, 글 작성자가 게시글을 확인할 시 목록 옆에 [수정],[삭제]버튼도 생기게 된다. 댓글도 마찬가지로 댓글 작성자가 게시글을 확인할 시 수정,삭제 버튼이 생성된다.

위와 같은 화면에 글 사용자가 접속했을 때 화면이다. 댓글에는 수정, 삭제 버튼이 사라지고 게시글 수정, 삭제는 보이는 것을 확인할 수 있다.

마지막으로 메뉴바에서 로그인 메뉴를 선택하면 나오는 화면이다. 아이디와 비밀번호를 입력하고 로그인 버튼을 선택하면 로그인이 진행된다. 빈칸이 존재할 시, 칸을 채우라는 메시지가 뜨게 된다. 그리고 아이디와 비밀번호가 잘못 되었을 시 잘못 입력했다는 문구가 뜨게된다. 그리고 정보를 올바르게 입력한 후 버튼을 선택하면 로그인이 되었다는 메시지를 출력하고 메인 화면으로 이동한다. 만약, 아이디가 존재하지 않을 시 하단에 "아직 회원이 아니신가요?" 링크를 선택하면 회원가입 페이지로 이동하게 된다.

위의 그림은 회원가입 페이지이다. 웹 사이트에서 사용할 닉네임과 아이디, 비밀번호, 생년월일과 사진을 기입하여 회원가입을 진행한다. 칸이 비어있으면 안되며, 닉네임이나 아이디가 두개 중 하나라도 중복이 되면 중복이라는 메시지가 뜨게된다. 회원가입 후에는 메인화면으로 돌아가게 된다. 이때, 로그인은 되지않고 직접 로그인을 해야한다.

2. DB Design

2-1. user Table

create table user (
    userid int(11) not null auto_increment, --사용자 고유 번호
    id varchar(50) not null, --사용자 ID
    password varchar(40) not null, --사용자 PW
    birth int not null,  --사용자 생년월일
    nickname varchar(15) not null, --사용자 닉네임
    image mediumblob, --사용자 사진
    primary key(userid)
);

✔ Describe Table

웹 사이트 사용자를 저장하는 데이터베이스 테이블이다. 이미지와 고유번호를 제외하고 모든 정보는 입력되어야 한다. 이미지는 blob type으로 DB에 저장한다. 본 테이블뿐만 아니라 다른 테이블에서도 이미지는 blob type으로 DB에 저장된다.

2-2. post Table

create table post (
    text varchar(2000) not null, --게시글 내용
    title varchar(100) not null, --게시글 제목
    writenum int(11) not null auto_increment, --게시글 고유번호
    number int(11), --사용자(userid)의 번호
    date timestamp default current_timestamp, --게시글 작성 날짜
    postimage mediumblob, --게시글 사진
    primary key(writenum),
    foreign key(number) REFERENCES user(userid) ON DELETE CASCADE ON UPDATE CASCADE
);

✔ Describe Table

웹 사이트의 게시글을 저장하는 데이터베이스 테이블이다. 사진을 제외한 모든 정보는 NULL이면 안된다. 여기서 number는 foreign key로 설정되었으며, 이에 따라 사용자가 삭제되면 그에 관한 글도 삭제된다.

2-3. comment Table

create table post (
    text varchar(1000) not null, --댓글 내용
    date timestamp default current_timestamp, --댓글 작성 날짜
    commentnum int(11), --게시글(writenum)의 번호
    usernum int(11), --사용자(userid)의 번호
    foreign key(commentnum) REFERENCES post(writenum) ON DELETE CASCADE ON UPDATE CASCADE,
    foreign key(usernum) REFERENCES user(userid) ON DELETE CASCADE ON UPDATE CASCADE
);

✔ Describe Table
웹 사이트 댓글이 저장되는 데이터베이스 테이블이다. 어느 게시글인지 commentnum을 통해 알수 있고, 어느 사용자가 작성했는지 usernum으로 알 수 있다. commentnum과 usernum은 foreign key로 생성하였으며, 게시글이나 사용자가 삭제되면 댓글이 동시에 삭제된다.

2-4. request Table

create table request (
    text varchar(1500) not null, --수정 요청 내용
    number int(11) not null auto_increment, --수정 요청 고유 번호
    e_userid int(11), --수정 요청 사용자 
    primary key(number),
    foreign key(e_userid) REFERENCES user(userid) ON DELETE CASCADE ON UPDATE CASCADE
);

✔ Describe Table

프로그램 소개에서 수정 요청할 내용이 저장되는 데이터베이스 테이블이다. e_userid는 foreign key로 연결되어 있으며, 사용자가 삭제되면 그에 관한 수정 요청 내용도 삭제된다.



구현 부분은 설명할 내용이 많으므로, 다음 게시물에서 이어서 설명하도록 하겠다.

profile
기록용입니다.

0개의 댓글