Belajar Laravel dan VueJS - Cara Menyimpan Data Ke Database MySQL

wahyunanangwidodo

wahyunanangwidodo Rabu, 07 Agustus 2019

Belajar Laravel dan VueJS - Cara Menyimpan Data Ke Database MySQL

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.

Belajar Laravel dan VueJS - Cara Menyimpan Data Ke Database MySQL

Belajar Laravel dan VueJS - Cara Menyimpan Data Ke Database MySQL

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.

Belajar Laravel dan VueJS - Cara Menyimpan Data Ke Database MySQL
//css body
body{
   background-color: #2d343c;
}

Jika tidak ada kesalahan data akan tersimpan pada table users.

Belajar Laravel dan VueJS - Cara Menyimpan Data Ke Database MySQL

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.

Belajar Laravel dan VueJS - Cara Menyimpan Data Ke Database MySQL

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.

Belajar Laravel dan VueJS - Cara Menyimpan Data Ke Database MySQL

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:

*Pada element form kita gunakan ref untuk menentukan value formulir yang akan dikirim.
*Kita membuat event click pada button dan membuat method.
*Kita membuat props userId yang mengambil id user.
*Kita menggunakan FormData untuk membuat formulir yang akan dikirim dengan value yang ditentukan dengan formData.append.
*Kita gunakan axios untuk mengirim formulir.

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.

Belajar Laravel dan VueJS - Cara Menyimpan Data Ke Database MySQL

Belajar Laravel dan VueJS - Cara Menyimpan Data Ke Database MySQL

Demikian Cara Menyimpan Data Ke Database MySQL Menggunakan Framework Laravel dan VueJS telah selesai langkah-langkahnya, silahkan dikerjakan dan semoga bermanfaat.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Berlangganan

Berlangganan untuk mendapat pemberitahuan artikel terbaru via email.