Laravel 5.5 CRUD application from Scratch – Complete Source code

Laravel 5.5 CRUD application from Scratch – Complete Source code

Comments Off on Laravel 5.5 CRUD application from Scratch – Complete Source code



CRUD(Create, Read, Update, Delete) Operations in any project plays very important role to Manage the data. Today I am going to discuss a Major topic that is How we can make Laravel 5.5 Crud application totally from Scratch.?

So let’s Start and build it within few steps

For creating Laravel Project, Make sure below things are enables /Installed on your system.

PHP Version Should be >= 7.0.0
1.OpenSSL PHP Extension
2.PDO PHP Extension
3.Mbstring PHP Extension
4.Tokenizer PHP Extension
5.XML PHP Extension
6.Installed Composer

#1: Create a Laravel 5.5 project




Download source code from GitHub




the following command will create your project.

composer create-project --prefer-dist laravel/laravel Laravel5.5 

#2:- After Installing the laravel project you need to run the project on the server. if you are working on the local server so you can go through http://localhost:8000 OR http://127.0.0.1:8000

#3: you require to Edit .env file for all database configuration and keys.

In fact, You don’t need to Edit whole.env file below is the recommended attributed to change.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel5.5
DB_USERNAME=root
DB_PASSWORD=root

#4: Run and execute the migrate command for migrating all the tables in attached database.

 php artisan migrate

After Migration you will confident to see all the tables inside your Database. likes users & resets_table

#5:-Creating Controllers

Go to your terminal and run the following command to create the controller inside your laravel 5.5 project.

php artisan make:controller MYCRUDController --resource

If you want to see the where the controller is actually created so navigate your path like laravel5.5 > app > Http > Controllers, then you will see MYCRUDController file in that folder.

#6: Creating Models – For Handling Database queries.

For Create a model you need to run the following command from your terminal

php artisan make:model MyCrud -m

#7: Edit your mycrud migration file and create the required fields for table.

Navigate the Migration file is located in laravel5.5 > database > migrations folder.


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

class CreateMyCruds extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('cruds_table', function (Blueprint $table) {
            $table->increments('id');
            $table->string('title');
            $table->string('post_content');
            $table->string('post_author');
            $table->timestamps();
        });
    }

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

then Migrate your table your terminal simply type the command

php artisan migrate 

#8: Creating views for Setup User Interface.

Navigate your project view inside the laravel5.5 > resources > views . Locate into that folder and then create a master view file called master.blade.php.


<!doctype html>
<html lang="{{ config('app.locale') }}">
    <head>
        <meta charset="utf-8">
        <title>Complete CRUD Operations</title>
        <link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">
    </head>
    <body>
      
        @yield('content')
    </body>
</html>


After that Make a new folder inside your views directory “Mycrud”. Go inside that and create couple of file for mnaking crud views.

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

#9: Edit your file create.blade.php

@extends('master')
@section('content')
<div class="container">
  <form>
    <div class="form-group row">
      <label class="col-sm-2 col-form-label col-form-label-lg">Title</label>
      <div class="col-sm-10">
        <input type="text" class="form-control form-control-lg" placeholder="title" name="title">
      </div>
    </div>
    <div class="form-group row">
      <label for="smFormGroupInput" class="col-sm-2 col-form-label col-form-label-sm">Post content</label>
      <div class="col-sm-10">
        <textarea name="post" rows="8" cols="80"></textarea>
      </div>
    </div>

    <div class="form-group row">
      <label for="smFormGroupInput" class="col-sm-2 col-form-label col-form-label-sm">Post author</label>
      <div class="col-sm-10">
       <input type="text" class="form-control form-control-lg" placeholder="title" name="author">
      </div>
    </div>

    <div class="form-group row">
      <div class="col-md-2"></div>
      <input type="submit" class="btn btn-primary">
    </div>
  </form>
</div>
@endsection

#10: Edit routes > web.php file and include a route method to request handling.


