Hello Folks, we are back with something very interesting topic. Today we are going to learn how we can record and upload the video to the server from the browser using Js & Laravel-8. So lest’s start.

If you are new and don’t know how to setup laravel then don’t worry you can start from scratch by clicking this link Laravel Setup & Simple CRUD App.

In this demo, we are going to use JS and Laravel-8 and also we will user Ajax to upload a recorded video. Let’s get started step by step.
Note: we are not going to show how to set up laravel here so you can check out our  post Laravel Setup & Simple CRUD App

After installing laravel just follow these steps.

We will create Model, Controller in a single command

 artisan make:model Media -mcr 

A migration file will be created in the database/migrations directory, and we need to create our schema. I added file_name (text) column. I used $table->timestamps(); it will set created_at and updated_at automatically.
Then run the migration command. And also don’t forget to add file_name in App\Models\Media.php fillable.

php artisan migrate

So we have to set a resource route in routes/web.php

use App\Http\Controllers\MediaController;

At top of routes/web.php and add following line after that.

Route::resource('videos', MediaController::class); 

We already learned how to set views and layout in the previous post if you haven’t then just check checkout by clicking this link Laravel Setup & Simple CRUD App.

Now move to the listing page index.blade.php in this you can see a listing of all videos and also have a delete option.

Now we had added 2 video tags one for show recording and another one will show your recorded clip preview.

There is a start button from where you can start recording. Stop button to stop recording, Save button to save the video to the table, and upload the video file to the server.Download the button for recorded video download.

Ideally, these elements aren’t created until it’s confirmed that The client supports video/camera, but for the sake of illustrating the elements involved, they are created with markup (not JavaScript).

Here the preview will be hidden until video recording stoped.

Modern browsers can have a direct line to the camera allowing us to build experiences that are fully integrated with the web page and the user will never leave the browser.

Acquire access to the camera : navigator.mediaDevices.getUserMedia, a simple method sets thevideo element’s src to the user’s live camera/webcam. Calling the start method of the video then starts the element’s live streaming video connection. That’s all that’s required to connect your camera to the browser! Here we are going to record the only video so the audio parameter will be false.

navigator.mediaDevices.getUserMedia({
	video: true,
	audio: false
})

Here we had set a time limit for 5 seconds so video recording automatically will be stopped after 5 seconds. You can change as per your requirement, you have to do is just pass duration in milliseconds like 5000 for 5 seconds.

So we have set console.log to track all the activity of the recording task.

A blob is a data type that can store binary data. This is different than most other data types used in databases, such as integers, floating-point numbers, characters, and strings, which store letters and numbers.

Since blobs can store binary data, they can be used to store images or other multimedia files. For example, a photo album could be stored in a database using a blob data type for the images, and a string data type for the captions. Because blobs are used to store objects such as images, audio files, and video clips, they often require significantly more space than other data types.

after the recording stopped we need to set a preview so the user can watch the recorded video he can download or upload to the server.

finally how our recording script looks like.

As shown above we had set form object to append all the data and then we passed data to the controller. Note that since we passing media objects we need to use the POST method so it’s required CSRF TOKEN for submit data. So we can set CSRF TOKEN to the meta tag so we can use it anywhere on laravel website.

<meta name="csrf-token" content="{{csrf_token()}}">

document.querySelector('meta[name="csrf-token"]').getAttribute('content')

Now we have to upload the video file to the server. So we need a directory where all the uploaded videos will be moved. We are using storage to move the file so we need to link storage.
Run the following command to link storage

php artisan storage:link

You will see the storage directory like a shortcut icon in your public folder. Now just need to add the directory name and, it will create if that directory not exists and move the uploaded file to the server.

So finally how our App\Http\Controllers\MediaController.php looks like:

Of course, you could add some Audio, Image, and GIF from Browser but I’ll save that for another post. For now, however, simply accessing the camera in our browser moves us miles ahead. Have fun recording videos within your browser!

Hello Folks, we are here with something very interesting topic for php fans. Today we will see a simple CRUD in laravel.

