PHP MySQL eCommerce Admin Panel Tutorial Tutorial

Login

In our last few articles, we learned about How to set up our development environment for our admin tutorial website. In this article, we are going to learn about How to create a Login Page.
Why are we starting with a Login Page first? In most tutorials, I prefer to create Login Page in the Last. But for admin panel scenario we need to test user authenticity to access pages available in the admin panel. Without proper access, we don't want to allow anyone to modify anything. So we are going to start with Login Page first.

Theory or Requirement

We want our admin users or our employees to be different from our normal customers.  So we are going to store all the admin and employees in the "tblEmployee" table. Following is the database table structure for our Employee table.

TableName: tblEmployee

Columns:
EmployeeID: A unique identifire for our Employee.
EmployeeEmail: A unique email id for each employee.
EmployeePassword: A hash string for our employee password.
We are going to add some more columns in future as per our requirement. For example Employee profile and Employee acceess.

For creating above database table first visit http://admin.dealsato.dv/phpmyadmin/ and select dealstoxyz database and select SQL tab. Refer the following image for more information.

Note: If your development setup is different you need to open your local website phpmyadmin and select your required database.

Use following SQL to create a tblEmployee in dealstoxyz database.

Code

<pre class="brush:sql;">
CREATE TABLE tblEmployee
(
	EmployeeID		BIGINT PRIMARY KEY AUTO_INCREMENT,
    EmployeeEmail	VARCHAR(250) UNIQUE NOT NULL,
    EmployeePassword VARCHAR(200)
);</pre>

<p>&nbsp;</p>

Our database table is ready. Next, we need to create a user for accessing our admin panel. For this create an index.php file in Visual Studio Code with the following PHP code.

<?php
/* Some Constants */
DEFINE("DB_SERVER","localhost");
DEFINE("DB_USER","root");
DEFINE("DB_PASSWORD","");
DEFINE("DB_DATABASE_NAME","dealsatoxyz");

//Create new Connection
$MySQLConnection = new mysqli(DB_SERVER,DB_USER,DB_PASSWORD,DB_DATABASE_NAME);

// Check connection for error
if ($MySQLConnection->connect_error) {
    die("Connection failed: " . $MySQLConnection->connect_error);
}

// Employee Information
$EmployeeEmail="[email protected]";
$EmployeePassword="123456789";
$HashPassword = password_hash($EmployeePassword, PASSWORD_DEFAULT);

// Perform queries
$SQLQuery="INSERT INTO tblEmployee (EmployeeEmail,EmployeePassword) VALUES (?,?);"; 

// prepare and bind
$SQLPrepare = $MySQLConnection->prepare($SQLQuery);
$SQLPrepare->bind_param("ss", $EmployeeEmail, $HashPassword);
$SQLPrepare->execute();

//Close Connection
$SQLPrepare->close();
$MySQLConnection->close();

?>

 

I am assuming you created your "index.php" in the root of development directory. If it is true visit http://admin.dealsato.dv. You are not able to see anything but let's check the database table. If everything is correct you can get an entry for our first employee with email id "[email protected]" and a hash password.

Our first user is created now, we can work on our login page file. For this, we need to open production folder and inside production folder, we have a login.html file copy it's code and past it in our index.php file. Why we are using index.php file because when usee first visit http://admin.dealsato.dv we first check user login status. Ok now in our index.php file we need to first change the URLs for CSS and JavaScript file. Why? For the index.html file in production folder, all CSS and JavaScript files are available in the parnet folder. Now for index.php all CSS and JavaScript files are available in the same directory.

For this replace "../" with "/". On visual studio code press (Ctrl + f or commnad+f on mac) on find options select replace.
Now for form element add the following attributes action="LoginCheck.php" and method="post".  For input fields add name attribute. For username, we are using "email" and for password use "password". Also for username placeholder replace it with Email. Currently, to Login we have an URL change it with a button type submit.Following is the final version of index.php file.

Code

<pre class="brush:php;">
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot;&gt;
    &lt;!-- Meta, title, CSS, favicons, etc. --&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;

    &lt;title&gt;Gentelella Alela! | &lt;/title&gt;

    &lt;!-- Bootstrap --&gt;
    &lt;link href=&quot;/vendors/bootstrap/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;!-- Font Awesome --&gt;
    &lt;link href=&quot;/vendors/font-awesome/css/font-awesome.min.css&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;!-- NProgress --&gt;
    &lt;link href=&quot;/vendors/nprogress/nprogress.css&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;!-- Animate.css --&gt;
    &lt;link href=&quot;/vendors/animate.css/animate.min.css&quot; rel=&quot;stylesheet&quot;&gt;

    &lt;!-- Custom Theme Style --&gt;
    &lt;link href=&quot;/build/css/custom.min.css&quot; rel=&quot;stylesheet&quot;&gt;
  &lt;/head&gt;

  &lt;body class=&quot;login&quot;&gt;
    &lt;div&gt;
      &lt;a class=&quot;hiddenanchor&quot; id=&quot;signup&quot;&gt;&lt;/a&gt;
      &lt;a class=&quot;hiddenanchor&quot; id=&quot;signin&quot;&gt;&lt;/a&gt;

      &lt;div class=&quot;login_wrapper&quot;&gt;
        &lt;div class=&quot;animate form login_form&quot;&gt;
          &lt;section class=&quot;login_content&quot;&gt;
            &lt;form action=&quot;LoginCheck.php&quot; method=&quot;post&quot;&gt;
              &lt;h1&gt;Login Form&lt;/h1&gt;
              &lt;div&gt;
                &lt;input type=&quot;text&quot; class=&quot;form-control&quot; name=&quot;email&quot; placeholder=&quot;Email&quot; required=&quot;&quot; /&gt;
              &lt;/div&gt;
              &lt;div&gt;
                &lt;input type=&quot;password&quot; class=&quot;form-control&quot; name=&quot;password&quot; placeholder=&quot;Password&quot; required=&quot;&quot; /&gt;
              &lt;/div&gt;
              &lt;div&gt;
                &lt;input type=&quot;submit&quot; class=&quot;btn btn-default submit&quot; value=&quot;Log In&quot; /&gt;
                &lt;a class=&quot;reset_pass&quot; href=&quot;#&quot;&gt;Lost your password?&lt;/a&gt;
              &lt;/div&gt;

              &lt;div class=&quot;clearfix&quot;&gt;&lt;/div&gt;

              &lt;div class=&quot;separator&quot;&gt;
                &lt;p class=&quot;change_link&quot;&gt;New to site?
                  &lt;a href=&quot;#signup&quot; class=&quot;to_register&quot;&gt; Create Account &lt;/a&gt;
                &lt;/p&gt;

                &lt;div class=&quot;clearfix&quot;&gt;&lt;/div&gt;
                &lt;br /&gt;

                &lt;div&gt;
                  &lt;h1&gt;&lt;i class=&quot;fa fa-paw&quot;&gt;&lt;/i&gt; Gentelella Alela!&lt;/h1&gt;
                  &lt;p&gt;&copy;2016 All Rights Reserved. Gentelella Alela! is a Bootstrap 3 template. Privacy and Terms&lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/form&gt;
          &lt;/section&gt;
        &lt;/div&gt;

        &lt;div id=&quot;register&quot; class=&quot;animate form registration_form&quot;&gt;
          &lt;section class=&quot;login_content&quot;&gt;
            &lt;form&gt;
              &lt;h1&gt;Create Account&lt;/h1&gt;
              &lt;div&gt;
                &lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;Username&quot; required=&quot;&quot; /&gt;
              &lt;/div&gt;
              &lt;div&gt;
                &lt;input type=&quot;email&quot; class=&quot;form-control&quot; placeholder=&quot;Email&quot; required=&quot;&quot; /&gt;
              &lt;/div&gt;
              &lt;div&gt;
                &lt;input type=&quot;password&quot; class=&quot;form-control&quot; placeholder=&quot;Password&quot; required=&quot;&quot; /&gt;
              &lt;/div&gt;
              &lt;div&gt;
                &lt;a class=&quot;btn btn-default submit&quot; href=&quot;index.html&quot;&gt;Submit&lt;/a&gt;
              &lt;/div&gt;

              &lt;div class=&quot;clearfix&quot;&gt;&lt;/div&gt;

              &lt;div class=&quot;separator&quot;&gt;
                &lt;p class=&quot;change_link&quot;&gt;Already a member ?
                  &lt;a href=&quot;#signin&quot; class=&quot;to_register&quot;&gt; Log in &lt;/a&gt;
                &lt;/p&gt;

                &lt;div class=&quot;clearfix&quot;&gt;&lt;/div&gt;
                &lt;br /&gt;

                &lt;div&gt;
                  &lt;h1&gt;&lt;i class=&quot;fa fa-paw&quot;&gt;&lt;/i&gt; Gentelella Alela!&lt;/h1&gt;
                  &lt;p&gt;&copy;2016 All Rights Reserved. Gentelella Alela! is a Bootstrap 3 template. Privacy and Terms&lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/form&gt;
          &lt;/section&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;</pre>

<p>&nbsp;</p>

Now we need to create "LoginCheck.php" file. It is responsible for validating the user email and password. Following is the code for "LoginCheck.php" file.

Code

<pre class="brush:as3;">
&lt;?php