Route::get('/', function () {
    return view('welcome');
});
Route::resource('Mycrud', 'MYCRUDController');

#11: Edit your MYCRUDController File you can locate inside the app > Http > controllers > MYCRUDController

#12: Edit MyCRUDController File and add following codes to return the views.


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

#13:- Edit the create.blade.php and add {{csrf_field}} for security purpose.

@extends('master')
@section('content')
<div class="container">
  <form method="post" action="{{url('crud')}}">
    <div class="form-group row">
      {{csrf_field()}}
      <label class="col-sm-2 col-form-label col-form-label-lg">Title</label>
      <div class="col-sm-10">
        <input type="text" class="form-control form-control-lg" id="lgFormGroupInput" placeholder="title" name="title">
      </div>
    </div>
    <div class="form-group row">
      <label class="col-sm-2 col-form-label col-form-label-sm">Post content</label>
      <div class="col-sm-10">
        <textarea name="post" rows="8" cols="80"></textarea>
      </div>
    </div>

    <div class="form-group row">
      <label class="col-sm-2 col-form-label col-form-label-sm">Post author</label>
      <div class="col-sm-10">
        <input type="text" class="form-control form-control-lg"  placeholder="title" name="author">
      </div>
    </div>

    <div class="form-group row">
      <div class="col-md-2"></div>
      <input type="submit" class="btn btn-primary">
    </div>
  </form>
</div>
@endsection

#14: Now, It seems to Code the store function and use MyCrud model to insert the data right.

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Crud;

class CRUDController extends Controller
{
   
    public function index()
    {
        
    }

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

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $crud = new MyCrud([
          'title' => $request->get('title'),
          'post_content' => $request->get('post_content')
          'Post_author' => $request->get('post_author')
        ]);

        $crud->save();
        return redirect('/mycrud');
    }

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

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

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

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        //
    }
}

#15:- Now need to create a protected field $fillable in the MyCrud model.

namespace App;

use Illuminate\Database\Eloquent\Model;

class Crud extends Model
{
    protected $fillable = ['title','post_content','post_author'];
}

#16: Let’s start Code in index() function Edit the MYCRUDController File.


namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Crud;

class CRUDController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $cruds = MyCrud::all()->toArray();
        
        return view('mycrud.index', compact('cruds'));
    }

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

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $crud = new MyCrud([
          'title' => $request->get('title'),
          'post_content' => $request->get('post_content'),
          'post_author' => $request->get('post_author')

        ]);

        $crud->save();
        return redirect('/Mycrud');
    }

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

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

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

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        //destroy
    }
}

#17: Edit the index.blade.php file and update it.


@extends('master')
@section('content')
  <div class="container">
    <table class="table table-dashed">
    <thead>
      <tr>
        <th>ID</th>
        <th>Title</th>
        <th>Post Content</th>
        <th>Post Author</th>
      </tr>
    </thead>
    <tbody>
      @foreach($cruds as $post)
      <tr>
        <td>{{$post['id']}}</td>
        <td>{{$post['title']}}</td>
        <td>{{$post['post_content']}}</td>
        <td>{{$post['post_author']}}</td>
      </tr>
      @endforeach
    </tbody>
  </table>
  </div>
@endsection

#18: need to Add Edit and Delete Button for perform Edit/Delete Operation in the index.blade.php


@extends('master')
@section('content')
  <div class="container">
    <table class="table">
    <thead>
      <tr>
        <th>ID</th>
        <th>Title</th>
        <th>Post Content</th>
        <th>Post Author</th>
        <th colspan="2">Action</th>
      </tr>
    </thead>
    <tbody>
      @foreach($cruds as $post)
      <tr>
        <td>{{$post['id']}}</td>
        <td>{{$post['title']}}</td>
        <td>{{$post['post_content']}}</td>
         <td>{{$post['post_author']}}</td>
        <td><a href="{{action('MyCRUDController@edit', $post['id'])}}" class="btn btn-warning">Edit Post</a></td>
        <td><a href="{{action('MyCRUDController@destroy', $post['id'])}}" class="btn btn-danger">Delete Post</a></td>
      </tr>
      @endforeach
    </tbody>
  </table>
  </div>
