การพัฒนาเว็บ API สำหรับการเชื่อมโยงข้อมูล

ระบบการเช่ือมโยงข้อมูลภายใน มหาวทิ ยาลัยราชภฏั กาแพงเพชร การพัฒนา API การพฒั นาระบบเช่ือมโยงข้อมูลผ่านเวบ็ เซอร์วสิ API งานเทคโนโลยสี ารสนเทศ สานักส่งเสริมวิชาการและงานทะเบยี น มหาวทิ ยาลัยราชภฏั กาแพงเพชร

สารบัญ การพฒั นา API................................................................................................................................. 1 API คืออะไร.................................................................................................................................. 1 ประโยชน์ของ API......................................................................................................................... 1 ภาษาที่ใช้ในการพัฒนา ................................................................................................................. 1 เรมิ่ ต้นการพัฒนา API ................................................................................................................... 2 ตวั อย่างท่ี 1 การสรา้ งข้อมลู เพอื่ แสดงผลในรูปแบบ JSON ไฟล์ ............................................... 2 ตวั อยา่ งที่ 2 การดึงข้อมูลจากฐานขอ้ มลู เพอื่ แสดงผลในรูปแบบ JSON ไฟล์............................. 4 ตัวอยา่ งที่ 3 การเพ่ิม ลบ แกไ้ ข ขอ้ มลู ผ่าน API ........................................................................ 7 การติดตง้ั โปรแกรม Postman .................................................................................................... 10 การใชง้ าน Slim Framework ในการสรา้ ง API .......................................................................... 10 เริ่มต้นตดิ ตัง้ Slim Framework ................................................................................................. 14 เรมิ่ สรา้ ง Function เพื่อทดสอบการทางาน................................................................................ 15 เรม่ิ ต้นติดต่อฐานขอ้ มลู ................................................................................................................ 19 การพัฒนาระบบเชื่อมโยงข้อมูลผา่ นเวบ็ เซอร์วิส ..........................................................................21 การเช่ือมโยงระบบดว้ ยเว็บเซอรว์ สิ ............................................................................................. 21 การสรา้ งเว็บไซต์เพ่ือใหเ้ ชอื่ มตอ่ กับระบบ API............................................................................. 21 ภาษาท่ีใชใ้ นการพัฒนา ............................................................................................................... 21 เงอ่ื นไขการเขยี นโปรแกรมใชง้ าน API ผา่ น AngularJS............................................................... 21 เร่ิมตน้ การพฒั นาเวบ็ เพจด้วยภาษา HTML และ AngularJS...................................................... 22 การใช้ AngularJS เชอ่ื มโยง API เพอื่ นาข้อมูลมาแสดงผล.......................................................... 24 การเชื่อมโยง API โดยการส่งขอ้ มลู ในรปู แบบ GET ..................................................................... 25 การประยุกค์ใช้ API เพอ่ื เชื่อมโยงขอ้ มูลในรูปแบบ GET.............................................................. 28 การเชอื่ มต่อ API ในรปู แบบ POST............................................................................................. 30

การพฒั นา API API คอื อะไร API ย่อมาจาก Application Programming Interface คือ ช่องทางการเช่ือมต่อช่องทางหน่ึงท่ีจะ เชื่อมต่อกับเว็บไซต์ผใู้ หบ้ ริการ API จากที่อ่ืน เป็นตัวกลางท่ีทาให้โปรแกรมประยุกตเ์ ชอื่ มต่อกับโปรแกรม ประยุกต์อ่ืน หรือเชื่อมการทางานเข้ากับระบบปฏิบัติการ ตัวอย่าง เช่น Twitter มีหลายเว็บ ที่มีการ เชื่อมโยงข้อมูลกับ twitter ท้ังเป็นการอ่านข้อมูลจาก twitter หรือ ส่งข้อมูลเข้า twitter เองก็ตาม ซ่ึง ล้วนอาศัยการเชื่อมต่อแลกเปล่ียนข้อมูลกัน ด้วย API น่ันเอง และอีกหน่ึงตัวอย่าง เช่น Google Maps API คือบริการของ Google อีกรูปแบบหนึ่งท่ีเราสามารถนาข้อมูลของ Google Maps ที่ทาง Google ให้บริการโดยสว่ นมากจะนามาใช้กบั เว็บไซต์ ของบรษิ ทั ฯหรือ เวบ็ ไซตห์ ้างรา้ นต่างๆ เพ่อื เปน็ อกี ชอ่ งทางที่ ให้ลกู ค้ารวู้ ่าบรษิ ทั ฯ หรือหา้ งร้านน้ัน ประโยชนข์ อง API 1. สามารถรับส่งขอ้ มลู ขา้ ม Server ได้ 2. ไม่จาเป็นต้องเขา้ หนา้ เวบ็ หลัก กม็ ขี ้อมลู ของเวบ็ หลัก จากเว็บทีด่ ึง API เอพไี อ แบ่งเปน็ 2.1. เอพีไอท่ีขึ้นกับภาษา (language-dependent API) คือ เอพีไอ ที่สามารถการเรียกใช้จาก โปรแกรมทเี่ ขียนขนึ้ ดว้ ยภาษาเพียงภาษาใดภาษาหนึง่ 2.2. เอพีไอไม่ข้ึนกับภาษา (language-independent API) คือ เอพีไอ ท่ีสามารถเรียกได้จาก โปรแกรมหลายๆภาษา API ถือเป็นกลุ่มของฟังก์ช่ัน ข้ันตอน หรือคลาส (Class) ท่ีระบบปฏิบัติการ (OS) หรือผู้ให้บริการ สร้างขึ้นมา เพื่อรองรับการเรียกขอข้อมูล จากโปรแกรมอ่ืน ๆ ทั้งน้ี API สามารถใช้งานได้กับภาษาในการ เขียนโปรแกรมที่รองรับเท่าน้ัน ซึ่งมันจะถูกจัดทาให้อยู่ในรูปแบบ Syntax หรือ element ท่ีสามารถ นาไปใช้ได้อยา่ งสะดวกสบาย ภาษาที่ใช้ในการพัฒนา 1. PHP 2. ASP, ASP.NET 3. JAVASCRIPT 4. Node JS 5. ฯลฯ