/* Some Constants */
DEFINE(&quot;DB_SERVER&quot;,&quot;localhost&quot;);
DEFINE(&quot;DB_USER&quot;,&quot;root&quot;);
DEFINE(&quot;DB_PASSWORD&quot;,&quot;&quot;);
DEFINE(&quot;DB_DATABASE_NAME&quot;,&quot;dealsatoxyz&quot;);
$Result=0;

    if(
        isset($_POST[&quot;email&quot;])
        &amp;&amp; isset($_POST[&quot;password&quot;])
    )
    {
        $Email = $_POST[&quot;email&quot;];
        $Password = $_POST[&quot;password&quot;];
        $DBEmail=&quot;&quot;;
        $DBPassword=&quot;&quot;;
        $DBEmployeeID=-1;
        
        //Create new Connection
        $MySQLConnection = new mysqli(DB_SERVER,DB_USER,DB_PASSWORD,DB_DATABASE_NAME);

        // Check connection for error
        if ($MySQLConnection-&gt;connect_error) {
            die(&quot;Connection failed: &quot; . $MySQLConnection-&gt;connect_error);
        }

        $SQLQuery = &quot;SELECT `EmployeeID`, `EmployeeEmail`, `EmployeePassword` FROM `tblEmployee` WHERE EmployeeEmail=?&quot;;
        // prepare and bind
        $SQLPrepare = $MySQLConnection-&gt;prepare($SQLQuery);
        $SQLPrepare-&gt;bind_param(&quot;s&quot;, $Email);
        $SQLPrepare-&gt;execute();

        $SQLResult = $SQLPrepare-&gt;get_result();
        while ($SQLRow = $SQLResult-&gt;fetch_assoc()) {
            $DBEmail = $SQLRow[&quot;EmployeeEmail&quot;];
            $DBPassword = $SQLRow[&quot;EmployeePassword&quot;];
            $DBEmployeeID = intval($SQLRow[&quot;EmployeeID&quot;]);
        }

        if($DBEmployeeID &gt; 0)
        {

            if(
                password_verify($Password,$DBPassword)
            )
            {
                $Result=1;
                session_start();
                session_regenerate_id(true);
                $_SESSION[&quot;IsLogin&quot;]=1;
                $_SESSION[&quot;EmployeeID&quot;]=$DBEmployeeID;
            }
            else
            {
                $Result=-1;
            }
            
        }
        $SQLPrepare-&gt;close();
        $MySQLConnection-&gt;close();
    }

    if($Result&gt;0)
    {
        header(&quot;Location: Dashboard.php&quot;);
    }
    else{
        header(&quot;Location: index.php?Result=&quot;.$Result);
    }

?&gt;</pre>

<p>&nbsp;</p>

In LoginCheck.php we are performing following checks:

  • If the user sends email id and password.
    • It is available in the database.
      • Is Password matching with the user password? Yes then create a session. Regenerate the session id and redirect the user to Dashboard.php.
      • If Password not matching sets result -1 and redirect the user to index.php.
    • If user information is not in the database set result to -2 and redirect the user to index.php.
  • If the user didn't provide the email id and password set result to -3 and redirect the user to index.php.

For displaying error messages to end user, we need to edit the index.php.
As per the new changes, we need to check if Result variable is available. If it is available with value, based on the value in the result variable we need to display an error message to end user.
Following are the different error messages based on values.

  • -3: Please provide a valid email id and password.
  • -2: Employee account with given email not exists.
  • -1: Invalid email id and password combination.

We added following code to the top of the index.php file. And "<div><?php echo $Message; ?></div>" above the Login button.

<?php 

    $Message="";
    if(isset($_GET["Result"]))
    {
        $Result = intval($_GET["Result"]);
        switch($Result)
        {
            case -3:{
                $Message="<p><font color='red'>Please provide a valid email id and password.</font></p>";
            }break;
            case -2:{
                $Message="<p><font color='red'>Employee account with given email not exists.</font></p>";
            }break;
            case -1:{
                $Message="<p><font color='red'>Invalid email id and password combination.</font></p>";
            }break;
        }
    }

?>

 

We are almost done. Last we need to create a Dashboard.php file. For Dashboard.php copy code from index.html inside production folder. Following is the final version for Dashboard.php file.

Code

<pre class="brush:as3;">
&lt;?php 
    session_start();
    $IsLogin=-1;
    if(isset($_SESSION[&quot;IsLogin&quot;]))
    {
        $IsLogin = intval($_SESSION[&quot;IsLogin&quot;]);
    }

    if($IsLogin&lt;1)
    {
        header(&quot;Location: index.php&quot;);
    }
