13. PHP 7.4.2, Bootstrap 4.3.1 : Laravel 6.12 CRUD tutorialphporacle

2020.02.17 Tested on newest Windows 10 64 bit, XAMPP – works !

http://localhost:8083/laravel6/public/shows/create
http://localhost:8083/laravel6/public/shows/ – here are del and edit buttons
http://localhost:8083/laravel6/public/shows/1/edit

https://appdividend.com/2019/09/12/laravel-6-crud-example-laravel-6-tutorial-for-beginners/ 2019.12.10 by Krunal

https://github.com/KrunalLathiya/Laravel6CRUDExample

http://dev1:8083/fwphp/glomodul/blog/?i/read_post/id/43#crequest is URL to show this article in my Blog (Msg module).

1. MySQL DB 2. M 3. C requeest 4. Bootstrap 4

5. CreRequest 6. validateSaveResponse

7. RvDisplayresponse 8. CUD 9. D

Install Laravel 6.12

1. MySQL DB 2. M 3. C requeest 4. Bootstrap 4

5. CreRequest 6. validateSaveResponse

7. RvDisplayresponse 8. CUD 9. D

Install Laravel 6.12

For some reason WordPress editor changes pasted text to uppercase !! eg :
composer create-project –prefer-dist laravel/laravel laravel6

~ 130 MB – one of reasons why I do not like such developing SW (included is Oracle Forms). If error – how debug 130 MB ?
B12phpfw has 20-30 kB code to debug (few hundert lines) using own debugging and Xdebug which both work excellent.
If there were somebody who guaranties support (for many years) then huge developing SW would be better. Stories about security… are not true – we only need good help about implement security and some features (which is difficult to find).

cd J:\xampp\htdocs\laravel6\
install the frontend dependencies :

npm install

Step 1. Configure MySQL DB

Values inside .env file are loaded inside the files from the config directory.

J:\xampp\htdocs\laravel6\.env file

Where J:\xampp\htdocs\laravel6\ is root of our laravel project.

If you make changes to .env file then don’t forget to restart server ( if you are using laravel dev server). If you are using virtual host and changes don’t seem to take effect then run :

cd J:\xampp\htdocs\laravel6\

php artisan config:clear

(This command will clear the configuration cache) in your terminal.

Laravel always ships with the migration files, so you can generate DB tables so :

php artisan migrate

migrations table created successfully. Laravel comes with three migrations which are used for authentication. Their file names are prepended with a timestamp :

Migrating: 2014_10_12_000000_create_users_table
Migrated: 2014_10_12_000000_create_users_table (0.48 seconds)
Migrating: 2014_10_12_100000_create_password_resets_table
Migrated: 2014_10_12_100000_create_password_resets_table (0.44 seconds)
Migrating: 2019_08_19_000000_create_failed_jobs_table
Migrated: 2019_08_19_000000_create_failed_jobs_table (0.27 seconds)

select * from information_schema.tables where table_schema = ‘z_laravel6’ and table_name = ‘migrations’ and table_type = ‘BASE TABLE’

Step 2. M – create model and migration files

Database migration is used to save details about DB table, so you don’t have to manually generate all of the tables by going to the database interface or phpmyadmin or …
We can develop migrations using artisan with ‘make: migration’ command.
Type the following command to create a model and migration files.

cd J:\xampp\htdocs\laravel6\

php artisan make:model Show -m

It will create migration files inside database/migrations directory J:\xampp\htdocs\laravel6\database\migrations\ :

J:\xampp\htdocs\laravel6\database\migrations\Show.php file – model name has to be singular
[timestamp]_create_shows_table.php migration file – migration name should be plural to automatically find table name.

//J:\xampp\htdocs\laravel6\database\migrations\2020_02_17_074520_create_shows_table.php

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

class CreateShowsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     *
     * Create table in DB using the following command.
     *    php artisan migrate
     * execute up() function ee run all migrations and create defined tbls (incremental changes).
     *
     * To reverse the migrations :
     *    php artisan migrate:rollback which will execute the down() function.
     *
     */
    public function up()
    {
        Schema::create('shows', function (Blueprint $table) {
           $table->bigIncrements('id');        //**php artisan make:model Show -m created**
              $table->string('show_name');   //**I added**
              $table->string('genre');
              $table->float('imdb_rating');
              $table->string('lead_actor');
           $table->timestamps();
        });
    }

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

If you want to create the migration but have a different table name in mind, then you can explicitly define a table name with ‘create‘ flag.

up() function is used for creating/updating tables, columns, and indexes Inside up() function, We have the Schema: create(‘table_name,’ callback) method which will be used for creating the new table.
1. Inside a callback, we have $table->bigIncrements(‘id’) which will create auto_increment integer column with the primary key and argument ‘id’ is the name of a column.
2. Second is $table->timestamps() which will create the two timestamp columns created_at and updated_at.

down() function is used for reversing an operation done by up() method

   $table->bigIncrements('id');        //**php artisan make:model Show -m created**       
      $table->string('show_name');   //**I added 4 columns**        
      $table->string('genre');      
      $table->float('imdb_rating');          
      $table->string('lead_actor');            
   $table->timestamps();  //**php artisan make:model Show -m created**

Create table in DB using the following command :

php artisan migrate

which will execute up() function ee run all migrations and create defined tbls (incremental changes).

To reverse the migrations :

php artisan migrate:rollback

which will execute down() function.

Now, add the fillable property inside file :

J:\xampp\htdocs\laravel6\app\Show.php

// J:\xampp\htdocs\laravel6\app\Show.php
namespace App;
use Illuminate\Database\Eloquent\Model;

/*
* We can specify all the properties to modify the behavior of the model.
* We can write a $table property which is used to determine a name of the table that this model will interact with in the future operations.
* By default, It will define a table name as the plural of the model name, e.g., shows table for Show model and users table for User model.
* When you don't need to use timestamps on your table, then you will also have to specify the $timestamps property and set it to false value in your Model because Laravel expects your table to have the created_at and updated_at timestamp columns.
*/
class Show extends Model
{
   protected $fillable = [
      'show_name', 'genre', 'imdb_rating', 'lead_actor'
   ];
}

Step 3. C – Create routes and controller

First, create the ShowController using the following command.

php artisan make:controller ShowController –resource

Note that we have also added the — resource flag which will define six methods inside the ShowController namely:

Index (used for displaying a list of Shows)
Create (will show the view with a form for creating a Show)
Store (used for creating a Show inside the database. Note: create method submits to store method)
Show (will display a specified Show)
Edit (will show the form for editing a Show. Form will be filled with the existing Show data)
Update (Used for updating a Show inside the database. Note: edit submits to update method)
Destroy (used for deleting a specified Show)

J:\xampp\htdocs\laravel6\routes\web.php

add Route::resource… line of code :

// ShowController.php
Route::get('/', function () {
    return view('welcome');
});

Route::resource('shows', 'ShowController');

We can pass dynamic parameters with {} brackets, and you might have noticed that show, update, and destroy has the same url but different methods, so its legit.

Just like resource flag, laravel has a method called resource() that will generate all the above routes. You can also use that method instead of specifying them individually like above.

Actually, by adding Route::resource… line, we have registered multiple routes for our application. We can check it so :

php artisan route:list

Method	URI	Name	Action	Middleware
GET/HEAD	/		Closure	web
GET/HEAD	api/user		Closure	api,auth:api
GET/HEAD	shows	shows.index	App\Http\Controllers\ShowController@index	web
POST	shows	shows.store	App\Http\Controllers\ShowController@store	web
GET/HEAD	shows/create	shows.create	App\Http\Controllers\ShowController@create	web
GET/HEAD	shows/{show}	shows.show	App\Http\Controllers\ShowController@show	web
PUT/PATCH	shows/{show}	shows.update	App\Http\Controllers\ShowController@update	web
DELETE	shows/{show}	shows.destroy	App\Http\Controllers\ShowController@destroy	web
GET/HEAD	shows/{show}/edit	shows.edit	App\Http\Controllers\ShowController@edit	web

