ฟีเจอร์เด่นของระบบบัญชี PHP

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

ระบบบัญชี PHP ที่รองรับการพิมพ์ใบกำกับภาษี & ใบสั่งซื้อ

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

ดาวน์โหลดฟรี – ติดตั้งง่าย พร้อมใช้งาน!

หากคุณกำลังมองหา ระบบบัญชี PHP ที่สามารถ พิมพ์ใบกำกับภาษี PHP และ พิมพ์ใบสั่งซื้อ PHP ได้ครบถ้วน นี่คือโอกาสที่คุณไม่ควรพลาด! คลิกที่ลิงก์ด้านล่างเพื่อดาวน์โหลดระบบและเริ่มใช้งานได้ทันที

ดาวน์โหลดระบบบัญชีฟรีที่นี่

⚙️ วิธีติดตั้งระบบบัญชี PHP พร้อมพิมพ์ใบกำกับภาษี & ใบสั่งซื้อ

การติดตั้ง ระบบบัญชี PHP นี้ง่ายและรวดเร็ว เพียงทำตามขั้นตอนต่อไปนี้ คุณจะสามารถเริ่มใช้งานระบบได้ทันที!

ขั้นตอนการติดตั้ง

1. ดาวน์โหลดไฟล์ระบบ: คลิกที่ลิงก์ด้านล่างเพื่อดาวน์โหลดซอร์สโค้ดระบบบัญชี ดาวน์โหลดระบบบัญชีฟรีที่นี่
2. แตกไฟล์ ZIP: หลังจากดาวน์โหลดเสร็จ ให้แตกไฟล์ ZIP และนำไปวางไว้ในเซิร์ฟเวอร์ของคุณ ตัวอย่างไว้ใน c:/xampp/htdocs/eaccount-lite
3. ตั้งค่าฐานข้อมูล MySQL:
   • สร้างฐานข้อมูลใหม่ใน MySQL (แนะนำใช้ phpMyAdmin) ชื่อฐานข้อมูล eaccount_lite
   • Import sql นำเข้าตารางฐานข้อมูลจากไฟล์ eaccount_lite.sql
   • ตั้งค่าการเชื่อมต่อฐานข้อมูลและตั้ง URL ในไฟล์ config.php
4. ตั้งค่าเซิร์ฟเวอร์: ตรวจสอบให้แน่ใจว่าเซิร์ฟเวอร์รองรับ PHP version 8 ขึ้นไป และ MySQL เวอร์ชันล่าสุด
5. ทดสอบการใช้งาน: เปิดเบราว์เซอร์แล้วไปที่ URL ของเซิร์ฟเวอร์เพื่อล็อกอินเข้าสู่ระบบ

คำแนะนำเพิ่มเติม

• ควรตั้งค่าสิทธิ์ไฟล์และโฟลเดอร์ให้เหมาะสม (CHMOD 755 หรือ 777) เพื่อให้สามารถอัปโหลดไฟล์เอกสารได้
• ตรวจสอบว่ามีการเปิดใช้งานโมดูล mysqli ในเซิร์ฟเวอร์ของคุณ
• หากพบข้อผิดพลาดในการติดตั้ง สามารถติดต่อทีมพัฒนาเพื่อรับคำแนะนำเพิ่มเติม

ดาวน์โหลดและเริ่มใช้งานเลย!

ระบบนี้รองรับทุกฟังก์ชันสำคัญ เช่น พิมพ์ใบกำกับภาษี PHP, พิมพ์ใบสั่งซื้อ PHP, ระบบขาย/ซื้อ PHP และสามารถปรับแต่งเพิ่มเติมได้ตามความต้องการ รีบดาวน์โหลดและเริ่มใช้งานเพื่อเพิ่มประสิทธิภาพในการจัดการบัญชีของคุณ

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

The post แจกฟรี! ระบบบัญชี PHP พร้อมพิมพ์ใบกำกับภาษี & ใบสั่งซื้อ รองรับทุกธุรกิจ first appeared on itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี.

ระบบเอกสาร PHP & MySQL คืออะไร?