@endsection

#19: Write an edit function in MYCRUDcontroller to pass the content to the edit.

public function edit($id)
    {
        $crud = MyCrud::find($id);
        
        return view('mycrud.edit', compact('crud','id'));

    }

    

#20: Need to create an Edit view to update the edit data. all changes will done inside the edit.blade.php file.


@extends('master')
@section('content')
<div class="container">
  <form method="post" action="{{action('MYCRUDController@update', $id)}}">
    <div class="form-group row">
      {{csrf_field()}}
       <input name="_method" type="hidden" value="PATCH">
      <label  class="col-sm-2 col-form-label col-form-label-lg">Title</label>
      <div class="col-sm-10">
        <input type="text" class="form-control form-control-lg"  placeholder="title" name="title" value="{{$crud->title}}">
      </div>
    </div>
    <div class="form-group row">
      <label class="col-sm-2 col-form-label col-form-label-sm">Post content</label>
      <div class="col-sm-10">
        <textarea name="post_content" rows="8" cols="80">{{$crud->post_content}}</textarea>
      </div>
    </div>

    <div class="form-group row">
      <label for="smFormGroupInput" class="col-sm-2 col-form-label col-form-label-sm">Post author</label>
      <div class="col-sm-10">
        <input type="text" class="form-control form-control-lg"  placeholder="title" name="author" value="{{$crud->author}}">
      </div>
    </div>

    <div class="form-group row">
      <div class="col-md-2"></div>
      <button type="submit" class="btn btn-primary">Update</button>
    </div>
  </form>
</div>
@endsection


#21: Write an update() function to update the records in the MYCRUDController.

public function update(Request $request, $id)
    {
        $crud = MyCrud::find($id);
        $crud->title = $request->get('title');
        $crud->post_content = $request->get('post_content');
        $crud->post_author = $request->get('post_author');
        $crud->save();
        return redirect('/mycrud');
    }

    

#22: Now, last but not least Need to delete form to delete the post data based on their ID. you need to edit the index.blade.php file for done that.

@extends('master')
@section('content')
  <div class="container">
    <table class="table">
    <thead>
      <tr>
        <th>ID</th>
        <th>Title</th>
        <th>Post Content</th>
        <th>Post Author</th>
        <th colspan="2">Post Action</th>
      </tr>
    </thead>
    <tbody>
      @foreach($cruds as $post)
      <tr>
        <td>{{$post['id']}}</td>
        <td>{{$post['title']}}</td>
        <td>{{$post['post_content']}}</td>
        <td>{{$post['post_author']}}</td>
        <td><a href="{{action('MYCRUDController@edit', $post['id'])}}" class="btn btn-warning">Edit Post</a></td>
        <td>
          <form action="{{action('MYCRUDController@destroy', $post['id'])}}" method="post">
            {{csrf_field()}}
            <input name="_method" type="hidden" value="DELETE">
            <button class="btn btn-danger" type="submit">Delete Post</button>
          </form>
        </td>
      </tr>
      @endforeach
    </tbody>
  </table>
  </div>
@endsection

#23: Finally need to write the destroy() method in the MYCRUDController to delete the data.


public function destroy($id)
    {
      $crud = MyCrud::find($id);
      $crud->delete();

      return redirect('/mycrud');
    }

Output:

CRUD Operations

Krishna Gupta

Krishna Ballabh Gupta is a Gold Medalist Full Stack Developer & Algorithm Designer and Founder of TechnologyShouters. He generally Blogs about Python, JavaScript, jQuery, AngularJS, Database, PHP, AJAX and something that interesting.

Related Posts

Create Account



Log In Your Account



1Subscribe to Our Live Updates.