Long Live The King
ข้าพเจ้าไม่ได้มีพรสวรรค์พิเศษอะไร ข้าพเจ้าเพียงแต่มีความกระหายใคร่รู้อยู่เสมอ ทุ่มเทให้กับสิ่งที่อยากรู้ พากเพียรอย่างทรหด และสำรวจวิจารณ์ความรู้ของตัวเองเป็นประจำ ปัจจัยเหล่านี้คือที่มาของแนวคิดต่างๆ ของข้าพเจ้า .... อัลเบิร์ต ไอน์สไตน์

วันจันทร์ที่ 31 ธันวาคม พ.ศ. 2555

วิธีการทำ counter นับจำนวนผู้เข้าชมเว็บไซต์อย่างง่ายด้วย PHP SQL



วิธีการนับจำนวนผู้เยี่ยมชมเว็บไซต์ เมื่อมีการเปิดหน้าเพจเราจะทำการเก็บค่า วันเดือนปี, ip, ส่งไปบันทึกลงฐานข้อมูล เพื่อเอาไว้เช็คจำนวนการเปิดหน้าเพจ มีด้วยกัน 3แบบ 1. Open Page เช็คการเปิดหน้าเพจอย่างเดียวไม่สนใจว่าจะเป็น ip เดียวกันหรือคนละ ip นั่นคือจำนวนการอ่านในหน้าเพจแต่ละเพจนั่นเอง 2. Today เช็คจากจำนวน ip จะนับเฉพาะ ip ของวันปัจจุบันเท่านั้น ถ้าเป็น ip ที่ซ้ำกันนับให้แค่ 1 3. Total เช็คจากจำนวน ip ถ้าเป็น ip ที่ซ้ำกัน ไม่ว่าจะใช้คอมกี่เครื่องเปิดหน้าเพจ แต่ถ้าเป็น ip เดียวกันก็นับให้แค่ 1 เท่านั้น....

ขั้นตอนแรกท่านก็จะต้องสร้างฐานข้อมูลเพื่อทดสอบกันก่อน
SQL สร้างฐานข้อมูลเพื่อทดสอบ

CREATE TABLE `counter` (
`id_visit` int(11) NOT NULL AUTO_INCREMENT,
`date_visit` varchar(30) NOT NULL DEFAULT '',
`ip_visit` varchar(30) NOT NULL DEFAULT '',
`visit` int(5) NOT NULL DEFAULT 0,
PRIMARY KEY (`id_visit`)
);

ขั้นตอนที่2 เก็บค่าต่างๆเพื่อบันทึกลงฐานข้อมูล ในส่วนนี้ท่านสามารถนำไปแปะไว้ตามเพจต่างๆได้ เพื่อเช็ค
จำนวนการอ่านในหน้าเพจนั่นๆ แต่ถ้าเพจของท่านเปิดลิงค์ด้วย id ท่านก็เก็บ id บันทึกลงไปด้วย
พอตอนนับเราก็อ้างถึง id นั้นๆไป ในส่วนของบทความนี้เป็นแบบเบสิกเท่านั้นครับ...

Code: สำหรับบันทึกข้อมูล

include 'config.php';
$date  =date("d-m-Y");
$ip = $_SERVER['REMOTE_ADDR'];
$sql="INSERT INTO counter(date_visit,ip_visit,visit)VALUES
('$date', '$ip', '1')";
mysql_query($sql);
?>

ขั้นตอนที่3 ส่วนที่1

1. Open Page เช็คการเปิดหน้าเพจอย่างเดียวไม่สนใจว่าจะเป็น ip เดียวกันหรือคนละ ip นั่นคือจำนวนการอ่านในหน้าเพจแต่ละเพจนั่นเอง Code:
 

<?php
$today = date('d-m-Y');
$sql="Select count(ip_visit) as visit From counter" ;
$result= mysql_query($sql);
$row = mysql_fetch_array($result);
$visit = $row[visit];
$id_visit = $row[id_vist];
$openpage =  str_pad($visit,6,0,str_pad_left); //ทำเป็นเลข 6 หลักด้วยการเติมเลข 
// 0 ข้างซ้าย

ขั้นตอนที่3 ส่วนที่2
2. Today เช็คจากจำนวน ip จะนับเฉพาะ ip ของวันปัจจุบันเท่านั้น ถ้าเป็น ip ที่ซ้ำกันนับให้แค่ 1
Code:

$today = date('d-m-Y');
$sql="Select count(DISTINCT(ip_visit)) as visit From counter
where date_visit = '$today'" ;
$result= mysql_query($sql);
$row = mysql_fetch_array($result);
$visit = $row[visit];
$id_visit = $row[id_vist];
$today = str_pad($visit,6,0,str_pad_left);

ขั้นตอนที่3 ส่วนที่3
3. Total เช็คจากจำนวน ip ถ้าเป็น ip ที่ซ้ำกัน ไม่ว่าจะใช้คอมกี่เครื่องเปิดหน้าเพจ แต่ถ้าเป็น ip
เดียวกันก็นับให้แค่ 1 เท่านั้น....
Code:

$sql="Select count(DISTINCT(ip_visit)) as visit From counter";
$result= mysql_query($sql);
$row = mysql_fetch_array($result);
$visit = $row[visit];
$total = str_pad($visit,6,0,str_pad_left);

ขั้นตอนที่4
นำส่วนที่ต้องการมาแสดงผล

<div style="width:230px;">
<div style="border:1px solid #dddddd;padding:5px;background:#eeeeee;">
<div id="showcounter">
<center>
<table>
<tr><td>Open Page : </td>
<td id="counter"bgcolor="#0252A1"><?=$openpage?></td></tr>
<tr><td>Today : </td>
<td id="counter"bgcolor="#1BAFD5"><?=$today?></td></tr>
<tr><td>Total : </td>
<td id="counter"bgcolor="#D96003"><?=$total?></td></tr>
</table>
</center>
</div>
</div>
</div>

บทความนี้ขอจบเพียงเท่านี้ครับ.....

Code ที่เสร็จแล้ว

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style>
#showcounter{border:1px solid #999999;background:#ADE8F7;
padding:5px 9px 5px 5px;}
#counter{letter-spacing: 3px;font-weight:bold;color:#ffffff;}
td{padding:1px 5px 1px 5px;}
</style>
</head>
<body>

<?php
include 'config.php';
$date  =date("d-m-Y");
$ip = $_SERVER['REMOTE_ADDR'];
$sql="INSERT INTO counter(date_visit,ip_visit,visit)VALUES
('$date', '$ip', '1')";
mysql_query($sql);


/*----------------------OPEN PAGE----------------------*/
$today = date('d-m-Y');
$sql="Select count(ip_visit) as visit From counter" ;
$result= mysql_query($sql);
$row = mysql_fetch_array($result);
$visit = $row[visit];
$id_visit = $row[id_vist];
$openpage =  str_pad($visit,6,0,str_pad_left);

/*----------------------TODAY BY IP----------------------*/
$today = date('d-m-Y');
$sql="Select count(DISTINCT(ip_visit)) as visit From counter
where date_visit = '$today'" ;
$result= mysql_query($sql);
$row = mysql_fetch_array($result);
$visit = $row[visit];
$id_visit = $row[id_vist];
$today = str_pad($visit,6,0,str_pad_left);

/*----------------------TOTAL IP-----------------------*/
$sql="Select count(DISTINCT(ip_visit)) as visit From counter";
$result= mysql_query($sql);
$row = mysql_fetch_array($result);
$visit = $row[visit];
$total = str_pad($visit,6,0,str_pad_left);

?>
<div style="width:230px;">
<div style="border:1px solid #dddddd;padding:5px;background:#eeeeee;">
<div id="showcounter">
<center>
<table>
    
<tr><td>Open Page : </td><td id="counter"bgcolor="#0252A1">
<?=$openpage?></td></tr>

<tr><td>Today : </td><td id="counter"bgcolor="#1BAFD5">
<?=$today?></td></tr>

<tr><td>Total : </td><td id="counter"bgcolor="#D96003">
<?=$total?></td></tr>

</table>
</center>
</div>
</div>
</div>
</body>
</html>


Read More

วันเสาร์ที่ 29 ธันวาคม พ.ศ. 2555

วิธีการเรียงลำดับข้อมูลจาก Database ที่ดึงขึ้นมาแสดงด้วย Order By (PHP)



วิธีการดึงข้อมูลจากฐานข้อมูลขึ้น มาแสดงโดยการเรียงลำดับข้อมูลจากข้อมูลแถวแรกของฟิลด์ ไปหาข้อมูลแถวสุดท้าย หรือ เรียงลำดับข้อมูลจากข้อมูลแถวสุดท้ายของฟิลด์ ไปหาข้อมูลแถวแรกสุด ด้วยการใช้ Order By + Keyword + ASC หรือ DESC......

เรามีข้อมูลอยู่ในฟิลด์ id, username, password ชื่อตารางว่า members ข้อมูลในตารางมีดังนี้

id username password
1 a 1
2 b 2
3 c 3
4 d 4
5 e 5

เราต้องการดึงข้อมูลในฟิลด์ username มาแสดงโดยให้เรียงลำดับจากบนลงล่างตามลำด้บ abcde แบบนี้
โดยวิธีการดังนี้

$sql = "select * from members order by username ASC";

หรือ ท่านจะใช้ order by id ASC ก็ได้เช่นกัน ซึ่่งเป็นการเรียงลำดับจาก id แรกไปหา id สุดท้าย

ส่วนวิธีการเรียงลำดับจากข้อมูลสุดท้ายขึ้นไปหาข้อมูลแรก จาก edcba แบบนี้โดยวิธีการดังนี้

$sql = "select * from members order by username DESC";

หรือ ท่านจะใช้ Order By Id DESC ก็ได้เช่นกัน ซึ่่งเป็นการเรียงลำดับจาก id สุดท้ายไปหา id แรกนั่นเองครับ...

Read More

วันพฤหัสบดีที่ 27 ธันวาคม พ.ศ. 2555

เปลี่ยน Background ตอนที่เราเปิดหรือ Refresh หน้าเว็บไซต์ด้วย Javascript