ระบบเอกสารออนไลน์ (E-Document System) เป็นระบบโปรแกรมที่ช่วยให้คุณสามารถ จัดเก็บไฟล์เอกสาร ค้นหา การเข้าถึงได้อย่างสะดวก เหมาะสำหรับองค์กร บริษัท หรือบุคคลทั่วไปที่ต้องการเครื่องมือช่วยจัดการเอกสาร

✨ คุณสมบัติเด่นของระบบ

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

ดาวน์โหลดและติดตั้งระบบเอกสาร

โครงการนี้ถูกเผยแพร่ผ่าน GitHub สามารถดาวน์โหลดได้ที่ https://github.com/ipball/edocument

วิธีติดตั้ง

1️⃣ ดาวน์โหลดโค้ดจาก GitHub
2️⃣ อัปโหลดลงเซิร์ฟเวอร์ที่รองรับ PHP และ MySQL หรือติดตั้งบนเครื่องโดยใช้ xampp จำลองเซิฟเวอร์แทนได้
3️⃣ สร้างฐานข้อมูลชื่อ document และนำเข้าตารางจากไฟล์ SQL ที่แนบมาชื่อไฟล์ _database.sql ในกรณีผมใช้ phpmyadmin ในการจัดการฐานข้อมูล
4️⃣ ตั้งค่าการเชื่อมต่อฐานข้อมูลใน config.php
5️⃣ เริ่มใช้งานระบบเอกสารได้เลย!

เข้าจัดการเอกสาร /admin
ผู้ใช้: todo
รหัสผ่าน: passpass

ประโยชน์ของระบบเอกสาร

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

หากคุณกำลังมองหาวิธี บริหารเอกสารให้มีประสิทธิภาพ ระบบนี้คือคำตอบ! รองรับการใช้งานหลากหลาย และสามารถปรับแต่งเพิ่มเติมได้ตามความต้องการ

และโปรแกรมแจกฟรี เขียนโดย PHP&Mysql ทำให้ไม่ต้องกังวลเรื่องเซิฟเวอร์ราคาแพง เพราะเป็นภาษาไม่เสียค่าลิขสิทธิ์

The post แจกระบบเอกสาร PHP & MySQL | ดาวน์โหลดฟรี พร้อมวิธีติดตั้ง first appeared on itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี.

โดยวันนี้เราจะใช้ภาษา PHP และ javascript(jQuery) ในการทำงานนั้นเอง โดยใช้เทคนิค AJAX ตอนดึงข้อมูลมาใส่ใน dropdown 2, 3 เดี่ยวมาดูกันว่าเขียนอย่างไรบ้างในบทความนี้

วิธีการเขียน Multiple Dropdown

1. ทำการ import database ของฐานข้อมูล จังหวัด, อำเภอ, ตำบล ลงในฐานข้อมูลก่อน ดาวน์โหลดได้ที่
   https://github.com/ipball/multiple_dropdown2025/blob/main/multiple_dropdown.sql
2. ทำการสร้างไฟล์ conect.php เพื่อเชื่อมต่อกับฐานข้อมูล

3. สร้างไฟล์ index.php เพื่อทำหน้าจอ dropdown จังหวัด, อำเภอ, ตำบล และ ช่อง input text รหัสไปรณีย์

อธิบายโค๊ด

บรรทัดที่ 2 include ไฟล์เพื่อเชื่อมต่อฐานข้อมูล
บรรทัดที่ 4-10 ดึงข้อมูลจากตารางจังหวัด แล้ววนข้อมูลเก็บใส่ตัวแปร $provinces เพื่อที่จะนำไปวนลูปใน dropdown
บรรทัดที่ 28-35 เป็น dropdown ของจังหวัด นำตัวแปรจาก บรรทัดข้างบนมา วนแสดงผล จังหวัด
บรรทัดที่ 37-52 เป็นฟอร์มของ อำเภอ, ตำบล, รหัสไปรษณีย์ ยังไม่มีค่าใดๆ เพราะต้องรอให้เลือก dropdown จังหวัดก่อน ในส่วนนี้
บรรทัดที่ 56-57 include ไฟล์สำคัญคือ jquery มาใส่งาน, และไฟล์ script.js เป็นไฟล์ที่เราจะเขียนขึ้นเพื่อหาจังหวะตอนเลือกเปลี่ยน ค่า dropdown

4. สร้างไฟล์ script.js เพื่อจับเหตุการ์ณและดึงข้อมูลแสดงผล อำเภอ, ตำบล, รหัสไปรษณีย์