?&gt;
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot;&gt;
    &lt;!-- Meta, title, CSS, favicons, etc. --&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
	&lt;link rel=&quot;icon&quot; href=&quot;images/favicon.ico&quot; type=&quot;image/ico&quot; /&gt;

    &lt;title&gt;Gentelella Alela! | &lt;/title&gt;

    &lt;!-- Bootstrap --&gt;
    &lt;link href=&quot;/vendors/bootstrap/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;!-- Font Awesome --&gt;
    &lt;link href=&quot;/vendors/font-awesome/css/font-awesome.min.css&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;!-- NProgress --&gt;
    &lt;link href=&quot;/vendors/nprogress/nprogress.css&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;!-- iCheck --&gt;
    &lt;link href=&quot;/vendors/iCheck/skins/flat/green.css&quot; rel=&quot;stylesheet&quot;&gt;
	
    &lt;!-- bootstrap-progressbar --&gt;
    &lt;link href=&quot;/vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;!-- JQVMap --&gt;
    &lt;link href=&quot;/vendors/jqvmap/dist/jqvmap.min.css&quot; rel=&quot;stylesheet&quot;/&gt;
    &lt;!-- bootstrap-daterangepicker --&gt;
    &lt;link href=&quot;/vendors/bootstrap-daterangepicker/daterangepicker.css&quot; rel=&quot;stylesheet&quot;&gt;

    &lt;!-- Custom Theme Style --&gt;
    &lt;link href=&quot;/build/css/custom.min.css&quot; rel=&quot;stylesheet&quot;&gt;
  &lt;/head&gt;

  &lt;body class=&quot;nav-md&quot;&gt;
    &lt;div class=&quot;container body&quot;&gt;
      &lt;div class=&quot;main_container&quot;&gt;
        &lt;div class=&quot;col-md-3 left_col&quot;&gt;
          &lt;div class=&quot;left_col scroll-view&quot;&gt;
            &lt;div class=&quot;navbar nav_title&quot; style=&quot;border: 0;&quot;&gt;
              &lt;a href=&quot;index.html&quot; class=&quot;site_title&quot;&gt;&lt;i class=&quot;fa fa-paw&quot;&gt;&lt;/i&gt; &lt;span&gt;Gentelella Alela!&lt;/span&gt;&lt;/a&gt;
            &lt;/div&gt;

            &lt;div class=&quot;clearfix&quot;&gt;&lt;/div&gt;

            &lt;!-- menu profile quick info --&gt;
            &lt;div class=&quot;profile clearfix&quot;&gt;
              &lt;div class=&quot;profile_pic&quot;&gt;
                &lt;img src=&quot;images/img.jpg&quot; alt=&quot;...&quot; class=&quot;img-circle profile_img&quot;&gt;
              &lt;/div&gt;
              &lt;div class=&quot;profile_info&quot;&gt;
                &lt;span&gt;Welcome,&lt;/span&gt;
                &lt;h2&gt;John Doe&lt;/h2&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;!-- /menu profile quick info --&gt;

            &lt;br /&gt;

            &lt;!-- sidebar menu --&gt;
            &lt;div id=&quot;sidebar-menu&quot; class=&quot;main_menu_side hidden-print main_menu&quot;&gt;
              &lt;div class=&quot;menu_section&quot;&gt;
                &lt;h3&gt;General&lt;/h3&gt;
                &lt;ul class=&quot;nav side-menu&quot;&gt;
                  &lt;li&gt;&lt;a&gt;&lt;i class=&quot;fa fa-home&quot;&gt;&lt;/i&gt; Home &lt;span class=&quot;fa fa-chevron-down&quot;&gt;&lt;/span&gt;&lt;/a&gt;
                    &lt;ul class=&quot;nav child_menu&quot;&gt;
                      &lt;li&gt;&lt;a href=&quot;index.html&quot;&gt;Dashboard&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;index2.html&quot;&gt;Dashboard2&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;index3.html&quot;&gt;Dashboard3&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a&gt;&lt;i class=&quot;fa fa-edit&quot;&gt;&lt;/i&gt; Forms &lt;span class=&quot;fa fa-chevron-down&quot;&gt;&lt;/span&gt;&lt;/a&gt;
                    &lt;ul class=&quot;nav child_menu&quot;&gt;
                      &lt;li&gt;&lt;a href=&quot;form.html&quot;&gt;General Form&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;form_advanced.html&quot;&gt;Advanced Components&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;form_validation.html&quot;&gt;Form Validation&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;form_wizards.html&quot;&gt;Form Wizard&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;form_upload.html&quot;&gt;Form Upload&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;form_buttons.html&quot;&gt;Form Buttons&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a&gt;&lt;i class=&quot;fa fa-desktop&quot;&gt;&lt;/i&gt; UI Elements &lt;span class=&quot;fa fa-chevron-down&quot;&gt;&lt;/span&gt;&lt;/a&gt;
                    &lt;ul class=&quot;nav child_menu&quot;&gt;
                      &lt;li&gt;&lt;a href=&quot;general_elements.html&quot;&gt;General Elements&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;media_gallery.html&quot;&gt;Media Gallery&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;typography.html&quot;&gt;Typography&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;icons.html&quot;&gt;Icons&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;glyphicons.html&quot;&gt;Glyphicons&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;widgets.html&quot;&gt;Widgets&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;invoice.html&quot;&gt;Invoice&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;inbox.html&quot;&gt;Inbox&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;calendar.html&quot;&gt;Calendar&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a&gt;&lt;i class=&quot;fa fa-table&quot;&gt;&lt;/i&gt; Tables &lt;span class=&quot;fa fa-chevron-down&quot;&gt;&lt;/span&gt;&lt;/a&gt;
                    &lt;ul class=&quot;nav child_menu&quot;&gt;
                      &lt;li&gt;&lt;a href=&quot;tables.html&quot;&gt;Tables&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;tables_dynamic.html&quot;&gt;Table Dynamic&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a&gt;&lt;i class=&quot;fa fa-bar-chart-o&quot;&gt;&lt;/i&gt; Data Presentation &lt;span class=&quot;fa fa-chevron-down&quot;&gt;&lt;/span&gt;&lt;/a&gt;
                    &lt;ul class=&quot;nav child_menu&quot;&gt;
                      &lt;li&gt;&lt;a href=&quot;chartjs.html&quot;&gt;Chart JS&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;chartjs2.html&quot;&gt;Chart JS2&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;morisjs.html&quot;&gt;Moris JS&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;echarts.html&quot;&gt;ECharts&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;other_charts.html&quot;&gt;Other Charts&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a&gt;&lt;i class=&quot;fa fa-clone&quot;&gt;&lt;/i&gt;Layouts &lt;span class=&quot;fa fa-chevron-down&quot;&gt;&lt;/span&gt;&lt;/a&gt;
                    &lt;ul class=&quot;nav child_menu&quot;&gt;
                      &lt;li&gt;&lt;a href=&quot;fixed_sidebar.html&quot;&gt;Fixed Sidebar&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;fixed_footer.html&quot;&gt;Fixed Footer&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                  &lt;/li&gt;
                &lt;/ul&gt;
              &lt;/div&gt;
              &lt;div class=&quot;menu_section&quot;&gt;
                &lt;h3&gt;Live On&lt;/h3&gt;
                &lt;ul class=&quot;nav side-menu&quot;&gt;
                  &lt;li&gt;&lt;a&gt;&lt;i class=&quot;fa fa-bug&quot;&gt;&lt;/i&gt; Additional Pages &lt;span class=&quot;fa fa-chevron-down&quot;&gt;&lt;/span&gt;&lt;/a&gt;
                    &lt;ul class=&quot;nav child_menu&quot;&gt;
                      &lt;li&gt;&lt;a href=&quot;e_commerce.html&quot;&gt;E-commerce&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;projects.html&quot;&gt;Projects&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;project_detail.html&quot;&gt;Project Detail&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;contacts.html&quot;&gt;Contacts&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;profile.html&quot;&gt;Profile&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a&gt;&lt;i class=&quot;fa fa-windows&quot;&gt;&lt;/i&gt; Extras &lt;span class=&quot;fa fa-chevron-down&quot;&gt;&lt;/span&gt;&lt;/a&gt;
                    &lt;ul class=&quot;nav child_menu&quot;&gt;
                      &lt;li&gt;&lt;a href=&quot;page_403.html&quot;&gt;403 Error&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;page_404.html&quot;&gt;404 Error&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;page_500.html&quot;&gt;500 Error&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;plain_page.html&quot;&gt;Plain Page&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;login.html&quot;&gt;Login Page&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;pricing_tables.html&quot;&gt;Pricing Tables&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a&gt;&lt;i class=&quot;fa fa-sitemap&quot;&gt;&lt;/i&gt; Multilevel Menu &lt;span class=&quot;fa fa-chevron-down&quot;&gt;&lt;/span&gt;&lt;/a&gt;
                    &lt;ul class=&quot;nav child_menu&quot;&gt;
                        &lt;li&gt;&lt;a href=&quot;#level1_1&quot;&gt;Level One&lt;/a&gt;
                        &lt;li&gt;&lt;a&gt;Level One&lt;span class=&quot;fa fa-chevron-down&quot;&gt;&lt;/span&gt;&lt;/a&gt;
                          &lt;ul class=&quot;nav child_menu&quot;&gt;
                            &lt;li class=&quot;sub_menu&quot;&gt;&lt;a href=&quot;level2.html&quot;&gt;Level Two&lt;/a&gt;
                            &lt;/li&gt;
                            &lt;li&gt;&lt;a href=&quot;#level2_1&quot;&gt;Level Two&lt;/a&gt;
                            &lt;/li&gt;
                            &lt;li&gt;&lt;a href=&quot;#level2_2&quot;&gt;Level Two&lt;/a&gt;
                            &lt;/li&gt;
                          &lt;/ul&gt;
                        &lt;/li&gt;
                        &lt;li&gt;&lt;a href=&quot;#level1_2&quot;&gt;Level One&lt;/a&gt;
                        &lt;/li&gt;
                    &lt;/ul&gt;
                  &lt;/li&gt;                  
                  &lt;li&gt;&lt;a href=&quot;javascript:void(0)&quot;&gt;&lt;i class=&quot;fa fa-laptop&quot;&gt;&lt;/i&gt; Landing Page &lt;span class=&quot;label label-success pull-right&quot;&gt;Coming Soon&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
              &lt;/div&gt;

            &lt;/div&gt;
            &lt;!-- /sidebar menu --&gt;

            &lt;!-- /menu footer buttons --&gt;
            &lt;div class=&quot;sidebar-footer hidden-small&quot;&gt;
              &lt;a data-toggle=&quot;tooltip&quot; data-placement=&quot;top&quot; title=&quot;Settings&quot;&gt;
                &lt;span class=&quot;glyphicon glyphicon-cog&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
              &lt;/a&gt;
              &lt;a data-toggle=&quot;tooltip&quot; data-placement=&quot;top&quot; title=&quot;FullScreen&quot;&gt;
                &lt;span class=&quot;glyphicon glyphicon-fullscreen&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
              &lt;/a&gt;
              &lt;a data-toggle=&quot;tooltip&quot; data-placement=&quot;top&quot; title=&quot;Lock&quot;&gt;
                &lt;span class=&quot;glyphicon glyphicon-eye-close&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
              &lt;/a&gt;
              &lt;a data-toggle=&quot;tooltip&quot; data-placement=&quot;top&quot; title=&quot;Logout&quot; href=&quot;login.html&quot;&gt;
                &lt;span class=&quot;glyphicon glyphicon-off&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
              &lt;/a&gt;
            &lt;/div&gt;
            &lt;!-- /menu footer buttons --&gt;
          &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- top navigation --&gt;
        &lt;div class=&quot;top_nav&quot;&gt;
          &lt;div class=&quot;nav_menu&quot;&gt;
            &lt;nav&gt;
              &lt;div class=&quot;nav toggle&quot;&gt;
                &lt;a id=&quot;menu_toggle&quot;&gt;&lt;i class=&quot;fa fa-bars&quot;&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;/div&gt;

              &lt;ul class=&quot;nav navbar-nav navbar-right&quot;&gt;
                &lt;li class=&quot;&quot;&gt;
                  &lt;a href=&quot;javascript:;&quot; class=&quot;user-profile dropdown-toggle&quot; data-toggle=&quot;dropdown&quot; aria-expanded=&quot;false&quot;&gt;
                    &lt;img src=&quot;images/img.jpg&quot; alt=&quot;&quot;&gt;John Doe
                    &lt;span class=&quot; fa fa-angle-down&quot;&gt;&lt;/span&gt;
                  &lt;/a&gt;
                  &lt;ul class=&quot;dropdown-menu dropdown-usermenu pull-right&quot;&gt;
                    &lt;li&gt;&lt;a href=&quot;javascript:;&quot;&gt; Profile&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;
                      &lt;a href=&quot;javascript:;&quot;&gt;
                        &lt;span class=&quot;badge bg-red pull-right&quot;&gt;50%&lt;/span&gt;
                        &lt;span&gt;Settings&lt;/span&gt;
                      &lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;&lt;a href=&quot;javascript:;&quot;&gt;Help&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=&quot;login.html&quot;&gt;&lt;i class=&quot;fa fa-sign-out pull-right&quot;&gt;&lt;/i&gt; Log Out&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/li&gt;

                &lt;li role=&quot;presentation&quot; class=&quot;dropdown&quot;&gt;
                  &lt;a href=&quot;javascript:;&quot; class=&quot;dropdown-toggle info-number&quot; data-toggle=&quot;dropdown&quot; aria-expanded=&quot;false&quot;&gt;
                    &lt;i class=&quot;fa fa-envelope-o&quot;&gt;&lt;/i&gt;
                    &lt;span class=&quot;badge bg-green&quot;&gt;6&lt;/span&gt;
                  &lt;/a&gt;
                  &lt;ul id=&quot;menu1&quot; class=&quot;dropdown-menu list-unstyled msg_list&quot; role=&quot;menu&quot;&gt;
                    &lt;li&gt;
                      &lt;a&gt;
                        &lt;span class=&quot;image&quot;&gt;&lt;img src=&quot;images/img.jpg&quot; alt=&quot;Profile Image&quot; /&gt;&lt;/span&gt;
                        &lt;span&gt;
                          &lt;span&gt;John Smith&lt;/span&gt;
                          &lt;span class=&quot;time&quot;&gt;3 mins ago&lt;/span&gt;
                        &lt;/span&gt;
                        &lt;span class=&quot;message&quot;&gt;
                          Film festivals used to be do-or-die moments for movie makers. They were where...
                        &lt;/span&gt;
                      &lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                      &lt;a&gt;
                        &lt;span class=&quot;image&quot;&gt;&lt;img src=&quot;images/img.jpg&quot; alt=&quot;Profile Image&quot; /&gt;&lt;/span&gt;
                        &lt;span&gt;
                          &lt;span&gt;John Smith&lt;/span&gt;
                          &lt;span class=&quot;time&quot;&gt;3 mins ago&lt;/span&gt;
                        &lt;/span&gt;
                        &lt;span class=&quot;message&quot;&gt;
                          Film festivals used to be do-or-die moments for movie makers. They were where...
                        &lt;/span&gt;
                      &lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                      &lt;a&gt;
                        &lt;span class=&quot;image&quot;&gt;&lt;img src=&quot;images/img.jpg&quot; alt=&quot;Profile Image&quot; /&gt;&lt;/span&gt;
                        &lt;span&gt;
                          &lt;span&gt;John Smith&lt;/span&gt;
                          &lt;span class=&quot;time&quot;&gt;3 mins ago&lt;/span&gt;
                        &lt;/span&gt;
                        &lt;span class=&quot;message&quot;&gt;
                          Film festivals used to be do-or-die moments for movie makers. They were where...
                        &lt;/span&gt;
                      &lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                      &lt;a&gt;
                        &lt;span class=&quot;image&quot;&gt;&lt;img src=&quot;images/img.jpg&quot; alt=&quot;Profile Image&quot; /&gt;&lt;/span&gt;
                        &lt;span&gt;
                          &lt;span&gt;John Smith&lt;/span&gt;
                          &lt;span class=&quot;time&quot;&gt;3 mins ago&lt;/span&gt;
                        &lt;/span&gt;
                        &lt;span class=&quot;message&quot;&gt;
                          Film festivals used to be do-or-die moments for movie makers. They were where...
                        &lt;/span&gt;
                      &lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                      &lt;div class=&quot;text-center&quot;&gt;
                        &lt;a&gt;
                          &lt;strong&gt;See All Alerts&lt;/strong&gt;
                          &lt;i class=&quot;fa fa-angle-right&quot;&gt;&lt;/i&gt;
                        &lt;/a&gt;
                      &lt;/div&gt;
                    &lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
            &lt;/nav&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- /top navigation --&gt;

        &lt;!-- page content --&gt;
        &lt;div class=&quot;right_col&quot; role=&quot;main&quot;&gt;
          &lt;!-- top tiles --&gt;
          &lt;div class=&quot;row tile_count&quot;&gt;
            &lt;div class=&quot;col-md-2 col-sm-4 col-xs-6 tile_stats_count&quot;&gt;
              &lt;span class=&quot;count_top&quot;&gt;&lt;i class=&quot;fa fa-user&quot;&gt;&lt;/i&gt; Total Users&lt;/span&gt;
              &lt;div class=&quot;count&quot;&gt;2500&lt;/div&gt;
              &lt;span class=&quot;count_bottom&quot;&gt;&lt;i class=&quot;green&quot;&gt;4% &lt;/i&gt; From last Week&lt;/span&gt;
            &lt;/div&gt;
            &lt;div class=&quot;col-md-2 col-sm-4 col-xs-6 tile_stats_count&quot;&gt;
              &lt;span class=&quot;count_top&quot;&gt;&lt;i class=&quot;fa fa-clock-o&quot;&gt;&lt;/i&gt; Average Time&lt;/span&gt;
              &lt;div class=&quot;count&quot;&gt;123.50&lt;/div&gt;
              &lt;span class=&quot;count_bottom&quot;&gt;&lt;i class=&quot;green&quot;&gt;&lt;i class=&quot;fa fa-sort-asc&quot;&gt;&lt;/i&gt;3% &lt;/i&gt; From last Week&lt;/span&gt;
            &lt;/div&gt;
            &lt;div class=&quot;col-md-2 col-sm-4 col-xs-6 tile_stats_count&quot;&gt;
              &lt;span class=&quot;count_top&quot;&gt;&lt;i class=&quot;fa fa-user&quot;&gt;&lt;/i&gt; Total Males&lt;/span&gt;
              &lt;div class=&quot;count green&quot;&gt;2,500&lt;/div&gt;
              &lt;span class=&quot;count_bottom&quot;&gt;&lt;i class=&quot;green&quot;&gt;&lt;i class=&quot;fa fa-sort-asc&quot;&gt;&lt;/i&gt;34% &lt;/i&gt; From last Week&lt;/span&gt;
            &lt;/div&gt;
            &lt;div class=&quot;col-md-2 col-sm-4 col-xs-6 tile_stats_count&quot;&gt;
              &lt;span class=&quot;count_top&quot;&gt;&lt;i class=&quot;fa fa-user&quot;&gt;&lt;/i&gt; Total Females&lt;/span&gt;
              &lt;div class=&quot;count&quot;&gt;4,567&lt;/div&gt;
              &lt;span class=&quot;count_bottom&quot;&gt;&lt;i class=&quot;red&quot;&gt;&lt;i class=&quot;fa fa-sort-desc&quot;&gt;&lt;/i&gt;12% &lt;/i&gt; From last Week&lt;/span&gt;
            &lt;/div&gt;
            &lt;div class=&quot;col-md-2 col-sm-4 col-xs-6 tile_stats_count&quot;&gt;
              &lt;span class=&quot;count_top&quot;&gt;&lt;i class=&quot;fa fa-user&quot;&gt;&lt;/i&gt; Total Collections&lt;/span&gt;
              &lt;div class=&quot;count&quot;&gt;2,315&lt;/div&gt;
              &lt;span class=&quot;count_bottom&quot;&gt;&lt;i class=&quot;green&quot;&gt;&lt;i class=&quot;fa fa-sort-asc&quot;&gt;&lt;/i&gt;34% &lt;/i&gt; From last Week&lt;/span&gt;
            &lt;/div&gt;
            &lt;div class=&quot;col-md-2 col-sm-4 col-xs-6 tile_stats_count&quot;&gt;
              &lt;span class=&quot;count_top&quot;&gt;&lt;i class=&quot;fa fa-user&quot;&gt;&lt;/i&gt; Total Connections&lt;/span&gt;
              &lt;div class=&quot;count&quot;&gt;7,325&lt;/div&gt;
              &lt;span class=&quot;count_bottom&quot;&gt;&lt;i class=&quot;green&quot;&gt;&lt;i class=&quot;fa fa-sort-asc&quot;&gt;&lt;/i&gt;34% &lt;/i&gt; From last Week&lt;/span&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- /top tiles --&gt;

          &lt;div class=&quot;row&quot;&gt;
            &lt;div class=&quot;col-md-12 col-sm-12 col-xs-12&quot;&gt;
              &lt;div class=&quot;dashboard_graph&quot;&gt;

                &lt;div class=&quot;row x_title&quot;&gt;
                  &lt;div class=&quot;col-md-6&quot;&gt;
                    &lt;h3&gt;Network Activities &lt;small&gt;Graph title sub-title&lt;/small&gt;&lt;/h3&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;col-md-6&quot;&gt;
                    &lt;div id=&quot;reportrange&quot; class=&quot;pull-right&quot; style=&quot;background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc&quot;&gt;
                      &lt;i class=&quot;glyphicon glyphicon-calendar fa fa-calendar&quot;&gt;&lt;/i&gt;
                      &lt;span&gt;December 30, 2014 - January 28, 2015&lt;/span&gt; &lt;b class=&quot;caret&quot;&gt;&lt;/b&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;

                &lt;div class=&quot;col-md-9 col-sm-9 col-xs-12&quot;&gt;
                  &lt;div id=&quot;chart_plot_01&quot; class=&quot;demo-placeholder&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;col-md-3 col-sm-3 col-xs-12 bg-white&quot;&gt;
                  &lt;div class=&quot;x_title&quot;&gt;
                    &lt;h2&gt;Top Campaign Performance&lt;/h2&gt;
                    &lt;div class=&quot;clearfix&quot;&gt;&lt;/div&gt;
                  &lt;/div&gt;

                  &lt;div class=&quot;col-md-12 col-sm-12 col-xs-6&quot;&gt;
                    &lt;div&gt;
                      &lt;p&gt;Facebook Campaign&lt;/p&gt;
                      &lt;div class=&quot;&quot;&gt;
                        &lt;div class=&quot;progress progress_sm&quot; style=&quot;width: 76%;&quot;&gt;
                          &lt;div class=&quot;progress-bar bg-green&quot; role=&quot;progressbar&quot; data-transitiongoal=&quot;80&quot;&gt;&lt;/div&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div&gt;
                      &lt;p&gt;Twitter Campaign&lt;/p&gt;
                      &lt;div class=&quot;&quot;&gt;
                        &lt;div class=&quot;progress progress_sm&quot; style=&quot;width: 76%;&quot;&gt;
                          &lt;div class=&quot;progress-bar bg-green&quot; role=&quot;progressbar&quot; data-transitiongoal=&quot;60&quot;&gt;&lt;/div&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;col-md-12 col-sm-12 col-xs-6&quot;&gt;
                    &lt;div&gt;
                      &lt;p&gt;Conventional Media&lt;/p&gt;
                      &lt;div class=&quot;&quot;&gt;
                        &lt;div class=&quot;progress progress_sm&quot; style=&quot;width: 76%;&quot;&gt;
                          &lt;div class=&quot;progress-bar bg-green&quot; role=&quot;progressbar&quot; data-transitiongoal=&quot;40&quot;&gt;&lt;/div&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div&gt;
                      &lt;p&gt;Bill boards&lt;/p&gt;
                      &lt;div class=&quot;&quot;&gt;
                        &lt;div class=&quot;progress progress_sm&quot; style=&quot;width: 76%;&quot;&gt;
                          &lt;div class=&quot;progress-bar bg-green&quot; role=&quot;progressbar&quot; data-transitiongoal=&quot;50&quot;&gt;&lt;/div&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;

                &lt;/div&gt;

                &lt;div class=&quot;clearfix&quot;&gt;&lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;

          &lt;/div&gt;
          &lt;br /&gt;

          &lt;div class=&quot;row&quot;&gt;


            &lt;div class=&quot;col-md-4 col-sm-4 col-xs-12&quot;&gt;
              &lt;div class=&quot;x_panel tile fixed_height_320&quot;&gt;
                &lt;div class=&quot;x_title&quot;&gt;
                  &lt;h2&gt;App Versions&lt;/h2&gt;
                  &lt;ul class=&quot;nav navbar-right panel_toolbox&quot;&gt;
                    &lt;li&gt;&lt;a class=&quot;collapse-link&quot;&gt;&lt;i class=&quot;fa fa-chevron-up&quot;&gt;&lt;/i&gt;&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li class=&quot;dropdown&quot;&gt;
                      &lt;a href=&quot;#&quot; class=&quot;dropdown-toggle&quot; data-toggle=&quot;dropdown&quot; role=&quot;button&quot; aria-expanded=&quot;false&quot;&gt;&lt;i class=&quot;fa fa-wrench&quot;&gt;&lt;/i&gt;&lt;/a&gt;
                      &lt;ul class=&quot;dropdown-menu&quot; role=&quot;menu&quot;&gt;
                        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Settings 1&lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Settings 2&lt;/a&gt;
                        &lt;/li&gt;
                      &lt;/ul&gt;
                    &lt;/li&gt;
                    &lt;li&gt;&lt;a class=&quot;close-link&quot;&gt;&lt;i class=&quot;fa fa-close&quot;&gt;&lt;/i&gt;&lt;/a&gt;
                    &lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;div class=&quot;clearfix&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;x_content&quot;&gt;
                  &lt;h4&gt;App Usage across versions&lt;/h4&gt;
                  &lt;div class=&quot;widget_summary&quot;&gt;
                    &lt;div class=&quot;w_left w_25&quot;&gt;
                      &lt;span&gt;0.1.5.2&lt;/span&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;w_center w_55&quot;&gt;
                      &lt;div class=&quot;progress&quot;&gt;
                        &lt;div class=&quot;progress-bar bg-green&quot; role=&quot;progressbar&quot; aria-valuenow=&quot;60&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;width: 66%;&quot;&gt;
                          &lt;span class=&quot;sr-only&quot;&gt;60% Complete&lt;/span&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;w_right w_20&quot;&gt;
                      &lt;span&gt;123k&lt;/span&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;clearfix&quot;&gt;&lt;/div&gt;
                  &lt;/div&gt;

                  &lt;div class=&quot;widget_summary&quot;&gt;
                    &lt;div class=&quot;w_left w_25&quot;&gt;
                      &lt;span&gt;0.1.5.3&lt;/span&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;w_center w_55&quot;&gt;
                      &lt;div class=&quot;progress&quot;&gt;
                        &lt;div class=&quot;progress-bar bg-green&quot; role=&quot;progressbar&quot; aria-valuenow=&quot;60&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;width: 45%;&quot;&gt;
                          &lt;span class=&quot;sr-only&quot;&gt;60% Complete&lt;/span&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;w_right w_20&quot;&gt;
                      &lt;span&gt;53k&lt;/span&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;clearfix&quot;&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;widget_summary&quot;&gt;
                    &lt;div class=&quot;w_left w_25&quot;&gt;
                      &lt;span&gt;0.1.5.4&lt;/span&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;w_center w_55&quot;&gt;
                      &lt;div class=&quot;progress&quot;&gt;
                        &lt;div class=&quot;progress-bar bg-green&quot; role=&quot;progressbar&quot; aria-valuenow=&quot;60&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;width: 25%;&quot;&gt;
                          &lt;span class=&quot;sr-only&quot;&gt;60% Complete&lt;/span&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;w_right w_20&quot;&gt;
                      &lt;span&gt;23k&lt;/span&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;clearfix&quot;&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;widget_summary&quot;&gt;
                    &lt;div class=&quot;w_left w_25&quot;&gt;
                      &lt;span&gt;0.1.5.5&lt;/span&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;w_center w_55&quot;&gt;
                      &lt;div class=&quot;progress&quot;&gt;
                        &lt;div class=&quot;progress-bar bg-green&quot; role=&quot;progressbar&quot; aria-valuenow=&quot;60&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;width: 5%;&quot;&gt;
                          &lt;span class=&quot;sr-only&quot;&gt;60% Complete&lt;/span&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;w_right w_20&quot;&gt;
                      &lt;span&gt;3k&lt;/span&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;clearfix&quot;&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;widget_summary&quot;&gt;
                    &lt;div class=&quot;w_left w_25&quot;&gt;
                      &lt;span&gt;0.1.5.6&lt;/span&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;w_center w_55&quot;&gt;
                      &lt;div class=&quot;progress&quot;&gt;
                        &lt;div class=&quot;progress-bar bg-green&quot; role=&quot;progressbar&quot; aria-valuenow=&quot;60&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;width: 2%;&quot;&gt;
                          &lt;span class=&quot;sr-only&quot;&gt;60% Complete&lt;/span&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;w_right w_20&quot;&gt;
                      &lt;span&gt;1k&lt;/span&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;clearfix&quot;&gt;&lt;/div&gt;
                  &lt;/div&gt;

                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;

            &lt;div class=&quot;col-md-4 col-sm-4 col-xs-12&quot;&gt;
              &lt;div class=&quot;x_panel tile fixed_height_320 overflow_hidden&quot;&gt;
                &lt;div class=&quot;x_title&quot;&gt;
                  &lt;h2&gt;Device Usage&lt;/h2&gt;
                  &lt;ul class=&quot;nav navbar-right panel_toolbox&quot;&gt;
                    &lt;li&gt;&lt;a class=&quot;collapse-link&quot;&gt;&lt;i class=&quot;fa fa-chevron-up&quot;&gt;&lt;/i&gt;&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li class=&quot;dropdown&quot;&gt;
                      &lt;a href=&quot;#&quot; class=&quot;dropdown-toggle&quot; data-toggle=&quot;dropdown&quot; role=&quot;button&quot; aria-expanded=&quot;false&quot;&gt;&lt;i class=&quot;fa fa-wrench&quot;&gt;&lt;/i&gt;&lt;/a&gt;
                      &lt;ul class=&quot;dropdown-menu&quot; role=&quot;menu&quot;&gt;
                        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Settings 1&lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Settings 2&lt;/a&gt;
                        &lt;/li&gt;
                      &lt;/ul&gt;
                    &lt;/li&gt;
                    &lt;li&gt;&lt;a class=&quot;close-link&quot;&gt;&lt;i class=&quot;fa fa-close&quot;&gt;&lt;/i&gt;&lt;/a&gt;
                    &lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;div class=&quot;clearfix&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;x_content&quot;&gt;
                  &lt;table class=&quot;&quot; style=&quot;width:100%&quot;&gt;
                    &lt;tr&gt;
                      &lt;th style=&quot;width:37%;&quot;&gt;
                        &lt;p&gt;Top 5&lt;/p&gt;
                      &lt;/th&gt;
                      &lt;th&gt;
                        &lt;div class=&quot;col-lg-7 col-md-7 col-sm-7 col-xs-7&quot;&gt;
                          &lt;p class=&quot;&quot;&gt;Device&lt;/p&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;col-lg-5 col-md-5 col-sm-5 col-xs-5&quot;&gt;
                          &lt;p class=&quot;&quot;&gt;Progress&lt;/p&gt;
                        &lt;/div&gt;
                      &lt;/th&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                      &lt;td&gt;
                        &lt;canvas class=&quot;canvasDoughnut&quot; height=&quot;140&quot; width=&quot;140&quot; style=&quot;margin: 15px 10px 10px 0&quot;&gt;&lt;/canvas&gt;
                      &lt;/td&gt;
                      &lt;td&gt;
                        &lt;table class=&quot;tile_info&quot;&gt;
                          &lt;tr&gt;
                            &lt;td&gt;
                              &lt;p&gt;&lt;i class=&quot;fa fa-square blue&quot;&gt;&lt;/i&gt;IOS &lt;/p&gt;
                            &lt;/td&gt;
                            &lt;td&gt;30%&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                            &lt;td&gt;
                              &lt;p&gt;&lt;i class=&quot;fa fa-square green&quot;&gt;&lt;/i&gt;Android &lt;/p&gt;
                            &lt;/td&gt;
                            &lt;td&gt;10%&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                            &lt;td&gt;
                              &lt;p&gt;&lt;i class=&quot;fa fa-square purple&quot;&gt;&lt;/i&gt;Blackberry &lt;/p&gt;
                            &lt;/td&gt;
                            &lt;td&gt;20%&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                            &lt;td&gt;
                              &lt;p&gt;&lt;i class=&quot;fa fa-square aero&quot;&gt;&lt;/i&gt;Symbian &lt;/p&gt;
                            &lt;/td&gt;
                            &lt;td&gt;15%&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                            &lt;td&gt;
                              &lt;p&gt;&lt;i class=&quot;fa fa-square red&quot;&gt;&lt;/i&gt;Others &lt;/p&gt;
                            &lt;/td&gt;
                            &lt;td&gt;30%&lt;/td&gt;
                          &lt;/tr&gt;
                        &lt;/table&gt;
                      &lt;/td&gt;
                    &lt;/tr&gt;
                  &lt;/table&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;


            &lt;div class=&quot;col-md-4 col-sm-4 col-xs-12&quot;&gt;
              &lt;div class=&quot;x_panel tile fixed_height_320&quot;&gt;
                &lt;div class=&quot;x_title&quot;&gt;
                  &lt;h2&gt;Quick Settings&lt;/h2&gt;
                  &lt;ul class=&quot;nav navbar-right panel_toolbox&quot;&gt;
                    &lt;li&gt;&lt;a class=&quot;collapse-link&quot;&gt;&lt;i class=&quot;fa fa-chevron-up&quot;&gt;&lt;/i&gt;&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li class=&quot;dropdown&quot;&gt;
                      &lt;a href=&quot;#&quot; class=&quot;dropdown-toggle&quot; data-toggle=&quot;dropdown&quot; role=&quot;button&quot; aria-expanded=&quot;false&quot;&gt;&lt;i class=&quot;fa fa-wrench&quot;&gt;&lt;/i&gt;&lt;/a&gt;
                      &lt;ul class=&quot;dropdown-menu&quot; role=&quot;menu&quot;&gt;
                        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Settings 1&lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Settings 2&lt;/a&gt;
                        &lt;/li&gt;
                      &lt;/ul&gt;
                    &lt;/li&gt;
                    &lt;li&gt;&lt;a class=&quot;close-link&quot;&gt;&lt;i class=&quot;fa fa-close&quot;&gt;&lt;/i&gt;&lt;/a&gt;
                    &lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;div class=&quot;clearfix&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;x_content&quot;&gt;
                  &lt;div class=&quot;dashboard-widget-content&quot;&gt;
                    &lt;ul class=&quot;quick-list&quot;&gt;
                      &lt;li&gt;&lt;i class=&quot;fa fa-calendar-o&quot;&gt;&lt;/i&gt;&lt;a href=&quot;#&quot;&gt;Settings&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;i class=&quot;fa fa-bars&quot;&gt;&lt;/i&gt;&lt;a href=&quot;#&quot;&gt;Subscription&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;i class=&quot;fa fa-bar-chart&quot;&gt;&lt;/i&gt;&lt;a href=&quot;#&quot;&gt;Auto Renewal&lt;/a&gt; &lt;/li&gt;
                      &lt;li&gt;&lt;i class=&quot;fa fa-line-chart&quot;&gt;&lt;/i&gt;&lt;a href=&quot;#&quot;&gt;Achievements&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;i class=&quot;fa fa-bar-chart&quot;&gt;&lt;/i&gt;&lt;a href=&quot;#&quot;&gt;Auto Renewal&lt;/a&gt; &lt;/li&gt;
                      &lt;li&gt;&lt;i class=&quot;fa fa-line-chart&quot;&gt;&lt;/i&gt;&lt;a href=&quot;#&quot;&gt;Achievements&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;i class=&quot;fa fa-area-chart&quot;&gt;&lt;/i&gt;&lt;a href=&quot;#&quot;&gt;Logout&lt;/a&gt;
                      &lt;/li&gt;
                    &lt;/ul&gt;

                    &lt;div class=&quot;sidebar-widget&quot;&gt;
                        &lt;h4&gt;Profile Completion&lt;/h4&gt;
                        &lt;canvas width=&quot;150&quot; height=&quot;80&quot; id=&quot;chart_gauge_01&quot; class=&quot;&quot; style=&quot;width: 160px; height: 100px;&quot;&gt;&lt;/canvas&gt;
                        &lt;div class=&quot;goal-wrapper&quot;&gt;
                          &lt;span id=&quot;gauge-text&quot; class=&quot;gauge-value pull-left&quot;&gt;0&lt;/span&gt;
                          &lt;span class=&quot;gauge-value pull-left&quot;&gt;%&lt;/span&gt;
                          &lt;span id=&quot;goal-text&quot; class=&quot;goal-value pull-right&quot;&gt;100%&lt;/span&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;

          &lt;/div&gt;


          &lt;div class=&quot;row&quot;&gt;
            &lt;div class=&quot;col-md-4 col-sm-4 col-xs-12&quot;&gt;
              &lt;div class=&quot;x_panel&quot;&gt;
                &lt;div class=&quot;x_title&quot;&gt;
                  &lt;h2&gt;Recent Activities &lt;small&gt;Sessions&lt;/small&gt;&lt;/h2&gt;
                  &lt;ul class=&quot;nav navbar-right panel_toolbox&quot;&gt;
                    &lt;li&gt;&lt;a class=&quot;collapse-link&quot;&gt;&lt;i class=&quot;fa fa-chevron-up&quot;&gt;&lt;/i&gt;&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li class=&quot;dropdown&quot;&gt;
                      &lt;a href=&quot;#&quot; class=&quot;dropdown-toggle&quot; data-toggle=&quot;dropdown&quot; role=&quot;button&quot; aria-expanded=&quot;false&quot;&gt;&lt;i class=&quot;fa fa-wrench&quot;&gt;&lt;/i&gt;&lt;/a&gt;
                      &lt;ul class=&quot;dropdown-menu&quot; role=&quot;menu&quot;&gt;
                        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Settings 1&lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Settings 2&lt;/a&gt;
                        &lt;/li&gt;
                      &lt;/ul&gt;
                    &lt;/li&gt;
                    &lt;li&gt;&lt;a class=&quot;close-link&quot;&gt;&lt;i class=&quot;fa fa-close&quot;&gt;&lt;/i&gt;&lt;/a&gt;
                    &lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;div class=&quot;clearfix&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;x_content&quot;&gt;
                  &lt;div class=&quot;dashboard-widget-content&quot;&gt;

                    &lt;ul class=&quot;list-unstyled timeline widget&quot;&gt;
                      &lt;li&gt;
                        &lt;div class=&quot;block&quot;&gt;
                          &lt;div class=&quot;block_content&quot;&gt;
                            &lt;h2 class=&quot;title&quot;&gt;
                                              &lt;a&gt;Who Needs Sundance When You&rsquo;ve Got&amp;nbsp;Crowdfunding?&lt;/a&gt;
                                          &lt;/h2&gt;
                            &lt;div class=&quot;byline&quot;&gt;
                              &lt;span&gt;13 hours ago&lt;/span&gt; by &lt;a&gt;Jane Smith&lt;/a&gt;
                            &lt;/div&gt;
                            &lt;p class=&quot;excerpt&quot;&gt;Film festivals used to be do-or-die moments for movie makers. They were where you met the producers that could fund your project, and if the buyers liked your flick, they&rsquo;d pay to Fast-forward and&hellip; &lt;a&gt;Read&amp;nbsp;More&lt;/a&gt;
                            &lt;/p&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                        &lt;div class=&quot;block&quot;&gt;
                          &lt;div class=&quot;block_content&quot;&gt;
                            &lt;h2 class=&quot;title&quot;&gt;
                                              &lt;a&gt;Who Needs Sundance When You&rsquo;ve Got&amp;nbsp;Crowdfunding?&lt;/a&gt;
                                          &lt;/h2&gt;
                            &lt;div class=&quot;byline&quot;&gt;
                              &lt;span&gt;13 hours ago&lt;/span&gt; by &lt;a&gt;Jane Smith&lt;/a&gt;
                            &lt;/div&gt;
                            &lt;p class=&quot;excerpt&quot;&gt;Film festivals used to be do-or-die moments for movie makers. They were where you met the producers that could fund your project, and if the buyers liked your flick, they&rsquo;d pay to Fast-forward and&hellip; &lt;a&gt;Read&amp;nbsp;More&lt;/a&gt;
                            &lt;/p&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                        &lt;div class=&quot;block&quot;&gt;
                          &lt;div class=&quot;block_content&quot;&gt;
                            &lt;h2 class=&quot;title&quot;&gt;
                                              &lt;a&gt;Who Needs Sundance When You&rsquo;ve Got&amp;nbsp;Crowdfunding?&lt;/a&gt;
                                          &lt;/h2&gt;
                            &lt;div class=&quot;byline&quot;&gt;
                              &lt;span&gt;13 hours ago&lt;/span&gt; by &lt;a&gt;Jane Smith&lt;/a&gt;
                            &lt;/div&gt;
                            &lt;p class=&quot;excerpt&quot;&gt;Film festivals used to be do-or-die moments for movie makers. They were where you met the producers that could fund your project, and if the buyers liked your flick, they&rsquo;d pay to Fast-forward and&hellip; &lt;a&gt;Read&amp;nbsp;More&lt;/a&gt;
                            &lt;/p&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                        &lt;div class=&quot;block&quot;&gt;
                          &lt;div class=&quot;block_content&quot;&gt;
                            &lt;h2 class=&quot;title&quot;&gt;
                                              &lt;a&gt;Who Needs Sundance When You&rsquo;ve Got&amp;nbsp;Crowdfunding?&lt;/a&gt;
                                          &lt;/h2&gt;
                            &lt;div class=&quot;byline&quot;&gt;
                              &lt;span&gt;13 hours ago&lt;/span&gt; by &lt;a&gt;Jane Smith&lt;/a&gt;
                            &lt;/div&gt;
                            &lt;p class=&quot;excerpt&quot;&gt;Film festivals used to be do-or-die moments for movie makers. They were where you met the producers that could fund your project, and if the buyers liked your flick, they&rsquo;d pay to Fast-forward and&hellip; &lt;a&gt;Read&amp;nbsp;More&lt;/a&gt;
                            &lt;/p&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                      &lt;/li&gt;
                    &lt;/ul&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;


            &lt;div class=&quot;col-md-8 col-sm-8 col-xs-12&quot;&gt;



              &lt;div class=&quot;row&quot;&gt;

                &lt;div class=&quot;col-md-12 col-sm-12 col-xs-12&quot;&gt;
                  &lt;div class=&quot;x_panel&quot;&gt;
                    &lt;div class=&quot;x_title&quot;&gt;
                      &lt;h2&gt;Visitors location &lt;small&gt;geo-presentation&lt;/small&gt;&lt;/h2&gt;
                      &lt;ul class=&quot;nav navbar-right panel_toolbox&quot;&gt;
                        &lt;li&gt;&lt;a class=&quot;collapse-link&quot;&gt;&lt;i class=&quot;fa fa-chevron-up&quot;&gt;&lt;/i&gt;&lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li class=&quot;dropdown&quot;&gt;
                          &lt;a href=&quot;#&quot; class=&quot;dropdown-toggle&quot; data-toggle=&quot;dropdown&quot; role=&quot;button&quot; aria-expanded=&quot;false&quot;&gt;&lt;i class=&quot;fa fa-wrench&quot;&gt;&lt;/i&gt;&lt;/a&gt;
                          &lt;ul class=&quot;dropdown-menu&quot; role=&quot;menu&quot;&gt;
                            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Settings 1&lt;/a&gt;
                            &lt;/li&gt;
                            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Settings 2&lt;/a&gt;
                            &lt;/li&gt;
                          &lt;/ul&gt;
                        &lt;/li&gt;
                        &lt;li&gt;&lt;a class=&quot;close-link&quot;&gt;&lt;i class=&quot;fa fa-close&quot;&gt;&lt;/i&gt;&lt;/a&gt;
                        &lt;/li&gt;
                      &lt;/ul&gt;
                      &lt;div class=&quot;clearfix&quot;&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;x_content&quot;&gt;
                      &lt;div class=&quot;dashboard-widget-content&quot;&gt;
                        &lt;div class=&quot;col-md-4 hidden-small&quot;&gt;
                          &lt;h2 class=&quot;line_30&quot;&gt;125.7k Views from 60 countries&lt;/h2&gt;

                          &lt;table class=&quot;countries_list&quot;&gt;
                            &lt;tbody&gt;
                              &lt;tr&gt;
                                &lt;td&gt;United States&lt;/td&gt;
                                &lt;td class=&quot;fs15 fw700 text-right&quot;&gt;33%&lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                &lt;td&gt;France&lt;/td&gt;
                                &lt;td class=&quot;fs15 fw700 text-right&quot;&gt;27%&lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                &lt;td&gt;Germany&lt;/td&gt;
                                &lt;td class=&quot;fs15 fw700 text-right&quot;&gt;16%&lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                &lt;td&gt;Spain&lt;/td&gt;
                                &lt;td class=&quot;fs15 fw700 text-right&quot;&gt;11%&lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                &lt;td&gt;Britain&lt;/td&gt;
                                &lt;td class=&quot;fs15 fw700 text-right&quot;&gt;10%&lt;/td&gt;
                              &lt;/tr&gt;
                            &lt;/tbody&gt;
                          &lt;/table&gt;
                        &lt;/div&gt;
                        &lt;div id=&quot;world-map-gdp&quot; class=&quot;col-md-8 col-sm-12 col-xs-12&quot; style=&quot;height:230px;&quot;&gt;&lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;

              &lt;/div&gt;
              &lt;div class=&quot;row&quot;&gt;


                &lt;!-- Start to do list --&gt;
                &lt;div class=&quot;col-md-6 col-sm-6 col-xs-12&quot;&gt;
                  &lt;div class=&quot;x_panel&quot;&gt;
                    &lt;div class=&quot;x_title&quot;&gt;
                      &lt;h2&gt;To Do List &lt;small&gt;Sample tasks&lt;/small&gt;&lt;/h2&gt;
                      &lt;ul class=&quot;nav navbar-right panel_toolbox&quot;&gt;
                        &lt;li&gt;&lt;a class=&quot;collapse-link&quot;&gt;&lt;i class=&quot;fa fa-chevron-up&quot;&gt;&lt;/i&gt;&lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li class=&quot;dropdown&quot;&gt;
                          &lt;a href=&quot;#&quot; class=&quot;dropdown-toggle&quot; data-toggle=&quot;dropdown&quot; role=&quot;button&quot; aria-expanded=&quot;false&quot;&gt;&lt;i class=&quot;fa fa-wrench&quot;&gt;&lt;/i&gt;&lt;/a&gt;
                          &lt;ul class=&quot;dropdown-menu&quot; role=&quot;menu&quot;&gt;
                            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Settings 1&lt;/a&gt;
                            &lt;/li&gt;
                            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Settings 2&lt;/a&gt;
                            &lt;/li&gt;
                          &lt;/ul&gt;
                        &lt;/li&gt;
                        &lt;li&gt;&lt;a class=&quot;close-link&quot;&gt;&lt;i class=&quot;fa fa-close&quot;&gt;&lt;/i&gt;&lt;/a&gt;
                        &lt;/li&gt;
                      &lt;/ul&gt;
                      &lt;div class=&quot;clearfix&quot;&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;x_content&quot;&gt;

                      &lt;div class=&quot;&quot;&gt;
                        &lt;ul class=&quot;to_do&quot;&gt;
                          &lt;li&gt;
                            &lt;p&gt;
                              &lt;input type=&quot;checkbox&quot; class=&quot;flat&quot;&gt; Schedule meeting with new client &lt;/p&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                            &lt;p&gt;
                              &lt;input type=&quot;checkbox&quot; class=&quot;flat&quot;&gt; Create email address for new intern&lt;/p&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                            &lt;p&gt;
                              &lt;input type=&quot;checkbox&quot; class=&quot;flat&quot;&gt; Have IT fix the network printer&lt;/p&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                            &lt;p&gt;
                              &lt;input type=&quot;checkbox&quot; class=&quot;flat&quot;&gt; Copy backups to offsite location&lt;/p&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                            &lt;p&gt;
                              &lt;input type=&quot;checkbox&quot; class=&quot;flat&quot;&gt; Food truck fixie locavors mcsweeney&lt;/p&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                            &lt;p&gt;
                              &lt;input type=&quot;checkbox&quot; class=&quot;flat&quot;&gt; Food truck fixie locavors mcsweeney&lt;/p&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                            &lt;p&gt;
                              &lt;input type=&quot;checkbox&quot; class=&quot;flat&quot;&gt; Create email address for new intern&lt;/p&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                            &lt;p&gt;
                              &lt;input type=&quot;checkbox&quot; class=&quot;flat&quot;&gt; Have IT fix the network printer&lt;/p&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                            &lt;p&gt;
                              &lt;input type=&quot;checkbox&quot; class=&quot;flat&quot;&gt; Copy backups to offsite location&lt;/p&gt;
                          &lt;/li&gt;
                        &lt;/ul&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;!-- End to do list --&gt;
                
                &lt;!-- start of weather widget --&gt;
                &lt;div class=&quot;col-md-6 col-sm-6 col-xs-12&quot;&gt;
                  &lt;div class=&quot;x_panel&quot;&gt;
                    &lt;div class=&quot;x_title&quot;&gt;
                      &lt;h2&gt;Daily active users &lt;small&gt;Sessions&lt;/small&gt;&lt;/h2&gt;
                      &lt;ul class=&quot;nav navbar-right panel_toolbox&quot;&gt;
                        &lt;li&gt;&lt;a class=&quot;collapse-link&quot;&gt;&lt;i class=&quot;fa fa-chevron-up&quot;&gt;&lt;/i&gt;&lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li class=&quot;dropdown&quot;&gt;
                          &lt;a href=&quot;#&quot; class=&quot;dropdown-toggle&quot; data-toggle=&quot;dropdown&quot; role=&quot;button&quot; aria-expanded=&quot;false&quot;&gt;&lt;i class=&quot;fa fa-wrench&quot;&gt;&lt;/i&gt;&lt;/a&gt;
                          &lt;ul class=&quot;dropdown-menu&quot; role=&quot;menu&quot;&gt;
                            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Settings 1&lt;/a&gt;
                            &lt;/li&gt;
                            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Settings 2&lt;/a&gt;
                            &lt;/li&gt;
                          &lt;/ul&gt;
                        &lt;/li&gt;
                        &lt;li&gt;&lt;a class=&quot;close-link&quot;&gt;&lt;i class=&quot;fa fa-close&quot;&gt;&lt;/i&gt;&lt;/a&gt;
                        &lt;/li&gt;
                      &lt;/ul&gt;
                      &lt;div class=&quot;clearfix&quot;&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;x_content&quot;&gt;
                      &lt;div class=&quot;row&quot;&gt;
                        &lt;div class=&quot;col-sm-12&quot;&gt;
                          &lt;div class=&quot;temperature&quot;&gt;&lt;b&gt;Monday&lt;/b&gt;, 07:30 AM
                            &lt;span&gt;F&lt;/span&gt;
                            &lt;span&gt;&lt;b&gt;C&lt;/b&gt;&lt;/span&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;row&quot;&gt;
                        &lt;div class=&quot;col-sm-4&quot;&gt;
                          &lt;div class=&quot;weather-icon&quot;&gt;
                            &lt;canvas height=&quot;84&quot; width=&quot;84&quot; id=&quot;partly-cloudy-day&quot;&gt;&lt;/canvas&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;col-sm-8&quot;&gt;
                          &lt;div class=&quot;weather-text&quot;&gt;
                            &lt;h2&gt;Texas &lt;br&gt;&lt;i&gt;Partly Cloudy Day&lt;/i&gt;&lt;/h2&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;col-sm-12&quot;&gt;
                        &lt;div class=&quot;weather-text pull-right&quot;&gt;
                          &lt;h3 class=&quot;degrees&quot;&gt;23&lt;/h3&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;

                      &lt;div class=&quot;clearfix&quot;&gt;&lt;/div&gt;

                      &lt;div class=&quot;row weather-days&quot;&gt;
                        &lt;div class=&quot;col-sm-2&quot;&gt;
                          &lt;div class=&quot;daily-weather&quot;&gt;
                            &lt;h2 class=&quot;day&quot;&gt;Mon&lt;/h2&gt;
                            &lt;h3 class=&quot;degrees&quot;&gt;25&lt;/h3&gt;
                            &lt;canvas id=&quot;clear-day&quot; width=&quot;32&quot; height=&quot;32&quot;&gt;&lt;/canvas&gt;
                            &lt;h5&gt;15 &lt;i&gt;km/h&lt;/i&gt;&lt;/h5&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;col-sm-2&quot;&gt;
                          &lt;div class=&quot;daily-weather&quot;&gt;
                            &lt;h2 class=&quot;day&quot;&gt;Tue&lt;/h2&gt;
                            &lt;h3 class=&quot;degrees&quot;&gt;25&lt;/h3&gt;
                            &lt;canvas height=&quot;32&quot; width=&quot;32&quot; id=&quot;rain&quot;&gt;&lt;/canvas&gt;
                            &lt;h5&gt;12 &lt;i&gt;km/h&lt;/i&gt;&lt;/h5&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;col-sm-2&quot;&gt;
                          &lt;div class=&quot;daily-weather&quot;&gt;
                            &lt;h2 class=&quot;day&quot;&gt;Wed&lt;/h2&gt;
                            &lt;h3 class=&quot;degrees&quot;&gt;27&lt;/h3&gt;
                            &lt;canvas height=&quot;32&quot; width=&quot;32&quot; id=&quot;snow&quot;&gt;&lt;/canvas&gt;
                            &lt;h5&gt;14 &lt;i&gt;km/h&lt;/i&gt;&lt;/h5&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;col-sm-2&quot;&gt;
                          &lt;div class=&quot;daily-weather&quot;&gt;
                            &lt;h2 class=&quot;day&quot;&gt;Thu&lt;/h2&gt;
                            &lt;h3 class=&quot;degrees&quot;&gt;28&lt;/h3&gt;
                            &lt;canvas height=&quot;32&quot; width=&quot;32&quot; id=&quot;sleet&quot;&gt;&lt;/canvas&gt;
                            &lt;h5&gt;15 &lt;i&gt;km/h&lt;/i&gt;&lt;/h5&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;col-sm-2&quot;&gt;
                          &lt;div class=&quot;daily-weather&quot;&gt;
                            &lt;h2 class=&quot;day&quot;&gt;Fri&lt;/h2&gt;
                            &lt;h3 class=&quot;degrees&quot;&gt;28&lt;/h3&gt;
                            &lt;canvas height=&quot;32&quot; width=&quot;32&quot; id=&quot;wind&quot;&gt;&lt;/canvas&gt;
                            &lt;h5&gt;11 &lt;i&gt;km/h&lt;/i&gt;&lt;/h5&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;col-sm-2&quot;&gt;
                          &lt;div class=&quot;daily-weather&quot;&gt;
                            &lt;h2 class=&quot;day&quot;&gt;Sat&lt;/h2&gt;
                            &lt;h3 class=&quot;degrees&quot;&gt;26&lt;/h3&gt;
                            &lt;canvas height=&quot;32&quot; width=&quot;32&quot; id=&quot;cloudy&quot;&gt;&lt;/canvas&gt;
                            &lt;h5&gt;10 &lt;i&gt;km/h&lt;/i&gt;&lt;/h5&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;clearfix&quot;&gt;&lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;

                &lt;/div&gt;
                &lt;!-- end of weather widget --&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- /page content --&gt;

        &lt;!-- footer content --&gt;
        &lt;footer&gt;
          &lt;div class=&quot;pull-right&quot;&gt;
            Gentelella - Bootstrap Admin Template by &lt;a href=&quot;https://colorlib.com&quot;&gt;Colorlib&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class=&quot;clearfix&quot;&gt;&lt;/div&gt;
        &lt;/footer&gt;
        &lt;!-- /footer content --&gt;
      &lt;/div&gt;
    &lt;/div&gt;

    &lt;!-- jQuery --&gt;
    &lt;script src=&quot;/vendors/jquery/dist/jquery.min.js&quot;&gt;&lt;/script&gt;
    &lt;!-- Bootstrap --&gt;
    &lt;script src=&quot;/vendors/bootstrap/dist/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
    &lt;!-- FastClick --&gt;
    &lt;script src=&quot;/vendors/fastclick/lib/fastclick.js&quot;&gt;&lt;/script&gt;
    &lt;!-- NProgress --&gt;
    &lt;script src=&quot;/vendors/nprogress/nprogress.js&quot;&gt;&lt;/script&gt;
    &lt;!-- Chart.js --&gt;
    &lt;script src=&quot;/vendors/Chart.js/dist/Chart.min.js&quot;&gt;&lt;/script&gt;
    &lt;!-- gauge.js --&gt;
    &lt;script src=&quot;/vendors/gauge.js/dist/gauge.min.js&quot;&gt;&lt;/script&gt;
    &lt;!-- bootstrap-progressbar --&gt;
    &lt;script src=&quot;/vendors/bootstrap-progressbar/bootstrap-progressbar.min.js&quot;&gt;&lt;/script&gt;
    &lt;!-- iCheck --&gt;
    &lt;script src=&quot;/vendors/iCheck/icheck.min.js&quot;&gt;&lt;/script&gt;
    &lt;!-- Skycons --&gt;
    &lt;script src=&quot;/vendors/skycons/skycons.js&quot;&gt;&lt;/script&gt;
    &lt;!-- Flot --&gt;
    &lt;script src=&quot;/vendors/Flot/jquery.flot.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;/vendors/Flot/jquery.flot.pie.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;/vendors/Flot/jquery.flot.time.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;/vendors/Flot/jquery.flot.stack.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;/vendors/Flot/jquery.flot.resize.js&quot;&gt;&lt;/script&gt;
    &lt;!-- Flot plugins --&gt;
    &lt;script src=&quot;/vendors/flot.orderbars/js/jquery.flot.orderBars.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;/vendors/flot-spline/js/jquery.flot.spline.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;/vendors/flot.curvedlines/curvedLines.js&quot;&gt;&lt;/script&gt;
    &lt;!-- DateJS --&gt;
    &lt;script src=&quot;/vendors/DateJS/build/date.js&quot;&gt;&lt;/script&gt;
    &lt;!-- JQVMap --&gt;
    &lt;script src=&quot;/vendors/jqvmap/dist/jquery.vmap.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;/vendors/jqvmap/dist/maps/jquery.vmap.world.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;/vendors/jqvmap/examples/js/jquery.vmap.sampledata.js&quot;&gt;&lt;/script&gt;
    &lt;!-- bootstrap-daterangepicker --&gt;
    &lt;script src=&quot;/vendors/moment/min/moment.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;/vendors/bootstrap-daterangepicker/daterangepicker.js&quot;&gt;&lt;/script&gt;

    &lt;!-- Custom Theme Scripts --&gt;
    &lt;script src=&quot;/build/js/custom.min.js&quot;&gt;&lt;/script&gt;
	
  &lt;/body&gt;
