Pada halaman depan kita akan menampilkan slide gambar yang sebelumnya kita buat secara statis. Yaitu memasukkan gambar-gambar yang akan kita tampilkan ke folder public di aplikasi laravel kita. Sekarang kita akan membuatnya menjadi lebih dinamis, jadi nanti kita bisa menambahkan gambar yang akan ditampilkan dalam slideshow.

Langkah-langkahnya adalah :

1. Buat migration slideshow
2. Update file model Slideshow
3. Tambahkan route slideshow ke file web.php
4. Tambahkan menu ke menudashboard
5. Buat file view slideshow
6. Update file controller SlideshowController.php

Sekarang kita jalankan command untuk membuat Controller, model dan migrations slideshow sekaligus. Buka terminal dan jalankan perintah berikut dan kemudian pencet enter.

php artisan make:model Slideshow -crm

Keterangan :

• -crm setelah Slideshow adalah perintah untuk membuat Controller Resource berikut migrationsnya. Jadi sekali perintah langsung membuat 3 buah file.
• Soal controller resource bisa dibaca di sini (https://laravel.com/docs/5.8/controllers#resource-controllers)

3 Buah file baru telah dibuat, sekarang kita koreksi satu per satu.

#1. Migrations slideshow

buka folder migrations dan edit file _create_slideshows_table.php

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateSlideshowsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('slideshow', function (Blueprint $table) {
            $table->increments('id');
            $table->string('foto');
            $table->string('caption_title')->nullable();
            $table->string('caption_content')->nullable();
            $table->integer('user_id')->unsigned();
            $table->foreign('user_id')->references('id')->on('users');
            $table->timestamps();
        });
    }

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

#2. Model Slideshow

Setelah migrations, selanjutnya edit file app/Slideshow.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Slideshow extends Model
{
    protected $table = "slideshow";
    protected $fillable = [
        'foto',
        'caption_title',
        'caption_content',
        'user_id',
    ];

    public function user() {
        return $this->belongsTo('App\User', 'user_id');
    }
}

#3. Tambahkan route

Buka file web.php dan pada bagian di bawah Route::delete('produkimage/{id}','[email protected]') tambahkan route slideshow.

  // hapus image produk
  Route::delete('produkimage/{id}', '[email protected]');
  // slideshow
  Route::resource('slideshow', 'SlideshowController');

#4. Tambahkan menu item ke menudashboard.blade.php

Buka file menudashboard.blade.php kemudian tambahkan menu Setting di bawah data.

    <li class="nav-item has-treeview">
      <a href="#" class="nav-link">
        <i class="nav-icon fas fa-cogs"></i>
        <p>
          Setting
          <i class="right fas fa-angle-left"></i>
        </p>
      </a>
      <ul class="nav nav-treeview">
        <li class="nav-item">
          <a href="{{ route('slideshow.index') }}" class="nav-link">
            <i class="far fa-images nav-icon"></i>
            <p>Slideshow</p>
          </a>
        </li>
      </ul>
    </li>

#5. Tambahkan file view slideshow

Buka folder views dan tambahkan folder slideshow, pada folder slideshow buat 1 buah file dengan nama index.blade.php