อธิบายโค๊ด

บรรทัดที่ 2-24 เมื่อมีการเปลี่ยนแปลง dropdown จังหวัด จะทำการ reset ค่าของ อำเภอ, ตำบล, รหัสไปรษณีย์ แล้วทำการดึงข้อมูลอำเภอ ตามจังหวัดที่เลือกใน dropdown นั้น ด้วย jquery AJAX จากไฟล์ get_districts.php (เราจะสร้างทีหลัง) ซึ่งพอเราดึงค่าข้อมูลจากไฟล์ได้แล้วจะได้ข้อมูล รุปแบบ JSON ให้เราทำการวนข้อมูลแล้ว ลูปอำเภอ นำมาใส่ใน element dropdown ของอำเภอ
บรรทัดที่ 26-47 เมื่อเปลี่ยนแปลง dropdown อำเภอ ทำการ reset ค่า ตำบล, รหัสไปรษณีย์ แล้วดึงข้อมูลตำบล ตามอำเภอที่เลือก ด้วย jquery AJAX จากไฟล์ get_subdistricts.php แล้วเอาข้อมูลที่ได้รับเป็น JSON วนลูปใส่ใน dropdown ตำบล
บรรทัดที่ 49-52 เมื่อมีการเปลี่ยนแปลง ตำบล เราจะเอาข้อมูลรหัสไปรษณีย์ที่อยู่ data-postcode มาใส่ในช่องรหัสไปรษณีย์

5. สร้างไฟล์ get_districts.php เพื่อดึงข้อมูลอำเภอตามจังหวัดที่เลือกแล้วส่งข้อมูลออกกลับไปเป็น JSON

6. สร้างไฟล์ get_subdistricts.php เพื่อดึงข้อมูลตำบลตามอำเภอที่เลือกแล้วส่งข้อมูลออกกลับไปเป็น JSON

เพียงเท่านี้เราก็ได้ Multiple Dropdown List แบบหลายชั้นแล้ว เดี่ยวเราลองมาดูผลลัพท์กัน

สำหรับ Source code Multiple Dropdown List โดยใช้ PHP, MySQL, Javascript(Jquery) สามารถดาวน์โหลดได้ที่ลิงค์ด้านล่าง
ดาวน์โหลด Source Code กดตรงนี้

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

1. สมัครสมาชิก
2. เข้าสู่ระบบ
3. ตรวจสอบการเข้าสู่ระบบว่า ได้เข้าสู่ระบบหรือไม่

PHP Workshop ทำระบบ Register + Login สอนละเอียด เต็มระบบ

พร้อม Sourcecode นำไปดูเป็นตัวอย่าง

วิธีการดาวน์โหลด Source code

1. กดติดตาม ช่อง Youtube ช่องนี้ Youtube Bahtsoft
2. ทักไปที่เพจ https://www.facebook.com/itoffside แจ้งว่า ขอ source code ระบบ Register+Login พร้อม แคปภาพว่า ได้กดติดตามช่อง Youtube แล้ว

สิ่งที่ได้รับจากวิดีโอนี้

1. การเขียน PHP เชื่อมต่อกับ MySQLi
2. การเขียน PHP workshop แบบ สมาชิกสามารถ Login, สามารถ Register ได้
3. การเขียน PHP กับ Session ในการจัดการตรวจสอบการเข้าสู่ระบบ

สารบัญการสอน

1. สร้างโปรเจ็ค
2. สร้างฐานข้อมูล
3. สร้างไฟล์ index.php (โปรไฟล์) ตรวจสอบสิทธิ์การ Login
4. สร้างหน้า Login
5. สร้างหน้าสมัครสมาชิก (register)
6. บันทึกข้อมูลการสมัครสมาชิกลง Database
7. ทำระบบ Login ตรวจสอบ username/password
8. ทำหน้าแรก แสดงข้อมูลโปรไฟล์

วิดีโอสอน Full Course ฟรี

The post PHP Workshop Register+Login ระบบสมัครสมาชิก+Login [Full Course] สอนละเอียด ฟรี! first appeared on itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี.

วิดีโอนี้พาสอนการเขียนโปรแกรมเต็มรูปแบบมีระบบ

