In this series of posts we are going to build a simple shopping cart application. To do this we will depart from the tennis club application we have been building and create a new laravel application. Follow the steps from the getting started section to create a new laravel application and ensure the Infyom generator is included. Once that's done you can return to this point and get started building a shop window.
A shopping cart is probably the most regularly requested functionality for any website. The requirements are as follows:
There are a wide range of shopping cart plugins available in a variety of different technologies. Having conducted a review of these I decided the best approach would be to build a simple cart from scratch. This will show off some of the easy-to-use features of both Larvel and Twitter Bootstrap.
The application will be built on a "minimum viable product" basis. This should make it easy to understand and straightforward to adapt.
- A shop window grid, this is commonly understood by online shoppers as a grid with pictures of the items for sale
- The ability to add items to the cart and have the cart persist in the session. The users need to know that any items added to the cart will remain there even if they visit another page. If a second instance of the same item is added to the cart the cart should record that the quantity of that product in the cart has increased by one. I.e. The cart should handle the quantity of each product requested.
- The shopping window grid page should also have the ability to empty the cart at any stage
- The ability to checkout. When the shopper has everything they need they should be able to go ahead and visit the checkout page to place the order.
- The checkout page should also have the ability to add or remove items from the cart before the order is placed.
To begin with we need to create a brand new Laravel application. cd into your laravel folder and use the following line to create a new application.
php composer.phar create-project --prefer-dist laravel/laravel shoppingCart "^8.0"
Once the new project folder has been created, cd into it and turn it into a repo - use the following lines (one at a time)
git init git add . git branch -M main git commit -am "initial commit"
To tie this folder repo to your empty repo in the cloud type
git remote add origin <<your_repo_url_this_weeks_lab>>
Then push the code
git push origin main
To get started with the example we need a database that will handle a many to many relationship between orders and products. The product in this example is sportswear. The following script will create the database and some test data.
drop database if exists shoppingcart;
create database shoppingcart;
use shoppingcart;
create table product (
id int auto_increment,
name varchar(30),
description varchar(30),
colour varchar(30),
price decimal(18,3),
image varchar(30),
created_at datetime,
updated_at datetime,
deleted_at datetime,
primary key(id)
);
create table scorder (
id int auto_increment,
orderdate datetime,
deliverystreet varchar(30),
deliverycity varchar(30),
deliverycounty varchar(30),
ordertotal decimal(18,3),
created_at datetime,
updated_at datetime,
deleted_at datetime,
primary key(id)
);
create table orderdetail (
id int auto_increment,
productid int,
orderid int,
quantity int,
subtotal decimal(18,3),
created_at datetime,
updated_at datetime,
deleted_at datetime,
primary key(id),
foreign key(productid) references product(id),
foreign key(orderid) references scorder(id)
);
insert into product(name, description, colour, price, image) values ("T-Shirt", "Crew Neck", "Green", 8.00, "greenCrewNeckTshirt.jpg");
insert into product(name, description, colour, price, image) values ("Sweatshirt", "V Neck", "Blue", 20.00, "blueVNecksweatshirt.jpg");
insert into product(name, description, colour, price, image) values ("Hoodie", "Comfort Fit", "Red", 25.00, "redHoodie.jpg");
insert into product(name, description, colour, price, image) values ("T-Shirt", "Crew Neck", "Red", 8.00, "redCrewNeckTshirt.jpg");
insert into product(name, description, colour,price, image) values ("Sweatshirt", "V Neck", "Yellow", 20.00, "yellowVNeckSweatshirt.jpg");
insert into product(name, description, colour,price, image) values ("Hoodie", "Comfort Fit", "Blue", 25.00, "blueHoodie.jpg");
insert into product(name, description, colour, price,image) values ("T-Shirt", "Crew Neck", "Purple", 8.00, "purpleCrewNeckTshirt.jpg");
insert into product(name, description, colour, price,image) values ("Sweatshirt", "V Neck", "Red", 20.00, "redVNeckSweatshirt.jpg");
insert into product(name, description, colour,price, image) values ("Hoodie", "Comfort Fit", "Orange", 25.00, "orangeHoodie.jpg");
insert into scorder(orderdate,deliverystreet,deliverycity,deliverycounty) values ("2018-01-05 10:05:00","1 Main Street", "Blanchardstown", "Dublin");
insert into scorder(orderdate,deliverystreet,deliverycity,deliverycounty) values ("2018-01-07 17:15:00","25 High Street", "Lucan", "Dublin");
insert into scorder(orderdate,deliverystreet,deliverycity,deliverycounty) values("2018-01-05 10:05:00","19 New Road", "Finglas", "Dublin");
insert into orderdetail(productid,orderid,quantity) values (1,2,2);
insert into orderdetail(productid,orderid,quantity) values (1,2,2);
Now that you have created your database - go ahead and change your database credentials in the .env file in the shoppingcart folder so that they now point to your new database - note the database name is shoppingcart.
Before we can scaffold our database tables we need to install Infyom. Follow the blogpost "getting infyom installed" from the getting started section. Once this is complete you can scaffold each of the three tables from the shoppingcart database using the following approach. The line to scaffold a table is
php artisan infyom:scaffold <<your_table_name>> --fromTable --tableName=<<your_table_name>>
Using this line, scaffold each of the tables from the shoppingcart database. Note - the --switches are caseSensitive.
The following zip archive contains sample pictures of sportswear to accompany the example. Download the file by right-clicking on the link. Save all the pictures inside the archive to the public/img folder within your application folder.
Theses will be the images in our shop window display. Before we can get our shop window working we need to add a Controller function and a corresponding route. Add the following function to app\Http\Contollers\productController (it doesn't matter exactly where you put it, it will be one of many functions in the Controller - make sure its similarly indented and that there is a line of space before and after the function.
public function displayGrid(Request $request)
{
$products=\App\Models\Product::all();
return view('products.displaygrid')->with('products',$products);
}
To make this function work we need a corresponding route in the routes/web.php file. Edit that file and add the following line
Route::get('product/displaygrid', 'App\Http\Controllers\productController@displaygrid')->name('products.displaygrid');
Note - the standard BREAD routes that the scaffolder has generated will start withe the name of the table may cause conflicts with the routes we will add during the course of the project. This is why we have used /product/displaygrid instead of /products/displaygrid.
Now, finally, we are ready to add the displaygrid view which corresponds to that controller action. Save the following code to a file called resources/views/products/displaygrid.blade.php
@extends('layouts.app')
@section('content')
@include('flash::message')
<div class='d-flex flex-wrap align-content-start bg-light'>
@foreach($products as $product)
<div class="p-2 border col-4 g-3">
<div class="card text-center">
<div class="card-header d-block"><h5 class="mx-auto d-block">{{ $product->name }} {{ $product->description }}</h5></div>
<div class="card-body"><img style="width:65%;height:200px;" class="mx-auto d-block" src="{{ asset('/img/' . $product->image)}}"/></div>
<div class="card-footer"><button id="addItem" type="button" class="btn btn-success mx-auto d-block addItem" value="{{$product->id}}">Add To Cart</button></div>
</div>
</div>
@endforeach
</div>
@endsection('content')
Now to test your application (make sure to run php artisan serve) to get your webserver running). Visit http://localhost:8000/product/displaygrid. You should see the following view.
If you have that working add, commit and push your changes.