Laravel is a web application framework with an expressive, elegant syntax. Laravel Is MVC(Model View Controller) architecture.

Laravel has a large and growing community which makes it easy for new developers to find solutions and help with challenges. Laravel releases a new version twice in a year, and the latest version which is Laravel 8 was released on the 8th Sept 2020.

This article will help you to create basic CRUD in laravel. Don’t worry if you are a beginner we will start from scratch. Laravel has many inbuilt functionalities ready to use which makes laravel a magical framework.

A couple of things you need to have in your system before starting.

Here we are going to use MySQL. So if you have wamp or xampp then you don’t need to do anything additional.

You must require a composer in your system. Now the question is what is the composer. In short, a Composer is a tool for dependency management in PHP. It allows you to declare the libraries your project depends on and it will manage (install/update) them for you.

We will learn more about the composer in the next post. Now you can install the composer by clicking here.

Moving forward to laravel-8 simple CRUD app we will go step by step so it makes it more easy and understandable.

Go to you command prompt and run the following command :

composer create-project laravel/laravel=8.0 laravel_crud

It will take a few minutes depending on your internet speed. It will download the laravel framework and required dependencies.

Using this command you don’t need to copy .env.example to .env and also you don’t need to generate APP_KEY this is a new version of larave

After a successful full install, you will see a message. And Larave APP is ready.

Run command in your terminal

 php artisan serv

You will see the following message.

Starting Laravel development server: http://127.0.0.1:8000

Now run 127.0.0.1:8000 in your browser you will see laravel landing page

Open PHPMyAdmin and create a new database. My database name is laravel_crud

Open the .env file on your IDE or text editor

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_crud
DB_USERNAME=root
DB_PASSWORD=

Change the DB_DATABASE to the name of your database and if you have set a username and password for your PHPMyAdmin, specify it, otherwise, leave the username as root and password blank.

Before moving forward you need to know about laravel migrations.

Migrations are like version control for your database, allowing your team to modify and share the application’s database schema. Migrations are typically paired with Laravel’s schema builder to build your application’s database schema.

If you have ever had to tell a teammate to manually add a column to their local database schema, you’ve faced the problem that database migrations solve.
you can read more about migration by clicking this link.

I will elaborate on it in the next post. Now we will continue to CRUD.

You can see migration files in the following path :

\database\migrations

Laravel gives default migration for the user, password reset & jobs

You can create different migrations as per your requirement. Now we are creating migration for the product table. So go to the terminal or Command prompt and write the following command. there is a quick twist. To create migration we need to run the following command

php artisan make:migration create_products_table --create=products

But we have to create Models & controller so we will create migration , model & controller by using one command :

php artisan make:model Product -mcr

You can see 3 files created in your project.

A migration file will be created in the database/migrations folder, and we need to create our schema. I added name (string), description(text), sku(string), price (float).

I used $table->timestamps(); it will set created_at and updated_at automatically.

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

class CreateProductsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('products', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('name')->nullable();
            $table->text('description')->nullable();
            $table->decimal('product_price', 12, 2)->default(0);
            $table->timestamps();
        });
    }

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

Before we run our migration command, we need to set the default string length, else, we are going to run into errors So go to

app/Providers/AppServiceProvider.php

