มกราคม 2013 ~ Bookneo

วันเสาร์ที่ 26 มกราคม พ.ศ. 2556

Dropdown menu อย่างง่ายด้วย jQuery, CSS

เป็นบทความที่ต่อเนื่องจากบทความก่อนหน้า คือ "Popup menu แนวตั้งอย่างง่ายด้วย jQuery, CSS" และทำให้บทความนี้ง่ายต่อการเขียนด้วย เพราะเพียงแต่นำบทความก่อนมาปรับแต่งเฉพาะ CSS เท่านั้น เราก็จะได้ Dropdown menu ไว้ใช้แล้ว....

เริ่ม... ผมก็นำบทความเรื่อง "Popup menu แนวตั้งอย่างง่ายด้วย jQuery, CSS" มาตัดรูปภาพออกหมด
เสร็จแล้ว ผมก็ปรับแก้เฉพาะ ไฟล์ style.css, ie.css สองไฟล์นี้เท่านั้น...

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

body{
font-size: 14px;
}

#leftmenu li{
float: left;
background:#DDDDDD;
margin:0 1px 0 0;
list-style: none;
padding:5px;
cursor: default;
}

.menu{
display: none;
position: absolute;
margin-top:5px;
width:100px;
border:1px solid #B1B1B1;
background:#DDDDDD;
margin-left:-5px;
}

.menu li a{
list-style:none;
color:#000000;
text-decoration: none;
margin-left:-25px;
}

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

.menu{
margin-top:21px;
margin-left:-81px;
width:150px;
}

.menu li a{
margin-left:20px;
}

#fruit{
margin-left:-83px;
}

#fish{
margin-left:-80px;
}

เพียงเท่านี้เราก็ได้ Dropdown menu ไว้ใช้อีกแบบ
บทความนี้ก็จบลงเพียงเท่านี้ครับ.......

Popup menu แนวตั้งอย่างง่ายด้วย jQuery, CSS งานนี้มี Hack...

popup menu เป็นเรื่องจำเป็นสำหรับเว็บไซต์ที่มีเมนูย่อยเยอะๆ เพราะว่าถ้าจับเอาเมนูมาวางเรียงแถวกัน คงจะกินพื้นที่มิใช่น้อยๆ เพราะฉนั้นซ่อนมันไว้ซะเลย ก็เลยกลายเป็นเรื่อง MouseOut พอเอาเมาว์ไปชี้ก็ค่อยให้มันโผล่ขึ้นมาให้เลือกก็แล้วกัน ก็เลยกลายเป็นเรื่อง MouseOver Let's go....

สิ่งที่ต้องใช้

เริ่ม....
สร้างไฟล์ ie.css, style.css, menupopup.php

นำเข้าไฟล์ jquery.js, ie.css, style.css กันก่อน
ไฟล์ menupopup.php

เอาแค่นี้ก่อนเดี๋ยวไฟล์ ie.css เราจะเพิ่มเติมทีหลัง....

จากนั้นก็สร้างลิสเมนูขึ้นมาดังนี้




    Test Menu 1
    
    
        Menu Element 1
        Menu Element 2
        Menu Element 3
        Menu Element 4
    




    Fruit Menu 2
    
    
        
        Menu Element 1
        Menu Element 2
        Menu Element 3
        Menu Element 4

ต่อไปก็ไปกำหนดสไตล์ ให้กับเมนูกันก่อนดังนี้
ไฟล์ style.css

body{
font-size: 14px;
}

#leftmenu{
width:130px;
padding:0;
list-style:none;
margin:0px;
}

#leftmenu li{
background:#ddd;
height: 20px;
list-style:none;
padding-top:2px;
padding-left:5px;
cursor: default;
margin:1px;
}

.menu{
display: none;
position: absolute;
padding:0;
margin-top:-15px;
margin-left:123px;
width:150px;
}
.menu li a{
padding:0px 10px 0px 10px;
height:20px;
list-style:none;
color:#000000;
text-decoration: none;
}

