ระบบ PHP Diary ด้วย jQuery+CSS+HTML5

สวัสดีครับ วันนี้จะมี Workshop การทำบันทึก Diary ด้วย PHP และใช้เทคนิค jQuery การออกแบบโครงสร้างด้วย CSSและHTML5 ครับ โดยระบบนี้มีการออกแบบการ View สไตล์ Facebook คือสามารถกด View ทีละบันทึกลงมาเรื่อยๆ เรามาดูโครงสร้างไฟล์กันเลยครับว่ามีอะไรบ้าง

diary_step1

ขั้นตอนแรกเราจะมาออกแบบฐานข้อมูล MySQL

diary_step2

หลังจากนั้นเราจะมาสร้างไฟล์เชื่อมต่อฐานข้อมูลครับตั้งชื่อไฟล์ว่า config.inc.php ครับ
<?php
    $config['dbs']="localhost"; // mysql server
    $config['dbu']="root"; // mysql username
    $config['dbp']="root"; // mysql password
    $config['database']="db_sample";
 
    @$conn=mysql_pconnect($config['dbs'],$config['dbu'],$config['dbp']) or die('Unable to Connect MySQL');
    mysql_select_db($config['database'],$conn) or die('No database: '.$config['database']);
    mysql_query('SET NAMES UTF8');
?>

** ให้ทำการเปลี่ยน mysql Username และ Password ตามที่ได้กำหนดในระบบของแต่ละคนด้วยนะครับ โดยชื่อฐานข้อมูลในตัวอย่างตั้งชื่อว่า db_sample ครับ **

ขั้นตอนต่อไป ทำการสร้างไฟล์ CSS ครับ โดยตั้งชื่อว่า style.css
@charset "utf-8";
body{
    font-family: "Tahoma";
    font-size: 12px;   
}
#wrapper{
    position: relative;
    width: 900px;
    left: 50%;
    margin-left: -455px;
    border: #C0C0C0 1px solid;
    padding: 5px;
}
.headerText{
    font-size: 2.0em;
    font-weight: bold;
    margin-bottom: 20px;
}
.nav{
    margin-bottom: 10px;   
}
.nav span{
    display: inline-block;
    background-color:#4F4F4F;
    cursor: pointer;
    color: #FFF;
    font-weight: bold;
    text-align:center; 
    padding: 5px 20px;
}
.nav span:hover{
    background-color:#707070;  
}
.addDiary{
    position: relative;
    display: none;
    width: 500px;
    margin-bottom: 10px;   
}
.addDiary .titleText{
    font-weight: bold;
    margin-bottom: 5px;
}
.addDiary .formDetail{
    margin-bottom: 10px;   
}
.addDiary .formDetail input[type=text]{
    width: 100%;
    padding: 3px;  
}
.addDiary .formDetail textarea{
    width: 100%;
    height: 100px; 
}
.displayblog{
    position: relative;
    margin-bottom: 10px;   
}
.displayblog .blog{
    margin-bottom: 15px;   
}
.displayblog .blog .b-title{
    position: relative;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: #C0C0C0 1px solid;
}
.displayblog .blog .b-title .b-text{
    float: left;
    font-weight: bold;
    font-size: 1.6em;  
    color: #484848;
    line-height: 35px;
    overflow: hidden;
}
.displayblog .blog .b-title .b-date{
    float: right;
    width: 250px;  
    line-height: 35px;
    text-align: right;
}
.displayblog .blog .b-detail{
    padding: 10px 20px;
    margin-bottom: 10px;
    border-bottom: #C0C0C0 1px dashed;
    height: 70px;
    height: auto!important;
    min-height: 70px;
}
.displayblog .blog .b-detail .b-author{
    margin-top: 10px;
    text-align: right;
    font-weight: bold;
}
.relatedDisplay{
    color: #353535;
    font-weight: bold;
    letter-spacing: 1px;
    border-top: #C0C0C0 1px solid;
    border-bottom: #C0C0C0 1px solid;
    text-align: center;
    padding: 5px 0px;
    margin-bottom: 20px;
    background-color: #EFEFEF;
    cursor: pointer;
}
.clear{
    clear: both;   
}
ขั้นตอนต่อไปสร้างไฟล์หลักครับ ตั้งชื่อว่า index.php โดยจะมีไฟล์ jquery ซึ่งในตัวอย่างใช้ jquery-1.7.2.js สามารถดาวน์โหลดได้นี่http://blog.jquery.com/2012/03/21/jquery-1-7-2-released/ ครับ
<?php
    include_once('config.inc.php');
     
    $post=$_POST;
    if(sizeof($post)>0){
        $title=$post['title_txt'];
        $author=$post['author_txt'];
        $detail=$post['detail_txt'];
        $ndate=time();
 
        $sql="Insert Into blog_data(id,name_txt,title_txt,detail_txtbox,created_date) Values(NULL,'$author','$title','$detail','$ndate')";
        if(mysql_query($sql)){
            header('Location: index.php');
            exit();
        }
    }else{
        $sql="Select * From blog_data Order By id DESC Limit 0,1";
        $result=mysql_query($sql);
        $num_rows=mysql_num_rows($result);
        if($num_rows>=1){
            $rs=mysql_fetch_assoc($result);
            $arrData=array();
            array_push($arrData,$rs);
 
            $sql="Select * From blog_data Where id<'".$arrData[0]['id']."' Order By id DESC Limit 0,1";
            $result2=mysql_query($sql);
            $num_rows2=mysql_num_rows($result2);
            if($num_rows2>=1){
                $rs2=mysql_fetch_assoc($result2);
                $arrData2=array();
                array_push($arrData2,$rs2);
            }
        }
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My Diary : phpdevthailand.com</title>
<script language="javascript" src="jquery-1.7.2.js"></script>
<script language="javascript" src="jquery.main.js"></script>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
 
<body>
    <div id="wrapper">
        <div class="headerText">My Diary</div>
        <div class="nav">
            <span onclick="addDiary();">เพิ่มใหม่</span>
        </div>
        <div class="addDiary">
            <form method="post">
            <div class="titleText">หัวข้อ:</div>
            <div class="formDetail"><input name="title_txt" type="text"></div>
            <div class="titleText">ผู้บันทึก:</div>
            <div class="formDetail"><input name="author_txt" type="text"></div>
            <div class="titleText">ข้อความ:</div>
            <div class="formDetail"><textarea name="detail_txt"></textarea></div>
            <div class="formDetail"><input type="submit" value="บันทึก"></div>
            </form>
        </div>
        <?php if(sizeof($arrData)>0){ ?>
        <div class="displayblog">
            <div class="blog">
                <div class="b-title">
                    <div class="b-text"><?php echo $arrData[0]['title_txt']; ?></div>
                    <div class="b-date"><?php echo date('d-m-Y H:i:s',$arrData[0]['created_date']); ?>, <a href="del.php?id=<?php echo $arrData[0]['id']; ?>">[ลบ]</a></div>
                    <div class="clear"></div>
                </div>
                <div class="b-detail">
                    <?php echo $arrData[0]['detail_txtbox']; ?>
                    <div class="b-author">บันทึกโดย: <?php echo $arrData[0]['name_txt']; ?></div>
                </div>
            </div>  
        </div>
        <?php } ?>
        <?php if(sizeof($arrData2)>0){ ?>
        <div class="relatedDisplay">
            <div onclick="viewBlog('<?php echo $arrData2[0]['id']; ?>');">ดูบันทึก: <?php echo $arrData2[0]['title_txt']; ?></div>
        </div>
        <?php } ?>
    </div>
</body>
</html>
<?php
    }  
