ajax - itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี https://www.itoffside.com ข้อมูลข่าวสารและเรื่องราวบนโลกของไอทีที่ ล้ำหน้า พร้อมสาระการเขียนโปรแกรมคอมพิวเตอร์ Mon, 16 Mar 2020 07:52:59 +0000 th hourly 1 https://wordpress.org/?v=6.8.5 https://www.itoffside.com/wp-content/uploads/2020/04/cropped-favicon-96x96-1-32x32.png ajax - itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี https://www.itoffside.com 32 32 การทำ Multiple Dropdown จังหวัด, อำเภอ, ตำบล แบบ 3 ชั้น ด้วย Ajax + PHP + MySQL https://www.itoffside.com/dropdown-dynamic-3-level-with-ajax/ https://www.itoffside.com/dropdown-dynamic-3-level-with-ajax/#comments Tue, 21 Jan 2020 06:50:38 +0000 https://www.itoffside.com/?p=3185 บทความนี้เป็นการสอนการทำ Dropdown 3 ชั้น โดยใช้เทคนิค Ajax ในการช่วยเพื่อให้หน้าเว็บไปต้องรีเฟส โดยขั้นตอนการทำงานเริ่มจากเลือกจังหวัด เมื่อเลือกจังหวัดแล้ว Dropdown ชั้นที่ 2 จะมีรายชื่ออำเภอของจังหวัดที่เลือกเท่านั้น หลังจากนั้นเมื่อเราเลือกอำเภอ Dropdown ชั้นที่ 3 จะมีรายชื่อตำบลของอำเภอที่เราเลื...

The post การทำ Multiple Dropdown จังหวัด, อำเภอ, ตำบล แบบ 3 ชั้น ด้วย Ajax + PHP + MySQL first appeared on itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี.

]]> บทความนี้เป็นการสอนการทำ Dropdown 3 ชั้น โดยใช้เทคนิค Ajax ในการช่วยเพื่อให้หน้าเว็บไปต้องรีเฟส โดยขั้นตอนการทำงานเริ่มจากเลือกจังหวัด เมื่อเลือกจังหวัดแล้ว Dropdown ชั้นที่ 2 จะมีรายชื่ออำเภอของจังหวัดที่เลือกเท่านั้น หลังจากนั้นเมื่อเราเลือกอำเภอ Dropdown ชั้นที่ 3 จะมีรายชื่อตำบลของอำเภอที่เราเลือก จะเห็นได้ว่าทั้งหมดนี้เราใช้ ภาษา PHP + MySQL (เทคนิค Ajax) เท่านั้น ซึ่งทางผู้เขียนจะอธิบายขั้นตอนของ code เพื่อให้ผู้อ่านเข้าใจได้ง่ายขึ้น

เดโม่ตัวอย่าง

เครื่องมือพัฒนา

1. XAMPP สำหรับจำลองเครื่องเราเป็น SERVER ให้ใช้เวอร์ชั่นล่าสุด (ที่ใช้ php 7 ขึ้นไป)
2. VSCODE ใช้ในการเขียนโปรแกรม

ขั้นตอน

1. ดาวน์โหลดฐานข้อมูลมาก่อน สามารถดาวน์โหลดได้ที่ Click to Download อ้างอิงจาก https://github.com/parsilver/thailand-provinces
2. หลังจากนั้นทำการสร้าง database ชื่อ thailand แล้วทำการ Import SQL โดยใช้ PHPMyAdmin
3 สร้างโปรเจค multiple_dropdown ไว้ใน c:\xampp\htdocs\
4. สร้างไฟล์ connect.php เพื่อเชื่อมต่อฐานข้อมูล code ตัวอย่างด้านล่าง

<?php
$info = array(
    'host' => 'localhost',
    'user' => 'root',
    'password' => '',
    'dbname' => 'thailand'
);
$conn = mysqli_connect($info['host'], $info['user'], $info['password'], $info['dbname']) or die('Error connection database!');
mysqli_set_charset($conn, 'utf8');

5. สร้างไฟล์ index.php เพื่อสร้าง html และทำ multiple dropdown ดู code ตัวอย่างด้านล่าง

<?php
include('connect.php');
$sql = "SELECT * FROM provinces";
$query = mysqli_query($conn, $sql);
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Multiple Dropdown - itoffside.com</title>

    <link href="assets/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container my-5">
    <div class="card">
        <div class="card-body">
            <h3>การทำ Multiple Dropdown ด้วย Ajax เลือก 3 ขั้น</h3>
            <form>
                <div class="form-row">
                    <div class="form-group col-md-4">
                        <label for="province">จังหวัด</label>
                        <select name="province_id" id="province" class="form-control">
                            <option value="">เลือกจังหวัด</option>
                            <?php while($result = mysqli_fetch_assoc($query)): ?>
                                <option value="<?=$result['id']?>"><?=$result['name_th']?></option>
                            <?php endwhile; ?>
                        </select>
                    </div>
                    <div class="form-group col-md-4">
                        <label for="amphure">อำเภอ</label>
                        <select name="amphure_id" id="amphure" class="form-control">
                            <option value="">เลือกอำเภอ</option>
                        </select>
                    </div>
                    <div class="form-group col-md-4">
                        <label for="district">ตำบล</label>
                        <select name="district_id" id="district" class="form-control">
                            <option value="">เลือกตำบล</option>
                        </select>
                    </div>
                </div>                
            </form>
        </div>
    </div>
</div>

<script src="assets/jquery.min.js"></script>
<script src="assets/script.js"></script>
</body>
</html>
<?php
mysqli_close($conn);

คำอธิบาย Code

บรรทัด 1-5 เป็นการเชื่อต่อฐานข้อมูลและดึงข้อมูลจังหวัดมา (province)


บรรทัด 22-31 เป็นการนำข้อมูลจังหวัดที่ได้ จากบรรทัด 1-5 มาแสดงในหน้าจอ


บรรทัด 32-43 เป็นการใส่ dropdown อำเภอ, ตำบล แต่ยังไม่มีข้อมูล จนกว่า เราจะเลือกจังหวัด ซึ่งเราจะนำ javascript มาจับ Event หน้าจอ เพื่อเรียกใช้งาน ajax แล้วนำข้อมูล อำเภอ, ตำบล มาใส่ตามลำดับ


บรรทัด 51 เป็นการเรียกใช้ไฟล์ script.js โดย file นี้มีความสำคัญในการ จัดการ AJAX

6. สร้างไฟล์ script.js ไว้ที่โฟล์เดอร์ assets เพื่อใช้สำหรับ เวลาเราเปลี่ยนแปลง จังหวัดหรืออำเภอ ให้ทำการ ดึงข้อมูล มาใหม่