1. จัดการสินค้า เพิ่ม ลบ แก้ไข แสดงรายการสินค้า
2. จัดการตะกร้าสินค้า เพิ่มสินค้าเข้าในตะกร้า, อัพเดทจำนวนสินค้าในตะกร้า, ลบสินค้าออกจากตะกร้า
3. ระบบสั่งซื้อหลังจากหยิบสินค้าใส่ตะกร้าแล้ว

สิ่งที่ได้รับจากวิดีโอนี้

1. การเขียน PHP เชื่อมต่อกับ MySQLi
2. การเขียน PHP workshop แบบ CRUD [Create, Read, Update Delete]
3. การเขียน PHP กับ Session ในการจัดการตะกร้าสินค้า

สารบัญการสอน

1. Demo ระบบ
2. สร้างฐานข้อมูล(Database)
3. สร้างโปรเจ็ค Shoppingcart
4. สร้างไฟล์ config.php
5. สร้างหน้า index.php รายการ, เพิ่ม, แก้ไข, ลบ สินค้า
6. เพิ่มสินค้าเข้าฐานข้อมูล
7. แสดงรายการสินค้า
8. แก้ไขสินค้า
9. ลบสินค้า
10. สินค้าสำหรับหยิบใส่ตะกร้า
11. เพิ่มสินค้าลงในตะกร้า
12. แสดงจำนวนสินค้าตะกร้า
13. หน้ารายการตะกร้าสินค้า
14. ลบสินค้าออกจากตะกร้า
15. อัพเดทจำนวนสินค้าในตะกร้า
16. หน้าสั่งซื้อสินค้า Checkout
17. fix error session[cart]

วิดีโอสอน Full Course ฟรี

หากต้องการ Sourcode สามารถซื้อเพื่อสนับสนุนผู้สอนได้ที่

500บาท โปรลดราคาเหลือเพียง 300 บาท

inbox เพจ https://www.facebook.com/itoffside
หรือ ติดต่อที่ไลน์ไอดี @eke8377p (มี @ ข้างหน้าด้วย)

LINE ID:

The post PHP Workshop Shoppingcart จัดการสินค้า, ตะกร้าสินค้า, สั่งซื้อสินค้า [Full Course] สอนละเอียด ฟรี! first appeared on itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี.

พาใช้งาน Laravel ผ่าน Workshop Blog/Login เพื่อนๆจะได้รู้จักกับ

• การสร้าง Controller, Model, View – การกำหนด Route ของ Web (GET, POST, PUT, DELETE)
• การทำ Migrate ของ database
• การทำ Middleware และการใช้งาน middleware ผ่าน Route
• การทำ Authen login แบบ Manual
• การทำ CRUD ของ Blog
• การทำ Paginate แบ่งหน้า
• การทำ Validate form
• การทำ Relation ของ ORM (One to Many)

วิดีโอประกอบการสอน workshop

ดาวน์โหลด Sourcecode https://github.com/ipball/Laravel-Blog

The post Laravel WorkShop ระบบ Blog และ Login first appeared on itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี.

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

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

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 | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี.

ดังนั้นในบทความนี้ ผมก็เลยมาสอนการใช้ 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

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

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

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

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

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

จากนี้จะเป็นการเรียกใช้งาน 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>

ภาพตัวอย่าง

อธิบายโค้ดคำสั่ง
โดยสังเกตุ นะครับ ว่าโค้ด 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

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

จากรูปภาพด้านบน บรรทัดที่ 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;
	}
}

อธิบายโค้ด

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

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

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

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

สำหรับ source code DataTables Plugin สามารถดาวน์โหลดได้ฟรี ครับ

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

ทดสอบการใช้งาน (DEMO) คลิกที่นี้เพื่อทดสอบ

เรามาเริ่มกันเลยดีกว่า วิธีการติดตั้งขั้นตอนแรกให้เราไปโหลด Sourcecode DataTables จากลิงค์ดาวน์โหลดจากเว็บหลักที่นี้ https://datatables.net/download/packages

หลักจากนั้นให้เราแตกไฟล์ Sourcecode ที่ได้โหลดมา แล้ว Copy โฟล์เดอร์ media มาทั้งหมดมาวางไว้ในภายในโปรเจคที่เราจะเรียกใช้งานนะครับ

