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 :
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 :
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)