Bài 1: xây dựng module cart

Bài 1: xây dựng module cart

codersulution Thứ Ba, tháng 9 20, 2022

  

-    Tạo dự án mới tên shopcart:

composer create-project laravel/laravel shopcart.

list product:

- Mở dự án lên :

Vào .env :

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=shopcard
DB_USERNAME=root
DB_PASSWORD=

Vào web.php:

<?php

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 within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('welcome');
});
//show product for user add to cart
Route::get('/product','ProductController@index');

Vào AppServiceProvider.php

<?php

namespace App\Providers;

use Illuminate\Support\Facades\Schema;
use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        Schema::defaultStringLength(191);
    }

    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        //
    }
}

Vào terminal chạy php artisan make:controller ProductController

Vào ProductController.php:

<?php

namespace App\Http\Controllers;

use App\Product;
use Illuminate\Http\Request;

class ProductController extends Controller
{
    public function index(){
        $products = Product::latest()->get();
        return view('products.index',compact('products'));
    }
}

-    Vào resources => views => tạo thư mục products => tạo file index.blade.php

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <title>Document</title>
</head>
<body>
    <div class="products mt-5">
        <div class="container">
            <div class="row">
                @foreach($products as $product)
                <div class="col-md-4">
                    <div class="card" style="width: 18rem;">
                        <img class="card-img-top" src="{{$product->image_path}}" alt="Card image cap">
                        <div class="card-body">
                            <h5 class="card-title">{{$product->name}}</h5>
                            <p class="card-text">
                                {{$product->description}}
                            </p>
                            <a href="#" class="btn btn-primary">add to card</a>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>


<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

Vào navicat tạo database mới tên shopcard:

Vào terminal chạy php artisan make:model Product -m

Vào 2021_11_25_044233_create_products_table.php:

<?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('name');
            $table->string('description');
            $table->string('image_path');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('products');
    }
}

Vào terminal chạy php artisan migrate

Vào navicat tạo dữ liệu mẫu như sau:

có thể thêm bằng cách sau:

Chạy server lên:

Vào terminal php artisan make:migration add_column_price_products --table=products
Vào file : 2021_11_25_060926_add_column_price_products.php
<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class AddColumnPriceProducts extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::table('products', function (Blueprint $table) {
           $table->integer('price');
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::table('products', function (Blueprint $table) {
            //
        });
    }
}
Vào terminal php artisan migrate
Vào navicat thêm dữ liệu:

Vào index.blade.php
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <title>Document</title>
</head>
<body>
    <div class="products mt-5">
        <div class="container">
            <div class="row">
                @foreach($products as $product)
                <div class="col-md-4">
                    <div class="card" style="width: 18rem;">
                        <img class="card-img-top" src="{{$product->image_path}}" alt="Card image cap">
                        <div class="card-body">
                            <h5 class="card-title">{{$product->name}}</h5>
                            <p class="card-text">
                                {{number_format($product->price)}}đ
                            </p>
                            <p class="card-text">
                                {{$product->description}}
                            </p>
                            <a href="#" class="btn btn-primary">add to card</a>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>


<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
kết quả:

Thêm cart Add to cart Laravel Shopping Cart

Vào web.php:
<?php

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 within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('welcome');
});
//show product for user add to cart
Route::get('/product','ProductController@index');
Route::get('/product/add-to-cart/{id}','ProductController@addToCart')->name('addToCart');
Route::get('/product/show-cart','ProductController@showCart')->name('showCart');
-    Vào ProductController.php
<?php

namespace App\Http\Controllers;

use App\Product;
use Illuminate\Http\Request;

