Home / Developer  / Angularjs  / AngularJS กับ POST ข้อมูลลง MySQL ผ่าน Web Service

AngularJS กับ POST ข้อมูลลง MySQL ผ่าน Web Service

บทเรียน AngularJS กับการส่งข้อมูลจาก Form ด้วย POST Method ผ่าน Web Service ไปเก็บลงในฐานข้อมูล MySQL แบบง่าย พร้อม Validation Form ที่มีมาพร้อม AngularJS

บทความนี้เป็นบทความต่อเนื่องจากบทความ

ก่อนจะศึกษาบทความนี้แนะนำให้อ่านย้อนหลัง สำหรับผู้เริ่มต้น

หากว่าเข้าใจ concept แล้วก็มาเริ่มทำงานต่อเนื่องจากบทความก่อนหน้าได้เลยครับ รอบนี้เราจะทำเมนู Register ขึ้นมาให้มีการลงทะเบียน

เช็คเพื่อตรวจสอบ

เช็คเพื่อตรวจสอบ ใช้ JSONView Extension ของ chrome ได้นะครับ

ให้ไปเพิ่ม หน้า register.html ใหม่ ครับ และทำการเพิ่มไฟล์ register.js ที่โฟลเดอร์ controller ด้วยครับ

HTML หน้า register.html เป็นตามนี้ครับ

จะเห็นว่าเราได้สร้าง ng-app ชื่อ “registerModules” และเราได้สร้าง form สำหรับส่งค่าชื่อ “regForm” ที่มี ng-controller ชื่อ “registerController” ไว้ด้วยเช่นกัน และประกาศ controller/register.js ไว้ข้างล่างก่อนปิด </body> ครับ

Screen Shot 2558-07-10 at 10.25.06 PM

ต่อมาให้เราเขียน form ของ Input ส่วนของ text ดังนี้ครับ

จะเห็นว่า input ของ Textbox นั้นจะมีชื่อว่า first_name และชื่อ ng-model จะชื่เดียวกันคือ “first_name” ครับเป็นค่าที่ตรงกับ MySQL Table ส่วนของ drivers เลยครับ โดยมีการกำหนดให้ Fields ของ Textbox นี้เป็น required ครับ คือห้ามเป็นค่าว่าง หากเป็นค่าว่างจะเข้าเงื่อนไขการ Validation ที่ทาง AngularJS มีไว้ให้

จะโชว์ Message Alert เด้งเตือนครับถ้าเป็นค่าว่าง

ทำแบบนี้ให้ครบทุก Fields ครับ

สร้าง Input ที่เป็น Submit หรือปุ่มส่งข้อมูลขึ้นมาครับ

ส่วนของการ Validation อยู่ตรงนี้ครับเป็นการเช็คว่า Text Input ไหนว่าง หรือตัวไหนห้ามว่าง

สร้าง <span> สำหรับโชว์ค่าคำเตือนขึ้นมาต่อท้ายเล็กน้อยเป็นการบอกว่า ระบบดำเนินการเสร็จหรือยัง

ไฟล์ register.html จะเป็นแบบนี้

ทีนี้ก็ได้เวลาไปจัดการส่วนของ controller แล้วครับ เพราะ View น่าจะเรียบร้อยแล้ว

ตัวอย่างผมได้ลองเขียนข้อมูลไปแสดงผล Binding กับ View สัก 1 ชุดผ่าน $Scope ของ registerController ครับ

ฟังก์ชัน ของ Input type submit ที่ปุ่มบนหน้า register.html ให้เราไปพิจารณาส่วนนี้ครับ จะเห็นว่า ng-click เรียกฟังก์ชัน submit_data()

มันจะตรงกับบน Controller เลยคือฟังก์ชัน submit_data()

โดยฟังก์ชันของ submit_data() จะมีการส่ง Method เป็น POST ไปครับ แต่จะไม่ไปแบบ String Based ครับ มันจะทำการแปลงเป็น Key Value ก่อนให้อยู่ในรูปของ Object value ที่มี key อ้าง

พูดง่ายๆ คือการแปลง Input ใน textbox ให้อยู่ในรูปแบบของ JSON นั่นเองครับ แล้วส่งไปที่ไฟล์ api/submit_register.php

ดังนั้นเราต้องไปสร้าง API ภาษา PHP ในโฟลเดอร์ “api” ใหม่ขึ้นว่าชื่อว่า “submit_register.php” ครับ

รูปแบบการรับค่าต้องเป็น PHP รับค่า Object แบบ key value ของ POST Method ครับซึ่งเป็นดังนี้

แล้วก็แค่จับไปใส่ MySQL ตามโครงสร้ง PHP ปรกติได้เลย เพียงแค่เราต้อง return String กลับไปว่าได้ดำเนินการเสร็จเรียบร้อย

ไว้ให้ controller/register.js ไปแสดงบน View register.html ที่ {{message}} ครับ

ทดสอบกันหน่อย

Screen Shot 2558-07-10 at 10.42.03 PM

ข้อมูลเข้าเรียบร้อยไปเช็คที่ MySQL ได้เลยครับ

Screen Shot 2558-07-10 at 10.42.28 PM

บทเรียนต่อไปเป็นการส่ง GET Parameter ที่เราจะไม่ GET แบบเดิมๆ แล้วเราจะใช้ $location ของ AngularJS ช่วยส่งไปครับ

Comments

daydevthailand@gmail.com

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

Review overview
NO COMMENTS

Sorry, the comment form is closed at this time.