ต่อจากนั้นโหลดไฟล์ฐานข้อมูลที่ชื่อ datatables.sql เพื่อใช้สำหรับเป็นข้อมูลทดสอบสำหรับบทความนี้นะครับ คลิกเพื่อดาวน์โหลด

ดาวน์โหลดไฟล์ ssp.class.php คลิกเพื่อดาวน์โหลด ไฟล์นี้คือชุดคำสั่งเรียกข้อมูลจาก mysql

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

2. คลิกเลือกเมนู import ตรงเมนูบน

3. คลิกเลือกปุ่ม “เลือกไฟล์”แล้วเลือกไฟล์ฐานข้อมูลที่เราดาวน์โหลดมาเมื่อกี้ครับ (datatables.sql)

หลักจากที่เรา import ข้อมูลเสร็จแล้ว ขั้นตอนต่อไปเป็นการเรียกใช้งานนะครับ
การเรียกใช้งานจำเป็นต้องมีไฟล์ jquery นะครับ ถ้าหากไม่มี datatables จะไม่ทำงาน!
1. ให้ include ไฟล์ js — jquery.dataTables.js และไฟล์ css — jquery.dataTables.min.css ไว้บน <header>

<link rel="stylesheet" type="text/css" href="media/css/jquery.dataTables.min.css">
<script src="media/js/jquery.js" type="text/javascript"></script>
<script src="media/js/jquery.dataTables.js" type="text/javascript"></script>

2. ในส่วนของเนื้อหาที่จะแสดงตารางข้อมูล ให้นำโค๊ดตัวอย่างด้านล่างนี้ใส่ไปครับ

<table id="example" class="display" cellspacing="0" width="100%">
      <thead>
        <tr>
          <th>First name</th>
          <th>Last name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Start date</th>
          <th>Salary</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <th>First name</th>
          <th>Last name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Start date</th>
          <th>Salary</th>
        </tr>
      </tfoot>
    </table>

3. เขียนคำสั่ง javascript ให้เรียกใช้งาน

<script type="text/javascript">
  $(document).ready(function() {
    $('#example').DataTable( {
      "processing": true,
      "serverSide": true,
      "ajax": "server_processing.php"
    } );
  } );
  </script>

คำอธิบายของโค๊ดนี้คือ ดึงข้อมูลแบบ server-side โดยให้ไฟล์ server_processing.php ประมวลผลข้อมูลแล้วนำกลับมาใช้ที่หน้าตารางนี้ โดยโค๊ดของไฟล์ server_processing.php จะเรียกข้อมูลมาเฉพาะที่จะแสดงผลเท่านั้น เช่นดึงข้อมูลหน้า 5 และดึงมาเพียง 10 แถวเท่านั้น
ให้เราสร้างไฟล์ server_processing.php และนำโค๊ดด้านล่างนี้วาง แล้วกด Save ครับ

<?php
//ชื่อตาราง
$table = 'datatables_demo';
//ชื่อคีย์หลัก
$primaryKey = 'id';
//ข้อมูลอะเรที่ส่งป datables
$columns = array(
  array( 'db' => 'first_name', 'dt' => 0 ),
  array( 'db' => 'last_name',  'dt' => 1 ),
  array( 'db' => 'position',   'dt' => 2 ),
  array( 'db' => 'office',     'dt' => 3 ),
  array(
    'db' => 'start_date',
    'dt' => 4,
    'formatter' => function( $d, $row ) {
      return date( 'jS M y', strtotime($d));
    }
  ),
  array(
    'db' => 'salary',
    'dt' => 5,
    'formatter' => function( $d, $row ) {
      return '$'.number_format($d);
    }
    )
  );

  //เชื่อต่อฐานข้อมูล
  $sql_details = array(
    'user' => 'root',
    'pass' => '',
    'db'   => 'datatables',
    'host' => 'localhost'
  );
  // เรียกใช้ไฟล์ spp.class.php
  require( 'ssp.class.php' );

//ส่งข้อมูลกลับไปเป็น JSON โดยข้อมูลถูกดึงมาจากการเรียกใช้ class ssp
  echo json_encode(
      SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns )
  );

