[HTML/PHP] 간단한 게시판 만들기 #1 (DB 데이터 불러오기, 게시판 형식만들기)

 

 

728x90

 

 

코딩을 할 때 간단한 게시판을 만들다 보면 금방 그 언어에 대한 기본 지식을 채울 수 있습니다.

게시물을 나누어 간단한 게시판을 만드는 예제를 포스팅해보려 합니다.

현재 포스팅에서는 php를 통해 서버와 통신하고 db에 저장된 정보를 가져와서 html코드로 게시판형식을 만들어 보겠습니다.

 

---

 

 

DB 작성

 

먼저 게시판의 내용을 담아둘 DB내용을 작성하겠습니다.

mysql에서 테이블을 하나 생성해 줍니다.

 

저는 test_list라고 테이블 명을 지어서 생성해 주었습니다.

 

 

테이블 생성 이미지

 

 

위의 이미지와 같이 phpMyAdmin에서 작성해 주었습니다.

idx는 자동으로 숫자 1씩 증가시켜서 다른 값들과 구분을 주는 게 좋기 때문에 A.I에 체크해 두었습니다.

 

A.I는 AUTO_INCREMENT의 약자로 값을 자동으로 증가시켜 주는 것입니다.

title에는 게시판의 제목을 저장할 것이고, content에는 게시판의 내용을 저장해 주겠습니다.

reg_date는 글을 작성한 시간을 넣어 줄 것입니다.

간단하게만 만들 거라 이 외에는 더 추가하지 않았습니다.

 

 

테이블 구조

 

 

다 만들고 난 테이블의 구조는 위의 이미지와 같이 나오게 됩니다.

해당 테이블에 맞게 값을 작성해서 넣어주게 될 것입니다.

 

 

테이블에 미리 값을 넣어두기

 

 

 

DB에는 테스트용으로 값을 3개 미리 넣어주겠습니다.

 

반응형

 

 

php로 db의 값 불러오기

 

이제 php로 db에 있는 값들을 불러와 주겠습니다.

 

$sql = "select * from test_list order by reg_date DESC";
$res = $db->query($sql);

while($rs=$db->fetch($res)) {
    echo $rs["content"]."<br/>";
}

 

sql문은 test_list 테이블의 모든 데이터를 가져오는데 reg_date를 내림 차순(DESC)으로 가져와라 라는 뜻입니다.

$db -> query와 $db -> fetch는 제가 미리 작성해 둔 class를 불러와서 쓰는 것으로,

$db -> query는 db연결을 하고 php의  mysql_query을 사용하여 sql문을 작동시키는 것입니다.

 

$db -> fetch는 php의 mysql_fetch_array를 사용하여 배열형태로 저장해 주어 사용하기 편하게 해 줍니다.

또한 array_map('stripslashes', $data);를 사용하여,

db에서 불러올 때 혹시 있을지 모를 백슬래시를 제거하여

원하는 값만 깔끔하게 가져올 수 있게 해 줍니다.

 

이후 while문을 사용하여 db에서 불러온 데이터 수만큼 반복시켜서 출력해 보겠습니다.

전부 다 출력하면 보기 어려우니 content의 내용만 출력해 보았습니다.

 

 

db에서 값을 잘 불러오는지 체크

 

 

 

결과는 위와 같이 아까 db에서 넣어두었던 내용이 잘 나오는 것을 확인할 수 있습니다.

 

 

 

html을 사용하여 게시판 형식 만들기

 

 

DB에서 값이 잘 가져와지는 것을 확인하였으니, 이제 진짜 게시판 모양을 만들어 보겠습니다.

 

<style>
    .title_box {
        display:inline-block; 
        width:100%; 
        padding:10px 0 10px 0; 
        line-height:1.3em; 
        background:#EAEAEA; 
        color:#333333; 
        text-align:center; 
        font-size:16px; 
        font-weight:bold;
    }
</style>

<div style="margin:50px auto; width:1500px;">
    <div class="title_box">Jong's 게시판</div>
    <div style="text-align: right; padding: 10px 0;">
        <input type="button" value="글쓰기">
        <input type="button" value="삭제">
    </div>
</div>

 

html 기본 페이지

 

 

먼저 이런 식으로 게시판의 타이틀과 아무 기능을 넣지 않은 "글쓰기"와 "삭제" 버튼을 만들어 주었습니다.

스타일은 여러분 자유롭게 꾸며보세요!

 

 

<table class="list" border="0" align="center"cellspacing="0" cellpadding="0" style="width: 100%;">
    <colgroup>
        <col width="5%" />
        <col width="50%" />
    </colgroup>
    <tr>
        <th>번호</th>
        <th>제목</th>
        <th>등록날짜</th>
    </tr>
    <? while($rs=$db->fetch($res)) { ?>
        <tr>
            <td><?=$rs["idx"]?></td>
            <td><?=$rs["title"]?></td>
            <td><?=$rs["reg_date"]?></td>
        </tr>
    <? } ?>
</table>

 

 

 

그리고 위와 같이 테이블을 만들어서 테이블 안에 while문으로 반복시켜 여러 번 행을 추가시키도록 했습니다.

 

 

db에서 값을 가져와서 출력해주기

 

 

결과는 위의 이미지처럼 나오게 되었습니다.

얼추 게시판의 모양이 갖추어지고 있습니다.

 

css를 좀 더 다듬어서 완성시켜 보겠습니다.

 

.list th {
    height: 30px;
    text-align: center;
    border: 1px solid #e1e1e1;
    background-color: #797979;
    color: white;
}
.list td {
    height: 30px;
    text-align: center;
    border: 1px solid #e1e1e1;
}
.list tr:nth-child(even) {
    background-color: lightgoldenrodyellow;
}

 

 

이런 식으로 색을 추가하고 글을 가운데 정렬하며, 선을 추가해 주면 그럴듯하게 보이게 됩니다.

 

nth-child(even)는 짝수번째의 아이들에게 스타일을 적용시키는 것으로,

list라는 클래스의 tr의 짝수번째 자식들의 배경색을 변경해 주었습니다.

 

nth-child(odd)는 홀수번째에 스타일 적용이 가능합니다.

 

css를 적용한 게시판 이미지

 

 

 

---

 

결론

 

이 글에서는 기본적으로 db를 만들고, 게시판의 틀을 작성하며, db의 값을 게시판 형식으로 불러오는 작업까지 마무리하였습니다.

다음글에서는 게시판에 필요한 요소 중 하나인 페이징을 만들어 보도록 하겠습니다.

글의 숫자가 많을 때 한 페이지에 전부 보이게 한다면 스크롤이 끝도 없이 내려갈 것입니다.

그리고 한눈에 잘 보이기 위해선 게시판에 페이징을 빼놓을 순 없을 것입니다.