Laravel Framework Basics
LARAVEL FRAMEWORK BASICS পর্ব-১৬: Creating a basic shopping cart system using Laravel Session
Shopping Cart এর মতো application develop করা নতুন ওয়েব ডেভেলপারদের কাছে খুবই আকর্ষণীয় একটি ব্যাপার।
আমরা এখন Laravel Session ব্যবহার করে খুবই সাধারণ, কিন্তু প্রফেশনাল একটি shopping cart তৈরি করব। আর এই shopping cart টির ফ্রন্টএন্ড ডিজাইনের জন্য আমরা tailwind css ব্যবহার করে করব। এটার product list দেখতে অনেকটা এই রকম হবে:
এবং এটির shopping cart দেখতে হবে নিম্নরুপঃ
Finishing Database Related jobs first
আমরা যে shopping cart টি তৈরি করতে যাচ্ছি , তার কিছু কাজ ডেটাবেসের সাথে সম্পর্কৃত। তাই আমরা প্রথমে products নামে একটি Migration এবং Seeder ফাইল তৈরি করব।
প্রথমে ডেটাবেজে টেবিল তৈরির জন্য নিম্নোক্ত কমান্ডের মাধ্যমে একটি Migration File টি তৈরি করে ফেলুন :
php artisan make:migration create_products_table
এবার আপনার প্রজেক্টের database/migration ফোল্ডারে অবস্থিত create_products_table.php ফাইলে নিচের মতো করে আপডেট করে নিন।
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('products', function (Blueprint $table) {
$table->id();
$table->string("name", 255)->nullable();
$table->text("description")->nullable();
$table->string("image", 255)->nullable();
$table->decimal("price", 6, 2);
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('products');
}
};
এবার আমরা নিচের আর্টিসান কমান্ডটি ব্যবহার করে Product নামে একটি Model তৈরি করব :
php artisan make:model Product
Migration File এর মতো একইভাবে আমাদের Model ফাইলটিকে নিচের মতো করে আপডেট করে নিব :
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Product extends Model
{
use HasFactory;
protected $fillable = [
'name', 'price', 'description', 'image'
];
}
এবার নিম্নোক্ত কমান্ডের মাধ্যমে ডেটাবেজ টি আপডেট করে নিন , অর্থাৎ নতুন Product Table এর স্ট্রাকচার তৈরি করে নিন।
php artisan migrate:refresh
এখন আমরা ডেটাবেজে কিছু Dummy Product যুক্ত করার কাজ করব। আর এর জন্য আমরা Laravel Seeder এর সাহায্য নিবো। প্রথমে নিচের কমান্ড ব্যবহার করে একটি Seeder File তৈরি করে ফেলুন :
php artisan make:seeder ProductSeeder
এবার আপনার প্রজেক্টের database/seeders ফোল্ডারে অবস্থিত ProductSeeder.php ফাইলে নিচের মতো করে আপডেট করে নিন।
<?php
namespace Database\Seeders;
use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;
use App\Models\Product;
class ProductSeeder extends Seeder
{
/**
* Run the database seeds.
*
* @return void
*/
public function run()
{
$products=[
[
'name'=>'Basic Tee',
'description'=>'Sienn | Large',
'image'=>'https://tailwindui.com/img/ecommerce-images/shopping-cart-page-01-product-01.jpg',
'price'=>100
],
[
'name'=>'Nomad Tumbler',
'description'=>'White',
'image'=>'https://tailwindui.com/img/ecommerce-images/shopping-cart-page-01-product-03.jpg',
'price'=>35
],
[
'name'=>'Leatherbound Daily Journal Set',
'description'=>'Test Natural',
'image'=>'https://tailwindui.com/img/ecommerce-images/home-page-02-product-03.jpg',
'price'=>67
],
[
'name'=>'Billfold Wallet',
'description'=>'Natural',
'image'=>'https://tailwindui.com/img/ecommerce-images/home-page-04-trending-product-02.jpg',
'price'=>75
]
];
foreach($products as $key=>$value){
Product::create($value);
}
}
}
এবার আপনার প্রজেক্টের database/seeders ফোল্ডারে অবস্থিত DatabaseSeeder.php ফাইলে নিচের মতো করে আপডেট করে নিন।
<?php
namespace Database\Seeders;
use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;
class DatabaseSeeder extends Seeder
{
/**
* Seed the application's database.
*
* @return void
*/
public function run()
{
$this->call([
ProductSeeder::class,
]);
}
}
এবার নিম্নোক্ত কমান্ডের মাধ্যমে ডেটাবেজ টি আপডেট করে নিন , অর্থাৎ Dummy Product গুলো Insert করে নিন।
php artisan db:seed
Creating Controller
এখন আমরা আমাদের Product এবং তার বিস্তারিত Database থেকে নিয়ে আসার জন্য এবং Session এ Product গুলো add এবং remove করার জন্য নিম্নোক্ত ProductController তৈরি করব :
php artisan make:controller ProductController
এবার app\Http\Controllers ফোল্ডারের মধ্যে সদ্য তৈরি হওয়া ProductController.php ফাইলে নিম্নোক্ত কোডগুলো দিয়ে আপডেট করে নিন :
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Product;
class ProductController extends Controller
{
public function index()
{
$products = Product::all();
return view('pages.productlist', compact('products'));
}
public function cart()
{
return view('pages.cart');
}
public function addToCart($id)
{
$product = Product::findOrFail($id);
$cart = session()->get('cart', []);
if(isset($cart[$id])) {
$cart[$id]['quantity']++;
} else {
$cart[$id] = [
"name" => $product->name,
"quantity" => 1,
"price" => $product->price,
"image" => $product->image
];
}
session()->put('cart', $cart);
return redirect()->back()->with('success', 'Product added to cart successfully!');
}
public function update(Request $request)
{
if($request->id && $request->quantity){
$cart = session()->get('cart');
$cart[$request->id]["quantity"] = $request->quantity;
session()->put('cart', $cart);
session()->flash('success', 'Cart updated successfully');
}
}
public function remove(Request $request)
{
if($request->id) {
$cart = session()->get('cart');
if(isset($cart[$request->id])) {
unset($cart[$request->id]);
session()->put('cart', $cart);
}
session()->flash('success', 'Product removed successfully');
}
}
}
ব্যাস হয়ে গেল আমাদের Database এবং Controller এর কাজ। এখন আমরা প্রথমে Blade Templating এর কাজটি সেরে ফেলব। আর এই প্রজেক্ট আমরা Blade Directive এর পরিবর্তে Blade Component কে ব্যবহার করব।
Conversion of HTML Template to Laravel Blade Template
প্রথমে আমাদের Product HTML Template এর কোড গুলো দেখে নিনঃ
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/flowbite@1.5.3/dist/flowbite.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Products List</title>
</head>
<body>
<div class="bg-white">
<p class="flex h-10 items-center justify-center bg-indigo-600 px-4 text-sm font-medium text-white sm:px-6 lg:px-8">Get free delivery on orders over $100</p> <nav aria-label="Top" class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="border-b border-gray-200">
<div class="flex h-16 items-center">
<button type="button" x-description="Mobile menu toggle, controls the 'mobileMenuOpen' state." class="rounded-md bg-white p-2 text-gray-400 lg:hidden" @click="open = true">
<span class="sr-only">Open menu</span>
<svg class="h-6 w-6" x-description="Heroicon name: outline/bars-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"></path>
</svg>
</button>
<!-- Logo -->
<div class="ml-4 flex lg:ml-0">
<a href="http://localhost:8000/shop">
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/workflow-mark.svg?color=indigo&shade=600" alt="">
</a>
</div>
<!-- Flyout menus -->
<div class="hidden lg:ml-8 lg:block lg:self-stretch">
<div class="flex h-full space-x-8">
<a href="#" class="flex items-center text-sm font-medium text-gray-700 hover:text-gray-800">Women</a>
<a href="#" class="flex items-center text-sm font-medium text-gray-700 hover:text-gray-800">Men</a>
<a href="#" class="flex items-center text-sm font-medium text-gray-700 hover:text-gray-800">Company</a>
<a href="#" class="flex items-center text-sm font-medium text-gray-700 hover:text-gray-800">Stores</a>
</div>
</div>
<div class="ml-auto flex items-center">
<div class="hidden lg:flex lg:flex-1 lg:items-center lg:justify-end lg:space-x-6">
<a href="#" class="text-sm font-medium text-gray-700 hover:text-gray-800">Sign in</a>
<span class="h-6 w-px bg-gray-200" aria-hidden="true"></span>
<a href="#" class="text-sm font-medium text-gray-700 hover:text-gray-800">Create account</a>
</div>
<!-- Cart -->
<div class="ml-4 flow-root lg:ml-6">
<a href="http://localhost:8000/shop/cart" class="group -m-2 flex items-center p-2">
<svg class="h-6 w-6 flex-shrink-0 text-gray-400 group-hover:text-gray-500" x-description="Heroicon name: outline/shopping-bag" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 10.5V6a3.75 3.75 0 10-7.5 0v4.5m11.356-1.993l1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 01-1.12-1.243l1.264-12A1.125 1.125 0 015.513 7.5h12.974c.576 0 1.059.435 1.119 1.007zM8.625 10.5a.375.375 0 11-.75 0 .375.375 0 01.75 0zm7.5 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"></path>
</svg>
<span class="ml-2 text-sm font-medium text-gray-700 group-hover:text-gray-800">$ 129</span>
<span class="sr-only">items in cart, view bag</span>
</a>
</div>
</div>
</div>
</div>
</nav> <main class="mx-auto max-w-2xl px-4 pt-16 pb-24 sm:px-6 lg:max-w-7xl lg:px-8">
<div class="mx-auto max-w-7xl mt-6 grid grid-cols-2 gap-x-4 gap-y-10 sm:gap-x-6 md:grid-cols-4 md:gap-y-0 lg:gap-x-8">
<div class="group relative">
<div class="h-56 w-full overflow-hidden rounded-md bg-gray-200 group-hover:opacity-75 lg:h-72 xl:h-80">
<img src="https://tailwindui.com/img/ecommerce-images/home-page-04-trending-product-02.jpg" alt="Leather Long Wallet" class="h-full w-full object-cover object-center">
</div>
<h3 class="mt-4 text-sm text-gray-700">
<a href="#">
<span class="absolute inset-0"></span>
Leather Long Wallet
</a>
</h3>
<p class="mt-1 text-sm text-gray-500">Natural</p>
<p class="mt-1 text-sm font-medium text-gray-900">$75.00</p>
<div class="mt-6">
<a href="http://localhost:8000/shop/add-to-cart/1" class="relative flex items-center justify-center rounded-md border border-transparent bg-gray-100 py-2 px-8 text-sm font-medium text-gray-900 hover:bg-gray-200">Add to bag<span class="sr-only">, Halfsize Tote</span></a>
</div>
</div>
<div class="group relative">
<div class="h-56 w-full overflow-hidden rounded-md bg-gray-200 group-hover:opacity-75 lg:h-72 xl:h-80">
<img src="https://tailwindui.com/img/ecommerce-images/home-page-04-trending-product-03.jpg" alt=" Machined Pencil and Pen Set" class="h-full w-full object-cover object-center">
</div>
<h3 class="mt-4 text-sm text-gray-700">
<a href="#">
<span class="absolute inset-0"></span>
Machined Pencil and Pen Set
</a>
</h3>
<p class="mt-1 text-sm text-gray-500">Black</p>
<p class="mt-1 text-sm font-medium text-gray-900">$70.00</p>
<div class="mt-6">
<a href="http://localhost:8000/shop/add-to-cart/2" class="relative flex items-center justify-center rounded-md border border-transparent bg-gray-100 py-2 px-8 text-sm font-medium text-gray-900 hover:bg-gray-200">Add to bag<span class="sr-only">, Halfsize Tote</span></a>
</div>
</div>
<div class="group relative">
<div class="h-56 w-full overflow-hidden rounded-md bg-gray-200 group-hover:opacity-75 lg:h-72 xl:h-80">
<img src="https://tailwindui.com/img/ecommerce-images/home-page-04-trending-product-04.jpg" alt="Mini-Sketchbooks" class="h-full w-full object-cover object-center">
</div>
<h3 class="mt-4 text-sm text-gray-700">
<a href="#">
<span class="absolute inset-0"></span>
Mini-Sketchbooks
</a>
</h3>
<p class="mt-1 text-sm text-gray-500">Light Brown</p>
<p class="mt-1 text-sm font-medium text-gray-900">$27.00</p>
<div class="mt-6">
<a href="http://localhost:8000/shop/add-to-cart/3" class="relative flex items-center justify-center rounded-md border border-transparent bg-gray-100 py-2 px-8 text-sm font-medium text-gray-900 hover:bg-gray-200">Add to bag<span class="sr-only">, Halfsize Tote</span></a>
</div>
</div>
<div class="group relative">
<div class="h-56 w-full overflow-hidden rounded-md bg-gray-200 group-hover:opacity-75 lg:h-72 xl:h-80">
<img src="https://tailwindui.com/img/ecommerce-images/home-page-04-trending-product-01.jpg" alt="Organizer Set" class="h-full w-full object-cover object-center">
</div>
<h3 class="mt-4 text-sm text-gray-700">
<a href="#">
<span class="absolute inset-0"></span>
Organizer Set
</a>
</h3>
<p class="mt-1 text-sm text-gray-500">Walnut</p>
<p class="mt-1 text-sm font-medium text-gray-900">$149.00</p>
<div class="mt-6">
<a href="http://localhost:8000/shop/add-to-cart/4" class="relative flex items-center justify-center rounded-md border border-transparent bg-gray-100 py-2 px-8 text-sm font-medium text-gray-900 hover:bg-gray-200">Add to bag<span class="sr-only">, Halfsize Tote</span></a>
</div>
</div>
</div>
</main> <footer aria-labelledby="footer-heading" class="bg-white">
<h2 id="footer-heading" class="sr-only">Footer</h2>
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="border-t border-gray-200 py-20">
<div class="grid grid-cols-1 md:grid-flow-col md:auto-rows-min md:grid-cols-12 md:gap-x-8 md:gap-y-16">
<!-- Image section -->
<div class="col-span-1 md:col-span-2 lg:col-start-1 lg:row-start-1">
<img src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600" alt="" class="h-8 w-auto">
</div>
<!-- Sitemap sections -->
<div class="col-span-6 mt-10 grid grid-cols-2 gap-8 sm:grid-cols-3 md:col-span-8 md:col-start-3 md:row-start-1 md:mt-0 lg:col-span-6 lg:col-start-2">
<div class="grid grid-cols-1 gap-y-12 sm:col-span-2 sm:grid-cols-2 sm:gap-x-8">
<div>
<h3 class="text-sm font-medium text-gray-900">Products</h3>
<ul role="list" class="mt-6 space-y-6">
<li class="text-sm">
<a href="#" class="text-gray-500 hover:text-gray-600">Bags</a>
</li>
<li class="text-sm">
<a href="#" class="text-gray-500 hover:text-gray-600">Tees</a>
</li>
<li class="text-sm">
<a href="#" class="text-gray-500 hover:text-gray-600">Home Goods</a>
</li>
</ul>
</div>
<div>
<h3 class="text-sm font-medium text-gray-900">Company</h3>
<ul role="list" class="mt-6 space-y-6">
<li class="text-sm">
<a href="#" class="text-gray-500 hover:text-gray-600">Who we are</a>
</li>
<li class="text-sm">
<a href="#" class="text-gray-500 hover:text-gray-600">Terms & Conditions</a>
</li>
<li class="text-sm">
<a href="#" class="text-gray-500 hover:text-gray-600">Privacy</a>
</li>
</ul>
</div>
</div>
<div>
<h3 class="text-sm font-medium text-gray-900">Customer Service</h3>
<ul role="list" class="mt-6 space-y-6">
<li class="text-sm">
<a href="#" class="text-gray-500 hover:text-gray-600">Contact</a>
</li>
<li class="text-sm">
<a href="#" class="text-gray-500 hover:text-gray-600">Shipping</a>
</li>
<li class="text-sm">
<a href="#" class="text-gray-500 hover:text-gray-600">Returns</a>
</li>
</ul>
</div>
</div>
<!-- Newsletter section -->
<div class="mt-12 md:col-span-8 md:col-start-3 md:row-start-2 md:mt-0 lg:col-span-4 lg:col-start-9 lg:row-start-1">
<h3 class="text-sm font-medium text-gray-900">Sign up for our newsletter</h3>
<p class="mt-6 text-sm text-gray-500">The latest deals and savings, sent to your inbox weekly.</p>
<form class="mt-2 flex sm:max-w-md">
<label for="email-address" class="sr-only">Email address</label>
<input id="email-address" type="text" autocomplete="email" required="" class="w-full min-w-0 appearance-none rounded-md border border-gray-300 bg-white py-2 px-4 text-base text-gray-900 placeholder-gray-500 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500">
<div class="ml-4 flex-shrink-0">
<button type="submit" class="flex w-full items-center justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">Sign up</button>
</div>
</form>
</div>
</div>
</div>
<div class="border-t border-gray-100 py-10 text-center">
<p class="text-sm text-gray-500">© 2021 Your Company, Inc. All rights reserved.</p>
</div>
</div>
</footer>
</div>
</body>
</html>
আর আমাদের Shopping Cart HTML Template এর কোড গুলো দেখে নিনঃ
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/flowbite@1.5.3/dist/flowbite.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Shopping Cart</title>
</head>
<body>
<div class="bg-white">
<p class="flex h-10 items-center justify-center bg-indigo-600 px-4 text-sm font-medium text-white sm:px-6 lg:px-8">Get free delivery on orders over $100</p> <nav aria-label="Top" class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="border-b border-gray-200">
<div class="flex h-16 items-center">
<button type="button" x-description="Mobile menu toggle, controls the 'mobileMenuOpen' state." class="rounded-md bg-white p-2 text-gray-400 lg:hidden" @click="open = true">
<span class="sr-only">Open menu</span>
<svg class="h-6 w-6" x-description="Heroicon name: outline/bars-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"></path>
</svg>
</button>
<!-- Logo -->
<div class="ml-4 flex lg:ml-0">
<a href="http://localhost:8000/shop">
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/workflow-mark.svg?color=indigo&shade=600" alt="">
</a>
</div>
<!-- Flyout menus -->
<div class="hidden lg:ml-8 lg:block lg:self-stretch">
<div class="flex h-full space-x-8">
<a href="#" class="flex items-center text-sm font-medium text-gray-700 hover:text-gray-800">Women</a>
<a href="#" class="flex items-center text-sm font-medium text-gray-700 hover:text-gray-800">Men</a>
<a href="#" class="flex items-center text-sm font-medium text-gray-700 hover:text-gray-800">Company</a>
<a href="#" class="flex items-center text-sm font-medium text-gray-700 hover:text-gray-800">Stores</a>
</div>
</div>
<div class="ml-auto flex items-center">
<div class="hidden lg:flex lg:flex-1 lg:items-center lg:justify-end lg:space-x-6">
<a href="#" class="text-sm font-medium text-gray-700 hover:text-gray-800">Sign in</a>
<span class="h-6 w-px bg-gray-200" aria-hidden="true"></span>
<a href="#" class="text-sm font-medium text-gray-700 hover:text-gray-800">Create account</a>
</div>
<!-- Cart -->
<div class="ml-4 flow-root lg:ml-6">
<a href="http://localhost:8000/shop/cart" class="group -m-2 flex items-center p-2">
<svg class="h-6 w-6 flex-shrink-0 text-gray-400 group-hover:text-gray-500" x-description="Heroicon name: outline/shopping-bag" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 10.5V6a3.75 3.75 0 10-7.5 0v4.5m11.356-1.993l1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 01-1.12-1.243l1.264-12A1.125 1.125 0 015.513 7.5h12.974c.576 0 1.059.435 1.119 1.007zM8.625 10.5a.375.375 0 11-.75 0 .375.375 0 01.75 0zm7.5 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"></path>
</svg>
<span class="ml-2 text-sm font-medium text-gray-700 group-hover:text-gray-800">$ 129</span>
<span class="sr-only">items in cart, view bag</span>
</a>
</div>
</div>
</div>
</div>
</nav> <main class="mx-auto max-w-2xl px-4 pt-16 pb-24 sm:px-6 lg:max-w-7xl lg:px-8">
<div class="bg-white">
<div class="mx-auto max-w-2xl px-4 pt-16 pb-24 sm:px-6 lg:max-w-7xl lg:px-8">
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">Shopping Cart</h2>
<form class="mt-12 lg:grid lg:grid-cols-12 lg:items-start lg:gap-x-12 xl:gap-x-16">
<section aria-labelledby="cart-heading" class="lg:col-span-7">
<h2 id="cart-heading" class="sr-only">Items in your shopping cart</h2>
<ul id="cart" role="list" class="divide-y divide-gray-200 border-t border-b border-gray-200">
<li class="flex py-6 sm:py-10" data-id="3">
<div class="flex-shrink-0">
<img src="https://tailwindui.com/img/ecommerce-images/home-page-04-trending-product-04.jpg" alt="Front of men's Basic Tee in sienna." class="h-24 w-24 rounded-md object-cover object-center sm:h-48 sm:w-48">
</div>
<div class="ml-4 flex flex-1 flex-col justify-between sm:ml-6">
<div class="relative pr-9 sm:grid sm:grid-cols-2 sm:gap-x-6 sm:pr-0">
<div>
<div class="flex justify-between">
<h3 class="text-sm">
<a href="#" class="font-medium text-gray-700 hover:text-gray-800">Mini-Sketchbooks</a>
</h3>
</div>
<div class="mt-1 flex text-sm">
<p class="text-gray-500">Sienna</p>
<p class="ml-4 border-l border-gray-200 pl-4 text-gray-500">Large</p>
</div>
<p class="mt-1 text-sm font-medium text-gray-900">$27.00</p>
</div>
<div class="mt-4 sm:mt-0 sm:pr-9">
<label for="quantity-0" class="sr-only">Quantity, Basic Tee</label>
<input type="number" value="2" class="quantity update-cart w-1/3 rounded-md border border-gray-300 py-1.5 text-left text-base font-medium leading-5 text-gray-700 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm" />
<div class="actions absolute top-0 right-0">
<button type="button" class="remove-from-cart -m-2 inline-flex p-2 text-gray-400 hover:text-gray-500">
<span class="sr-only ">Remove</span>
<!-- Heroicon name: mini/x-mark -->
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
</svg>
</button>
</div>
</div>
</div>
</div>
</li>
<li class="flex py-6 sm:py-10" data-id="1">
<div class="flex-shrink-0">
<img src="https://tailwindui.com/img/ecommerce-images/home-page-04-trending-product-02.jpg" alt="Front of men's Basic Tee in sienna." class="h-24 w-24 rounded-md object-cover object-center sm:h-48 sm:w-48">
</div>
<div class="ml-4 flex flex-1 flex-col justify-between sm:ml-6">
<div class="relative pr-9 sm:grid sm:grid-cols-2 sm:gap-x-6 sm:pr-0">
<div>
<div class="flex justify-between">
<h3 class="text-sm">
<a href="#" class="font-medium text-gray-700 hover:text-gray-800">Leather Long Wallet</a>
</h3>
</div>
<div class="mt-1 flex text-sm">
<p class="text-gray-500">Sienna</p>
<p class="ml-4 border-l border-gray-200 pl-4 text-gray-500">Large</p>
</div>
<p class="mt-1 text-sm font-medium text-gray-900">$75.00</p>
</div>
<div class="mt-4 sm:mt-0 sm:pr-9">
<label for="quantity-0" class="sr-only">Quantity, Basic Tee</label>
<input type="number" value="1" class="quantity update-cart w-1/3 rounded-md border border-gray-300 py-1.5 text-left text-base font-medium leading-5 text-gray-700 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm" />
<div class="actions absolute top-0 right-0">
<button type="button" class="remove-from-cart -m-2 inline-flex p-2 text-gray-400 hover:text-gray-500">
<span class="sr-only ">Remove</span>
<!-- Heroicon name: mini/x-mark -->
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
</svg>
</button>
</div>
</div>
</div>
</div>
</li>
</ul>
</section>
<!-- Order summary -->
<section aria-labelledby="summary-heading" class="mt-16 rounded-lg bg-gray-50 px-4 py-6 sm:p-6 lg:col-span-5 lg:mt-0 lg:p-8">
<h2 id="summary-heading" class="text-lg font-medium text-gray-900">Order summary</h2>
<dl class="mt-6 space-y-4">
<div class="flex items-center justify-between">
<dt class="text-sm text-gray-600">Subtotal</dt>
<dd class="text-sm font-medium text-gray-900">
$129
</dd>
</div>
<div class="flex items-center justify-between border-t border-gray-200 pt-4">
<dt class="flex items-center text-sm text-gray-600">
<span>Shipping estimate</span>
<a href="#" class="ml-2 flex-shrink-0 text-gray-400 hover:text-gray-500">
<span class="sr-only">Learn more about how shipping is calculated</span>
<!-- Heroicon name: mini/question-mark-circle -->
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM8.94 6.94a.75.75 0 11-1.061-1.061 3 3 0 112.871 5.026v.345a.75.75 0 01-1.5 0v-.5c0-.72.57-1.172 1.081-1.287A1.5 1.5 0 108.94 6.94zM10 15a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
</svg>
</a>
</dt>
<dd class="text-sm font-medium text-gray-900">$0.00</dd>
</div>
<div class="flex items-center justify-between border-t border-gray-200 pt-4">
<dt class="text-base font-medium text-gray-900">Order total</dt>
<dd class="text-base font-medium text-gray-900">$129</dd>
</div>
</dl>
<div class="mt-6">
<button type="submit" class="w-full rounded-md border border-transparent bg-indigo-600 py-3 px-4 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-50">Checkout</button>
</div>
<div class="mt-6 text-center text-sm">
<p>
or
<a href="http://localhost:8000/shop" class="font-medium text-indigo-600 hover:text-indigo-500">
Continue Shopping
<span aria-hidden="true"> →</span>
</a>
</p>
</div>
</section>
</form>
</div>
</div>
</main> <footer aria-labelledby="footer-heading" class="bg-white">
<h2 id="footer-heading" class="sr-only">Footer</h2>
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="border-t border-gray-200 py-20">
<div class="grid grid-cols-1 md:grid-flow-col md:auto-rows-min md:grid-cols-12 md:gap-x-8 md:gap-y-16">
<!-- Image section -->
<div class="col-span-1 md:col-span-2 lg:col-start-1 lg:row-start-1">
<img src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600" alt="" class="h-8 w-auto">
</div>
<!-- Sitemap sections -->
<div class="col-span-6 mt-10 grid grid-cols-2 gap-8 sm:grid-cols-3 md:col-span-8 md:col-start-3 md:row-start-1 md:mt-0 lg:col-span-6 lg:col-start-2">
<div class="grid grid-cols-1 gap-y-12 sm:col-span-2 sm:grid-cols-2 sm:gap-x-8">
<div>
<h3 class="text-sm font-medium text-gray-900">Products</h3>
<ul role="list" class="mt-6 space-y-6">
<li class="text-sm">
<a href="#" class="text-gray-500 hover:text-gray-600">Bags</a>
</li>
<li class="text-sm">
<a href="#" class="text-gray-500 hover:text-gray-600">Tees</a>
</li>
<li class="text-sm">
<a href="#" class="text-gray-500 hover:text-gray-600">Home Goods</a>
</li>
</ul>
</div>
<div>
<h3 class="text-sm font-medium text-gray-900">Company</h3>
<ul role="list" class="mt-6 space-y-6">
<li class="text-sm">
<a href="#" class="text-gray-500 hover:text-gray-600">Who we are</a>
</li>
<li class="text-sm">
<a href="#" class="text-gray-500 hover:text-gray-600">Terms & Conditions</a>
</li>
<li class="text-sm">
<a href="#" class="text-gray-500 hover:text-gray-600">Privacy</a>
</li>
</ul>
</div>
</div>
<div>
<h3 class="text-sm font-medium text-gray-900">Customer Service</h3>
<ul role="list" class="mt-6 space-y-6">
<li class="text-sm">
<a href="#" class="text-gray-500 hover:text-gray-600">Contact</a>
</li>
<li class="text-sm">
<a href="#" class="text-gray-500 hover:text-gray-600">Shipping</a>
</li>
<li class="text-sm">
<a href="#" class="text-gray-500 hover:text-gray-600">Returns</a>
</li>
</ul>
</div>
</div>
<!-- Newsletter section -->
<div class="mt-12 md:col-span-8 md:col-start-3 md:row-start-2 md:mt-0 lg:col-span-4 lg:col-start-9 lg:row-start-1">
<h3 class="text-sm font-medium text-gray-900">Sign up for our newsletter</h3>
<p class="mt-6 text-sm text-gray-500">The latest deals and savings, sent to your inbox weekly.</p>
<form class="mt-2 flex sm:max-w-md">
<label for="email-address" class="sr-only">Email address</label>
<input id="email-address" type="text" autocomplete="email" required="" class="w-full min-w-0 appearance-none rounded-md border border-gray-300 bg-white py-2 px-4 text-base text-gray-900 placeholder-gray-500 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500">
<div class="ml-4 flex-shrink-0">
<button type="submit" class="flex w-full items-center justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">Sign up</button>
</div>
</form>
</div>
</div>
</div>
<div class="border-t border-gray-100 py-10 text-center">
<p class="text-sm text-gray-500">© 2021 Your Company, Inc. All rights reserved.</p>
</div>
</div>
</footer>
</div>
</body>
</html>
প্রথমে আমরা Layout তৈরির জন্য নিম্নোক্ত Blade Component গুলো তৈরি করব:
php artisan make:component header php artisan make:component alert php artisan make:component main php artisan make:component footer php artisan make:component notice
এখন আমরা মূল HTML File থেকে সংশ্লিষ্ট কোড গুলো উপরোক্ত কম্পোনেন্ট গুলোতে যোগ করব:
resources/views/component/header.blade.php
<nav aria-label="Top" class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="border-b border-gray-200">
<div class="flex h-16 items-center">
<button type="button" x-description="Mobile menu toggle, controls the 'mobileMenuOpen' state." class="rounded-md bg-white p-2 text-gray-400 lg:hidden" @click="open = true">
<span class="sr-only">Open menu</span>
<svg class="h-6 w-6" x-description="Heroicon name: outline/bars-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"></path>
</svg>
</button>
<!-- Logo -->
<div class="ml-4 flex lg:ml-0">
<a href="{{ url('/') }}">
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/workflow-mark.svg?color=indigo&shade=600" alt="">
</a>
</div>
<!-- Flyout menus -->
<div class="hidden lg:ml-8 lg:block lg:self-stretch">
<div class="flex h-full space-x-8">
<a href="#" class="flex items-center text-sm font-medium text-gray-700 hover:text-gray-800">Women</a>
<a href="#" class="flex items-center text-sm font-medium text-gray-700 hover:text-gray-800">Men</a>
<a href="#" class="flex items-center text-sm font-medium text-gray-700 hover:text-gray-800">Company</a>
<a href="#" class="flex items-center text-sm font-medium text-gray-700 hover:text-gray-800">Stores</a>
</div>
</div>
<div class="ml-auto flex items-center">
<div class="hidden lg:flex lg:flex-1 lg:items-center lg:justify-end lg:space-x-6">
<a href="#" class="text-sm font-medium text-gray-700 hover:text-gray-800">Sign in</a>
<span class="h-6 w-px bg-gray-200" aria-hidden="true"></span>
<a href="#" class="text-sm font-medium text-gray-700 hover:text-gray-800">Create account</a>
</div>
@php $total = 0 @endphp
@foreach((array) session('cart') as $id => $details)
@php $total += $details['price'] * $details['quantity'] @endphp
@endforeach
<!-- Cart -->
<div class="ml-4 flow-root lg:ml-6">
<a href="{{ route('cart') }}" class="group -m-2 flex items-center p-2">
<svg class="h-6 w-6 flex-shrink-0 text-gray-400 group-hover:text-gray-500" x-description="Heroicon name: outline/shopping-bag" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 10.5V6a3.75 3.75 0 10-7.5 0v4.5m11.356-1.993l1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 01-1.12-1.243l1.264-12A1.125 1.125 0 015.513 7.5h12.974c.576 0 1.059.435 1.119 1.007zM8.625 10.5a.375.375 0 11-.75 0 .375.375 0 01.75 0zm7.5 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"></path>
</svg>
<span class="ml-2 text-sm font-medium text-gray-700 group-hover:text-gray-800">$ {{ $total }}</span>
<span class="sr-only">items in cart, view bag</span>
</a>
</div>
</div>
</div>
</div>
</nav>
resources/views/component/footer.blade.php
<footer aria-labelledby="footer-heading" class="bg-white">
<h2 id="footer-heading" class="sr-only">Footer</h2>
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="border-t border-gray-200 py-20">
<div class="grid grid-cols-1 md:grid-flow-col md:auto-rows-min md:grid-cols-12 md:gap-x-8 md:gap-y-16">
<!-- Image section -->
<div class="col-span-1 md:col-span-2 lg:col-start-1 lg:row-start-1">
<img src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600" alt="" class="h-8 w-auto">
</div>
<!-- Sitemap sections -->
<div class="col-span-6 mt-10 grid grid-cols-2 gap-8 sm:grid-cols-3 md:col-span-8 md:col-start-3 md:row-start-1 md:mt-0 lg:col-span-6 lg:col-start-2">
<div class="grid grid-cols-1 gap-y-12 sm:col-span-2 sm:grid-cols-2 sm:gap-x-8">
<div>
<h3 class="text-sm font-medium text-gray-900">Products</h3>
<ul role="list" class="mt-6 space-y-6">
<li class="text-sm">
<a href="#" class="text-gray-500 hover:text-gray-600">Bags</a>
</li>
<li class="text-sm">
<a href="#" class="text-gray-500 hover:text-gray-600">Tees</a>
</li>
<li class="text-sm">
<a href="#" class="text-gray-500 hover:text-gray-600">Home Goods</a>
</li>
</ul>
</div>
<div>
<h3 class="text-sm font-medium text-gray-900">Company</h3>
<ul role="list" class="mt-6 space-y-6">
<li class="text-sm">
<a href="#" class="text-gray-500 hover:text-gray-600">Who we are</a>
</li>
<li class="text-sm">
<a href="#" class="text-gray-500 hover:text-gray-600">Terms & Conditions</a>
</li>
<li class="text-sm">
<a href="#" class="text-gray-500 hover:text-gray-600">Privacy</a>
</li>
</ul>
</div>
</div>
<div>
<h3 class="text-sm font-medium text-gray-900">Customer Service</h3>
<ul role="list" class="mt-6 space-y-6">
<li class="text-sm">
<a href="#" class="text-gray-500 hover:text-gray-600">Contact</a>
</li>
<li class="text-sm">
<a href="#" class="text-gray-500 hover:text-gray-600">Shipping</a>
</li>
<li class="text-sm">
<a href="#" class="text-gray-500 hover:text-gray-600">Returns</a>
</li>
</ul>
</div>
</div>
<!-- Newsletter section -->
<div class="mt-12 md:col-span-8 md:col-start-3 md:row-start-2 md:mt-0 lg:col-span-4 lg:col-start-9 lg:row-start-1">
<h3 class="text-sm font-medium text-gray-900">Sign up for our newsletter</h3>
<p class="mt-6 text-sm text-gray-500">The latest deals and savings, sent to your inbox weekly.</p>
<form class="mt-2 flex sm:max-w-md">
<label for="email-address" class="sr-only">Email address</label>
<input id="email-address" type="text" autocomplete="email" required="" class="w-full min-w-0 appearance-none rounded-md border border-gray-300 bg-white py-2 px-4 text-base text-gray-900 placeholder-gray-500 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500">
<div class="ml-4 flex-shrink-0">
<button type="submit" class="flex w-full items-center justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">Sign up</button>
</div>
</form>
</div>
</div>
</div>
<div class="border-t border-gray-100 py-10 text-center">
<p class="text-sm text-gray-500">© 2021 Your Company, Inc. All rights reserved.</p>
</div>
</div>
</footer>
resources/views/component/alert.blade.php
@if(session('success'))
<div id="alert-3" class="mx-auto pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5">
<div class="p-4">
<div class="flex items-start">
<div class="flex-shrink-0">
<!-- Heroicon name: outline/check-circle -->
<svg class="h-6 w-6 text-green-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div class="ml-3 w-0 flex-1 pt-0.5">
<p class="text-sm font-medium text-gray-900">{{ session('success') }}</p>
</div>
<div class="ml-4 flex flex-shrink-0">
<button type="button" class="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" data-dismiss-target="#alert-3" aria-label="Close">
<span class="sr-only">Close</span>
<!-- Heroicon name: mini/x-mark -->
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
@endif
resources/views/component/notic.blade.php
<p class="flex h-10 items-center justify-center bg-indigo-600 px-4 text-sm font-medium text-white sm:px-6 lg:px-8"> Get free delivery on orders over $100 </p>
resources/views/component/main.blade.php
<main class="mx-auto max-w-2xl px-4 pt-16 pb-24 sm:px-6 lg:max-w-7xl lg:px-8">
{{$slot}}
</main>
Creating Master Blade
এবার resources/views ফোল্ডারের মধ্যে master.blade.php নামে একটি ফাইল তৈরি করব, এবং নিচের মতো করে component গুলোকে যুক্ত করে দিবো।
resources/views/master.blade.php
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/flowbite@1.5.3/dist/flowbite.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>@yield('title')</title>
</head>
<body>
<div class="bg-white">
<x-notice></x-notice>
<x-nav></x-nav>
<x-alert></x-alert>
<x-main>@yield('content')</x-main>
<x-footer></x-footer>
</div>
@yield('scripts')
</body>
</html>
Creating Pages
এবার আমরা resources/views/pages ফোল্ডারের মধ্যে productlist.blade.php এবং cart.blade.php নামে দুটি ব্লেড ফাইল তৈরি করব, এবং নিচের মতো করে কোডগুলোকে গুলোকে যুক্ত করে দিবো।
resources/views/pages/productlist.blade.php
@extends('master')
@section('title', 'Products List')
@section('content')
<div class="mx-auto max-w-7xl mt-6 grid grid-cols-2 gap-x-4 gap-y-10 sm:gap-x-6 md:grid-cols-4 md:gap-y-0 lg:gap-x-8">
@foreach($products as $product)
<div class="group relative">
<div class="h-56 w-full overflow-hidden rounded-md bg-gray-200 group-hover:opacity-75 lg:h-72 xl:h-80">
<img src="{{ $product->image }}" alt="{{ $product->name }}" class="h-full w-full object-cover object-center">
</div>
<h3 class="mt-4 text-sm text-gray-700">
<a href="#">
<span class="absolute inset-0"></span>
{{ $product->name }}
</a>
</h3>
<p class="mt-1 text-sm text-gray-500">{{ $product->description }}</p>
<p class="mt-1 text-sm font-medium text-gray-900">${{ $product->price }}</p>
<div class="mt-6">
<a href="{{ route('add.to.cart', $product->id) }}" class="relative flex items-center justify-center rounded-md border border-transparent bg-gray-100 py-2 px-8 text-sm font-medium text-gray-900 hover:bg-gray-200">Add to bag<span class="sr-only">, Halfsize Tote</span></a>
</div>
</div>
@endforeach
</div>
@endsection
resources/views/pages/cart.blade.php
@extends('master')
@section('title', 'Shopping Cart')
@section('content')
<div class="bg-white">
<div class="mx-auto max-w-2xl px-4 pt-16 pb-24 sm:px-6 lg:max-w-7xl lg:px-8">
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">Shopping Cart</h2>
<form class="mt-12 lg:grid lg:grid-cols-12 lg:items-start lg:gap-x-12 xl:gap-x-16">
<section aria-labelledby="cart-heading" class="lg:col-span-7">
<h2 id="cart-heading" class="sr-only">Items in your shopping cart</h2>
<ul id="cart" role="list" class="divide-y divide-gray-200 border-t border-b border-gray-200">
@php $total = 0 @endphp
@if(session('cart'))
@foreach(session('cart') as $id => $details)
@php $total += $details['price'] * $details['quantity'] @endphp
<li class="flex py-6 sm:py-10" data-id="{{ $id }}">
<div class="flex-shrink-0">
<img src="{{ $details['image'] }}" alt="Front of men's Basic Tee in sienna." class="h-24 w-24 rounded-md object-cover object-center sm:h-48 sm:w-48">
</div>
<div class="ml-4 flex flex-1 flex-col justify-between sm:ml-6">
<div class="relative pr-9 sm:grid sm:grid-cols-2 sm:gap-x-6 sm:pr-0">
<div>
<div class="flex justify-between">
<h3 class="text-sm">
<a href="#" class="font-medium text-gray-700 hover:text-gray-800">{{ $details['name'] }}</a>
</h3>
</div>
<div class="mt-1 flex text-sm">
<p class="text-gray-500">Sienna</p>
<p class="ml-4 border-l border-gray-200 pl-4 text-gray-500">Large</p>
</div>
<p class="mt-1 text-sm font-medium text-gray-900">${{ $details['price'] }}</p>
</div>
<div class="mt-4 sm:mt-0 sm:pr-9">
<label for="quantity-0" class="sr-only">Quantity, Basic Tee</label>
<input type="number" value="{{ $details['quantity'] }}" class="quantity update-cart w-1/3 rounded-md border border-gray-300 py-1.5 text-left text-base font-medium leading-5 text-gray-700 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm" />
<div class="actions absolute top-0 right-0">
<button type="button" class="remove-from-cart -m-2 inline-flex p-2 text-gray-400 hover:text-gray-500">
<span class="sr-only ">Remove</span>
<!-- Heroicon name: mini/x-mark -->
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
</svg>
</button>
</div>
</div>
</div>
</div>
</li>
@endforeach
@endif
</ul>
</section>
<!-- Order summary -->
<section aria-labelledby="summary-heading" class="mt-16 rounded-lg bg-gray-50 px-4 py-6 sm:p-6 lg:col-span-5 lg:mt-0 lg:p-8">
<h2 id="summary-heading" class="text-lg font-medium text-gray-900">Order summary</h2>
<dl class="mt-6 space-y-4">
<div class="flex items-center justify-between">
<dt class="text-sm text-gray-600">Subtotal</dt>
<dd class="text-sm font-medium text-gray-900">
${{ $total }}
</dd>
</div>
<div class="flex items-center justify-between border-t border-gray-200 pt-4">
<dt class="flex items-center text-sm text-gray-600">
<span>Shipping estimate</span>
<a href="#" class="ml-2 flex-shrink-0 text-gray-400 hover:text-gray-500">
<span class="sr-only">Learn more about how shipping is calculated</span>
<!-- Heroicon name: mini/question-mark-circle -->
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM8.94 6.94a.75.75 0 11-1.061-1.061 3 3 0 112.871 5.026v.345a.75.75 0 01-1.5 0v-.5c0-.72.57-1.172 1.081-1.287A1.5 1.5 0 108.94 6.94zM10 15a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
</svg>
</a>
</dt>
<dd class="text-sm font-medium text-gray-900">$0.00</dd>
</div>
<div class="flex items-center justify-between border-t border-gray-200 pt-4">
<dt class="text-base font-medium text-gray-900">Order total</dt>
<dd class="text-base font-medium text-gray-900">${{ $total }}</dd>
</div>
</dl>
<div class="mt-6">
<button type="submit" class="w-full rounded-md border border-transparent bg-indigo-600 py-3 px-4 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-50">Checkout</button>
</div>
<div class="mt-6 text-center text-sm">
<p>
or
<a href="{{ url('/') }}" class="font-medium text-indigo-600 hover:text-indigo-500">
Continue Shopping
<span aria-hidden="true"> →</span>
</a>
</p>
</div>
</section>
</form>
</div>
</div>
@endsection
@section('scripts')
<script type="text/javascript">
$(".update-cart").change(function (e) {
e.preventDefault();
var ele = $(this);
$.ajax({
url: '{{ route('update.cart') }}',
method: "patch",
data: {
_token: '{{ csrf_token() }}',
id: ele.parents("li").attr("data-id"),
quantity: ele.parents("li").find(".quantity").val()
},
success: function (response) {
window.location.reload();
}
});
});
$(".remove-from-cart").click(function (e) {
e.preventDefault();
var ele = $(this);
if(confirm("Are you sure want to remove?")) {
$.ajax({
url: "{{ route('remove.from.cart') }}",
method: "DELETE",
data: {
_token: '{{ csrf_token() }}',
id: ele.parents("li").attr("data-id")
},
success: function (response) {
window.location.reload();
}
});
}
});
</script>
@endsection
এবার আপনার route file web.php তে নিচের মতো করে route গুলো ডিফাইন করে দিন।
use App\Http\Controllers\ProductController;
Route::get('/', [ProductController::class, 'index']);
Route::get('/cart', [ProductController::class, 'cart'])->name('cart');
Route::get('/add-to-cart/{id}', [ProductController::class, 'addToCart'])->name('add.to.cart');
Route::patch('/update-cart', [ProductController::class, 'update'])->name('update.cart');
Route::delete('/remove-from-cart', [ProductController::class, 'remove'])->name('remove.from.cart');
তো হয়েগেলো , এখন আপনি ব্রাউজারে http://localhost:8000 হিট করলেই একটি কার্যকর এবং প্রফেশনাল shopping cart দেখতে পাবেন।
Masud Alam
আমি মাসুদ আলম, বাংলাদেশের ৩৬ তম Zend Certified Engineer । ২০০৯ সালে কম্পিউটার সাইন্স থেকে বেচেলর ডিগ্রী অর্জন করি। দীর্ঘ ১৫ বছর আমি Winux Soft, SSL Wireless, IBCS-PRIMAX, Max Group, Canadian International Development Agency (CIDA), Care Bangladesh, World Vision, Hellen Keller, Amarbebsha Ltd সহ বিভিন্ন দেশি বিদেশী কোম্পানিতে ডেটা সাইন্স, মেশিন লার্নিং, বিগ ডেটা, ওয়েব ডেভেলপমেন্ট এবং সফটওয়্যার ডেভেলপমেন্ট এর উপর বিভিন্ন লিডিং পজিশন এ চাকরি এবং প্রজেক্ট লিড করি। এছাড়াও বাংলাদেশের ১৮৫ জন জেন্ড সার্টিফাইড ইঞ্জিনিয়ার এর মধ্যে ১২০ এরও অধিক ছাত্র আমার হাতে জেন্ড সার্টিফাইড ইঞ্জিনিয়ার হয়েছেন। বর্তমানে w3programmers ট্রেনিং ইনস্টিটিউট এ PHP এর উপর Professional এবং Advance Zend Certified PHP -8.2 Engineering, Laravel Mastering Course with ReactJS, Python Beginning To Advance with Blockchain, Machine Learning and Data Science, Professional WordPress Plugin Development Beginning to Advance কোর্স করাই। আর অবসর সময়ে w3programmers.com এ ওয়েব টেকনোলজি নিয়ে লেখালেখি করি।