คำอธิบาย
เป็นไฟล์ที่ใช้ในการดึงข้อมูลจากฐานข้อมูลมาแล้วมาจัดรูปแบบข้อมูลให้อยู่ในแบบที่ต้องการ โดยจัดเป็นแบบ Array ส่วนไฟล์ที่เรียกใช้ฐานข้อมูลคือไฟล์ ssp.class.php
ในส่วนของรายละเอียดการเชื่อมต่อฐานข้อมูลตรงนี้ เราต้องใส่ให้ถูกต้องกับข้อมูล Server ของเราด้วยครับ

ลองดูผลลัพธ์ด้านล่าง

ต่อ… สำหรับใครต้องการผลรวมแต่ละหน้า สามารถทำได้โดยเขียน script javascript เพิ่มเติมใน

$('#example').DataTable( {

ตามโค๊ดด้านล่างนี้นะครับ

"footerCallback": function ( row, data, start, end, display ) {
            var api = this.api(), data;

            // Remove the formatting to get integer data for summation
            var intVal = function ( i ) {
                return typeof i === 'string' ?
                    i.replace(/[\$,]/g, '')*1 :
                    typeof i === 'number' ?
                        i : 0;
            };

            // Total over all pages
            total = api
                .column( 5 )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );

            // Total over this page
            pageTotal = api
                .column( 5, { page: 'current'} )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );

            // Update footer
            $( api.column( 5 ).footer() ).html(
                '$'+pageTotal +' total'
            );
        }

จบแล้วสำหรับบทความนี้
สำหรับ Source code ตัวอย่าง แบบเต็มสามารถดาวน์โหลดได้ที่ https://github.com/ipball/ex_datatables/archive/master.zip

หรือ Clone Git https://github.com/ipball/ex_datatables

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

The post การติดตั้งใช้งาน Datatables กับการดึงข้อมูลแบบ AJAX Server-side [PHP+MySQL] first appeared on itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี.

Demo : Pagination with php and mysqli

เริ่มต้นให้คุณสร้างฐานข้อมูลชื่อ pagination แล้ว Run query เพื่อเพิ่มตารางในฐานข้อมูล MySQL กันก่อนครับโดย copy code  sql ด้านล่างไปวางใน phpmyadmin ครับ

-- phpMyAdmin SQL Dump
-- version 4.3.11
-- http://www.phpmyadmin.net
--
-- Host: 127.0.0.1
-- Generation Time: Jul 23, 2015 at 04:46 PM
-- Server version: 5.6.24
-- PHP Version: 5.6.8

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


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- Database: `pagination`
--

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

--
-- Table structure for table `products`
--

CREATE TABLE IF NOT EXISTS `products` (
  `id` int(11) NOT NULL,
  `name` varchar(100) COLLATE utf8_unicode_ci NOT NULL,
  `price` decimal(8,2) NOT NULL,
  `status` tinyint(1) NOT NULL DEFAULT '1'
) ENGINE=InnoDB AUTO_INCREMENT=24 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

--
-- Dumping data for table `products`
--

INSERT INTO `products` (`id`, `name`, `price`, `status`) VALUES
(1, 'iPhone 6 Plus', '25000.00', 1),
(2, 'iPhone 6', '22000.00', 1),
(3, 'True SMART 4.0', '5000.00', 1),
(4, 'Samsung Galaxy ALPHA', '12000.00', 1),
(5, 'Samsung Galaxy Note', '23000.00', 1),
(6, 'iPhone 5S', '20000.00', 1),
(7, 'Samsung Galaxy S5', '20000.00', 1),
(8, 'Galaxy K Zoom 3G', '21000.00', 1),
(9, 'OPPO Joy Plus', '4500.00', 1),
(10, 'Galaxy S DUOS 2', '3900.00', 1),
(11, 'OPPO Joy Plus', '3490.00', 1),
(12, 'Huawei Alek 4G', '5460.00', 1),
(13, 'Huawei P8 Lite', '7900.00', 1),
(14, 'OPPO N1 Mini', '9900.00', 1),
(15, 'Samsung Galaxy E7', '11500.00', 1),
(16, 'LG G4', '22900.00', 1),
(17, 'i-Mobile IQ X Lucus', '5900.00', 1),
(18, 'i-mobile I-Style 8.3', '4990.00', 1),
(19, 'I-Mobile I-Style 210', '2490.00', 1),
(20, 'i-mobile IQ 5.7', '4490.00', 1),
(21, 'Galaxy Win 4.7', '7900.00', 1),
(22, 'Galaxy Note 3 LTE', '19900.00', 1),
(23, 'Nokia Lumia 630', '4990.00', 1);

