Skip to main content

Posts

Showing posts from December, 2023

React Laravel 12 Ecommerce App | Product, Cart & Checkout Page UI Design (Part 3)

  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...

Laravel Image Upload: Dynamic Crop & Resize with Ajax | Bootstrap 5 Modal Tutorial

  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 );         $im...