Membuat Blog dengan Laravel & VueJS - #5 | Membuat Tabel Database

Kita akan lanjutkan untuk mengerjakan proses CRUD (Create, Read, Update, Delete) postingan blog, dan dalam pengerjaannya kita akan buat secara bertahap. Kita akan kerjakan Create nya terlebih dahulu.

Sebelum kita membuat halamannya, terlebih kita akan membuat tabel pada database. Untuk membuatnya silahkan ikuti langkah-langkah dibawah ini:

Pertama jalankan perintah dibawah ini:

php artisan make:model Post -m

Penjelasan:
Perintah diatas berfungsi untuk membuat model dengan nama Post sekaligus membuat file migrasi untuk membuat table Posts di database.

Migrasi adalah proses yang dapat kita gunakan untuk mengelola suatu table, dan model untuk berinteraksi dengan table pada database.

Langkah selanjutnya mari kita buka file  ...create_posts_table.php  di direktori database/migrations.

Kita buat field user_id, title, dan body untuk table posts.

//...create_posts_table.php
class CreatePostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->integer('user_id')->unsigned();
            $table->string('title');
            $table->text('body');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
}    

Kemudian jalankan perintah berikut:

php artisan migrate

Jika dilihat di database maka akan terbuat table baru (posts) serta field/kolom nya.

Membuat Halaman Create

Setelah table posts terbuat, kita lanjutkan dengan membuat komponen baru untuk halaman create post.

Mari buat file baru di resources/js/components dengan nama  CreatePost.vue  Lalu copas template dibawah ini:

CreatePost.vue
<template>
  <div class="_container">
    <div class="admin-page-title">Create New Post</div>
      <div class="_wrap-form">
        <form class="_bg-form">         
          <div class="form-group">
            <input type="title" class="form-control" id="title" placeholder="Title">
          </div> 
          <div class="form-group">
            <textarea class="form-control" id="body" placeholder="Body" rows="8"></textarea>
          </div>
          <button type="submit" class="btn btn-primary">
            Submit
          </button>   
        </form><br><br><br>
      </div>
    </div>
</template>

Kemudian buka  app.js  untuk kita import dan membuat route.

//app.js
require('./bootstrap');

window.Vue = require('vue');
 
import VueRouter from 'vue-router'
Vue.use(VueRouter)

import WelcomeAdmin from './components/WelcomeAdmin'
import Menuadmin from './components/Menuadmin'
import CreatePost from './components/CreatePost'

const router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/admin/dashboard',
            name: 'dashboard',
            component: WelcomeAdmin, 
        },
        {
            path: '/admin/createpost',
            name: 'createpost',
            component: CreatePost, 
        },

    ],
});

const app = new Vue({
    el: '#app',
    router,
    components: { Menuadmin }
});

Buat juga router-link di  Menuadmin.vue.

//Menuadmin.vue
<template>
  <div>
    <div class="menu">
      <ul>
        <li>
        <router-link :to="{ name: 'dashboard'}"><i class="fa fa-home"/>
          <span class="text"> DASHBOARD </span>
       </router-link>
        </li>
        <li>
        <router-link :to="{ name: 'createpost'}"><i class="fa fa-pencil-square-o"/> 
          <span class="text"> NEW POST </span></router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

Selanjutnya kita akan lihat hasilnya. Pastikan  php artisan serve  dan  npm run watch  telah berjalan dan tidak ada kesalahan.


Halamannya sudah dibuat, kita lanjutkan di part selanjutnya untuk proses request mengirim data ke database.