$(function(){
    var provinceObject = $('#province');
    var amphureObject = $('#amphure');
    var districtObject = $('#district');

    // on change province
    provinceObject.on('change', function(){
        var provinceId = $(this).val();

        amphureObject.html('<option value="">เลือกอำเภอ</option>');
        districtObject.html('<option value="">เลือกตำบล</option>');

        $.get('get_amphure.php?province_id=' + provinceId, function(data){
            var result = JSON.parse(data);
            $.each(result, function(index, item){
                amphureObject.append(
                    $('<option></option>').val(item.id).html(item.name_th)
                );
            });
        });
    });

    // on change amphure
    amphureObject.on('change', function(){
        var amphureId = $(this).val();

        districtObject.html('<option value="">เลือกตำบล</option>');
        
        $.get('get_district.php?amphure_id=' + amphureId, function(data){
            var result = JSON.parse(data);
            $.each(result, function(index, item){
                districtObject.append(
                    $('<option></option>').val(item.id).html(item.name_th)
                );
            });
        });
    });
});

อธิบาย Code

บรรทัด 2-4 สร้างตัวแปรเพื่อเก็บ Element Selector ของ Dropdown จังหวัด, อำเภอ, ตำบล


บรรทัด 7-21
– เมื่อมีการเปลี่ยนแปลง Dropdown (เลือกจังหวัด) จะทำการ Clear ข้อมูล อำเภอ, ตำบล ตามบรรทัด 10-11
– หลังจากนั้น จะทำการใช้ GET ของ jQuery ยิง Request ไปที่ get_amphure.php เพื่อดึงข้อมูลอำเภอมา โดยใส่ข้อมูลตัวแปร จังหวัดที่เลือกไปด้วยเพื่อดึงอำเภอเฉพาะจังหวัดที่เลือกเท่านั้น ตัวแปรชื่อ provicne_id ตามบรรทัดที่ 13
– หลังจากยิง Request ไปที่ server แล้ว Server จะตอบกลับมาเป็นข้อมูลรายการของอำเภอจากจังหวัดที่เลือกใน Dropdown รูปแบบของการตอบกลับเป็น JSON ดังนั้นเราต้องทำการ parse data ก่อน ตามบรรทัด 14
– เมื่อ parse data แล้วข้อมูลจะอยู่ในรูปแบบนี้

[
  {
    "id":1,
    "name_th": "ห้างฉัตร",
    "province_id": 324
  },
  {},
  ...
]

– ให้เราใช้คำสั่ง jQuery Append ข้อมูลลงใน HTML โดยข้อมูลมาเป็น Array ให้ทำการวนข้อมูล โดยใส่ value คือ item.id และ name คือ item.name_th ตามบรรทัด 17 


บรรทัด 24-37 เป็นการดึงข้อมูลตำบลของอำเภอที่เราเลือกมาแสดงบน HTML โดย Event จะทำงานเมื่อคลิกเปลี่ยนอำเภอใน Dropdown การทำงานจะคล้ายกับ การเปลี่ยนจังหวัด แต่แตกต่างที่ ไฟล์ที่ดึงข้อมูลต้องเปลี่ยนเป็น get_district.php และ ตัวแปรที่ส่งไปเป็นตัวแปรของอำเภอที่ถูกเลือก และสุดท้าย ตอนได้รับข้อมูลจาก Server มาก็นำมาวนใส่ ใน Dropdown ตำบล ก็เป็นอันจบการทำงาน

7. สร้างไฟล์ get_amphure.php เพื่อดึงข้อมูล อำเภอ จากจังหวัดที่เลือกมา ดู code ตัวอย่างด้านล่าง

<?php
include('connect.php');
$sql = "SELECT * FROM amphures WHERE province_id={$_GET['province_id']}";
$query = mysqli_query($conn, $sql);

$json = array();
while($result = mysqli_fetch_assoc($query)) {    
    array_push($json, $result);
}
echo json_encode($json);

อธิบาย Code
เมื่อ ไฟล์ script.js request ขอข้อมูลจาก server โดยเรียกใช้ไฟล์ get_amphure.php และส่งตัวแปร province_id มาด้วย เป็นตัวแปร ได้จากการเลือกจังหวัด

บรรทัด 1 เชื่อมต่อฐานข้อมูล
บรรทัด 2-3 ดึงข้อมูลเอารายการอำเภอ จากจังหวัดที่เลือก โดย where province_id
บรรทัด 6-9 ดึงข้อมูลแล้วทำการ วนเก็บข้อมูลอำเภอ ไว้ใน $json ในรูปแบบ Array
บรรทัด 10 ทำการแปลงข้อมูล Array ไปเป็น JSON เพิ่มเตรียมส่งกลับไปให้กลับ Client ที่เรียกใช้(script.js)

8. สร้างไฟล์ get_district.php เพื่อดึงข้อมูล ตำบล จากอำเภอที่เลือกมา ดู code ตัวอย่างด้านล่าง

<?php
include('connect.php');
$sql = "SELECT * FROM districts WHERE amphure_id={$_GET['amphure_id']}";
$query = mysqli_query($conn, $sql);

$json = array();
while($result = mysqli_fetch_assoc($query)) {    
    array_push($json, $result);
}
echo json_encode($json);

อธิบาย Code
การทำงานคล้ายกับไฟล์ get_amphure.php แตกต่างกันในเรื่องของการดึงข้อมูลคนละตารางเท่านั้น และตัวแปรที่ใช้การ where เป็น amphure_id

ผลลัพท์

ดาวน์โหลด

สามารถดาวน์โหลด Code เต็มๆ หรือ clone code มาดูได้ที่ลิงค์ https://github.com/ipball/multiple_dropdown

สรุป

สำหรับบทความนี้ ผู้เขียนคิดว่า หลายๆคนน่าจะเข้าใจหลักการทำงาน ของ Client – Server มองเห็นภาพการทำงานชัดเจนในทำงานของโปรแกรม ซึ่งในปี 2020 อาจจะหลายๆคนบอกว่า ยังใช้ jQuery อยู่อีกเหรอ ยังใช้ PHP อยู่อีกเหรอ?

จริงๆแล้วไม่ว่าเราจะใช้ภาษาอะไรหรือเทคโนโลยีอะไรก็ตามแต่ เราจงหาสิ่งที่เราถนัดและเหมาะสมกับงาน แต่ไม่ได้หมายความว่าจะให้ทุกคนจะต้องใช้ PHP ตลอด เราก็ควรศึกษาเรียนรู้ภาษา เทคโนโลยีใหม่ด้วย เช่นกัน เหมือนกับผู้เขียนที่ยังต้องเขียน Node.js, ExpressJS, MongoDB, Angular อยู่เลย เราเป็นนักพัฒนา เราก็ต้องศึกษาพัฒนาตัวเองอยู่สม่ำเสมอ