@extends('layouts.dashboard')
@section('content')
<div class="container-fluid">
  <!-- table slideshow -->
  <div class="row">
    <div class="col">
      <div class="card">
        <div class="card-header">
          <h4 class="card-title">Slideshow</h4>
        </div>
        <div class="card-body">
          @if ($message = Session::get('error'))
              <div class="alert alert-warning">
                  <p>{{ $message }}</p>
              </div>
          @endif
          @if ($message = Session::get('success'))
              <div class="alert alert-success">
                  <p>{{ $message }}</p>
              </div>
          @endif
          <div class="table-responsive">
            <table class="table table-bordered">
              <thead>
                <tr>
                  <th width="50px">No</th>
                  <th>Gambar</th>
                  <th>Title</th>
                  <th>content</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                @foreach($itemslideshow as $slide)
                <tr>
                  <td>
                  {{ ++$no }}
                  </td>
                  <td>
                    @if($slide->foto != null)
                    <img src="{{ \Storage::url($slide->foto) }}" alt="{{ $slide->caption_title }}" width='150px' class="img-thumbnail">
                    @endif
                  </td>
                  <td>
                  {{ $slide->caption_title }}
                  </td>
                  <td>
                  {{ $slide->caption_content }}
                  </td>
                  <td>
                    <form action="{{ route('slideshow.destroy', $slide->id) }}" method="post" style="display:inline;">
                      @csrf
                      {{ method_field('delete') }}
                      <button type="submit" class="btn btn-sm btn-danger mb-2">
                        Hapus
                      </button>                    
                    </form>
                  </td>
                </tr>
                @endforeach
              </tbody>
            </table>
            {{ $itemslideshow->links() }}
          </div>
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col-4">
              <form action="{{ url('/admin/slideshow') }}" method="post" enctype="multipart/form-data">
                @csrf
                <div class="form-group">
                  <label for="foto">Foto</label>
                  <br />
                  <input type="file" name="image" id="image">
                </div>
                <div class="form-group">
                  <label for="caption_title">Title</label>
                  <input type="text" name="caption_title" class="form-control">
                </div>
                <div class="form-group">
                  <label for="caption_content">Content</label>
                  <textarea name="caption_content" id="caption_content" rows="3" class="form-control"></textarea>
                </div>
                <div class="form-group">
                  <button class="btn btn-primary">Upload</button>
                </div>
              </form>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

6. Update file SlideshowController.php

Buka file SlideshowController.php dan update kodenya menjadi seperti berikut.

<?php

namespace App\Http\Controllers;

use App\Slideshow;
use Illuminate\Http\Request;

class SlideshowController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index(Request $request)
    {
        $itemslideshow = Slideshow::paginate(10);
        $data = array('title' => 'Dashboard Slideshow',
                    'itemslideshow' => $itemslideshow);
        return view('slideshow.index', $data)->with('no', ($request->input('page', 1) - 1) * 10);
    }

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

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $this->validate($request, [
            'image' => 'required|mimes:jpeg,png,jpg,gif,svg|max:2048'
        ]);
        // ambil data user yang login
        $itemuser = $request->user();
        // masukkan data yang dikirim ke dalam variable $inputan
        $inputan = $request->all();
        $inputan['user_id'] = $itemuser->id;
        // ambil url foto yang diupload
        $fileupload = $request->file('image');
        $folder = 'assets/images';
        $itemgambar = (new ImageController)->upload($fileupload, $itemuser, $folder);
        // masukkan url yang telah diupload ke $inputan
        $inputan['foto'] = $itemgambar->url;
        $itemslideshow = Slideshow::create($inputan);
        return back()->with('success', 'Foto berhasil diupload');
    }

    /**
     * Display the specified resource.
     *
     * @param  \App\Slideshow  $slideshow
     * @return \Illuminate\Http\Response
     */
    public function show($id)
    {
        //
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  \App\Slideshow  $slideshow
     * @return \Illuminate\Http\Response
     */
    public function edit($id)
    {
        //
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \App\Slideshow  $slideshow
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
        //
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  \App\Slideshow  $slideshow
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        $itemslideshow = Slideshow::findOrFail($id);
        // cek kalo foto bukan null
        if ($itemslideshow->foto != null) {
            \Storage::delete($itemslideshow->foto);
        }
        if ($itemslideshow->delete()) {
            return back()->with('success', 'Data berhasil dihapus');
        } else {
            return back()->with('error', 'Data gagal dihapus');
        }
    }
}

Terakhir jangan lupa jalankan perintah migrate untuk membuat table baru yang kita buat di file migrations tadi. Kembali ke terminal dan ketik perintah berikut kemudian pencet enter.

php artisan migrate

Masih di terminal jalan perintah berikut untuk menjalankan aplikasi laravel.

php artisan serve

Sekarang akses http://localhost:8000 dan coba buka dashboard slideshow.

Ringkasan apa saja yang kita buat pada bagian ini bisa dicek di sini (https://github.com/fadlur/larashop/commit/1908fa2cabba84ea41a896a705d555c66c6783c0)