Step 4. Configure Bootstrap 4

Right now (2019.12.10), there are some issues, or somehow I do not see any code inside the public >> css >> app.css file. I have already compiled the CSS and JS file by the

npm run dev

command, but still, the app.css file is empty.

One possible solution is to copy code of previous version’s Laravel’s app.css file and paste it here :

J:\xampp\htdocs\laravel6\public\css\ap.css

Link of the previous css file is :
https://raw.githubusercontent.com/KrunalLathiya/Laravel58CRUD/master/public/css/app.css

Second possible solution is this. This new scaffolding is only available in Laravel 6 and not in the earlier versions like Laravel 5.8 or 5.7.

While Laravel 6 does not dictate which JavaScript or CSS pre-processors you use, it does provide the essential starting point using Bootstrap and Vue that will be helpful for many projects.

By default, the Laravel uses the NPM to install both of these frontend packages.

Bootstrap and Vue scaffolding provided by Laravel is located in the laravel/ui Composer package, which you can install using Composer so :

composer require laravel/ui –dev

Once laravel/ui package has been installed, and you may install the frontend scaffolding using the ui Artisan command:

// Generate basic scaffolding…
php artisan ui vue
php artisan ui react

// Generate login / registration scaffolding…
php artisan ui vue –auth
php artisan ui react –auth

Step 5. Create request (form to insert show tbl row)

Create the views.

http://localhost:8083/laravel6/public/shows/create

Inside the J:\xampp\htdocs\laravel6\resources\views folder where is only welcome.blade.php , create view files :

C create.blade.php
U edit.blade.php

R index.blade.php Inside the views folder, we also need to create the layout file. So create a file inside the views folder called

layout.blade.php :

our main template file, and all the other view files will extend this layout.blade.php file.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Laravel 6 CRUD Example</title>
<link href="{{ asset('css/app.css') }}" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
@yield('content')
</div>
<script src="{{ asset('js/app.js') }}" type="text/js"></script>
</body>
</html>

Here, we have already included the Bootstrap 4 by adding the app.css.

create.blade.php :

@extends('layout')

@section('content')
<style>
  .uper {
    margin-top: 40px;
  }
</style>
<div class="card uper">
  <div class="card-header">
    Add Shows
  </div>
  <div class="card-body">
    @if ($errors->any())
      <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
              <li>{{ $error }}</li>
            @endforeach
        </ul>
      </div><br />
    @endif
      <form method="post" action="{{ route('shows.store') }}">
          <div class="form-group">
              @csrf
              <label for="name">Show Name:</label>
              <input type="text" class="form-control" name="show_name"/>
          </div>
          <div class="form-group">
              <label for="price">Show Genre :</label>
              <input type="text" class="form-control" name="genre"/>
          </div>
          <div class="form-group">
              <label for="price">Show IMDB Rating :</label>
              <input type="text" class="form-control" name="imdb_rating"/>
          </div>
          <div class="form-group">
              <label for="quantity">Show Lead Actor :</label>
              <input type="text" class="form-control" name="lead_actor"/>
          </div>
          <button type="submit" class="btn btn-primary">Create Show</button>
      </form>
  </div>
</div>
@endsection

Open ShowController.php file, and on the create() function, we need to return the view, and that is a create.blade.php file.

// ShowController.php

public function create()
{
   return view('create'); // create.blade.php file
}

Go to a http://localhost:8000/books/create or http://laravel6.test/shows/create

http://localhost:8083/laravel6/public/shows/create

You will see form “Create show”.
Add Shows Show Name: Show Genre : Show IMDB Rating : Show Lead Actor : Create show button

Step 6. Add Laravel Validation rules and save data

First step inside the ShowController.php is that import namespace of Show model inside the ShowController.php file.


// ShowController.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Show; // import namespace of Show model

Write following code inside ShowController.php file’s store() function.

