วิธีการเขียนบทความด้วย CKEditor เก็บลงฐานข้อมูล ~ Bookneo

วันอาทิตย์ที่ 16 ธันวาคม พ.ศ. 2555

วิธีการเขียนบทความด้วย CKEditor เก็บลงฐานข้อมูล

เป็นบทความต่อเนื่องจากบทความเรื่อง การติดตั้ง CKEditor บทความนี้ไม่ใช่เรื่องยาก เพราะเป็นเพียงแต่การนำเอา ความรู้หรือ code จากบทความก่อนๆมาใช้งานเท่านั้น หากท่านทำความเข้าใจในบทความก่อนๆมาเพียงพอ บทความนี้ก็เป็นเรื่องที่ง่ายมากๆสำหรับท่าน..... บทความนี้ประกอบด้วย ไฟล์ 3 ไฟล์ ดังนี้
1. config.php
2. write_article.php
3. write_article_sql.php

มาสร้างฐานข้อมูลกันก่อน ผมจะตั้งชื่อว่า myarticles

SQL สร้างตารางฐานข้อมูลสำหรับทดสอบ

CREATE TABLE `myweb`.`myarticles` (
      `id_article` int(11) NOT NULL AUTO_INCREMENT,
      `author` varchar(255) NOT NULL DEFAULT '',
      `title` varchar(255) NOT NULL DEFAULT '',
      `article` text NOT NULL,
      `datetime` datetime NOT NULL DEFAULT '0000-00-00 00:00:00',
      PRIMARY KEY (`id_article`)
    );

ส่วนนี้เป็นส่วนที่เรียก CKEditor ขึ้นมาใช้งาน โดยกำหนด id = "editor1" ให้กับ textarea
ส่วน CKEditor ผมจะเรียกใช้งานตามแบบที่สอง ของบทความที่แล้ว...
จากนั้นผมก็เพิ่ม input สำหรับกรอกชื่อผู้แต่ง และ input สำหรับชื่อเรื่อง Title
แล้วก็ปุ่มสำหรับ submit เข้าไปดังนี้....

<form name="myform" method="post" action="write_article_sql.php">
<div>
    Author: <input style="width:200px;" name="author" id="author" type="text">
</div>
<div>
    Title: <input style="width:350px;" name="title" id="title" type="text">
</div>
<div>
    <textarea style="visibility: hidden; display: none;" name="editor1"
              id="editor1" cols="50" rows="10"></textarea>
</div>
<div><input name="submit" value="บันทึก" type="submit"></div>

<script type="text/javascript">
CKEDITOR.replace('editor1', {
skin   : 'kama', //กำหนดรูปแบบหน้าตา
height   : 200, //กำหนดความสูง
width    : 500,//กำหนดความกว้าง
toolbar: 'Myck' //เรียกใช้งาน ckeditor จากไฟล์ config.js
});
</script>

</form>

Code ที่เสร็จแล้ว
ไฟล์ write_article.php

<!DOCTYPE html">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
        <script type="text/javascript" src="write_article.js"></script>
        <style type="text/css">
        body{background: #f2f2f2;margin:50px auto 0px auto;width:550px;}
        </style>
    </head>
    <body>
        
<div style="border:1px solid #999999;">
<div style="background: #B2E9F4;border:5px solid #dddddd;padding:20px;">
 
<form name="myform" method="post" action="write_article_sql.php">
 
<div>Author: <input style="width:200px;" name="author" id="author" type="text"></div>
 
<div>Title: <input style="width:350px;" name="title" id="title" type="text"></div>
 
<div><textarea name="editor1" id="editor1" cols="50" rows="10"></textarea></div>
 
<div><input name="submit" value="บันทึก" type="submit"></div>
 
<script type="text/javascript">
CKEDITOR.replace('editor1', {
skin   : 'kama', //กำหนดรูปแบบหน้าตา
height   : 200, //กำหนดความสูง
width    : 500,//กำหนดความกว้าง
toolbar: 'Myck' //เรียกใช้งาน ckeditor จากไฟล์ config.js
});
</script>
 
</form>
</div>
</div>

    </body>
</html>

ต่อไปเป็นการสร้างไฟล์สำหรับการรับค่า ข้อมูลเข้ามาแล้วบันทึกลงฐานข้อมูล
สร้างไฟล์ write_article_sql.php

include 'config.php'; //นำเข้าไฟล์ config.php

$author = $_POST['author']; //รับค่าตัวแปรเข้ามาแบบ POST
$title = $_POST['title'];
$editor1 = $_POST['editor1'];
$datetime = date("Y-m-d H:i:s"); //เก็บวันเดือนปีและเวลาด้วย function date

if(isset($author) && ($title) && ($editor1)){ //ตรวจสอบค่าของตัวแปร ถ้ามีก็ทำต่อไป
$sql = "insert into myarticles (author,title,article,datetime)
values ('$author', '$title', '$editor1', '$datetime')";
mysql_query($sql);

echo "บันทึกข้อมูลเรียบร้อยแล้ว";
mysql_close();
}

หรือ ท่านจะส่งไปที่ไฟล์ show_article.php
ด้วย header("Location: show_article.php");ก็ได้ ถ้าท่านจะส่งด้วย header localtion
ก็อย่าลืม ใส่ ob_start(); เอาไว้ด้านบนสุดของเพจด้วยนะครับ ของดอธิบายเรื่องนี้ครับ

ต่อไปก็เป็นไฟล์สำหรับดึงข้อมูลจากฐานข้อมูลมาแสดง
เรื่องนี้จะยาวนิดหนึ่ง ผมขอยกตอนนี้ไปไว้บทความต่อไปครับ..... ^^