--
-- Indexes for dumped tables
--

--
-- Indexes for table `products`
--
ALTER TABLE `products`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `products`
--
ALTER TABLE `products`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=24;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

ดูรูปภาพประกอบด้านล่าง

ทำการสร้างไฟล์ index.php เป็นไฟล์ในการแสดงผล โดยในตัวอย่างผมต้องการแบ่งหน้า หน้าละ 5 แถว (record) สมมุติว่ามี จำนวนข้อมูล 57 แถว ดังนั้นจะมีทั้งหมด 12 หน้าวิธีคำนวณการแบ่งหน้าในตัวอย่างนี้ผมใช้หลักการดังต่อไปนี้
– กรณีมีหน้าทั้งหมด 57 แถวและเราจะทำการแบ่งหน้า หน้าละ 5 แถว ให้นำ จำนวนแบ่งหน้าไปหาร จำนวนทั้งหมดโดยถ้ามีเศษให้ปัดขึ้น ได้เป็น 57/5 = 11.4 ปัดขึ้นเป็น 12
เมื่อเราสร้างไฟล์เสร็จแล้วให้ copy code ด้านล่างไปวางไว้ในไฟล์ index.php

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>itOffside.com Pagination</title>
 <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
 <link rel="stylesheet" href="bootstrap/css/bootstrap-theme.min.css">

 </head>
 <body style="margin-top: 10px;">
 <?php
 $con = mysqli_connect('localhost', 'root', '', 'pagination');
 $perpage = 5;
 if (isset($_GET['page'])) {
 $page = $_GET['page'];
 } else {
 $page = 1;
 }

 $start = ($page - 1) * $perpage;

 $sql = "select * from products limit {$start} , {$perpage} ";
 $query = mysqli_query($con, $sql);
 ?>
 <div class="container">
 <div class="row">
 <div class="col-lg-12">
 <table class="table table-bordered table-hover">
 <thead>
 <tr>
 <th>#</th>
 <th>Name</th>
 <th>Price</th>
 </tr> 
 </thead>
 <tbody>
 <?php while ($result = mysqli_fetch_assoc($query)) { ?>
 <tr>
 <td><?php echo $result['id']; ?></td>
 <td><?php echo $result['name']; ?></td>
 <td><?php echo $result['price']; ?></td>
 </tr>
 <?php } ?>
 </tbody>
 </table>
 <?php
 $sql2 = "select * from products ";
 $query2 = mysqli_query($con, $sql2);
 $total_record = mysqli_num_rows($query2);
 $total_page = ceil($total_record / $perpage);
 ?>

 <nav>
 <ul class="pagination">
 <li>
 <a href="index.php?page=1" aria-label="Previous">
 <span aria-hidden="true">&laquo;</span>
 </a>
 </li>
 <?php for($i=1;$i<=$total_page;$i++){ ?>
 <li><a href="index.php?page=<?php echo $i; ?>"><?php echo $i; ?></a></li>
 <?php } ?>
 <li>
 <a href="index.php?page=<?php echo $total_page;?>" aria-label="Next">
 <span aria-hidden="true">&raquo;</span>
 </a>
 </li>
 </ul>
 </nav>
 </div>
 </div>
 </div> <!-- /container -->
 <script src="bootstrap/js/bootstrap.min.js"></script>
 </body>
</html>

เริ่มต้นการอธิบาย code