#more{
float: right;
margin-top:5px;
}

#fruit img{
border:1px solid #999;
}

#fish img{
border:1px solid #999;
}

ข้อสังเกตุตรง .menu กำหนดให้ display: none; ตรงนี้เป็นการกำหนด css ให้ซ่อน
class="menu" นั่นเอง
จากนั้นก็เขียนโค้ด javascript ดังนี้
ไฟล์ menupopup.php

ตอนนี้ถ้าท่านเปิดดูด้วย firefox หรือ chrome ก็ไม่มีปัญหาอะไรแต่ถ้าท่านเปิดด้วย ie ก็จะ
เห็นแบบนี้

นี่ละปัญหาความแตกต่างของบราวเซอร์ มาถึงตรงนี้อย่างที่ผมบอก งานนี้มี Hack ก็ถึงเวลาแล้ว นั่นก็คือ
hack CSS นั่นเอง เราจะกำหนดให้ ie เท่านั้นที่จะสามารถใช้ไฟล์ ie.css ต่อไปนี้ได้ ด้วยวิธีการนำ
เข้ารูปแบบนี้ ให้ท่านเพิ่มเติมส่วนนี้เข้าไประหว่าง tag head

ไฟล์ menupopup.php

จากนั้นก็กำหนด css ดังนี้
ไฟล์ ie.css

.menu{
display: none;
position: absolute;
padding:0px;
margin-top:5px;
margin-left:47px;
width:150px;
}

#more{
float:right;
margin-top:-15px;
}

เมื่อเปิดดูด้วย ie อีกทีก็ยังมีปัญหาอีกตามภาพนี้

ปัญหานี้เกิดขึ้นเนื่องจาก ความยาวของตัวอักษรในเมนูหลักมีความยาวไม่เท่ากัน ดังนั้นกำหนด css
เพิ่มเติมดังนี้

ไฟล์ ie.css

#fruit{
margin-left:45px;
}

#fish{
margin-left:48px;
}

ปัญหาที่จะเกิดขึ้นเมื่อเราเคลื่อนย้ายตำแหน่งของเมนูนี้ กับเฉพาะบราวเซอร์ ie เท่านั้น ให้ท่านไปปรับแก้
เฉพาะไฟล์ ie.css

มาถึงตอนนี้ไม่ว่าท่านจะเปิดด้วยบราวเซอร์ตัวใหนก็ดูดีหมด ยัน ie6
บทความนี้ก็ขอจบเพียงเท่านี้..สวัสดีครับ.....

การกำหนดสถานะให้กับ สมาชิกด้วยฟิลด์ status SQL, PHP

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

เริ่ม.. ผมจะสร้าง field ชื่อ `status` int(2) NOT NULL DEFAULT 0;
ไว้ที่ table ชื่อ members หรือท่านจะตั้งเป็นอย่างอื่นก็แล้วแต่ อย่างเช่น type เป็น varchar ,
กำหนดค่าเริ่มต้น(default)ให้เป็น user จากนั้นก็ค่อยขยับไปเป็น silver user , gold user
ก็ว่ากันไป

ในที่นี้ผมจะกำหนดแบบง่ายๆ คือ ให้ default เป็น 0 จากนั้นก็ค่อยขยับสถานะไปเป็น 1, 2, 3,->....
สถานะที่ 0 นั้นคือค่าที่เรากำหนดไว้แล้ว แล้วสถานะที่ 1,2,3 ละได้มาอย่างไร

สถานะที่ 1 เราจะกำหนดไว้ว่า ถ้าสมาชิกท่านใดก็ตามโพสตาม webboard มากกว่าหรือเท่ากับ 5 ครั้ง
ก็ให้อัพเดด จาก 0 เป็น 1

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

$sql = "select * from comment where username = '$_COOKIE[username]'";
$result = mysql_query($sql);
$num = mysql_num_rows($result);