The post การทำ Multiple Dropdown จังหวัด, อำเภอ, ตำบล แบบ 3 ชั้น ด้วย Ajax + PHP + MySQL first appeared on itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี.

]]> https://www.itoffside.com/dropdown-dynamic-3-level-with-ajax/feed/ 23 ใช้ Datatables กับ Codeigniter แบบ Server-Side (Ajax) https://www.itoffside.com/use-datatables-with-codeigniter-server-side-ajax/ https://www.itoffside.com/use-datatables-with-codeigniter-server-side-ajax/#comments Sat, 06 Jan 2018 18:26:12 +0000 https://www.itoffside.com/?p=2784 สวัสดีครับคุณผู้อ่านทุกท่าน เมื่อคราวที่แล้ว ผมได้มีการลงบทความ การใช้งาน Datatables แบบบ้านๆ โดยใช้ PHP ธรรมดาในการ ทำงาน ซึ่งทางผมเองคาดว่าผู้อ่าน จะได้รับประโยนช์จากบทความ ไม่มากก็น้อยครับ ดังนั้นในบทความนี้ ผมก็เลยมาสอนการใช้ Datatables กับ Codeigniter ว่าต้องทำอย่างไรบ้าง เริ่มจากตรงไหนบ้าง ซึ่...

The post ใช้ Datatables กับ Codeigniter แบบ Server-Side (Ajax) first appeared on itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี.

]]> สวัสดีครับคุณผู้อ่านทุกท่าน เมื่อคราวที่แล้ว ผมได้มีการลงบทความ การใช้งาน Datatables แบบบ้านๆ โดยใช้ PHP ธรรมดาในการ ทำงาน ซึ่งทางผมเองคาดว่าผู้อ่าน จะได้รับประโยนช์จากบทความ ไม่มากก็น้อยครับ

ดังนั้นในบทความนี้ ผมก็เลยมาสอนการใช้ Datatables กับ Codeigniter ว่าต้องทำอย่างไรบ้าง เริ่มจากตรงไหนบ้าง ซึ่งบทความนี้เหมาะกับคนที่เคยเขียน Codeigniter และเขียน javascript พอได้ ครับ

Demo
http://sysapp.itoffside.com/datatables_ci/

Download
https://github.com/ipball/datatables_ci/archive/master.zip

Clone git
https://github.com/ipball/datatables_ci.git

สิ่งที่ต้องเตรียม
1. ไฟล์ plugins Datatables
2. ไฟล์ jQuery
3. Bootstrap framework
4. Codeiniter framework
5. ฐานข้อมูล

เริ่มต้นกันเลยครับ

สร้างฐานข้อมูลชื่อ datatables แล้ว import ไฟล์ sql (ในข้อ 5)
กำหนด application/config/config.php
datatables-with-codeigniter-10

กำหนด application/config/database.php ให้ตรงตามค่าเซฟเวอร์
datatables-with-codeigniter-09

ให้เราสร้างไฟล์ index.php ไว้ในไฟล์ Application/view/
จะได้เป็น Application/view/index.php

ต่อมาให้เราทำการ Include ไฟล์ jquery, bootstrap, dataTables ไว้ <body> นะครับ จากตัวอย่างไว้ ล่างสุดของ body
โดยไฟล์ที่เพิ่มจะมีด้วยกัน 4 ไฟล์นะครับ ซึ่งมี jquery, bootstrap, datatables(2 ไฟล์)
datatables-with-codeigniter-01

จากนั้น เพิ่ม css ไฟล์ไว้ใน <header> ตามรูปภาพด้านล่าง
โดยมีด้วยกัน 2 ไฟล์คือ ไฟล์ bootstrap, datatables สำหรับ bootstrap
datatables-with-codeigniter-02

เมื่อเรา include ไฟล์ js, css มาครบแล้วที่นี้เราก็พร้อมที่จะใช้งานแล้วครับ แต่เราต้องสร้างตาราง ไว้ใน <body> กันก่อน สร้างตารางตามรูปภาพด้านล่างนี้เลยนะครับdatatables-with-codeigniter-03

จากนี้จะเป็นการเรียกใช้งาน datatables โดยใช้ jQuery นะครับ โดยผมจะนำโค้ดไว้ล่างสุด ก่อน </body> ลองดูตัวอย่างโค้ดครับ

<script type="text/javascript">
    $(document).ready(function () {
      var table = $('#table_id').DataTable({
        pageLength: 10,
        serverSide: true,
        processing: true,
        ajax: {
          url:'<?php echo site_url('customer/find_with_page'); ?>'
        },
        'columns':[
        {
          data:'name',
          render: function(data, type, row){
            return '<a href="<?php echo site_url('customer/edit/'); ?>'+row['id']+'">'+data+'</a> ';
          }
        },
        {
          data:'phone'
        },
        {
          data:'fax'
        },
        {
          data:'state',
          render: function (data,type,row){
            var active = '<span class="label label-success">ใช้งาน</span>';
            var inactive = '<span class="label label-danger">ยกเลิก</span>';
            var status = (data==true) ? active : inactive;
            return status;
          }
        },
        {
          data:'id',
          render:function(data,type,row){
            var dataName = row['name'];
            var btnDelete = '<a href="#" data-href="<?php echo site_url('customer/delete'); ?>" data-id="'+data+'" data-name="'+dataName+'" role="button" class="btn btn-danger btn-xs"><i class="glyphicon glyphicon-trash"></i> ลบ</a>';
            return btnDelete;
          },
          orderable: false
        }
        ]
      });
    })
  </script>

ภาพตัวอย่าง
datatables-with-codeigniter-04