บทความนี้ไม่มีอะไรมากเขียนด้วย code javascript สั้นๆ ด้วยการใช้ฟังก์ชั่น random รูปออกมา แสดงเท่านั้นเอง....

ผมก็สร้างไฟล์ขึ้นมาไฟล์หนึ่ง ตั้งชื่อว่า change_background.php จากนั้นก็เขียนโค้ดระหว่าง
<head></head> ด้วย javascript ดังนี้
สร้างฟังก์ชั่น  javascript

<script type="text/javascript">
function ChangeBackground()
{
var count = Math.ceil(Math.random()*4);//random จำนวนของรูปที่ใช้ คือ 4 รูป
//alert(count);
if(count==0){ //ถ้าออกมาเป็น 0 ก็ให้เท่ากับ 1
var count = 1;
}
document.body.background = 'images/'+count+'.jpg';//ที่อยู่ของรูป
document.body.style.backgroundRepeat = "repeat";
//กำหนด css repeat หรือ no-repeat แล้วแต่รูปแบบ
}
</script>

เสร็จแล้วจากนั้นก็เรียกใช้งาน
<script type="text/javascript">
ChangeBackground();
</script>

เท่านี้ก็เรียบร้อยแล้ว เร็วจังเลย - -"
Code ที่เสร็จแล้ว

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript">
function ChangeBackground()
{
var count = Math.ceil(Math.random()*4);
//alert(count);
if(count==0){
var count = 1;
}
document.body.background = 'images/'+count+'.jpg';
document.body.style.backgroundRepeat = "repeat";
document.body.style.backgroundPosition = "top";
}
</script>
</head>
<body>

<!-- code ของท่านอยู่ตรงนี้ -->

</body>
<script type="text/javascript">
ChangeBackground();
</script>
</html>


Read More

วันศุกร์ที่ 21 ธันวาคม พ.ศ. 2555

วิธีทำ slide ด้วยการดึงข้อมูลรูปภาพจากฐานข้อมูลมาแสดง PHP



จากบทความก่อนนี้เราได้ code สำหรับการ upload image ไปแล้วเพื่อให้เกิดความต่อเนื่องผมก็เลยคิดว่า เราน่าจะเอารูปภาพ จากการ upload มาทำเป็น slide ด้วยเลยดีกว่า ผมก็เลยไป download plugin ของ jQuery ที่เขียนเป็น slide มาชื่อว่า pikachoose มาปรับแต่งตามใจฉันนิดหน่อย......

ก่อนอื่นหากท่านต้องการตัว master ก็ไป download ที่นี่ http://pikachoose.com/download/
ตัวที่ผมนำมาปรับแต่งนี้เป็น Version 4.1.6 ครับ เมื่อ download มาแล้วผมก็คัดเอาเฉพาะ folder
js, images, css แล้วก็ไฟล์ readme.html มา จากนั้นก็เปิดไฟล์ readme.html
ขึ้นมาให้ท่านกดที่ลิงค์แรก ก็จะเห็นเป็น slide ตัวอย่าง หลังจากนั้นก็ให้ท่านคลิกขวาเลือก
View Page Source (firefox) ท่านก็จะได้ code มาคล้ายๆแบบนี้

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<link type="text/css" href="with-carousel_files/styles.css" 
rel="stylesheet">
<script type="text/javascript" 
src="with-carousel_files/jquery.js"></script>
<script type="text/javascript" 
src="with-carousel_files/jquery_003.js"></script>
<script type="text/javascript"
src="with-carousel_files/jquery_002.js"></script>
<script language="javascript">
<!--
$(document).ready(
function (){
$("#pikame").PikaChoose();

$("#pikame").jcarousel({
initCallback: function(carousel)
{
$(carousel.list).find('img').click(function() {
var clicked = parseInt($(this).parents('.jcarousel-item')
.attr('jcarouselindex'));
var last = ($(this).parents('ul').find('li:last')
.index() == clicked-1) ? true : false;
if(!last){
clicked = (clicked-2<=0) ? 0 : clicked-2;
}
carousel.scroll(clicked);
});
}
});

});

-->
</script>


</head>
<body>
<div class="pikachoose">
    <ul id="pikame" class="jcarousel-skin-pika">
        <li><img src="pic1.jpg"/></li>
        <li><img src="pic2.jpg"/></li>
        <li><img src="pic3.jpg"/></li>
        <li><img src="pic4.jpg"/></li>
        <li><img src="pic5.jpg"/></li>
        <li><img src="pic6.jpg"/></li>
    </ul>
</div>

</body>
</html>

จากนั้นผมก็สร้างไฟล์ใหม่ขึ้นมา ชื่อ slide.php ก๊อปโค้ดด้านบนมาใส่ แล้วก็เริ่มปรับแต่ง เริ่มจาก
<link type="text/css" href="css/slidestyles.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.pikachoose.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.min.js"></script>

ตามมาด้วยตัดส่วนที่ไม่ต้องการออก
<script language="javascript">
<!--
$(document).ready(
function (){
$("#pikame").PikaChoose();

$("#pikame").jcarousel({scroll:4,
initCallback: function(carousel)
{
$(carousel.list).find('img').click(function() {
//console.log($(this).parents('.jcarousel-item').attr('jcarouselindex'));
carousel.scroll(parseInt($(this).parents('.jcarousel-item')
.attr('jcarouselindex')));
});
}
});

});

-->
</script>

มาถึงจุดสำคัญของบทความนี้กันแล้ว นั่นก็คือการดึงข้อมูลรูปภาพจากฐานข้อมูลมาแสดงนั่นเอง
จากบทความเรื่อง "วิธีการ upload รูป + SQL + Resize + Show image from SQL"
เราจะนำฐานข้อมูลมาใช้กับบทความนี้ ด้วยเชื่อมต่อฐานข้อมูลเพื่อดึงรูปมาแสดงดังนี้

<div class="pikachoose">

<ul id="pikame" class="jcarousel-skin-pika">

<?php
include 'config.php';
$sql = "select * from images";
$result = mysql_query($sql);
$num = mysql_num_rows($result);
$i=0;
while($i<$num){
$row = mysql_fetch_array($result);
$image = $row['image'];
if($image != ""){
echo "<li>";
echo "<img src='../upload/$image'>";
echo "</li>";
}
$i++;
}
?>

</ul>

</div>

ส่วนของไฟล์ CSS ก็แล้วแต่ท่านจะปรับแต่ง ตามใจชอบครับ
ไฟล์ตัวอย่างที่ผมนำมาให้ Download นี้
ผมได้ปรับแต่งไว้แล้ว โดยให้ width:270px;  overflow:hidden; ส่วน height
ก็แล้วแต่ท่านจะปรับแต่งตามสัดส่วนของรูปภาพ.....
ในส่วนของไฟล์ upload image จากบทความก่อน ก็ให้ท่านกำหนดตัวแปร $newwidth = 270px;ด้วย
ความกว้างของรูปจะได้เท่ากัน

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<link type="text/css" href="css/slidestyles.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.pikachoose.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.min.js"></script>
<script language="javascript">
<!--
$(document).ready(
function (){
$("#pikame").PikaChoose();

$("#pikame").jcarousel({scroll:4,
initCallback: function(carousel)
{
$(carousel.list).find('img').click(function() {
//console.log($(this).parents('.jcarousel-item').attr('jcarouselindex'));
carousel.scroll(parseInt($(this)
.parents('.jcarousel-item').attr('jcarouselindex')));
});
}
});

});

-->
</script>
<style>
#name{margin-top:100px;color:#4F5C4F;}
#name a{text-decoration: none;}
</style>

</head>
<body>
<!-- not really needed, i'm using it to center the gallery. -->
<center>
<div id="name"><b><a href="http://www.bookneo.com">Bookneo.com</a></b></div>
<div class="pikachoose">

<ul id="pikame" class="jcarousel-skin-pika">

<?php
include 'config.php';
$sql = "select * from images";
$result = mysql_query($sql);
$num = mysql_num_rows($result);
$i=0;
while($i<$num){
$row = mysql_fetch_array($result);
$image = $row['image'];
if($image != ""){
echo "<li>";
echo "<img src='../upload/$image'>";
echo "</li>";
}
$i++;
}
?>

</ul>

</div>
</center>
</body>
</html>

ไว้พบกันบทความต่อไปครับ ^_^

Read More

วิธีการ upload รูป + SQL + Resize + Show image from SQL



บทความนี้เป็นการนำเอา Code จากบทความ "UPDATE วิธีการ upload ไฟล์ขึ้น webserver ด้วย PHP + Resize" มาปรับปรุงเพิ่มเติมใน ส่วนของการบันทึก ที่อยู่ของไฟล์รูปลงฐานข้อมูล พร้อมทั้งวิธีการดึงขึ้นมาแสดงหน้าเว็บไซต์....