class ProductController extends Controller
{
    public function index(){
        $products = Product::latest()->get();
        return view('products.index',compact('products'));
    }
    public function addToCart($id){
//       session()->flush('cart');

        $product = Product::find($id);
        $cart = session()->get('cart');
        if (isset($cart[$id])){
            $cart[$id]['quantity'] = $cart[$id]['quantity'] + 1;
        }else{
            $cart[$id]= [
                'name'=> $product->name,
                'price'=> $product->price,
                'quantity'=> 1,
                'image'=> $product->image_path,
            ];
        }
        session()->put('cart', $cart);
        return response()->json([
            'code'=> 200,
            'message'=>'success'
        ],200);
    }
    public function showCart(){
        $carts = session()->get('cart');
        return view('products.cart',compact('carts'));
    }
}
-    Vào index.blade.php:
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <title>Document</title>
</head>
<body>
    <div class="products mt-5">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <a href="{{route('showCart')}}" class="btn btn-primary mb-5">Show cart to checkout</a>
                </div>
            </div>
            <div class="row">
                @foreach($products as $product)
                <div class="col-md-4">
                    <div class="card" style="width: 18rem;">
                        <img class="card-img-top" src="{{$product->image_path}}" alt="Card image cap">
                        <div class="card-body">
                            <h5 class="card-title">{{$product->name}}</h5>
                            <p class="card-text">
                                {{number_format($product->price)}}đ
                            </p>
                            <p class="card-text">
                                {{$product->description}}
                            </p>
                            <a href="#"
                               data-url="{{route('addToCart',['id' => $product->id]) }}"
                               class="btn btn-primary add_to_cart">
                                Add to card
                            </a>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script>
        function addToCart(event) {
            event.preventDefault();
            let urlCart = $(this).data('url');
            $.ajax({
               type: "GET",
                url:urlCart,
                dataType: 'json',
                success: function (data) {
                    if(data.code == 200){
                        alert('Thêm sản phẩm vào giỏ hàng thành công!')
                    }
                },
                error:function () {

                }
            });
        };
        $(function () {
            $('.add_to_cart').on('click', addToCart);
        })
    </script>
</body>
</html>

-    Vào products => Tạo file  cart.blade.php
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <title>show cart</title>
</head>
<body>
    <div class="cart">
        <div class="container">
            <div class="row">
                <table class="table">
                    <thead>
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">Ảnh sản phẩm</th>
                            <th scope="col">Tên sản phẩm</th>
                            <th scope="col">Giá sản phẩm</th>
                            <th scope="col">Số lượng</th>
                            <th scope="col">Tổng tiền</th>
                            <th scope="col">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @php
                          $total = 0;
                        @endphp
                        @foreach($carts as $cartItem)
                            @php
                                $total += $cartItem['price'] * $cartItem['quantity'];
                            @endphp
                            <tr>
                                <th scope="row">1</th>
                                <td>
                                    <img style="width: 100px; height: 100px;object-fit: contain"
                                         src="{{ $cartItem['image'] }}" alt="">
                                </td>
                                <td>{{ $cartItem['name'] }}</td>
                                <td>{{ number_format($cartItem['price']) }}</td>
                                <td>
                                    <input type="number" value="{{$cartItem['quantity']}}" min="1">
                                </td>
                                <td>{{ number_format($cartItem['price'] * $cartItem['quantity']) }}</td>
                                <td>
                                    <a href="" class="btn btn-primary">Cập nhật</a>
                                    <a href="" class="btn btn-danger">Xóa</a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>

                <div class="col-md-12">
                    <h2>Tổng: {{ number_format($total) }}</h2>
                </div>
            </div>
        </div>
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
Kết quả:

- Vào showw cart:



codersulution

Người đăng: codersulution

Chúa dùng những kẻ thất bại - vì chẳng còn loại người nào khác. Thành công không có dấu chân của kẻ lười biếng!! Đúng vậy! vi lười biếng thì chỉ muốn đi những phương tiện hiện đại. Học hành là không sợ hãi, không biết là hỏi. Chúng ta là người đi học kia mà. Mạnh mẽ và học cho tốt !!!

Đăng nhận xét

0 Nhận xét

myadcash