นับแถวออกมา
จากนั้นก็นำค่าที่นับได้มาใช้ update status ถ้าสมาชิกท่านนี้โพสมากกว่าหรือเท่ากับ 5 ครั้ง ก็ update
สถานะเป็น 1

if($num >= 5){
$sql = "update members set status = 1 where username = '$_COOKIE[username]'";
}

อ้าว... update status เป็น 1 แล้วยังไงต่อ...
ก็อย่างเช่นว่า ท่านต้องการให้สมาชิกที่มีสถานะเป็น 1 มีชื่อเป็นสีน้ำเงิน ก่อนที่จะแสดงชื่อออกมาหน้า
เว็บ ท่านก็เขียนโค้ดดักเอาไว้ว่า

if($status ==1){
echo '$username'; 
}

else if($status == 2){
echo '$username';
}

else{
echo '$username';
}

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

ส่วน admin จะมี status เท่าไหร่ท่านก็กำหนดเอาตามต้องการ ต่อไปนี้หน้าเพจต่างที่ admin เข้าได้
แต่ user อื่นๆ เข้าไม่ได้ เราจะกำหนดด้วย status ตัวนี้แหละ กำหนดยังไงละ
สมมุติว่า status ของ admin เป็น 5 เขียนโค้ดไปดักเอาไว้ตรงหัวเพจทุกเพจ หรือ
จะทำเป็นไฟล์ include ก็ได้ง่ายดี ว่า ถ้า status ไม่เท่ากับ 5 ให้ส่งไปหน้า index.php

ท่านจะต้องวนลูปในฐานข้อมูลเพื่อเก็บค่าสถานะออกมาก่อน

$sql = "select * from members where username = '$_COOKIE[username]'";
$result = mysql_query($sql);
while($row = mysql_fatch_array($result)){
$status = $row['status'];
}
if($status != 5){
header("Location: index.php");
}

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

Chaptcha ตัวหนังสือรูปภาพยืนยันการ Login หรือโพส Webboard + Refresh

เรามักจะเห็นตัวหนังสือภาพที่เขียนด้วยภาษา PHP มาคอย Random เวลาที่เราล็อคอิน หรือโพสตาม เว็บบอร์ด เพื่อป้องกันการสแปมเว็บ หรือ การถูกก่อกวนจากผู้ไม่ประสงค์ดี อันนี้ว่ากันตามที่เขาพูดต่อๆกันมานะครับ หรือ ทำให้ผู้ไม่ประสงค์ดี เหนื่อยอ่อนใจกับการที่ต้องมาคอย กรอกโค้ด chaptcha ความจริงมันก็เหนื่อยทั้งผู้ประสงค์ดี และผู้ไม่ประสงค์ดี นั้นแหละ..555+... เอากันจริงๆก็คือ การป้องกันการ spam เว็บจาก bot ของผู้ไม่ประสงค์ดีนั่นเอง....

สิ่งที่ต้องมี
1. captcha.php
2. text_captcha.php
3. captcha_result.php
4. jquery.js
5. 40240.TTF (font ตัวหนังสือที่ต้องการ)
6. bg.png (ภาพ background)
7. refresh.jpg (ภาพ)

เริ่ม.. สร้าง form กันก่อน
ไฟล์ captcha.php

<div id="container">
<form name="form1" method="post" action="captcha_result.php">
<table>

<tr valign="top">
<td>Emailaddress ::</td>
<td>
<div><input type="text" name="email" id="email"></div>
</td>
</tr>

<tr>
<td></td>
<td>
<div><img src="text_captcha.php?str=<?=$ran_str?>" id="captcha"/></div>
</td>
<td><div id="refresh"><img height="30" src="refresh.jpg"/></div></td>
</tr>

<tr>
<td>Code ::</td>
<td><input name="code_input" type="text"></td>
</tr>

<tr>
<td></td>
<td><input type="submit" name="Submit" value="Submit"></td>
</tr>

</table>
</form>
</div>

จบแล้วในส่วนของ form ตามมาด้วยการสร้างข้อความรูปภาพ เริ่มที่การ สร้าง function random text ออกมา 6ตัว หรือตามที่ต้องการ ดังนี้
ไฟล์ text_captcha.php

