Friday, 19 July 2019

Implement Custom Search Filter in Laravel 5.8 Datatable using Ajax



If you are using Laravel framework and you are using Datatable for display data on web page in tabular format. This is because Laravel Datatable has provide lots of feature like searching, paginate data, column sorting etc. without write any line of code. But some time this Datatable default search feature is not satisfy our data searching needs. e.g. Suppose we want to get male gender data, then we have enter male in search textbox, then at that time it will load female data also, this is because "male" word has been also come in "female" word also. So at that time we want to make custom search filter in Laravel datatable for filter exact particular word data only.

For this things here we have make custom search filter in Laravel 5.8 Datatable by using Ajax. In Laravel 5.8 framework, for use Datatable in Laravel 5.8 application we have use yajra Laravel datatable package. By using this yajra Laravel Datatable package we can implement Datatable in Laravel 5.8 application. Here we will show you how to add custom search filter with yajra datatables in Laravel 5.8 framework. Suppose we want to add custom search filter like dropdown or specific fields of database then also you can do it by using Laravel 5.8 Datatable.

We all now Laravel yajra Datatable has provide by default global search feature, and in that search feature it has search entire row of table. But if we want to required search filter for only one specific table column with select box then we should have to implement custom search filter of data in our Datatable. Below you can find step by step process for how to make custom search filter in Laravel 5.8 Datatable by using yajra datatables package and Ajax jquery.

  • Install Laravel 5.8 framework

  • Make Database connection Laravel Framework

  • Install yajra datatables package

  • Create Controller

  • Create View Blade file

  • Set Route

  • Run Laravel Application



Install Laravel 5.8 framework


First we need to download and install Laravel 5.8 framework. So we have to go command prompt, in which we have to first run composer command and then after we have to define folder in which we want to download and install Laravel 5.8 framework, and lastly we have to write following command. This command will download latest Laravel framework in define folder.


composer create-project --prefer-dist laravel/laravel custom_search


Make Database connection Laravel Framework


Once Laravel 5.8 framework download and install, then after we have to make database connection. For make database connection in Laravel 5.8 framework. For this we have to open .env file and in this file we need to define mysql configuration details, which you can see below.


DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=testing
DB_USERNAME=root
DB_PASSWORD=


tbl_customer.sql



--
-- Database: `testing`
--

-- --------------------------------------------------------

--
-- Table structure for table `tbl_customer`
--

