1-14) 아주 간단한 게시판 만들기 -1

아주 간단한 게시판

1. 기능 설계

1). 회원가입 : register.php → signup.php

register.php : (여기서 정보입력)

signup.php  : (여기서 정보처리)

 - 아이디, 패스워드, 이메일

 - 중복된 아이디는 존재하지 않는다.

 - 빈 입력값도 허용하지 않는다. 즉, 아이디 패스워드 이메일 모두 입력해야함

2). 메인 화면 : index.php

 - 로그인 : signin.php

 · 아이디, 패스워드 만 입력받아서 올바른 사용자면 세션만 만들어 줄수 있으면 된다.

 - 전체 게시물 목록 확인

 · 로그인 하지 않은 사용자도 목록 확인은 가능

 - 게시물 확인 : view.php

 · 로그인 한 사용자만 게시글 확인

 - 게시글 작성 : write.php → write_ok.php

 · 로그인 한 사용자만 게시글 작성

 · 게시글 제목, 게시글 본문, 게시글 작성 시간, 첨부파일(파일 업로드), 조회수 

 - 게시글 삭제 : delete.php

 · 본인이 작성한 게시글만 삭제 가능

 - 게시글 수정 : view.php → update.php

 · 본인이 작성한 게시글만 수정 가능

테이블에 어떤내용이 담겨야할지 보려면 DB설계가 먼저 필요하다.

부트스트랩 이용해서 CSS적인 부분을 보완하여 만들어보자.

부트스트랩 : http://bootstrapk.com/

# 부트스트랩 다운로드 부분을 우클릭 → 링크주소복사

다운로드 링크를 따와서 

#> wget [링크]

를 이용해서 리눅스 내에 다운로드 한다.

#> unzip [압축파일]

명령어로 게시판을 만들 폴더 내에 압축해제까지 해준다.

#)_ 참고

wget, unzip 파일이 없는경우 yum install wget* 과 같이 입력하여 해당 파일을 설치해준다

css파일을 그대로 소스코드만 복사해오면 css가 깨지기 때문에, 아예 부트스트랩 파일을 다운받은 뒤 

경로설정을 해주고자 위와같이 진행하였다. 

# 다운받은 폴더명이 너무 길기때문에 폴더명을 변경해주었다.

먼저 회원가입페이지 register.php를 구현해보도록 하자.

부트스트랩의 http://bootstrapk.com/examples/signin/

이 디자인폼을 이용하여 진행하겠다.

# 페이지 우클릭 → 페이지 소스보기

# 코드를 전체 복사한다.

# register.php 파일을 생성하여 붙여넣기 해준다.

# register.php로 들어가보면, 파일 내에 설정된 경로가 다르기때문에 css파일이 읽히지 않고있다. 경로를 다시 지정해주도록 하자.

# 먼저 signin.css 파일을 처리해주자. 아까 소스코드를 복사한 페이지에서 signin.css 를 클릭하면

# 해당 코드가 나온다. 이것을 긁어서 bootstrap/css 디렉토리 내의 signin.css파일을 새로 생성하여 거기에 붙여넣기 해주자. 

# 위와같이 새로 파일을 생성하여 소스코드를 붙여넣기한다.

# 그다음 register.php 파일 내의 경로를 해당 signin.css 파일이 있는 경로로 다시 지정해주면 파일을 인식하게된다.

위와같은 방법으로 아래의 파일들의 경로를 다시 지정해주도록하자.

bootstrap.min.css 파일은 css폴더 내에 이미 저장되어있으므로 경로만 새로 변경해주면 된다.

# 이렇게 맞춰주면 된다. 불필요한 코드들은 제거하였다.

이제 실제 register.php 파일을 우리가 구현하고자하는 방향대로 수정해보도록 하자.

# 입력값으로 id, pw, email 을 받고자 칸을 하나 더 생성하였다.

