Membuat CRUD dengan Laravel 8 dan MongoDB

Leave a Comment / Laravel, MongoDB / By

Pada tutorial ini, saya akan cara membuat CRUD dengan Laravel 8 dan database mongoDB. Kita akan menggunakan package “jenssegers/laravel-mongodb” dengan package tersebut kita dapat menambahkan fungsionalitas ke model Eloquent dan Query builder untuk MongoDB.

saya akan membuat crud mengenai data-data pada laptop seperti merk,prosesor,ram,penyimpanan. kita akan buat database mongodb dengan nama “laptop”, kemudian untuk koleksi juga dengan nama “laptop”. kemudian kita akan melakukan konfigurasi database mongodb pada file env. Setelah itu kita akan membuat CRUD dengan Laravel 8.

silahkan kalian install terlebih dahulu laravel 8, kalian bisa menggunakan via composer untuk menginstallnya. silahkan kunjungi website laravel untuk melihat cara install nya https://laravel.com/docs/8.x/installation#installation-via-composer

Setup Database MongoDB

Apabila kalian belum install mongodb kalian bisa mengunjungi tutorial ini Cara install MongoDB dan Compass GUI di Windows dan kalian juga perlu melakukan konfigurasi mongodb driver dengan xampp, untuk tutorialnya silahkan kunjungi Cara Melakukan Konfigurasi MongoDB driver dengan PHP di XAMPP

Mari kita buat database dan collection di mongoDB. Silahkan buka cmd kalian. Ketikan perintah berikut ini, untuk connect ke mongoDB dan membuat database, collection, serta insert laptop.

Langkah selanjutnya kita akan melakukan konfigurasi database, silahkan buka file .env kemudian ketikan kode berikut.

MONGO_DB_HOST=127.0.0.1
MONGO_DB_PORT=27017
MONGO_DB_DATABASE=laptop
MONGO_DB_USERNAME=
MONGO_DB_PASSWORD=

Kemudian buka file config/database.php. Tambahkan array mongodb seperti berikut ini, untuk connect ke mongoDB.

<?php

return [

    ....

    'connections' => [

        ......

        'mongodb' => [
            'driver'   => 'mongodb',
            'host'     => env('MONGO_DB_HOST', 'localhost'),
            'port'     => env('MONGO_DB_PORT', 27017),
            'database' => env('MONGO_DB_DATABASE'),
            'username' => env('MONGO_DB_USERNAME'),
            'password' => env('MONGO_DB_PASSWORD'),
            'options'  => []
        ],
    ]
]

Langkah selanjutnya kita akan melakukan konfigurasi database, silahkan buka file .env kemudian ketikan kode berikut.

MONGO_DB_HOST=127.0.0.1
MONGO_DB_PORT=27017
MONGO_DB_DATABASE=laptop
MONGO_DB_USERNAME=
MONGO_DB_PASSWORD=

Install Package laravel mongodb

Silahkan buka CMD kalian, Arahkan pada file project laravel. Kemudian ketikan perintah berikut ini.

composer require jenssegers/mongodb

Setelah berhasil menginstal package, silahkan kalian buka file config/app.php. Tambahkan service provider.

<?php

return [

    ......

    'providers' => [

        ......

        Jenssegers\Mongodb\MongodbServiceProvider::class,
    ]

    ......
]

Buat Model

Kita buat terlebih dahulu file modelnya. Silahkan Kalian ketik perintah berikut ini CMD project laravel kalian.

php artisan make:model laptop

Naahh setelah berhasil maka otomatis akan membuat model dengan nama laptop.silahkan buka model yang dibuat di app/models/laptop.php. Kemudian tambah kode seperti berikut

<?php

namespace App\Models;

use Jenssegers\Mongodb\Eloquent\Model as Eloquent;

class laptop extends Eloquent
{

    protected $connection = 'mongodb';
    protected $collection = 'laptop';

