-
[PHP] 게시판 만들기 - 게시판 화면 구현 ①프로그래밍/PHP 2020. 2. 4. 13:59
본격적으로 게시판 화면을 구현해보겠습니다. 이번 실습은 총 2번을 걸쳐 진행됩니다.
먼저 전체적인 게시판 화면을 만들고 DB에서 게시글을 가져옵니다. 다음 시간에는 가져온 게시글들을 페이징 처리 하겠습니다.
1. 게시판 화면 구현
새로 list.php를 만들어주고 기본적인 틀은 같기 때문에 main.php의 코드를 복사해서 붙여넣고 점보트론과 캐러셀 부분을 지워줍니다. 그 다음 게시글의 정보를 담을 표를 만들어야하기 때문에 다음과 같이 틀을 만들어줍니다.
<div class="container"> <div id="board_area"> <h1><b>자유게시판</b></h1><br> <h4>자유롭게 글을 쓸 수 있는 게시판입니다.</h4><br> <table class="table table-striped" style="text-align: center; border: 1px solid #ddddda"> <tr> <th style="background-color: #eeeeee; text-align: center;">번호</th> <th style="background-color: #eeeeee; text-align: center;">제목</th> <th style="background-color: #eeeeee; text-align: center;">작성자</th> <th style="background-color: #eeeeee; text-align: center;">작성일</th> <th style="background-color: #eeeeee; text-align: center;">조회수</th> </tr><table> 태그는 표를 만들 때 사용합니다. <th>는 표의 제목, <tr>은 행(가로줄), <td>는 열(세로줄)을 의미합니다. 첫번째 시간에 구축한 DB 테이블중 board 테이블의 내용을 <td> 태그를 이용하여 틀을 만들고 행에 맞게끔 가져올 예정입니다.
2. 게시글 정보 가져오기
https://transferhwang.tistory.com/41
[PHP] 게시판 만들기 - DB 설계
1. XAMPP Control 패널 실행 2. PHPMyadmin 접속 + DB 설계 주소창에 127.0.0.1/phpmyadmin 입력하고 로그인하면 다음과 같은 화면이 나옵니다. 데이터베이스를 클릭하여 새 데이터베이스를 만들어줍니다. (bbs..
transferhwang.tistory.com
DB의 정보를 가져와야 하기 때문에 코드의 맨 위에 다음과 같이 DB 연동코드를 호출합니다.
<?php include_once "./config.php"; include_once "./db/db_con.php"; ?>그 다음 SQL 문을 이용하여 board 테이블에 저장된 내용을 가져옵니다.
<?php $sql2 = mq("SELECT * FROM board ORDER BY idx DESC"); while($board = $sql2->fetch_array()){ $title=$board["title"]; /* 글자수가 30이 넘으면 ... 처리해주기 */ if(strlen($title)>30){ $title=str_replace($board["title"],mb_substr($board["title"],0,30,"utf-8")."...",$board["title"]); } ?>'SELECT * FROM board ORDER BY idx DESC' 의 의미는 board 테이블로부터 idx를 기준으로 내림차순으로 정렬하여 모든 정보를 가져오겠다는 의미입니다.
fetch_array() 함수는 결과물을 배열로 뽑아냅니다. 따라서 $sql2의 정보를 배열로 뽑아내고 $board에 배열 형식으로 저장됩니다. 그 중에서 $board['title'] 글의 제목을 저장하고 있는 배열을 새로운 변수 $title에 저장하고, $title이 30자가 넘으면 ... 처리해주는 코드입니다.
이제 정보를 가져왔으므로 가져온 정보를 출력해봅시다.
<!-- 글 목록 가져오기 --> <tbody> <tr> <td width="70"><?=$board['idx']; ?></td> <td width="500"> <span class="read_check" style="cursor:pointer" data-action="./read.php?idx=<?=$board['idx']?>" ><?=$title?></span> <td width="120"><?=$board['name'];?></td> <td width="100"><?=$board['date'];?></td> <td width="100"><?=$board['hit']; ?></td> </tr> </tbody> <?php } ?> </table> </div>while문이 끝날때까지 $board 배열의 정보를 가져옵니다. 위에서 설정한 것처럼 글의 번호, 제목, 작성자, 날짜, 조회수 정보를 차례대로 출력합니다. 이때 제목 부분을 클릭했을때 해당 글의 내용을 읽을 수 있도록 해당 글로 넘어가주는 처리를 해주어야 하는데, 그것을 위해서 제이쿼리를 사용 합니다. <span>에서 data-action은 저번에 회원가입 실습때 구현했던 것 처럼 커스텀 속성입니다. 링크로 넘어갈 주소를 저장해두고, 제이쿼리를 이용해서 해당 페이지로 이동하는 이벤트를 구현해보겠습니다.
★ 제목 클릭 시 읽기 페이지로 이동하기
./read.php?idx=<?=$board['idx']?> 의 의미를 먼저 알아볼 필요가 있습니다.
먼저 read.php는 나중에 게시글 읽기를 구현하기 위한 코드입니다. 그 다음 물음표(?)가 있는걸 확인할 수 있습니다.
이것은 GET방식으로 변수값을 가져오겠다는 의미입니다.
즉 쉽게 말해서 '당신이 클릭한 글의 번호에 해당하는 글을 읽는 페이지로 이동하겠다'는 의미입니다.
위에서 언급한것처럼 제목을 클릭했을 때 글을 읽는 페이지로 이동해야하는데 제이쿼리를 이용해보도록 하겠습니다.
<script> $(function(){ $(".read_check").click(function(){ var action_url = $(this).attr("data-action"); $(location).attr("href",action_url); }); }); </script><head> 태그에 다음과 같이 제이쿼리 코드를 작성합니다. <span>의 클래스 이름인 read_check 가 클릭 이벤트가 발생하면 자신의 속성 값인 data-action 값을 새로운 변수 action_url에 저장하고 그 링크로 이동하게끔 작동하는 코드입니다.
phpmyadmin에 접속해서 임의로 게시글 정보를 입력하고 게시판 화면에 게시글이 불러와지는 것을 확인하는 것으로 이번 실습은 마무리하겠습니다. 다음 시간은 게시글들을 페이징 처리해보도록 하겠습니다.
PHP 게시판 만들기 시리즈 👇
노력의 천재
Carpe Diem, Seize the day
transferhwang.tistory.com
'프로그래밍 > PHP' 카테고리의 다른 글
[PHP] 게시판 만들기 - 글쓰기 기능 구현 ① (14) 2020.02.10 [PHP] 게시판 만들기 - 게시판 화면 구현 ② (+페이징) (0) 2020.02.08 [PHP] 게시판 만들기 - 메인화면, 로그아웃 구현 (3) 2020.01.29 [PHP] 게시판 만들기 - 회원가입 구현 (14) 2019.11.25 [PHP] 게시판 만들기 - 로그인 구현 (13) 2019.11.24