Pada kesempatan ini kami akan membahas tentang CRUD di laravel dengan Vue JS, kami harap dengan adanya tutorial CRUD Laravel dan Vue js ini bisa melatih kalian dalam mengembangkan sebuah website atau aplikasi kedepannya dengan menggunakan Laravel dan JavaScript.

Pengenalan Vue Js

Vue js adalah salah satu framework javascript populer dan banyak digunakan oleh startup untuk mengembangkan sebuah front end atau sebuah tampilan dari project yang sedang dijalankan agar lebih interaktif. Di Indonesia sendiri, contohnya Bukalapak menggunakan Vue js sebagai halaman depannya.

Link resmi : https://vuejs.org/ 

Oke itu saja pengenalan tentang vue js, selanjutnya kita akan membahas CRUD.

Pengenalan CRUD

CRUD merupakan singkatan dari Create, Read, Update, dan Delete.

  • Create adalah untuk membuat sebuah masukkan data yang disimpan ke database.
  • Read adalah untuk menampilkan sebuah data dari database ke sebuah tampilan.
  • Update adalah untuk mengubah data yang ada di database.
  • Delete adalah untuk menghapus data yang ada di database.

CRUD pada laravel bisa memakai resource controller dalam prosesnya, kali ini kita akan menggunakan itu.

Kami masih menggunakan project yang sama seperti sebelumnya yaitu blog, dalam tutorial sebelumnya kita sudah membuat controller, model dan routing.

Selanjutnya kita akan melakukan perubahan khususnya pada PostController.php, kita akan buat resource controller.

Laravel sudah menyediakan fasilitas untuk membuat resource controller, caranya cukup menambahkan "--resource" saat membuat controller baru.

Contohnya seperti ini :

php artisan make:controller ContohController --resource

Jika script diatas dijalankan nanti akan ada sebuah fungsi secara otomatis pada controller yang kita buat.

Perhatikan penjelasan script dibawah ini :

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ContohController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    //Menampilkan halaman utama
    public function index()
    {
        //
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    //Membuat sebuah tampilan form masukkan
    public function create()
    {
        //
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    //Proses untuk menyimpan ke database
    public function store(Request $request)
    {
        //
    }

    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    //Menampilkan data berdasarkan ID
    public function show($id)
    {
        //
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    //Menampilkan data dalam sebuah form tampilan edit
    public function edit($id)
    {
        //
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    //Memproses update dari form tampilan edit
    public function update(Request $request, $id)
    {
        //
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    //Menghapus data berdasarkan ID
    public function destroy($id)
    {
        //
    }
}

Script diatas adalah isi dari ContohController.php, selanjutnya kita akan coba di PostController.php yang sudah pernah kita buat sebelumnya.

Buka file PostController.php salin dan paste script dibawah ini :

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Post; //memanggil model posts
class PostController extends Controller
{
    //menampilkan semua posts
    public function index(){
        $posts = Post::all(); // mengambil semua data di tabel posts
        return view('posts.index', compact('posts'));
    }

    //menampilkan post berdasarkan slug
    public function show($slug){
        $post = Post::where('slug',$slug)->first();
        return view('posts.show',compact('post'));
    }
    //Membuat sebuah tampilan form masukkan
    public function create()
    {
        //
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    //Proses untuk menyimpan ke database
    public function store(Request $request)
    {
        //
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    //Menampilkan data dalam sebuah form tampilan edit
    public function edit($id)
    {
        //
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    //Memproses update dari form tampilan edit
    public function update(Request $request, $id)
    {
        //
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    //Menghapus data berdasarkan ID
    public function destroy($id)
    {
        //
    }
}

Selanjutnya kita ubah bagian Route-nya, buka file web.php salin dan paste script dibawah ini :

<?php

/*
| Web Routes
*/

Auth::routes();
Route::get('/','[email protected]');
Route::resource('/posts', '[email protected]'); //Routing untuk resource PostController
Route::get('/user/{id}','[email protected]');
Route::get('/theme',function(){
    return view('layouts.apps'); 
});

Penjelasan

php artisan route:list

Untuk cara mengaksesnya seperti ini :

http://localhost:8000/posts     //untuk memanggil fungsi Index yang ada di PostController.php dengan method GET
http://localhost:8000/posts/{id}        //untuk memanggil fungsi Show yang ada di PostController.php dengan method GET
http://localhost:8000/posts        //untuk memanggil fungsi Store yang ada di PostController dengan method POST
http://localhost:8000/posts/{id}      //untuk memanggil fungsi Update yang ada di PostController dengan method PUT/PATCH
http://localhost:8000/posts/create      //untuk memanggil fungsi Create yang ada di PostController dengan method GET
http://localhost:8000/posts/{id}/edit      //untuk memanggil fungsi Edit yang ada di PostController dengan method GET
http://localhost:8000/posts/{id}       //untuk memanggil fungsi DELETE yang ada di Post Controller dengan method DELETE

Untuk lebih jelasnya akan kita praktekkan saja agar bisa dipahami konsepnya.

Wait....


Wahyu Prasetyo
Wahyu Prasetyo Hanya manusia biasa yang berilmu dan ingin bermanfaat untuk orang lain.