อธิบายโค้ดคำสั่ง
โดยสังเกตุ นะครับ ว่าโค้ด jQueryส่วนของ var table = $(‘#table_id’) จะต้องตรงกับ <table id=”table_id“> เพื่อใช้ในการอ้างอิงการทำงาน
– pageLength หมายถึงจำนวนต่อหน้าที่แสดงผล
– serverSide หมายถึง เปิดใช้งานโหมด server-side
– processing หมายถึง เวลามีการเปลี่ยนแปลงข้อมูลให้แสดง label loading ขึ้นมา
–  ajax { url:…} หมายถึงการเรียกดึงข้อมูลจาก server ในตัวอย่างดึงข้อมูลจาก site_url(‘customer/find_with_page’) นั้นหมายถึง ว่าเราต้องมี controller ชื่อ Customer และ Method ชื่อ find_with_page เดี่ยวเราจะมาสร้าง Controller กันต่อครับ
– ‘columns‘:[] หมายถึง คอลัมน์ใน datatables มีอะไรบ้างเราสามารถกำหนดได้ที่นี้โดยอ้างอิงจากฟิล์ดข้อมูลที่เราดึงมาจาก server ด้วยครับ เช่นเราดึงข้อมูลมีฟิล์ด id, name, age ดังนั้นจะได้ ‘columns’:[data:’name’, data:’age’] โดยโค้ดนี้จะแสดง คอลัมน์ name, age ครับ กรณีถ้าเราต้องการ style column เราก็ใช้คำสั่ง render เช่น

'columns':[
        {
          data:'name',
          render: function(data, type, row){
            return '<a href="<?php echo site_url('customer/edit/'); ?>'+row['id']+'">'+data+'</a> ';
          }
        },

สำหรับ view/index.php ก็มีเพียงเท่านี้นะครับ ต่อไปเราจะมาเขียนโค้ดในส่วนของ Controller และ Model กันต่อ

สร้างไฟล์ Customer.php ในโฟล์เดอร์ application/controllers
จะได้เป็น application/controllers/Customer.php
แล้วให้นำโค้ดนี้ไปวางไว้ใน ไฟล์ครับ

<?php
defined('BASEPATH') or exit('No direct script access allowed');

class Customer extends CI_Controller
{
    public function __construct()
    {
        parent::__construct();
        $this->load->model('Customer_model');
    }

    public function index()
    {
        $this->load->view('customer/index');
    }

    public function find_with_page()
    {
        $order_index = $this->input->get('order[0][column]');
        $param['page_size'] = $this->input->get('length');
        $param['start'] = $this->input->get('start');
        $param['draw'] = $this->input->get('draw');
        $param['keyword'] = trim($this->input->get('search[value]'));
        $param['column'] = $this->input->get("columns[{$order_index}][data]");
        $param['dir'] = $this->input->get('order[0][dir]');

        $results = $this->Customer_model->find_with_page($param);

        $data['draw'] = $param['draw'];
        $data['recordsTotal'] = $results['count'];
        $data['recordsFiltered'] = $results['count_condition'];
        $data['data'] = $results['data'];
        $data['error'] = $results['error_message'];

        $this->output->set_content_type('application/json')->set_output(json_encode($data));
    }
}

อธิบายโค้ด
Method find_with_page
datatables-with-codeigniter-05

จากรูปภาพด้านบน ตัวแปรอาเรย์ $param รับค่าจาก datatables มา แล้วเรานำค่านี้ส่งไปยัง model เพื่อ query ข้อมูลตามเงื่อนไขของ datatables เช่น ต้องการแสดงหน้า 2 หรือต้องการ sort ตารางนะครับ

datatables-with-codeigniter-06

จากรูปภาพด้านบน บรรทัดที่ 27 เราใช้ model ในการ get ค่าจากฐานข้อมูลมาแล้วไว้ใน $results แล้ว ก็ส่งตอบกลับไปที่ datatables ในแบบ JSON ครับโดยจำเป็นต้องส่งไปคือข้อมูล
– draw
– recordsTotal หมายถึงจำนวนทั้งหมดของข้อมูล
– recordsFiltered หมายถึงจำนวนทั้งหมดของข้อมูลที่ กรองมาแล้ว
– data หมายถึงข้อมูล เช่น name, email, phone
– error หมายถึง error ข้อผิดพลาดจากการเรียกข้อมูล ถ้าไม่มีให้ใส่เป็นค่าว่าง

สำหรับ Controller มีเพียงเท่านี้ครับ แล้วเรามาเขียนส่วนของ Model ว่าทำอย่างไรถึงจะโยนข้อมูลในรูปแบบนี้มาให้ Controller

สำหรับ Model ให้เราสร้างไฟล์ Customer_model.php ไว้ในโฟล์เดอร์ application/models
ได้เป็น application/models/Customer_model.php
จากนั้นให้เรานำโค้ดนี้ไปใส่ในไฟล์

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Customer_model extends CI_Model {
	public function __construct(){
		parent::__construct();
	}

	public function find_with_page($param){
		$keyword = $param['keyword'];
		$this->db->select('*');

		$condition = "1=1";
		if(!empty($keyword)){
			$condition .= " and (name like '%{$keyword}%' or phone like '%{$keyword}%')";
		}

		$this->db->where($condition);
		$this->db->limit($param['page_size'], $param['start']);
		$this->db->order_by($param['column'], $param['dir']);

		$query = $this->db->get('customer');
		$data = [];
		if($query->num_rows() > 0){
			foreach($query->result() as $row){
				$data[] = $row;
			}
		}

		$count_condition = $this->db->from('customer')->where($condition)->count_all_results();
		$count = $this->db->from('customer')->count_all_results();
		$result = array('count'=>$count,'count_condition'=>$count_condition,'data'=>$data,'error_message'=>'');
		return $result;
	}
}

อธิบายโค้ด
datatables-with-codeigniter-07

จากรูปภาพด้านบน
บรรทัด 9 – 27 เป็นการ get ข้อมูลจากฐานข้อมูลโดยมีเงื่อนไขต่างๆที่รับตัวแปรมาจาก controller ครับ
บรรทัดที่ 29 คือ จำนวนทั้งหมดของข้อมูลแบบที่กรองข้อมูลมาแล้ว
บรรทัดที่ 30 คือ จำนวนข้อมูลทั้งหมด
บรรทัดที่ 31 คือ $result คืนค่าข้อมูลแบบ array มาโดยมี count, count_condition, data ,error_message

เสร็จแล้วครับ ผลลัพท์ได้เป็นดังนี้
datatables-with-codeigniter-08

เราสามารถ sort column ได้ ค้นหาชื่อลูกค้าได้ สามารถกำหนด style ใน column ได้ สามารถกำหนดว่าจะแสดงกี่แถวในหนึ่งหน้าได้ ซึ่งผมว่า datatables เหมาะนำไปใช้งานเกือบทุกๆงาน ครับ
จบแล้วครับสำหรับการใช้ dataTables กับ Codeigniter หากใครมีคำถามข้อสงสัยเพิ่มเติมสามารถเขียนความเห็นด้านล่างไว้เลยนะครับ

The post ใช้ Datatables กับ Codeigniter แบบ Server-Side (Ajax) first appeared on itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี.

]]> https://www.itoffside.com/use-datatables-with-codeigniter-server-side-ajax/feed/ 2 เขียน PHP ด้วยการค้นหาข้อมูล MySQL โดยใช้เทคนิค Ajax https://www.itoffside.com/php-search-mysql-by-ajax/ https://www.itoffside.com/php-search-mysql-by-ajax/#comments Wed, 01 Apr 2015 17:43:57 +0000 https://www.itoffside.com/?p=2458 บทความนี้แนะนำเกี่ยวกับการค้นหาข้อมูล MySQL แล้วดึงข้อมูลออกมาโชว์ไม่ต้อง Refresh โดยใช้เทคนิค AJAX ในการทำงาน โดยตัวอย่าง source code เป็นตัวอย่างแบบง่ายๆ สามารถเข้าใจได้ไม่ยาก และนำไปประยุกต์ใช้ได้ทันที demo ทดสอบคลิกที่นี้ ดาวน์โหลดไฟล์ทั้งหมด ที่นี้ 1. สร้างตารางและ import ข้อมูล [crayon-69c46e9...

The post เขียน PHP ด้วยการค้นหาข้อมูล MySQL โดยใช้เทคนิค Ajax first appeared on itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี.

]]> บทความนี้แนะนำเกี่ยวกับการค้นหาข้อมูล MySQL แล้วดึงข้อมูลออกมาโชว์ไม่ต้อง Refresh โดยใช้เทคนิค AJAX ในการทำงาน โดยตัวอย่าง source code เป็นตัวอย่างแบบง่ายๆ สามารถเข้าใจได้ไม่ยาก และนำไปประยุกต์ใช้ได้ทันที

