php, MySQL을 사용한 게시판

Preface

 

이전 글에서도 언급했듯 주먹구구식의 공부 방법을 배척하고 올바른 방향을 잡기 위해 동적인 웹사이트를 직접 제작해봤다.

 

사실 개발을 시작하기 전엔 정말 기본적인 기능만을 구현할 것이므로 몇 시간이면 결과를 뚝딱 낼 수 있을 줄 알았다.

 

분명 머릿속으론 완벽했는데, 뚝딱은 무슨 개발환경 세팅에만 뚝딱뚝딱뚝딱뚝딱 며칠은 걸렸다.

 

기존 계획은 visual studio code를 기본 IDE로 사용하는 것이었지만, 지난 실습 때 설치했던 XAMPP의 php를 vscode에 연동하기 위해 여러 블로그의 글을 무작정 따라하던 과정에서 뭘 잘못 건드렸는지 프로그램이 제대로 작동되지 않아 체념하고 노트북을 포맷했다.

 

결국 생활코딩 강의를 보며 MAMP를 설치한 후 atom IDE를 통해 실습을 진행하려던 중 JetBrains의 phpStorm이라는 php 전용 툴을 발견해 해당 툴을 사용하기로 결정했다.

 

또, 내가 설치한 MAMP엔 MySQL 대신 MariaDB가 포함되어 있어 걱정했었는데 MariaDB server에 MySQL Workbench를 바로 연동해 사용할 수 있었다.

 

개발 공부를 할 때마다 매번 느끼는 것이지만, 맥북에서 개발환경 세팅하기가 세상에서 제일 어렵다.

 

구글링 몇 분만 하면 바로 따라할 수 있는 윈도우와 달리 맥북은 애초에 관련 글도 별로 없고, 작성자마다 문제 해결 방식도 천차만별이다.

 

모든 응용 프로그램 사이트에서 맥북을 위한 환경 설정 가이드라인을 제시해주면 얼마나 좋을까.

 

 

 

코드에 대해 간단히 설명하자면, 우선 기본적인 레이아웃과 몇몇 세부적인 css는 codepen이라는 사이트의 코드를 조금 참고했다.

 

말이 참고한 것이지 마음에 쏙 드는 틀도 없고, 주석도 없어서 대부분의 코드를 직접 수정하다 보니 결국 하나부터 열까지 내가 다 만들었던 것 같다.

 

또, php를 통해 DB의 정보를 가져오는 코드는 티스토리 블로그를 참고했다.

 

블로그를 보지 않고 '이것이 MySQL이다' 책을 공부할 때 배웠던 php 파트를 복습하며 구현해보려했지만, 아무래도 DB 연동 방식 등 기본적인 내용만 담고 있어 구글링을 할 수밖에 없었다.

 

웹사이트 제작이라는 것이 생각했던 것보다 신경써야 할 부분이 굉장히 많은 것 같다.

 

특히 오류가 발생했을 때 DB 이름, 테이블 이름, HTML의 href 태그로 연결하는 다른 위치의 파일 경로 등을 하나하나 확인하며 디버깅을 하는 것이 정말 귀찮았다.

 

 

 

코드를 완성한 후에는 도메인을 발급받을 계획이었지만, 여기저기 찾아보니 서버를 사용하지 않는 정적인 사이트는 도메인을 쉽게 발급받을 수 있는 반면 웹 서버, DB 등을 사용해 동적으로 작동되는 사이트는 도메인을 얻는 방법이 생각보다 복잡했다.

 

이 문제는 주말에 개발자 친구를 만나 이야기를 나눠 볼 생각이다.

 

일단 계획대로 DB를 연동한 웹사이트 개발은 성공했으니, 내일부턴 생활코딩의 Web 강의를 볼 것 같다.

 

추가로 배포에 관한 내용도 공부해볼까 한다.

 

 

 

※ 전체 코드는 우측 사이드바 상단에 있는 깃허브 "dashboard_project" 리파지토리에 업로드되어 있다.

---

 

1. 사용한 언어 및 툴

 

 

- MAMP

1) Apache

2) MySQL

3) PHP

 

- HTML

 

- CSS

 

- MySQL Workbench

 

- phpStorm

 

---

 

2. 전체 코드

 

 

- 테이블 정보

create table board
( number int not null auto_increment primary key,
  title varchar(150) not null,
  content text not null,
  id varchar(20) not null,
  password varchar(20) not null,
  date datetime not null,
  hit int not null default 0
);
    
create table comment
( number int unsigned not null auto_increment primary key, 
  board_number int unsigned not null,
  id varchar(20) not null,
  content text not null,
  date datetime not null
);
    
create table member
( id varchar(20) not null,
  password varchar(20) not null,
  date datetime not null,
  permit tinyint(3) unsigned
);

create table guestbook
( number int not null auto_increment primary key,
  title varchar(150) not null,
  content text not null,
  id varchar(20) not null,
  password varchar(20) not null,
  date datetime not null,
  hit int not null default 0
);

→ 댓글 테이블을 생성하긴 했는데, 기능은 구현하지 않았다.

 

 

 

- 전체 파일 정리

※ 전체 코드는 우측 사이드바 상단에 있는 깃허브 "dashboard_project" 리파지토리에 업로드되어 있다.

 

 

 

- 구현 내용

1) 메인 사이트

• 환영 애니메이션 출력

2) 사이드바

• 마우스 오버시 서브메뉴 출력
• k-mozzi: 블로그와 깃허브 연결
• Menu: 게시판과 방명록 연결
• Profile: 회원가입과 로그인 탭 연결

3) 게시판 탭

• 로그인 시 글 작성 가능
• 작성한 글 수정 및 삭제 가능
• 자신이 작성한 글이 아닐 경우 수정 및 삭제 불가
• 조회수 기능

4) 방명록 탭(사실상 게시판 복붙)

• 로그인 시 글 작성 가능
• 작성한 글 수정 및 삭제 가능
• 자신이 작성한 글이 아닐 경우 수정 및 삭제 불가
• 조회수 기능

5) 회원가입 및 로그인 탭

• 중복 아이디일 경우 회원가입 불가능
• 로그인 완료 시 로그인 탭을 눌렀던 화면으로 돌아감 (메인에서 로그인하면 메인, 게시판에서 로그인하면 게시판, 방명록에서 로그인하면 방명록으로 이동)

 

 

 

- 사용 동영상

 

 

 

- 메인 화면

 

 

 

- 게시판 화면

 

 

 

- 로그인 화면