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

สอนทำ Tooltip ขั้นเทพ โดยใช้เทคนิค AJAX, PHP และ ฐานข้อมูล MySQL

ตัวอย่าง การแสดงข้อมูลสมาชิกใน Tooltip
      บทความก่อนหน้า ผมได้สอนทำTooltipสุดเจ๋ง ด้วยjQuery  ซึ่งเป็น Tooltip แบบง่ายๆแต่ไม่ธรรมดาไปแล้ว คราวนี้เราจะนำมาประยุกต์ใช้ร่วมกับภาษาPHPและฐานข้อมูล MySQL กันบ้างครับ โดยเราจะใช้ AJAX API ของ jQuery เพื่อร้องขอ(Request)ข้อมูลของสมาชิกที่ต้องการ มาแสดงใน Tooltip ครับ เราจะนำโค๊ด jQuery จากในบทความก่อนหน้า ( สอนทำ Tooltip สุดเจ๋ง ด้วย jQuery ) มาดัดแปลงโค๊ดนิดหน่อยครับ
      มาดูผลลัพธุ์ของโปรแกรมกันก่อนเลยครับ -> ตัวอย่าง Tooltip AJAX

1.อันดับแรกผมอยากให้ท่านดูโครงสร้างของเทเบิล tb_member ของผมก่อนครับ

CREATE TABLE `tb_member` (
  `mb_id` int(10) NOT NULL auto_increment,
  `mb_name` varchar(50) NOT NULL,
  `mb_email` varchar(50) NOT NULL,
  `mb_tel` varchar(30) NOT NULL,
  `mb_address` text NOT NULL,
  `mb_user` varchar(20) NOT NULL,
  `mb_pass` varchar(20) NOT NULL,
  `mb_image` varchar(20) default NULL,
  `mb_date` date default NULL,
  PRIMARY KEY  (`mb_id`)
)


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

2.ไฟล์ showmb.php -> เราจะดึงข้อมูลในเทเบิล tb_member ซึ่งเป็นข้อมูลของสมาชิก มาแสดงในไฟล์นี้ และเขียนโค๊ด PHP , jQuery+AJAX และ CSS ดังนี้
<?php
$dbconn=mysql_connect('localhost','root','root');//เชื่อมต่อกับฐานข้อมูล
mysql_select_db('db_exshop1',$dbconn);//เลือกฐานข้อมูล
mysql_query('SET NAMES UTF8');//เพื่อรองรับภาษาไทย
$rsShowMb=mysql_query('SELECT mb_id,mb_name FROM tb_member ORDER BY mb_name');//แสดงข้อมูลสมาชิกเฉพาะidและชื่อสมาชิกเท่านั้น
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
     $TtoolTipAjax();
});
$TtoolTipAjax=function(){//ทีทูลทิป ฟังก์ชั่น
$('.lnk').hover(function(e){ //Mouse Hover แอทริบิวต์ คลาส ชื่อ lnk
$('body').append('<div class="showTooltip"> </div>');
var showTooltip=$('.showTooltip');
    $.ajax({//เรียกใช้ ajax ของ jQuery
        url:$(this).attr('turl')+'&'+new Date().getTime(),
        beforeSend :function(){//ก่อนส่งค่า 
             showTooltip.html('<img src="wait.gif"/>'); //แสดงตัว loading 
          },
        success:function(data){//ส่งค่าเสร็จสมบูรณ์ พร้อมกับผลลัพธุ์ถูกส่งกลับมา(data)
            showTooltip.html(data);
       }
    });
var mousex = e.pageX+10 ; 
var mousey = e.pageY;  
var tooltipWidth = showTooltip.width(); 
var tooltipHeight = showTooltip.height(); 
var toolVisX = $(window).width() - (mousex + tooltipWidth); 
var toolVisY = ($(window).height()+$(window).scrollTop())-(mousey+tooltipHeight); 
if ( toolVisX < 10 ) {  mousex = e.pageX - tooltipWidth - 40;  }
if ( toolVisY < 10 ) {   mousey = e.pageY - tooltipHeight - 10;  }
showTooltip.css({ top: mousey, left: mousex,display:'none'});
showTooltip.slideDown('slow');
},function(){ //Mouse Out
       $('.showTooltip').remove();//Remove Tooltip
})
}
</script>
<title>Tooltip Ajax PHP+MySQL</title>
<style type="text/css">
/*ปรับสีสันของ Tooltip ได้จากคำสั่ง CSS ตรงนี้*/
body{
font-size:12px;
font-family:Tahoma, Geneva, sans-serif;
}
.showTooltip{
float:left;
padding:10px;
background:#F3F3F3;
border:2px solid #CFCFCF;
-moz-border-radius: 4px;  
-webkit-border-radius: 4px;  
border-radius: 4px;
color:#333;
position:absolute;
}
a{
margin:5px;
color:#06C;
text-decoration:none;
}
</style>
</style>
</head>
<body>
<div align="left">
  <table border="0" cellspacing="0" cellpadding="3">
    <tr align="center" bgcolor="#D1D1D1">
      <td><strong>รหัสลูกค้า</strong></td>
      <td><strong>ชื่อ-สกุลลูกค้า</strong></td>
    </tr>
    <?php while($showMb=mysql_fetch_array($rsShowMb)){?>
    <tr>
      <td align="center" bgcolor="#E8E8E8"><?=$showMb['mb_id']?></td>
      <td bgcolor="#E8E8E8"><a href="#" turl="showmbdetail.php?mbid=<?=$showMb['mb_id']?>" class="lnk"><?=$showMb['mb_name']?></a></td>
    </tr>
    <?php } ?>
  </table>