<?

function ranDomStr($length){
    $str2ran = 'abcdefghijklmnopqrstuvwxyz123456789';
    $str_result = "";
    while(strlen($str_result)<$length){
            $str_result .= substr($str2ran,(rand()%strlen($str2ran)),1);
    }
    return($str_result);
}
$ran_str = randomstr(6);

?>

จากนั้นก็มาสร้าง text ให้เป็นรูปภาพ ดังนี้

ไฟล์ text_captcha.php

<?php

$font = "40240.TTF";//กำหนด font ตัวหนังสือ
$image = imagecreatefrompng('bg.png'); //สร้าง background จาก .png
$bg = imagecolorallocate($image,200,220,220); //พื้นหลังสีขาว
$color = imagecolorallocate($image, rand(200, 300),rand(1, 200),
        rand(100, 300)); //ตรงนี้ ผมใส่ rand เพื่อให้ตัวหนังสือเปลี่ยนสี
imagettftext($image,25,0,12,30,$color,$font,$ran_str);
header("Content-type:image/png");//ส่งออกรูปภาพ
imagepng($image);
imagedestroy($image);
$_SESSION['security_code'] = $ran_str;
//เอาค่าที่ random ได้มาฝากไว้กับตัวแปร session เพราะฉนั้นท่านก็ต้อง state session ก่อน

?>

กำหนดการเปิดใช้งาน session ไว้ด้านบนสุดของเพจ ดังนี้
ไฟล์ text_captcha.php

<?php session_start();?>

จบแล้วในส่วนของ ข้อความรูปภาพ

ที่นี้ก็มาถึงในส่วนของการเช็คความถูกต้องของ ข้อความที่ส่งมา วิธีการคือ
เก็บตัวแปร session มาเช็คกับ code ที่กรอก input มานั่นเอง
ถ้า $_SESSION['security_code']ตรงกับ $_POST['code_input']
และ $_SESSION['security_code'] จะต้องไม่ใช่ค่าว่าง ถ้าเป็นตามเงื่อนไขนี้ก็ผ่าน

ไฟล์ captcha_result.php

<?php

if( $_SESSION['security_code'] == $_POST['code_input']
        && !empty($_SESSION['security_code'] ) ) {
        echo 'ขอบคุณ สำหรับการทดสอบของท่าน';
        unset($_SESSION['security_code']);
} else {
        echo 'เสียใจด้วย รหัสภาพของท่านไม่ถูกต้อง';
}
echo "<br/><br/><a href='captcha.php'>Back</a>"

?>

บทความนี้ก็จบลงเพียงเท่านี้ครับ.....

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

แนวความคิด มีว่า... เอาวันที่ปัจจุบัน มาลบด้วย วันที่ที่เขียนบทความเท่านั้นเอง.. -,,-'
แล้วเอาผลลับที่ได้มา มาเปรียบเทียบกับเวลาที่กำหนด
สมมุติ ว่าตั้งไว้ 6 วัน หรือกี่วันก็แล้วแต่จะกำหนดไว้ครับ

ถ้า(if)ผลลับ <= 6 วันที่กำหนด){
echo "show icon gif";
}
else //แต่ถ้าผ่านมามากกว่า 6 วันก็ต้องหายไป.. ตรงนี้ก็ไม่ต้องมีก็ได้ครับ..(แค่เขียนไว้ดูต่างหน้า..^,,^)
เริ่มด้วยการสร้างฟังก์ชั่น ที่เอาวันที่ปัจจุบัน ลบด้วย วันที่ที่เขียนบทความ

function new_update($str_start, $str_end) //รับค่ามาสองค่าคือ เริ่ม กับ จบ
{
$str_start = strtotime($str_start); // ทำวันที่ให้อยู่ในรูปแบบ timestamp
$str_end = strtotime($str_end);
$nseconds = $str_start-$str_end; // วันที่ระหว่างเริ่มและสิ้นสุดมาลบกัน
$ndays = round($nseconds / 86400); // ทำให้เป็นจำนวนวันหารด้วย 86400 วินาทีปัดเศษทศนิยม
return $ndays;
}

