Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,037

HOME > บทความจากสมาชิก > สร้าง CRUD แบบง่ายๆด้วย jQuery jTable และ Laravel 4

สร้าง CRUD แบบง่ายๆด้วย jQuery jTable และ Laravel 4

สำหรับตอนนี้เราจะมาทำความรู้จัก jQuery jtable โดยทำการสร้างการ crud แบบง่ายๆ โดยใช้ laravel เป็น server สำหรับ วันนี้เราจะมาเรียนรู้วิธีการสร้าง crud คือ การเพิ่มลบแก้ไขข้อมูล โดยที่ฝั่ง Client เราจะใช้ Jqury Jtable และฝั่ง server เราจะใช้ laravel นะครับ

ทำไมต้องใช้ jquery jtable
เพราะว่า jquery jtable มีฟังก์ชันที่เตรียมพร้อมสำหรับ การเพิ่มลบข้อมูล มาให้ครบถ้วนเลยครับ อยากรู้ว่าเจ๋งยังไง ต้องไปเล่นดูที่ http://jtable.org

การสร้างฝั่ง Frontend
เราสามารถสร้างฟังก์ชันขึ้นมารับค่า จาก jtable ได้แบบง่ายๆ เลยครับ จะง่ายยังไง เรามาเริ่มทำกันเลยครับ

1. ไปที่เว็บไซต์ http://jtable.org

2. กดดาวน์โหลดแล้วแตกไว้ที่ folder public ในภาพผมสร้างโฟลเดอร์ jqury ขึ้นมาเก็บไฟล์นะครับ

3. ต่อไปผมจะสร้างไฟล์ชื่อ index.blade.php เก็บไว้ที่โฟลเดอร์ player แล้วเรียกใช้ css,js ตามภาพเลยครับ

4. เลื่อนลงมาแล้วสร้าง div ดังในภาพครับ

5. ในส่วนของ javascript ในส่วน title เป็นชื่อของตารางนะครับ action เป็น url ที่เราจะไปสร้าง route เพื่อรับค่าเพื่อส่งต่อไปยัง controller ครับ

6. ในส่วนของ personId,name,age,recorddate เป็นชื่อของคอลัมน์ ส่วน propertie ด้านในใช้กำหนดค่าของ คอลัมน์

การตั้งค่าชื่อคอลัมน์ต้องเหมือนในภาพนะครับ]

7. การเซตค่าในฝั่ง client ก็เสร็จแล้วครับ ส่วนการเรียกใช้งาน เราใช้ฟังชัน load ตามในภาพเลยคับ

การตั้งค่าฝั่ง server

1. สร้าง route ขึ้นมาตามในภาพเลยครับ

2. เปิด commandline ใช้คำสั่ง

Code (PHP)

 php artisan controller:make PlayerController

3. เปิดไฟล์ playercontroller.php ตรงฟังก์ชัน index

เริ่มโดยคิวรี่ข้อมูล 10 แถวแรกขึ้นมา แล้วทำการแปลงเป็น Array จากนั้นก็ส่งคืนไปเป็น Json โดยจัดโครงสร้างให้ตรงกับ ที่ jtable ต้องการ อย่าลืมไปสร้าง Model นะครับ

หน้าตาของตาราง หลังจากที่สร้างฟังก์ชัน index เสร็จครับ

4. ต่อไปเป็นการสร้างฟังก์ชันที่ใช้ในการเพิ่มข้อมูล

เริ่มแรกสร้างออปเจคของ Player Model ขึ้นมาแล้วก็จับค่าที่รับเข้ามา เข้าใส่ตามคอลัมน์ แล้วก็ save
จากนั้นส่งค่าที่บันทึก คืนไปให้ jtable ทำการอัพเดทฟอร์ม โดยใช้ เมทอด getlastinsertid เพื่อดึงแถวล่าสุดที่เรา
เพิ่มเข้าไป

5. สร้างฟังก์ชันเพื่อทำการแก้ไขข้อมูล

