php실전:html+php+mysql 게시판 기능 구현

기능 설명:

1)실측 링크는 원격 데이터베이스

2) 전언판을 열어 댓글을 달기

3) 새롭게 추가된 댓글이 아래쪽에 표시

css 코드, 팝업과 새로 추가된 메시지 스타일 설정하기등

        <style type="text/css">
            #comments{
                margin:10px auto;
            }
            #post{
                margin-top:10px;
            }
            #comments p,
            #post p{
                line-height:30px;
            }
            #comments p span{
                margin:4px;
                color:#bdb8b8;
            }
            #message{
                position: absolute;
                top: 40%;
                left: 100px;
                width: 200px;
                height: 50px;
                background: #f2f2f2;
                border: 1px solid;
                border-radius: 3px;
                line-height: 50px;
                text-align: center;
                display: none;
            }
        </style>

HTML 코드:

            <div>
                <div id="post">
                    <h3>문장 평론</h3>
                    <p>닉네임：</p>
                    <p><input type="text" class="input" id="user" /></p>
                    <p>논평 내용：</p>
                    <p><textarea class="input" id="txt" style="width:100%; height:80px"></textarea></p>
                    <p><input type="submit" class='btn'value="发表" id="add" /></p>
                    <div id="message"></div>
                </div>
                <div id="comments"></div>
            </div>

js 코드, 메시지 로드용

        <script type="text/javascript" src="js/jquery.js"></script> 
        <script type="text/javascript">
            $(function() {
                var comments = $("#comments");
                $.getJSON("data.php", function(json) {
                    $.each(json, function(index, array) {
                        var txt = "<p><strong>" + array["user"] + "</strong>：" + array["comment"] + "<span>" + array["addtime"] + "</span></p>";
                        comments.append(txt);
                    });
                });
                //논평한 내용을 전시하다
                $("#add").click(function() {
                    var user = $("#user").val();
                    var txt = $("#txt").val();
                    $.ajax({
                        type: "POST",
                        url: "comment.php",
                        data: "user=" + user + "&txt=" + txt,
                        dataType : 'JSON',
                        success: function(res) {
                            if (res.code == 1) {
                                var str = "<p><strong>" + res.user + "</strong>：" + res.txt + "<span>刚刚</span></p>";
                                comments.append(str);
                                $("#message").show().html("发表成功！").fadeOut(1000);
                                $("#txt").attr("value", "");
                            } else {
                                $("#message").show().html(res.message).fadeOut(1000);
                            }
                        }
                    });
                });
            });
        </script>

데이터베이스에 연결하기 위한 connect.php 파일

<?php
$host="your db host";
$db_user="your db";
$db_pass="your db password";
$db_name="your db name";
$timezone="Asia/Shanghai";
 
$link=mysqli_connect($host,$db_user,$db_pass);//데이터베이스 호스트 연결
mysqli_select_db($link,$db_name);//데이터베이스 선택
mysqli_query($link,"SET names UTF8");//데이터베이스 인코딩 형식 설정
 
header("Content-Type: text/html; charset=utf-8");//머리 스타일 설정
date_default_timezone_set($timezone); //베이징 시간

data.php, 웹 페이지를 열 때 메시지 표시에 사용

<?php
include_once("connect.php");//데이터베이스 연결
 
$q=mysqli_query($link,"select * from comments");//데이터베이스의 데이터 가져오기
while($row=mysqli_fetch_array($q)){
		$comments[] = array("id"=>$row['id'],"user"=>$row['user'],"comment"=>$row['comment'],"addtime"=>$row['addtime']);
}
echo json_encode($comments);//json 형식으로 인코딩하기

comment.php, 데이터베이스에 새 메시지를 저장하고 보기에 표시합니다

<?php
include_once("connect.php");
//trim, 문자열 str의 선두에 공백 문자를 제거한 결과를 반환합니다.두 번째 인자를 지정하지 않으면 일반 제어, 탭, 줄바꿈, 리턴, 빈 바이트, 수직 탭을 제거합니다
//htmlspecialchars() 함수는 미리 정의된 문자를 HTML 엔티티로 변환합니다
$user = htmlspecialchars(trim($_POST['user']));
$txt = htmlspecialchars(trim($_POST['txt']));
if(empty($user)){
    $data = array("code"=>355,"message"=>"닉네임을 비워둘 수 없습니다！");
    echo json_encode($data);
    exit;
}
if(empty($txt)){
    $data = array("code"=>356,"message"=>"내용은 비워둘 수 없습니다");
    echo json_encode($data);
    exit;
}
$time = date("Y-m-d H:i:s");
$query=mysqli_query($link,"insert into comments(user,comment,addtime)values('$user','$txt','$time')");
if($query)  {
    $data = array("code" => 1, "message"=>"success","user" => $user , "txt" => $txt);
    echo json_encode($data);
}

데이터베이스에 comment를 만드는 sql 명령도 있습니다

CREATE TABLE `comments`(
`id` int(4) NOT NULL AUTO_INCREMENT PRIMARY KEY,
`user` varchar(50),
`comment` varchar(200),
`addtime` datetime not null
)engine=MYISAM CHARACTER SET UTF8 COLLATE utf8_unicode_ci;