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

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() เท่านั้น

 

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

Comments

daydevthailand@gmail.com

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

Review overview
NO COMMENTS

Sorry, the comment form is closed at this time.