How to Integrate Laravel With AdminLTE Bootstrap Dashboard

Larn Tech | May 4, 2018 | Web | No Comments

In this tutorial we shall learn how to integrate Laravel with AdminLTE Bootstrap Dashboard, AdminLTE Bootstrap Dashboard is an Open Source admin dashboard and control panel which provides a range of responsive, reusable, and commonly used components.
We shall create a new laravel project, integrate AdminLTE in our laravel project and display the demo page showing AdminLTE dashboard.

let’s get started with coding

Contents

1 Creating new Laravel Project
2 Downloading AdminLTE dashboard
3 Intergrating AdminLTE with Laravel
4 Loading AdminLTE css and js in our Laravel Project
5 Demo Page to show AdminLTE
6 Create a route to load our demo page
7 Share this:
8 Related

Creating new Laravel Project

Open your command prompt and navigate to the directory where you want place your project.
Create your project by typing.

laravel new app

1	laravel new app

app is the name of your project.
Alternatively you can use composer to createnew laravel project by running the following in command prompt.


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

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

To test your laravel project. Run the following in your command prompt.

php artisan serve

1	php artisan serve

Serving New Laravel Project

The next thing to do is to set authentication key.
Type the following.


php artisan key:generate

php artisan key:generate

Downloading AdminLTE dashboard

Click here to download the AdminLTE Dashboard.
When the download is complete unzip the folder.

AdminLTE directory Struture

Intergrating AdminLTE with Laravel

In your laravel project create a new folder under public and name it assets. app => public => assets.
Inside the the assets folder create two other folder namely css and js.

Copy the following css and js files from you AdminLTE to your Laravel new created css and js folders.
AdminLTE/bootstrap/css/bootstrap.min.css => laravel/public/assets/css/
AdminLTE/dist/css/AdminLTE.min.css => laravel/public/assets/css/
AdminLTE/dist/css/skins/_all-skins.min.css => laravel/public/assets/css/

AdminLTE/plugins/jQuery/jquery-2.2.3.min.js => laravel/public/assets/js/
AdminLTE/bootstrap/js/bootstrap.min.js => laravel/public/assets/js/
AdminLTE/dist/js/app.min.js => laravel/public/assets/js/

Loading AdminLTE css and js in our Laravel Project

Create a new file under resources/views and name it master.blade.php
This file loads all the css and js.
Copy and Paste the code below in your master.blade.php





<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AdminLTE 2 | Dashboard</title>
  <!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!--loading css -->
 	 	<link rel="stylesheet" type="text/css" media="screen" href="{{asset ('assets/css/bootstrap.min.css')}}">
 	 	<link rel="stylesheet" type="text/css" media="screen" href="{{asset ('assets/css/AdminLTE.min.css')}}">
 	 	<link rel="stylesheet" type="text/css" media="screen" href="{{asset ('assets/css/_all-skins.min.css')}}">



<!--we yield our content here -->
    @yield ('content')


<!-- loading css -->
<script src="{{asset ('assets/js/jquery-2.2.3.min.js')}}"></script>
<script src="{{asset ('assets/js/bootstrap.min.js')}}"></script>
<script src="{{asset ('assets/js/app.min.js')}}"></script>

<title>AdminLTE 2 | Dashboard</title>

@yield ('content')

Demo Page to show AdminLTE

Create a new file in your views name it demo.blade.php.
Copy and paste the code below.


@extends('master')
@section('content')


<div class="wrapper">

  <header class="main-header">
    <!-- Logo -->
    <a href="#" class="logo">
      <!-- mini logo for sidebar mini 50x50 pixels -->
      <span class="logo-mini"><b>A</b>LT</span>
      <!-- logo for regular state and mobile devices -->
      <span class="logo-lg"><b>Admin</b>LTE</span>
    </a>
    <!-- Header Navbar: style can be found in header.less -->
    <nav class="navbar navbar-static-top">
      <!-- Sidebar toggle button-->
      <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
        <span class="sr-only">Toggle navigation</span>
      </a>



<div class="navbar-custom-menu">


<ul class="nav navbar-nav">
        
         <!-- User Account: style can be found in dropdown.less -->


 	<li class="dropdown user user-menu">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <span class="hidden-xs">Alexander Pierce</span>
            </a>
</li>


</ul>


</div>


    </nav>
  </header>
  <!-- Left side column. contains the logo and sidebar -->
  <aside class="main-sidebar">
    <!-- sidebar: style can be found in sidebar.less -->
    <section class="sidebar">
      <!-- Sidebar user panel -->


<div class="user-panel">


<div class="pull-left image">
          <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
</div>