?>
ต่อไปสร้างไฟล์ jquery.main.js เพื่อเขียนคำสั่ง jquery สำหรับเพิ่ม/ลบ Diary ของเรานะครับ
function addDiary(){
    $(".addDiary").css({'display':'inline'});
}
 
function viewBlog(txtID){
    $.ajax({
        type: 'POST',
        data: ({id: txtID}),
        url: 'ajaxView.php',
        success: function(callBack){
            if(callBack!=''){
                var arrData=callBack.split('||xx||');
                $(".displayblog").append(arrData[0]);
                if(arrData[1]!='false'){
                    $(".relatedDisplay").html(arrData[1]);
                }else{
                    $(".relatedDisplay").remove();
                }
            }          
        }
    });
}
ขั้นตอนต่อไปสร้างไฟล์ ajaxView.php สำหรับดูบันทึกก่อนหน้าตามแบบ Facebook ครับ
<?php
    include_once('config.inc.php');
     
    $post=$_POST;
    if(sizeof($post)>0){
        $id=$post['id'];
 
        $sql="Select * From blog_data Where id='".$id."'";
        $result=mysql_query($sql);
        $num=mysql_num_rows($result);
        if($num>=1){
            $rs=mysql_fetch_assoc($result);
?>
<div class="blog">
    <div class="b-title">
        <div class="b-text"><?php echo $rs['title_txt']; ?></div>
        <div class="b-date"><?php echo date('d-m-Y H:i:s',$rs['created_date']); ?>, <a href="del.php?id=<?php echo $rs['id']; ?>">[ลบ]</a></div>
        <div class="clear"></div>
    </div>
    <div class="b-detail">
        <?php echo $rs['detail_txtbox']; ?>
        <div class="b-author">บันทึกโดย: <?php echo $rs['name_txt']; ?></div>
    </div>
</div>
<?
            $sql="Select * From blog_data Where id<'$id' Order By id DESC Limit 0,1";
            $result2=mysql_query($sql);
            $num2=mysql_num_rows($result2);
            if($num2>=1){
                $rs2=mysql_fetch_assoc($result2);
                echo '||xx||';
?>
<div onclick="viewBlog('<?php echo $rs2['id']; ?>');">ดูบันทึก: <?php echo $rs2['title_txt']; ?></div>
<?php
            }else{
                echo '||xx||false';
            }
        }
    }
?>
ต่อไปสร้างไฟล์ del.php สำหรับลบบันทึกครับ
<?php
    include_once('config.inc.php');
     
    $get=$_GET;
 
    $sql="Delete From blog_data Where id='".$get['id']."'";
    if(mysql_query($sql)){
        header('Location: index.php');
        exit();
    }
?>
รูปผลการทำงานครับ

diary_result1

diary_result2

diary_result3

ลองทดลองทำกันดูนะครับ แล้วลองเอามาแลกเปลี่ยนกันว่าทำได้แบบไหนบ้าง ใครมี Idia ดีๆที่จะสามารถเติมแต่งงานชิ้นนี้เอามาแชร์กันนะครับ แล้วจะรอชื่นชมผลงานครับ ใครอ่านบทความนี้แล้ว อย่าลืมส่งต่อความรู้ให้เพื่อนๆและกด Like Fanpagehttp://www.facebook.com/pages/phpdevthailand/432775100101469 กันด้วยนะครับ ขอให้มีความสุขกับการเขียนโปรแกรมครับ /iBoy
ความคิดเห็น
(มีผู้เข้าชม 4,104 ครั้ง, 1 ผู้เข้าชมในวันนี้)

Related posts