/**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        Schema::defaultStringLength(191);
    }

to the boot function, also add At the top

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Facades\Schema;

Finally, we run our migration command

php artisan migrate

We need to add routes for our CRUD operations, Laravel provides a resource route for us that will take care of the CRUD, that is a route to Create, another route to Retrieve, a separate route to Update, and finally a route to Delete.

So head up to routes\web.php and add our resource route

 Route::resource(‘products’, ProductController::class); 

ProductController::class this was introduced in this version, Laravel 8 does not know where to call the function from
use App\Http\Controllers\ProductController’

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ProductController;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

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

Route::resource('products', ProductController::class);

You can find the following methods in the controller folder
app/Http/Controllers/ProjectController.php

I had mentioned the basic use of all resource methods. We will see each method in the future in this post.
Laravel 8 has created a folder called Models, which is not available in the previous version, so our project model is found in the app/Models/Product.php

You need to add fillable to insert column value in DB. We create a method of the model so we need to specify which column should be created.

app/Models/Product.php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Product extends Model
{
    use HasFactory;
    public $timestamps = true;

    protected $fillable = [
        'name',
        'description',
        'product_price',
    ];
}

Now move to the front end views. Larvel has a blade file structure for frontend. It’s necessary to follow the directory structure to interact with our app easily. So we will manage by the following structure.

If we are creating another module then we can add a new dir and put all the blade files in that folder so it looks clean and easy to manage.

But we will create a form.blade file so we no need to manage to create & edit separate files.

Here \resources\views\layout\app.blade.php looks like this

<html>

<head>
    <title>App Name - @yield('title')</title>

    <!-- Bootstrap -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet">

    <style>
        .pagination{
            display: block;
        }
        .pagination nav{display: block;}
        .pagination nav .rounded-md svg{width: 10px;}
    </style>

    <!-- Font Awesome JS -->
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js"
        integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous">
    </script>
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js"integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous">
    </script>

</head>

<body>

    <div class="container">
        @yield('content')
    </div>

</body>

</html>

We need to create index.blade.php in the product folder. Need to extend the layout file. We created \resources\views\layout\app.blade.php file and it will be the base of all views. Here we can set css and js

You can find we have added some css for pagination. Now move to resources\views\products\index.blade.php file you can find there is a table which has a listing of products and also has an action to edit, view, delete.

Move to app\Http\Controllers\ProductController.php you can find index() for render view and data.

app\Http\Controllers\ProductController.php

/**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
         $products = Product::latest()->paginate(5);

        return view('products.index', compact('products'))
            ->with('i', (request()->input('page', 1) - 1) * 5);
    }

Here we had added pagination(5). Laravel provides inbuilt pagination features. Just we need to put pagination() and pass the number of rows you want and do nothing. For display pagination, we need to set

$products->links()

It will show all page numbers with next & previous navigation.

Now you can find a button beside the Laravel 8 crud title. From here we can navigate to add product form.

 <a class="btn btn-success" href="{{ route('products.create') }}" title="Create a product"> <i class="fas fa-plus-circle"></i>
                    </a>

app\Http\Controllers\ProductController.php

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

When we click on the button we redirect to the create form wish is our resources\views\products\form.blade.php

@extends('layouts.app')

@section('content')
    <div class="row">
        <div class="col-lg-12 margin-tb" style="margin-top:50px;">
            <div class="pull-left">
            <h2>{{(isset($product)) ? 'Edit' : 'Add New'}}  Product</h2>
            </div>
            <div class="pull-right">
                <a class="btn btn-primary" href="{{ route('products.index') }}" title="Go back"> <i class="fas fa-backward "></i> </a>
            </div>
        </div>
    </div>

    @if ($errors->any())
        <div class="alert alert-danger">
            <strong>Whoops!</strong> There were some problems with your input.<br><br>
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
    <form action="{{ (isset($product)) ? route('products.update', $product->id) : route('products.store') }}" method="POST" >
        @csrf
        @if(isset($product))
            @method('PUT')
        @endif

        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="form-group">
                    <strong>Name:</strong>
                    @php
                        $name = (old('name')) ? old('name') : ((isset($product->name)) ? $product->name : '');
                    @endphp
                    <input type="text" name="name" class="form-control" placeholder="Name" value="{{$name}}">
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="form-group">
                    <strong>Description:</strong>
                    @php
                        $description = (old('description')) ? old('description') : ((isset($product->description)) ? $product->description : '');
                    @endphp
                    <textarea class="form-control" style="height:50px" name="description" placeholder="description">{{$description}}</textarea>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="form-group">
                    <strong>Price:</strong>
                    @php
                        $price = (old('product_price')) ? old('product_price') : ((isset($product->product_price)) ? $product->product_price : '');
                    @endphp
                    <input type="number" name="product_price" class="form-control" placeholder="price" value="{{$price}}">
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12 text-center">
                <button type="submit" class="btn btn-primary">Submit</button>
            </div>
        </div>
    </form>
@endsection

This form used for add and edit as well. So we have passed the $product from the controller. You will find an edit function of the controller.

app\Http\Controllers\ProductController.php

/**
     * Show the form for editing the specified resource.
     *
     * @param  \App\Models\Product  $product
     * @return \Illuminate\Http\Response
     */
    public function edit(Product $product)
    {
        return view('products.form', compact('product'));
    }