demo ทดสอบคลิกที่นี้

ดาวน์โหลดไฟล์ทั้งหมด ที่นี้

1. สร้างตารางและ import ข้อมูล

CREATE TABLE IF NOT EXISTS `items` (
`id` int(11) NOT NULL,
  `codename` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
  `itemname` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
  `detail` text COLLATE utf8_unicode_ci NOT NULL,
  `unit` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
  `price` decimal(10,2) NOT NULL,
  `img` varchar(100) COLLATE utf8_unicode_ci NOT NULL DEFAULT 'noimage.jpg',
  `created` datetime NOT NULL DEFAULT '0000-00-00 00:00:00',
  `modified` datetime NOT NULL DEFAULT '0000-00-00 00:00:00',
  `created_by` int(11) NOT NULL,
  `modified_by` int(11) NOT NULL,
  `status` tinyint(1) NOT NULL DEFAULT '1',
  `item_type_id` int(11) NOT NULL
) ENGINE=MyISAM AUTO_INCREMENT=12 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;



INSERT INTO `items` (`id`, `codename`, `itemname`, `detail`, `unit`, `price`, `img`, `created`, `modified`, `created_by`, `modified_by`, `status`, `item_type_id`) VALUES
(2, 'CM00002', 'iPhone 6 Plus', '', 'เครื่อง', '25000.00', 'ecimage.jpg', '2015-03-30 18:38:43', '2015-03-30 18:38:43', 1, 1, 1, 6),
(3, 'CM00003', 'Macbook Pro mini', '', 'เครื่อง', '45000.00', 'ecimage.jpg', '2015-03-30 18:39:53', '2015-03-30 18:39:53', 1, 1, 1, 1),
(4, 'CM00004', 'Macbook Pro 4', '', 'เครื่อง', '60400.00', 'ecimage.jpg', '2015-03-30 18:40:33', '2015-03-30 18:40:33', 1, 1, 1, 1),
(5, 'CM00005', 'กระดาษ A4', '', 'รีม', '120.00', 'ecimage.jpg', '2015-03-30 18:41:14', '2015-03-30 18:41:14', 1, 1, 1, 2),
(6, 'CM00006', 'ปากกา', '', 'แท่ง', '5.00', 'ecimage.jpg', '2015-03-30 18:41:47', '2015-03-30 18:41:47', 1, 1, 1, 2),
(7, 'CM00007', 'ดินสอ', '', 'แท่ง', '1.00', 'ecimage.jpg', '2015-03-30 18:42:28', '2015-03-30 18:42:28', 1, 1, 1, 2),
(8, 'CM00008', 'ยางลบ', '', 'ก้อน', '2.00', 'ecimage.jpg', '2015-03-30 18:43:04', '2015-03-30 18:43:04', 1, 1, 1, 2),
(9, 'CM00009', 'Epson T320 Printer Laser', '', 'เครื่อง', '2300.00', 'ecimage.jpg', '2015-03-30 18:45:48', '2015-03-30 18:45:48', 1, 1, 1, 1),
(10, 'CM00001', 'Lenovo ThinkPad E203', '', 'เครื่อง', '21000.00', 'ecimage.jpg', '2015-03-30 18:47:38', '2015-03-30 18:47:38', 1, 1, 1, 1),
(11, 'CM00010', 'Microsoft Lumia 1043', '', 'เครื่อง', '23000.00', 'ecimage.jpg', '2015-03-30 18:49:22', '2015-03-30 18:49:22', 1, 1, 1, 6);

ALTER TABLE `items`
 ADD PRIMARY KEY (`id`);
ALTER TABLE `items`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=12;

2. สร้างไฟล์ connect.php แล้วนำ code ด้านล่างนี้ใส่ลงไป

<?php
$host = 'localhost';
$user = 'root';
$password = '';
$database = 'equipment';

mysql_connect($host, $user, $password);
mysql_select_db($database);
mysql_query("SET NAMES UTF8");

3. สร้างไฟล์ index.php แล้วนำ code? ด้านล่างใส่

<!DOCTYPE html>
<?php
include 'connect.php';
?>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>ค้นหาข้อมูล : itoffside.com</title>
 <link href="css/bootstrap.min.css" rel="stylesheet">
 <link href="css/bootstrap-theme.min.css" rel="stylesheet">
 <style>
 body{
 margin-top: 20px;
 }
 .loading{
 background-image: url("ajax-loader.gif");
 background-repeat: no-repeat;
 display: none;
 height: 100px;
 width: 100px;
 }
 </style>
 </head>
 <body>
 <div class="container">
 <div class="row">
 <div class="col-md-12">
 <form class="form-inline" name="searchform" id="searchform">
 <div class="form-group">
 <label for="textsearch" >ชื่อสินค้า</label>
 <input type="text" name="itemname" id="itemname" class="form-control" placeholder="ข้อความ คำค้นหา!" autocomplete="off">
 </div>
 <button type="button" class="btn btn-primary" id="btnSearch">
 <span class="glyphicon glyphicon-search"></span>
 ค้นหา
 </button>
 </form>
 </div>
 </div>
 <div class="loading"></div>
 <div class="row" id="list-data" style="margin-top: 10px;">

 </div>
 </div>
 <script type="text/javascript" src="jquery-1.11.2.min.js"></script>
 <script type="text/javascript">
 $(function () {
 $("#btnSearch").click(function () {
 $.ajax({
 url: "search.php",
 type: "post",
 data: {itemname: $("#itemname").val()},
 beforeSend: function () {
 $(".loading").show();
 },
 complete: function () {
 $(".loading").hide();
 },
 success: function (data) {
 $("#list-data").html(data);
 }
 });
 });
 $("#searchform").on("keyup keypress",function(e){
 var code = e.keycode || e.which;
 if(code==13){
 $("#btnSearch").click();
 return false;
 }
 });
 });
 </script>
 </body>
</html>

การทำงานของไฟล์ index.php คือแสดงหน้าจอการกรอกคำค้นหา เมื่อมีการใส่ข้อมูลค้นหา ระบบจะดึกข้อมูลจาก serach.php มาแสดงโดยใช้เทคนิคของ AJAX นั้นเอง ซึ่งเมื่อมีการคลิกปุ่มค้นหา javascript ทำงานโดยเรียกไฟล์ search.php ซึ่งไฟล์ search.php เป็นไฟล์ที่ดึงข้อมูลจากฐานข้อมูล เมื่อไฟล์ search.php ดึงข้อมูลมาเรียบร้อยแล้วจะส่งค่าข้อมูลกลับไปให้กับไฟล์ index.php โดยใช้ $.ajax

4. สร้างไฟล์ search.php

