Laravel 7 ajax crud example with image upload. In this tutorial, You will learn how to implement laravel ajax crud app with image upload and preview.
As well as you will learn how to use DataTables with ajax crud example and image upload with preview. And as well as you will learn how to insert data using ajax in laravel, how to update or edit mysql data in laravel using ajax, and how to delete data from mysql db with datatables in laravel.
This laravel ajax crud example with image upload and preview tutorial guide you step by step on how to implement ajax crud app with image upload and preview using jquery, dataTable js, and bootstrap modal. This laravel ajax crud web app is not reloading the whole web page.
Laravel Ajax CRUD Example with Image Upload
Follow the following steps and build laravel ajax crud app with image upload and preview using jQuery, dataTabels js and bootstrap modals:
- Step 1: Install Fresh laravel Setup
- Step 2: Set database Credentials
- Step 3: Create Migration And Model
- Step 4: Install Yajra DataTables In App
- Step 5: Add Route
- Step 6: Create Controller
- Step 7: Create Blade View
- Step 8: Run Development Server
Step 1: Install Fresh Laravel Setup
In this step, you need to download or install a fresh new setup in your system. So use the laravel composer command to download fresh new setup in your system. as follow:
composer create-project --prefer-dist laravel/laravel blog
Step 2: Set database Credentials
Next step, you have downloaded the fresh new setup of laravel in your system. So set the database credentials in your application. Let’s open your project .env file and set the database credentials here.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=here your database name here
DB_USERNAME=here database username here
DB_PASSWORD=here database password here
Recommended:- Laravel Ajax Get Data From Database
Step 3: Create Migration And Model
In this step, you need to create product table migration and create Product Modal using bellow command:
1
php artisan nake:modal Product -m
Navigate database/migrations/ and open create_products_table.php file. Then update the following code into this file:
<?php
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``->id();
$table``->string(``'title'``);
$table``->string(``'product_code'``)->nullable();
$table``->string(``'image'``)->nullable();
$table``->text(``'description'``);
$table``->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists(``'products'``);
}
}
Now run the following command:
php artisan migrate
This command will create tables in your database.
Next, Navigate to App directory and open Product.php file and then update the following code to into** Product.php** file as follow:
app\Product.php
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Product extends Model
{
protected $fillable = [``'title'``,``'product_code'``,``'description'``,``'image'``];
}
Step 4: Install Yajra Datatables Package in Laravel
In this step, Install Yajra Datatables Packages in your laravel application. Use the below command and install yajra packages in your laravel application.
composer require yajra/laravel-datatables-oracle
After successfully Install Yajra Datatables Packages in your laravel application. Next step, open config/app.php file and add service provider and aliases.
config/app.php
'providers' => [
Yajra\Datatables\DatatablesServiceProvider::class,
],
'aliases' => [
'Datatables' => Yajra\Datatables\Facades\Datatables::class,
]
#laravel #laravel 7 #ajax