จากบทความก่อนเรานำมาปรับปรุงเพิ่มเติม code สำหรับการบันทึกลงฐานข้อมูล ดังนี้
if($imageupload != ""){ //ถ้าตัวแปรไฟล์ไม่เท่ากับค่าว่าง
$sql = "insert into images (image) values ('$showpic')";
mysql_query($sql);

เสร็จแล้วในส่วนของการบันทึกลงฐานข้อมูล
ต่อไปเป็นส่วนของการนำมาแสดง ดังนี้

<div id="showpic">
        <ul>
            <?php
            $sql = "select * from images order by id_image";
            $result = mysql_query($sql);
            $num_rows = mysql_num_rows($result);
            $i=0;
            while($i<$num_rows){
                $row = mysql_fetch_array($result);
                $image = $row['image'];

                echo "<li style='height:60px;'>";
                echo "<a href='$image'>";
                echo "<img src='$image'/>";
                echo "</a>";
                echo "</li>";

                $i++;
            }
            mysql_close();
            ?>
        </ul>
    </div>

เสร็จแล้วในส่วนของการนำข้อมูลจากฐานข้อมูลขึ้นมาแสดง

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

<?php
include 'config.php';
$imageupload = $_FILES['imageupload']['tmp_name'];
$imageupload_name = $_FILES['imageupload']['name'];
$path = "uploads";
$newwidth=90;

if(isset($_POST['submit'])){
if($imageupload){
$arraypic = explode(".",$imageupload_name);
$filename = strtolower($arraypic[0]); //แปลงเป็นตัวพิมพ์เล็ก
$filetype = strtolower($arraypic[1]);
if($filetype=="jpg" || $filetype=="jpeg" || $filetype=="png"
|| $filetype=="gif"){

if($filetype=="jpg" || $filetype=="jpeg"){
$src = imagecreatefromjpeg($imageupload);
}
else if($filetype=="png"){
$src = imagecreatefrompng($imageupload);
}
else if($filetype=="gif"){
$src = imagecreatefromgif($imageupload);
}

list($width,$height)=getimagesize($imageupload);
$newheight=($height/$width)*$newwidth;
$tmp=imagecreatetruecolor($newwidth,$newheight);
imagecopyresampled($tmp,$src,0,0,0,0,$newwidth,$newheight,$width,$height);

if($filetype=="jpg" || $filetype=="jpeg"){
imagejpeg($tmp,$path."/".$filename.".".$filetype);
}
else if($filetype=="png"){
imagepng($tmp,$path."/".$filename.".".$filetype);
}
else{
imagegif($tmp,$path."/".$filename.".".$filetype);
}

}else {
echo "<div><center><h3>ERROR : ไม่สามารถ Upload รูปภาพได้</h3></center></div>";
}
}
$showpic = $path."/".$filename.".".$filetype;
if($imageupload != ""){
$sql = "insert into images (image) values ('$showpic')";
mysql_query($sql);
}
}

?>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style>
body{background: #eeeeee;margin:0 auto;}
#form_upload{margin:0px auto;}
#showimage{margin:100px auto 20px auto;}
#showpic li{float: left;list-style: none;
margin-left:10px;margin-top:10px;padding: 10px;}
</style>
</head>
<body>
<center><div id="showimage">
<?php
if($_POST[submit]){
if($imageupload != ""){
echo "<a href='$showpic'><img width=90 src='$showpic'></img></a>";
}
}
?>
</div></center>

<div id="form_upload">
<form method="post" enctype="multipart/form-data">
<center> Image: <input name="imageupload" type="file" size="35"/><br/>
<input type="submit" name="submit" value="Upload"/></center>
</form>
</div>

<div id="showpic">
<ul>
<?php
$sql = "select * from images order by id_image";
$result = mysql_query($sql);
$num_rows = mysql_num_rows($result);
$i=0;
while($i<$num_rows){
$row = mysql_fetch_array($result);
$image = $row['image'];

echo "<li style='height:60px;'>";
echo "<a href='$image'>";
echo "<img src='$image'/>";
echo "</a>";
echo "</li>";

$i++;
}
mysql_close();
?>
</ul>
</div>
</body>
</html>


Read More

วันพฤหัสบดีที่ 20 ธันวาคม พ.ศ. 2555

UPDATE วิธีการ upload ไฟล์ขึ้น webserver ด้วย PHP + Resize



ในบทความนี้จะเป็นการนำเอาบทความเรื่อง "วิธีการ upload ไฟล์ขึ้น webserver ด้วย PHP อย่างง่าย" มาปรับปรุงเพิ่มเติมการ Resize เข้าไป ความจริงเรื่องนี้ ผมก็คิดอยู่นานว่าจะรวมเอาวิธีการ upload ลง Database ด้วยดีใหม แต่การใช้งานจริงก็ไม่จำเป็นเสมอไปว่าจะต้อง upload file ลงฐานข้อมูลทั้งหมด เพราะฉนั้นเรื่องการ upload file ลงฐานข้อมูลขอยกไปตอนหน้า มาดูเรื่องการ Resize กันก่อนครับ.....

จากไฟล์เดิม บทความก่อนหน้านี้ เราจะนำ form สำหรับ upload มาโดยไม่ต้องปรับอะไรเพิ่มเติม ดังนี้
ไฟล์ upload_resize.php

<div id="form_upload">
<form method="post" enctype="multipart/form-data">
<center> Image: <input name="imageupload" type="file" size="35"/><br/>
<input type="submit" name="submit" value="Upload"/></center>
</form>
</div>

แต่จะปรับเพิ่มเติมในเรื่องของการโชว์รูป ตอนที่เราได้ upload เสร็จแล้วด้วยการเพิ่มลิงค์เพื่อดูขนาดภาพจริง
ดังนี้
ไฟล์ upload_resize.php

<div id="showimage">
<?php if($_POST[submit]){ echo "<a href='$showpic'>
    <img width=150 src='$showpic'></img></a>";}?>
</div>

จากนั้นก็เขียนนำ code php  มาปรับเพิ่มเติมด้งนี้
ไฟล์ upload_resize.php

$imageupload = $_FILES['imageupload']['tmp_name'];
$imageupload_name = $_FILES['imageupload']['name'];
$path = "uploads";//กำหนด Folder ที่เก็บรูปภาพ
$newwidth=500;    //กำหนด ขนาดความกว้างของรูปภาพ ที่ต้องการ Resize

if(isset($_POST['submit'])){
if($imageupload){
$arraypic = explode(".",$imageupload_name);//แบ่งชื่อไฟล์กับนามสกุลออกจากกัน
$filename = strtolower($arraypic[0]); //แปลงชื่อไฟล์เป็นตัวพิมพ์เล็ก
$filetype = strtolower($arraypic[1]); //แปลงนามสกุลไฟล์เป็นตัวพิมพ์เล็ก
if($filetype=="jpg" || $filetype=="jpeg" || $filetype=="png"
|| $filetype=="gif"){

if($filetype=="jpg" || $filetype=="jpeg"){
$src = imagecreatefromjpeg($imageupload);//ฟังก์ชั่นสำหรับ create file ตามนามสกุลไฟล์
}
else if($filetype=="png"){
$src = imagecreatefrompng($imageupload);
}
else if($filetype=="gif"){
$src = imagecreatefromgif($imageupload);
}

list($width,$height)=getimagesize($imageupload);
$newheight=($height/$width)*$newwidth;
$tmp=imagecreatetruecolor($newwidth,$newheight);
imagecopyresampled($tmp,$src,0,0,0,0,$newwidth,$newheight,$width,$height);

if($filetype=="jpg" || $filetype=="jpeg"){
imagejpeg($tmp,$path."/".$filename.".".$filetype);
}
else if($filetype=="png"){
imagepng($tmp,$path."/".$filename.".".$filetype);
}
else{
imagegif($tmp,$path."/".$filename.".".$filetype);
}

}else {
echo "<div><center><h3>ERROR : ไม่สามารถ Upload รูปภาพได้</h3></center></div>";
}
}

}
$showpic = $path."/".$filename.".".$filetype;

จบแล้วสำหรับการ Update วิธีการ upload ไฟล์ขึ้น webserver....

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

<?php
$imageupload = $_FILES['imageupload']['tmp_name'];
$imageupload_name = $_FILES['imageupload']['name'];
$path = "uploads";
$newwidth=500;

if(isset($_POST['submit'])){
if($imageupload){
$arraypic = explode(".",$imageupload_name);
$filename = strtolower($arraypic[0]); //แปลงเป็นตัวพิมพ์เล็ก
$filetype = strtolower($arraypic[1]);
if($filetype=="jpg" || $filetype=="jpeg" || $filetype=="png"
|| $filetype=="gif"){

if($filetype=="jpg" || $filetype=="jpeg"){
$src = imagecreatefromjpeg($imageupload);
}
else if($filetype=="png"){
$src = imagecreatefrompng($imageupload);
}
else if($filetype=="gif"){
$src = imagecreatefromgif($imageupload);
}

list($width,$height)=getimagesize($imageupload);
$newheight=($height/$width)*$newwidth;
$tmp=imagecreatetruecolor($newwidth,$newheight);
imagecopyresampled($tmp,$src,0,0,0,0,$newwidth,$newheight,$width,$height);

if($filetype=="jpg" || $filetype=="jpeg"){
imagejpeg($tmp,$path."/".$filename.".".$filetype);
}
else if($filetype=="png"){
imagepng($tmp,$path."/".$filename.".".$filetype);
}
else{
imagegif($tmp,$path."/".$filename.".".$filetype);
}

}else {
echo "<div><center><h3>ERROR : ไม่สามารถ Upload รูปภาพได้</h3></center></div>";
}
}

}
$showpic = $path."/".$filename.".".$filetype;
?>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style>
body{background: #eeeeee;margin:0 auto;}
#form_upload{margin:0px auto;}
#showimage{margin:100px auto 20px auto;}
</style>
</head>
<body>
<center><div id="showimage">
<?php if($_POST[submit]){ echo "<a href='$showpic'>
    <img width=150 src='$showpic'></img></a>";}?>
</div></center>

<div id="form_upload">
<form method="post" enctype="multipart/form-data">
<center> Image: <input name="imageupload" type="file" size="35"/><br/>
<input type="submit" name="submit" value="Upload"/></center>
</form>
</div>
</body>
</html>


Read More

วันพุธที่ 19 ธันวาคม พ.ศ. 2555

วิธีการ upload ไฟล์ขึ้น webserver ด้วย PHP อย่างง่าย



ได้เวลาของการ upload ไฟล์กันแล้ว บทความนี้เป็น code upload file php อย่างง่าย ไฟล์ในที่นี้ คือ จำพวกไฟล์ image อย่างนามสกุล jpg , jpeg , png , gif คือไฟล์รูปภาพนั่นเอง.....

ในบทความนี้ไม่เกี่ยวข้องกับ Database สิ่งที่เราต้องสร้าง มี 1โฟล์เดอร์ กับ 1ไฟล์
โฟล์เดอร์ นี้ผมตั้งชื่อว่า upload ส่วนไฟล์คือ uload.php

สำหรับ โฟล์เดอร์ upload ท่านต้องทำการ permission ให้เป็น mod 777 ด้วย
ส่วนไฟล์ upload.php เราจะเริ่มต้นด้วยการ include อีกแล้ว....

include 'config.php';

จากนั้นก็สร้าง form สำหรับ upload ดังนี้
<div id="form_upload">
<form method="post" enctype="multipart/form-data">
<center> Image: <input name="imageupload" type="file" size="35"/><br/>
<input type="submit" name="submit" value="Upload"/></center>
</form>
</div>

ไฟล์นี้เป็นไฟล์แบบ submit ตัวเอง จึงไม่มี action=""
จากนั้นก็เขียน code php ด้งนี้

$imageupload = $_FILES['imageupload']['tmp_name'];
$imageupload_name = $_FILES['imageupload']['name'];

if(isset($_POST['submit'])){
if($imageupload){
$arraypic = explode(".",$imageupload_name);//แบ่งชื่อไฟล์กับนามสกุลออกจากกัน
$lastname = strtolower($arraypic);
$filename = $arraypic[0];//ชื่อไฟล์
$filetype = $arraypic[1];//นามสกุลไฟล์

//นำนามสกุลไฟล์มาเช็ค
if($filetype=="jpg" || $filetype=="jpeg" || $filetype=="png"
|| $filetype=="gif"){ //เพิ่มการอนุญาติให้ไฟล์นามสกุลอื่นๆ เพิ่มตรงนี้

$newimage = $filename.".".$filetype;//รวมชื่อไฟล์กับนามสกุลเข้าด้วยกัน
copy($imageupload,"uploads/".$newimage); //โฟลเดอร์สำหรับเก็บรูป/ไฟล์รูป
}else {
echo "<h3>ERROR : ไม่สามารถ Upload รูปภาพ</h3>";
}
}

}
$showpic = "uploads/".$newimage; //สร้างตัวแปรสำหรับการแสดงหลังจากการ upload สำเร็จ

จบแล้วสำหรับการเขียน code upload file ....

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

<?php
$imageupload = $_FILES['imageupload']['tmp_name'];
$imageupload_name = $_FILES['imageupload']['name'];

if(isset($_POST['submit'])){
if($imageupload){
$arraypic = explode(".",$imageupload_name);//แบ่งชื่อไฟล์กับนามสกุลออกจากกัน
$lastname = strtolower($arraypic);
$filename = $arraypic[0];//ชื่อไฟล์
$filetype = $arraypic[1];//นามสกุลไฟล์

if($filetype=="jpg" || $filetype=="jpeg" || $filetype=="png"
|| $filetype=="gif"){

$newimage = $filename.".".$filetype;//รวมชื่อไฟล์กับนามสกุลเข้าด้วยกัน
copy($imageupload,"uploads/".$newimage); //โฟลเดอร์สำหรับเก็บรูป/ไฟล์รูป
}else {
echo "<h3>ERROR : ไม่สามารถ Upload รูปภาพ</h3>";
}
}

}
$showpic = "uploads/".$newimage;
?>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style>
body{background: #eeeeee;margin:0 auto;}
#form_upload{margin:0px auto;}
#showimage{margin:100px auto 20px auto;}
</style>
</head>
<body>
<center><div id="showimage">
<?php if($_POST[submit]){ echo "<img width=150 src='$showpic'";}?>
</div></center>

<div id="form_upload">
<form method="post" enctype="multipart/form-data">
<center> Image: <input name="imageupload" type="file" size="35"/><br/>
<input type="submit" name="submit" value="Upload"/></center>
</form>
</div>
</body>
</html>


Read More

วันอังคารที่ 18 ธันวาคม พ.ศ. 2555

Pagination Code สำหรับการแบ่งหน้า ด้วย PHP jQuery แบบ Ajax



ถึงช่วงเวลาของการแบ่งหน้าแล้ว เมื่อเราเขียนบทความเยอะขึ้นๆ มันก็จะเป็นแถวยาวลงมา เห็นแล้วอาจถอดใจ ด้วยความขี้เกียจอ่าน เพราะเห็นว่าหัวข้อมันเยอะ อย่ากระนั้นเลย เราก็มาแบ่งหัวข้อหน้าละกี่หัวข้อ ก็ว่ากันไป อาจจะทำให้บทความของเราดูน่าค้นหามากขึ้นก็เป็นได้ หรือ ไม่ทำให้เพจของเราสูงมากเกินไป....

SQL สร้างตารางฐานข้อมูลสำหรับทดสอบ
CREATE TABLE `myweb`.`article` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(255) NOT NULL DEFAULT '',
  PRIMARY KEY (`id`)
);

บทความนี้ มีไฟล์ด้วยกัน สองไฟล์ ไฟล์แรก pagination.php  ไฟล์ที่สอง pagination.js
ไฟล์ pagination.php แบ่งเป็น 3 ช่วง
1. CSS
2. Code สำหรับการแบ่งหน้า ส่วนนี้ท่านสามารถที่จะ copy เก็บไว้ได้เลยเอาไปแบ่งหน้า ตรงหน้าใหนก็ได้
3. Code สำหรับการดึงข้อมูลจากฐานข้อมูล ขึ้นมาแสดง

มาเริ่มกันที่ css ก่อน คงจะไม่ขอพูดอะไรมากสำหรับบทความนี้นะครับ
CSS Code
ไฟล์ pagination.php

div.pagination {
padding: 3px;
margin: 3px;
}

div.pagination a {
padding: 2px 5px 2px 5px;
margin: 2px;
border: 1px solid #AAAADD;
text-decoration: none; /* no underline */
color: #000099;
}
div.pagination a:hover, div.pagination a:active {
border: 1px solid #000099;
color: #000;
}
div.pagination span.current {
padding: 2px 5px 2px 5px;
margin: 2px;
border: 1px solid #000099;
font-weight: bold;
background-color: #000099;
color: #FFF;
}
div.pagination span.disabled {
padding: 2px 5px 2px 5px;
margin: 2px;
border: 1px solid #EEE;
color: #DDD;
}

ทีนี้ก็มาถึงส่วนที่2 เป็น Code ในส่วนของการแบ่งหน้า ส่วนนี้ผมใส่ onclick='pagination()เอาไว้
ถ้าเปลียนเป็น link ไปหาไฟล์ php เพื่อดึงข้อมูลออกมาแสดงโดยตรง ก็จะได้ code แบ่งหน้าแบบไฟล์
php ธรรมดาโดยทั่วไปไฟล์หนึ่งนั่นเอง แต่ไฟล์นี้ในบทความนี้ผมใช้ jQuery

ไฟล์ pagination.php

include('config.php');//นำเข้าไฟล์เชื่อมต่อฐานข้อมูล

$tbl_name="article";//ตัวแปร ตารางข้อมูลที่ต้องการนำมาแสดง
$limit = 4; //กำหนดว่าต้องการให้แสดงกี่หัวข้อต่อหนึ่งหน้า
$adjacents = 3;//จำเป็นต้องกำหนด
$page = $_POST['page']; //รับ ตัวแปร page เข้ามาแบบ post
if($page)
$start = ($page - 1) * $limit;  //กำหนดตัวแปร start
else
$start = 0;

$query = "SELECT COUNT(*) as num FROM $tbl_name";//นับแถวในตาราง
$total_pages = mysql_fetch_array(mysql_query($query));
$total_pages = $total_pages[num];
if ($page == 0) $page = 1;
$prev = $page - 1;
$next = $page + 1;
$lastpage = ceil($total_pages/$limit);
$lpm1 = $lastpage - 1;

$pagination = "";
if($lastpage > 1)
{
$pagination .= "<div class=\"pagination\">";
//previous button
if ($page > 1)
$pagination.= "<a href=# onclick='pagination($prev)'>« previous</a>";
else
$pagination.= "<span class=\"disabled\">« previous</span>";

//pages
if ($lastpage < 7 + ($adjacents * 2))
{
for ($counter = 1; $counter <= $lastpage; $counter++)
{
if ($counter == $page)
$pagination.= "<span class=\"current\">$counter</span>";
else
$pagination.= "<a href=# onclick='pagination($counter)'>$counter</a>";
}
}
elseif($lastpage > 5 + ($adjacents * 2))
{
if($page < 1 + ($adjacents * 2))
{
for ($counter = 1; $counter < 4 + ($adjacents * 2); $counter++)
{
if ($counter == $page)
$pagination.= "<span class=\"current\">$counter</span>";
else
$pagination.= "<a href=# onclick='pagination($counter)'>$counter</a>";
}
$pagination.= "...";
$pagination.= "<a href=# onclick='pagination($lpm1)'>$lpm1</a>";
$pagination.= "<a href=# onclick='pagination($lastpage)'>$lastpage</a>";
}
//in middle; hide some front and some back
elseif($lastpage - ($adjacents * 2) > $page && $page > ($adjacents * 2))
{
$pagination.= "<a href=# onclick='pagination(1)'>1</a>";
$pagination.= "<a href=# onclick='pagination(2)'>2</a>";
$pagination.= "...";
for ($counter = $page - $adjacents; $counter <= $page + $adjacents;
$counter++)
{
if ($counter == $page)
$pagination.= "<span class=\"current\">$counter</span>";
else
$pagination.= "<a href=# onclick='pagination($counter)'>$counter</a>";
}
$pagination.= "...";
$pagination.= "<a href=# onclick='pagination($lpm1)'>$lpm1</a>";
$pagination.= "<a href=# onclick='pagination($lastpage)'>$lastpage</a>";
}
//close to end; only hide early pages
else
{
$pagination.= "<a href=# onclick='pagination(1)'>1</a>";
$pagination.= "<a href=# onclick='pagination(2)'>2</a>";
$pagination.= "...";
for ($counter = $lastpage - (2 + ($adjacents * 2)); $counter <= $lastpage;
$counter++)
{
if ($counter == $page)
$pagination.= "<span class=\"current\">$counter</span>";
else
$pagination.= "<a href=# onclick='pagination($counter)'>$counter</a>";
}
}
}
//next button
if ($page < $counter - 1)
$pagination.= "<a href=# onclick='pagination($next)'>next »</a>";
else
$pagination.= "<span class=\"disabled\">next »</span>";
$pagination.= "</div>\n";
}

ต่อไปก็เป็น Code สำหรับการดึงข้อมูลจากฐานข้อมูล ขึ้นมาแสดง
ไฟล์ pagination.php

<div id="loading"></div> tagนี้เอาไว้โชว์ gif animation
<div id="showtitle"> tagนี้โชว์ข้อมูล
<ul>
<?php

/* Get data. */
$sql = "SELECT * FROM article LIMIT $start, $limit"; //เริ่มและจำกัดด้วย limit
$result = mysql_query($sql);
while( $row = mysql_fetch_array($result)){ //วนลูปออกมาแสดง

$title = $row['title'];

echo "<li>";
echo "<a href=#>";
echo "<div id='imageall'>";
echo $title;
echo "</div>";
echo "</a>";
echo "</li>";

}
echo "<br/><hr>";
echo "<div id='pagination'>";
echo $pagination;  //เป็นตัวแปรที่แสดง จำนวนหน้าของเพจ
echo "</div>"
?>
</ul>
</div>

จบในส่วนของ pagination.php

ต่อไปเป็นส่วนของ javascript เป็นการรับและส่งค่าแบบ ajax
ไฟล์นี้ง่ายมากถ้าท่านผ่านบทความก่อนๆมาแล้ว

ไฟล์ pagination.js

function pagination(page){
//alert(page);
var str=Math.random();
var datastring='str='+str + '&page='+page;

$.ajax({
type:'POST',
url:'pagination.php',
data:datastring,
beforeSend: function(){
$("#loading").html("<img src='http://www.bookneo.com/images/bigLoader.gif'");
},
success:function(data){
$("#showtitle").html(data);
$("#loading").html("<img src='http://www.bookneo.com/images/bigLoader.gif'");
}
});
}

จบแล้วในส่วนของ pagination.js
บทความนี้ก็มีเพียงเท่านี้ พบกันในบทความต่อไปครับ เกี่ยวกับเรื่องของการ upload file image ต่างๆ..



Read More

วันจันทร์ที่ 17 ธันวาคม พ.ศ. 2555

วิธีการสร้าง Comment Box สำหรับการแสดงความคิดเห็น ของผู้อ่านบทความ



ตอนนี้สิ่งที่เรามีจากบทความที่ผ่านมา คือเรามี CKEditor สำหรับเขียนบทความแล้ว เราก็เรียกบทความจากฐาน ข้อมูลขึ้นมาแสดงได้แล้ว แต่เรายังขาดเครื่องมือที่ทำให้เกิดการแลกเปลี่ยน หรือสอบถามข้อสงสัย หรือคำขอบคุณ ของผู้อ่าน และหรือ อะไรก็แล้วแต่ที่ผู้อ่านบทความของเราต้องการ แสดงความคิดเห็น นั่นก็คือ Comment Box มาดูกันเลยครับ.....

บทความต่อจากนี้ไปผมจะใช้บทความที่ผ่านมาเป็นหลักยึด ในการสร้างบทความต่อๆไป
หากท่านเกิดข้อสงสัยตรงส่วน ใดก็กลับไปเช็คที่บทความก่อนหน้าเอานะครับ....


ในบทความนี้ ผมจะนำเอาสิ่งที่เรามีอยู่แล้วในบทความก่อนๆ สองเรื่องมารวมกันนั่นก็คือ
เรื่อง "วิธีการดึงบทความจาก Database มาแสดงหน้าเว็บไซต์" และ
เรื่อง "UPDATE CKEditor ด้วยการ Config แบบ PHP + เพิ่ม Emotion"
เพื่อให้ง่ายต่อความเข้าใจของเรา..ท่านต้องมีไฟล์ และ โฟล์เดอร์ ตามภาพตัวอย่าง...


โดยสร้างไฟล์เพิ่มขึ้นมาอีก 2ไฟล์ คือ
write_comment.php และ show_comment.php


เริ่มต้นด้วยการสร้างฐานข้อมูลกันก่อน ฐานข้อมูลนี้แยกต่างหากจากฐานข้อมูล ของการเขียนบทความ แต่จะมี
การดึงเอาไอดี (id_article) ของฐานข้อมูลบทความเพื่อเก็บค่าลง ฐานข้อมูลการแสดงความคิดเห็น
(ar_comment) เอาไว้บ่งบอกว่า ความคิดเห็นนี้เป็นของบทความใหน ก็จะไปแสดงที่บทความนั้นๆ....


SQL สร้างตารางฐานข้อมูลสำหรับทดสอบ
CREATE TABLE `ar_comments` (
`id_comment` int(11) NOT NULL AUTO_INCREMENT,
`id_article` int(11) NOT NULL DEFAULT 0,
`name` varchar(255) NOT NULL DEFAULT '',
`email` varchar(255) NOT NULL DEFAULT '',
`comment` text NOT NULL,
`datetime` datetime NOT NULL DEFAULT '0000-00-00 00:00:00',
PRIMARY KEY (`id_comment`)
);

จากนั้นก็เปิดไฟล์ show_article_full.php ขึ้นมา แล้วก็ใส่ <div id="showcomment"></div>
เอาไว้รองรับ comment ที่จะนำมาแสดง แล้วก็ include show_comment.php เข้าไป
จากนั้นก็ include ไฟล์ ckemotion.php เข้ามาด้านล่างสุด ดังนี้

<div id="showcomment">
<?php include 'show_comment.php';?>
</div>
<div>    
<?php include 'ckemotion.php';?>   
</div> 

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="content">
<div><h1>วิธีการดึงบทความจาก Database มาแสดงหน้าเว็บไซต์</h1></div>
<?php
include 'config.php';

$id_article = $_GET['id_article'];//รับค่า id_article

$sql = "select * from myarticles where id_article = '$id_article'
order by id_article";
$result = mysql_query($sql);

$row = mysql_fetch_array($result);
$id_article = $row['id_article'];
$author = $row['author'];
$title = $row['title'];
$article = $row['article'];
$datetime = $row['datetime'];
?>

<table>
<?php
echo "<tr>";
echo "<td>";

echo "<div id='date'>$datetime</div>";
echo "<div id='title'><h2>$title</h2></div>";
echo "<div id='article'>$article</div>";
echo "<div id='float_r'><font color='#64711F'>Post By:</font>
$author</div>";

echo "</td>";
echo "</tr>";
?>
</table>

<br/>
<div id="showcomment">
<?php include 'show_comment.php';?>
</div>
<div>
<?php include 'ckemotion.php';?>
</div>

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



จากนั้นก็ไปเพิ่มเติม ไฟล์ ckemotion.php ดังนี้
เพิ่มเติม action="write_comment.php" พ่วง id_article เข้าไปด้วย

 

<form name="myform" method="post" 
action="write_comment.php?id_article=<?=$id_article;?>">....</form>

 

เมื่อเรากด submit แล้วไฟล์ ckemotion.php ก็จะส่งค่ามาที่ไฟล์ write_comment.php

กรณีที่1
หากว่าท่านต้องการให้บุคคลทั่วไป สามารถโพสแสดงความคิดเห็นได้ ท่านก็ใส่ตรงส่วนนี้เข้าไปด้วย...
เพิ่มเติม name ของผู้แสดงความคิดเห็น ดังนี้
 

<div id="name">
Name: <input type="text" name="name" size="30"/>
</div>


เพิ่มเติม email ของผู้แสดงความคิดเห็น ดังนี้
 

<div id="email">
Email: <input type="text" name="email" size="30"/>
</div>


กรณีที่2
แต่ถ้าหากว่าท่านต้องการให้สมาชิกเท่านั้นที่สามารถจะแสดงความคิดเห็นได้ ตรงส่วนนี้ท่านก็ไม่ต้องเพิ่มเติมลงไป
ให้ไปเช็คจากฐานข้อมูลว่าเป็นสมาชิกหรือไม่ ที่ไฟล์ write_comment.php แทน
ในบทความนี้ผมจะเน้นที่ สมาชิกเท่านั้นที่สามารถจะแสดงความคิดเห็นได้....


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


ไฟล์ write_comment.php
ใส่ <?php ob_start(); ?>  ไว้ที่ห้วเพจก่อน เพราะเราต้องส่ง header ออกไป
เริ่มด้วยนำเข้าไฟล์ติดต่อฐานข้อมูล

 

<?php include 'config.php';?>


ติดต่อฐานข้อมูล table members ว่าเป็นสมาชิกหรือไม่
 

$id_article = $_GET[id_article]; //รับค่า id_article ที่ส่งมา แบบ GET
$username = $_COOKIE['username'];//เก็บค่า cookie จากการ login ของสมาชิก
$sql = "select * from members where username = '$username'";
$result = mysql_query($sql);
$num = mysql_num_rows($result);
if($num < 1){
//ดักไว้ด้วย javascript ว่าถ้านับแถวในตารางแล้วน้อยกว่า 1 ก็ alert ออกมาว่า....
//แล้วก็ส่งกลับไปที่เดิม
echo "<script type='text/javascript'>alert('กรุณา Login ก่อน');</script>";
echo "<script type='text/javascript'>window.location.href=
'show_article_full.php?id_article=$id_article';</script>";
}


ถ้าไม่ตรงกับเงื่อนไข if  ก็รับค่าที่ส่งมาจาก ckeditor แบบ post
 

else{

$editor1 = $_POST[editor1];
$datetime = date("Y-m-d H:i:s"); //เก็บวันเดือนปีและเวลาด้วย function date
$sql = "insert into ar_comments (id_article,name,comment,datetime) values
('$id_article','$usermane','$editor1','$datetime')";
mysql_query($sql);
mysql_close();//ปิดการเชื่อมต่อฐานข้อมูล แล้วก็ส่งกลับไปที่เดิม
echo "<script type='text/javascript'>window.location.href=
'show_article_full.php?id_article=$id_article';</script>";
}


จบแล้วในเรื่องของการ submit comment ลงฐานข้อมูล
ต่อไปเป็นเรื่องของการดึงข้อมูล comment จาก database มาแสดงที่บทความนั้นๆ ตาม id_article
ตอนเริ่มต้นเราได้สร้าง<div id="showcomment"><?php include 'show_comment.php';?>
</div> เอาไว้แล้ว แต่เรายังไม่มีไฟล์  show_comment.php ดังนั้นเราก็มาสร้างไฟล์นี้กัน


เริ่มด้วยนำเข้าไฟล์ติดต่อฐานข้อมูลเหมือนเดิม...
<?php include 'config.php';?>
แล้วก็รับค่า id_article แบบ GET เพื่อค้นหา comment ของแต่ละ id_article มาแสดง
จากนั้นก็วนลูปออกมาแสดงตามแต่ละบทความต่างๆโดยกำหนดด้วย id_article


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

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
<?php
include 'config.php';
$id_article = $_GET['id_article'];
$sql = "select * from ar_comments where id_article = '$id_article'
order by id_article ASC";
$result = mysql_query($sql);
$num = mysql_num_rows($result);
$i=0;
while($num > $i){
$row = mysql_fetch_array($result);
$id_comment = $row['id_comment'];
$id_aritcle = $row['id_article'];
$name = $row['name'];
$comment = $row['comment'];
$datetime = $row['datetime'];

echo "<div style='padding-top:20px;'>$comment</div>";
echo "<div style='float:right;'><font color='blue'>$name</font>
<font size='2'>$datetime</font></div>";
echo "<div style='border-bottom:1px dotted #999999;'>&nbsp;</div>";
$i++;
}
?>
</body>
</html>




 

Read More

UPDATE CKEditor ด้วยการ Config แบบ PHP + เพิ่ม Emotion



บทความก่อนเป็นการ config CKEditor แบบ javascipt นะครับรอบนี้เปลี่ยนเป็นการ config แบบ PHP เป็น Code ที่ผมดัดแปลงปรับแต่งมาจาก เว็บ ninenik.com คุณความดีนี้ และคำขอบคุณทุกคำขอบคุณผมขอยกให้ ninenik.com..... ไปดู Code กันดีกว่าครับ.....

Code ที่ท่านต้องมี ตามรูปครับ


ส่วน ที่ให้ download จะไม่มีโฟล์เดอร์ ckeditor นะครับ ท่านอาจจะ download มาจากบทความก่อนๆ
ก็ได้ หรือ http://ckeditor.com ก็แล้วแต่ท่านจะทรงโปรดละครับ.....

ก่อนอื่นมา config file cke_config.php กันก่อน ก็มี 2 ส่วน คือ กลุ่มปรับแต่งหน้าตา กับกลุ่ม
เครื่องมือของ CKEditor

Code ที่เสร็จแล้ว
ไฟล์ cke_config.php
$config=array( //กลุ่มของหน้าตา
"basePath"=>"ckeditor/", //  กำหนด path ของ ckeditor
"skin"=>"kama", // kama | office2003 | v2
"language"=>"en", // th / en and more.....
"extraPlugins"=>"uicolor", // เรียกใช้ plugin ให้สามารถแสดง UIColor Toolbar ได้
"uiColor"=>"#92C2C1", // กำหนดสีของ ckeditor
"extraPlugins"=>"autogrow", // เรียกใช้ plugin ให้สามารถขยายขนาดความสูงตามเนื้อหาข้อมูล
"autoGrow_maxHeight"=>400, // กำหนดความสูงตามเนื้อหาสูงสุด
"enterMode"=>2, // กดปุ่ม Enter -- 1=แทรกแท็ก <p> 2=แทรก <br> 3=แทรก <div>
"shiftEnterMode"=>1, // กดปุ่ม Shift กับ Enter พร้อมกัน 1=แทรกแท็ก <p> 2=แทรก<br>
 //3=แทรก <div>

"height"=>200, // กำหนดความสูง
"width"=>500,  // กำหนดความกว้าง * การกำหนดความกว้างต้องให้เหมาะสมกับจำนวนของ Toolbar 

"toolbar"=>array( //กลุ่มของเครื่องมือ
array('Source','-','Templates'),
array('Bold','Italic','Underline','Strike','-','Subscript','Superscript'),
array('NumberedList','BulletedList','-','Outdent','Indent','Blockquote'),
array('JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'),
array('Image','Flash','Table','HorizontalRule','Smiley',
'SpecialChar','PageBreak','UIColor')
)
);

แล้วก็มาสร้าง ไฟล์ ckemotion.php เริ่มด้วยการ include jquery ไฟล์ ckemotion.php
<script type="text/javascript" src="jquery.js"></script>

จากนั้นสร้างฟังก์ชัน javascript สำหรับการ Insert HTML Value เข้าไปที่ CKEditor ดังนี้
<script type="text/javascript">
function InsertHTML(htmlValue,editorObj){
if(editorObj){
editorObj.insertHtml(htmlValue);
}
}
 
สร้างตัวแปรสำหรับเรียก CKEditor ขึ้นมาใช้งาน เริ่มด้วยการ include
include_once("ckeditor/ckeditor.php");
include_once("cke_config.php");
$ckeditDb = "Bookneo.com";//ตัวแปรนี้ท่านสามารถที่จะดึงข้อมูลจาก database ขึ้นมาเพื่อแก้ไขได้
$CKEditor = new CKEditor();
$events['instanceReady'] = 'function (evt) {
return editorObj=evt.editor;
}';
 

จากนั้นก็มาสร้าง form พร้อมทั้งเรียกใช้งาน CKEditor ดังนี้
<form name="myform" method="post" action="">
<?php
$CKEditor->editor("editor1","$ckeditDb",$config,$events);//เปรียบเหมือนtextarea
//กำหนดให้ id="editor1" หมายถึงตัวแปรที่เก็บค่าใน CKEditor นั่นเอง
?>
<input type="submit" name="submit" value="Submit"/>
</form>


รูปตัวอย่าง


สำหรับการเรียกใช้ CKEditor มีแค่นี้ ที่เหลือเป็นเรื่องของการใส่ emoticon กับการคลิกเพื่อส่งค่า
ดึง emoticon ขึ้นมาแสดง ด้วย code นี้
<div id="emotion"> </div> //ครอบด้วย div ก่อน

$dir ="emoticon"; //ที่เก็บตัว emoticon
$files1 = scandir($dir); //ใช้ฟังก์ชัน scandir()
foreach($files1 as $key=>$value){ //วนลูปออกมา มีเท่าไหร่ก็ออกมาหมด โอม....
if($key>1){
$dir = "emoticon/$value"; //นำค่าที่ได้มาใส่ Path นำหน้าเอาไว้เวลาเรียกใช้ก็ echo $dir ตัวเดียว
echo "<img height='40' src='$dir'/>";
}
}



มาถึงตอนนี้เราก็จะเห็นตัว emoticon แล้ว ต่อไปเมื่อเราคลิกที่ ตัว emoticon เขาก็จะวิ่งขึ้นไปที่ CKEditor
ตรงนี้เราจะใช้ jQuery .click(function)ตามนี้

<script type="text/javascript">
$(function(){
$("#emotion img").click(function(){
fullpath=$.trim($(this).attr("src"));
InsertHTML('<img src="'+fullpath+'" style="width:50px;" />',editorObj);
});
});
</script>
 

แต่ pointer ยังไม่เป็นรูปมือ ดังนั้นเราก็ต้องกำหนด CSS ให้ดั่งนี้
#emotion img{
cursor:pointer;
}

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function InsertHTML(htmlValue,editorObj){
if(editorObj){
editorObj.insertHtml(htmlValue);
}
}
</script>
<style type="text/css">
#emotion img{
cursor:pointer;
}
</style>
</head>
<body> 

<?php

include_once("ckeditor/ckeditor.php");
include_once("cke_config.php");
$ckeditDb = "Bookneo.com";
$CKEditor = new CKEditor();
$events['instanceReady'] = 'function (evt) {
return editorObj=evt.editor;
}';

