laravel - website development in php framework part 2

Laravel Part 2

The PHP Framework For Web ArtisansPresented by : Syeda Aimen Batool

Developer @ Swaam Tech

www.swaam.com

www.swaam.com

Welcome BackIn this tutorial we will learn following things How to make a basic simple shopping cart How to make admin panel of an application Linking front end with backend Complete theming using blade template convention Image uploading in Laravel

Quick Guide On Laravel

www.swaam.com

Source Code & Demo• You can download source code for customization from github• Demo of application is available here• For admin panel I’m using basic bootstrap admin theme (Free)• For front end I’m using bootstrap shopping cart theme (Free)


http://ironsummitmedia.github.io/startbootstrap-sb-admin-2/pages/index.html

www.swaam.com

In this Application we have• Product Module • Category Module


www.swaam.comCode Directory Structure

• Admin views are available under admin directory of views• Admin Controllers are available under admin directory of

controllers• Models are available under app directory • Front end views are available under front directory of views• Front end controllers are available under controller directory • Style sheet and scripting files are in assets under resources

directory


www.swaam.com

Development of Category Module (Admin)

• Make model named Categoryo Php artisan make:model Category

• Make controller named CategoryControllero Php artisan make:controller CategoryController

• Create a layout file for admin theming under admin directoryo Define all javascript and css file in layout file o Define a structure using blade template convention (For more detail please refer to

Presentation part one theming)o Open adminlayout.blade.php under admin directory of viewso Copy the code in your practice code


www.swaam.com

Creating Database Migrations for Category

• Create a database• Add database information in .env in your root directory • Now we have to create migration to define our database schema• Run following command in cmd php artisan make:migration create_category_table --create=category• Now you’ll find a file in migrations directory under database

directory


www.swaam.com

Defining database schema• In up method I have defined my database schema

public function up(){ Schema::create('category', function (Blueprint $table) { $table->increments('id');

$table->string('category_name'); $table->timestamps(); });

}• Run => php artisan migrate • You’ll have a table named category in your DB


www.swaam.com

Route for CategoryControllerAll routes for application are defined in route.phpHere => App/Http/route.php Our first route for the application is

Route::get('backend',['as'=>'main_page', 'uses'=>'admin\CategoryController@index']);By hitting YourApp/backend this route will invoke index function in category controller


www.swaam.com

Category Module - index• Index function

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

Please find index.blade.php under admin directory for theme code


www.swaam.com

Category Module - CreateRoute for create page is Route::get('backend/create/',['as'=>'create_category', 'uses'=>'admin\CategoryController@create']);

Which will invoke create function under in CategoryController

public function create(){ return view('admin.create');}

Create function will render view for creating a new categoryView file is under admin folder of views Filename: create.blade.php


www.swaam.com

Category Module – Create view• Please find create.blade.php under admin directory• File is extended from adminlayout and nav view using blade

template convention @extends('admin.adminlayout') @extends('admin.nav')• In adminlayout layout for application is defined • Css and js files are also included here• We are yielding navigation bar and content body of application here

@yield('nav')@yield('admincontent') -> nav & admincontent are our defined sections in our theme files, only that section will be visible here which is defined under these two sections.-> defining sections is on next slide


www.swaam.com

Category Module – Create view• To yield a section we have to define it first • In create.blade.php we have adminsection , syntax for defining

a section is

@section('admincontent') … your code here (Div, form and other markups)@endsection

• We have a form in create.blade.php defined under admincontent section• I have used both methods for creating a form

o Simple html convention to create a form (in category module)o Blade template convention to create a form (in product module)


www.swaam.com

Category Module – Create view• Defining action of a form <form role="form" action={{ route('store_category')}} method="post">• In action attribute we define name of route which will invoke our

function to get POST request and save our data in database • in our route file we have Route::post('backend/store/',['as'=>'store_category', 'uses'=>'admin\CategoryController@store']);• In controller we have store method• After storing data it will redirect user to same page • Please look in to code file


www.swaam.com

Category Module – Store Functionpublic function store(Request $request){ $category = new Category(); -1 $category->category_name= $request->get('category_name'); -2 $category->save(); -3 Session::flash('success','Successfully added! '); -4 return redirect()->route('create_category'); -5}1. Creating an object of model Category (we created a model in the start )2. In this step

I. Getting value of 'category_name‘ field submitted by form $request->get('category_name')II. Assigning it to field value

3. Saving model4. Setting a success message 5. Redirecting it back to create category page


www.swaam.com

Category Module – Listing • To fetch and display categories we have list.blade.php in views• A route named list_categories in route.php• And a method show in controller

public function show($id=0){

$categories = Category::all(); return view('admin.list',compact('categories'));

}


www.swaam.com

Category Module – Editing • To edit we have edit.blade.php in view directory• And a method edit($id=0) in CategoryController

public function edit($id = 0){

$category = Category::find($id); $name = $category->category_name; $category_id= $category->id; return view('admin.edit', compact('name','category_id' ));

}• Fetching record against id & send it to edit view


www.swaam.com

Category Module – Updatepublic function update(Request $request){ $name = $request->get('category_name'); $id = $request->get('cat_id'); $category = Category::find($id); $category->category_name = $name; $category->save(); Session::flash('success','Successfully Updated! '); return Redirect::back();}

• Saving update records and redirecting back to the page


www.swaam.com

Category Module – Delete• To delete a record we have destroy method in our controller

public function destroy ($id){

$category = Category::findOrFail($id); if($category->delete()){ Session::flash('delete_msg','Successfully deleted! '); } return redirect()->route('list_categories');

}• Find a category against an id & delete• Redirect back to categories listing page


www.swaam.com

Category Module – Create viewQuick Guide On Laravel

www.swaam.com

Category Module – Listing ViewQuick Guide On Laravel

www.swaam.com

Development of Product Module (Admin)

• Make model named Producto Php artisan make:model Product

• Make controller named ProductControllero Php artisan make:controller ProductController

• Create a view file createproduct.blade.php for admino Open createproduct.blade.php under admin directory of viewso Copy the code in your practice code


www.swaam.com

Creating Database Migrations for Product

• Now we have to create migration to define our database schema• Run following command in cmd php artisan make:migration create_product_table --create=products• Now you’ll find a file in migrations directory under database

directory


www.swaam.com

Defining database schema• In up method I have defined my database schema

Schema::create('products', function (Blueprint $table) { $table->increments('id'); $table->string('product_name'); $table->float('product_price'); $table->string('product_description'); $table->string('product_image');

$table->foreign('product_category_id')->references('id')->on('category'); $table->timestamps();

});• Run => php artisan migrate • You’ll have a table named products in your DB


www.swaam.com

Route Product Module• First we have routeRoute::get('backend/product/create/',['as'=>'create_product', 'uses'=>'admin\ProductController@create']);

• Createproduct.blade.php view in admin directory• And create method in ProductController • In createproduct view we have a form to add products • Form is defined using blade theme convention


www.swaam.com

Create a Form – Blade Template