public function store(Request $request)
{
        $validatedData = $request->validate([
            // check for all four fields of the form
            // If incoming data fail any of the rules, then it will directly go to the form with the error messages
            // $request object parameter will be used to access form data
            'show_name' => 'required|max:255',
            'genre' => 'required|max:255',
            'imdb_rating' => 'required|numeric',
            'lead_actor' => 'required|max:255',
        ]);

        $show = Show::create($validatedData);

        return redirect('/shows')->with('success', 'Show is successfully saved');
 }

The first thing you want to do is validate a form of data.
We can use a $request->validate() function for validation, which will receive the array of validation rules.
Validation rules is an associative array.
Key will be the field_name and value with being the validation rules.

The second parameter is the optional array for custom validation messages.
Rules are separated with pipe sign “|.” We are using the most basic validation rules https://laravel.com/docs/5.8/validation#available-validation-rules .

First is “required,” which means the field_name should not be empty. (“nullable” rule is vice versa), “string” means it should be the string value, “min” is the limit of minimum characters for a string in an input field and “max” is the maximum characters. “unique:table, column” with see if the same value does not exists in the database (comes handy for storing emails or any other unique data).

If the validation fails, then it will redirect us back. After the validation, we are creating a new book and save that book in the database.
We need to loop through that error messages inside the create.blade.php file which we have already done it.

If you leave all the form fields empty, then you will find an error message at page top.

Now, if you fill the form fields correctly, then it will create a new row in the database.

Step 7. V – display response

Display the data.

http://localhost:8083/laravel6/public/shows/

Write the ShowController’s index function to return an index view with data fetched from a database. Write the following code inside the index() function.

// ShowController.php

public function index()
{
     $shows = Show::all();

     return view('index', compact('shows'));
}

Create a file inside the views folder :

index.blade.php

@extends('layout')

@section('content')
<style>
  .uper {
    margin-top: 40px;
  }
</style>
<div class="uper">
  @if(session()->get('success'))
    <div class="alert alert-success">
      {{ session()->get('success') }}  
    </div><br />
  @endif
  <table class="table table-striped">
    <thead>
        <tr>
          <td>ID</td>
          <td>Show Name</td>
          <td>Show Genre</td>
          <td>Show IMDB Rating</td>
          <td>Lead Actor</td>
          <td colspan="2">Action</td>
        </tr>
    </thead>
    <tbody>
        @foreach($shows as $show)
        <tr>
            <td>{{$show->id}}</td>
            <td>{{$show->show_name}}</td>
            <td>{{$show->genre}}</td>
            <td>{{number_format($show->imdb_rating,2)}}</td>
            <td>{{$show->lead_actor}}</td>
            <td><a href="{{ route('shows.edit', $show->id)}}" class="btn btn-primary">Edit</a></td>
            <td>
                <form action="{{ route('shows.destroy', $show->id)}}" method="post">
                  @csrf
                  @method('DELETE')
                  <button class="btn btn-danger" type="submit">Delete</button>
                </form>
            </td>
        </tr>
        @endforeach
    </tbody>
  </table>
<div>
@endsection

We have used the PHP number_format() function to print the IMDB Rating float value.

Here, we have looped through the show’s array and display the data in the table format.

Also, we have added two buttons for edit and delete operation.

Step 8. CUD

Create Edit and Update Operation.
Add following code inside ShowController.php edit function :

// ShowController.php

public function edit($id)
{
     $show = Show::findOrFail($id);

     return view('edit', compact('show'));
}

Create new file inside the views folder

edit.blade.php

@extends('layout')

@section('content')
<style>
  .uper {
    margin-top: 40px;
  }
</style>
<div class="card uper">
  <div class="card-header">
    Update Shows
  </div>
  <div class="card-body">
    @if ($errors->any())
      <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
              <li>{{ $error }}</li>
            @endforeach
        </ul>
      </div><br />
    @endif
    <form method="post" action="{{ route('shows.update', $show->id) }}">
          <div class="form-group">
              @csrf
              @method('PATCH')
              <label for="name">Show Name:</label>
              <input type="text" class="form-control" name="show_name" value="{{ $show->show_name }}"/>
          </div>
          <div class="form-group">
              <label for="price">Show Genre :</label>
              <input type="text" class="form-control" name="genre" value="{{ $show->genre }}"/>
          </div>
          <div class="form-group">
              <label for="price">Show IMDB Rating :</label>
              <input type="text" class="form-control" name="imdb_rating" value="{{ number_format($show->imdb_rating, 2) }}"/>
          </div>
          <div class="form-group">
              <label for="quantity">Show Lead Actor :</label>
              <input type="text" class="form-control" name="lead_actor" value="{{ $show->lead_actor }}"/>
          </div>
          <button type="submit" class="btn btn-primary">Update Show</button>
      </form>
  </div>
</div>
@endsection

In this file, you can show the values of the particular row using its unique id inside the form fields.

So, when you hit this URL: http://localhost:8000/shows/1/edit or http://laravel6.test/shows/1/edit, you will see row edit form.

Create Edit and Update Operation

Add following code inside ShowController update() function.

// ShowController.php

public function update(Request $request, $id)
{
        $validatedData = $request->validate([
            'show_name' => 'required|max:255',
            'genre' => 'required|max:255',
            'imdb_rating' => 'required|numeric',
            'lead_actor' => 'required|max:255',
        ]);
        Show::whereId($id)->update($validatedData);

        return redirect('/shows')->with('success', 'Show is successfully updated');
}

So now, you can edit and update all the data into the database successfully.

Step 9. D – create delete row functionality

Write following code inside ShowController destroy function to to remove show row :

// ShowController.php
public function destroy($id)
{
        $show = Show::findOrFail($id);
        $show->delete();

        return redirect('/shows')->with('success', 'Show is successfully deleted');
}

We have completed a Laravel 6 CRUD operations tutorial with the example from scratch.

If you are interested in FrontEnd framework like Vue.js with Laravel or Angular with Laravel (Code is on Github as for this tutorial) :

Vue Laravel CRUD example https://appdividend.com/2018/11/17/vue-laravel-crud-example-tutorial-from-scratch/
Angular Laravel Tutorial Example https://appdividend.com/2017/09/22/laravel-5-5-angular-4-tutorial-example-scratch/

Laravel 6 continues the improvements made in Laravel 5.8 by introducing the following features.

Semantic versioning – serverless deployment platform for Laravel, powered by AWS
Compatibility with Laravel Vapor
Improved authorization responses
Job middleware
Lazy collections
Sub-query improvements
The extraction of frontend scaffolding to the laravel/ui Composer package

https://appdividend.com/2018/10/31/how-to-use-php-in-visual-studio-code/ – For PHP Developers.

See https://github.com/slavkoss/fwphp/ (J:\awww\www\readme.md).

B12phpfw does not use jQuery and AJAX, see examples in https://github.com/slavkoss/fwphp/tree/master/fwphp/glomodul/z_examples/AJAX

Install Laravel 6.12

Install Laravel 6.12

For some reason WordPress editor changes pasted text to uppercase !! eg : composer create-project –prefer-dist laravel/laravel laravel6

npm install

Step 1. Configure MySQL DB

J:\xampp\htdocs\laravel6\.env file

php artisan config:clear

php artisan migrate

Step 2. M – create model and migration files

php artisan make:model Show -m

//J:\xampp\htdocs\laravel6\database\migrations\2020_02_17_074520_create_shows_table.php

php artisan migrate

php artisan migrate:rollback

J:\xampp\htdocs\laravel6\app\Show.php

Step 3. C – Create routes and controller

php artisan make:controller ShowController –resource

J:\xampp\htdocs\laravel6\routes\web.php

php artisan route:list

Step 4. Configure Bootstrap 4

npm run dev

J:\xampp\htdocs\laravel6\public\css\ap.css

composer require laravel/ui –dev

Step 5. Create request (form to insert show tbl row)

layout.blade.php :

create.blade.php :

Step 6. Add Laravel Validation rules and save data

Step 7. V – display response

index.blade.php

Step 8. CUD

edit.blade.php

Step 9. D – create delete row functionality

Leave a Reply

For some reason WordPress editor changes pasted text to uppercase !! eg :
composer create-project –prefer-dist laravel/laravel laravel6