09 게시판 기본 형식 구축

부트스트랩(http://bootstrapk.com/)을 이용하여 게시판을 꾸미고 구축해볼 것이다.

 

부트스트랩을 빠르게 시작하기 위해서 부트스트랩을 다운로드 해준다.

 

다운로드한 파일의 압축을 해제한다.

 

 

파일 확인

 

---

 

게시판 구축

0. 데이터 베이스

simple_board DB 생성

 

user 테이블 생성

 

board 테이블 생성

 

---

 

1. 메인 페이지: main.php

예제들 중에 하나를 선택하여 게시판 메인 페이지를 작성할 것이다.

 

게시판 메인 페이지 작성

 

우리가 처음에 다운받은 파일(bootstrap-3.3.2-dist)에 위치하는 bootstrap.min.css 파일의 경로를 작성해주고,

 

css 디렉터리에 jumbotron.css 파일을 저장한다.

 

-그리고 회원 가입을 위해서 로그인(Sign in)버튼 옆에 [Sign up] 버튼을 생성한다.

-이벤트(onclick)를 사용하여 [Sign up] 버튼을 클릭하면 go_signup() 함수를 호출하도록 설정한다.

 

 

-go_signup() 함수는 위와 같다.

-[Sign up] 버튼을 클릭하면 window.location의 값을 "http://100.100.100.140/board/signup.html"으로 변경하여 해당 URL로 이동하게 될 것이다.

 

-테이블을 이용하여 게시글 목록의 형식을 작성했다.

-tbody 태그의 내용은 위와 같이 태그안에 일일이 작성할 것이 아니라 DB에서 가져올 것이다. 지금은 예를 들어서 작성한 것이다.

 

 

부트스트랩을 참고하여 테이블과 버튼의 스타일을 변경할 수 있다.

 

아직 미완성이지만 기본적인 형식을 갖춘 메인 페이지의 코드는 위와 같다.

 

페이지에 접속하면 위와 같은 화면이 출력된다.

 

---

 

2. 회원가입 페이지: signup.html

예제 중 로그인 페이지를 이용하여 회원가입 페이지를 작성할 것이다.

 

이번에도 경로를 수정해준다.

 

signup.css 파일을 저장한다.

 

회원가입 페이지의 전체 코드는 위와 같다.

 

main.php 페이지에서 [Sign up] 버튼을 클릭하면 이벤트에 의하여 signup.html 페이지로 이동하여 위와 같은 화면이 출력될 것이다.

 

---

 

3. 회원가입 페이지: signup_ok.php

 

회원가입 페이지(signup.html)에서 회원 정보를 모두 입력한 후 [Sign up] 버튼을 클릭하면 넘어갈 페이지(signup_ok.php)를 작성했다.

 

정보가 모두 넘어온 것을 확인하였고, 나머지 기능/형식 구현은 다음에 이어서 하겠습니다.