ดังนั้นจึงต้องมีตัวแปรที่ส่งเข้าไป 2 ตัวคือ เริ่มกับจบ

$now = date("Y-m-d H:i:s",time());
$end = $datetime;
$newdate=new_update($now,$end);

จากนั้นท่านก็วนลูปในฐานข้อมูลเพื่อดึงค่าวันที่ที่เขียนบทความ มาเปรียบเทียบ ก็คือฐานข้อมูลของบทความ
นั่นเอง...

include 'config.php';
$sql = "select * from myarticles order by id_article";
$result = mysql_query($sql);
$num = mysql_num_rows($result);
$i=0;
while($i<$num){
    $row = mysql_fetch_array($result);
    $datetime = $row[datetime];
     $title = $row[title];
    echo "<div>";
    echo $title;
    if($newdate <= 6){//ถ้าผลลับ <= 6 วันที่กำหนด
        echo "<img src='icon_new.gif'></img>";
    }
    echo "</div>";
    $i++;
}

Code ที่เสร็จแล้ว
ไฟล์ new_update.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
function new_update($str_start, $str_end)
{
$str_start = strtotime($str_start);
$str_end = strtotime($str_end);
$nseconds = $str_start-$str_end;
$ndays = round($nseconds / 86400);
return $ndays;
}

include 'config.php';
$sql = "select * from myarticles order by id_article";
$result = mysql_query($sql);
$num = mysql_num_rows($result);
$i=0;
while($i<$num){
$row = mysql_fetch_array($result);
$datetime = $row[datetime];

$now = date("Y-m-d H:i:s",time());
$end = $datetime;
$newdate=new_update($now,$end);
$title = $row[title];
echo "<div>";
echo $title;
if($newdate <= 6){
echo "&nbsp;&nbsp;&nbsp;&nbsp;<img src='icon_new.gif'></img>";
}
else{
echo $newdate;
}
echo "</div>";
$i++;
}
?>
</body>
</html>

Style SignUp and Login เข้าสู่ระบบด้วย CSS, jQuery

เป็นรูปแแบบของการ สมัครสมาชิก และ Login ด้วยการเขียนโค้ดการ login กับ signup ให้อยู่ในหน้าเพจเดียวกันแล้วใช้ slideUp(),slideDown() ของ jQuery Sliding เพื่อเปิด-ปิด form ที่ต้องการใช้งาน.....

ไฟล์งานทั้งหมด
jquery.js
jquery.corner.js
login.js
style.css
members.php

เริ่มด้วยการสร้างไฟล์ members.php แล้วก็นำเข้าไฟล์ javascript กับ css ดังนี้

จากนั้นก็สร้างเมนูทั้ง login และ signup
ไฟล์ members.php


    
       Login
       Signup

กำหนด css ให้กับเมนู
ไฟล์ style.css

#menu{
height:34px;
color:#ffffff;
padding-bottom: 0px;
margin-left:102px;
}

#menu ul{
list-style: none;
height:30px;
margin:0 auto;
}

#menu ul li{
float:left;
margin:5px;
background:#999999;
}

#menu ul li a{
color:#222222;
text-decoration: none;
display: inline-block;
padding:5px;
}

#menu ul li a:hover{
color:#2CD2D3;
}

เพิ่ม form สำหรับการ login เข้าไป form login นี้ได้มาจากบทความเรื่อง
"ทำ Login ไม่ต้อง refresh php jQuery Ajax" โดยปรับแต่งนิดหน่อย
http://www.bookneo.com/article.php?id_article=169
ไฟล์ members.php








Username : 








Password : 







Login ตลอดไป

กำหนด css ให้กับ form login
ไฟล์ style.css

