Develop an E-Commerce Website With Laravel 5.4 - Part 2

All posts in this series:

• Develop an E-Commerce Website With Laravel 5.4 - Part 1
• Develop an E-Commerce Website With Laravel 5.4 - Part 2
• Develop an E-Commerce Website With Laravel 5.4 - Part 3
• Develop an E-Commerce Website With Laravel 5.4 - Part 4
• Develop an E-Commerce Website With Laravel 5.4 - Part 5

First of all I am sorry it took almost 3 months to write the next sequel due to day job and other stuff.

In this post I am going to integrate a free e-commerce theme in Laravel project. You can create your own as well but this is not the scope of this series. We are mainly focusing on Laravel 5.4 features. It took me a while to figure out but finally got settled with Grocery Store free bootstrap theme. I will not be implementing all features of it but will try to cover main things like list displays, single product page, shopping cart etc. I might make a few changes in original theme for serving my purposes.

Implementing a theme is quite easy in Laravel. First I downloaded the theme files on my machine. Once done, I find different files for different sections; home,kitchen, about us etc.

I am starting from Home Page, I created a new view file called master.blade.php and just dumped all the content of index.html file in it.

Next step is setting up the home page route.

What is routing?

In ancient time websites were built in a way that in order to access a resource you actually had to hit the physical html/php page. For instance, if there is a file name about.html, if one wants to access he would go to url like http://example.com/about.html. If it is some dynamic page then you can tortured with URLs like this:- http://example.com/search.php?type=simple&query=ipad.

First it looks ugly, second it is not readable and human-friendly. Like, who on earth will remember this junk? Third most important, such URLs are not SEO friendly either. By SEO friendly I mean that when Google indexes your web page along with URL info, it is not going to discover the site by Google users. Instead of that a URL like this is more readable for both humans as well as search engines:- http://example.com/search/simple/ipad

Cool, no? prior to MVC frameworks this desired result was achieved by writing Modrewrite rules in .htaccess or httpd.conf file. This thing worked for long time. There were a couple of issues with it; first, you gotta be a scientist to understand how these rules work, second you gotta be a RegEx champ to write rules. There's another one, that, you gotta play with a server file(htaccess) all the time which is risky and often makes admin restless as a single mistake could break entire web server. People then tried to write rules at application end and this was the start that evolved and become a standard in a MVC framework. Laravel went a step ahead and make it more enjoyable to implement. So head over to app/routes/web.php. Here you will find a single route defined as:

Route::get('/', function () {
    return view('welcome');
});

When you first install Laravel and access the home page, this route is called. What actually happening that get method of Route class calling a welcome view file if someone access the main page or I say / root URL. In our case it is calling http://golmarket.dev. The get method tells that HTTP request of type GET is being made. By default all the requests are of type GET and there are certain situations where you make other kind of requests. So, I am going to remove it and creating my own route:

Route::get('/','HomeController@index');

It will not work. The reason is, there is no HomeController. @index tells which class method of HomeController. To sum up, when the main page (/) is called, it will look for an index method in HomeController class.

How MVC Works?

I will not write my own words, found an awesome and simple explaination of roles of Model, View and Controller on Stackoverflow:

View: "Hey, controller, the user just told me he wants item 4 deleted."
Controller: "Hmm, having checked his credentials, he is allowed to do that... Hey, model, I want you to get item 4 and do whatever you do to delete it."
Model: "Item 4... got it. It's deleted. Back to you, Controller."
Controller: "Here, I'll collect the new set of data. Back to you, view."
View: "Cool, I'll show the new set to the user now."

Pretty cool,right? So, I am going to create HomeController. For that I am going to use artisan's make:controller command to create the controller. Open Terminal and go to your project folder and run the following command:

 php artisan make:controller HomeController	

artisan is a Laravel command line utility to perform various tasks like creating model, controllers etc. You can get a full list of commands by running php artisan. You can also write your own command for some specific purpose.

A new file will be created in app/Http/Controllers with name HomeControllers.php which looks like this:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class HomeController extends Controller
{
  
}

In this class I am going to create a public method called index. It is not necessary to be called index because it is calling the root page. You may call it as mySweetMethod, who stops you?

OK, so my index method will look like this:

public function index() {
    return view('index');
    }
 

This method returns the output of view method which itself is taking a parameter here. In my case it is index. What actually it is? If you remember I created a file named index.blade.php. This function is taking name of blade file and after processing it is returning the HTML markup of the page to browser. We will discuss further in upcoming posts. If works well, now on accessing http://golmarket.dev you will the markup of our theme's index page. It is not beautiful as path of CSS and images are not correct but at least it works. If you check the source of Home page of the Demo you will see multiple calls of CSS and JS files are being made. It's OK but this is not what I want, neither it's recommend in modern web development. The reason is that multiple requests slow down the performance of your page. Our goal should be to have as minimal as possible requests on a page so that it loads faster. If it loads faster then chances are it will rank better on Google as speed is one of the core factor to get appeared on Google's top pages.

That's it for now. In next part I will discuss how to use Laravel Mix to concatenate or minify CSS and JS files into a single resource for better performance. I will also discuss how to create a master layout and call child pages in it. Stay tuned!