<?php
include 'connect.php';
$sql = "select * from items where itemname like '%{$_POST['itemname']}%'";
$query = mysql_query($sql);
?>
<div class="col-md-12">
 <table class="table table-bordered">
 <thead>
 <tr>
 <th>ลำดับ</th>
 <th>รหัสสินค้า</th>
 <th>ชื่อสินค้า</th>
 <th>ราคาสินค้า</th>
 <th>หน่วยนับ</th>
 </tr>
 </thead>
 <tbody>
 <?php $i=1; while ($result = mysql_fetch_assoc($query)) { ?>
 <tr>
 <td><?php echo $i;?></td>
 <td><?php echo $result['codename'];?></td>
 <td><?php echo $result['itemname'];?></td>
 <td><?php echo number_format($result['price']);?></td>
 <td><?php echo $result['unit'];?></td>
 </tr>
 <?php $i++; } ?>
 </tbody>
 </table>
</div>

5. ผลลัพธ์
ajax-php

จบแล้วสำหรับบทความนี้หากผู้อ่านมีคำถามสามารถเขียนคำถามไว้ใต้ Comment เลยครับ

The post เขียน PHP ด้วยการค้นหาข้อมูล MySQL โดยใช้เทคนิค Ajax first appeared on itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี.

]]> https://www.itoffside.com/php-search-mysql-by-ajax/feed/ 32 PHP Workshop ตรวจสอบอีเมล์ซ้ำแบบ Ajax https://www.itoffside.com/php-workshop-available-email-or-username-ajax/ https://www.itoffside.com/php-workshop-available-email-or-username-ajax/#comments Tue, 15 Jul 2014 13:56:49 +0000 https://www.itoffside.com/?p=249 บ่อยครั้งที่มีการสมัครสมาชิกในเว็บไซต์ต่างๆ คุณจะได้รับการแจ้งเสมอๆ ตอนที่คุณกรอกข้อมูล Username หรือ Email ที่ไปซ้ำกับคนอื่นที่มีอยู่แล้ว จึงทำให้เว็บไซต์ต่างๆมีการตรวจสอบข้อมูล Username หรือ Email ก่อนที่จะบันทึกข้อมูลลงไป ทำให้มั่นใจได้ว่าข้อมูล Username หรือ Email ไม่มีทางที่ซ้ำกันได้อย่างแน่นอน...

The post PHP Workshop ตรวจสอบอีเมล์ซ้ำแบบ Ajax first appeared on itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี.

]]> บ่อยครั้งที่มีการสมัครสมาชิกในเว็บไซต์ต่างๆ คุณจะได้รับการแจ้งเสมอๆ ตอนที่คุณกรอกข้อมูล Username หรือ Email ที่ไปซ้ำกับคนอื่นที่มีอยู่แล้ว จึงทำให้เว็บไซต์ต่างๆมีการตรวจสอบข้อมูล Username หรือ Email ก่อนที่จะบันทึกข้อมูลลงไป ทำให้มั่นใจได้ว่าข้อมูล Username หรือ Email ไม่มีทางที่ซ้ำกันได้อย่างแน่นอน แล้วส่วนวิธีการตรวจสอบนั้นบางเว็บไซต์ใช้วิธีการผู้ใช้กรอกข้อมูลรายละเอียดต่างๆ ทั้งหมดใน Form แล้วกดปุ่ม Submit Form ถึงจะได้ตรวจสอบว่า Username หรือ Email ซ้ำกันหรือไม่ และในขณะที่เว็บไซต์บางเว็บไซต์เลือกใช้วิธีการตรวจสอบ Username หรือ Email ตอนผู้ใช้กรอก Username หรือ Email แล้ว Focus ไปที่อื่น โดยส่วนตัวของผมแล้วต้องการใช้วิธีที่ให้ผู้ใช้งานรู้ได้ทันทีหลังจากกรอก Username หรือ Email เสร็จ มากกว่าตอนที่กรอกรายละเอียดใน Form ทั้งหมดแล้วกด Submit Form ซึ่งเป็นวิธีที่เปลืองพลังงาน Server

ขั้นตอนการทำงานของการตรวจสอบ Username หรือ Email (WorkShop)
1. หน้า Form สมัครสมาชิกเมื่อผู้ใช้กรอก Email ลงไปแล้วเปลี่ยนไปกรอก Name จังหวะนี้จะเข้าเงื้อนไข Lost Focus แล้วสั่งให้ทำการตรวจสอบทันที
2. การตรวจสอบโดยใช้ Ajax โดยทางฝั่ง Client ร้องขอข้อมูลจาก Server จากไฟล์ check_email.php
3. เมื่อ Server ถูกร้องขอข้อมูล ไฟล์ check_email.php ผมทำการเขียนโปรแกรม PHP ติดต่อฐานข้อมูลแล้วตรวจสอบว่า Email ที่ผู้ใช้กรอกในหน้า Form เมื่อโปรแกรมทำงานเสร็จก็ส่งค่าตอบกลับไปยัง Client ต่อ
4. Client รับค่าข้อมูลแล้วทำการแจ้งเตือนกลับไปยังผู้ใช้งานหากข้อมูล Email ซ้ำ

สร้าง Workshop – Check email Avaliable กันเลย!

1. สร้างไฟล์ index.php ในการทำฟอร์มสมัครสมาชิก
php-workshop-available-email-or-username-ajax
ให้นำ Code ด้านล่างไปใส่ในไฟล์ index.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>itOffside.com - check email</title>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#btnSubmit').click(function() {
                    var check = check_email();
                    check.success(function(data) {
                        if (data != 1){
                            $('#register').submit();
                            return false;
                        }
                    });
                    
                });
                $('#email').focusout(function() {
                    var check = check_email();
                    check.success(function(data) {
                        if (data == 1) {
                            $('.message').html('ชื่ออีเมล์นี้มีคนใช้แล้ว กรุณาเปลี่ยนชื่ออีเมล์ใหม่');
                        }
                    });
                });
            });
            function check_email() {
                return $.ajax({
                    type: 'POST',
                    data: {email: $('#email').val()},
                    url: 'check_email.php'
                });
            }
        </script>
        <style>
            .message{
                font-size: 12px;
                color: red;
            }
        </style>
    </head>
    <body style="padding-top: 50px;">
        <h3 style="text-align:center;">สมัครสมาชิกกัน!</h3>
        <form name="register" id="register" method="POST" action="register.php">
            <table border="0" width="700" cellpadding="5" style="margin: 0 auto;">
                <tr>
                    <td style="text-align: right; width: 200px;">E-Mail</td>
                    <td>
                        <input type="text" id="email" name="email" value="">
                        <span class="message"></span>
                    </td>
                </tr>                
                <tr>
                    <td style="text-align: right;">Name</td>
                    <td><input type="text" id="Name" name="Name" value=""></td>
                </tr>
                <tr>
                    <td style="text-align: right;">&nbsp;</td>
                    <td><button type="button" id="btnSubmit">ตกลง</button></td>
                </tr>
            </table>
        </form>     
    </body>
</html>

 