?>

<form name="myform" method="post" action="">
<?php
$CKEditor->editor("editor1","$ckeditDb",$config,$events);
?>
<input type="submit" name="submit" value="Submit"/>
</form>
<br/>
<div id="emotion" style="width:480px;border:1px solid #999999;
height:130px;padding:10px;overflow: auto;">

<?php

$dir ="emoticon";
$files1 = scandir($dir);
foreach($files1 as $key=>$value){
if($key>1){
$dir = "emoticon/$value";
echo "<img height='40' src='$dir'/>";
}
}
?>
</div>

<script type="text/javascript">
$(function(){
$("#emotion img").click(function(){
fullpath=$.trim($(this).attr("src"));
InsertHTML('<img src="'+fullpath+'" style="width:50px;" />',editorObj);
});
});
</script>

</body>
</html>
Read More

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

วิธีการดึงบทความจาก Database มาแสดงหน้าเว็บไซต์



จากบทความที่แล้วที่ติดค้างไว้ในเรื่อง ของการดึงบทความจาก Database มาแสดงหน้าเว็บไซต์ ก็เลยต้องมา ชำระสะสางกันเสียให้เสร็จไปในบทความนี้ซะเลยครับ... - -" แนวคิดในเรื่องนี้ จะแสดงบทความแบบ Web Blog คือ แสดง Title และ Article บางส่วนจากนั้น ก็ทำลิงค์ ให้กับ Title และเพิ่ม Read more ให้กับบทความเพื่ออ่านต่อ.....

