AngularjsDeveloper

AngularJS การ Edit ข้อมูลรายการผ่าน Web Service และ MySQL

บทเรียน AngularJS กับตัวอย่างการส่ง Parameter ของข้อมูลด้วย id แล้วทำการ Edit ข้อมูลเพื่อ Update ไปยัง MySQL สำหรับผู้เริ่มต้นแบบง่ายๆ สบายๆ พร้อมตัวอย่าง

 

Screen Shot 2558-07-11 at 12.21.19 AMบทความนี้ต่อเนื่องจาก

อันที่จริงตัวอย่างนี้ไม่ต้องมีก็ได้ครับเพราะน่าตะ Advance ประยุกต์กันได้เอง แต่ไม่เป็นไรครับเรามาทำตัวอย่างกันเล่นๆ ดีกว่า

ก่อนอื่นเราไปสร้าง API แทนครับที่ api/update_data.php

โดยไฟล์ update_data.php เขียนคำสั่งดังนี้

เหมือน API ตอนสมัครสมาชิกครับแค่ต่างกันตรงที่มี WHERE และ id มาเกี่ยวข้อง

โดยเราต้องมีการ GET parameter จาก http เหมือนที่ตัวอย่างก่อนหน้านี้(AngularJS กับการ GET ข้อมูล http เพื่อเปลี่ยนหน้าด้วย $locatio) ได้บอกไว้ครับ

ไปที่หน้า view ที่ index.html ทำการเพิ่ม link ใหม่ไปหน้า edit.html ครับส่งค่าเหมือนหน้า info.html เลยคือมี # ตามด้วย $scope ของ {{user.id}}

จะเป็นแบบนี้

Screen Shot 2558-07-11 at 12.18.56 AM

 

เมื่อเรากด Edit ไปก็จะไปที่หน้า edit.html#1 (อ้าง id) ครับ

Screen Shot 2558-07-11 at 12.21.19 AM

จะเห็นว่าหน้า edit.html นั้นเหมือน register.html เลยครับเพียงแค่ ng-app, ng-controller และ controller/edit.js ที่เปลี่ยนไป

ไฟล์ของ controller/edit.js

จะเห็นว่าผมได้มีการ เกริ่นการใช้งาน $window เพิ่มเข้ามาร่วมกับ $scope และ $location

โดย $window นั้นมีหน้าที่ช่วยในเรื่องของ การ Redirect ก่อนครับในตัวอย่างนี้

แปลว่าเมื่อมีการ อัพเด็ตข้อมูลใน API และ MySQL เสร็จแล้วหน้า edit.html จะ redirect อัตโนมัติทันทีให้กลับไปยังหน้า index.html

มีฟังก์ชันในการกดปุ่มเพื่อยิงไปยัง API คือฟังก์ชัน update_data() นั่นเองครับ

ดังนั้นหน้า edit.html ต้องมีกา Binding ตัว $scope ไปดังนี้

ระวังส่วนของปุ่ม Submit ครับต้องเรียก update_data() เท่านั้น

 

เป็นอันเสร็จแล้วล่ะครับ

Tags

Banyapon Poolsawasd

อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์ ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)

Related Articles

Back to top button
Close
Close

Adblock Detected

เราตรวจพบว่าคุณใช้ Adblock บนบราวเซอร์ของคุณ,กรุณาปิดระบบ Adblock ก่อนเข้าอ่าน Content ของเรานะครับ, ถือว่าช่วยเหลือกัน