</div>
</body>
</html>
<?php mysql_close($dbconn);?>

วิธีเรียกใช้
1. ให้เพิ่ม Attribute turl และกำหนดURLของไฟล์ที่เราต้องการร้องขอข้อมูลมาแสดงแบบ AJAX เช่น turl=” showmbdetail.php”
2. กำหนดชื่อ lnk เป็นชื่อคลาส คือ class=”lnk”
3.เรียกใช้ฟังก์ชั่น Tooltip คือ $TtoolTipAjax();

3.ไฟล์ showmbdetail.php ->เป็นไฟล์ที่มีหน้าที่รับค่า Parameter Request จากไฟล์ showmb.php แล้วส่งข้อมูลของสมาชิกที่ต้องการกลับไปแสดงใน Tooltip ของไฟล์ showmb.php ให้พิมพ์คำสั่งดังนี้
<?php
$dbconn=mysql_connect('localhost','root','root');//เชื่อมต่อกับฐานข้อมูล
mysql_select_db('db_exshop1',$dbconn);//เลือกฐานข้อมูล
mysql_query('SET NAMES UTF8');//เพื่อรองรับภาษาไทย
$rsShowMbDetail=mysql_query("SELECT * FROM tb_member WHERE mb_id='".$_GET['mbid']."'") or die(mysql_error());
//แสดงข้อมูบตามค่า Parameter Request ที่ส่งมานั้นก็คือ mbid
$showMbDetail=mysql_fetch_array($rsShowMbDetail);
?>
<table border="0" cellspacing="0" cellpadding="3">
  <tr align="center" bgcolor="#D1D1D1">
    <td colspan="2"><strong>ข้อมูลสมาชิก</strong></td>
  </tr>
  <tr>
    <td rowspan="5" bgcolor="#E8E8E8">
    <img src="../../Photo_Member/<?=$showMbDetail['mb_image']?>" width="80"><!--ชื่อโฟลเดอร์เก็บไฟล์รูปสมาชิกของผมคือ Proto_Member-->
    </td>
    <td bgcolor="#E8E8E8"><strong>User Name</strong> :
<?=$showMbDetail['mb_user']?></td>
  </tr>
  <tr>
    <td bgcolor="#E8E8E8"><strong>ชื่อ-สกุล</strong> :
