Versi Laravel yang saya gunakan untuk tutorial ini adalah versi 5.8 dan untuk VueJS nya versi 2, dan untuk databasenya menggunakan MySQL.
Langsung saja bagaimana caranya, berikut langkah-langkah dalam pembuatannya:
Download & Konfigurasi
Kita awali dengan mendownload project dan melakukan konfigurasi seperti melakukan pengaturan untuk menghubungkan project dengan database serta menginstall depedensi yang diperlukan.
Download Laravel
Untuk mendownload laravel ada beberapa cara yang bisa digunakan, karena saya menggunakan laravel versi 5.8 maka bisa menggunakan perintah dibawah ini.
composer create-project --prefer-dist laravel/laravel blog "5.8.*"
Silahkan gunakan perintah diatas apabila ingin menggunakan versi yang sama. Namun tidak harus apabila di kemudian hari versi laravel telah berubah dengan versi yang baru dan ingin menggunakan dengan versi tersebut (versi terbaru) bisa saja.
Buka situs https://laravel.com/ untuk melihat cara instalasi lainnya.
Membuat database
Silahkan membuat database mysql baru dengan nama bebas. Sebagai contoh saya membuat database dengan nama db_howto.
Setelah database dibuat, kita buka file .env dan atur seperti dibawah ini untuk dihubungkan dengan project.
//.env DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=db_howto DB_USERNAME=root DB_PASSWORD=
Sampai disini project sudah terhubung dengan database.
Membuat Table
Kita lanjutkan dengan membuat table pada database.
Kita membuatnya dengan melakukan migrasi. Silahkan jalankan perintah dibawah ini pada terminal/cmd.
php artisan make:model Note -m
Kemudian buka file migrasinya pada direktori database/migrations dan buat seperti dibawah ini.
public function up()
{
Schema::create('notes', function (Blueprint $table) {
$table->bigIncrements('id');
$table->integer('user_id')->unsigned();
$table->string('title');
$table->text('body');
$table->timestamps();
});
}
Kita membuat table dengan nama notes dengan beberapa field, yaitu id, user_id, title, body, dan keterangan waktu.
Kemudian kita akan lakukan migrate. Namun sebelum itu kita buka dulu file AppServiceProvider.php untuk mengatur Schema.
//AppServiceProvider.php
<?php
namespace App\Providers;
use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Facades\Schema;
class AppServiceProvider extends ServiceProvider
{
/**
* Register any application services.
*
* @return void
*/
public function register()
{
//
}
/**
* Bootstrap any application services.
*
* @return void
*/
public function boot()
{
Schema::defaultStringLength(191);
}
}
Setelah schema diatur, kita buka command line dan jalankan perintah berikut:
php artisan migrate
Jika tidak ada kesalahan akan terbuat seperti gambar dibawah ini pada databse.
Setelah database dibuat dan telah melakukan migrate untuk membuat table, selanjutnya mari kita jalankan perintah dibawah ini dan coba untuk melakukan pendaftaran user.
//membuat authentikasi php artisan make:auth
//menjalankan aplikasi php artisan serve
Buka menu register dan silahkan lakukan registrasi.
//css body
body{
background-color: #2d343c;
}
Jika tidak ada kesalahan data akan tersimpan pada table users.
Intall NPM
Kita install npm sebagai package manager untuk menginstall depedensi yang diperlukan dan menjalankan beberapa perintah.
npm install
Install Vue Router
Kita juga install vue-router. Dalam tutorial ini vue router saya gunakan untuk mendesain aplikasi atau membuat tampilan komponen.
npm install vue-router
Lalu buka file app.js dan import vue-router.
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter)
Lihat cara instalasi di situs vue router.
Membuat Komponen
Kita lanjutkan dengan membuat komponen vue. Ada beberapa komponen yang akan kita buat.
Pertama mari kita buat file baru di direktori resources/js/components dengan nama MyNotes.vue.
//MyNotes.vue
<template>
<div>
<h1>MY NOTES</h1>
</div>
</template>
Kemudian buka file app.js untuk kita import dan membuat route komponen.
//app.js
require('./bootstrap');
window.Vue = require('vue');
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import MyNotes from './components/MyNotes'
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/home',
name: 'mynotes',
component: MyNotes,
props: true,
},
],
});
const app = new Vue({
el: '#app',
router,
});
Path nya kita samakan dengan route home yang ada pada file route web.php.
Setelah itu buka file home.blade.php dan kita buat nested routes.
//home.blade.php
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header"></div>
<div class="card-body">
<router-view></router-view>
</div>
</div>
</div>
</div>
</div>
@endsection
Jika dijalankan akan seperti gambar dibawah ini.
Membuat Menu
ita lanjutkan dengan membuat komponen untuk menu. Kita buat komponen dengan nama Linkmenu.vue.
//Linkmenu.vue
<template>
<div>
<router-link :to="{ name: 'mynotes'}">
<button type="button" class="btn btn-primary">My Notes</button>
</router-link>
</div>
</template>
<style scoped>
.card-header .btn-primary{
border: 0;
box-shadow: none;
}
.router-link-active button{
background-color: #666;
border: 0;
box-shadow: none;
}
</style>
Lalu kita import di app.js.
//app.js
require('./bootstrap');
window.Vue = require('vue');
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import MyNotes from './components/MyNotes'
import Linkmenu from './components/Linkmenu'
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/home',
name: 'mynotes',
component: MyNotes,
props: true,
},
],
});
const app = new Vue({
el: '#app',
router,
components: { Linkmenu }
});
Untuk komponen Linkmenu tidak kita buat route, tapi kita daftarkan pada instance dengan menambahkan properti components.
Selanjutnya buka home.blade.php untuk kita render dan letakan di bagian header.
//home.blade.php
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">
<Linkmenu></Linkmenu>
</div>
<div class="card-body">
<router-view></router-view>
</div>
</div>
</div>
</div>
</div>
@endsection
Hasilnya seperti gambar dibawaih ini.
Membuat Form
Kita kembali membuat komponen baru untuk form input yang kita gunakan untuk membuat note. Di halaman ini kita membuat proses penyimpanan data ke database.
Mari kita buat komponen baru dengan nama CreateNote.vue.
//CreateNote.vue
<template>
<div>
<form>
<div class="form-group">
<label for="title">Title:</label>
<input type="text" ref="title" class="form-control" id="title" placeholder="Title..">
</div>
<div class="form-group">
<label for="description">Body:</label>
<textarea class="form-control" ref="body" id="body" placeholder="Body.." rows="8"></textarea>
</div>
<button type="submit" @click.prevent="createPost" class="btn btn-primary">
Submit
</button>
</form>
</div>
</template>
<script>
export default {
props: {
userId: {
type: Number,
required: true
}
},
data:function() {
return {
//
};
},
methods: {
createPost() {
const formData = new FormData();
formData.append("user_id", this.userId);
formData.append("title", this.$refs.title.value);
formData.append("body", this.$refs.body.value);
axios.post("/api/notes", formData)
.then(response => {
console.log('ok');
console.log(response.data);
})
.catch(error => {
//
});
this.$refs.title.value = "";
this.$refs.body.value = "";
}
}
};
</script>
Penjelasan singkat:
Selanjutnya kita import dan membuat route komponen di app.js .
//app.js
require('./bootstrap');
window.Vue = require('vue');
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import MyNotes from './components/MyNotes'
import Linkmenu from './components/Linkmenu'
import CreateNote from './components/CreateNote'
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/home',
name: 'mynotes',
component: MyNotes,
props: true,
},
{
path: '/createnote',
name: 'createnote',
component: CreateNote,
props: true,
},
],
});
const app = new Vue({
el: '#app',
router,
components: { Linkmenu }
});
Setelah di import, kita tambahkan menu dengan membuat router-link pada komponen Linkmenu.vue.
//Linkmenu.vue
<template>
<div>
<router-link :to="{ name: 'mynotes'}">
<button type="button" class="btn btn-primary">My Notes</button>
</router-link>
<router-link :to="{ name: 'createnote', params: { userId} }">
<button type="button" class="btn btn-primary">Create Note</button>
</router-link>
</div>
</template>
<script>
export default {
props: {
userId: {}
}
};
</script>
Props yang kita buat akan mengambil id dari user, id ini akan dirujuk dari komponen Linkmenu pada file home.blade.php yang kita tambahkan props.
//home.blade.php
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">
<Linkmenu :user-id='@json(auth()->user()->id)'></Linkmenu>
</div>
<div class="card-body">
<router-view></router-view>
</div>
</div>
</div>
</div>
</div>
@endsection
Membuat Controller
Kita lanjutkan dengan membuat sebuah controller. Silahkan jalankan perintah dibawah ini pada terminal.
php artisan make:controller NoteController.php -r
Setelah terbuat, kita buka file NoteController.php dan buat request pada method store.
//NoteController.php
/**
Tambahkan model Note
*/
use App\Note;
...
public function store(Request $request)
{
$note = Note::create($request->all());
return $note;
}
Kemudian kita buka model Note.php dan kita tambahkan atribut value.
//Note.php
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Note extends Model
{
protected $fillable = ['user_id','title', 'body'];
}
Selanjutnya kita buka file api.php pada direktori rotues dan kita buat route.
//api.php
Route::Resource('notes', 'NotesController');
Sampai disini kita tinggal mencobanya. Jangan lupa untuk menjalankan php artisan serve dan npm run watch.
Jika tidak ada kesalahkan maka data berhasil tersimpan ke database.
Demikian Cara Menyimpan Data Ke Database MySQL Menggunakan Framework Laravel dan VueJS telah selesai langkah-langkahnya, silahkan dikerjakan dan semoga bermanfaat.