Home / Developer  / Angularjs  / AngularJS กับการทำงานร่วมกับ Web Service JSON

AngularJS กับการทำงานร่วมกับ Web Service JSON

การใช้ AngularJS สร้าง Web Application แบบ MVC โดยใช้ View และ Controller เบื้องต้นให้เรียก JSON ส่วนของ Web Service มาแสดงบน ng-repeat สำหรับผู้เริ่มต้น

บทเรียนให้ศึกษาก่อนหน้านี้ สำหรับ AngularJS

บทเรียนนี้ก็เลยจะเป็นการทำงานร่วมกับ MySQL และ PHP ครับด้วย JSON Web Service โดยการ Encode และ Decode ออกมาใช้งานกับ AngularJS

Screen Shot 2558-07-09 at 8.40.53 PM

สร้าง MySQL Database ขึ้นมาครับ แล้ว Create Database ดังนี้

เสร็จแล้วก็ใส่ ข้อมูลลงไปเป็นตัวอย่างเล็กน้อยครับ

Screen Shot 2558-07-09 at 8.46.59 PM

 

เปิด Appserv? หรือ XAMPP ขึ้นมาครับสร้าง โฟลเดอร์ว่า api ขึ้นมาแล้วเขียน PHP ใหม่ว่า listdriver.php เป็นการเรียก Method ชื่อ listdriver() นั่นเอง

เพื่อให้การทำงาน Cross Domain ได้เราต้องเพิ่มส่วนนี้ลงไปใน header() ครับ

ภาพรวมไฟล์ listdriver.php จะเป็นแบบนี้ครับ

ทดสอบ Web Service ของเรากันหน่อย

Screen Shot 2558-07-09 at 8.52.00 PM

กลับมาสร้าง ไฟล์ index.html ครับ ให้สร้างไฟล์ตามนี้ครับ

สังเกตุจะเห็นว่าเราตั้งชื่อ ng-app ว่า indexApp และตั้งชื่อ ng-controller ว่า indexController ไว้เตรียมพร้อมสำหรับ AngularJS ครับ และถ้ามองดีๆ ให้เราเตรียม Controller ของเราโดยสร้าง folder ชื่อ “controller” ก่อนแล้วสร้างไฟล์มาใหม่ว่า index.js เก็บไว้ใน controller นั้นครับ โดยมี Code ดังนี้

โดยจะเป็นการเรียก Key ที่อยู่ใน JSON ทั้งหมดมาเก็บลงใน $scope ของ driver ครับ สังเกตุว่า Key ที่เรียกผ่าน response นั้นชื่อ drivers ใน JSON ครับ

เราเลยต้องมาเขียนร่วมกับ Table ทันทีครับ

ทดสอบครับ

Screen Shot 2558-07-09 at 8.58.47 PM

จะเห็นว่าทำงานได้เรียบร้อยแล้ว บทเรียนต่อไปจะเป็นการสร้าง Register สำหรับกรอกข้อมูลใหม่เพื่อนำเข้า Insert ใน MySQL ร่วมกับ PHP (Post Method) ครับ

Comments

daydevthailand@gmail.com

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

Review overview
NO COMMENTS

Sorry, the comment form is closed at this time.