#submitlogin{
margin-left:177px;
background:#3B59A8;
border:1px solid #000;
color:#ffffff;
font-weight:bold;
}

input[type=text],input[type=password],#username,#password,
#cfpassword,#email,#cfpassword{
width:235px;
padding: 5px;
}

เพิ่ม form สำหรับการ signup เข้าไป
ไฟล์ members.php






Username: *







Password: *







Password confirm: *







Emailaddress: *

กำหนด css ให้กับ form signup
ไฟล์ style.css

#submitregister{
margin-left:167px;
background:#3B59A8;
border:1px solid #000;
color:#ffffff;
font-weight:bold;
}

จากนั้นก็สร้าง

ครอบทั้ง form login และ form signup เอาไว้
แล้วก็กำหนดความสูง ให้เท่ากับหรือมากกว่านิดหน่อย ของ form ที่สูงที่สุด ในที่นี้คือ form signup
แล้วกำหด css ให้ overflow:hidden; เพื่อ... ปิดส่วนเกินที่ไม่ต้องการออก
คือการกระพริบของ from ในการเลื่อนขึ้นเลื่อนลง อย่าลืมว่าเรามี form อยู่ 2 form ที่ซ้อนกันอยู่

แสร็จแล้วในเรื่องของ form และ css
ที่นี้ก็มาในส่วนของ javascript กันบ้าง...
ผมจะเริ่มด้วยการกำหนดมุมโค้งให้กับเมนู login กับ signup ก่อน ด้วยการใช้ jquery.corner.js

เขียนโค้ดลงไป ระหว่าง tag head ดังนี้
ไฟล์ members.php

ตามด้วยการสั่ง load function onload1() ในตอนที่เปิดหน้าเพจครั้งแรก เพราะว่าเราต้องการ
เปิด form login แต่ปิด form register เอาไว้ก่อน ดังนี้
ไฟล์ members.php

แสร็จแล้วก็สร้างไฟล์ javascript ชื่อ login.js แล้วสร้าง function onload1()
ขึ้นมาดังนี้
ไฟล์ login.js

function onload1(){
   $(document).ready(function(){
       $("#showformregister").hide(); //ซ่อน form register
       $("#loadsignup").removeClass("tabsignup");// ลบ highlight tab menu
       $("#loadlogin").addClass("tablogin");// เพิ่ม highlight tab menu

    });
 }

ตามด้วยคำสั่งในการ click tab menu เพื่อเรียกแสดง form ของแต่ละ form ดังนี้
ไฟล์ login.js

/*-----------------FORM LOGIN-------------------*/
$(function(){
$("#loadlogin").click(function(){
    $("#showformregister").slideUp(800).fadeOut(800);
    $("#showformlogin").slideDown("slow");
    $("#loadsignup").removeClass("tabsignup");
    $("#loadlogin").addClass("tablogin");

})
});

/*-----------------FORM SIGUP-------------------*/
$(function(){
$("#loadsignup").click(function(){
    $("#showformlogin").slideUp(800).fadeOut(800);
    $("#showformregister").slideDown("slow");
    $("#loadlogin").removeClass("tablogin");
    $("#loadsignup").addClass("tabsignup");


})
});

จบแล้ว....เชิญทดสอบ

ในที่สุดเราก็จะได้รู้กันเสียทีว่ามีผู้ที่ใช้งานเว็บไซต์ตอนนี้มีกี่คน คนในที่นี้หมายถึง session_id วิธีการก็คือ เราจะเก็บ session_id และ time() ทุกๆหน้าของเว็บเพจที่เราต้องการ เพื่อบันทึกลงฐานข้อมูล จากนั้นเราก็จะนำเอา time() มาเช็คกับเวลาที่เรากำหนดไว้ คือ 15 นาที.....

เริ่มด้วย session_start() ก่อนเพราะเราต้องเก็บตัวแปร session_id

session_start();
include 'config.php';

จากนั้นก็เก็บตัวแปรที่ต้องการก่อนคือ

