Membuat upload image dengan laravel 5.2 + MySQL

Image atau gambar sangatlah penting peranannya untuk sebuah website tertentu, contohnya website yang berisi berita-berita, artikel-artikel, tutorial-tutorial atau website yang hanya berisi kumpulan-kumpulan gambar.
Tutorial sebelumnya kita sudah belajar membuat CRUD sederhana dengan Laravel 5.2. Pada kesempatan kali ini kita akan mencoba membuat upload image dengan Laravel 5.2.

Pertama

Siapkan terlebih dahulu project laravel kalian, kemudian kalian buat migrasi untuk tabel images. File migrasi bisa kalian temukan di databse/migrations/{nama_file_migrasi} dan isikan baris kode seperti dibawah ini.

public function up()
{
    Schema::create('images', function (Blueprint $table) {
        $table->increments('id');
        $table->string('title');
        $table->string('photo');
        $table->timestamps();
    });
}

Ketikan perintah php artisan migrate di command line.

<your_path>:~/laravel$ php artisan migrate

Kedua

Tambahkan baris kode berikut di routing kalian masing-masing

Route::group(['middleware' => ['web']], function () {
    Route::resource('images', 'ImageController');
});

Ketikan perintah berikut untuk melihat routing list project kita.

<your_path>:~/laravel$ php artisan route:list

Ketiga

Buatlah file controller dengan nama ImageController.

<your_path>:~/laravel$ php artisan make:controller ImageController

Kemudian ketikan baris kode berikut di file controller yang barusan sudah kalian buat.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Requests;
use App\Image;

class ImageController extends Controller
{

    public function index()
    {
        $images = Image::all();
        return view('images.index')->with('images', $images);
    }

    public function create()
    {
        return view('images.create');
    }

    public function store(Request $request)
    {
        $this->validate($request, [
            'tittle' => ['required', 'min:5'],
            'photo' => ['mimes:jpg,jpeg,JPEG,png,gif,bmp', 'max:2024'],
        ]);

        $data = $request->all();

        $photo = $request->file('photo')->getClientOriginalName();
        $destination = base_path() . '/public/uploads';
        $request->file('photo')->move($destination, $photo);

        $data['photo'] = $photo;

        Image::create($data);

        return redirect()->route('images.index')->with('message', 'Image Saved');
    }
}

Keempat

Berikutnya kita harus mempersiapkan view untuk upload imagenya. Buatlah folder layouts di resource/views/layouts, kemudian kalian buat juga file baru bernama main.blade.php dan navbar.blade.php didalamnya.

Masukkan baris kode berikut kedalam file main.blade.php.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Image Upload</title>
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
    </head>
    <body>
        @include('layouts.navbar')
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    @if (session('message'))
                        <div class="alert alert-success">
                            {{ session('message') }}
                        </div>
                    @endif
                    @yield('content')
                </div>
            </div>
        </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    </body>
</html>

Kemudian kalian masukkan baris kode dibawah ini untuk file navbar.blade.php.

<nav class="navbar navbar-default navbar-custom">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="{{ url('/') }}">My Gallery</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <div class="nav navbar-nav navbar-right navbar-btn">
                <a href="{{ route('images.create') }}" class="btn btn-default">
                    <i class="fa fa-plus"></i> Add Image
                </a>
                <!-- <button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">Add Image</button> -->
            </div>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

Kelima

Tambahkan folder images di resource/views/images dan buatlah dua buah file dengan nama masing-masing index.blade.php dan create.blade.php didalam folder tersebut.

Tambahkan baris kode kedalam file create.blade.php.

@extends('layouts.main')

@section('content')
    <div class="col-md-8 col-md-offset-2">
        <div class="panel panel-default">
            <div class="panel-heading">
                <p>Add Image</p>
            </div>
            <div class="panel-body">
                <form action="{{ route('images.store') }}" method="POST" enctype="multipart/form-data" class="form-horizontal">
                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                    <div class="form-group">
                        <label for="title" class="control-label col-md-3">Title</label>
                        <div class="col-md-9">
                            <input type="text" name="title" class="form-control" placeholder="Write title for your image...">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="photo" class="control-label col-md-3">Upload Photo</label>
                        <div class="col-md-9">
                            <input type="file" name="photo" class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-9 col-md-offset-3">
                            <button type="submit" class="btn btn-primary">Save</button>
                            <a href="{{ route('images.index') }}" class="btn btn-default">Cancel</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@stop

Setelah itu kalian masukkan juga baris kode dibawah ini untuk file index.blade.php

@extends('layouts.main')

@section('content')
    <div class="col-md-8 col-md-offset-2">
        <div class="panel panel-default">
            <div class="panel-heading">
                <p>Images</p>
            </div>
            <div class="panel-body">
                @foreach ($images as $image)
                    <div class="col-sm-3">
                        <a href="" class="thumbnail">
                            <img src="uploads/{{ $image->photo, $image->title }}" alt="">
                            <div class="caption">
                                {{ $image->title }}
                            </div>
                        </a>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
@stop

Keenam

Kalian buat folder baru bernama uploads di public/uploads. Folder tersebut untuk menyimpan file image yang kita upload karena.

Selamat mencoba dan jika kalian masih bingung silakan taruh petanyaan kalian dibagian komentar. Bye ..... terimaksih.