การอธิบายcode จะอ้างอิงจากรูปภาพด้านบนครับ
บรรทัดที่ 12 (ไฮต์ไลท์สีเหลือง) – เชื่อมต่อฐานข้อมูล pagination
บรรทัดที่ 13:18 (กรอบสีแดง หมายเลข 1)  – กำหนดตัวแปร จำนวนแถวข้อมูลต่อหน้าคือ 5 และเช็คว่าหากมีค่าตัวแปร GET[‘page’] ให้เท่ากับตัวแปร GET ไม่มีให้เท่ากับ 1 โดยค่านี้เป็นค่าตัวแปรที่กำหนดว่า เราอยู่หน้าที่เท่าไหร
บรรทัดที่ 20 (กรอบสีแดง หมายเลข 2) – ค่าตัวแปร $start เป็นการกำหนดจุดเริ่มต้นในการค้นหา(select) ข้อมูล โดยเริ่มต้นตำแหน่งแถวที่ 0 เช่น มีทั้งหมด 5 แถว จะนับได้ดังนี้ 0,1,2,3,4 เป็นต้น ดังนั้นตัวแปร start จะคำนวณจาก หน้าที่เราอยู่(หน้าที่เท่าไหร) – 1 * จำนวนแถวข้อมูลต่อหน้า ผมสมมุติว่า ผมอยู่หน้า ที่ 3 แถวข้อมูล แบ่งหน้าละ 5 ดังนั้น จะคำนวณได้ดังนี้ (3-1) * 5 = 10 ฉะนั้นแล้ว ตัวแปร start จะเริ่มที่ 10 ครับ
บรรทัดที่ 22:24 (กรอบสีแดง หมายเลข 3) – เป็นคำสั่งในการค้นหาข้อมูลเฉพาะหน้าที่เราคลิกนั้นเอง สังเกตุได้จากคำสั่ง litmit $start, $perpage หมายถึง เลือกข้อมูลโดยเริ่มที่ $start ถึง $perpage โดยในตัวอย่างนี้อยู่หน้า 3 ดังนั้นจะมีข้อมูลตำแหน่งแถวที่ 10,11,12,13,14

การอธิบายcode จะอ้างอิงจากรูปภาพด้านบนครับ
บรรทัดที่ 37:43 ในกรอบสีแดงหมายเลข 1 – เป็นการนำข้อมูลมาแสดงผลครับ โดยใช้ query จากคำสั่ง select * from products limit {$start} , {$perpage}

การอธิบายcode จะอ้างอิงจากรูปภาพด้านบนครับ
บรรทัดที่ 46:51 (กรอบสีแดง หมายเลข 1)  – เป็นการ select ข้อมูลทั้งหมดเพื่อ ให้ตัวแปร $total_page เก็บค่าจำนวนหน้า โดยใช้หลักการ หารปัดเศษโดย เอาจำนวนแถวข้อมูลทั้งหมดหารจำนวนหน้า จากตัวอย่างบทความนี้ จะได้เป็น 23/5 ปัดหารเศษจะได้จำนวนหน้าทั้งหมดคือ 5 หน้าครับ
บรรทัดที่ 55:59 (กรอบสีแดง หมายเลข 2)  – เป็นปุ่มกด ย้อนกลับไปหน้าแรก โดยใส่ลิงค์ page=1 (ให้ค่าตัวแปร $_GET[‘page’] เก็บหมายเลขหน้าที่เราคลิกปัจจุบัน
บรรทัดที่ 60:62 (กรอบสีแดง หมายเลข 3)  – ใช้ code for ในการทำปุ่มซ้ำๆ โดย for ตาม $total_page หรือจำนวนหน้าที่เรามีอยู่(ในตัวอย่างมี 5 หน้า) ดังนั้นจะทำการสร้างปุ่มทั้งหมด 5 ปุ่มครับ
บรรทัดที่ 63:67 (กรอบสีแดง หมายเลข 4)  – เป็นปุ่มกด หน้าสุดท้าย โดยใส่ลิงค์ page=$total_page เหมือนปุ่ม กดย้อนกลับไปหน้าแรก ครับ

หลังจากเราทำเสร็จแล้วดูผลทดสอบครับ

Demo : Pagination with php and mysqli

สำหรับบทความแบ่งหน้าหรือ pagination ผมคิดว่าน่าจะมีการใช้งานบ่อยๆ ดังนั้นอาจจะมีประโยชน์กับเพื่อนๆโปรแกรมเมอร์ หากใครมีไอเดียในการพัฒนาจากที่ผมเขียนสามารถเสนอแนะ แนะนำผมได้ผ่าน Comment ด้านล่างได้ครับ

The post PHP MySQL Pagination แบ่งหน้าการแสดงผลด้วย PHP Mysqli กรณีที่มีจำนวนแถวข้อมูลมาก first appeared on itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี.