[PHP] 맨땅에 헤딩으로 게시판 만들기 (1)
Lpla
·2021. 7. 13. 21:51
강의글이 아닙니다.
자신 있는 분야도 아니므로 틀린 부분이 있을 수 있습니다.
php로 게시판을 만들고 싶어졌다.
php를 정식으로 공부하지 않아서 문법에 많이 약하지만 게시판 커스텀은 수십 차례 해봤기 때문에 충분히 가능할 것 같았다.
그래서 내가 아는 지식을 총동원해서 게시판을 만들어 보기로 했다.
1. 로컬 서버 생성
php를 사용하기 위해 비트나미 로컬 호스트를 만들었다.
이전에 작성한 글이 있으니 참고하면 된다.
그누보드 로컬 설치하기
먼저 구글에 bitnami wamp를 검색하여 다운로드받는다. 글 작성일 기준으로 8.0.0-0이 최신버전이다. 하지만 8.0.0-0은 아직 그누보드에서 제대로 검증되지 않았다. 나는 모르고 8.0.0-0을 설치했다가 그
lpla.tistory.com
2. 게시판 UI
게시판 레이아웃은 해당 사이트를 참고했다.
Responsive Table V2 - Web Designer Wall
HTML
<section class="board_section">
<div class="wrapper flex justify-center">
<article class="board_container">
<!-- 테이블 -->
<div class="limiter">
<div class="container-table100">
<div class="wrap-table100">
<div class="table">
<div class="row header">
<div class="cell">번호</div>
<div class="cell">제목</div>
<div class="cell">날짜</div>
</div>
<div class="row">
<div class="cell" data-title="number">6</div>
<a href="javascript:void(0);">
<div class="cell" data-title="content">무한한 방지하는 못할 심장의 뛰노는 보내는 일월과 주며, 것이다.</div>
</a>
<div class="cell" data-title="date">2021.07.09</div>
</div>
<div class="row">
<div class="cell" data-title="number">5</div>
<a href="javascript:void(0);">
<div class="cell" data-title="content">주는 청춘의 따뜻한 사라지지 품에 기쁘며, 가치를 기관과 피다.</div>
</a>
<div class="cell" data-title="date">2021.07.01</div>
</div>
<div class="row">
<div class="cell" data-title="number">4</div>
<a href="javascript:void(0);">
<div class="cell" data-title="content">무엇을 심장의 같이, 예가 쓸쓸하랴? 내는 인간의 인간에 것은 천고에 바로 구하지 있으랴?</div>
</a>
<div class="cell" data-title="date">2021.06.12</div>
</div>
<div class="row">
<div class="cell" data-title="number">3</div>
<a href="javascript:void(0);">
<div class="cell" data-title="content">소금이라 청춘의 작고 있는가?</div>
</a>
<div class="cell" data-title="date">2021.05.27</div>
</div>
<div class="row">
<div class="cell" data-title="number">2</div>
<a href="javascript:void(0);">
<div class="cell" data-title="content">들어 투명하되 생명을 열매를 이것이다.</div>
</a>
<div class="cell" data-title="date">2021.05.21</div>
</div>
<div class="row">
<div class="cell" data-title="number">1</div>
<a href="javascript:void(0);">
<div class="cell" data-title="content">방지하는 힘차게 길을 것은 때문이다.</div>
</a>
<div class="cell" data-title="date">2021.05.10</div>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
</section>여기서 data-title은 삭제해도 된다.
게시판UI를 가져오면서 같이 가져왔는데 여기선 아무런 기능도 없다.
SCSS
body { background-color: #e4eaf9; }
.board {
&_section {
.wrapper { max-width: 1330px; margin: auto; height: 60rem; }
}
&_container {
.limiter { width: 100%; margin: 0 auto; }
.container-table100 { width: 100%; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; padding: 33px 30px; }
.wrap-table100 { width: 960px; border-radius: 10px; overflow: hidden; }
.table { width: 100%; display: table; margin: 0; }
.row {
display: table-row; background: #fff;
&.header {
color: #ffffff; background: #004BB4;
.cell { font-size: 18px; color: #fff; line-height: 1.2; font-weight: unset !important; padding-top: 19px; padding-bottom: 19px; }
}
.cell { font-size: 15px; color: #666666; line-height: 1.2; font-weight: unset !important; padding-top: 20px; padding-bottom: 20px; border-bottom: 1px solid #f2f2f2; }
>.cell {
&:nth-child(1) { width: 10%; text-align: center; }
&:nth-child(3) { width: 15%; }
}
&:not(.header):hover { background-color: #ececff; cursor: pointer; }
}
.cell { display: table-cell; }
a { text-decoration: none; color: #666666; }
}
}
DOM
3. DB 직접 입력
제대로 된 게시판은 글쓰기 버튼이 있고, 그것으로 글을 작성하고 확인 버튼을 누르면 DB에 쌓인다.
하지만 우선 phpmyadmin에 db를 수동으로 직접 작성하고 전달이 잘 되는지 확인해보겠다.
phpmyadmin에 로그인을 하고 임의의 데이터베이스를 추가한다.
여기선 bbs로 추가했다.
데이터베이스 안에 다시 테이블을 추가하고 생성된 테이블에 다시 구조를 추가한다.
여기서 num은 게시글 번호, title은 게시글 제목, content는 게시글 본문, date는 게시한 날짜로 정했다.
이대로 생성하면 다음과 같은 에러가 발생한다,
VARCHAR로 구조를 생성할 때는 길이를 입력해야 한다.
따라서 VARCHAR(100) 처럼 값을 입력하면 된다.
VARCHAR(100)은 영숫자로 최대 100글자, 한글로 최대 50글자를 입력할 수 있다.
그리고 다시 확인해보면 인덱스가 설정되어 있지 않다고 한다.
나는 num을 인덱스로 설정했다.
그리고 임시로 글을 작성한다.
PHP
<section class="board_section">
<div class="wrapper flex justify-center">
<article class="board_container">
<!-- 테이블 -->
<div class="limiter">
<div class="container-table100">
<div class="wrap-table100">
<div class="table">
<div class="row header">
<div class="cell">번호</div>
<div class="cell">제목</div>
<div class="cell">날짜</div>
</div>
<?php
$conn = mysqli_connect("아이피", "아이디", "패스워드", "DB명");
$sql = "SELECT * FROM notice";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) { ?>
<div class="row">
<div class="cell"><?php echo $row["num"] ?></div>
<a href="javascript:void(0);">
<div class="cell"><?php echo $row["title"] ?></div>
</a>
<div class="cell"><?php echo $row["date"] ?></div>
</div>
<?php }
}
?>
</div>
</div>
</div>
</div>
</article>
</div>
</section>생각보다 어렵지 않다.
$conn 변수로 mysql에 연결한다.
$sql 변수로 notice 테이블을 선택한다.
$result 변수로 쿼리를 실행한다.
$row 변수로 레코드를 조회한다.
이것으로 db를 가져오는데 성공했다.
다음 시간에는 글쓰기 기능을 만들어보겠다.
