Here is an image about Laravel and Vue.js, two popular technologies for web development. Laravel is a PHP framework known for its ability to create web applications quickly and efficiently. Vue.js is a lightweight and flexible JavaScript framework for building interactive user interfaces. Together, they provide a powerful combination for developing modern web applications.
Laravel dan Vue.js adalah dua teknologi yang sering digunakan untuk pengembangan website dan aplikasi. Laravel adalah sebuah framework PHP yang populer karena kemampuannya dalam membuat aplikasi web dengan cepat dan efisien. Sedangkan Vue.js adalah sebuah framework JavaScript yang ringan dan fleksibel untuk pengembangan antarmuka pengguna (user interface) yang lebih interaktif. Dalam tutorial ini, kita akan belajar cara membuat CRUD (Create, Read, Update, Delete) menggunakan Laravel 8 dan Vue.js.
Persiapan
Sebelum memulai pembuatan CRUD, pastikan bahwa Anda sudah mempersiapkan beberapa hal berikut:
- Composer, sebuah package manager untuk bahasa pemrograman PHP. Anda bisa mengunduh Composer di https://getcomposer.org/download/.
- Laravel 8, sebuah framework PHP untuk pengembangan aplikasi web. Laravel memerlukan PHP versi 7.3 atau yang lebih baru. Anda bisa mengikuti panduan instalasi Laravel di https://laravel.com/docs/8.x#installation.
- Node.js, sebuah runtime environment untuk menjalankan JavaScript di sisi server. Anda bisa mengunduh Node.js di https://nodejs.org/en/download/.
- Vue.js, sebuah framework JavaScript untuk pengembangan antarmuka pengguna. Anda bisa memasang Vue.js di proyek Laravel dengan menggunakan NPM (Node Package Manager). Untuk memasang Vue.js, jalankan perintah berikut di terminal:
|
1 2 3 |
npm install vue |
Pembuatan Proyek Laravel
Setelah persiapan selesai, kita bisa mulai membuat proyek Laravel dengan menggunakan CLI (Command Line Interface) dengan menjalankan perintah berikut di terminal:
|
1 2 3 |
laravel new nama_proyek |
Setelah proses pembuatan proyek selesai, masuk ke direktori proyek dengan menjalankan perintah berikut:
|
1 2 3 |
cd nama_proyek |
Konfigurasi Database
Sebelum membuat tabel untuk CRUD, pertama-tama kita harus mengonfigurasi database. Buka file .env dan sesuaikan pengaturan database dengan informasi Anda seperti berikut:
|
1 2 3 4 5 6 7 8 |
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=nama_database DB_USERNAME=username_database DB_PASSWORD=password_database |
Pastikan bahwa database yang Anda gunakan sudah terbuat dan sesuai dengan informasi pengaturan di atas.
Setelah selesai mengatur database, kita bisa membuat tabel untuk CRUD.
Migration dan Model
Pertama-tama, kita perlu membuat sebuah migration untuk membuat tabel di database. Jalankan perintah berikut di terminal:
|
1 2 3 |
php artisan make:migration create_data_table --create=data |
Perintah di atas akan membuat sebuah file migration di folder database/migrations. Buka file migration tersebut dan sesuaikan dengan skema tabel yang akan Anda buat. Contohnya seperti berikut:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
public function up() { Schema::create('data', function (Blueprint $table) { $table->id(); $table->string('nama'); $table->string('alamat'); $table->string('telepon'); $table->timestamps(); }); } |
Setelah skema tabel selesai diatur, jalankan perintah berikut untuk menjalankan migration dan membuat tabel di database:
|
1 2 3 |
php artisan migrate |
Setelah tabel berhasil dibuat, selanjutnya kita perlu membuat sebuah model untuk tabel tersebut. Jalankan perintah berikut di terminal:
|
1 2 3 |
php artisan make:model Data |
Model ini akan membantu kita dalam mengakses data di tabel dan melakukan operasi CRUD. Jangan lupa juga untuk mengatur relasi dengan model lain jika dibutuhkan.
Membuat API Laravel
Selanjutnya, kita akan membuat API (Application Programming Interface) untuk mengakses data CRUD ke database. Buat sebuah controller baru dengan menjalankan perintah berikut di terminal:
|
1 2 3 |
php artisan make:controller ApiController |
Buka file ApiController yang baru dibuat dan tambahkan metode-metode untuk mengakses data CRUD. Contohnya seperti berikut:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
public function index() { $data = Data::orderBy('created_at', 'DESC')->get(); return response()->json([ 'message' => 'Data fetched successfully', 'data' => $data ], 200); } public function store(Request $request) { $validatedData = $request->validate([ 'nama' => 'required', 'alamat' => 'required', 'telepon' => 'required' ]); $data = Data::create([ 'nama' => $validatedData['nama'], 'alamat' => $validatedData['alamat'], 'telepon' => $validatedData['telepon'] ]); return response()->json([ 'message' => 'Data created successfully', 'data' => $data ], 201); } public function show(Data $data) { return response()->json([ 'message' => 'Data fetched successfully', 'data' => $data ], 200); } public function update(Request $request, Data $data) { $validatedData = $request->validate([ 'nama' => 'required', 'alamat' => 'required', 'telepon' => 'required' ]); $data->nama = $request->input('nama'); $data->alamat = $request->input('alamat'); $data->telepon = $request->input('telepon'); $data->save(); return response()->json([ 'message' => 'Data updated successfully', 'data' => $data ], 200); } public function destroy(Data $data) { $data->delete(); return response()->json([ 'message' => 'Data deleted successfully' ], 200); } |
Metode-metode di atas masing-masing berfungsi untuk:
- Melihat daftar data, dengan metode
index. - Menambahkan data baru, dengan metode
store. - Melihat detail data, dengan metode
show. - Mengubah data, dengan metode
update. - Menghapus data, dengan metode
destroy.
Membuat API Route
Setelah metode-metode API selesai diatur, selanjutnya kita bisa membuat route untuk mengakses API tersebut. Buka file routes/api.php dan tambahkan rute sebagai berikut:
|
1 2 3 4 5 6 7 |
Route::get('data', 'App\Http\Controllers\ApiController@index'); Route::post('data', 'App\Http\Controllers\ApiController@store'); Route::get('data/{data}', 'App\Http\Controllers\ApiController@show'); Route::put('data/{data}', 'App\Http\Controllers\ApiController@update'); Route::delete('data/{data}', 'App\Http\Controllers\ApiController@destroy'); |
Menyiapkan Vue.js
Selanjutnya, kita akan menyiapkan Vue.js untuk pengembangan antarmuka pengguna. Buka file app.blade.php di folder resources/views/layouts/ dan tambahkan baris berikut di dalam tag head:
|
1 2 3 |
<meta name="csrf-token" content="{{ csrf_token() }}"> |
Kemudian, tambahkan tag script untuk memuat Vue.js dan dependensi yang dibutuhkan seperti berikut:
|
1 2 3 4 5 6 7 8 9 |
<body> <div id="app"> @yield('content') </div> <script src="{{ mix('js/app.js') }}"></script> </body> |
Membuat Komponen Vue.js
Selanjutnya, kita akan membuat komponen Vue.js untuk menampilkan data CRUD di antarmuka pengguna. Buat sebuah komponen baru dengan menjalankan perintah berikut di terminal:
|
1 2 3 |
php artisan make:component Data |
Komponen ini akan diatur di file resources/js/components/Data.vue, buka file tersebut dan sesuaikan dengan kode berikut:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 |
<template> <div class="container mt-5"> <div class="card"> <div class="card-header"> Data </div> <div class="card-body"> <table class="table"> <thead> <tr> <th>Nama</th> <th>Alamat</th> <th>Telepon</th> <th>Aksi</th> </tr> </thead> <tbody> <tr v-for="(item, index) in data" :key="item.id"> <td>{{ item.nama }}</td> <td>{{ item.alamat }}</td> <td>{{ item.telepon }}</td> <td> <button class="btn btn-sm btn-primary mr-2" @click="editData(item)"> Edit </button> <button class="btn btn-sm btn-danger" @click="deleteData(item)"> Delete </button> </td> </tr> </tbody> </table> <button class="btn btn-success" @click="showModal = true"> Tambah Data </button> </div> </div> <div class="modal" :class="{ 'd-block': showModal }"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title"> {{ formTitle }} </h5> <button type="button" class="close" @click="showModal = false"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <form> <div class="form-group"> <label>Nama:</label> <input type="text" class="form-control" v-model="formData.nama"> </div> <div class="form-group"> <label>Alamat:</label> <input type="text" class="form-control" v-model="formData.alamat"> </div> <div class="form-group"> <label>Telepon:</label> <input type="text" class="form-control" v-model="formData.telepon"> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" @click="showModal = false"> Close </button> <button v-if="!isEdit" type="button" class="btn btn-primary" @click="addData"> Save </button> <button v-if="isEdit" type="button" class="btn btn-primary" @click="updateData"> Update </button> </div> </div> </div> </div> </div> </template> <script> export default { data() { return { data: [], formData: { nama: '', alamat: '', telepon: '' }, showModal: false, formTitle: '', isEdit: false, editId: null } }, methods: { fetchData() { axios.get('/api/data') .then((response) => { this.data = response.data.data; }) .catch((error) => { console.log(error); }); }, addData() { axios.post('/api/data', this.formData) .then((response) => { this.formData.nama = ''; this.formData.alamat = ''; this.formData.telepon = ''; this.fetchData(); this.showModal = false; }) .catch((error) => { console.log(error); }); }, editData(item) { this.isEdit = true; this.formTitle = 'Edit Data'; this.formData.nama = item.nama; this.formData.alamat = item.alamat; this.formData.telepon = item.telepon; this.editId = item.id; this.showModal = true; }, updateData() { axios.put('/api/data/' + this.editId, this.formData) .then((response) => { this.formData.nama = ''; this.formData.alamat = ''; this.formData.telepon = ''; this.fetchData(); this.showModal = false; this.isEdit = false; }) .catch((error) => { console.log(error); }); }, deleteData(item) { axios.delete('/api/data/' + item.id) .then((response) => { this.fetchData(); }) .catch((error) => { console.log(error); }); } }, mounted() { this.fetchData(); } } </script> |
Komponen di atas akan menampilkan tabel data CRUD serta form untuk menambahkan atau mengubah data CRUD. Terdapat beberapa metode pada komponen Data, yaitu:
fetchData(): Membuat sebuah permintaan AJAX untuk mengambil daftar data dari server.addData(): Membuat sebuah permintaan AJAX untuk menambahkan data baru ke server.editData(item): Menampilkan form untuk mengubah data yang dipilih.updateData(): Membuat sebuah permintaan AJAX untuk mengubah data di server.deleteData(item): Membuat sebuah permintaan AJAX untuk menghapus data dari server.
Mendaftarkan Komponen Vue.js
Setelah komponen selesai dibuat, selanjutnya kita bisa mendaftarkan komponen tersebut di aplikasi. Buka file app.js dan tambahkan kode berikut:
|
1 2 3 4 5 6 7 8 9 10 |
import Data from './components/Data.vue'; const app = new Vue({ el: '#app', components: { Data } }); |
Kode di atas akan mendaftarkan komponen Data ke aplikasi Vue.js.
Menjalankan Aplikasi
Setelah semua selesai diatur, jalankan aplikasi dengan menjalankan perintah berikut di terminal:
|
1 2 3 |
npm install && npm run dev |
Setelah instalasi selesai, jalankan server Laravel dengan perintah berikut:
|
1 2 3 |
php artisan serve |
Anda bisa mengakses aplikasi di http://localhost:8000/.
Kesimpulan
Dalam tutorial ini, kita telah belajar cara membuat aplikasi CRUD menggunakan Laravel 8 dan Vue.js. Dengan memadukan teknologi PHP dan JavaScript, kita dapat membuat aplikasi web yang efisien dan interaktif. Semoga tutorial ini bermanfaat bagi Anda untuk belajar pengembangan web menggunakan teknologi terkini.