2. สร้างฐานข้อมูลชื่อ itoffsideapp หลังจากนั้นทำการสร้างตารางข้อมูล สามารถสร้างโดยใช้ Script SQL ด้านล่างนี้ได้เลย

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


CREATE TABLE IF NOT EXISTS `member` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
  `email` varchar(100) COLLATE utf8_unicode_ci NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=4 ;

--
-- Dumping data for table `member`
--

INSERT INTO `member` (`id`, `name`, `email`) VALUES
(1, 'tawatsak', 'tawatsak@itoffside.com'),
(2, 'wishada', 'wishada@itoffside.com'),
(3, 'somchai', 'somchai@itoffside.com');

 

3. include ไฟล์ jquery ในไฟล์ index.php ส่วนของ <head> และไฟล์ jquery สามารถดาวน์โหลดได้ที่เว็บหลัก ซึ่งตอนนี้เวอร์ชั่น 1.11.1 (ดาวน์โหลดไฟล์)

<script src="jquery-1.11.1.min.js" type="text/javascript"></script>

 

4. สร้างไฟล์ check_email.php โดยนำ Code ด้านล่างไปวาง

<?php
/*
 * connection database
 */
$Connect = mysql_connect('localhost', 'root', '') or die('Error connecting to MySQL');
mysql_select_db('itoffsideapp', $Connect) or die('Database sysapp does not exist!');
mysql_query('SET NAMES UTF8');

$email = isset($_POST['email']) ? trim($_POST['email']) : "";
$Query = mysql_query("SELECT * FROM member WHERE email='{$email}'");
$Rows = mysql_num_rows($Query);
if($Rows == 1){
    echo "1";
}
?>

 

5. สร้างไฟล์ register.php โดยนำ Code ด้านล่างไปวาง

<h3>Success!</h3>

 

หลังจากที่เราสร้างไฟล์เสร็จหมดแล้ว ลองทดสอบกรอกชื่ออีเมล์ tawatsak@itoffside.com (Email นี้มีอยู่ในฐานข้อมูล) หลังจากกรอกเสร็จก็คลิกไปที่ช่อง Name เพื่อกรอกชื่อต่อ แล้วหน้าเว็บไซต์จะแจ้งว่า มีคนใช้อีเมล์แล้ว ตามตัวอย่างรูปภาพด้านล่าง
php-workshop-available-email-or-username-ajax

เราลองมาดูฐานข้อมูล ซึ่งมีชื่อ tawatsak@itoffside.com จริงๆ
php-workshop-available-email-or-username-ajax

ที่นี้เราลองเปลี่ยน Email ที่ไม่มีอยู่ในฐานข้อมูลก็จะสามารถบันทึกข้อมูลได้ (ในตัวอย่างบทความนี้ไม่ได้มีการบันทึกจริงๆ เป็นเพียงการทำขึ้นมาเสมือนเท่านั้น)
php-workshop-available-email-or-username-ajax

สำหรับบทความนี้เป็นเพียง Workshop เล็กๆ เท่านั้น หากมีข้อสงสัยหรือปัญหา สามารถสอบถามได้ที่ comment ด้านล่างได้เลยครับ

The post PHP Workshop ตรวจสอบอีเมล์ซ้ำแบบ Ajax first appeared on itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี.

]]> https://www.itoffside.com/php-workshop-available-email-or-username-ajax/feed/ 6 กำหนดรายการ Listbox ที่ 2 จากเงื่อนไขในการเลือก Listbox ที่ 1 ด้วย Ajax กับ jQuery https://www.itoffside.com/select-multi-listbox-ajax-jquery-php/ https://www.itoffside.com/select-multi-listbox-ajax-jquery-php/#comments Sun, 13 Jul 2014 09:17:53 +0000 https://www.itoffside.com/?p=235 การกำหนดรายการ Listbox ที่ 2 โดยเงื้อนไขจากการเลือก Listbox ที่ 1 หรือ Dropdown สามารถนำไปประยุกต์ใช้งานได้อย่างหลากหลายเช่น การทำ Listbox (Dropdown) จังหวัด – อำเภอ โดยเมื่อมีการเลือก Listbox (Dropdown) จังหวัด แล้ว Listbox (Dropdown) อำเภอ จะแสดงรายการอำเภอเฉพาะจังหวัดที่เลือกเท่านั้น โดยบทค...

The post กำหนดรายการ Listbox ที่ 2 จากเงื่อนไขในการเลือก Listbox ที่ 1 ด้วย Ajax กับ jQuery first appeared on itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี.

]]> การกำหนดรายการ Listbox ที่ 2 โดยเงื้อนไขจากการเลือก Listbox ที่ 1 หรือ Dropdown สามารถนำไปประยุกต์ใช้งานได้อย่างหลากหลายเช่น การทำ Listbox (Dropdown) จังหวัด – อำเภอ โดยเมื่อมีการเลือก Listbox (Dropdown) จังหวัด แล้ว Listbox (Dropdown) อำเภอ จะแสดงรายการอำเภอเฉพาะจังหวัดที่เลือกเท่านั้น โดยบทความนี้จะใช้ PHP, Javascript (jQuery) โดยใช้เทคโนโลยีของ Ajax เป็นตัวอย่าง และใช้ฐานข้อมูล MySQL

update บทความที่เกี่ยวข้องและปรับปรุงใหม่

ตอนนี้มีบทความ การทำ listbox/dropdown แบบ 3 ชั้นแล้ว ละเอียดกว่าเดิม คลิกเพื่อดู

เพื่อให้เห็นภาพลองดูตัวอย่าง ได้ที่นี้ Demo

1. นำ script sql ด้านล่างนี้ไป run ใน phpmyadmin

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";

CREATE TABLE IF NOT EXISTS `ml_categories` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'รหัส',
  `categorie_name` varchar(100) COLLATE utf8_unicode_ci NOT NULL COMMENT 'ชื่อกลุ่ม',
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=4 ;

--
-- Dumping data for table `ml_categories`
--

INSERT INTO `ml_categories` (`id`, `categorie_name`) VALUES
(1, 'เครื่องใช้ไฟฟ้า'),
(2, 'กีฬา'),
(3, 'อสังหาริมทรัพย์');

-- --------------------------------------------------------

--
-- Table structure for table `ml_products`
--

