Welcome to Part 3 of the React Laravel 12 Ecommerce App Tutorial Series 🛒🚀 In this video, we’ll design the Product Page, Cart Page, and Checkout Page UI for our Ecommerce application using React JS frontend. These pages are essential for creating a complete online store where users can view products, add them to cart, and proceed to checkout. 🔥 What you’ll learn in this video: ✅ Design a Product Page UI with product details layout ✅ Create a Cart Page UI to show added products ✅ Build a Checkout Page UI for order summary & payment flow ✅ Structure pages for future backend API integration (Laravel 12) ✅ Build responsive and clean ecommerce pages using React Watch the video: 👉 Trash Icon : <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" className="bi bi-trash3" viewBox="0 0 16 16"> <path d="M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5M11 2.5v-1A1.5 1.5 0 0 0 9.5...
Create new Laravel Project using below command.
laravel new projectname
Create new database and connect it with your project in .env file
open .env file and update this.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=youdatabasename
DB_USERNAME=root
DB_PASSWORD=
Create Controller CropImageUploadController
php artisan make:controller CropImageUploadController
In Controller make index and store functions:
<?php
namespace App\Http\Controllers;
use App\Models\Image;
use Illuminate\Http\Request;
class CropImageUploadController extends Controller
{
public function index(){
return view('cropimage');
}
public function store(Request $request){
$folderPath = public_path('upload/'); //create folder upload public/upload
$image_parts = explode(";base64,", $request->image);
$image_type_aux = explode("image/", $image_parts[0]);
$image_type = $image_type_aux[1];
$image_base64 = base64_decode($image_parts[1]);
$imageName = uniqid() . '.png';
$imageFullPath = $folderPath.$imageName;
file_put_contents($imageFullPath, $image_base64);
$image = new Image();
$image->title = $imageName;
$image->save();
return response()->json(['success'=>'Crop Image Successfully Uploaded']);
}
}
Create migration and model using command:
php artisan make:model Image -m
In migration file code code will be :
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*/
public function up(): void
{
Schema::create('images', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('images');
}
};
run migration using below command:
php artisan migrate
Create blade file for crop image and code for it :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Crop, Resize and Upload Image Laravel</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="token" content="{{ csrf_token() }}"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.min.css"
integrity="sha512-zxBiDORGDEAYDdKLuYU9X/JaJo/DPzE42UubfBw9yg8Qvb2YRRIQ8v4KsGHOx2H1
/+sdSXyXxLXv5r7tHc9ygg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.js"
integrity="sha512-vUJTqeDCu0MKkOhuI83/MEX5HSNPW+Lw46BA775bAW
Ip1Zwgz3qggia/t2EnSGB9GoS2Ln6npDmbJTdNhHy1Yw=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<div class="container mt-5">
<div class="card">
<div class="card-header">
Laravel 10 Crop, Resize and Upload Image Using Ajax
</div>
<div class="card-body">
<input type="file" name="crop_image" id="crop_image" accept="image/*"/>
</div>
</div>
</div>
<!-- The Modal -->
<div class="modal" id="imageModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div id="image_demo" style="width: 350px; margin-top:30px"></div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close
</button>
<button type="button" class="btn btn-primary crop_image" >Save</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$image_crop = $('#image_demo').croppie({
enableExif : true,
viewport: {
width: 200,
height: 200,
type: 'square'
},
boundary: {
width:300,
height:300
}
});
$("#crop_image").on('change', function(){
var reader = new FileReader();
reader.onload = function(event){
$image_crop.croppie('bind',{
url: event.target.result
}).then(function(){
console.log('jQuery bind complete');
});
}
reader.readAsDataURL(this.files[0]);
$('#imageModal').modal('show');
});
$(".crop_image").click(function(){
$image_crop.croppie('result',{
type:'canvas',
size:'viewport'
}).then(function(response){
$.ajax({
url:"{{ route('store') }}",
method: "POST",
data:{
'_token':$('meta[name="token"]').attr('content'),
'image': response
},
success:function(data){
$('#imageModal').modal('hide');
alert('Crop Image has been uploaded');
}
});
});
});
});
</script>
</body>
</html>
Define Route routes/web.php
<?php
use App\Http\Controllers\CropImageUploadController;
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider and all of them will
| be assigned to the "web" middleware group. Make something great!
|
*/
Route::get('/', function () {
return view('welcome');
});
Route::get('crop-image',[CropImageUploadController::class, 'index'])->name('crop-image');
Route::post('store',[CropImageUploadController::class, 'store'])->name('store');
start project using command:
php artisan serve
Comments
Post a Comment