Cara Membuat Aplikasi TodoList Vue JS Part 8

Halo teman teman kita kembali lagi didalam artikel tentang membuat Todo dengan Vue JS. Pada bagian sebelumnya kita sudah siapkan database dan siapkan library yang akan kita gunakan. Tentu tugas kita berikutnya adalah menyiapkan API atau bagian servernya yang mana kita akan buatkan file yang terpisah yakni kita buatkan sebuah folder khusus. Nama foldernya adalah resource lalu nama filenya yaitu server.php tentu file tersebut akan digunakan untuk melakukan request-request tertentu dan sekarang kita akan lakukan beberapa langkah untuk sistem PHPnya. Yang pertama kita akan memberi tahu jika Content Typenya nanti akan mengembalikan sebagai format JSON atau Application/JSON

Cara-Membuat-Aplikasi-TodoList-Vue-JS-Part-8-29-08-2017-1

Lalu kita juga akan melakukan koneksi kedatabase dengan Object Mysqli. Seperti biasa kita perlu nama servernya yaitu localhost, username dan password dan terakhir nama database yang kita gunakan.

Cara-Membuat-Aplikasi-TodoList-Vue-JS-Part-8-29-08-2017-2

Setelah itu untuk mendapatkan request methodnya kita bisa gunakan variabel global $_SERVER lalu nama keynya adalah REQUEST_METHOD. Jadi $_SERVER adalah global Array dimana dengan cara ini kita akan melihat apakah request yang kita masuk adalah POST, GET, PUT/PATH atau DELETEnya karena setiap request yang masuk kita akan melakukan fungsi yang berbeda tentu kita simpan didalam variabel $request

Cara-Membuat-Aplikasi-TodoList-Vue-JS-Part-8-29-08-2017-3

dan nanti kita akan mengecek variabel $requestnya dengan swicth case atau menggunakan if else juga boleh. Artinya kita akan mengecek apakah $request yang masuk menggunakan GET. Jika requestnya GET maka kita akan melakukan sesuatu yaitu melakukan request ke database untuk menampilkan atau mengambil data

Cara-Membuat-Aplikasi-TodoList-Vue-JS-Part-8-29-08-2017-4

Lalu bila $requestnya POST yang akan kita lakukan adalah menyimpan data dan kemungkinan yang lainnya apakah $requestnya adalah DELETE untuk menghapus todosnya dan terakhir yakni $request method PATCH untuk mengubahnya. Untuk yang pertama kita akan mengisi data untuk tablenya terlebih dahulu dan setelah kita isi datanya kita akan mengambil data data tersebut dari database untuk kita tampilkan kehalaman webnya yaitu dengan melakukan metode query biasa yang disambung dengan variabel koneksinya yaitu $db sebagai berikut

Cara-Membuat-Aplikasi-TodoList-Vue-JS-Part-8-29-08-2017-5

Lalu result data dari querynya kita akan masukkan ke dalam array dengan metode fetch_object. Pastikan kita looping agar mendapatkan semua datanya. Nah fetch_object ini akan memberikan hasil array dalam bentuk object.

Cara-Membuat-Aplikasi-TodoList-Vue-JS-Part-8-29-08-2017-6

dan pada akhirnya hasil datanya kita akan tampilkan dalam bentuk JSON menggunakan metode json_encode lalu variabel arraynya seperti ini

Cara-Membuat-Aplikasi-TodoList-Vue-JS-Part-8-29-08-2017-7

Oke sejauh ini kita sudah melakukan tugas pertama yaitu menampilkan data dari server lalu kita akan kembalikan datanya dalam bentuk JSON. Terima kasih

28 Agustus 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat