Develop an E-Commerce Website With Laravel 5.4 - Part 7
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
- Develop an E-Commerce Website With Laravel 5.4 - Part 6
- Develop an E-Commerce Website With Laravel 5.4 - Part 7
Sorry for another big gap. Hopefully would be able to finish up now 
In last post we learnt how to integrate backend with views. Now it's time to move forward.
In this post we are going to work on individual product page. For that we will do following things:
- Crete
ProductControllercontroller. - Create the route for the single page.
- Integrate the product model to show data.
Controller creation is simpler, all I have to do is to run the following command in Project folder:
php artisan make:controller ProductController --resource
I added --resource parameter in the command which makes it a Resourceful Controller. It is a special type of controller which contains all methods can be performed with a model like GET,POST,DELETE,PUT etc. When you run the command it will create the controller with methods like index(), create() etc.
One can create entire website within a single folder, HomeController in our case but that is not a good practise. Each Entity should have a separate folder.
OK, controller is created, now I am going to create route. Since the controller is a Resourceful Controller we will not need to create separate routes for each method. Instead I am going to do the following in routes/web.php file:
Route::resource('product', 'ProductController')
Now, if I check the list of all routes by running php artisan route:list, something like below will appear:
+--------+-----------+-------------------------------+-----------------+-----------------------------------------------------+--------------+
| Domain | Method | URI | Name | Action | Middleware |
+--------+-----------+-------------------------------+-----------------+-----------------------------------------------------+--------------+
| | GET|HEAD | / | | App\Http\Controllers\HomeController@index | web |
| | GET|HEAD | _dusk/login/{userId}/{guard?} | | Laravel\Dusk\Http\Controllers\UserController@login | web |
| | GET|HEAD | _dusk/logout/{guard?} | | Laravel\Dusk\Http\Controllers\UserController@logout | web |
| | GET|HEAD | _dusk/user/{guard?} | | Laravel\Dusk\Http\Controllers\UserController@user | web |
| | GET|HEAD | api/user | | Closure | api,auth:api |
| | GET|HEAD | product | product.index | App\Http\Controllers\ProductController@index | web |
| | POST | product | product.store | App\Http\Controllers\ProductController@store | web |
| | GET|HEAD | product/create | product.create | App\Http\Controllers\ProductController@create | web |
| | GET|HEAD | product/{product} | product.show | App\Http\Controllers\ProductController@show | web |
| | PUT|PATCH | product/{product} | product.update | App\Http\Controllers\ProductController@update | web |
| | DELETE | product/{product} | product.destroy | App\Http\Controllers\ProductController@destroy | web |
| | GET|HEAD | product/{product}/edit | product.edit | App\Http\Controllers\ProductController@edit | web |
+--------+-----------+-------------------------------+-----------------+-----------------------------------------------------+--------------+
Laravel itself took care of the necessary routes and created named routes. For instance product.create can be referred when we are going to add a product by calling create method of ProductController.
Since our goal is to display a single product, we are going to use show() method. For that purpose first I will create a view file. Create a new blade template file (.blade.php) file in views/ folder. For sake of management I created a new folder, named product and added a new file, named show.php in it. In the file I added the following:
@extends('layout.master')
@section('content')
<div class="row margin-top">
<div class="col-md-11 col-md-offset-1">
A Single Product
</div>
</div>
@stop
And in show() method of ProductController I made following changes:
public function show( $id ) {
return view('product/show');
}
I then accessed the page by hitting the URL http://golmarket.dev/product/21, where 21 is the product Id. It shows follownig:
Ok So far so good. I then went to single product page of the theme and copied the required HTML and pasted in my view and now it looks like this:
We have to replace the static text with the text coming from the table. For that we will have to access data via model. Since there is no Productmodel yet so let's create one!
php artisan make:model Models/Product
And then go back to ProductController and call a single product by Id
public function show( $id ) {
$product = Product::find( $id );
return view( 'product/show' )
->with( 'product', $product );
}
It will fetch the product by Id $id and then will pass the variable in the view by calling with method.
Now data is passed to the view, it's time to access and make it view on the page.
In show.blade.php file, I will replace static text with code like:
<h5>{!! $product->title !!}</h5>
<div class="col-md-4 agileinfo_single_left">
<img id="example" src="{!! $product->image !!}" alt=" " class="img-responsive">
</div>
$product is the variable passed in with method,the fields like $title,image are the table fields passed by the model in the controller. If all works well then page will now look like below:
Before I conclude, let's integraste the single page on main page. Go to index.blade.php and change single.html to {!! route('product.show',$hot_product->id) !!}
The route routine takes the route name as first parameter, in our case product.show and parameter, in our case $id. The final URL will look like this:
http://golmarket.dev/product/25
That's it for now. In coming post we will add the product in cart. Till then..Bye!!
The updated code has been push to Github.
