Laravel 5.7 Tutorial : Simple CRUD Operation with Pagination from Scratch

Laravel 5.7 Tutorial : How to create todo App with Laravel and MySQL Database? This lesson will show you how to create CRUD operation with example in laravel 5.7

Laravel 5.7 Tutorial - How to create simple CRUD (create, read, update, delete) application with pagination in laravel 5.7? This CRUD APP has completed already and you can follow the video tutorial for step by step and The source code will available in the next paragrafh.

Video Tutorial CRUD Application with Laravel 5.7

Full Source Code CRUD APP

First step, we will create a fresh laravel installation using this command.

Installation

composer create-project --prefer-dist laravel/laravel youtube

Database Configuration

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=yt_tutorial
DB_USERNAME=root
DB_PASSWORD=password

Create Migration

php artisan make:migration create_biodatas_table

and we will create table and fields into migration file.


    public function up(){
        Schema::create('biodatas', function (Blueprint $table) {
            $table->increments('id');
            $table->string('namaSiswa');
            $table->text('alamatSiswa');
            $table->timestamps();
        });
    }

Run Migrate

php artisan migrate

Authentication

In this project we will create authentication but will not use. we just need blade template default from laravel.


php artisan make:auth

Create Model

php artisan model Biodata

we will declare fillable in this model


<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Biodata extends Model{
    protected $fillable = ['namaSiswa','alamatSiswa'];
}

Create Controller

php artisan make:controller BiodataController --resource

All CRUD function will stored into This controller,


<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Biodata;
class BiodataController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $biodatas = Biodata::latest()->paginate(5);
        return view('biodata.index', compact('biodatas'))
                  ->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('biodata.create');
    }

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

        Biodata::create($request->all());
        return redirect()->route('biodata.index')
                        ->with('success', 'new biodata created successfully');
    }

    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show($id)
    {
        $biodata = Biodata::find($id);
        return view('biodata.detail', compact('biodata'));
    }

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

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
      $request->validate([
        'namaSiswa' => 'required',
        'alamatSiswa' => 'required'
      ]);
      $biodata = Biodata::find($id);
      $biodata->namaSiswa = $request->get('namaSiswa');
      $biodata->alamatSiswa = $request->get('alamatSiswa');
      $biodata->save();
      return redirect()->route('biodata.index')
                      ->with('success', 'Biodata siswa updated successfully');
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        $biodata = Biodata::find($id);
        $biodata->delete();
        return redirect()->route('biodata.index')
                        ->with('success', 'Biodata siswa deleted successfully');
    }
}

Routes

Add new route in your Routes file


route::resource('biodata','BiodataController');

Views

In the views folder, we need to create new directory called "biodata", in the biodata directory we will add this blade file :

index.blade.php
detail.blade.php
edit.blade.php
create.blade.php

Just follow and copy all source code below

Index.blade.php

@extends('layouts.app')
@section('content')

  <div class="container">
    <div class="row">
      <div class="col-md-10">
        <h3>List Biodata Siswa</h3>
      </div>
      <div class="col-sm-2">
        <a class="btn btn-sm btn-success" href="{{ route('biodata.create') }}">Create New Biodata</a>
      </div>
    </div>

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

    <table class="table table-hover table-sm">
      <tr>
        <th width = "50px"><b>No.</b></th>
        <th width = "300px">Nama Siswa</th>
        <th>Alamat Siswa</th>
        <th width = "180px">Action</th>
      </tr>

      @foreach ($biodatas as $biodata)
        <tr>
          <td><b>{{++$i}}.</b></td>
          <td>{{$biodata->namaSiswa}}</td>
          <td>{{$biodata->alamatSiswa}}</td>
          <td>
            <form action="{{ route('biodata.destroy', $biodata->id) }}" method="post">
              <a class="btn btn-sm btn-success" href="{{route('biodata.show',$biodata->id)}}">Show</a>
              <a class="btn btn-sm btn-warning" href="{{route('biodata.edit',$biodata->id)}}">Edit</a>
              @csrf
              @method('DELETE')
              <button type="submit" class="btn btn-sm btn-danger">Delete</button>
            </form>
          </td>
        </tr>
      @endforeach
    </table>

{!! $biodatas->links() !!}
  </div>
@endsection

Create.blade.php

@extends('layouts.app')
@section('content')
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <h3>New Biodata Siswa</h3>
      </div>
    </div>

    @if ($errors->any())
      <div class="alert alert-danger">
        <strong>Whoops! </strong> there where some problems with your input.<br>
        <ul>
          @foreach ($errors as $error)
            <li>{{$error}}</li>
          @endforeach
        </ul>
      </div>
    @endif

    <form action="{{route('biodata.store')}}" method="post">
      @csrf
      <div class="row">
        <div class="col-md-12">
          <strong>Nama Siswa :</strong>
          <input type="text" name="namaSiswa" class="form-control" placeholder="Nama Siswa">
        </div>
        <div class="col-md-12">
          <strong>Alamat Siswa :</strong>
          <textarea class="form-control" placeholder="Alamat Siswa" name="alamatSiswa" rows="8" cols="80"></textarea>
        </div>

        <div class="col-md-12">
          <a href="{{route('biodata.index')}}" class="btn btn-sm btn-success">Back</a>
          <button type="submit" class="btn btn-sm btn-primary">Submit</button>
        </div>
      </div>
    </form>

  </div>
@endsection

Detail.blade.php

@extends('layouts.app')
@section('content')
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h3>Detail Siswa</h3>
        <hr>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <div class="form-group">
          <strong>Nama Siswa : </strong> {{$biodata->namaSiswa}}
        </div>
      </div>
      <div class="col-md-12">
        <div class="form-group">
          <strong>Alamat Siswa : </strong> {{$biodata->alamatSiswa}}
        </div>
      </div>
      <div class="col-md-12">
        <a href="{{route('biodata.index')}}" class="btn btn-sm btn-success">Back</a>
      </div>
    </div>
  </div>
@endsection

Edit.blade.php

@extends('layouts.app')
@section('content')
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <h3>Edit Biodata Siswa</h3>
      </div>
    </div>

    @if ($errors->any())
      <div class="alert alert-danger">
        <strong>Whoops! </strong> there where some problems with your input.<br>
        <ul>
          @foreach ($errors as $error)
            <li>{{$error}}</li>
          @endforeach
        </ul>
      </div>
    @endif

    <form action="{{route('biodata.update',$biodata->id)}}" method="post">
      @csrf
      @method('PUT')
      <div class="row">
        <div class="col-md-12">
          <strong>Nama Siswa :</strong>
          <input type="text" name="namaSiswa" class="form-control" value="{{$biodata->namaSiswa}}">
        </div>
        <div class="col-md-12">
          <strong>Alamat Siswa :</strong>
          <textarea class="form-control" name="alamatSiswa" rows="8" cols="80">{{$biodata->alamatSiswa}}</textarea>
        </div>

        <div class="col-md-12">
          <a href="{{route('biodata.index')}}" class="btn btn-sm btn-success">Back</a>
          <button type="submit" class="btn btn-sm btn-primary">Submit</button>
        </div>
      </div>
    </form>
  </div>
@endsection

Just leave your comment if still confused, and don't forget to like and subscribe our channel and see you next lessons ..

KODE AJAIB

Header$type=social_icons