Clone admin dashboard using Laravel
Directory Structure
------------------------//--------------------
Step Note:
Less secure app access
Your account is vulnerable because you allow apps and devices that useless
secure sign-in technology to access your account. To keep your account
secure, Google will automatically turn this setting OFF if it’s not
being used
Your account is vulnerable because you allow apps and devices that useless
secure sign-in technology to access your account. To keep your account
secure, Google will automatically turn this setting OFF if it’s not
being used
https://myaccount.google.com/security?pli=1#connectedapps
Step Clear: Cache
php artisan config:cache
Add Mailtrap Details in .env File
for reset, password send an email
MAIL_DRIVER=smtp
MAIL_HOST=smtp.gmail.com
MAIL_PORT=587
MAIL_USERNAME=soengsouy.khmer09@gmail.com
MAIL_PASSWORD='your password'
MAIL_ENCRYPTION=tls
MAIL_FROM_ADDRESS=null
MAIL_FROM_NAME="${APP_NAME}"
MAIL_DRIVER=smtp
MAIL_HOST=smtp.gmail.com
MAIL_PORT=587
MAIL_USERNAME=soengsouy.khmer09@gmail.com
MAIL_PASSWORD='your password'
MAIL_ENCRYPTION=tls
MAIL_FROM_ADDRESS=null
MAIL_FROM_NAME="${APP_NAME}"database/migrations
php artisan migrate
php artisan migrateStep1: view/dashboard.blade.php
Now in this step, you need to add two routes to your dashboard.blade.profile the same as below.
dashboard.blade.php
@extends('layouts.master')
Step 2: view/layouts/master.blade.php
Now in this step, you need to add two routes to your master.blade.profile the same as below.
master.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Dashboard</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="all,follow">
<!-- Bootstrap CSS-->
<link rel="stylesheet" href="assets/vendor/bootstrap/css/bootstrap.min.css">
<!-- Font Awesome CSS-->
<link rel="stylesheet" href="assets/vendor/font-awesome/css/font-awesome.min.css">
<!-- Fontastic Custom icon font-->
<link rel="stylesheet" href="assets/css/fontastic.css">
<!-- Google fonts - Roboto -->
<link rel="stylesheet" href="assets/https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<!-- jQuery Circle-->
<link rel="stylesheet" href="assets/css/grasp_mobile_progress_circle-1.0.0.min.css">
<!-- Custom Scrollbar-->
<link rel="stylesheet" href="assets/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css">
<!-- theme stylesheet-->
<link rel="stylesheet" href="assets/css/style.default.css" id="theme-stylesheet">
<!-- Custom stylesheet - for your changes-->
<link rel="stylesheet" href="assets/css/custom.css">
<!-- Favicon-->
<link href='https://www.soengsouy.com/favicon.ico' rel='icon' type='image/x-icon'/>
</head>
<body>
<!-- Side Navbar -->
<nav class="side-navbar">
<div class="side-navbar-wrapper">
<!-- Sidebar Header -->
<div class="sidenav-header d-flex align-items-center justify-content-center">
<!-- User Info-->
<div class="sidenav-header-inner text-center"><img src="assets/img/avatar-7.jpg" alt="person" class="img-fluid rounded-circle">
<h2 class="h5">Soeng Souy</h2>
<span>Web Developer</span>
</div>
<!-- Small Brand information, appears on minimized sidebar-->
<div class="sidenav-header-logo"><a href="assets/index.html" class="brand-small text-center"> <strong>B</strong><strong class="text-primary">D</strong></a></div>
</div>
<!-- Sidebar Navigation Menus-->
<div class="main-menu">
<h5 class="sidenav-heading">Main</h5>
<ul id="side-main-menu" class="side-menu list-unstyled">
<li><a href="assets/index.html"> <i class="icon-home"></i>Home </a></li>
<li><a href="assets/forms.html"> <i class="icon-form"></i>Forms </a></li>
<li><a href="assets/charts.html"> <i class="fa fa-bar-chart"></i>Charts </a></li>
<li><a href="assets/tables.html"> <i class="icon-grid"></i>Tables </a></li>
<li><a href="assets/#exampledropdownDropdown" aria-expanded="false" data-toggle="collapse"> <i class="icon-interface-windows"></i>Example dropdown </a>
<ul id="exampledropdownDropdown" class="collapse list-unstyled ">
<li><a href="assets/#">Page</a></li>
<li><a href="assets/#">Page</a></li>
<li><a href="assets/#">Page</a></li>
</ul>
</li>
<li><a href="assets/login.html"> <i class="icon-interface-windows"></i>Login page </a></li>
<li> <a href="assets/#"> <i class="icon-mail"></i>Demo
<div class="badge badge-warning">6 New</div></a></li>
</ul>
</div>
<div class="admin-menu">
<h5 class="sidenav-heading">Second menu</h5>
<ul id="side-admin-menu" class="side-menu list-unstyled">
<li> <a href="assets/#"> <i class="icon-screen"> </i>Demo</a></li>
<li> <a href="assets/#"> <i class="icon-flask"> </i>Demo
<div class="badge badge-info">Special</div></a></li>
</ul>
</div>
</div>
</nav>
<div class="page">
<!-- navbar-->
<header class="header">
<nav class="navbar">
<div class="container-fluid">
<div class="navbar-holder d-flex align-items-center justify-content-between">
<div class="navbar-header"><a id="toggle-btn" href="assets/#" class="menu-btn"><i class="icon-bars"> </i></a><a href="assets/index.html" class="navbar-brand">
<div class="brand-text d-none d-md-inline-block"></div></a></div>
<ul class="nav-menu list-unstyled d-flex flex-md-row align-items-md-center">
<li class="nav-item"><a href="assets/login.html" class="nav-link logout"> <span class="d-none d-sm-inline-block">Logout</span><i class="fa fa-sign-out"></i></a></li>
</ul>
</div>
</div>
</nav>
</header>
<!-- Counts Section -->
<section class="dashboard-counts section-padding">
<div class="container-fluid">
<div class="row">
<!-- Count item widget-->
<div class="col-xl-2 col-md-4 col-6">
<div class="wrapper count-title d-flex">
<div class="icon"><i class="icon-user"></i></div>
<div class="name"><strong class="text-uppercase">New Clients</strong><span>Last 7 days</span>
<div class="count-number">25</div>
</div>
</div>
</div>
<!-- Count item widget-->
<div class="col-xl-2 col-md-4 col-6">
<div class="wrapper count-title d-flex">
<div class="icon"><i class="icon-padnote"></i></div>
<div class="name"><strong class="text-uppercase">Work Orders</strong><span>Last 5 days</span>
<div class="count-number">400</div>
</div>
</div>
</div>
<!-- Count item widget-->
<div class="col-xl-2 col-md-4 col-6">
<div class="wrapper count-title d-flex">
<div class="icon"><i class="icon-check"></i></div>
<div class="name"><strong class="text-uppercase">New Quotes</strong><span>Last 2 months</span>
<div class="count-number">342</div>
</div>
</div>
</div>
<!-- Count item widget-->
<div class="col-xl-2 col-md-4 col-6">
<div class="wrapper count-title d-flex">
<div class="icon"><i class="icon-bill"></i></div>
<div class="name"><strong class="text-uppercase">New Invoices</strong><span>Last 2 days</span>
<div class="count-number">123</div>
</div>
</div>
</div>
<!-- Count item widget-->
<div class="col-xl-2 col-md-4 col-6">
<div class="wrapper count-title d-flex">
<div class="icon"><i class="icon-list"></i></div>
<div class="name"><strong class="text-uppercase">Open Cases</strong><span>Last 3 months</span>
<div class="count-number">92</div>
</div>
</div>
</div>
<!-- Count item widget-->
<div class="col-xl-2 col-md-4 col-6">
<div class="wrapper count-title d-flex">
<div class="icon"><i class="icon-list-1"></i></div>
<div class="name"><strong class="text-uppercase">New Cases</strong><span>Last 7 days</span>
<div class="count-number">70</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Header Section-->
<section class="dashboard-header section-padding">
<div class="container-fluid">
<div class="row d-flex align-items-md-stretch">
<!-- To Do List-->
<div class="col-lg-3 col-md-6">
<div class="card to-do">
<h2 class="display h4">To do List</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<ul class="check-lists list-unstyled">
<li class="d-flex align-items-center">
<input type="checkbox" id="list-1" name="list-1" class="form-control-custom">
<label for="list-1">Similique sunt in culpa qui officia</label>
</li>
<li class="d-flex align-items-center">
<input type="checkbox" id="list-2" name="list-2" class="form-control-custom">
<label for="list-2">Ed ut perspiciatis unde omnis iste</label>
</li>
<li class="d-flex align-items-center">
<input type="checkbox" id="list-3" name="list-3" class="form-control-custom">
<label for="list-3">At vero eos et accusamus et iusto </label>
</li>
<li class="d-flex align-items-center">
<input type="checkbox" id="list-4" name="list-4" class="form-control-custom">
<label for="list-4">Explicabo Nemo ipsam voluptatem</label>
</li>
<li class="d-flex align-items-center">
<input type="checkbox" id="list-5" name="list-5" class="form-control-custom">
<label for="list-5">Similique sunt in culpa qui officia</label>
</li>
<li class="d-flex align-items-center">
<input type="checkbox" id="list-6" name="list-6" class="form-control-custom">
<label for="list-6">At vero eos et accusamus et iusto </label>
</li>
<li class="d-flex align-items-center">
<input type="checkbox" id="list-7" name="list-7" class="form-control-custom">
<label for="list-7">Similique sunt in culpa qui officia</label>
</li>
<li class="d-flex align-items-center">
<input type="checkbox" id="list-8" name="list-8" class="form-control-custom">
<label for="list-8">Ed ut perspiciatis unde omnis iste</label>
</li>
</ul>
</div>
</div>
<!-- Pie Chart-->
<div class="col-lg-3 col-md-6">
<div class="card project-progress">
<h2 class="display h4">Project Beta progress</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<div class="pie-chart">
<canvas id="pieChart" width="300" height="300"> </canvas>
</div>
</div>
</div>
<!-- Line Chart -->
<div class="col-lg-6 col-md-12 flex-lg-last flex-md-first align-self-baseline">
<div class="card sales-report">
<h2 class="display h4">Sales marketing report</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor amet officiis</p>
<div class="line-chart">
<canvas id="lineCahrt"></canvas>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Statistics Section-->
<section class="statistics">
<div class="container-fluid">
<div class="row d-flex">
<div class="col-lg-4">
<!-- Income-->
<div class="card income text-center">
<div class="icon"><i class="icon-line-chart"></i></div>
<div class="number">126,418</div><strong class="text-primary">All Income</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do.</p>
</div>
</div>
<div class="col-lg-4">
<!-- Monthly Usage-->
<div class="card data-usage">
<h2 class="display h4">Monthly Usage</h2>
<div class="row d-flex align-items-center">
<div class="col-sm-6">
<div id="progress-circle" class="d-flex align-items-center justify-content-center"></div>
</div>
<div class="col-sm-6"><strong class="text-primary">80.56 Gb</strong><small>Current Plan</small><span>100 Gb Monthly</span></div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
</div>
</div>
<div class="col-lg-4">
<!-- User Actibity-->
<div class="card user-activity">
<h2 class="display h4">User Activity</h2>
<div class="number">210</div>
<h3 class="h4 display">Social Users</h3>
<div class="progress">
<div role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" class="progress-bar progress-bar bg-primary"></div>
</div>
<div class="page-statistics d-flex justify-content-between">
<div class="page-statistics-left"><span>Pages Visits</span><strong>230</strong></div>
<div class="page-statistics-right"><span>New Visits</span><strong>73.4%</strong></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Updates Section -->
<section class="mt-30px mb-30px">
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-md-12">
<!-- Recent Updates Widget -->
<div id="new-updates" class="card updates recent-updated">
<div id="updates-header" class="card-header d-flex justify-content-between align-items-center">
<h2 class="h5 display"><a data-toggle="collapse" data-parent="#new-updates" href="assets/#updates-box" aria-expanded="true" aria-controls="updates-box">News Updates</a></h2><a data-toggle="collapse" data-parent="#new-updates" href="assets/#updates-box" aria-expanded="true" aria-controls="updates-box"><i class="fa fa-angle-down"></i></a>
</div>
<div id="updates-box" role="tabpanel" class="collapse show">
<ul class="news list-unstyled">
<!-- Item-->
<li class="d-flex justify-content-between">
<div class="left-col d-flex">
<div class="icon"><i class="icon-rss-feed"></i></div>
<div class="title"><strong>Lorem ipsum dolor sit amet.</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
</div>
</div>
<div class="right-col text-right">
<div class="update-date">24<span class="month">Jan</span></div>
</div>
</li>
<!-- Item-->
<li class="d-flex justify-content-between">
<div class="left-col d-flex">
<div class="icon"><i class="icon-rss-feed"></i></div>
<div class="title"><strong>Lorem ipsum dolor sit amet.</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
</div>
</div>
<div class="right-col text-right">
<div class="update-date">24<span class="month">Jan</span></div>
</div>
</li>
<!-- Item-->
<li class="d-flex justify-content-between">
<div class="left-col d-flex">
<div class="icon"><i class="icon-rss-feed"></i></div>
<div class="title"><strong>Lorem ipsum dolor sit amet.</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
</div>
</div>
<div class="right-col text-right">
<div class="update-date">24<span class="month">Jan</span></div>
</div>
</li>
<!-- Item-->
<li class="d-flex justify-content-between">
<div class="left-col d-flex">
<div class="icon"><i class="icon-rss-feed"></i></div>
<div class="title"><strong>Lorem ipsum dolor sit amet.</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
</div>
</div>
<div class="right-col text-right">
<div class="update-date">24<span class="month">Jan</span></div>
</div>
</li>
<!-- Item-->
<li class="d-flex justify-content-between">
<div class="left-col d-flex">
<div class="icon"><i class="icon-rss-feed"></i></div>
<div class="title"><strong>Lorem ipsum dolor sit amet.</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
</div>
</div>
<div class="right-col text-right">
<div class="update-date">24<span class="month">Jan</span></div>
</div>
</li>
<!-- Item-->
<li class="d-flex justify-content-between">
<div class="left-col d-flex">
<div class="icon"><i class="icon-rss-feed"></i></div>
<div class="title"><strong>Lorem ipsum dolor sit amet.</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
</div>
</div>
<div class="right-col text-right">
<div class="update-date">24<span class="month">Jan</span></div>
</div>
</li>
</ul>
</div>
</div>
<!-- Recent Updates Widget End-->
</div>
<div class="col-lg-4 col-md-6">
<!-- Daily Feed Widget-->
<div id="daily-feeds" class="card updates daily-feeds">
<div id="feeds-header" class="card-header d-flex justify-content-between align-items-center">
<h2 class="h5 display"><a data-toggle="collapse" data-parent="#daily-feeds" href="assets/#feeds-box" aria-expanded="true" aria-controls="feeds-box">Your daily Feeds </a></h2>
<div class="right-column">
<div class="badge badge-primary">10 messages</div><a data-toggle="collapse" data-parent="#daily-feeds" href="assets/#feeds-box" aria-expanded="true" aria-controls="feeds-box"><i class="fa fa-angle-down"></i></a>
</div>
</div>
<div id="feeds-box" role="tabpanel" class="collapse show">
<div class="feed-box">
<ul class="feed-elements list-unstyled">
<!-- List-->
<li class="clearfix">
<div class="feed d-flex justify-content-between">
<div class="feed-body d-flex justify-content-between"><a href="assets/#" class="feed-profile"><img src="assets/img/avatar-5.jpg" alt="person" class="img-fluid rounded-circle"></a>
<div class="content"><strong>Aria Smith</strong><small>Posted a new blog </small>
<div class="full-date"><small>Today 5:60 pm - 12.06.2014</small></div>
</div>
</div>
<div class="date"><small>5min ago</small></div>
</div>
</li>
<!-- List-->
<li class="clearfix">
<div class="feed d-flex justify-content-between">
<div class="feed-body d-flex justify-content-between"><a href="assets/#" class="feed-profile"><img src="assets/img/avatar-2.jpg" alt="person" class="img-fluid rounded-circle"></a>
<div class="content"><strong>Frank Williams</strong><small>Posted a new blog </small>
<div class="full-date"><small>Today 5:60 pm - 12.06.2014</small></div>
<div class="CTAs"><a href="assets/#" class="btn btn-xs btn-dark"><i class="fa fa-thumbs-up"> </i>Like</a><a href="assets/#" class="btn btn-xs btn-dark"><i class="fa fa-heart"> </i>Love</a></div>
</div>
</div>
<div class="date"><small>5min ago</small></div>
</div>
</li>
<!-- List-->
<li class="clearfix">
<div class="feed d-flex justify-content-between">
<div class="feed-body d-flex justify-content-between"><a href="assets/#" class="feed-profile"><img src="assets/img/avatar-3.jpg" alt="person" class="img-fluid rounded-circle"></a>
<div class="content"><strong>Ashley Wood</strong><small>Posted a new blog </small>
<div class="full-date"><small>Today 5:60 pm - 12.06.2014</small></div>
</div>
</div>
<div class="date"><small>5min ago</small></div>
</div>
</li>
<!-- List-->
<li class="clearfix">
<div class="feed d-flex justify-content-between">
<div class="feed-body d-flex justify-content-between"><a href="assets/#" class="feed-profile"><img src="assets/img/avatar-1.jpg" alt="person" class="img-fluid rounded-circle"></a>
<div class="content"><strong>Jason Doe</strong><small>Posted a new blog </small>
<div class="full-date"><small>Today 5:60 pm - 12.06.2014</small></div>
</div>
</div>
<div class="date"><small>5min ago</small></div>
</div>
<div class="message-card"> <small>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</small></div>
<div class="CTAs pull-right"><a href="assets/#" class="btn btn-xs btn-dark"><i class="fa fa-thumbs-up"> </i>Like</a></div>
</li>
<!-- List-->
<li class="clearfix">
<div class="feed d-flex justify-content-between">
<div class="feed-body d-flex justify-content-between"><a href="assets/#" class="feed-profile"><img src="assets/img/avatar-6.jpg" alt="person" class="img-fluid rounded-circle"></a>
<div class="content"><strong>Sam Martinez</strong><small>Posted a new blog </small>
<div class="full-date"><small>Today 5:60 pm - 12.06.2014</small></div>
</div>
</div>
<div class="date"><small>5min ago</small></div>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- Daily Feed Widget End-->
</div>
<div class="col-lg-4 col-md-6">
<!-- Recent Activities Widget -->
<div id="recent-activities-wrapper" class="card updates activities">
<div id="activites-header" class="card-header d-flex justify-content-between align-items-center">
<h2 class="h5 display"><a data-toggle="collapse" data-parent="#recent-activities-wrapper" href="assets/#activities-box" aria-expanded="true" aria-controls="activities-box">Recent Activities</a></h2><a data-toggle="collapse" data-parent="#recent-activities-wrapper" href="assets/#activities-box" aria-expanded="true" aria-controls="activities-box"><i class="fa fa-angle-down"></i></a>
</div>
<div id="activities-box" role="tabpanel" class="collapse show">
<ul class="activities list-unstyled">
<!-- Item-->
<li>
<div class="row">
<div class="col-4 date-holder text-right">
<div class="icon"><i class="icon-clock"></i></div>
<div class="date"> <span>6:00 am</span><span class="text-info">6 hours ago</span></div>
</div>
<div class="col-8 content"><strong>Meeting</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. </p>
</div>
</div>
</li>
<!-- Item-->
<li>
<div class="row">
<div class="col-4 date-holder text-right">
<div class="icon"><i class="icon-clock"></i></div>
<div class="date"> <span>6:00 am</span><span class="text-info">6 hours ago</span></div>
</div>
<div class="col-8 content"><strong>Meeting</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. </p>
</div>
</div>
</li>
<!-- Item-->
<li>
<div class="row">
<div class="col-4 date-holder text-right">
<div class="icon"><i class="icon-clock"></i></div>
<div class="date"> <span>6:00 am</span><span class="text-info">6 hours ago</span></div>
</div>
<div class="col-8 content"><strong>Meeting</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. </p>
</div>
</div>
</li>
<!-- Item-->
<li>
<div class="row">
<div class="col-4 date-holder text-right">
<div class="icon"><i class="icon-clock"></i></div>
<div class="date"> <span>6:00 am</span><span class="text-info">6 hours ago</span></div>
</div>
<div class="col-8 content"><strong>Meeting</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. </p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="main-footer">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<p>Soeng Souy Webdesign © 2020</p>
</div>
<div class="col-sm-6 text-right">
<p>Design by <a href="https://www.soengsouy.com/" class="external">Soeng Souy</a></p>
</div>
</div>
</div>
</footer>
</div>
<!-- JavaScript files-->
<script src="assets/vendor/jquery/jquery.min.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/grasp_mobile_progress_circle-1.0.0.min.js"></script>
<script src="assets/vendor/jquery.cookie/jquery.cookie.js"> </script>
<script src="assets/vendor/chart.js/Chart.min.js"></script>
<script src="assets/vendor/jquery-validation/jquery.validate.min.js"></script>
<script src="assets/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="assets/js/charts-home.js"></script>
<!-- Main File-->
<script src="assets/js/front.js"></script>
</body>
</html>
0 Comments
CAN FEEDBACK
Emoji