    /**

     * The attributes that are mass assignable.

     *

     * @var array

     */

    protected $fillable = [

        'merk', 'prosesor', 'penyimpanan', 'ram'

    ];
}

Route

Sekarang mari kita membuat route nya. Silahkan buka file routes/web.php. Tambahkan route nya.

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\LaptopController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::resource('/laptop', LaptopController::class);

Buat Controller

Kita akan membuat file controller melalui cmd. Silahkan buka cmd kalian kemudian ketik perintah berikut.

php artisan make:controller LaptopCpntroller --resource

Setelah berhasil, silahkan buka file app/Http/Controllers/LaptopController.php. Pada file laptop controller ini kita akan menambahkan beberapa fungsi seperti :

  • index()
  • create()
  • store()
  • show()
  • edit()
  • update()
  • destroy()

Fungsi tersebut digunakan untuk menjalankan CRUD pada website yang akan kita buat. Kalian bisa copy kode dibawah ini.

<?php

namespace App\Http\Controllers;

use App\Models\laptop;
use Illuminate\Http\Request;

class LaptopController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $laptops = laptop::all();

        return view('laptops.index',compact('laptops'))
            ->with('i', (request()->input('page', 1) - 1) * 5);
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        return view('laptops.create');
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        request()->validate([
            'merk'  => 'required',
            'prosesor'  => 'required',
            'penyimpanan'  => 'required',
            'ram'  => 'required',
        ]);

        Laptop::create($request->all());
        return redirect()->route('laptop.index')
                        ->with('success','Laptop berhasil ditambahkan.');
    }

    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show(Laptop $laptop)
    {
        return view('laptops.show',compact('laptop'));
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function edit(Laptop $laptop)
    {
        return view('laptops.edit',compact('laptop'));
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, Laptop $laptop)
    {
        request()->validate([
            'merk'  => 'required',
            'prosesor'  => 'required',
            'penyimpanan'  => 'required',
            'ram'  => 'required',
        ]);

        $laptop->update($request->all());

        return redirect()->route('laptop.index')
                        ->with('success','Laptop berhasil diedit');
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy(Laptop $laptop)
    {
        $laptop->delete();

        return redirect()->route('laptop.index')
                        ->with('success','Laptop berhasil dihapus');
    }
}

Buat Views

Langkah selanjutnya mari kita buat tampilan websitenya. Silahkan kalian buat terlebih dahulu pada folder resource/views dengan struktur seperti ini.

Setelah itu silahkan copy code dibawah ini.

resources/views/laptops/index.php

@extends('laptops.layout')
@section('content')
    <div class="row">
        <div class="col-lg-12 mt-3">
            <h2>Data Laptop</h2>
            <a class="btn btn-success mt-3 mb-3" href="{{ route('laptop.create') }}">Buat Data Laptop</a>
        </div>
    </div>

    @if ($message = Session::get('success'))
        <div class="alert alert-success">
            <p>{{ $message }}</p>
        </div>
    @endif

    <table class="table table-bordered">
        <tr>
            <th>No</th>
            <th>Merk</th>
            <th>Prosesor</th>
            <th>Penyimpanan</th>
            <th>Ram</th>
            <th width="280px">Action</th>
        </tr>

	    @foreach ($laptops as $laptop)
	    <tr>
	        <td>{{ ++$i }}</td>
	        <td>{{ $laptop->merk }}</td>
	        <td>{{ $laptop->prosesor }}</td>
	        <td>{{ $laptop->penyimpanan }}</td>
	        <td>{{ $laptop->ram }}</td>
	        <td>
                <form action="{{ route('laptop.destroy',$laptop->id) }}" method="POST">
                @csrf
                    <a class="btn btn-info" href="{{ route('laptop.show',$laptop->id) }}">Show</a>
                    <a class="btn btn-primary" href="{{ route('laptop.edit',$laptop->id) }}">Edit</a>
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger">Delete</button>
                </form>
	        </td>
	    </tr>
	    @endforeach
    </table>

@endsection

resources/views/laptops/create.php

@extends('laptops.layout')
@section('content')

<div class="row mt-3">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Tambah Data Laptop</h4>
                <form class="forms-sample" action="{{ route('laptop.store') }}" method="POST">
                    @csrf
                    <div class="form-group">
                        <label for="merk">Merk</label>
                        <input type="text" name="merk" class="form-control" id="merk">
                    </div>
                    <div class="form-group">
                        <label for="prosesor">Prosesor</label>
                        <input type="text" name="prosesor" class="form-control" id="prosesor">
                    </div>
                    <div class="form-group">
                        <label for="penyimpanan">Penyimpanan</label>
                        <input type="text" name="penyimpanan" class="form-control" id="penyimpanan">
                    </div>
                    <div class="form-group">
                        <label for="ram">Ram</label>
                        <input type="text" name="ram" class="form-control" id="ram">
                    </div>
                    <button type="submit" class="btn btn-success mr-2">Submit</button>
                    <a href="{{ route('laptop.index') }}"><button type="button" class="btn btn light">Cancel</button></a>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection

resources/views/laptops/edit.php

@extends('laptops.layout')
@section('content')

<div class="row mt-3">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Tambah Data Laptop</h4>
                <form class="forms-sample" action="{{ route('laptop.update',$laptop->id) }}" method="POST">
                    @method('PUT')
                    @csrf
                    <div class="form-group">
                        <label for="merk">Merk</label>
                        <input type="text" name="merk" class="form-control" id="merk" value="{{ $laptop->merk }}">
                    </div>
                    <div class="form-group">
                        <label for="prosesor">Prosesor</label>
                        <input type="text" name="prosesor" class="form-control" id="prosesor" value="{{ $laptop->prosesor }}">
                    </div>
                    <div class="form-group">
                        <label for="penyimpanan">Penyimpanan</label>
                        <input type="text" name="penyimpanan" class="form-control" id="penyimpanan" value="{{ $laptop->penyimpanan }}">
                    </div>
                    <div class="form-group">
                        <label for="ram">Ram</label>
                        <input type="text" name="ram" class="form-control" id="ram" value="{{ $laptop->ram }}">
                    </div>
                    <button type="submit" class="btn btn-success mr-2">Submit</button>
                    <a href="{{ route('laptop.index') }}"><button type="button" class="btn btn-light">Cancel</button></a>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection

resources/views/laptops/show.php

@extends('laptops.layout')
@section('content')

<div class="row">
    <div class="col-lg-12 mt-3">
        <h2>Detail Laptop</h2>
        <a class="btn btn-success mt-3 mb-3" href="{{ route('laptop.index') }}">Kembali</a>
    </div>
</div>

<div class="row">
    <div class="col-6">
        <div class="form-group">
            <strong>Merk:</strong>
            {{ $laptop->merk }}
        </div>
    </div>
    <div class="col-6">
        <div class="form-group">
            <strong>Prosesor:</strong>
            {{ $laptop->prosesor }}
        </div>
    </div>
    <div class="col-6">
        <div class="form-group">
            <strong>Penyimpanan:</strong>
            {{ $laptop->penyimpanan }}
        </div>
    </div>
    <div class="col-6">
        <div class="form-group">
            <strong>Ram:</strong>
            {{ $laptop->ram }}
        </div>
    </div>
</div>

@endsection

Selanjutnya mari kita jalankan project laravel kita. Buka cmd kalian ketik php artisan serve. Kemudian buka pada url http://localhost:8000/laptop dan kita telah berhasil membuat crud laravel dengan database mongoDB

Sekian tutorial membuat CRUD dengan laravel dan mongoDB, apabila mengalami kesulitan atau terdapat error kalian bisa komentar dibawah sini.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top