2 เร่ิมตน้ การพัฒนา API ตัวอยา่ งที่ 1 การสรา้ งข้อมูลเพอื่ แสดงผลในรูปแบบ JSON ไฟล์ index.php <?php $arr = array( 'name' => 'komkrit klinart', 'age' => 30 ); echo json_encode($arr); ?> ผลลพั ธ์ ตัวอย่างที่ 1 ยังคงเป็นเพียงการแสดงข้อมูลในรูปแบบ Array อยู่ ยังไม่สามารถนาไปใช้ในการ แสดงผลในรูปแบบ JSON ที่ภาษาทุกภาษาสามารถนาไปใช้ได้ จะต้องเพ่ิมเติมชุดคาสั่งอีกเล็กน้อยเพ่ือให้ สามารถใช้งานได้ โดยนาชดุ คาส่ัง 2 บรรทดั ด้านล่างไปวางไว้ด้านบน header(\"Access-Control-Allow-Origin: *\"); header(\"Content-Type: application/json; charset=UTF-8\");

3 <?php header(\"Access-Control-Allow-Origin: *\"); //CORS อนุญาตให้ใช้ข้อมลู ได้ header(\"Content-Type: application/json; charset=UTF-8\"); //ประกาศใหข้ ้อมูลต่างๆ เป็นขอ้ มลู ประเภท JSON รองรับภาษา $arr = array( 'name' => 'komkrit klinart', 'age' => 30 ); echo json_encode($arr); ?> ผลลพั ธ์

4 ตวั อย่างท่ี 2 การดงึ ข้อมลู จากฐานข้อมลู เพื่อแสดงผลในรปู แบบ JSON ไฟล์ conDB.php <?php $servername = \"localhost\"; $username = \"username\"; $password = \"password\"; try { $conn = new PDO(\"mysql:host=$servername;dbname=myDB\", $username, $password); // set the PDO error mode to exception $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); echo \"Connected successfully\"; } catch(PDOException $e) { echo \"Connection failed: \" . $e->getMessage(); } ?> ผลลพั ธ์

5 เริ่มตน้ สร้าง ตาราง สาหรบั การดงึ ข้อมูลมาแสดงผล CREATE TABLE MyGuests ( id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY, firstname VARCHAR(30) NOT NULL, lastname VARCHAR(30) NOT NULL, email VARCHAR(50) ) ทาการเพิ่มข้อมลู ในตารางฐานข้อมลู INSERT INTO `myguests` (`id`, `firstname`, `lastname`, `email`) VALUES (1, 'คมกริช', 'กลิ่นอาจ', '[email protected]'), (2, 'เสกสรรค'์ , 'ทองนาค', '[email protected]');

6 เรม่ิ ต้นดึงข้อมูลมาแสดงผล index.php <?php header(\"Access-Control-Allow-Origin: *\"); header(\"Content-Type: application/json; charset=UTF-8\"); include \"conDB.php\"; $sql = \"SELECT * FROM MyGuests\"; $result = $conn->query($sql); $row = $result->fetchAll(PDO::FETCH_ASSOC); echo json_encode($row); ?> ผลลัพธ์

7 ตวั อย่างท่ี 3 การเพิ่ม ลบ แกไ้ ข ข้อมลู ผ่าน API <?phpmyguests.php header(\"Access-Control-Allow-Origin: *\"); header(\"Content-Type: application/json; charset=UTF-8\"); include \"conDB.php\"; if($_GET['module'] == \"show\"){ $sql = \"SELECT * FROM MyGuests\"; $result = $conn->query($sql); $row = $result->fetchAll(PDO::FETCH_ASSOC); echo json_encode($row); } if($_GET['module'] == \"del\"){ $sql = \"delete FROM MyGuests where id = '\".$_GET['id'].\"'\"; $result = $conn->query($sql); $rr = array(\"Successed!\"); echo json_encode($rr); } if($_GET['module'] == \"insert\"){ $sql = \"insert into MyGuests (firstname,lastname,email) values ('\".$_POST['firstname'].\"','\".$_POST['lastname'].\"','\".$_POST['email'].\"')\"; $result = $conn->query($sql); $rr = array(\"Successed!\"); echo json_encode($rr); } ?>

8 ผลลัพธ์ http://localhost/testapi/myguests.php?module=show ผลลัพธ์ http://localhost/testapi/myguests.php?module=del&id=3

9 ผลลัพธ์ http://localhost/testapi/myguests.php?module=insert . เนือ่ งจากการเพ่มิ ข้อมลู ไมส่ ามารถใช้ Web Browser ได้ จึงแนะนาให้ใชโ้ ปรแกรม Postman ใน การเพ่ิมข้อมลู

10 การติดตงั้ โปรแกรม Postman ดาวนโ์ หลดไดจ้ าก https://www.getpostman.com/ การใชง้ าน Slim Framework ในการสรา้ ง API การใช้ Slim Framework ในการสรา้ ง API เพื่อให้การทางานของ API มีประสิทธภิ าพมากยง่ิ ข้นึ โดยสามารถศกึ ษาวิธีการใชง้ านไดท้ ่ี https://www.slimframework.com/ ความต้องการของ Slim Framework 1. Web server with URL rewriting 2. PHP 5.5 or newer การตดิ ตง้ั ต้องใช้ composer ในการตดิ ตง้ั Slim Framework โดยสามารถดาวนโ์ หลดไดท้ ่ี https://getcomposer.org/

11 คลิก Next

12 เลอื กที่อยู่ของไฟล์ php.exe คลกิ Next คลิก Next

13 คลกิ Next กรุณารอสักครู่ อยรู่ ะหวา่ งการดาเนินการตดิ ตง้ั

14 คลกิ Finish เริ่มต้นตดิ ต้ัง Slim Framework ให้ดาเนนิ การสรา้ งโฟลเดอร์สาหรบั สร้างโปรเจคขึ้นมา แลว้ ใช้ composer require slim/slim \"^3.0\" หลังจากติดต้งั แล้วให้เขา้ ไปยงั โฟลเดอร์โปรเจค แล้วสรา้ งไฟล์ช่ือ index.php และแทรกชดุ คาสั่ง ด้านลา่ งในไฟล์ index.php <?php require 'vendor/autoload.php'; หลงั จากนั้นพมิ พค์ าส่งั ดา้ นลา่ งเพอ่ื เร่มิ การใชง้ าน Slim Framework $app = new \\Slim\\App();

15 เรมิ่ สร้าง Function เพื่อทดสอบการทางาน $app->get('/', function ($req, $res) { $res->write('Hi, I am Web API'); return $res; }); แลว้ เพ่ิมคาสง่ั $app->run(); เพือ่ สงั่ ให้ Slim Framework ทางาน $app->run(); แต่เนอื่ งจาก Slim Framework ต้องทางานในรูปแบบ URL rewriting จึงต้องมีไฟล์ .htaccess เพอ่ื ใชง้ าน URL rewriting RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^ index.php [QSA,L] หลังจากเตรียมทุกอย่างเรียบรอ้ ยแลว้ ใหล้ องรันเพอ่ื ทดสอบว่าการแสดงผลถกู ต้องหรือไม่ หาก สาเร็จจะได้ผลดงั รูป

16 การแสดงผลในรูปแบบ JSON โดยพมิ พช์ ดุ คาสัง่ ด้านลา่ ง $app->get('/', function ($req, $res) { $data = array('name' => 'Bob', 'age' => 40); $newResponse = $res->withJson($data); return $newResponse; }); ผลลพั ธ์ การส่งข้อมลู มาพรอ้ ม URL แบบ GET $app->get('/members/{id}', function ($req, $res) { $Members = $req->getAttribute('id'); $data = array('member' => $Members); $newResponse = $res->withJson($data); return $newResponse; });

17 ผลลพั ธ์ การสง่ ข้อมลู มาพร้อม URL แบบ POST $app->post('/members/', function ($req, $res) { $Members = $req->getParam('id'); $data = array('member' => $Members); $newResponse = $res->withJson($data); return $newResponse; }); แตย่ ังไม่สามารถใช้งานได้เน่ืองจาก Slim Framework ไม่อนญุ าตใหใ้ ชง้ านได้เพราะตดิ CORS จงึ ตอ้ งตดิ ต้ัง CORS ใน Slim Framework เพอื่ ใหส้ ามารถใช้งาน POST ได้ โดยทาตามข้ันตอนดังนี้

18 1. ให้เปดิ ไฟล์ composer.json และเพ่ิมคาส่ังดังภาพ { \"req. uire\": { \"slim/slim\": \"^3.0\", \"palanik/corsslim\": \"dev-slim3\" } } 2. เปิด cmd แลว้ รนั คาส่ัง Composer update 3. แทรกชุดคาสงั่ ต่อไปนเี้ พื่อให้สามารถใชง้ านได้ $corsOptions = array( \"origin\" => \"*\", \"exposeHeader\" => array(\"Content-Type\", \"X-Requested-With\", \"X- authentication\",\"X-client\"), \"allowMethod\" => array('GET','POST','PUT','DELETE','OPTIONS') ); $cors = new \\CorsSlim\\CorsSlim($corsOptions); $app->add($cors); ผลลัพธ์

19 เริ่มต้นตดิ ต่อฐานข้อมูล <?php require 'vendor/autoload.php'; $config['db']['host'] = \"localhost\"; $config['db']['user'] = \"root\"; $config['db']['pass'] = \"51640826@tb\"; $config['db']['dbname'] = \"mydb\"; $app = new \\Slim\\App([\"settings\" => $config]); $corsOptions = array( \"origin\" => \"*\", \"exposeHeader\" => array(\"Content-Type\", \"X-Requested-With\", \"X- authentication\",\"X-client\"), \"allowMethod\" => array('GET','POST','PUT','DELETE','OPTIONS') ); $cors = new \\CorsSlim\\CorsSlim($corsOptions); $app->add($cors); $container = $app->getContainer(); $container['db'] = function($c){ $db = $c['settings']['db']; $pdo = new PDO(\"mysql:host=\". $db['host'].\";dbname=\".$db['dbname'],$db['user'], $db['pass']); $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); $pdo->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC); return $pdo; }; $app->run(); ?>

20 ทดสอบการดงึ ข้อมูลมาแสดงผล $app->get('/members', function ($req, $res) { $result = array(); $sql = \"select * from myguests\"; $data = $this->db->query($sql); foreach($data as $rows){ array_push($result,$rows); } $newResponse = $res->withJson($result); ผreลtลuัพrnธ์ $newResponse; });

21 การพฒั นาระบบเช่ือมโยงขอ้ มูลผา่ นเวบ็ เซอร์วสิ การเชอ่ื มโยงระบบด้วยเวบ็ เซอรว์ ิส ระบบสารสนเทศในปัจจุบันมีความจาเป็นต้องใช้ข้อมูลในด้านต่างๆ เพื่อจัดเก็บ นาเสนอ และ สรุปรายงานผล และตามนโยบายของมหาวิทยาลัยฯ มีความต้องการให้หน่วยงานภายในมหาวิทยาลัยฯ สามารถเช่ือมโยงข้อมูลต่างๆเข้าด้วยกัน เพ่ือให้ข้อมูลเป็นปัจจุบัน ถูกต้อง และไม่ซ้าซ้อน ซ่ึงการเช่ือมโยง ข้อมูลโดยการใช้เพียงการเช่ือมต่อระบบฐานข้อมูลนั้นอาจมีข้อจากัดหลายอย่าง เช่น ไม่สามารถเชื่อม ฐานข้อมูลของต่างหน่วยงานได้เนื่องด้วยข้อจากัดด้านความปลอดภัยของข้อมูล และหากแต่ละหน่วยงาน สรา้ งฐานข้อมลู ท่ีเกบ็ ข้อมลู ในรูปแบบคล้ายกันเพ่ือใช้ในหน่วยงาน อาจทาให้เกิดการซา้ ซ้อนของข้อมูล ไม่ สามารถยืนยันได้ว่าข้อมูลน้ีถูกต้องหรือเป็นปัจจุบันหรือไม่ การเขียนเว็บไซต์ให้สามารถเรียกใช้งานเว็บ เซอร์วิสได้จึงเป็นคาตอบของปัญหาเหล่านี้ เพื่อให้ข้อมูลเป็นไปในแนวทางเดียวกัน ลดความซ้าซ้อนของ ข้อมูล เจ้าหน้าท่ีดูแลระบบจัดการเพียงข้อมูลที่ตนเองรับผิดชอบ และข้อมูลเป็นปัจจุบันสามารถยืนยัน ความถกู ตอ้ งได้ การสร้างเวบ็ ไซต์เพ่อื ให้เชือ่ มตอ่ กับระบบ API การทาให้เว็บไซต์เช่ือมต่อกับ API น้ันผู้พัฒนาสามารถพัฒนาระบบได้หลากหลายวิธีตามท่ี ผู้พัฒนาถนัดเพราะ API ที่มหาวิทยาลัยใช้นั้นอยู่ในรูปแบบท่ีเป็นมาตรฐานสากล โดยใช้ภาษา JSON ใน การเช่ือมโยง ซึ่งผู้พัฒนาระบบสามารถเลือกใช้ภาษาใดก็ได้ที่สามารถเชื่อมโยงกับ JSON ได้ และสามารถ เช่อื มโยงผ่าน HTTP (Hypertext Transfer Protocol) ได้ ซง่ึ ในคูม่ นี ้ีจะขอใช้ AngularJS ในการเชื่อมโยง เน่ืองจากเปน็ ภาษา JavaScript ทสี่ ามารถแทรกเขา้ กับโค้ด HTML ได้ง่าย และไม่ยงุ่ ยากในการใช้งานนกั ภาษาทีใ่ ชใ้ นการพัฒนา 1. HTML 2. JavaScript 3. ฯลฯ เงื่อนไขการเขียนโปรแกรมใช้งาน API ผ่าน AngularJS AngularJS เป็น JavaScript Framework ที่ทางานในฝ่ัง Client การเขียน AngularJS น้ัน สามารถเขียนในไฟล์ HTML ได้โดยท่านจะใช้หรือไม่ใช้ภาษา PHP ในการเขียนร่วมก็ได้ ซ่ึงโดยปกติไฟล์ HTML ที่เขียนได้ ท่านสามารถเปิดจากเคร่ืองที่ท่านพัฒนาได้ทันที แต่เมื่อท่านต้องการเรียก API อาจมี เง่ือนไขเพิ่มเติมคือ ฝ่ัง API Server น้ันจะต้องการข้อมูล Header จากท่าน ซึ่งหากท่านเปิดหน้าเพจโดย การเปดิ จากไฟล์โดยตรงจะทาใหเ้ พจนั้นไม่มขี ้อมลู Header ส่งผลให้ไมส่ ามารถเรียก API ได้ หากต้องการ เรยี ก API ทา่ นจาเปน็ ตอ้ งเปิดไฟลผ์ ่าน Webserver เพือ่ ให้ไฟลน์ นั้ มี Header สง่ ไปให้ API Server ได้ ซง่ึ Webserver ทา่ นจะใช้จากการจาลองขึ้นในเครอื่ งผู้พัฒนา หรอื จากเครือ่ ง Server กไ็ ด้

22 เร่ิมตน้ การพัฒนาเว็บเพจด้วยภาษา HTML และ AngularJS การเริม่ ใช้งาน AngularJS นั้น จาเปน็ ต้องใช้ชุดโคด้ เพ่ือเริ่มทางาน โดยมโี ครงสรา้ งดังภาพ <html ng-app=\"kpru\"> <head> <meta charset=\"UTF-8\"> <title></title> </head> <body ng-controller=\"mainController\"> <table border=\"1\"> <tr> <th>รหัส</th> <th>ชอื่ </th> <th>สกลุ </th> <th>อาย<ุ /th> </tr> <tr ng-repeat=\"row in rows\"> <td>{{row.id}}</td> <td>{{row.firstname}}</td> <td>{{row.lastname}}</td> <td>{{row.age}}</td> </tr> </table> <script src=\"https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js\"></script> <script> var app = angular.module(\"kpru\", []); app.controller(\"mainController\", function($scope, $http) { var url = \"localhost/api/index.php\"; $http.get(url).then(function(respond){ $scope.rows = respond; }); }); </script> </body> </html> 1. การตั้งชอื่ App โดยใชค้ าส่ัง ng-app ในโค้ด HTML <html ng-app=\"kpru\"> 2. การตงั้ ช่อื Controller โดยการใช้คาส่ัง ng-controller ในโค้ด HTML <body ng-controller=\"mainController\"> 3. การวนลูปเพื่อสร้างชดุ โค้ดจากจานวน Array ของข้อมูล ใช้คาสั่ง ng-repeat ในโค้ด HTML โดย รูปแบบการเรียกใชค้ าสงั่ คือ “ตวั แปรรบั คา่ in ช่ือตวั แปรท่เี กบ็ ข้อมลู Array” โดยโปรแกรมจะนาข้อมูลใน Array มาใสใ่ นตวั แปรรบั ค่าทลี ะ 1 ค่า และจะลปู จนกวา่ ขอ้ มูลใน Array จะหมด <tr ng-repeat=\"row in rows\">

23 4. การเรียกใช้ข้อมูลเพ่ือให้แสดงค่าในหน้าเพจ การเรียกข้อมูลของ AngularJS ในส่วนโค้ด HTML น้ัน จะอยใู่ นรูปแบบวงเล็บปีกกาเปิดและปดิ อยา่ งละ 2 อนั ( {{ และ }} ) โดยชื่อตัวแปรท่ีใส่ด้านในจะไม่มี $scope ซง่ึ ตา่ งจากการเรยี กตวั แปรในส่วนของ JavaScript {{row.id}} 5. การเรียกใช้งานชุดโค้ด AngularJS เพื่อทางานในเพจ ผู้พัฒนาสามารถโหลดชดุ โค้ดไว้ใน Server ของท่านแล้วเรยี กผ่านโดเมนของท่านโดยตรงไดเ้ ชน่ กัน <script src=\"https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js\"></script> 6. การกาหนดการทางานของโปรแกรมในฝั่ง JavaScript จะมีรูปแบบ ดังนี้ การประกาศเรียกใช้ App และการเรียกใช้ Controller ซึ่งเราจะสามารถเขียนเง่ือนไขการทางานของเพจน้ันๆ ภายใต้ Controller น้ี <script> var app = angular.module(\"kpru\", []); app.controller(\"mainController\", function($scope, $http) { // สว่ นโคด้ เพอ่ื กาหนดการทางานโปรแกรม }); }); </script>

24 การใช้ AngularJS เชือ่ มโยง API เพื่อนาข้อมลู มาแสดงผล คู่มือน้ีขอยกตัวอย่างการเชื่อมโยงข้อมูลสังกัดหน่วยงานภายในมหาวิทยาลัยราชภัฏกาแพงเพชร จ า ก API ร ะ บ บ MIS เ พ่ื อ น า ม า แ ส ด ง ผ ล โ ด ย มี URL ส า ห รั บ เ ช่ื อ ม โ ย ง ข้ อ มู ล สั ง กั ด คื อ https://mis.kpru.ac.th/api/OrganizationList ทา่ นสามารถพมิ พ์ตามได้ ดังภาพ <html ng-app=\"KPRU\"> <head> <meta charset=\"UTF-8\"> <title></title> </head> <body ng-controller=\"mainController\"> <table border=\"1\" > <tr> <th>รหัส</th> <th>ชอ่ื สังกดั </th> </tr> <tr ng-repeat=\"dataRow in dataArray\"> <td>{{dataRow.organization_id}}</td> <td>{{dataRow.organization_name_tha}}</td> </tr> </table> <script src=\"https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js\"></script> <script> var app = angular.module(\"KPRU\", []); //กาหนด App ทที่ างานดว้ ย app.controller(\"mainController\", function($scope, $http) { //กาหนด Controller และเรยี กฟังกช์ น่ั ทต่ี อ้ งการ ใช ้ var url = \"https://mis.kpru.ac.th/api/OrganizationList\"; //กาหนด API URL ทตี่ อ้ งการเรยี กขอ้ มลู $http.get(url).then(function(respond){ $scope.dataArray = respond.data; //เมอื่ รับคา่ จาก API แลว้ ใหน้ าไปใสใ่ นตัวแปร dataArray }); }); </script> </body> </html> เม่ือทดลองเขา้ เพจ จะแสดงข้อมลู สงั กัดตามที่ API สง่ มา ดังภาพ

25 การเช่ือมโยง API โดยการส่งขอ้ มูลในรปู แบบ GET จากหัวข้อท่ีแล้ว ได้ทาการเช่ือมข้อมูลโดยการเรียกเพียงชื่อ API โดยไม่มีการส่งค่าใดๆเพ่ือนาไป สร้างเงือ่ นไข แตด่ ้วยบางเหตุการณ์มคี วามจาเป็นต้องส่งค่าบางอยา่ งเพ่ือให้ API นาไปสรา้ งเง่ือนไขเพ่ือส่ง ข้อมูลกลับได้ตรงตามความต้องการของผู้ใช้งานระบบ สาหรับหัวข้อนี้จะพูดถึงการส่งค่าไปกับ URL ของ API เพ่ือนาไปสร้างเงื่อนไข หรือเรียกว่าการส่งค่าในรูปแบบ GET การส่งค่าในรูปแบบ GET นี้ เหมาะ สาหรับการส่งค่าที่ไม่เป็นความลับ เป็นค่าท่ัวไปที่ไม่ต้องการความปลอดภัยมากนัก เน่ืองจากการส่งค่าใน รูปแบบ GET สามารถถกู ดกั จับขอ้ มลู ได้ง่าย จึงไมเ่ หมาะกบั การส่งข้อมูลท่เี ปบ็ ความลับ หรือข้อมลู สว่ นตัว รวมถึงการส่งข้อมูลท่ีปริมาณไม่มากนัก เนื่องจากเป็นการส่งข้อมูลไปบน URL หากยาวเกินไปอาจทาให้ ข้อมูลที่ API Server ได้รับนั้นอาจไม่ครบถ้วน คู่มือน้ีจึงขอยกตัวอย่าง API ของระบบ KPRU MIS ซึ่งเป็น API แสดงข้อมูลบุคลากรโดยต้องส่ง ID ของสังกัดหน่วยงานไป จะได้รายชื่อบุคลากรภายในหน่วยงานนั้นออกมา ซ่ึง API นี้ จะตอบค่ากลับมา โ ด ย แ ย ก ร า ย ชื่ อ บุ ค ค ล า ก ร ส า ย ส อ น แ ล ะ ส า ย ส นั บ ส นุ น โ ด ย มี URL ข อ ง API คื อ https: / / mis. kpru. ac. th/ api/ EmployeeInOrgClassify/ ( ID ข อ ง สั ง กั ด ) เ ช่ น ห า ก ต้ อ ง ก า ร ข้ อ มู ล ร า ย ชื่ อ บุ ค ล า ก ร จ า ก ห น่ ว ย ง า น ร หั ส “ 0 0 0 0 0 0 0 0 0 7 ” จ ะ ไ ด้ URL ดั ง น้ี “https://mis.kpru.ac.th/api/EmployeeInOrgClassify/0000000007” ซง่ึ เม่ือทดลองเชือ่ มต่อ API ผา่ นเว็บบราวเซอร์โดยตรงแลว้ จะไดข้ อ้ มลู ดงั ภาพ

26 จากข้อมูลท่ี API ส่งกลับมา จะเห็นว่า Array อยู่ 2 ชุดคือ Teacher และ Staff ซ่ึงท่านสามารถ เขียนเพจเพอ่ื รับข้อมลู ได้ โดยพมิ พ์ตาม ดงั ภาพ <html ng-app=\"KPRU\"> <head> <meta charset=\"UTF-8\"> <title></title> </head> <body ng-controller=\"mainController\"> <table border=\"1\" > <tr> <th>ภาพบคุ ลากร</th> <th>ชอื่ -สกลุ </th> <th>ชอื่ สังกดั </th> <th>ตาแหน่ง</th> </tr> <tr> <td colspan=\"4\" ng-if=\"dataArrayTeacher.length > 0\">รายชอื่ อาจารย<์ /td> </tr> <tr ng-repeat=\"dataRow in dataArrayTeacher\"> <td> <img src=\"{{dataRow.picture}}\" alt=\"{{dataRow.employee_id}}\" height=\"42\" width=\"42\"> </td> <td>{{dataRow.employee_name}}</td> <td>{{dataRow.sunit_name}}</td> <td>{{dataRow.position_rank_name}}</td> </tr> <tr> <td colspan=\"4\" ng-if=\"dataArrayStaff.length > 0\">รายชอ่ื เจา้ หนา้ ท<่ี /td> </tr> <tr ng-repeat=\"dataRow in dataArrayStaff\"> <td> <img src=\"{{dataRow.picture}}\" alt=\"{{dataRow.employee_id}}\" height=\"42\" width=\"42\"> </td> <td>{{dataRow.employee_name}}</td> <td>{{dataRow.sunit_name}}</td> <td>{{dataRow.position_rank_name}}</td> </tr> </table> <script src=\"https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js\"></script> <script> var app = angular.module(\"KPRU\", []); app.controller(\"mainController\", function($scope, $http) { var url = \"https://mis.kpru.ac.th/api/EmployeeInOrgClassify/0000000005\"; $http.get(url).then(function(respond){ $scope.dataArrayTeacher = respond.data.Teacher; //รับคา่ กลมุ่ Teacher จาก API $scope.dataArrayStaff = respond.data.Staff; //รับคา่ กลมุ่ Staff จาก API }); }); </script> </body> </html>

27 จากภาพจะเห็นว่าได้มีการส่งข้อมูล ID ของหน่วยงานต่อท้าย URL ไปด้วย ซึ่งอยู่ในรูปแบบ GET และในโค้ดมีส่วนท่ีเพิ่มเติมข้ึนมาคือส่วนของ respond.data ได้เพิ่มช่ือชุดข้อมูล Array ต่อท้ายด้วย เพ่ือ ระบวุ า่ ใหต้ วั แปรนั้นๆ รับคา่ จาก Array ชดุ ใด รวมถงึ สิง่ ท่ีเพ่มิ ขน้ึ มาอีกหนึ่งสว่ นคือ ng-if ซึ่งเป็นคาสั่งของ AngularJS เพื่อใช้สร้างเง่ือนไขในการแสดงข้อมูลในโค้ด HTML ด้ังโค้ดตัวอย่าง ได้ใช้คาส่ัง ng-if=\"dataArrayTeacher.length > 0\" เพื่อเช็คว่าหากตัวแปรชื่อ dataArrayTeacher มีจานวนอาเรย์ มากกว่าศูนย์ ใหแ้ สดงชุดคาส่งั HTML น้ันๆ เปน็ ตน้ และเม่อื ทดลองเขา้ เพจ ไดจ้ ะดงั ภาพ

28 การประยกุ คใ์ ช้ API เพ่ือเช่ือมโยงข้อมลู ในรูปแบบ GET การรับข้อมูลจาก API สามารถนามาประยุกค์ใช้ในรูปแบบต่างๆ ได้หลากหลายไม่แตกต่าง จากการเชื่อมต่อกับฐานข้อมูลโดยตรง ในคู่มือน้ีจะขอยกตัวอย่างการประยุกค์ใช้โดยการนาการ เรียกข้อมูลหน่วยงานจาก API ของ https://mis.kpru.ac.th/api/OrganizationList มาแสดงเพื่อให้ ผู้ใช้งานเลือกหน่วยงาน จากน้ันนา ID ของหน่วยงานไปเรียกข้อมูลบุคลากรจาก API ของ https://mis.kpru.ac.th/api/EmployeeInOrgClassify/...???... เพ่ือนาขอ้ มูลบุคลากรมาแสดง <html ng-app=\"KPRU\"> <head> <meta charset=\"UTF-8\"> <title></title> </head> <body ng-controller=\"mainController\"> <select ng-model=\"orgModel\" ng-change=\"selectOrg()\"> <option value=\"\" hidden selected>--กรณุ าเลอื กหน่วยงาน--</option> <option ng-repeat=\"dataRow in getOrg\" value= \"{{dataRow.organization_id}}\">{{dataRow.organization_name_tha}}</option> </select> <table border=\"1\" > <tr> <th>ภาพบคุ ลากร</th> <th>ชอ่ื -สกลุ </th> <th>ชอื่ สังกัด</th> <th>ตาแหน่ง</th> </tr> <tr> <td colspan=\"4\" style=\"background: green; color: white;\" ng-if=\"dataArrayTeacher.length > 0\"> รายชอ่ื อาจารย<์ /td> </tr> <tr ng-repeat=\"dataRow in dataArrayTeacher\"> <td> <img src=\"{{dataRow.picture}}\" alt=\"{{dataRow.employee_id}}\" height=\"42\" width=\"42\"> </td> <td>{{dataRow.employee_name}}</td> <td>{{dataRow.sunit_name}}</td> <td>{{dataRow.position_rank_name}}</td> </tr> <tr> <td colspan=\"4\" style=\"background: blue; color: white;\" ng-if=\"dataArrayStaff.length > 0\">รายชอ่ื เจา้ หนา้ ท<ี่ /td> </tr> <tr ng-repeat=\"dataRow in dataArrayStaff\"> <td> <img src=\"{{dataRow.picture}}\" alt=\"{{dataRow.employee_id}}\" height=\"42\" width=\"42\"> </td> <td>{{dataRow.employee_name}}</td> <td>{{dataRow.sunit_name}}</td> <td>{{dataRow.position_rank_name}}</td> </tr> </table> <script src=\"https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js\"></script>

29 <script> var app = angular.module(\"KPRU\", []); app.controller(\"mainController\", function($scope, $http) { var urlOrg = \"https://mis.kpru.ac.th/api/OrganizationList\"; $http.get(urlOrg).then(function(respond){ $scope.getOrg = respond.data; }); $scope.selectOrg = function(){ var url = \"https://mis.kpru.ac.th/api/EmployeeInOrgClassify/\" + $scope.orgModel; $http.get(url).then(function(respond){ $scope.dataArrayTeacher = respond.data.Teacher; $scope.dataArrayStaff = respond.data.Staff; }); } }); </script> </body> </html> จากภาพ จะเห็นว่าได้เพ่ิมในส่วนของ select tag ข้ึนมา เพ่ือใช้แสดงรายช่ือหน่วยงาน และจะ เห็นคาส่ังเพ่ิมเติมคือ ng-change คาส่ังนี้จะทางานเมื่อข้อมูลใน tag น้ันมีการเปลี่ยนแปลง เช่น เมื่อผู้ใช้ เปล่ียนหน่วยงาน 1 ครั้ง คาส่ังนี้จะถูกเรียกใช้งาน 1 คร้ัง ในส่วนของโค้ด AngularJS จะมีกระบวนการ ทางานคือ เม่ือเพจเร่ิมทางานจะทาการเรียกข้อมูลหน่วยงานจาก API มาแสดงใน select tag และเม่ือ ผู้ใช้งานเลอื กหน่วยงานแล้ว ng-change จะเรียกใช้ function selectOrg เพอื่ ใหเ้ รียกข้อมูลบคุ ลากรจาก API โดยใช้ค่า ID ท่ีผู้ใช้เลือกจาก select tag และนาไปแสดงในตาราง เมื่อทดลองเข้าเพจและเลือก หน่วยงาน จะแสดงผลดังภาพ

30 การเชื่อมต่อ API ในรูปแบบ POST การเชื่อมต่อ API ในรูปแบบ POST น้ันจะมีลักษณะการเช่ือมต่อท่ีคล้ายกับรูปแบบ GET แต่การ ส่งข้อมูลในรูปแบบ POST นั้นเหมาะกับการส่งข้อมูลจานวนหลายค่า หรือเป็นข้อมูลที่มีความสาคัญสูง โดยการส่งข้อมูลในรูปแบบ POST น้ันเป็นการรวมค่าท่ีต้องการส่งท้ังหมดให้อยู่ในรูปแบบ Array 1 ชุด แลว้ จงึ ทาการส่งไป ซง่ึ มรี ปู แบบการสง่ ขอ้ มลู ดังตวั อยา่ งโคด้ ดังภาพ <html ng-app=\"KPRU\"> <head> <meta charset=\"UTF-8\"> </head> <body ng-controller=\"mainController\"> <table border=\"1\" > <tr> <th>id</th> <th>ชอื่ -สกลุ </th> <th>ชอื่ สงั กดั </th> <th>จัดการ</th> </tr> <tr ng-repeat=\"dataRow in dataArray\"> <td>{{dataRow.id}}</td> <td>{{dataRow.name}}</td> <td>{{dataRow.org_name}}</td> <td><a href=\"\" ng-click=\"deleteData(dataRow)\">ลบ</a></td> </tr> </table> <form ng-submit=\"insertData()\"> <p><strong>เพมิ่ ขอ้ มลู </strong></p> <p>ชอื่ - สกลุ : <input type=\"text\" placeholder=\"กรณุ ากรอก ชอ่ื - สกลุ \" ng-model=\"dataForm.name\"></p> <p>หนว่ ยงาน : <select ng-model=\"dataForm.org_name\" > <option value=\"-\" hidden selected>--กรณุ าเลอื กหนว่ ยงาน--</option> <option ng-repeat=\"dataRow in getOrg\" value=\"{{dataRow.organization_name_tha}}\">{{dataRow.organization_name_tha}}</option> </select></p><button type=\"submit\">บนั ทกึ </button> </form> <script src=\"https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js\"></script> <script> var app = angular.module(\"KPRU\", []); app.controller(\"mainController\", function($scope, $http) { $scope.loadPage = function(){ var url = \"https://mua.kpru.ac.th/FrontEnd_MIS/testAPI/ShowAllData\"; $http.get(url).then(function(respond){ $scope.dataArray = respond.data; }); } $scope.insertData = function(){ var url = \"https://mua.kpru.ac.th/FrontEnd_MIS/testAPI/PostInsert\"; $http.post(url,$scope.dataForm).then(function(respond){ $scope.loadPage(); }); } $scope.deleteData = function(data) { var url = \"https://mua.kpru.ac.th/FrontEnd_MIS/testAPI/GetDelete/\" + data.id; $http.get(url).then(function(respond){ $scope.loadPage(); }); } var urlOrg = \"https://mis.kpru.ac.th/api/OrganizationList\"; $http.get(urlOrg).then(function(respond){ $scope.getOrg = respond.data; }); $scope.loadPage(); }); </script> </body> </html>

31 จากภาพ จะเห็นได้ว่าสามารถประยุกค์ใช้ API ได้หลากหลายรูปแบบในหน้าเพจเดียวกัน เช่น การเรียกแบบ GET โดยไม่ส่งค่าอะไรไป เรียกแบบ GET พร้อมแนบค่าไป และเรียกแบบ POST พร้อมส่ง ค่าไป หรือแม้แต่จะเรียกแบบ POST พร้อมส่งค่าไปและแนบค่า GET ตามท้าย URL ไปด้วยก็สามารถทา ได้เชน่ เดยี วกนั จากโค้ดข้างต้น จะเห็นในว่ามีคาส่ัง AngularJS เพ่ิมขึ้นมา คือ ng-click และ ng-submit จะ ทางานต่อเมื่อคลิกลิงค์ หรือคลิกปุ่ม Submit โดยในตัวอย่างจะให้เรียกฟังค์ช่ันท่ีเขียนไว้ และคาส่ังท่ีเพิ่ม ขึ้นมาสาหรับการเรียก API รูปแบบ POST คือ $http.post เป็นการเรียกใช้ API โดยการส่ง Method POST แล้วตามด้วย URL และค่า Array ทีต่ ้องการส่งไป เปน็ ตน้ เมื่อเปิดหนา้ เพจ จะแสดงดงั ภาพ