It’s for code reusability. If there is a large number of fields and complex forms then we can use a separate view for the edit to avoid complexity.

Now move to the resources\views\products\show.blade.php Here we had shown details of the product is quite simple and easy. We have passed the project object from the controller.

app\Http\Controllers\ProductController.php

/**
     * Display the specified resource.
     *
     * @param  \App\Models\Product  $product
     * @return \Illuminate\Http\Response
     */
    public function show(Product $product)
    {
        return view('products.show', compact('product'));
    }

resources\views\products\show.blade.php

@extends('layouts.app')


@section('content')
    <div class="row">
        <div class="col-lg-12 margin-tb" style="margin-top:50px;">
            <div class="pull-left">
                <h2>  {{ $product->name }}</h2>
            </div>
            <div class="pull-right">
                <a class="btn btn-primary" href="{{ route('products.index') }}" title="Go back"> <i class="fas fa-backward "></i> </a>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <strong>Name:</strong>
                {{ $product->name }}
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <strong>Description:</strong>
                {{ $product->description }}
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <strong>Price:</strong>
                {{ $product->price }}
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <strong>Date Created:</strong>
                {{ date_format($product->created_at, 'jS M Y') }}
            </div>
        </div>
    </div>
@endsection

So basically we need to pass data to the controller Store method.

In this method we have to do backend validation. Click here to know more about laravel validation by clicking this link

When we submit the form data will be passed to the store method of ProductController. Here the first request will be validated, if data passes the validation then it will store it to the table.

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

        Product::create($request->all());

        return redirect()->route('products.index')
            ->with('success', 'Product created successfully.');
    }

Same for the update function but we have to pass the object of the product model and it will update that row.

/**
     * Remove the specified resource from storage.
     *
     * @param  \App\Models\Product  $product
     * @return \Illuminate\Http\Response
     */
    public function destroy(Product $product)
    {
        $product->delete();

        return redirect()->route('products.index')
            ->with('success', 'Product deleted successfully');
    }

We need to pass the object of the Product modal and it will delete that record that’s it.

So now ProductController looks like this.

<?php

namespace App\Http\Controllers;

use App\Models\Product;
use Illuminate\Http\Request;

class ProductController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
         $products = Product::latest()->paginate(5);

        return view('products.index', compact('products'))
            ->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('products.form');
    }

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

        Product::create($request->all());

        return redirect()->route('products.index')
            ->with('success', 'Product created successfully.');
    }

    /**
     * Display the specified resource.
     *
     * @param  \App\Models\Product  $product
     * @return \Illuminate\Http\Response
     */
    public function show(Product $product)
    {
        return view('products.show', compact('product'));
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  \App\Models\Product  $product
     * @return \Illuminate\Http\Response
     */
    public function edit(Product $product)
    {
        return view('products.form', compact('product'));
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \App\Models\Product  $product
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, Product $product)
    {
       $request->validate([
            'name' => 'required',
            'description' => 'required',
            'product_price' => 'required'
        ]);

        $product->update($request->all());

        return redirect()->route('products.index')
            ->with('success', 'Product updated successfully');
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  \App\Models\Product  $product
     * @return \Illuminate\Http\Response
     */
    public function destroy(Product $product)
    {
        $product->delete();

        return redirect()->route('products.index')
            ->with('success', 'Product deleted successfully');
    }
}

The whole demo project is available on GitHub so that you can see the code in context.