6. สุดท้าย สร้างฟังก์ชันที่ใช้ลบข้อมูล

เท่านี้โครงสร้างพื้นฐานก็เสร็จแล้วครับ

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

ตอนนี้พารามิเตอร์ที่ส่งไปยัง server จะเปลี่ยนไป โดยจะมีเพิ่มเข้ามาดังนี้

jtStartIndex:0 คือ เราจะเริ่มนับตั้งแต่แถวที่เท่าไหร่
jtPageSize:10 คือ หนึ่งหน้าจะให้มีกี่แถว
jtSorting:id ASC คือ เราจะเรียงลำดับข้อมูลอย่างไร

ต่อไปเราเข้าไปเปลี่ยนโค้ดในตัว controller ใหม่ครับ

เริ่มจากเราใช้คลาส `Input` รับพารามิเตอร์สามตัวที่อธิบายไว้ด้าน บนมาแต่ จะพิเศษตรงที่ `jtSorting` มันมีค่าที่เราต้องทำการแบ่งออกก่อนคือ คอลัมน์ที่ใช้จัดลำดับ และลักษณะที่จะให้จัดลำดับ

ไปดูตรงที่การคิวรี่กันเลยครับ ตอนนี้เราทำการเรียกข้อมูลทั้งหมดจากตาราง `Player` โดยการใช้เมทอด `orderBy` แล้วรับพารามิเตอร์ที่เราได้ ตัดแบ่งเข้าไป เมทอด `offset` คือเราจะเริ่มนับตั้งแต่ตำแแหน่งไหน

เมทอด `take` คือเราจะเอาข้อมูลกี่แถว
เมทอด `get` คือ ดึงข้อมูลขึ้นมา
เมทอด `toArray` คือ แปลงคิวรี่ที่เป็นวัตถุให้กลายเป็นอาเรย์

ต่อมาตัวแปร `$count` คือเราจะนับจำนวนแถวข้อมูลทั้งหมดไปแสดง
แล้วก็ใช้เมทอด `Response` ส่งค่าคืนกลับไป

สรุป
Jtable มีความสามารถในการ crud ลดเวลาการสร้าง backend ลงมากเลยครับ นอกจากนี้เรายังสามารถ เพิ่ม ่ๆีjquery ที่ใช้จัดการฟอร์มตัวอื่นๆ อย่าง validation หรือ ะtinymce ลงไปได้อีก

สามารติดตามบทเรียน laravel อื่นได้ที่ http://laraveltut.com


	By :	taqman
	Article :	บทความเป็นการเขียนโดยสมาชิก หากมีปัญหาเรื่องลิขสิทธิ์ กรุณาแจ้งให้ทาง webmaster ทราบด้วยครับ
	Score Rating :
	Create Date :	2014-04-29
	Download :	No files

Sponsored Links

สอน Windows Phone การเขียนโปรแกรม Windows Phone 7 และ 8

สอน Java GUI การเขียนโปรแกรม ภาษา Java GUI

Free Tutorial

	สอน Google Maps Api
	สอน Windows Service
	สอน Entity Framework
	สอน Android
	สอน Java เขียน Java
	Java GUI Swing
	สอน JSP (Web App)
	iOS (iPhone,iPad)
	Windows Phone
	Windows Azure
	Windows Store
	Laravel Framework
	Yii PHP Framework
	สอน jQuery
	สอน jQuery กับ Ajax
	สอน PHP OOP (Vdo)
	Ajax Tutorials
	SQL Tutorials
	สอน SQL (Part 2)
	JavaScript Tutorial
	Javascript Tips
	VBScript Tutorial
	VBScript Validation
	Microsoft Access
	MySQL Tutorials
	-- Stored Procedure
	MariaDB Database
	SQL Server Tutorial
	SQL Server 2005
	SQL Server 2008
	SQL Server 2012
	-- Stored Procedure
	Oracle Database
	-- Stored Procedure
	SVN (Subversion)
	แนวทางการทำ SEO
	ปรับแต่งเว็บให้โหลดเร็ว