Download Laravel App
composer create-project --prefer-dist laravel/laravel my-app
C:\xampp\htdocs\laravel10project>composer create-project laravel/laravel laravel10project
Connecting our Database
open .env file root directory.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laraveldb
DB_USERNAME=root
DB_PASSWORD=
Create Model and Migration
C:\xampp\htdocs\laravel\laravelproject>php artisan make:model Book -m
A new file named Book.php will be created in the app directory and database/migrations directory to generate the table in our database
app/Models/Book.php
//app/Models/Book.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Book extends Model
{
use HasFactory;
protected $fillable = [
'name',
'author',
'image',
'price'
];
}
database\migrations\create_books_table.php
//database\migrations\create_books_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.
*/
public function up(): void
{
Schema::create('books', function (Blueprint $table) {
$table->id();
$table->string("name", 255)->nullable();
$table->text("author")->nullable();
$table->string("image", 255)->nullable();
$table->decimal("price", 6, 2);
$table->timestamps();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('books');
}
};
Database Migration php artisan migrate
C:\xampp\htdocs\laravel\laravel10project>php artisan migrate
Migration table created successfully.
check database table
Create Controller
php artisan make:controller BookController
C:\xampp\htdocs\laravel\my-app>php artisan make:controller BookController
app/Http/Controllers/BookController.php
//app/Http/Controllers/BookController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Book;
class BookController extends Controller
{
public function index()
{
$books = Book::all();
return view('products', compact('books'));
}
public function bookCart()
{
return view('cart');
}
public function addBooktoCart($id)
{
$book = Book::findOrFail($id);
$cart = session()->get('cart', []);
if(isset($cart[$id])) {
$cart[$id]['quantity']++;
} else {
$cart[$id] = [
"name" => $book->name,
"quantity" => 1,
"price" => $book->price,
"image" => $book->image
];
}
session()->put('cart', $cart);
return redirect()->back()->with('success', 'Book has been added to cart!');
}
public function updateCart(Request $request)
{
if($request->id && $request->quantity){
$cart = session()->get('cart');
$cart[$request->id]["quantity"] = $request->quantity;
session()->put('cart', $cart);
session()->flash('success', 'Book added to cart.');
}
}
public function deleteProduct(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', 'Book successfully deleted.');
}
}
}
View Blade Bootstrap 5
https://getbootstrap.com/docs/5.0/getting-started/introduction/
https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css
Jquery
https://jquery.com/download/
CDN : jsDelivr CDN
https://www.jsdelivr.com/package/npm/jquery
resources/views/shop.blade.php
//resources/views/shop.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel Add To Shopping Cart</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
<div class="container">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Cairocoders</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="{{ url('/home') }}">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<a class="btn btn-outline-dark" href="{{ route('shopping.cart') }}">
<i class="fa fa-shopping-cart" aria-hidden="true"></i> Cart <span class="badge bg-danger">{{ count((array) session('cart')) }}</span>
</a>
</div>
</nav>
<div class="container mt-4">
<h2 class="mb-3">Laravel Add To Shopping Cart</h2>
@if(session('success'))
<div class="alert alert-success">
{{ session('success') }}
</div>
@endif
@yield('content')
</div>
@yield('scripts')
</body>
</html>
resources/views/products.blade.php
//resources/views/products.blade.php
@extends('shop')
@section('content')
<div class="row">
@foreach($books as $book)
<div class="col-md-3 col-6 mb-4">
<div class="card">
<img src="{{ asset('images') }}/{{ $book->image }}" class="card-img-top"/>
<div class="card-body">
<h4 class="card-title">{{ $book->name }}</h4>
<p>{{ $book->author }}</p>
<p class="card-text"><strong>Price: </strong> ${{ $book->price }}</p>
<p class="btn-holder"><a href="{{ route('addbook.to.cart', $book->id) }}" class="btn btn-outline-danger">Add to cart</a> </p>
</div>
</div>
</div>
@endforeach
</div>
@endsection
resources/views/cart.blade.php
//resources/views/cart.blade.php
@extends('shop')
@section('content')
<table id="cart" class="table table-bordered">
<thead>
<tr>
<th>Product</th>
<th>Price</th>
<th>Total</th>
<th></th>
</tr>
</thead>
<tbody>
@php $total = 0 @endphp
@if(session('cart'))
@foreach(session('cart') as $id => $details)
<tr rowId="{{ $id }}">
<td data-th="Product">
<div class="row">
<div class="col-sm-3 hidden-xs"><img src="{{ $details['image'] }}" class="card-img-top"/></div>
<div class="col-sm-9">
<h4 class="nomargin">{{ $details['name'] }}</h4>
</div>
</div>
</td>
<td data-th="Price">${{ $details['price'] }}</td>
<td data-th="Subtotal" class="text-center"></td>
<td class="actions">
<a class="btn btn-outline-danger btn-sm delete-product"><i class="fa fa-trash-o"></i></a>
</td>
</tr>
@endforeach
@endif
</tbody>
<tfoot>
<tr>
<td colspan="5" class="text-right">
<a href="{{ url('/home') }}" class="btn btn-primary"><i class="fa fa-angle-left"></i> Continue Shopping</a>
<button class="btn btn-danger">Checkout</button>
</td>
</tr>
</tfoot>
</table>
@endsection
@section('scripts')
<script type="text/javascript">
$(".edit-cart-info").change(function (e) {
e.preventDefault();
var ele = $(this);
$.ajax({
url: '{{ route('update.sopping.cart') }}',
method: "patch",
data: {
_token: '{{ csrf_token() }}',
id: ele.parents("tr").attr("rowId"),
},
success: function (response) {
window.location.reload();
}
});
});
$(".delete-product").click(function (e) {
e.preventDefault();
var ele = $(this);
if(confirm("Do you really want to delete?")) {
$.ajax({
url: '{{ route('delete.cart.product') }}',
method: "DELETE",
data: {
_token: '{{ csrf_token() }}',
id: ele.parents("tr").attr("rowId")
},
success: function (response) {
window.location.reload();
}
});
}
});
</script>
@endsection
Routes routes/web.php
//routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\BookController;
/*
|--------------------------------------------------------------------------
| 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('/home', [BookController::class, 'index']);
Route::get('/shopping-cart', [BookController::class, 'bookCart'])->name('shopping.cart');
Route::get('/book/{id}', [BookController::class, 'addBooktoCart'])->name('addbook.to.cart');
Route::patch('/update-shopping-cart', [BookController::class, 'updateCart'])->name('update.sopping.cart');
Route::delete('/delete-cart-product', [BookController::class, 'deleteProduct'])->name('delete.cart.product');
Run C:\xampp\htdocs\laravel\my-app>php artisan serve Starting Laravel development server: http://127.0.0.1:8000