ก่อนอื่นผมจะเริ่มต้นด้วยการเชื่อมต่อฐานข้อมูลก่อน ด้วยการ include 'config.php' เหมือนเดิม บางท่าน ถึงกับเขียนเป็น function เลยนะตรงนี้ ส่วนผมก็เอามันแบบนี้แหละไม่ได้ลำบากอะไรมากมาย อิอิ...
include 'config.php';

ในขั้นตอนนี้เราจะสร้างฟังก์ชัน ขึ้นมา 1 ฟังก์ชัน คือ function ตัดบทความ เพื่อเอาไปใช้ในการแสดง บทความบางส่วน ดังนี้
function cutstr($str, $maxstr='', $holder='') {
if (strlen($str) > $maxstr) {
$str = iconv_substr($str, 0, $maxstr, "UTF-8") . $holder;
}
return $str;
}

วิธีใช้งาน cutstr($article,'500','...') จากนั้นผมก็สร้าง ตาราง(Table) ขึ้นมาผสมผสานกันระหว่าง HTML กับ PHP ดังนี้ ผมจะสร้างแถวขึ้นมา 1 แถว คอลั่ม 1 คอลั่ม
$sql = "select * from myarticles order by id_article DESC";
$result = mysql_query($sql);
$num = mysql_num_rows($result);//นับแถวทั้งหมดในตารางออกมา 
$i=0; // กำหนดให้ตัวแปร i = 0
while($i < $num){ //ถ้า ตัวแปร i น้อยกว่า ตัวแปร num
$row = mysql_fetch_array($result);
$id_article = $row['id_article'];
$author = $row['author'];
$title = $row['title'];
$article = $row['article'];
$datetime = $row['datetime'];
 
echo "";
echo "";
echo "";
$i++; //ก็ให้บวกเพิ่มไปจนเท่ากับ ตัวแปร num
}
 