CREATE TABLE IF NOT EXISTS `ml_products` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `product_name` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `categories_id` int(11) NOT NULL,
  PRIMARY KEY (`id`),
  KEY `categories_id` (`categories_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=16 ;

--
-- Dumping data for table `ml_products`
--

INSERT INTO `ml_products` (`id`, `product_name`, `categories_id`) VALUES
(1, 'โทรทัศน์', 1),
(2, 'โปรเจ็กเตอร์', 1),
(3, 'เครื่องเล่นและบันทึก DVD', 1),
(4, 'เครื่องเสียง', 1),
(5, 'อุปกรณ์ซักผ้า', 1),
(6, 'กอลฟ์', 2),
(7, 'เทนนิส', 2),
(8, 'บาสเก็ตบอล', 2),
(9, 'วิ่ง', 2),
(10, 'เบสบอล & ซอฟท์บอล', 2),
(11, 'แบดมินตัน', 2),
(12, 'บ้าน', 3),
(13, 'ทาวน์เฮ้าส์', 3),
(14, 'คอนโดมีเนี่ยม', 3),
(15, 'ตึกแถว', 3);

--
-- Constraints for dumped tables
--

--
-- Constraints for table `ml_products`
--
ALTER TABLE `ml_products`
  ADD CONSTRAINT `ml_products_ibfk_1` FOREIGN KEY (`categories_id`) REFERENCES `ml_categories` (`id`) ON DELETE CASCADE ON UPDATE CASCADE;

ในฐานข้อมูลนี้มี 2 ตารางคือ ตารางหมวดหมู่(ml_categories) และตารางสินค้า(ml_products)

2. หลักจากที่ Run script ในการสร้างตาราง categorie และ product มาแล้วต่อไปจะเป็นการเขียนไฟล์ show.php กันครับ ดู Code ด้านล่างได้เลยครับ

<?php
/*
 * connection database
 */
$Connect = mysql_connect('localhost', 'root', '') or die('Error connecting to MySQL');
mysql_select_db('sysapp', $Connect) or die('Database sysapp does not exist!');
mysql_query('SET NAMES UTF8');

/*
 * select data
 */
$Query = mysql_query('SELECT * FROM ml_categories') or die('Error query #12');
?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>itOffside.com</title>
        <script src="jquery-1.11.1.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#categories').change(function() {
                    $.ajax({
                        type: 'POST',
                        data: {categories: $(this).val()},
                        url: 'select_product.php',
                        success: function(data) {
                            $('#products').html(data);
                        }
                    });
                    return false;
                });
            });
        </script>
    </head>
    <body style="width: 100%;padding-top: 50px;">
        <form name="multilistbox" method="POST">
            <table border="0" width="500" cellpadding="5" style="margin: 0 auto;">
                <tr>
                    <td style="text-align: right; width: 200px;">หมวดหมู่</td>
                    <td>
                        <select name="categories" id="categories">
                            <option value="">เลือกข้อมูลหมวดหมู่</option>
                            <?php
                            while ($Result = mysql_fetch_array($Query)) {
                                ?>
                                <option value="<?php echo $Result['id']; ?>">
                                    <?php echo $Result['categorie_name']; ?>
                                </option>
                                <?php
                            }
                            ?>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td style="text-align: right;">สินค้า</td>
                    <td>
                        <select name="products" id="products"></select>
                    </td>
                </tr>
            </table>
        </form>     
    </body>
</html>

เพิ่มเติมไฟล์ jquery สามารถ ดาวน์โหลดได้ที่นี้ jquery

จาก code ด้านบนผมอธิบายไล่ตามบรรทัดดังนี้ครับ
บรรทัดที่ 5-7 : เป็นใช้ฟังก์ชั่นการเชื่อมต่อฐานข้อมูล MySQL พร้อมกำหนดอักขระ UTF8
บรรทัดที่ 12 : ฟังก์ชั่น Query? SELECT ข้อมูลหมวดหมู่สินค้าหรือตาราง categories นั้นเอง
บรรทัดที่ 19 : include ไฟล์ jquery เวอร์ชั่น 1.11.1
บรรทัดที่ 20-34 : เป็นการเขียน jquery เพื่อร้องขอ(Request)ข้อมูล SERVER ผ่าน AJAX โดยถ้ามีการเกิดเหตุการณ์(event) ของการเปลี่ยนแปลง Listbox หรือ Dropdown ของหมวดหมู่จะทำให้มีการส่งข้อมูล categorie_id แบบ POST? ไปยังไฟล์ select_product.php ซึ่งไฟล์ select_product.php นี้เองที่ทำหน้าในการ Select ข้อมูลสินค้า (products) ตามหมวดหมู่ แล้วตอบกลับ(Response)โดยการส่งข้อมูลที่ได้จากการ Select กลับไปยังไฟล์ show.php
บรรทัดที่ 37-63 : เป็นฟอร์ม Listbox หรือ Dropdown
สรุป ส่วนสำคัญของไฟล์นี้คือการ include ไฟล์ jquery การใช้งาน jquery ajax ให้ติดต่อไปยัง SERVER และ การอ้างอิง Element ID ให้เชื่อมโยงกัน

 

3. เขียนไฟล์ select_product.php ในการ Select ข้อมูลสินค้าตามการเลือก Listbox หรือ Dropdown

<?php

/*
 * connection database
 */
$Connect = mysql_connect('localhost', 'root', '') or die('Error connecting to MySQL');
mysql_select_db('sysapp', $Connect) or die('Database sysapp does not exist!');
mysql_query('SET NAMES UTF8');
/*
 * check POST
 */
$categorie_id = isset($_POST['categories']) ? $_POST['categories'] : "";
$Query = mysql_query("SELECT * FROM ml_products WHERE categories_id='{$categorie_id}'");
$Rows = mysql_num_rows($Query);
if ($Rows > 0) {
    while ($Result = mysql_fetch_array($Query)) {
        echo "<option value=\"" . $Result['id'] . "\">" . $Result['product_name'] . "</option>";
    }
}else{
    echo "<option value=\"\">ไม่มีสินค้าในหมวดหมู่ที่เลือก</option>";
}

อธิบาย Code ของไฟล์ select_product.php
บรรทัดที่ 12 : เช็คค่าตัวแปร $_POST[‘categories’] ซึ่งตัวแปรที่ส่งมาจากไฟล์ show.php นั้นเองโดยตัวแปรเป็น TYPE POST โดยเก็บค่าไว้ในตัวแปร $categorie_id
สรุป มีการ Select ข้อมูลจากตาราง ml_product โดยใช้เงื้อนไข categories_id=’$categorie_id‘ หมายถึงดึงเฉพาะข้อมูลตามหมวดหมู่ที่เลือกในหน้า show.php นั้นเอง

ผลลัพธ์ที่ได้

กำหนดรายการ Listbox ที่ 2 จากเงื่อนไขในการเลือก Listbox ที่ 1 ด้วย Ajax กับ jQuery
รูปภาพก่อนเปลี่ยนหมวดหมู่
รูปภาพหลังเปลี่ยนหมวดหมู่
รูปภาพหลังเปลี่ยนหมวดหมู่

 

สำหรับบทความนี้ก็มีเพียงเท่านี้ครับหากใครมีข้อสงสัยหรือปัญหา สอบถามได้ที่ comment ด้านล่างบทความได้เลยครับ

The post กำหนดรายการ Listbox ที่ 2 จากเงื่อนไขในการเลือก Listbox ที่ 1 ด้วย Ajax กับ jQuery first appeared on itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี.

]]> https://www.itoffside.com/select-multi-listbox-ajax-jquery-php/feed/ 25