PHP 프로그래밍

본문 바로가기
사이트 내 전체검색


PHP 프로그래밍
PHP 프로그래밍

2. 게시판 목록 구현

페이지 정보

작성자 관리자 댓글 0건 조회 559회 작성일 22-01-13 19:59

본문

2. 게시판 목록 구현

bbs폴더를 만들고 index.php 파일을 생성한다.


파일 : index.php


<!DOCTYPE html>

<html>

    <head>

        <title>게시판</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

    </head> 

    <body>

        <article class="boardArticle">

          <div id="list">

            <h3>반응형 게시판 </h3>

            <table>                

                <thead>

                    <tr>

                        <th scope="col" class="no"> 번호</th>

                        <th scope="col" class="subject">제목</th>

                        <th scope="col" class="author">작성자</th>

                        <th scope="col" class="date">작성일</th>

                        <th scope="col" class="hit">조회</th>

                    </tr>

                </thead>

                <tbody>

                    <tr>

                        <td class="no"></td>

                        <td class="subject"></td>

                        <td class="author"></td>

                        <td class="date"></td>

                        <td class="hit"></td>

                    </tr>

                

                </tbody>

            </table>


          </div>  

        </article>

    </body>

</html>



2.PNG


MySQL을 접속하는 기능을 따로 파일로 생성한다.


파일 : dbConnect.php


<?php

    header('Content-Type: text/html; charset=utf-8');


    //mysqli(DB호스트, DB 아이디, DB 패스워드, DB이름)

    $db = new mysqli('localhost','jklee', 'test1234', 'sample');

    

    if($db->connect_error){

        die("데이터베이스 연결 실패!!, \n 시스템 관리자에게 문의 바랍니다.");

    }

    

    $db->set_charset('utf8');

?>


스타일 파일을 추가한다.

파일 : css/style1.css

.boardArticle table { 
width:720px;
}

.boardArticle th {
padding:5px 0;
border-top:2px solid #777; 
border:1px solid #777;
}


index.php 파일에 스타일 파일을 연결한다.

파일 : index.php 

<?php
    require_once("./dbConnect.php");
?>
<!DOCTYPE html>
<html>
    <head>
        <title>게시판</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <link rel="stylesheet" href="./css/style1.css"/>
   </head>
    <body>
        <article class="boardArticle">
          <div id="list">
            <h3>반응형 게시판 </h3>
            <table>                
                <thead>
                    <tr>
                        <th scope="col" class="no"> 번호</th>
                        <th scope="col" class="subject">제목</th>
                        <th scope="col" class="author">작성자</th>
                        <th scope="col" class="date">작성일</th>
                        <th scope="col" class="hit">조회</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="no"></td>
                        <td class="subject"></td>
                        <td class="author"></td>
                        <td class="date"></td>
                        <td class="hit"></td>
                    </tr>
                
                </tbody>
            </table>

          </div>  
        </article>
    </body>
</html>

 

3.PNG


스타일 파일응 수정한다.


파일 : css/style1.css 


.boardArticle table { 

width:720px;

border-collapse: collapse;

border-top:2px solid #777; 

}


#list th {

padding:5px 0;

border:1px solid #777;

}


#list td {

padding:8px; 

border:1px solid #777;

}


#list .no {

width:60px; 

text-align:center;

}

#list .subject {

}

#list .author {

width:100px; 

text-align:center;

}

#list .date {

width:100px; 

text-align:center;

}


#list .hit {

width:40px; 

text-align:center;

}



4.PNG

글쓰기 버튼을 추가한다.


스타일 파일에 버튼의 위치 관련 스타일을 추가한다.


#list .btnSet{

width:720px; text-align:right;

}


index.php파일에 버튼을 추가한다.


<?php

    require_once("./dbConnect.php");

?>

<!DOCTYPE html>

<html>

    <head>

        <title>게시판</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

         <link rel="stylesheet" href="./css/style1.css"/>

   </head>

    <body>

        <article class="boardArticle">

          <div id="list">

            <h3>반응형 게시판 </h3>

            <table>                

                <thead>

                    <tr>

                        <th scope="col" class="no"> 번호</th>

                        <th scope="col" class="subject">제목</th>

                        <th scope="col" class="author">작성자</th>

                        <th scope="col" class="date">작성일</th>

                        <th scope="col" class="hit">조회</th>

                    </tr>

                </thead>

                <tbody>

                    <tr>

                        <td class="no"></td>

                        <td class="subject"></td>

                        <td class="author"></td>

                        <td class="date"></td>

                        <td class="hit"></td>

                    </tr>

                

                </tbody>

            </table>

            <div class="btnSet">

                <a href="./write.php" class="btnWrite">글쓰기</a>

            </div>

          </div>  

        </article>

    </body>

</html>



5.PNG


댓글목록

등록된 댓글이 없습니다.


개인정보취급방침 서비스이용약관 모바일 버전으로 보기 상단으로

TEL. 063-469-4551 FAX. 063-469-4560 전북 군산시 대학로 558
군산대학교 컴퓨터정보공학과

Copyright © www.leelab.co.kr. All rights reserved.