<div class="pull-left info">
          
Alexander Pierce
          <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
</div>


</div>


      <!-- search form -->
      <form action="#" method="get" class="sidebar-form">


<div class="input-group">
          <input name="q" class="form-control" placeholder="Search..." type="text">
              <span class="input-group-btn">
                <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
                </button>
              </span>
</div>


      </form>
      <!-- sidebar menu: : style can be found in sidebar.less -->


<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>


</ul>


    </section>
    <!-- /.sidebar -->
  </aside>

  <!-- Content Wrapper. Contains page content -->


<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <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>

    <!-- Main content -->
    <section class="content">
      <!-- Small boxes (Stat box) -->


<div class="row">


<div class="col-lg-3 col-xs-6">
          <!-- small box -->


<div class="small-box bg-aqua">


<div class="inner">


<h3>150</h3>



              
New Orders
</div>




<div class="icon">
              <i class="ion ion-bag"></i>
</div>


            <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
</div>


</div>


        <!-- ./col -->


<div class="col-lg-3 col-xs-6">
          <!-- small box -->


<div class="small-box bg-green">


<div class="inner">


<h3>53<sup style="font-size: 20px">%</sup></h3>



              
Bounce Rate
</div>




<div class="icon">
              <i class="ion ion-stats-bars"></i>
</div>


            <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
</div>


</div>


        <!-- ./col -->


<div class="col-lg-3 col-xs-6">
          <!-- small box -->


<div class="small-box bg-yellow">


<div class="inner">


<h3>44</h3>



              
User Registrations
</div>




<div class="icon">
              <i class="ion ion-person-add"></i>
</div>


            <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
</div>


</div>


        <!-- ./col -->


<div class="col-lg-3 col-xs-6">
          <!-- small box -->


<div class="small-box bg-red">


<div class="inner">


<h3>65</h3>



              
Unique Visitors
</div>




<div class="icon">
              <i class="ion ion-pie-graph"></i>
</div>


            <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
</div>


</div>


        <!-- ./col -->
</div>


      <!-- /.row -->
        </section>
        <!-- /.Left col -->
      
        <!-- right col -->
</div>


      <!-- /.row (main row) -->

    
    <!-- /.content -->
</div>


<!-- ./wrapper -->
@endsection

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

@extends('master')

@section('content')

<span class="logo-lg"><b>Admin</b>LTE</span>

</a>

<span class="sr-only">Toggle navigation</span>

</a>

<span class="hidden-xs">Alexander Pierce</span>

</a>

</li>

</ul>

</div>

</nav>

</header>

</div>

Alexander Pierce

<a href="#"><i class="fa fa-circle text-success"></i> Online</a>

</div>

</button>

</span>

</div>

</form>

<li class="header">MAIN NAVIGATION</li>

<i class="fa fa-dashboard"></i> <span>Dashboard</span>

</span>

</a>

</li>

</ul>

</section>

</aside>

<h1>

Dashboard

<small>Control panel</small>

</h1>

<li class="active">Dashboard</li>

</ol>

</section>

New Orders

</div>

</div>

</div>

Bounce Rate

</div>

</div>

</div>

User Registrations

</div>

</div>

</div>

Unique Visitors

</div>

</div>

</div>

</div>

</section>

</div>

</div>

@endsection

Create a route to load our demo page

Open web.php locate under routes folder
Copy and Paste the code below.


Route::get('demo', function () {
    return view('demo');
});

Route::get('demo', function () {

return view('demo');

});

That’s all let’s now run our project.
In your command prompt navigate to your project and type

php artisan serve

1	php artisan serve

Serving New Laravel Project

Open your browser and type localhost:8000/demo and you will see the following output.

Integrating Laravel With AdminLTE Bootstrap Dashboard

To download the source code click here
If you have need more help or have question do comment below.

Post Views: 1,292

Tags:AdminLTE tutorial, Intergrate Laravel with AdminLTE, intergrating laravel with bootstrap, Laravel Tutorial, Laravel with bootstrap

LarnTech

How to Integrate Laravel With AdminLTE Bootstrap Dashboard

Creating new Laravel Project

Downloading AdminLTE dashboard

Intergrating AdminLTE with Laravel

Loading AdminLTE css and js in our Laravel Project

Demo Page to show AdminLTE

Create a route to load our demo page

Related

About The Author

Larntech

Creating new Laravel Project

Downloading AdminLTE dashboard

Intergrating AdminLTE with Laravel

Loading AdminLTE css and js in our Laravel Project

Demo Page to show AdminLTE

Create a route to load our demo page

Share this:

Related

Related Posts

About The Author

Larntech