{!! Form::open( array( 'route' => 'store_product', //route to submit form request 'class' => 'form', 'novalidate' => 'novalidate', 'files' => true)) !!}

… your form components

{!! Form::close() !!}Complete code is in createproduct.blade.php under admin directory


www.swaam.com

Form Components – Blade Template

<div class="form-group"> {!! Form::label('Product Name') !!}

{!! Form::text('product_name', null, array('placeholder'=>'Enter product name', 'class' =>'form-control' )) !!}

</div>Next we are populating drop down dynamically

{!! Form::label('Product Category') !!}{!! Form::select('product_category', $categories_options,

Input::old('product_category'),array( 'class' => 'form-control'

)) !!}


www.swaam.com

Populating Combo box dynamically• In create method of controller we are fetching all categories from

category table and passing it to create view (in previous slide)public function create(){ $categories_options = DB::table('category')->orderBy('category_name', 'asc')->lists('category_name','id'); return view('admin.createproduct',compact('categories_options',$categories_options));}

• Passing $categories_options in createproduct view


www.swaam.com

Product Module - Store• After submitting form we have to store data in database • We have an image against every product • Add file field in your form

{!! Form::label('Product Image') !!}{!! Form::file('product_image', null) !!}


www.swaam.com

Image Uploading - Store$imageName = uniqid('img_').'.'.$request->file('product_image')->getClientOriginalExtension();

$path = $request->file('product_image')->move( base_path() . '/public/images/catalog/', $imageName);

$product->product_image = '/public/images/catalog/'. $imageName;• Creating a custom name for image being uploaded• Then defining a path to upload image • Saving that path in Product Model object


www.swaam.com

Complete Method - Storepublic function store(Request $request){ $product = new Product(); $product->product_name= $request->get('product_name'); $product->product_description= $request->get('product_description');

$product->product_price= $request->get('product_price'); $product->product_category_id = $request->get('product_category'); $imageName = uniqid('img_').'.'. $request->file('product_image')->getClientOriginalExtension();

$path = $request->file('product_image')->move( base_path() . '/public/images/catalog/', $imageName );

$product->product_image = '/public/images/catalog/'. $imageName; $product->save(); Session::flash('success','Successfully added! '); return redirect()->route('create_product');}


www.swaam.com

Product Controller – Edit | Listing | Delete

• We have same logic for editing listing and deleting a record as in category module

• Please find o Editproduct.blade.php under admin directoryo Edit method under ProductControllero Listprouducts.blade.php for listing viewo Show method for listing and destroy method for deleting a producto And corresponding routes in route.php


www.swaam.com

Display Image in Listing<img src="{{URL::to('/'). $product->product_image }}" />URL::to('/') is our path towards base directory and product_image variable holds the location of image stored


www.swaam.com

Add Product - ViewQuick Guide On Laravel

www.swaam.com

List Products ViewQuick Guide On Laravel

www.swaam.com

Frontend Development• All frontend views are available under Front directory• MainController under controller directory contains all methods

dealing with frontend• All routes for frontend are defined in route.php • Right now we don’t need any Model or Database migration as we

will populate products on frontend which were added from backend


www.swaam.com

Frontend Theming• In front directory we have • A file frontlayout.blade.php, all css,js and layout is defined

here as we did in admin layout file• leftbar.blade.php in which we have defined our left navigation

bar • Navbar.blade.php in which we have defined our navigation bar • home.blade.php


www.swaam.com

Home PageQuick Guide On Laravel

www.swaam.com

Home Page • Home page is extended with following files

@extends('admin.adminlayout')@extends('front.frontlayout')@extends('front.navbar')@extends('front.leftbar')@extends('front.footer')

• In content we have our main body• Listing all products on main page• You can see a static slider also


www.swaam.com

MainController - indexpublic function index($id = 0){ $all_products = Product::all(); $all_categories = Category::all(); $total_products = DB::table('carts')->count(); return view('front.home',compact( array('all_products',$all_products, 'all_categories', $all_categories, 'total_products', $total_products)));}• Fetching all products and categories from database• Counting total products from db and passing these values to home page • In home page listing all products by iterating loops


www.swaam.com

MainController - showpublic function show($id = 0){ $user_id = Session::getId(); $total_products= Cart::where('user_id', '=', $user_id)->count(); $all_categories = Category::all(); if($id > 0) { $all_products = Product::where('product_category_id', $id)->get();

* }else{ $all_products = Product::all(); } return view('front.home',compact( array('all_products',$all_products, 'all_categories', $all_categories, 'total_products', $total_products)));}• If a particular category is clicked this method will fetch products against that

category ( * ) • Else it will fetch all products and will pass them to home page for listing


www.swaam.com

MainController – Single Product public function showProduct($id = 0){ $user_id = Session::getId(); $total_products= Cart::where('user_id', '=', $user_id)->count(); $all_categories = Category::all(); if($id > 0) { $products = Product::where('id', $id)->get(); }else{ $products = Product::all(); } return view('front.singleproduct',compact(array('products',$products, 'all_categories', $all_categories, 'total_products', $total_products)));}• This will fetch record of a product and pass it to singleproduct view file


www.swaam.com

MainController – Single Product Quick Guide On Laravel

www.swaam.com

MainController – Add to Cartpublic function addToCart($product_id){

… whole code of this function is in MainController file}• Get id of the product • Create an object of Model Cart• And save it against a user id• Redirect back to previous page


www.swaam.com

Successfully Added!Quick Guide On Laravel

www.swaam.com

Products By CategoryQuick Guide On Laravel

www.swaam.com

Admin Side - ViewQuick Guide On Laravel

www.swaam.com Learn. Implement. Grow

Contact Us:Phone number : +92 423 5782346Email ID: [email protected]: Suite # 503, Eden Tower, Gulberg III, Lahore Pakistan.

Thank You!


laravel - website development in php framework part 2

Software