<table><tbody><tr><td>";
echo "<div id="date">$datetime</div>";
echo "<div id="title"><h1>$title</h1></div>";
echo "<div id="article">$article</div>";
echo "<div id="float_r">Read More</div>";
echo "</td></tr></tbody></table>

แล้วก็มาเพิ่มลิงค์ให้กับ Title ลิงค์ไปหาบทความนั้นๆที่ ไฟล์ show_article_full.php ด้วยการพ่วง id_article เข้าไปด้วยแบบนี้
echo "<div id="title"><a href="show_article_full.php?id_article=$id_article">
<h1>$title</h1></a></div>";

เพิ่มเติมฟังก์ตัดคำให้กับ ตัวแปร article ดังนี้
echo "<div id="article">".cutstr($article,'500','...')."</div>";

เพิ่มเติมลิงค์ให้กับ Read More ดังนี้
echo "<div id="float_r"><a href="show_article_full.php?id_article=$id_article">
Read More::></a></div>";

Code ที่เสร็จแล้ว ไฟล์ show_article.php
<!DOCTYPE html">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
<div class="content">
<div><h1>วิธีการดึงบทความจาก Database มาแสดงหน้าเว็บไซต์แบบ</h1></div>

<?php include 'config.php';?>

<?php
function cutstr($str, $maxstr='', $holder='') {
if (strlen($str) > $maxstr) {
$str = iconv_substr($str, 0, $maxstr, "UTF-8") . $holder;
}
return $str;
}
?>

