First of all, we'll install a fresh Laravel project directory using composer. A new directory will be created inside the htdocs directory of our local server with all the required files already generated.
composer create-project --prefer-dist Laravel/Laravel laraveldemo
Once the project is created, you can type localhost/laraveldemo/public in your browser and see the welcome file. If you didn't add /public in the url, you will see the project directory listing.
We can remove that /public/ uri form our project's base url to make a much simpler and cleaner url. For that, we need to move the .htaccess file from public directory to our project's root directory and rename the server.php file in the root directory to index.php. Then, you can type localhost/laraveldemo and the view file will get opened. Here, laraveldemo is our project's name. You can change it with the one you created in case you have choosen another name.
You can have a look at all the dashboard designs availabe online and download the one you liked. Then, we'll move further ahead.
Then, we'll download a dashboard design and place it's view files in a new folder naming it backend inside resources/views/ directory and change their extension from .html to .blade.php. Similarly, we'll place it's associated js, css, fonts and images files/folders in a new folder named backend inside the projects public directory.
We know that we can't browse those files without defining their routes. So, we'll open the web.php file located in routes directory and define routes to view them.
A route is already defined in the route by default that redirects us to the welcome.blade.php file if the project's base url request is sent. Here, we'll create our custom route to view the backend view files.
Route::get('/', function () {
return view('welcome');
});
Route::get('admin', function () {
return view('backend.index');
});
. DOT notation defines the index file is inside the backend folder of view directory. We'll modify this route at latter stage of the project but for now, you can use it and view your dashboard view files using it. Now, hit localhost/laraveldemo/admin and you'll see the dashboard index page in the browser.
Once you open the dashboard index page in the browser, you'll see none of the links for the associate files are working as we changed their locations. Now, we need to redefine their locations. First, let's rectify the css links.
<link rel="stylesheet" type="text/css" href="{{url('public/backend/css/bootstrap.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{url('public/backend/css/font-awesome.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{url('public/backend/css/ionicons.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{url('public/backend/css/menu.css')}}">
<link rel="stylesheet" type="text/css" href="{{url('public/backend/css/AdminLTE.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{url('public/backend/css/all-skins.min.css')}}">
The {{}} curly braces are the called the blade syntax that works same as the php echo command while url is a constant that defines the base url of the application. Now, let's redefine the js files.
<script type="text/javascript" src="{{url('public/backend/js/jquery.min.js')}}"></script>
<script type="text/javascript" src="{{url('public/backend/js/bootstrap.min.js')}}"></script>
<script type="text/javascript" src="{{url('public/backend/js/app.min.js')}}"></script>
<script type="text/javascript" src="{{url('public/backend/js/script.js')}}"></script>
We already learnt to separate the header and footer section from the view file and include it in the view files. Now, let's do it the Laravel way. We'll create a master layout file named master.blade.php and place the header and footer section along with the navigation section too. Along with that we'll remove all the sections from the dashboard page that we feel are unnecessary for us.
<!DOCTYPE html>
<html>
<head>
<title>Dashboard | Admin Panel</title>
<link rel="stylesheet" type="text/css" href="{{url('public/backend/css/bootstrap.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{url('public/backend/css/font-awesome.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{url('public/backend/css/ionicons.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{url('public/backend/css/menu.css')}}">
<link rel="stylesheet" type="text/css" href="{{url('public/backend/css/AdminLTE.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{url('public/backend/css/all-skins.min.css')}}">
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<header class="main-header">
<a href="{{url('/')}}" class="logo">
<span class="logo-lg"><b>Admin</b>LTE</span>
</a>
<nav class="navbar navbar-static-top">
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img src="{{url('public/backend/images/user.jpg')}}" class="user-image" alt="User Image">
<span class="hidden-xs">Super Admin</span>
</a>
<ul class="dropdown-menu">
<li class="user-header">
<img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
<p>
Super Admin - Web Developer
<small>Since Nov. 2010</small>
</p>
</li>
<li class="user-footer">
<div class="pull-left">
<a href="#" class="btn btn-default btn-flat">Profile</a>
</div>
<div class="pull-right">
<a href="#" class="btn btn-default btn-flat">Sign out</a>
</div>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</header>
<aside class="main-sidebar">
<section class="sidebar">
<div class="user-panel">
<div class="pull-left image">
<img src="{{url('public/backend/images/user.jpg')}}" class="img-circle" alt="User Image">
</div>
<div class="pull-left info">
<p>Super Admin</p>
<a href="#"><i class="fa fa-circle text-success"></i> Online</a>
</div>
</div>
<ul class="sidebar-menu">
<li class="header">MAIN NAVIGATION</li>
<li class="active treeview">
<a href="#">
<i class="fa fa-dashboard"></i> <span>Dashboard</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-files-o"></i>
<span>Forms</span>
<span class="pull-right-container">
<span class="label label-primary pull-right">4</span>
</span>
</a>
<ul class="treeview-menu">
<li><a href="#"><i class="fa fa-circle-o"></i>Form 1</a></li>
<li><a href="#"><i class="fa fa-circle-o"></i> Form 2</a></li>
</ul>
</li>
</ul>
</section>
</aside>
<div class="content-wrapper">
<section class="content-header">
<h1>
Dashboard
<small>Control panel</small>
</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
<li class="active">Dashboard</li>
</ol>
</section>
<section class="content">
@yield('content')
</section>
</div>
<footer class="main-footer">
<div class="pull-right hidden-xs">
<b>Version</b> 2.3.7
</div>
<strong>Copyright © 2014-2016 <a href="#">Webtrickshome</a>.</strong> All rights reserved.
</footer>
</div>
<script type="text/javascript" src="{{url('public/backend/js/jquery.min.js')}}"></script>
<script type="text/javascript" src="{{url('public/backend/js/bootstrap.min.js')}}"></script>
<script type="text/javascript" src="{{url('public/backend/js/app.min.js')}}"></script>
<script type="text/javascript" src="{{url('public/backend/js/script.js')}}"></script>
</body>
</html>
@yield('content') will be the section where other files will placed while being displayed in the browser.
Now, let's place the remaining contents of index.blade.php under section content so that it includes master layout while being displayed. Let's keep it simple.
@extends('backend.master')
@section('content')
<div class="row text-center">
<h1>Welcome to Laravel dashboard</h1>
</div>
@stop
@extends('backend.master') extends the master layout page. @section('content') defines the contents inside this section is included in the @yield('content') whereas @stop defines the end of the secction to be included in the master layout page.
Now the dashboard is set up, we can create pages to insert, display, delete and update data from database but before that we need to create a database and define in in .env file as well.
create DATABASE laraveldemo
Go to localhost/phpmyadmin and click on SQL option on top and enter the command create DATABASE laraveldemo to create a new database in that name.
DB_DATABASE=laraveldemo DB_USERNAME=root DB_PASSWORD=
We need to define the database name in .env file and define the username and password for the database as well. The default username for database is root and password empty.
Leave a comment