$useronline = session_id();
$time = time();
$timecheck = time() - 900;//เอาไว้เช็คเวลา กำหนดไว้ 15 นาที

ต่อมาก็นับแถวในฐานข้อมูลว่ามี session_id ของผู้ที่เพิ่งจะเข้ามาหรือไม่

$sql = "select * from useronline where session = '$useronline'";
$result = mysql_query($sql);
$num = mysql_num_rows($result);

ถ้ามีอยู่แล้วก็ให้ update time()

if($num > 0){
mysql_query("update useronline set time_online = '$time'
where session = '$useronline'");
}

ถ้ายังไม่มีก็ insert เข้าไป

else{
mysql_query("insert into useronline (session,time_online) values
('$useronline','$time')");
}

จากนั้นก็นำเวลาที่ update ของ user มาเช็คกับเวลาที่กำหนด คือ 15 นาที

$sql = "select * from useronline where time_online > '$timecheck'";
$result = mysql_query($sql);
$useronline = mysql_num_rows($result);

Code ที่กล่าวมาทั้หมดนั้น ท่านสามารถนำไป include ตามเพจต่างๆตามที่ต้องการได้เพื่อ
ติดตาม update เวลาของ user เวลาที user คลิกไปตามลิงค์ต่างๆ
มาในส่วนขอการแสดงผลของการนับจำนวนของ useronline เพียงแค่ echo ออกมาแค่นั้นเอง...

<div id="user">
<div id="useronline">ผู้ใช้งานขณะนี้ <font color='blue'>
<b><?=$useronline?></b></font> ท่าน</div>
<center><div id="update">update 15 นาที</div></center>
</div>

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

<?php session_start(); ?>
<!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>
#useronline{background:#FFF3AE;border:2px solid #1BAFD5;padding:5px;}
#user{width:160px;padding:8px 8px 3px 8px; border:1px solid #999999;
background:#eeeeee;}
#update{font-size:9px;color:#999999;}
</style>
</head>

<body>
<?php
include 'config.php';
$useronline = session_id();
$time = time();
$timecheck = time() - 900;

$sql = "select * from useronline where session = '$useronline'";
$result = mysql_query($sql);
$num = mysql_num_rows($result);

if($num > 0){
mysql_query("update useronline set time_online = '$time'
where session = '$useronline'");
}
else{
mysql_query("insert into useronline (session,time_online) values
('$useronline','$time')");
}

$sql = "select * from useronline where time_online > '$timecheck'";
$result = mysql_query($sql);
$useronline = mysql_num_rows($result);
?>

<div id="user">
<div id="useronline">ผู้ใช้งานขณะนี้ <font color='blue'>
<b><?=$useronline?></b></font> ท่าน
</div>
<center><div id="update">update 15 นาที</div></center>
</div>

</body>
</html>

วันเสาร์ที่ 26 มกราคม พ.ศ. 2556

Dropdown menu อย่างง่ายด้วย jQuery, CSS

วันอังคารที่ 15 มกราคม พ.ศ. 2556

Popup menu แนวตั้งอย่างง่ายด้วย jQuery, CSS งานนี้มี Hack...

วันเสาร์ที่ 12 มกราคม พ.ศ. 2556

การกำหนดสถานะให้กับ สมาชิกด้วยฟิลด์ status SQL, PHP

วันจันทร์ที่ 7 มกราคม พ.ศ. 2556

Chaptcha ตัวหนังสือรูปภาพยืนยันการ Login หรือโพส Webboard + Refresh

วิธีการทำ new icon gif ให้กับหัวข้อบทความมาใหม่ ตามเวลาที่กำหนดไว้

วันอังคารที่ 1 มกราคม พ.ศ. 2556

Style SignUp and Login เข้าสู่ระบบด้วย CSS, jQuery

วิธีการทำ User Online เช็คจำนวนผู้ออนไลน์ทุก 15 นาที PHP,SQL

เกี่ยวกับฉัน

ค้นหาบล็อกนี้

Blog Archive

Popular Posts

Bookneo Counter