또한 인자로 받아올 때 기존의 id는 변수명으로 지정한 id와 겹치기때문에 name으로 변경했다.

required autofocus 에서 autofocus는 페이지가 로드되었을때 디폴트값으로 커서를 위치해놓고자 설정해 주었다.

하지만 우리가 새로 생성한 칸에 간격이 생겨 원하는 모양대로 나오지 않았기때문에 css파일을 조금 수정해서

원하는 모양의 폼이 출력되도록 해보자.

# email 폼에대한 블럭을 추가해주고, 가운데 폼의 블럭의 경계를 직각으로 만들기위해 radius를 0으로 주었다.

# margin은 외부로의 여백을 의미하고, padding은 내부로의 여백을 의미한다.

CSS파트는 본인의 취향대로 설정해주면 된다.

다음으로 DB쪽을 설정해보도록 하자.

2. DB 설계 : simple_board

1). 사용자 정보 : simple_board_user

- no int auto_increment primary key

- user_id varchar(20) NOT NULL

- user_pw char(50) NOT NULL

- email varchar(30) NOT NULL

2). 게시글 정보 : simple_board_post

- no int auto_increment primary key

- subject varchar(50) NOT NULL

- content text NOT NULL

- date datetime NOT NULL

- filename varchar(256) NOT NULL

- counter int NOT NULL

- user_no int NOT NULL

이대로 값을 줘서 DB를 설계해보도록 하자.

# 위와같이 설계를 완료해준다.

DB설계는 완료해주었으므로 register.php에서 정보를 얻어와서 signup.php에서 처리할 수 있도록 파일을 만들어주자.

signup.php 에서 DB에 값을 저장하도록 구현해보자.

1). 회원가입 : register.php → signup.php

register.php : (여기서 정보입력)

signup.php  : (여기서 정보처리)

 - 아이디, 패스워드, 이메일

 - 중복된 아이디는 존재하지 않는다.

 - 빈 입력값도 허용하지 않는다. 즉, 아이디 패스워드 이메일 모두 입력해야함

위의 조건대로 구현을 해보도록하자. 중복된 아이디가 존재하지 않도록 하려면, 

DB 조회 이후 결과가 없으면 새로 삽입하고, 있으면 뒤로가기 와 같이 구현해볼수 있다.

# register.php 에서 POST방식으로 signup.php에 데이터를 넘기도록 설정해준다.

# register.php 에서 submit을 하면 signup.php로 값이 잘 넘어간다. 테스트 페이지이다.

# 이렇게 signup.php 파일을 작성해줬다.

register.php 에서 id, pw, email 을 입력하고 submit하여도 연결되는 index.php 파일이 없기때문에

오류가나오는것을 확인할 수 있다.

# DB에서 조회해보면 잘 들어가있음을 확인할 수 있다.

그럼 이번엔 index.php 즉, 메인화면을 구현해보자.

메인화면의 템플릿으로는 부트스트랩 내의 점보트론(http://bootstrapk.com/examples/jumbotron/)을 사용하겠다.

마찬가지로 소스코드를 index.php 파일을 만든뒤 붙여넣기한다.

# 소스코드를 붙여넣기한 최초의 상태이다.

CSS에 관련된 부분이 전혀 작동하지 않고 있으므로 경로를 재 설정해주어 우측 오류들을 잡아주자.

또한 index.php 내에 예시로 적힌 글자들 모두 필요없으므로 지워주자.

# 위와같이 필요한부분만 남기고 기본적인 게시판을 유지하였다. 

우리는 안쪽에 테이블을 넣을 예정이기 때문에 우선은 빈 페이지를 만들어줬다.

그다음 우리는 가장 위에 내용으로 테이블을 집어넣을것이다.

# 예제로 나와있는 테이블 하나의 소스코드를 따와서 index.php 내에 삽입하면 된다.

# 본문에 표를 위와같이 삽입해주면 된다.