&lt;/html&gt;</pre>

<p>&nbsp;</p>

Check following code at the top of Dashboard.php file. Here we are checking the user login status. If the user has an active session with IsLogin equals to “1” we are fine. Else we need to redirect user for authentication.

Code

<pre class="brush:as3;">
    session_start();
    $IsLogin=-1;
    if(isset($_SESSION[&quot;IsLogin&quot;]))
    {
        $IsLogin = intval($_SESSION[&quot;IsLogin&quot;]);
    }

    if($IsLogin&lt;1)
    {
        header(&quot;Location: index.php&quot;);
    }</pre>

<p>&nbsp;</p>

Let’s add the same lines of code for the index.php and LoginCheck.php file with little modification. On these files we need to check if the user has an active session with IsLogin equals to “1”, we need to redirect the user to Dashboard.php file. Add following code at the top of the index.php and LoginCheck.php files.

Code

<pre class="brush:as3;">
session_start();
$IsLogin=-1;
if(isset($_SESSION[&quot;IsLogin&quot;]))
{
    $IsLogin = intval($_SESSION[&quot;IsLogin&quot;]);
}

if($IsLogin==1)
{
    header(&quot;Location: Dashboard.php&quot;);
}</pre>

<p>&nbsp;</p>

It's time to test our login functionality. Following is the source code for this article.

FileDownload
Login - PHP MySQL eCommerce Admin Panel Tutorial.zipLogin to Download
...

About The Author

Hello, I am Mayank Sanghvi I am primarily a BI developer with experience in MSBI and Cognos BI Suit. Also having interest in various other technologies such as Android, Java, C#, ASP .NET and other. I enjoy learning new technologies and share my experience with others.

0 Comments
Leave A Comment

Please login to post your valuable comments.

add