ข้ามไปที่เนื้อหาหลัก

หลักการเขียน PHP Autocomplete ด้วย jQuery ในรูปแบบ JSON


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


       แต่กรณีผู้ใช้งานในขณะนั้นมีหลายคนทำรายการพร้อมกัน การทำงานของแต่ละคนก็คิวรี่หลายครั้ง ในแต่ละวันลองคิดดูครับว่าเซิร์ฟเวอร์จะทำงานหนักขนาดไหน เช่น พอเราป้อนชื่อลูกค้ามากกว่าสองคำ ก็จะมีการดึงข้อมูลลูกค้าที่คล้ายกันมาแสดง พอพิมพ์ไปอีกเป็นสามคำก็จะเรียกอีกครั้ง พอเพิ่มหรือลบคำออกก็จะคิวรี่ทุกๆ ครั้ง ที่มีการเปลี่ยนแปลงตัวอักษร 





วิธีแก้

       ให้เก็บฐานข้อมูลลูกค้าที่ต้องการทำ Autocomplete มาเป็นไฟล์ JSON พร้อมใช้งานไปเลย หรือเมื่อเข้ามายังหน้าแบบฟอร์มกรอกข้อมูล ให้ใช้ jQuery เรียกข้อมูลผ่าน Ajax เก็บไว้ในตัวแปร และใช้ Autocomplete ใน jQery UI ดึงมาแสดง ลองศึกษาตัวอย่างในส่วนของ Autocomplete แบบ categorise ดูนะครับ


* หมายเหตุ


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



2. เพิ่มการตรวจสอบเงื่อนไข num rows เพื่อตรวจสอบก่อนว่าข้อมูลที่ได้นั้น มีมากเกินไปหรือไม่ ตัวอย่าง

       กำหนดจำนวนรายการที่ใช้ฟังก์ชั่นนี้ได้ไว้ในไฟล์ config.php เพื่อจะได้เรียกใช้หลายๆหน้า
       
       define("MAX_ROWS_AUTOCOMPLETE", 1000);


       ในฟังก์ชั่นที่สร้างข้อมูล

if(mysql_num_rows($query) > MAX_ROWS_AUTOCOMPLETE){


//เริ่มสร้างข้อมูลให้อยู่ในรูปแบบ JSON


}


       ลองปรับใช้กันดูนะครับ ถ้าใช้ได้ถูกที่ถูกเวลา คิดว่าช่วยได้เยอะ




ตัวอย่างเหตุการณ์

บริษัทแห่งหนึ่ง มีพนักงานอยู่ 400 กว่าคน
พนักงานที่ใช้โปรแกรมพัฒนาจาก PHP ต่อวัน 20 คน


ทั้ง 20 คนนี้จะต้องคอยบันทึกข้อมูลต่างๆ ตลอดทั้งวัน


และเมื่อถึงแบบฟอร์มที่ต้องเลือก ชื่อพนักงานจะใช้ Autocomplete
เมื่อใช้งานพร้อมกัน 10 คน แต่ละคนค้นหาชื่อพนักงานด้วยอักษรอย่างน้อยคนละ 3 ตัวอักษร


โปรแกรมจะทำการค้นหารายชื่อพนักงานโดยส่งค่าผ่าน Ajax ไปยัง PHP เพื่อคิวรี่ข้อมูล มาแสดง


ดังนั้นผู้ใช้ 1 คนจะคิวรี่ 3 ครั้ง
ผู้ใช้ 10 คนก็จะคิวรี่รวม 30 ครั้ง


เฉลี่ยแต่ละวันจะเรียกแบบฟอร์มนี้ หรือฟังก์ชั่นนี้อยู่ 10 ครั้ง
ก็จะเท่ากับ 30 x 10 = 300 ครั้งที่ MySQL จะได้รับคำสั่งให้ค้นหาข้อมูลพนักงาน


ดังนั้น บางครั้งที่ผู้ใช้งานมากกว่า 20 ค้นค้นหารายชื่อพร้อมกัน และแต่ละคนก็พิมพ์มากกว่า 3 ตัวอักษร
ลองคิดดูว่าภายในไม่กี่วินาที MySQL ต้องค้นหาข้อมูลตามคำร้องขอของผู้ใช้กี่ครั้ง


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



เพียงเท่านี้ก็ลดการทำงานของ MySQL ได้อย่างดีทีเดียวใช่ไหมล่ะครับ

ความคิดเห็น

โพสต์ยอดนิยมจากบล็อกนี้

แจกฟรี!! ระบบต่างๆที่พัฒนาด้วย PHP สำหรับนำไปใช้ในงานต่างๆ

       สำหรับหลายท่านที่ขอโค้ดเข้ามาทาง Inbox ของเฟซบุ๊กแฟนเพจ หรือถามถึงระบบต่างๆหลังไมค์มานั้น ส่วนใหญ่ก็มีแจกอยู่แล้วในเว็บบอร์ด ThaiCreate.Com นะครับ และด้านล่างนี้ก็เป็นระบบต่างๆที่แจกให้นำไปลองใช้ลองศึกษากันครับ

สอนเขียน PHP แสดงการจองห้องประชุมแบบไฮไลท์ตามช่วงเวลา (แบบเชื่อมต่อฐานข้อมูล MySQL)

ตัวอย่าง ผลลัพธ์ที่ได้จากการจองในฐานข้อมูล ตาราง tb_room สร้างตารางรายชื่อห้องประชุม สำหรับ id นั้นเป็น Primarykey จะกำหนดให้สร้างอัตโนมัติ ทุกครั้งที่เราเพิ่มชื่อห้องประชุมใหม่ -- -- Database: `tobedev_example` -- -- -------------------------------------------------------- -- -- Table structure for table `tb_room` -- CREATE TABLE IF NOT EXISTS `tb_room` (   `id` int(11) NOT NULL,   `name` varchar(30) NOT NULL ) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8; -- -- Dumping data for table `tb_room` -- INSERT INTO `tb_room` (`id`, `name`) VALUES (1, 'ห้องประชุม 1'), (2, 'ห้องประชุม 2'), (3, 'ห้องประชุม 3'), (4, 'ห้องประชุม 4'), (5, 'ห้องประชุม 5'); -- -- Indexes for dumped tables -- -- -- Indexes for table `tb_room` -- ALTER TABLE `tb_room`   ADD PRIMARY KEY (`id`); -- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `tb_room` -- ALTER TABLE `tb_room`   MODIFY `i...

การดึงข้อมูล MySQL มาแสดงในปฏิทิน Fullcalendar ด้วย PHP

หลักการทำงาน เรียกข้อมูลจากตาราง tb_event ด้วยฟังก์ชั่นของ MySQLi ข้อมูลจากฐานข้อมูลจะถูกวนลูปเก็บไว้ใน $data และจะถูกส่งไปที่ Fullcalendar ด้วยการแปลงข้อมูลจาก PHP ให้อยู่ในรูปแบบ JSON อาร์เรย์ด้วยฟังก์ชั่น json_encode() PHP Code <?php //Database $data = array(); $link = mysqli_connect("127.0.0.1", "tobedev", "1234", "tobedev_example"); mysqli_set_charset($link, 'utf8'); if (!$link) {     echo "Error: Unable to connect to MySQL." . PHP_EOL;     echo "Debugging errno: " . mysqli_connect_errno() . PHP_EOL;     echo "Debugging error: " . mysqli_connect_error() . PHP_EOL;     exit; } $query = "SELECT * FROM tb_event"; if ($result = $link->query($query)) {     /* fetch object array */     while ($obj = $result->fetch_object()) {        $data[] = array(                 ...