<table>
<?php

$sql = "select * from myarticles order by id_article DESC";
$result = mysql_query($sql);
$num = mysql_num_rows($result);//นับแถวทั้งหมดในตารางออกมา

$i=0; // กำหนดให้ตัวแปร i = 0
while($i < $num){ //ถ้า ตัวแปร i น้อยกว่า ตัวแปร num

$row = mysql_fetch_array($result);
$id_article = $row['id_article'];
$author = $row['author'];
$title = $row['title'];
$article = $row['article'];
$datetime = $row['datetime'];

echo "<tr>";
echo "<td>";

echo "<div id='date'>$datetime</div>";
echo "<div id='title'><h2>
<a href='show_article_full.php?id_article=$id_article'>
$title
</a></h2></div>";
echo "<div id='article'>".cutstr($article,'500','...')."</div>";
echo "<div id='float_r'>
<a href='show_article_full.php?id_article=$id_article'>
Read More::>
</a></div>";

echo "</td>";
echo "</tr>";
$i++; //ก็ให้บวกเพิ่มไปจนเท่ากับ ตัวแปร num
}
?>
</table>

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

กำหนด ไฟล์ CSS ของ show_article.php และ show_article_full.php ดังนี้ ไฟล์ style.css
body{
background: #eeeeee;
}
 
.content{
width:700px;
margin:0 auto;
border:1px solid #dddddd;
padding:20px;
background: #ffffff;
}
 
td{
width:650px;
border-bottom: 1px dotted #60676a;
padding: 20px;
}
 
#date{
color: #666666;
font-size: 13px;
}
 
#title{
color:#0252A1;
}
 
#title a{
color:#0252A1;
text-decoration: none;
}
 
#title a:hover{
color:#0095DD;
}
 
#float_r{
float:right;
color:#C74E3E;
font-size: 14px;
font-weight: bold;
}
 
#float_r a{
color:#C74E3E;
font-weight: bold;
text-decoration: none;
font-size: 13px;
}
 
#float_r a:hover{
color:#2E95FC;
}

สร้างไฟล์ show_article_full.php ง่ายๆครับ coppy ไฟล์ show_article.phpมาเลย
ตัดการวนลูป คือ while กับ ตัวแปร i ออก
แล้วตัดลิงค์ออกจาก ตัวแปร Title
เอาฟังก์ชัน ที่ใช้ตัดคำออกจาก ตัวแปร Article
และเอาตัวแปร author มาแทน Read More แล้วตัดลิงค์ออก
เพิ่มโค้ดสำหรับการรับค่า id_article เข้ามาแบบ GET ดังนี้
$id_article = $_GET['id_article'];

ปรับการเชื่อมต่อฐานข้อมูลเป็น
$sql = "select * from myarticles where id_article = '$id_article' 
order by id_article";

เท่านี้ก็เสร็จแล้วครับ

Code ที่เสร็จแล้ว
ไฟล์ show_article_full.php
<!DOCTYPE html">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
<div class="content">
<div><h1>วิธีการดึงบทความจาก Database มาแสดงหน้าเว็บไซต์แบบ</h1></div>
<?php
include 'config.php';
 
$id_article = $_GET['id_article'];//รับค่า id_article
 
$sql = "select * from myarticles where id_article = '$id_article'
order by id_article";
$result = mysql_query($sql);
 
$row = mysql_fetch_array($result);
$id_article = $row['id_article'];
$author = $row['author'];
$title = $row['title'];
$article = $row['article'];
$datetime = $row['datetime'];
?>
 
<table>
<?php
echo "<tr>";
echo "<td>";
 
echo "<div id='date'>$datetime</div>";
echo "<div id='title'><h2>$title</h2></div>";
echo "<div id='article'>$article</div>";
echo "<div id='float_r'><font color='#64711F'>Post By:</font>
$author</div>";
 
echo "</td>";
echo "</tr>";
?>
</table>
</div>
    </body>
</html>

สำหรับบทความนี้ก็จบเพียงเท่านี้ครับ.....
Read More

วิธีการเขียนบทความด้วย 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(); เอาไว้ด้านบนสุดของเพจด้วยนะครับ ของดอธิบายเรื่องนี้ครับ

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

Read More

วันเสาร์ที่ 15 ธันวาคม พ.ศ. 2555

วิธีการติดตั้ง CKEditor & ปรับแต่งเครื่องมือตามต้องการ



หลายๆท่านคงจะเคยเห็น WYSIWYG Editor ที่ชื่อว่า CKEditor กันมาแล้ว จากการโพสข้อความ ตามเว็บไซต์ต่างๆ วันนี้ผมจะมาพูดถึงเรื่องวิธีการติดตั้ง ลงบนหน้าเว็บไซต์ รวมไปถึงการปรับแต่งเครื่องมือ ต่างๆของ CKEditor ตามความต้องการใช้งานของเรา....
ก่อนอื่นท่านก็ไป download ckeditor มาเตรียมพร้อมไว้ก่อน Download
จากนั้นก็แตกไฟล์ zip ออกมาก็จะได้โฟลเดอร์ CKEditor ให้นำไปไว้ใน root ของเว็บไซต์

วิธีติดตั้ง CKEditor มี 2 วิธี คือ
หนึ่ง config กลุ่มเครื่องมือของ CKEditor ลงไปบนหน้าเว็บไซต์ที่จะใช้งานนั้นๆโดยตรง
สอง config ลงไปในไฟล์ config.js ของ CKEditor แล้วค่อยเรียกใช้งานจากชื่อที่เราตั้งไว้เมื่อต้องการ

ก่อนที่จะพูดถึงวิธีติดตั้ง เรามาทำความรู้จักกับกลุ่มเครื่องมือของ CKEditor มีอะไรกันบ้าง

[] ระบุขอบเขตของกลุ่มเครื่องมือ
'-' ตัวคั่นระหว่างกลุ่มเครื่องมือ
'/' ขึ้นบรรทัดใหม่

กลุ่มเครื่องมือ สำหรับการแก้ไขเอกสาร
'Source' ดูรหัส html
'Save' บันทึก
'NewPage' สร้างหน้าเอกสารใหม่ (หากมีข้อมูลเดิมอยู่ก็จะถูกลบหมด)
'Preview' ดูหน้า เอกสารตัวอย่าง
'Templates' ใช้เทมเพลตที่เตรียมไว้
'Cut' ตัดข้อความหรือตัวอักษรที่ต้องการ
'Copy' คัดลอกข้อความหรือตัวอักษรที่ต้องการ
'Paste' นำข้อความหรือตัวอักษรที่ถูกตัดหรือถูกคัดลอกไว้มาแปะ
'PasteText' วางแบบตัวอักษรธรรมดา
'PasteFromWord' วางสำเนาจากตัวอักษรเวิร์ด (เท่าที่ทดลองปุ่มนี้มีผลเหมือนกับปุ่ม 'Paste')
'Print' พิมพ์ข้อความที่พิมพ์ ออกทางเครื่องพิมพ์
'SpellChecker' ตรวจสอบการสะกดคำ
'Scayt' ตรวจสอบการ สะกดคำขณะพิมพ์
'Undo' ยกเลิกคำสั่ง
'Redo' ทำซ้ำคำสั่ง
'Find' ค้นหาข้อความ
'Replace' ค้นหาข้อความและแทนที่
'SelectAll' เลือกข้อความทั้งหมดที่พิมพ์
'RemoveFormat' ลบ รูปแบบออก (ผลของคำสั่งนี้จะเหลือเพียงแค่ html tag ปล่าวๆที่ไม่มี  attribute ใดๆ เช่น จาก <img align="left" height="100" style="margin-right: 10px" width="100" src=''/> เหลือเพียง <img src=''/>)
*/-----------------------------------------------------------------------------------------------------------------------\*