<?=$showMbDetail['mb_name']?></td>
  </tr>
  <tr>
    <td height="29" bgcolor="#E8E8E8"><strong>เบอร์โทร</strong> :
<?=$showMbDetail['mb_tel']?></td>
  </tr>
  <tr>
    <td bgcolor="#E8E8E8"><strong>อีเมล</strong> :
<?=$showMbDetail['mb_email']?></td>
  </tr>
  <tr>
    <td bgcolor="#E8E8E8"><strong>ที่อยู่ </strong>:
<?=$showMbDetail['mb_address']?></td>
  </tr>
</table>
<?php mysql_close($dbconn);?>

หากสงสัยหรือติดปัญหาตรงไหน ก็สามารถสอบถามผมได้จากช่องคอมเม้นท์ด้านล่างครับ
ดูผลลัพธุ์ของโปรแกรม-> ตัวอย่าง Tooltip AJAX

9 ความคิดเห็น :

  1. เยี่ยมครับประยุกต์เข้ากับโปรเจคผมเเล้วดูมีสีสันขึ้นเลย^^

    ขอบคุณมากครับ

    ตอบลบ
  2. ไม่ระบุชื่อ13 พฤษภาคม 2555 เวลา 11:40

    ดีจังเลย แต่ผมรองไปทำดูแล้ว
    ไฟค์ showmb.php นั้นแสดงผลเป็นภาษาไทย
    ส่วนไฟค์ showmbdetial นั้นก็แสดงผลเป็นภาษาไทย

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

    ตอบลบ
  3. เปลี่ยน Charset ให้เป็น utf8 ให้หมดเลยครับ ไม่ว่าจะเป็นไฟล์ showmb.php,showmbdetail.php และฐานข้อมูลด้วย หรือจะเปลี่ยนให้เป็น tis620 ทั้งหมดก็ได้

    ตอบลบ
  4. แก้ปัญหา การดึงข้อมูล จากฐานข้อมูล เมื่อเปลี่ยน charset ใน แท็ก meta

    การแสดงข้อมูลจากฐานข้อมูล เมื่อมีการเปลี่ยน charset ใน แท็ก meta เช่น เปลี่ยนจาก windows-874 เป็น utf-8
    แบบเดิม

    <meta http-equiv="Content-Type" content="text/html; charset=windows-874" />

    เปลี่ยนเป็น

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    ข้อมูลที่แสดงอาจจะมีการแสดงผลที่ผิดพลาดเกิดขึ้น เช่นข้อความอ่านไม่ออก หรือเป็น ตัวอักษรแปลกๆ เป็นต้น ลองแก้ปัญหาโดยการ set ค่า character set ในขั้นตอนการติดต่อฐานข้อมูล ให้ตรงกับ ค่า charset ใน แท็ก meta ในหน้าเว็บเพจนั้นๆ เช่น ถ้า charset ใน แท็ก meta เป็น utf-8 ก็ให้กำหนดคำสั่ง sql เป็น mysql_query("set character set utf8"); เป็นต้น

    ตัวอย่างการใช้งาน

    <?php
    $link=mysql_connect("localhost","root","123456"); // เชื่อมต่อ Server
    mysql_select_db("example_db"); // ติดต่อฐานข้อมูล
    mysql_query("set character set utf8"); // กำหนดค่า character set ที่จะใช้แสดงผล
    ?>

    อ้างอิงจาก -> เว็บนี้

    ตอบลบ
  5. ไม่ระบุชื่อ13 พฤษภาคม 2555 เวลา 12:05

    ขอบคุณมากๆๆครับ
    ตอนนี้ผมกำลังหัดเขียนไปเลื่อยๆๆน่ะครับ ตอนนี้ผมกำลังทำตามบทความแต่ละบท ไปเลื่อยๆ เลยครับ ขอบคุณจริงๆๆครับ

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

    ตอบลบ
  7. เยี่ยมไปเลย ขอบคุณมากครับ

    ตอบลบ