Halo teman-teman semuanya, pada kesempatan kali ini kita semua akan belajar bersama-sama bagaimana cara membuat CRUD menggunakan Laravel 8 dan Vue js 3. Dan kita juga akan menerapkan Composition API di dalam Vue Js. Jadi Laravel akan kita gunakan sebagai Backend yang menyediakan RESTful API dan Vue Js yang akan mengelola data-nya, seperti menampilkan, input, edit, update dan delete.
Di artikel pertama ini, kita semua akan belajar bagaimana cara menginstall Laravel 8 menggunakan composer. Oleh sebab itu, sebelum teman-teman memulai tutorial ini, pastikan teman-teman sudah menginstall Composer di dalam komputer. Untuk installasi Composer sangat mudah sekali, kita hanya perlu mengikuti langkah demi langkah yang sudah di sediakan di dalam dokumentasi resminya.
Untuk memastikan, apakah komputer kita sudah berhasil menginstall Composer, kita bisa jalanakn perintah di bawah ini di dalam terminal/CMD :
composer
Jika berhasil, maka akan keluar kurang lebih seperti ini :
Langkah 1 - Membuat Project Laravel Baru
Setelah kita berhasil menginstall Composer di dalam komputer, maka sekarang kita sudah bisa membuat project Laravel baru dengan Composer. Dari dokumentasi resmi Laravel menyatakan, jika ingin menggunakan Laravel 8, maka minimal versi PHP yang digunakan adalah 7.3.
Silahkan masuk ke folder dimana teman-teman akan membuat project, kemudian jalankan perintah berikut ini :
composer create-project --prefer-dist laravel/laravel:^8.0 backend-api
Perintah di atas digunakan untuk membuat project Laravel baru dengan versi 8. Dan untuk nama project yang akan kita buat adalah backend-api.
Langkah 2 - Menjalankan Project Laravel
Setelah proses installasi selesai, sekarang kita akan mencoba menjalankan project Laravel tersebut. SIlahkan jalankan perintah di bawah ini di dalam terminal/CMD :
cd backend-api
php artisan serve
Jika berhasil, maka project Laravel kita akan di jalankan di port 8000. Kita bisa melihatnya di http://localhost:8000 dan kurang lebih hasilnya seperti berikut ini :
Langkah 3 - Koneksi Database
Sekarang, kita lanjutkan untuk melakukan konfigurasi koneksi database. SIlahkan buka file .env kemudian cari kode berikut ini :
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=
Kemudian, silahkan ubah menjadi seperti berikut ini :
DB_DATABASE=db_laravel_api
DB_USERNAME=root
DB_PASSWORD=
Di atas, kita setting untuk nama database yang akan kita gunakan adalah db_laravel_api dan untuk password silahkan disesuikan dengan konfigurasi MySQL masing-masing.
Sekarang, kita lanjutkan untuk membuat database di atas di dalam PhpmyAdmin, silahkan buka http://localhost/phpmyadmin dan silahkan buat database baru dengan nama db_laravel_api. Kurang lebih seperti berikut ini :
Langkah 4 - Membuat Model dan Migration
Setelah kita berhasil mengatur koneksi dan membuat database baru, maka sekarang kita lanjutkan untuk membuat model dan juga migration.
SIlahkan jalankan perintah di bawah ini di dalam terminal/CMD dan pastikan menjalankannya di dalam project Laravel.
php artisan make:model Post -m
Perintah di atas, digunakan untuk membuat sebuah model dengan nama Post beserta file migration, karena kita menambahkan flag -m yang artinya akan dibuatkan migration juga.
Sekarang, kita akan menambahkan beberapa field di dalam migration. Silahkan teman-teman buka file database/migrations/2020_11_07_001842_create_posts_table.php, nama depan dari file migration akan random sesuai tanggal pembuatannya. Kemudian pada function up silahkan ubah menjadi seperti berikut ini :
Schema::create('posts', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->text('content');
$table->timestamps();
});
Di atas, kita menambahkan 2 field baru, yaitu title dan content. Untuk title kita gunakan tipe data string dan untuk content kita gunakan tipe data text.
Selanjutnya, kita akan menambahkan mass assigment di dalam model Post, ini digunakan agar kita dapat melakukan manipulasi data ke dalam database.
Silahkan buka file app/Models/Post.php kemudian ubah kode-nya menjadi seperti berikut ini :
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Post extends Model
{
use HasFactory;
/**
* filllable
*
* @var array
*/
protected $fillable = [
'title', 'content'
];
}
Di atas, kita tambahkan sebuah protected properti dengan nama $fillable, ini digunakan untuk mass assigment di dalam model Post, jadi memungkinkan field yang di tambahkan di dalam properti tersebut dapat melakukan manipulasi data, seperti input, edit, update dan delete.
langkah 5 - Menjalankan Migration
Setelah kita berhasil menambahkan field di dalam migration, sekarang kita lanjutkan untuk menjalankan migration untuk melakukan generate table dari file migration yang sudah kita buat di atas.
Silahkan jalankan perintah di bawah ini di dalam terimal/CMD dan pastikan berada di dalam project Laravel.
php artisan migrate
Jika berhasil, maka kita akan mendapatkan table-table baru di dalam database, kurang lebih seperti berikut ini :
Di artikel selanjutnya, kita akan belajar bersama-sama bagaimana cara membuat RESTful API di dalam Laravel 8, mulai dari proses menampilkan data dampai delete data.
Terima Kasih
EBOOK - Membangun Website Sekolah Degan Laravel dan Vue Js : https://santrikoding.com/ebook/laravel-vue
EBOOK - Membangun Toko Online dengan Laravel dan Livewire : https://santrikoding.com/ebook/toko-online-laravel-livewire