กลุ่มเครื่องมือสำหรับ การสร้างแบบฟอร์ม
'Form' แทรก แบบฟอร์มลงในเอกสาร
'Checkbox' แทรก check box ลงในแบบฟอร์มหรือเอกสาร
'Radio' แทรก radio button ลงในแบบฟอร์มหรือเอกสาร
'TextField' แทรก text input field ลงในแบบฟอร์มหรือเอกสาร
'Textarea' แทรก text area ลงในแบบฟอร์มหรือเอกสาร
'Select' แทรก list box ลงในแบบฟอร์มหรือเอกสาร
'Button' แทรกปุ่มลงในแบบฟอร์มหรือเอกสาร
'ImageButton' แทรกปุ่มแบบรูปภาพ ลงในแบบฟอร์มหรือเอกสาร
'HiddenField' แทรก hidden field ลงในแบบฟอร์มหรือเอกสาร
*/-----------------------------------------------------------------------------------------------------------------------\*

กลุ่มเครื่องมือสำหรับการ จัดรูปแบบตัวอักษร, ข้อความ, รูปภาพ อนิเมชั่น ฯลฯ
'Bold' ทำให้ตัวอักษรหรือข้อความในเอกสารเป็นตัว หนา
'Italic' ทำให้ตัวอักษรหรือข้อความในเอกสารเป็นตัว เอียง
'Underline' ขีดเส้นใต้ตัวอักษรหรือข้อความในเอกสาร
'Strike' ขีดเส้นทับตัวอักษรหรือข้อความในเอกสาร (ตัวอย่าง A ก)
'Subscript' ทำให้ ตัวอักษรหรือข้อความในเอกสารเป็นตัวห้อย
'Superscript' ทำให้ตัวอักษรหรือข้อความในเอกสารเป็นตัวยก
'NumberedList' แทรกลำดับรายการแบบตัวเลขลงในเอกสาร
'BulletedList' แทรกลำดับรายการแบบสัญลักษณ์ลงในเอกสาร
'Outdent' ลดระยะย่อหน้า
'Indent' เพิ่มระยะย่อหน้า
'Blockquote' แทรก block quote ลงในเอกสาร
'CreateDiv' แทรก แท็ก div ลงในเอกสาร
'JustifyLeft' จัด ชิดซ้าย
'JustifyCenter' จัดกึ่งกลางหน้า
'JustifyRight' จัดชิดขวา
'JustifyBlock' จัด พอดีหน้า
'Link' แทรก/แก้ไขการเชื่อมโยงลงในเอกสาร
'Unlink' ลบการเชื่อมโยงออกจากเอกสาร
'Anchor' แทรก/แก้ไข จุดอ้างอิงสำหรับการเชื่อมโยงลงในเอกสาร
'Image' แทรกรูปภาพลงในเอกสาร
'Flash' แทรก flash animation ลงในเอกสาร
'Table' แทรกตารางลงในเอกสาร
'HorizontalRule' แทรก เส้นคั่นบรรทัดลงในเอกสาร
'Smiley' แทรกรูป สื่ออารมณ์ลงในเอกสาร
'SpecialChar' แทรก ตัวอักขระพิเศษลงในเอกสาร (เช่น ? ? ? เป็นต้น)
'PageBreak' แทรก page break ลงในเอกสาร (สำหรับการพิมพ์ออกทางเครื่องพิมพ์เท่านั้น)
*/-----------------------------------------------------------------------------------------------------------------------\*

กลุ่มเครื่องมือสำหรับการ จัดรูปแบบเอกสาร
'Styles' กำหนดรูปแบบหรือ ลักษณะการแสดงผลของบล็อกข้อความ
'Format' กำหนดรูปแบบหรือลักษณะของย่อหน้า
'Font' กำหนดรูปแบบหรือลักษณะของตัว อักษร (เช่น Tahoma, Courier New, Arial ฯลฯ)
'FontSize' กำหนดขนาดของตัวอักษร
'TextColor' กำหนดสีของตัว อีกษร
'BGColor' กำหนด สีของพื้นหลัง
'Maximize' ขยายขนาดของ editer ให้เต็มเฟรม
'ShowBlocks' แสดง/ซ่อนขอบเขตของ ย่อหน้า
'About' แสดง ข้อมูลเกี่ยวกับ CKEditor
*/-----------------------------------------------------------------------------------------------------------------------\*

skin รูปแบบหน้าตา
'kama'


'office2003'


'v2'


เมื่อเรารู้จักกลุ่มเครื่องมือของ ckeditor แล้วก็มาเลือกใช้งานกัน ก่อนอื่นให้ท่าน include ckeditor.js เข้ามาก่อน ไว้ระหว่าง tag <head></head> ดังนี้
  1. <script src="ckeditor/ckeditor.js" type="text/javascript"></script>  

วิธีที่1 config กลุ่มเครื่องมือของ CKEditor ลงไปบนหน้าเว็บไซต์โดยตรง มีรูปแบบดังนี้
สร้าง textarea ให้มี id='editor' สังเกตุดูตรงชื่อ id จะต้องตรงกัน โดยจะตั้งชื่ออะไรก็ได้

  1. <textarea cols="50" id="editor1" name="editor1" rows="10"></textarea>  
  2.   
  3.  <script type="text/javascript">  
  4.   
  5.  CKEDITOR.replace('editor1', {  
  6.   
  7.  skin   : 'kama'//กำหนดรูปแบบหน้าตา  
  8.   
  9.  height   : 200, //กำหนดความสูง  
  10.   
  11.  width    : 500,//กำหนดความกว้าง  
  12.   
  13.  toolbar:       //กลุ่มเครื่องมือ ตัดออก เพิ่มเข้าได้  
  14.   
  15.  [ ['Bold''Italic''Underline''-''Subscript''Superscript''-',  
  16.   
  17.      'NumberedList''BulletedList''-''Link''Unlink'],  
  18.   
  19.  ['Outdent''Indent''-''JustifyCenter''JustifyRight''JustifyBlock'],  
  20.   
  21.  '/',  
  22.   
  23.  ['Image''Flash''Smiley''-''Table''HorizontalRule''SpecialChar'] ]  
  24.   
  25.  });  
  26.   
  27.  </script>  

รูปตัวอย่าง


วิธีที่2 config ลงไปในไฟล์ config.js ของ CKEditor แล้วค่อยเรียกใช้งานจากชื่อที่เราตั้งไว้เมื่อต้องการ
ให้ท่านเปิดเข้าไปในโฟลเดอร์ ckeditor แล้วมองหาไฟล์ชื่อ config.js จากนั้นก็เปิดขึ้นมาจะได้แบบนี้

  1. CKEDITOR.editorConfig = function( config )  
  2. {  
  3.  ให้นำกลุ่มเครื่องมือของ ckeditor มาใส่ไว้ในนี้  
  4. };  

ด้วยวิธีการตั้งชื่อ config.toolbar_ แล้วตามด้วยชื่อที่ท่านต้องการ ตามด้วยเครื่องหมาย =
เช่น config.toolbar_Myck =

ตัวอย่าง ผมจะใส่ไว้ 2 แบบ แบบแรกชื่อ Myck แบบที่สองชื่อ Minick

  1. CKEDITOR.editorConfig = function( config )  
  2.   
  3.  {  
  4.   
  5.  config.toolbar_Myck =  
  6.   
  7.  [ ['Bold''Italic''Underline''-''Subscript''Superscript''-',  
  8.   
  9.      'NumberedList''BulletedList''-''Link''Unlink'],  
  10.   
  11.  ['Outdent''Indent''-''JustifyCenter''JustifyRight''JustifyBlock'],  
  12.   
  13.  '/',  
  14.   
  15.  ['Image''Flash''Smiley''-''Table''HorizontalRule''SpecialChar'] ];  
  16.   
  17.    
  18.   
  19.  config.toolbar_Minick =  
  20.   
  21.  [ ['Bold''Italic''Underline''-','NumberedList''BulletedList''Link',  
  22.   
  23.   '-','Outdent''Indent'], ['JustifyCenter''JustifyRight''JustifyBlock'],  
  24.   
  25.  ['Image''Smiley''-''Table''HorizontalRule'] ];  
  26.   
  27.    
  28.   
  29.  };  


การเรียกใช้งาน
  1. <textarea cols="50" id="editor2" name="editor2" rows="10"></textarea>  
  2.   
  3.   
  4. <script type="text/javascript">  
  5.   
  6.  CKEDITOR.replace('editor2', {  
  7.   
  8.  skin   : 'kama'//กำหนดรูปแบบหน้าตา  
  9.   
  10.  height   : 200, //กำหนดความสูง  
  11.   
  12.  width    : 500,//กำหนดความกว้าง  
  13.   
  14.  toolbar: 'Myck' //เรียกใช้งาน ckeditor จากไฟล์ config.js  
  15.   
  16.  });  
  17.   
  18.  </script>  
รูปตัวอย่าง
การเรียกใช้พร้อมกัน 2แบบ ในหน้าเดียวกันท่านจะต้องเปลี่ยน id ด้วย
  1. <textarea cols="50" id="editor3" name="editor3" rows="10"></textarea>  
  2.   
  3.  <script type="text/javascript">  
  4.   
  5.  CKEDITOR.replace('editor3', {  
  6.   
  7.  skin   : 'kama'//กำหนดรูปแบบหน้าตา  
  8.   
  9.  height   : 130, //กำหนดความสูง  
  10.   
  11.  width    : 350,//กำหนดความกว้าง  
  12.   
  13.  toolbar: 'Minick' //เรียกใช้งาน ckeditor จากไฟล์ config.js  
  14.   
  15.  });  
  16.   
  17.  </script>  
รูปตัวอย่าง
เพียงเท่านี้เราก็มี CKEditor เอาไว้ใช้งานทั้งการโพสข้อความ และการเขียนบทความแล้ว จบเพียงเท่านี้ครับ

ในบทต่อไปเราจะนำเอา CKEditor ไปใช้เขียนบทความแล้วบันทึกลงฐานข้อมูล(Database)พร้อมทั้งนำขึ้นมา
แสดงบนหน้าเว็บไซต์ครับ
Read More

© Bookneo, AllRightsReserved.

ขับเคลื่อนโดย Blogger Designed by Nikhorn Thongchuay