CREATE TABLE `tbl_customer` (
  `CustomerID` int(11) NOT NULL,
  `CustomerName` varchar(250) NOT NULL,
  `Gender` varchar(30) NOT NULL,
  `Address` text NOT NULL,
  `City` varchar(250) NOT NULL,
  `PostalCode` varchar(30) NOT NULL,
  `Country` varchar(100) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

--
-- Dumping data for table `tbl_customer`
--

INSERT INTO `tbl_customer` (`CustomerID`, `CustomerName`, `Gender`, `Address`, `City`, `PostalCode`, `Country`) VALUES
(1, 'Maria Anders', 'Female', 'Obere Str. 57', 'Berlin', '12209', 'Germany'),
(2, 'Ana Trujillo', 'Female', 'Avda. de la Construction 2222', 'Mexico D.F.', '5021', 'Mexico'),
(3, 'Antonio Moreno', 'Male', 'Mataderos 2312', 'Mexico D.F.', '5023', 'Mexico'),
(4, 'Thomas Hardy', 'Male', '120 Hanover Sq.', 'London', 'WA1 1DP', 'United Kingdom'),
(5, 'Paula Parente', 'Female', 'Rua do Mercado, 12', 'Resende', '08737-363', 'Brazil'),
(6, 'Wolski Zbyszek', 'Male', 'ul. Filtrowa 68', 'Walla', '01-012', 'Poland'),
(7, 'Matti Karttunen', 'Male', 'Keskuskatu 45', 'Helsinki', '21240', 'Finland'),
(8, 'Karl Jablonski', 'Male', '305 - 14th Ave. S. Suite 3B', 'Seattle', '98128', 'United States'),
(9, 'Paula Parente', 'Female', 'Rua do Mercado, 12', 'Resende', '08737-363', 'Brazil'),
(10, 'John Koskitalo', 'Male', 'Torikatu 38', 'Oulu', '90110', 'Finland'),
(39, 'Ann Devon', 'Female', '35 King George', 'London', 'WX3 6FW', 'United Kingdom'),
(38, 'Janine Labrune', 'Female', '67, rue des Cinquante Otages', 'Nantes', '44000', 'Finland'),
(37, 'Kathryn Segal', 'Female', 'Augsburger Strabe 40', 'Ludenscheid Gevelndorf', '58513', 'Germany'),
(36, 'Elizabeth Brown', 'Female', 'Berkeley Gardens 12 Brewery', 'London', 'WX1 6LT', 'United Kingdom'),
(30, 'Trina Davidson', 'Female', '1049 Lockhart Drive', 'Barrie', 'ON L4M 3B1', 'Canada'),
(31, 'Jeff Putnam', 'Male', 'Industrieweg 56', 'Bouvignies', '7803', 'Belgium'),
(32, 'Joyce Rosenberry', 'Female', 'Norra Esplanaden 56', 'HELSINKI', '380', 'Finland'),
(33, 'Ronald Bowne', 'Male', '2343 Shadowmar Drive', 'New Orleans', '70112', 'United States'),
(34, 'Justin Adams', 'Male', '45, rue de Lille', 'ARMENTIERES', '59280', 'France'),
(35, 'Pedro Afonso', 'Male', 'Av. dos Lusiadas, 23', 'Sao Paulo', '05432-043', 'Brazil'),
(100, 'Kathryn Segal', 'Female', 'Augsburger Strabe 40', 'Ludenscheid Gevelndorf', '58513', 'Germany'),
(101, 'Tonia Sayre', 'Female', '84 Haslemere Road', 'ECHT', 'AB32 2DY', 'United Kingdom'),
(102, 'Loretta Harris', 'Female', 'Avenida Boavista 71', 'SANTO AMARO', '4920-111', 'Portugal'),
(103, 'Sean Wong', 'Male', 'Rua Vito Bovino, 240', 'Sao Paulo-SP', '04677-002', 'Brazil'),
(104, 'Frederick Sears', 'Male', 'ul. Marysiuska 64', 'Warszawa', '04-617', 'Poland'),
(105, 'Tammy Cantrell', 'Female', 'Lukiokatu 34', 'HAMEENLINNA', '13250', 'Finland'),
(106, 'Megan Kennedy', 'Female', '1210 Post Farm Road', 'Norcross', '30071', 'United States'),
(107, 'Maria Whittaker', 'Female', 'Spresstrasse 62', 'Bielefeld Milse', '33729', 'Germany'),
(108, 'Dorothy Parker', 'Female', '32 Lairg Road', 'NEWCHURCH', 'HR5 5DR', 'United Kingdom'),
(109, 'Roger Rudolph', 'Male', 'Avenida Julio Saul Dias 78', 'PENAFIEL', '4560-470', 'Portugal'),
(110, 'Karen Metivier', 'Female', 'Rua Guimaraes Passos, 556', 'Sao Luis-MA', '65025-450', 'Brazil'),
(111, 'Charles Hoover', 'Male', 'Al. Tysiaclecia 98', 'Warszawa', '03-851', 'Poland'),
(112, 'Becky Moss', 'Female', 'Laivurinkatu 6', 'MIKKELI', '50120', 'Finland'),
(113, 'Frank Kidd', 'Male', '2491 Carson Street', 'Cincinnati', 'KY 45202', 'United States'),
(114, 'Donna Wilson', 'Female', 'Hallesches Ufer 69', 'Dettingen', '73265', 'Germany'),
(115, 'Lillian Roberson', 'Female', '36 Iolaire Road', 'NEW BARN', 'DA3 3FT', 'United Kingdom'),
(144, 'Stephen M. Menzies', 'Male', '577 Hartway Street', 'Bruie', '57325', 'United States'),
(143, 'Nikki G. Pascual', 'Female', '4291 Kinney Street', 'Agawam', '1001', 'United States'),
(141, 'Alpha A. Brookover', 'Female', '3542 Trainer Avenue', 'Kilbourne', '62655', 'United States'),
(142, 'Austin D. Salem', 'Male', '1184 Farland Street', 'Brockton', '2401', 'United States'),
(140, 'Bianca A. Carone', 'Female', '1777 Elkview Drive', 'Hialeah', '33012', 'United States'),
(139, 'Stephen M. Menzies', 'Male', '577 Hartway Street', 'Bruie', '57325', 'United States'),
(138, 'Nikki G. Pascual', 'Female', '4291 Kinney Street', 'Agawam', '1001', 'United States'),
(136, 'Alpha A. Brookover', 'Female', '3542 Trainer Avenue', 'Kilbourne', '62655', 'United States'),
(137, 'Austin D. Salem', 'Male', '1184 Farland Street', 'Brockton', '2401', 'United States'),
(145, 'Bianca A. Carone', 'Female', '1777 Elkview Drive', 'Hialeah', '33012', 'United States');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `tbl_customer`
--
ALTER TABLE `tbl_customer`
  ADD PRIMARY KEY (`CustomerID`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `tbl_customer`
--
ALTER TABLE `tbl_customer`
  MODIFY `CustomerID` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=146;


Install yajra datatables package


For use Datatable in Laravel 5.8 application, we have to download or install yajra datatables package in Laravel 5.8 application. For this we have go to command prompt and write following command.


composer require yajra/laravel-datatables-oracle


Once this yajra datatables package has been downloaded in Laravel 5.8 application, now we want to publish this package. For this we need to set providers and alias.
config/app.php

.....
'providers' => [
 ....
 Yajra\DataTables\DataTablesServiceProvider::class,
]
'aliases' => [
 ....
 'DataTables' => Yajra\DataTables\Facades\DataTables::class,
]
.....




Create Controller


In Laravel 5.8 application, we have require to make controller for handle http request. For this we have to go command prompt and write following command.


php artisan make:controller CustomSearchController


This command will make CustomSearchController.php file in app/Http/Controllers folder. In this file first we have to write use DB; statement for use Database operation. In this class we have make following method.

index() - This is the root method of this class. This method has load view blade file in browser with unique country name list for load in select box. This method has also received ajax request for load data in Datatable with all data or filter data in jQuery Datatable. Below you can find source code of this controller class also.

app/Http/Controllers/CustomSearchController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use DB;

class CustomSearchController extends Controller
{
    function index(Request $request)
    {
     if(request()->ajax())
     {
      if(!empty($request->filter_gender))
      {
       $data = DB::table('tbl_customer')
         ->select('CustomerName', 'Gender', 'Address', 'City', 'PostalCode', 'Country')
         ->where('Gender', $request->filter_gender)
         ->where('Country', $request->filter_country)
         ->get();
      }
      else
      {
       $data = DB::table('tbl_customer')
         ->select('CustomerName', 'Gender', 'Address', 'City', 'PostalCode', 'Country')
         ->get();
      }
      return datatables()->of($data)->make(true);
     }
     $country_name = DB::table('tbl_customer')
          ->select('Country')
          ->groupBy('Country')
          ->orderBy('Country', 'ASC')
          ->get();
     return view('custom_search', compact('country_name'));
    }
}

?>


Create View Blade file


In Laravel 5.8 application, we have to make view blade file in resources/views folder and in this folder we have make custom_search.blade.php file. In this file we have add different library like jquery, bootstrap and jQuery Datatable plugin. In this file for custom search we have define two select box and two button which you can find in source code. In this file we have also write jquery code for load data in jquery Datatable plugin. Below you can find complete source code of this file below.

resources/views/custom_search.blade.php

<html>
 <head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Laravel 5.8 - Individual Column Search in Datatables using Ajax</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>  
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 </head>
 <body>
  <div class="container">    
     <br />
     <h3 align="center">Laravel 5.8 - Custom Search in Datatables using Ajax</h3>
     <br />
            <br />
            <div class="row">
                <div class="col-md-4"></div>
                <div class="col-md-4">
                    <div class="form-group">
                        <select name="filter_gender" id="filter_gender" class="form-control" required>
                            <option value="">Select Gender</option>
                            <option value="Male">Male</option>
                            <option value="Female">Female</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <select name="filter_country" id="filter_country" class="form-control" required>
                            <option value="">Select Country</option>
                            @foreach($country_name as $country)

                            <option value="{{ $country->Country }}">{{ $country->Country }}</option>

                            @endforeach
                        </select>
                    </div>
                    
                    <div class="form-group" align="center">
                        <button type="button" name="filter" id="filter" class="btn btn-info">Filter</button>

                        <button type="button" name="reset" id="reset" class="btn btn-default">Reset</button>
                    </div>
                </div>
                <div class="col-md-4"></div>
            </div>
            <br />
   <div class="table-responsive">
    <table id="customer_data" class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>Customer Name</th>
                            <th>Gender</th>
                            <th>Address</th>
                            <th>City</th>
                            <th>Postal Code</th>
                            <th>Country</th>
                        </tr>
                    </thead>
                </table>
   </div>
            <br />
            <br />
  </div>
 </body>
</html>

<script>
$(document).ready(function(){

    fill_datatable();

    function fill_datatable(filter_gender = '', filter_country = '')
    {
        var dataTable = $('#customer_data').DataTable({
            processing: true,
            serverSide: true,
            ajax:{
                url: "{{ route('customsearch.index') }}",
                data:{filter_gender:filter_gender, filter_country:filter_country}
            },
            columns: [
                {
                    data:'CustomerName',
                    name:'CustomerName'
                },
                {
                    data:'Gender',
                    name:'Gender'
                },
                {
                    data:'Address',
                    name:'Address'
                },
                {
                    data:'City',
                    name:'City'
                },
                {
                    data:'PostalCode',
                    name:'PostalCode'
                },
                {
                    data:'Country',
                    name:'Country'
                }
            ]
        });
    }

    $('#filter').click(function(){
        var filter_gender = $('#filter_gender').val();
        var filter_country = $('#filter_country').val();

        if(filter_gender != '' &&  filter_gender != '')
        {
            $('#customer_data').DataTable().destroy();
            fill_datatable(filter_gender, filter_country);
        }
        else
        {
            alert('Select Both filter option');
        }
    });

    $('#reset').click(function(){
        $('#filter_gender').val('');
        $('#filter_country').val('');
        $('#customer_data').DataTable().destroy();
        fill_datatable();
    });

});
</script>


Set Route


Once all controller and view file code is ready, after this we have need to set route of controller method. For this we have to open routes/web.php file and write following code.

routes/web.php

Route::resource('customsearch', 'CustomSearchController');


Run Laravel Application


Lastly, We need to start Laravel server, for this we have to go command prompt and write following command.


php artisan serve


This command will start Laravel application and return base url of Laravel application. For run above example, we have to type http://127.0.0.1:8000/customsearch and you can run above example and check the feature of custom search in Laravel 5.8 Datatable using Ajax with yajra datatables package.

How to Update PHP for WordPress Site

If you’re using WordPress, it’s a good practice to keep an eye out for a new PHP update. Neglecting updates will make your site more susceptible to errors and malicious attacks.

At a glance, updating PHP may sound intimidating – some users may even be afraid that it will break their sites. But in fact, the positives far outweigh the negatives. In this article, we will show you how to update the PHP version for your WordPress site with ease.

Why Should You Update Your PHP for WordPress?


Before you jump into the procedure, you should get to know WordPress first. As a CMS that allows you to create a dynamic site, WordPress makes use of PHP to pull information from the server.

PHP (Hypertext Prepocessor) itself is a server-side programming language that takes care of sending requests to and from the browser and compiling data from the server.

Each time a new version of PHP comes out, a few improvements are added that can make it do its job better, with a few other benefits on top, namely:

  • It makes your site faster. If you want your visitors to load your site faster, this is a benefit you wouldn’t want to miss. The latest version – PHP 7 – is significantly faster than PHP 5.
  • It makes your site more secure. Malicious attacks can cripple your site. Updating PHP to the latest version will result in improved protection against bots and hackers.
  • It helps plugin compatibility. A lot of WordPress plugins rely on PHP to function well, and there’s a chance some won’t work if you still use an older version of PHP.

With that in mind, let’s get ahead of the curb and update your site’s PHP version.

How to Update PHP for WordPress Sites


We’re not going to lie – there’s a slight chance of your site breaking if some components aren’t compatible with the latest PHP version. That’s why we will include various prerequisite steps to ensure it is ready for the update or can be restored immediately if something goes wrong. Better safe than sorry, right?

Step 1: Create A Backup of Your WordPress Site




This is definitely something you must do every time you’re about to make a major change to your site. Regular backups should be a standard practice, but in situations like these, it is especially crucial.

Luckily, you can create a backup easily by using a plugin. One of the best backup plugins out there is UpdraftPlus. It’s easy to install and set up. Plus, you’ll be able to create not only a backup of the core files but of the theme and plugins too.

Installing it is the same as with any other plugin – from your WordPress dashboard, head to Plugins -> Add New then find “Updraft” through search. Once you install and activate the plugin, you can go to the backup interface located under Settings -> UpdraftPlus Backup.




Click Backup Now and wait until the process finishes. Depending on your site’s overall size, this may take a while.

Step 2: Check Your WordPress Site’s Current PHP Version


Make sure that you’re actually in need of updating PHP before you proceed. In order to do this, you need to access your hosting control panel.

If you’re on cPanel, just look for the Software section and choose Select PHP Version. Different providers might use a platform other than cPanel, but the layout should be somewhat similar.




Here you can check your current PHP version as indicated by the red arrow in the screenshot below. If it’s 5.x (e.g. 5.4, 5.6, etc.) then you should update PHP as soon as possible. As of writing this article, the latest version of PHP is 7.3. So, if that’s your current version, you don’t have to update it.



Step 3: Update WordPress, Themes, and Plugins


By updating WordPress, themes, and plugins you get bug fixes and better performance – this will help you smooth out the process and prevent running into issues when updating PHP.

To do this, simply navigate to your WordPress dashboard and check the current version of your WordPress core.




If you see a message informing you about an update being available, click Please update now. Once the update is done, don’t forget to do the same for your plugins and theme through their respective pages.

Step 4: Check Your Site’s Compatibility with the Latest PHP Version


This is yet another precautionary measure to make sure that the updating process will not break your site. Nothing too complicated here as you can make use of a plugin to do the work for you.

From the dashboard, go to Plugins -> Add New and search for “PHP Compatibility Checker.” Install and activate the plugin that is developed by WPEngine. Then, go to the scanning interface located at Tools -> PHP Compatibility.




Select the latest PHP version depending on when you read the article, then choose Scan all plugins and themes to see if they’re compatible. Wait until the plugin finishes scanning.

If the result indicated an incompatibility issue with one of your plugins, don’t get rid of it just yet. There’s a chance that it’s a false positive and it will actually work fine. You should refer to the whitelist of plugins that may cause a false positive.

It’s worth noting, that while this is the best compatibility scanned available, it doesn’t yet support PHP version 7.3. We recommend using it for that update specifically.

Alternatively, if you don’t have a massive ammount of plugins installed, you can always check their respective official pages for compatibility information.

Step 5: Update Your PHP Version


Now that everything is ready, you shouldn’t run into issues when updating PHP to the latest version.

To begin the update head to your control panel, proceed the same way you did when you were checking for the current PHP version. Under the Software section look for Select PHP version.




Here, click the little blue arrow to show a drop-down menu and choose the latest PHP version available. Then, click Set as current and you’re all set! Once the process is complete your WordPress site will run the latest PHP version.

What’s Next?


Once the update is complete, it may take a while for you to start noticing any changes in your site, depending on traffic. To make sure everything still works properly, we suggest checking your site every now and then for errors or bugs.

If your site breaks, try deactivating all the plugins and activating them one by one to figure out which may be causing the issue.

All in all, we recommend you always keep your PHP version up-to-date. There’s an improvement with every new release that can make your WordPress site perform better and protect it from errors and bugs.



Thursday, 18 July 2019

Protect Your E-Commerce With SSL: How to Choose the Best Type?

Which SSL Certificate Is Meant for Your E-Commerce?


Several online businesses are being targeted every second by cyber crooks. That's why web security concerns have been raising due to continuously increasing cyber attacks from the last few years. According to recent research, UK businesses face a cyber attack every 50 seconds and it has been outlined that UK businesses have now reached the highest position in the cyber-attacks record. Most of the unsecured websites have been targeted by cyber attacks. In such tense circumstances, the SSL industry is giving relieve to online industries. SSL doesn't only offer the highest level of security to websites and their users, but also a matter of ranking on Google.

In a recent blog post 'Why HTTPS Matters' Kayce Basques(A Technical Writer of Chrome DevTools & Lighthouse) describes the Substantial of SSL for the website. According to him besides securing your website, HTTPS secures the integrity of websites. Most of the e-commerce owners usually in a dilemma while choosing a type of SSL certificate. They don’t know which type of SSL is meant for their e-commerce. So, we are here to diminish their confusion. Therefore, all types of SSL certificates are described here that tells you which one suits your e-commerce best:

SSL Certificates by Validation Level:


1. Domain Validated (DV) SSL Certificates


Under Domain Validated SSL Certificate process, an applicant needs to go through a simple validation process where the CA checks that the applicant's name and contact information matches with the registration information in the WHOIS database. Moreover, the validation process is done through DNS or via sending an email. After that, the applicant must confirm an administrative email for the domain, or by configuring a few detailed DNS records for the domain. Generally, the whole process takes a few moments or a few hours. We can say that it is a one-day process. When the certificate is issued to the applicant's website, the browsers start showing a secured HTTPS connection. Besides it, a padlock sign on the left side of the address bar comes visible.

2. Organizationally Validated (OV) SSL Certificates:


In OV SSL Certificate validation process, an applicant needs to go through a rigorous process where CA examines the domain ownership and organization information such as; the name of the organization, name of the owner, organization city, state, and country. The whole process is a bit like the business identity validation, however, in the OV certificate validation process, some extra documentation is required to certify the corporate identity. The whole process takes a few hours or a few days as it is the matter of company' identification. When the certificate is issued to the applicant, all information about the corporation is shown in the Organization Validated SSL Certificate.

3. Extended Validation (EV) SSL Certificates:


EV SSL Certificate is first presented in mid-2007 and it has the newest level of certificate validation. In the certificate validation process, CA verifies the right of the candidate to use a domain name and a thorough vetting of the business is conducted. A few documents are asked to confirm the company identity and a set of extra steps and checks are done in EV SSL Certificate validation like third party business directory verification. Usually, A CA verifies the followings:

  • The identity of the corporation goes with administrator records,
  • The legal and physical existence of the corporation,
  • The corporation has correctly certified the issuance of the EV SSL certificate,
  • The corporation has restricted right to use the domain precise in the EV SSL certificate etc.

SSL Certificates by Secured Domains


4. Single-Domain SSL Certificates


Single-Domain SSL Certificates serve only a single domain or subdomain (hostname). All the above-alluded three types fall under this category. For single domain SSL certificate, you can consider one of the cheapest price provider naming CheapSSLShop, you would find all types of single domain SSL certificate at best price. An only main domain can be safeguarded with it, to epitomize:

  • www.myexampledoamin.com
  • myexampledoamin.com



5. Wildcard SSL Certificates:


Wildcard SSL certificate is ideal where a single domain and its unlimited subdomains’ security is essential. You do not need to add subdomains in this certificate as it will secure them automatically. For instances: *.exampledomain.com can secure below subdomains,

  • www.myexampledomain.com
  • mail.myexampledomain.com
  • login.myexampledomain.com

6. Multi-Domain SSL Certificates


A Multi-Domain SSL certificate is installed to protect up to 100 different domains (depending upon provider). A Multi-Domain SSL certificate is appropriate for those have several businesses and they run all of them with different name. Best Examples:

  • myexampledomain.com
  • myexampledomain.org
  • myexampledomain.co.au
  • mail.myexampledomain.com
  • login.myexampledomain.com

7. Unified Communications SSL Certificate


Unified Communications SSL Certificate is just like a multi-domain certificate. However, the main disparity is that it's meant for corporations that operate Microsoft Exchange and Office Communications application in atmospheres. On the other hand, you can install this certificate, if you want to utilize the Subject Alternative Name (SAN) extensions to protect these domains.

To Wrap Things Up


SSL certificate has become today's necessity as Google is flagging to unsecured websites. The unsecured website doesn't only lose website ranking but also losing web traffic as users are more aware now about web security than the past. Therefore, invest your money in SSL and choose the best SSL type that gives the best benefits and the highest security to your e-commerce. I hope the above-alluded information about SSL types will help you in selecting the best type for your website.

Monday, 15 July 2019

How to Implement Date Range Filter in Laravel 5.8 Datatable



Do you know Datatable is widely used for display data in tabular format on web page and Laravel is a widely used PHP framework for web development. Now here we will implement Datatable with Server side processing in Laravel 5.8 framework by using Ajax. Once we have implement Datatable server-side processing in Laravel 5.8 then we can do operation like searching of data, sorting of data, pagination and many more action with server side processing. In Laravel 5.8 we have to use yajra datatable package for implement server side processing of Datatable data. But now question arise how to will filter data which has come between two data, in short how to will filter Datatable data which has come between two date in Laravel 5.8 framework by using Ajax.

So, Here we will discuss how to make Datarange filter in Laravel 5.8 Datatable with Server side processing by using yajra Datatables package by using Ajax. Once we have implement Date range search then we can filter Datatable data which has come between two date. We have already recently published web tutorial on Laravel Data Range search using Ajax jQuery, but in that tutorial we have use simple table for display data but here we have use jQuery Datatable plugin for Date range filter in Laravel 5.8 application. By using jQuery Datatable plugin we can make single page Laravel 5.8 application in which we can date range search in datatables using Laravel 5.8 with Ajax. Below you can find step by step process for implement Date range filter in Laravel 5.8 Datatable.

  • Download Laravel 5.8 Application

  • Install yajra Laravel Datatables package

  • Create Controller

  • Create View Blade File

  • Set Routes

  • Run Laravel 5.8 Application





Download Laravel 5.8 Application


First we want to download Laravel 5.8 framework, for this we have to go command prompt and write following command.


composer create-project --prefer-dist laravel/laravel daterange


This command will download and install Laravel 5.8 application in define folder.




Install yajra Laravel Datatables package


Here we want to implement server-side processing of data in jQuery Datatable, for this in Laravel 5.8 application we have to install yajra jQuery Datatables api for Laravel 5.8 framework. For this we have go to command prompt and write follow command.


composer require yajra/laravel-datatables-oracle


This command will download yajra Laravel Datatable package in vendor folder. Now we want to publish this package in this Laravel 5.8 application. For we have to open config/app.php file and set providers and alias.


.....
'providers' => [
 ....
 Yajra\DataTables\DataTablesServiceProvider::class,
]
'aliases' => [
 ....
 'DataTables' => Yajra\DataTables\Facades\DataTables::class,
]
.....


Create Controller


After installing of yajra Laravel Datatable package, now we need to create controller for handle http request. For this we have go to command prompt and write following command.


php artisan make:controller DateRangeController


This command will make controller file in app/Http/Controllers/DateRangeController.php. In this file first we have write write use DB; statement. It will for handle database operation. In this controller class we have make one index() method. This is this root method of this class. This method has load view blade file in browser, and this method also received ajax request for load data in jQuery Datatable by using yajra Laravel Datatable package. Below you can find source code of this method.


<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use DB;

class DateRangeController extends Controller
{
    function index(Request $request)
    {
     if(request()->ajax())
     {
      if(!empty($request->from_date))
      {
       $data = DB::table('tbl_order')
         ->whereBetween('order_date', array($request->from_date, $request->to_date))
         ->get();
      }
      else
      {
       $data = DB::table('tbl_order')
         ->get();
      }
      return datatables()->of($data)->make(true);
     }
     return view('daterange');
    }
}

?>


Create View Blade File


View file has been used in Laravel for display html output on web page. In Laravel view file has been store under resources/views folder and here we have create daterange.blade.php file. In this file we have add jQuery, Bootstrap, Datatable and Datepicker library link. Here for date range filter we have use Date picker library for selecting date. Below you can find source of resources/views/daterange.blade.php file.


<html>
 <head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Laravel 5.8 - Daterange Filter in Datatables with Server-side Processing</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>  
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.js"></script>
 </head>
 <body>
  <div class="container">    
     <br />
     <h3 align="center">Laravel 5.8 - Daterange Filter in Datatables with Server-side Processing</h3>
     <br />
            <br />
            <div class="row input-daterange">
                <div class="col-md-4">
                    <input type="text" name="from_date" id="from_date" class="form-control" placeholder="From Date" readonly />
                </div>
                <div class="col-md-4">
                    <input type="text" name="to_date" id="to_date" class="form-control" placeholder="To Date" readonly />
                </div>
                <div class="col-md-4">
                    <button type="button" name="filter" id="filter" class="btn btn-primary">Filter</button>
                    <button type="button" name="refresh" id="refresh" class="btn btn-default">Refresh</button>
                </div>
            </div>
            <br />
   <div class="table-responsive">
    <table class="table table-bordered table-striped" id="order_table">
           <thead>
            <tr>
                <th>Order ID</th>
                <th>Customer Name</th>
                <th>Item</th>
                <th>Value</th>
                            <th>Date</th>
            </tr>
           </thead>
       </table>
   </div>
  </div>
 </body>
</html>

<script>
$(document).ready(function(){
 $('.input-daterange').datepicker({
  todayBtn:'linked',
  format:'yyyy-mm-dd',
  autoclose:true
 });

 load_data();

 function load_data(from_date = '', to_date = '')
 {
  $('#order_table').DataTable({
   processing: true,
   serverSide: true,
   ajax: {
    url:'{{ route("daterange.index") }}',
    data:{from_date:from_date, to_date:to_date}
   },
   columns: [
    {
     data:'order_id',
     name:'order_id'
    },
    {
     data:'order_customer_name',
     name:'order_customer_name'
    },
    {
     data:'order_item',
     name:'order_item'
    },
    {
     data:'order_value',
     name:'order_value'
    },
    {
     data:'order_date',
     name:'order_date'
    }
   ]
  });
 }

 $('#filter').click(function(){
  var from_date = $('#from_date').val();
  var to_date = $('#to_date').val();
  if(from_date != '' &&  to_date != '')
  {
   $('#order_table').DataTable().destroy();
   load_data(from_date, to_date);
  }
  else
  {
   alert('Both Date is required');
  }
 });

 $('#refresh').click(function(){
  $('#from_date').val('');
  $('#to_date').val('');
  $('#order_table').DataTable().destroy();
  load_data();
 });

});
</script>


Set Routes


In Laravel we have to set the route of all controller method, for this we have open routes/web.php file and in this file we have to define route.


Route::resource('daterange', 'DateRangeController');


Run Laravel 5.8 Application


Lastly, We have to run Laravel application. For this we have go to command prompt and write follow command.


php artisan serve


This command will start Laravel server and it will give base url of Laravel application. For access this daterange application we have to write follow url in browser.


http://127.0.0.1:8000/daterange


So, this is complete step by step process for implement date range filter in Laravel 5.8 Datatable by using yajra datatable package and Ajax.

Thursday, 11 July 2019

How to boost your e-commerce business with Magento 2?



Do you want to boost the sales rate or to expand your e-commerce business? Then you need a dedicated and organized platform to fetch some amazing outcome. Without any doubt, Magento 2 is the latest trending platform for all the online business websites.

Magento is an open-sourced platform for all e-commerce business websites that helps with a feasible cart system, content and SEO functionalities to the merchants.

Magento has inbuilt tools for marketing, SEO, catalogue, cart, and Wishlist which helps to boost the website sales.

So, what exactly is Magento?


Well, if you want to expand the online business or to revamp your online shopping website to channelize your customers for greater user experience, then Magento will be the best option for you.

If you are a starter, then Magento offers you a flexible environment so that you can adapt to the requirements for your e-commerce website or an online store. Magento is an all in one platform for all the online merchandise because it covers all the product range, also allows Magento development extensions, add few more catalogues, and integrate all the required features that are already existing.

Magento helps you to sell your products if you are in the fashion industry, a retail chain business if you are a firm that distributes the products or even if your business is B2B or B2C.

Also, if you want to sell your products to sell internationally, Magento is the best fit to meet your needs as it is a multi-currency, multi-tax and multi-language multi-currency which means you can continue your business with other countries, other currencies and their respective tax systems. Moreover, Magento gives timely updates and release.

Magento allows that if your company grows over time, your e-commerce will keep up and not be left behind. To do this Magento 2 constantly evolves the product with new versions, and allows you to enrich the technology with extensions, which will make your online sales website never lag your business.

Now let us discuss the core advantages of the Magento.


1. Search Engine Optimization (SEO): One of the advantages of Magento platform is it will boost the web page optimization, improves traffic rate of your website, better engagement of landing pages, good conversion rates. Overall, Magento helps you with high productivity.





2. Architecture Flexibility: Magento is a professional open-source platform which gives flexibility which gives simplified versions even for complex architecture, also helps to manage multiple online stores on a single platform.

3. Scalability: Performance and scalability are the two pillars of any customer application development. Magento is a robust platform which can handle thousands of products and orders without can manage millions of products and thousands of orders seamlessly.

4. Unified Platform: Magento is a unified platform which favours managing customers, products and as well as inventory in one platform.

5. Safety & Security: With growing cyber-attacks increasing every day, you need a strong platform and a team to be able to detect the loopholes and protect the website

Magento always updates the security codes, the fonts, and themes, uses the secured FTP protocol, SQL injection firewall, latest code patches and many more.

Besides these, mentioned advantages Magento also has gained popularity because of its security levels, marketing tools, carting feasibilities and many more. Therefore Magento 2 has secured a special place in the e-commerce development platforms.

However, you will need an expert to guide you on this. Most of the e-commerce websites hire a Magento developer to make everyday tasks very simple.

Why Hire a Magento Developer?


So, to maintain online shopping is a full-fledged task that requires a highly knowledgeable professional to handle in-depth website conversations. Your task will be so easy if you hire a Magento developer and address all your requirements to the same.

We have understood that managing an e-commerce website is not a cakewalk. There is always a necessity to hire a Magento developer. A bit of expert advice will surely make a difference. However, you need to know many things before going ahead, as the importance to hire a Magento developer and the added advantages of having one.

Moreover, if you hire a Magento developer you have an added value of personalizing an online store according to a customer’s taste and requirements. Thereby, attracting more visitors which can become your permanent customers. Let us have a quick look of add-ons of hiring a Magento developer:

  • A user-centric approach to amplify the visibility of your website and favours online sales.
  • Customer engagement is guaranteed by providing a great user experience (UX) while shopping real-time.
  • Makes checkouts easy and secure.
  • Protects user’s private information while transactions.
  • To enhance the security of your website, ensure your Magento developer performs all the safety measures like two-way authentication, ensuring it is HTTPS, using the strong and innovative passwords, keeping a track on all the Magento extensions. To avoid any kind of cyber threats.

There is no doubt that searching for a Magento developer is little tedious job. But you can find one if you approach a Magento Development Company. Let us have a quick session on why you should opt for a Magento Development Company.

Why you should opt for a Magento Development Company?


Well, the crucial reason to opt for a Magento Development Company is to take your traditional online shopping website to an e-commerce business website. Often, it will be difficult for you to search and then filter the right candidate. In contrast, Magento Development Company takes care of all your work.

They have a better understanding of how to choose an expert, working style, the business strategy, the process of tasks and many more.

Besides, a Magento Development Company uses a dedicated method and process depending on the website, without compromising on the commitment and results to clients and work.

Moreover, if you choose a Magento Development Company, saves you a lot of time and money without affecting the quality of the work. They also provide many Magento Development Services which add more power to your website. They will take care of all the tasks right from sketching the architecture to providing all-round Magento Development Services which will make your website a complete packed package.

What are the most crucial Magento Development Services?


In this section, we will have brief outlines of various Magento Development Services.

Speaking of Magento Development Services, the first and foremost step towards building a good theme, essential updates, payments and shipping schedules, strong maintenance and the best customer support.

1. Magento Theme Development:


With Magento theme development, you can revive your old website design and update with the latest customized themes with the help of the Magento development services.

2. Magento Payment Gateway & Shipping Integration:


Magento development services are responsible for the shipping services and for the safe and secure payment gateways. Your customers will have a smooth shopping and checkout without any hassles.




3. Magento Support & Maintenance:


Magento development services promise uninterrupted service to the customers and the website maintenance on a timely basis.

4. Magento Plugin Development:


Magento Plugins fulfils all your e-commerce business requirements. Any updates released by the Magento will be implemented by the Magento development services team, thereby fetching expected results.

Take Away:


So, by now you must have got an idea why it is a crucial decision to hire a Magento Developer, and the importance of choosing a Magneto Development Company. Also, Magento Development Services like shipping and transactions which will make your customers trust you like never.

Therefore, choosing a Magento 2 if you are planning to make your business online or if you are revamping your e-commerce website will boost the productivity. Also, all your budget and efforts are well paid off once your business websites engage the visitors and driving more traffic.

In the coming years, where the digital shopping takes a full boom, Magento 2 with its flexible design, high security, a responsive architecture, safe checkout gateway is the most reliable platform for all online e-commerce businesses.

Tuesday, 2 July 2019

How to Upload Multiple Images with Progress Bar in Laravel 5.8



Laravel framework is a widely used PHP framework by Web developer for their web application development, and Laravel 5.8 is latest version of this framework. If you are fresher in Laravel framework, and if you are not know how to upload multiple images in Laravel 5.8 framework with display uploading process in Progress bar, then this post will help you to learn uploading multiple images with progress bar in Laravel 5.8 by using Ajax jQuery. So, User can upload multiple images on server without refresh of web page.

In Web Application file uploading is a very userful feature, because by this feature user can upload their images or file on web server from their local computer. But sometime if there is image or multimedia file size is very large and it has take some time for upload to server, then at that time how to can user can know file uploading is running or now. At that time if we have use progress bar for display uploading process on web page then user can know image uploading process is still running. For this purpose we have use progress bar for display uploading process then this feature will add our web application usability.

So, here we have make multiple image upload feature in Laravel 5.8 framework by using Ajax with jQuery. So, if User has upload multiple number of images on server folder then at that time we want to display uploading process of multiple image by using progress bar. So, in this post, we will learn how can we upload multiple image file through Laravel 5.8 with Ajax jQuery and display uploaded image file on web page.

  • Install Laravel 5.8 Application

  • Create Controller

  • Create View Blade File

  • Set Route of Controller Method

  • Run Laravel Application






Install Laravel 5.8 Application


First we need to install Laravel 5.8 application in our computer. For this we have to go Command prompt and write following command.


composer create-project --prefer-dist laravel/laravel folder_name


This command will download and install latest version of Laravel framework in define folder name.

Create Controller


Once Laravel 5.8 framework has been download and install in define folder, now we need to create controller for handle http request for multiple images. For this also we have go to command prompt and write following command.


php artisan make:controller MultipleUploadController


This above command will make MultipleUploadController.php controller file in app/Http/Controllers folder. This controller file we have make following method for make feature like upload multiple images.

index() - This is the root method of this controller. This method has load multiple_file_upload.php view file in browser.

upload() - This method has been received Ajax request for upload multiple images into define destination. This method has upload multiple images one by one. Before upload images it has rename image name and then upload into folder. After completing uploading process then it will send data to Ajax request in json format.

app/Http/Controllers/MultipleUploadController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class MultipleUploadController extends Controller
{
    function index()
    {
     return view('multiple_file_upload');
    }

    function upload(Request $request)
    {
     $image_code = '';
     $images = $request->file('file');
     foreach($images as $image)
     {
      $new_name = rand() . '.' . $image->getClientOriginalExtension();
      $image->move(public_path('images'), $new_name);
      $image_code .= '<div class="col-md-3" style="margin-bottom:24px;"><img src="/images/'.$new_name.'" class="img-thumbnail" /></div>';
     }

     $output = array(
      'success'  => 'Images uploaded successfully',
      'image'   => $image_code
     );

     return response()->json($output);
    }
}



Create View Blade File


For display output in browser, In Laravel we need to use View file. In Laravel 5.8 view file has been store in resources/views folder. In this folder we have create multiple_file_upload.blade.php file. In this file we have use jQuery, Bootstrap and jQuery Form library. In this file we have make one form for upload multiple image. For validate images in file tag, we have use accept="image/*" attribute and for select multiple images, we have use multiple attribute.

For submit form data to controller method, we have use jQuery Form plugin. So, form will be submitted without refresh of web page. Once images has been successfully uploaded then Ajax request will received uploaded images code for display on web page. Below you can find source for this view file.

resources/views/multiple_file_upload.blade.php

<html>
 <head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Laravel 5.8 - Multiple File Upload with Progressbar using Ajax jQuery</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <script src="http://malsup.github.com/jquery.form.js"></script>
 </head>
 <body>
  <div class="container">    
     <br />
     <h3 align="center">Laravel 5.8 - Multiple File Upload with Progressbar using Ajax jQuery</h3>
     <br />
     <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Upload Multiple Images in Laravel 5.8</h3>
                </div>
                <div class="panel-body">
                    <br />
                    <form method="post" action="{{ route('upload') }}" enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <div class="col-md-3" align="right"><h4>Select Images</h4></div>
                            <div class="col-md-6">
                                <input type="file" name="file[]" id="file" accept="image/*" multiple />
                            </div>
                            <div class="col-md-3">
                                <input type="submit" name="upload" value="Upload" class="btn btn-success" />
                            </div>
                        </div>
                    </form>
                    <br />
                    <div class="progress">
                        <div class="progress-bar" aria-valuenow="" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
                            0%
                        </div>
                    </div>
                    <br />
                    <div id="success" class="row">

                    </div>
                    <br />
                </div>
            </div>
  </div>
 </body>
</html>

<script>
$(document).ready(function(){
    $('form').ajaxForm({
        beforeSend:function(){
            $('#success').empty();
            $('.progress-bar').text('0%');
            $('.progress-bar').css('width', '0%');
        },
        uploadProgress:function(event, position, total, percentComplete){
            $('.progress-bar').text(percentComplete + '0%');
            $('.progress-bar').css('width', percentComplete + '0%');
        },
        success:function(data)
        {
            if(data.success)
            {
                $('#success').html('<div class="text-success text-center"><b>'+data.success+'</b></div><br /><br />');
                $('#success').append(data.image);
                $('.progress-bar').text('Uploaded');
                $('.progress-bar').css('width', '100%');
            }
        }
    });
});
</script>


Set Route of Controller Method


After creating controller and view blade file, now we have to set route for controller method. For this we have to open routes/web.php file and write following code for set route.

routes/web.php

Route::get('multiple-file-upload', 'MultipleUploadController@index');

Route::post('multiple-file-upload/upload', 'MultipleUploadController@upload')->name('upload');


Run Laravel Application


Once all code is ready, so lastly we need to start Laravel server, for that we have to go command prompt and write following command.


php artisan serve


This command will start Laravel application. For run this upload multiple image feature, we have to write http://127.0.0.1:8000/multiple-file-upload in browser tab, then you can access this Laravel 5.8 multiple image upload with progress bar on web page. Let's check it is working or not. Happy Laravel coding.

Monday, 24 June 2019

Laravel 5.8 Tutorial - File Upload with Progress Bar using Ajax



If you are looking for Laravel 5.8 web tutorial for learn How to Upload File or Image in Laravel 5.8 with Progress bar for display uploading process, then you have come on right place because you can find complete step by step tutorial for display uploading process in progress bar using Ajax jQuery in Laravel 5.8 framework. Here we have make tutorial on topic like Laravel file upload with Progress bar using Ajax jQuery.

Now in your mind one question is aris why we want to use progress bar while uploading of file. So, the answer is that if you have done file or image uploading in normal way then user can not see uploading process. So it is proper in web development, but if in your application you have to allowed large amount of File or image for uploading then at that time if you have not use progress bar then User of the system did not get idea about image or file has been done uploading or not. So, At that time if you have use progress bar while uploading of file then user can see how many percentage of uploading process of completed and how many percentage is remaining. So, this the main benefits of using progress bar for show uploading process on web page. In this post we will make feature like show progress bar while uploading of file in Laravel 5.8.

Here we have use jQuery Form plugin for submit form data by using Ajax. So for submit form data in Laravel 5.8 application, we have use jQuery form plugin. So, Image or file will be upload without refresh of web page and upload process will be display on web page in progress bar. Below you can find step by step process of how to use jQuery Ajax for upload file with progress bar in Laravel 5.8 framework.

  • Install Laravel 5.8 Framework
  • Create Controllers in Laravel 5.8 application
  • Create Blade File
  • Set Route




Install Laravel 5.8 Framework


For make Laravel 5.8 application, first we want to download and install Laravel 5.8 framework. For this we have go to command prompt, in which we want to first run "composer" command and after this we have to run following command. This command will download Laravel 5.8 framework in your define folder path.


composer create-project --prefer-dist laravel/laravel file_upload


Create Controllers in Laravel 5.8 application


In Laravel 5.8 application for handle http request we have to create controller. So for upload file here we have to create one controller for handle http request for upload file. For this we have go to command prompt and write following command.


php artisan make:controller FileUploadController


This command will make FileUploadController.php file in app/Http/Controllers folder. In this folder we have create two method.

index() - This method has load the file_upload.blade.php file in browser for select file from local computer.

upload() - This method has received request for upload file. This method has received ajax request for upload file. In this method first it has validate form data before upload. If form data has not proper then it has send error to Ajax request in JSON format. But suppose there is no any form data validation found then it will process for upload file and send success message to Ajax request in json format.

app/Http/Controllers/FileUploadController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use Validator;

class FileUploadController extends Controller
{
    function index()
    {
     return view('file_upload');
    }

    function upload(Request $request)
    {
     $rules = array(
      'file'  => 'required|image|max:2048'
     );

     $error = Validator::make($request->all(), $rules);

     if($error->fails())
     {
      return response()->json(['errors' => $error->errors()->all()]);
     }

     $image = $request->file('file');

     $new_name = rand() . '.' . $image->getClientOriginalExtension();
     $image->move(public_path('images'), $new_name);

     $output = array(
         'success' => 'Image uploaded successfully',
         'image'  => '<img src="/images/'.$new_name.'" class="img-thumbnail" />'
        );

        return response()->json($output);
    }
}

?>


Create Blade File


Laravel 5.8 has been use blade engine for display output in browser. So, we have to create view file under resources/views. In this folder we have create file_upload.blade.php file. In this file we have use jQuery library, Bootstrap library for display progress bar and jQuery form library for submit form data without refresh of web page. Here we have make form for select file from local computer. Under this file we have write jQuery code for display upload process in progress bar. After successfuly upload of image, it will be display on web page.

resources/views/file_upload.blade.php

<html>
 <head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Laravel 5.8 - File Upload with Progressbar using Ajax jQuery</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <script src="http://malsup.github.com/jquery.form.js"></script>
 </head>
 <body>
  <div class="container">    
     <br />
     <h3 align="center">Laravel 5.8 - File Upload with Progressbar using Ajax jQuery</h3>
     <br />
     <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">File Upload with Progressbar using Ajax jQuery</h3>
                </div>
                <div class="panel-body">
                    <br />
                    <form method="post" action="{{ route('upload') }}" enctype="multipart/form-data">
                      @csrf
                      <div class="row">
                            <div class="col-md-3" align="right"><h4>Select Image</h4></div>
                            <div class="col-md-6">
                              <input type="file" name="file" id="file" />
                            </div>
                            <div class="col-md-3">
                              <input type="submit" name="upload" value="Upload" class="btn btn-success" />
                            </div>
                        </div>
                    </form>
                    <br />
                    <div class="progress">
                      <div class="progress-bar" role="progressbar" aria-valuenow=""
                      aria-valuemin="0" aria-valuemax="100" style="width: 0%">
                        0%
                      </div>
                    </div>
                    <br />
                    <div id="success">

                    </div>
                    <br />
                </div>
            </div>
  </div>
 </body>
</html>

<script>
$(document).ready(function(){

    $('form').ajaxForm({
      beforeSend:function(){
        $('#success').empty();
      },
      uploadProgress:function(event, position, total, percentComplete)
      {
        $('.progress-bar').text(percentComplete + '%');
        $('.progress-bar').css('width', percentComplete + '%');
      },
      success:function(data)
      {
        if(data.errors)
        {
          $('.progress-bar').text('0%');
          $('.progress-bar').css('width', '0%');
          $('#success').html('<span class="text-danger"><b>'+data.errors+'</b></span>');
        }
        if(data.success)
        {
          $('.progress-bar').text('Uploaded');
          $('.progress-bar').css('width', '100%');
          $('#success').html('<span class="text-success"><b>'+data.success+'</b></span><br /><br />');
          $('#success').append(data.image);
        }
      }
    });

});
</script>


Set Route


In Laravel 5.8 application, we have to set the route of controller method. For this we have to go to routes/web.php file and in this file we have to define route.

routes/web.php

<?php

Route::get('file-upload', 'FileUploadController@index');

Route::post('file-upload/upload', 'FileUploadController@upload')->name('upload');

?>


Lastly we have to run Laravel 5.8 application on file upload with progress bar. For this we have to command prompt and write following command.


php artisan serve


This command will run Laravel 5.8 application and for test above code you have to write following link in your browser tab.


http://127.0.0.1:8000/file-upload


For test the above code functionality, you have to hit following url in your browser then you can test Laravel 5.8 file upload with progress bar functionality is working or not.