ทำ restful api ในภาษา Lumen แบบเจ็มจนกัน
จากบทความที่แล้วเราสอนภาษา Lumen เบื่องต้นกันไปแล้วถ้าใครยังไม่ได้อ่านตาม link ข้างใต้เลย
เพราะบทความนี้จะถูกต่อยอดจากบทความข้างบน ถ้าใครยังไม่ได้อ่าน รีบกลับไปอ่านโดยด่วนเลย
และวันนี้เราจะมาพูดถึงการทำ api ให้คนอื่นนำไปใช้นะครับ สำหรับความหมาย api ผมจะขอไม่อธิบายใน blog นี้เนาะ เดียวจะเปิด วาร์ปให้เพื่อนๆไปอ่านต่อกันนะ 👇🏼👇🏼
เริ่มติดตั้ง lumen
composer create-project --prefer-dist laravel/lumen Lumen_apiเพื่อที่จะทำการเริ่มสร้าง Api เชื่อมกับ ฐานข้อมูลเราจะ mockup Api ไว้ก่อน
ระหว่างนี้จิบชา หรือ กาแฟ รอได้เลยเพราะจะใช้เวลาประมาณนึงได้ 🍵 ☕️🍵 ☕️
เริ่มสร้าง Controller เพื่อ mock up API
มาเริ่มสร้าง file กันเลยที่ app/Http/Controller แล้วจะสร้าง file ชื่อว่า UserController.php ขึ้นมานะครับ
และจากนั้นเราก็จะไปสร้าง route เพื่อดึง controller ตัวนี้ไปใช้กันครับโดยไปที่ routes/web.php
มาลอง postman กันถ้า เหมือนกันแปลว่าถูกต้อง 😳😳😳
สร้างฐานข้อมูลเพื่อไปดึงข้อมูลมาแสดง
มาเริ่มสร้างฐานข้อมูลกัน ผมจะใช้ phpmyadmin นะครับ เข้าไปที่ http://localhost/phpmyadmin จะเห็นหน้าตา แบบนี้ขึ้นมา
จากนั้นทำการกด New แล้วเราจะทำการกรอกข้อมูลฐานข้อมูลที่เราต้องการสร้างเข้าไป ผมจะใช้ชื่อ Lumen_api แล้วก็เลือก utf8_general_ci เพื่อให้รองรับภาษาไทย แล้วก็ create ด้เลย
แล้วเราจะกดเข้าฐานข้อมูลที่เราสร้าง Lumen_api แล้วไปสร้าง table ชื่อว่า user แล้วก็ สร้าง columns 4 กด Go เลย
จากนั้นเราจะมาสร้าง field แต่ละตัวกัน
id int สำคัญมากติ้กที่ A_I ด้วยเพื่อให้เป็น Primary และ Auto run id
name varchar 100 : เราจะเก็บชื่อเป็นตัวอักษร จำนวนไม่เกิน 100
age int : เราจะสร้าง age เป็น int
tel varchar 30 : เก็บข้อมูล เบอร์โทรศัพท์ เป็นอักษรไม่เกิน 30 นี้เก็บเกินไว้เพื่อ 😯
Save
จากนั้นเราจะ การเพิ่มข้อมูลกันก่อนไปที่เมนู insert แล้วทำการเพิ่มข้อมูลลงไป เราจะไม่เพิ่มตรง id นะครับ เพราะเราตั้งมันเป็น auto ตรงที่ A_I อยู่แล้ว จากนั้นกด Go
จากนั้นกดไปที่เมนู Browse ว่าขึ้นเหมือนกันไหม ถ้าขึ้นเหมือนกัน ก็ very good ไปเลย ถือว่าเสร็จสิ้นภารกิจการเตรียมฐานข้อมูล
กลับมาเตรียม code เพื่อเชื่อมต่อฐานข้อมูล
ถ้าใช้ Lumen ตอน install จะเห็นได้ว่ามี file ที่มีชื่อว่า .env เพื่อใช้ setting ข้อมูลที่เราต้องการเชื่อมต่อกับฐานข้อมูล ซึ่งสิ่งที่เราต้องเปลี่ยนแปลงข้อมูลใน file .env หลักก็คือ
DB_DATABASE : ชื่อของ Database เราจะใช้ชื่อที่เราสร้างเมื่อกี Lumen_api
DB_USERNAME : เป็น username ที่ใช้เชื่อมฐานข้อมูลของ xampp root
DB_PASSWORD : password ของ xampp ส่วนมากจะเป็นค่า ว่าง
เรียบร้อยเสร็จสิ้นการเชื่อมต่อข้อมูล
Config ฐานข้อมูลใน Lumen
เมื่อเราเชื่อมต่อข้อมูลเรียบร้อยแล้วสิ่งที่แนะนำให้เรา config database ด้วยนี้แค่แนะนำนะ หรือบ่างเครื่องจะข้ามขึ้นตอนนนี้ได้เลยแต่เครื่องผมมันบังคับให้ทำ เศร้าจริง เราจะไปทำการสร้าง file database.php ใน config/database.php
เปิด withFacades กับ withEloquent ก่อนอย่าลืม
สิ่งที่จะลืมไม่ได้เราต้องเข้าไป comment ใน bootstrap/app.php โดยที่เราจะเปิด comment 2 ตัวคือ หากันเองเดอ
$app->withFacades();$app->withEloquent();
ไปสร้าง Model เพื่อที่จะใช้เรียก database
จะทำการไปสร้าง file ที่มีชื่อว่า User.php ใน app/User.php จากนั้นเอา code นี้ไปแปะได้เลย
ซึ่งสิ่งที่เราต้องรู้จะมี 4 ตัวแปล ก็คือ $table เป็นตัวแปลที่เก็บชื่อ table ที่เป็นของ Model นี้ $fillable เป็นข้อมูล field ที่ต้องการให้แสดงออกมาใช้ใน API ได้ $hidden เป็น field ที่เราจะทำการซ่อนไม่ให้แสดงออกทาง API และ ตัวแปลสุดท้าย $timestamps ประกาศเป็น false คือจะไม่ใช้ timestamps ใน table นี้เพราะถ้าไม่ประกาศ Api ต้องดึงข้อมูล timestamps มาใช้งานด้วย
ไปทำการทำ GetAll โดยดึงข้อมูลจากฐานข้อมูลกันเลย 😃 😃 😃
โดยเราจะกลับไปแก้ไข function getAll() ใน app/Http/Controller/UserController.php โดย code จะได้ประมาณนี้
โดยจะทำการ add Model ที่เราได้สร้างเมื่อกี่มาก่อนก็คือ use App\User และจากนั้นเราจะมาประกาศดึงข้อมูลจาก ฐานข้อมูลกัน ใน function getAll() ศึกจะไม่ได้ใช้ภาษา Sql นะครับ ใครอยากไปศึกษาเพิ่มเติ่มไปที่นี้ได้เลย
จากนั้นไปที่ postman ของเรากัน
ถ้าออกเหมือนกันแปลว่าทำถูกต้องแล้วจ้า แต่ถ้าใคร error ก็ลองสอบถามมาหรือว่าท่านทำตกหล่นขั้นตอนไหนหรือปล่าวลองตรวจสอบกันดีดี
ดึงข้อมูลมาแค่ เฉพาะแต่ละคนโดยใช้ getID()
สิ่งสำคัญที่เราต้องทำคือไปแก้ไข code ใน function getID() เพื่อให้มันดึงข้อมูลจากฐานข้อมูลได้ โดยผมจะทำการแก้ไข
public function getID($id){ $data = User::where(‘id’, $id)->first();
return $this->responseSuccess($data);}
เสร็จเรียบเราก็ไปทำการ test ที่ program postman ได้เลย
ถ้าทำถูกต้องจะขึ้นแบบนี้ จะเห็นได้ว่าเรากรอก path id ใน link เป็น 1 แล้ว ข้อมูลที่แสดงเป็น 1 เพียงแค่ข้อมูลเดียวแปลว่าเราทำถูกต้องเรียบร้อย
เพิ่มข้อมูลลงฐานข้อมูล โดยใช้ Function addData()
โดยการเพิ่มข้อมูลนั้นเราจะทำการเพิ่มโดย Request ข้อมูลผ่าน postman มาใช้ ข้างใน code ของเรา โดยเราต้องประกาศให้ code เราสามารถใช้ Request ให้ได้โดยประกาศ use Illuminate\Http\Request; เสร็จสิ้นก็ไปทำการแก้ไข function addData กันเลย
จะทำการแก้ไข function addData ใหม่โดยการให้มันสามารถรับ request ได้ โดยจะประกาศข้างในเลย addData(Request $request) จากนั้นก็เรียก class User มาเพื่อเพิ่ม โดยจะทำการเพิ่มข้อมูล 3 ค่าก็คือ
$data->name = $request->name;$data->age = $request->age;$data->tel = $request->tel;
$data->name ทำการรับ $request ที่มีชื่อว่า name ที่ส่งมา
$data->age ทำการรับ $request ที่มีชื่อว่า age ที่ส่งมา
$data->tel ทำการรับ $request ที่มีชื่อว่า tel ที่ส่งมา
step สุดท้าย ก็คือ $data->save() จะใช้เป็นเงื่อนไขใน if(){} ไว้ถ้า save ถูกต้องจะให้มันทำการ return ค่าออกมานั้นเอง ไป test postman กันว่าใช้งานได้หรือไม่
เราต้อง method route เราเป็น post เราก็ต้องส่งข้อมูลไปเป็น post ด้วยนะ แล้วก็เอา link มาใส่เหมือนเดิมแต่สำคัญมากเราต้องใส่ข้อมูลที่จะต้องการส่งไปด้วย โดยเข้า เมนู BODY ผมจะส่งแบบ raw แล้วไปตั้งค่า type เป็น JSON(application/json) และก็ตาม format ที่ผมทำไว้เลย
{
“name”:”Earth”,
“age”:24,
“tel”:”0884328473"
}ส่งแล้วไปดูค่าค้างล่างจะแสดงข้อมูล success แปลว่าข้อมูลเราส่งเรียบร้อย Very good 👍 👍 👍 👍
แก้ไขข้อมูลเมื่อประกาศผิด โดยใช้ updateData()
ใน function นี้จะเป็นการผสมผสานระหว่าง add ข้อมูล และ getID มารวมกันเพราะเรารู้ว่า เวลาเราแก้ไขเราต้องส่งข้อมูลไปแก้ไขด้วยใช้ไหม แต่สำคัญอีกอย่างก็ต้องมีดัชนีชี้ไปว่าเราจะไปแก้ไขข้อมูลตัวไหนด้วย ก็เลยจะเอา 2 function นี้มาประยุกต์รวมกันเป็น
public function updateData(Request $request, $id){ $data = User::where(‘id’, $id)->first();
$data->name = $request->name;
$data->age = $request->age;
$data->tel = $request->tel;
if ($data->save()) {
return $this->responseSuccess($data);
}}
เรียบร้อยเราก็ไป test ด้วย program postman เหมือนเดิม
เราจะทำการเปลี่ยน method ที่ต้องการส่งไป เป็น put และ link ที่เราได้ประกาศ route เหมือนเดิม จากนั้นเราก็เพิ่มเมนู body ให้เหมือน add แล้วกด sent ดูครับ ถ้าขึ้น success แปลว่าทำถูกลองไป check ใน getAll ดู
จะเห็นว่า getAll เราจะมีข้อมูลเพิ่มมา 1 ข้อมูลที่ตอนเราเพิ่มไปเมื่อกี้ และ ข้อมูลของ id 1 เราได้เปลียนจาก sutthipong เป็น Mos เรียบร้อย 👍 👍 👍 👍👍 👍 👍 👍👍
function สุดท้ายและท้ายสุด คือ deleteData()
function นี้เราจะทำคล้ายกับ getID เลยแต่เพียงแค่ข้อมูลที่เรียกฐานข้อมูลจะไม่เหมือนกัน เพราะ delete ที่เราจะใช้นี้จะไปทำการ ลบข้อมูลจากฐานข้อมูลออกนั้นเองโดย code จาก function deleteData ของเราจะได้ประมาณนี้เลย
public function deleteData($id){ $data = User::where(‘id’, $id)->delete();
return $this->responseSuccess($data);}
step ต่อไป test postman. เหมือนเช่นเคย
เราก็ทำการเปลี่ยน method ในการส่งเป็น delete และก็เปลี่ยน path url เป็น deleteData/ { id ที่เราจะลบ } กด sent ไปเลยถ้าขึ้น success ลองกลับไปที่ getAll ของเราดู
จะเห็นได้ว่า id 2 ที่เราสร้างมันขึ้นมาหายไปไหนแล้ว เพราะเราลบมันออกไปแล้วนั้นเอง เรียบร้อยกับการทำ API
ของแถม
api ของเราจะไม่สามารถเอาไปใช้ได้เลยถ้าเราไม่เปิด Allow origin และ method ซึ่งถ้าใครเขียน backend ต้องรู้ดีว่าต้องเปิดก่อน frontend ถึงจะไปดึงได้นะจ๊ะ
เราจะไปทำการสร้าง file ที่มี ผู้ว่า (เห้ย ชื่อว่า) CorsMiddleware.php ใน folder app/Http/Middleware แล้วก็จัด code ชุดนี้ไปเลยท่านๆ
มา อธิบาย code กันพอหอมปากหอมคอ ก็คือ ผมจะทำการ ตรวจสอบ method ที่เป็น options ก่อน ว่ามีไหม ถ้ามี ให้ reponse เป็น status 200 แต่ถ้าไม่เป็น ให้ทำงานต่อไป และก็มาเปิด header สำคัญๆ ทั้งหมดที่เราควรจะมีมาใส่ไว้ จากนั้น save
แล้วก็ไปเรียกใช้ที่ bootstrap/app.php จะไปทำการ เปิด middleware ที่ comment ไว้แล้วเอา class เราไปใส่ หรือจะเอา code ของผมไปทับ middleware เดิมก็ได้
$app->middleware([
App\Http\Middleware\CorsMiddleware::class,
]);กด save ก็เสร็จสิ้นภารกิจการทำ resful api เรียบร้อย ยะฮู้ๆๆๆ ที่เหลือก็อาศัยการเรียนรู้ของกันต่อ
ขอให้ทุกท่านสนุกกับการเรียนรู้และเขียน code ให้คีย์บอร์ดพัง ^_^
