Setelah melakukan instalasi laravel tentu kita sudah mendapatkan template bawaan dari laravel namun bagaimana jika kita ingin menggunakan template lain ? diluar yang disediakan oleh laravel?
Pasti anda sering atau pernah menggunakan template untuk mempercepat proses development web kita, apakah itu menggunakan template yang gratis maupun yang berbayar.
Laravel sudah menyediakan layout standard yang dapat kita gunakan untuk mengembangkan aplikasi web kita namun dikarenakan terlalu standardnya maka banyak developers web yang memilih menggunakan template lain.
Untuk yang versi gratis salah satu yang paling banyak digunakan adalah tempate adminlte bagi anda yang ingin menggunakan template adminlte silahkan download disini, namun banyak juga yang menggunakan templates yang berbayar seperti yang banyak di jual di website seperti wrapbootstrap.com ataupun dari themeforest.net.
lalu bagaimana cara integrasi templatenya ? sebenarnya sama saja dengan cara menggunakan layout bawaan dari laravel agar lebih jelasnya mari kita coba implementasikan. Kali ini saya akan melakukan integrasi dengan template inspinia.
Berikut langkah mudah integrasi
template inspinia dengan laravel
Buat sebuah file di folder layouts dan berinama app2.blade.php file ini berfungsi sebagai layouts dari templates yang akan kita gunakan.
Lalu anda copykan seluruh isi dari file index.html yang dapat anda temukan di template inspinia Sbb :
<!DOCTYPE html>
<html>
@include('layouts.head')
<body>
<div id="wrapper">
<nav class="navbar-default navbar-static-side" role="navigation">
<div class="sidebar-collapse">
@include('layouts.mainmenu') </div>
</nav> <div id="page-wrapper" class="gray-bg">
<div class="row border-bottom">
@include('layouts.secondmenu')
</div>
<div class="wrapper wrapper-content">
@yield('content') @include('layouts.footer') </div> <!-- Mainly scripts -->
<script src="{{ mix ('js/template.js') }}"> </script></body>
</html>
Markup
Copy
Di file di atas ada beberapa file yang kita include maka kita harus siapkan file-file yang di include antara lain sbb :
- head.blade.php
- mainmenu.blade.php
- secondmenu.blade.php
- footer.blade.php
head.blade.php berfungsi untuk menampung section Head buat file head.blade.php dan simpan di dalam folder layouts dan berikut coding untuk file head.blade.php :
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>INSPINIA | Dashboard v.2</title>
<link href="{{ mix('css/template.css') }}" rel="stylesheet">
<link href="{{ url ('inspinia/font-awesome/css/font-awesome.css') }}" rel="stylesheet">
<link href="{{ url ('inspinia/css/style.css') }}" rel="stylesheet">
</head>Markup
Copy
Di atas ada beberapa file css yang saya compile dengan laravel mix kedepannya saya akan jelaskan keuntungan menggunakan Laravel MIX, Setelah selesai membuat file head.blade.php maka kita lanjutkan membuat file mainmenu.blade.php dan simpan juga file tersebut di dalam folder layouts dan berikut coding isi file mainmenu.blade.php
<ul class="nav metismenu" id="side-menu">
<li class="nav-header">
<div class="dropdown profile-element">
<img alt="image" class="rounded-circle" src="{{ url ('inspinia/img/profile_small.jpg') }}"/>
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
<span class="block m-t-xs font-bold">David Williams</span>
<span class="text-muted text-xs block">Art Director <b class="caret"></b></span>
</a>
<ul class="dropdown-menu animated fadeInRight m-t-xs">
<li><a class="dropdown-item" href="profile.html">Profile</a></li>
<li><a class="dropdown-item" href="contacts.html">Contacts</a></li>
<li><a class="dropdown-item" href="mailbox.html">Mailbox</a></li>
<li class="dropdown-divider"></li>
<li><a class="dropdown-item" href="login.html">Logout</a></li>
</ul>
</div>
<div class="logo-element">
IN+
</div>
</li>
<li class="active">
<a href="index.html"><i class="fa fa-th-large"></i> <span class="nav-label">Dashboards</span> <span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li><a href="index.html">Dashboard v.1</a></li>
<li class="active"><a href="dashboard_2.html">Dashboard v.2</a></li>
<li><a href="dashboard_3.html">Dashboard v.3</a></li>
<li><a href="dashboard_4_1.html">Dashboard v.4</a></li>
<li><a href="dashboard_5.html">Dashboard v.5 </a></li>
</ul>
</li>
<li>
<a href="layouts.html"><i class="fa fa-diamond"></i> <span class="nav-label">Layouts</span></a>
</li>
<li>
<a href="#"><i class="fa fa-bar-chart-o"></i> <span class="nav-label">Graphs</span><span class="fa arrow"></span></a>
<ul class="nav nav-second-level collapse">
<li><a href="graph_flot.html">Flot Charts</a></li>
<li><a href="graph_morris.html">Morris.js Charts</a></li>
<li><a href="graph_rickshaw.html">Rickshaw Charts</a></li>
<li><a href="graph_chartjs.html">Chart.js</a></li>
<li><a href="graph_chartist.html">Chartist</a></li>
<li><a href="c3.html">c3 charts</a></li>
<li><a href="graph_peity.html">Peity Charts</a></li>
<li><a href="graph_sparkline.html">Sparkline Charts</a></li>
</ul>
</li>
<li>
<a href="mailbox.html"><i class="fa fa-envelope"></i> <span class="nav-label">Mailbox </span><span class="label label-warning float-right">16/24</span></a>
<ul class="nav nav-second-level collapse">
<li><a href="mailbox.html">Inbox</a></li>
<li><a href="mail_detail.html">Email view</a></li>
<li><a href="mail_compose.html">Compose email</a></li>
<li><a href="email_template.html">Email templates</a></li>
</ul>
</li>
<li>
<a href="metrics.html"><i class="fa fa-pie-chart"></i> <span class="nav-label">Metrics</span> </a>
</li>
<li>
<a href="widgets.html"><i class="fa fa-flask"></i> <span class="nav-label">Widgets</span></a>
</li>
<li>
<a href="#"><i class="fa fa-edit"></i> <span class="nav-label">Forms</span><span class="fa arrow"></span></a>
<ul class="nav nav-second-level collapse">
<li><a href="form_basic.html">Basic form</a></li>
<li><a href="form_advanced.html">Advanced Plugins</a></li>
<li><a href="form_wizard.html">Wizard</a></li>
<li><a href="form_file_upload.html">File Upload</a></li>
<li><a href="form_editors.html">Text Editor</a></li>
<li><a href="form_autocomplete.html">Autocomplete</a></li>
<li><a href="form_markdown.html">Markdown</a></li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-desktop"></i> <span class="nav-label">App Views</span> <span class="float-right label label-primary">SPECIAL</span></a>
<ul class="nav nav-second-level collapse">
<li><a href="contacts.html">Contacts</a></li>
<li><a href="profile.html">Profile</a></li>
<li><a href="profile_2.html">Profile v.2</a></li>
<li><a href="contacts_2.html">Contacts v.2</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="project_detail.html">Project detail</a></li>
<li><a href="activity_stream.html">Activity stream</a></li>
<li><a href="teams_board.html">Teams board</a></li>
<li><a href="social_feed.html">Social feed</a></li>
<li><a href="clients.html">Clients</a></li>
<li><a href="full_height.html">Outlook view</a></li>
<li><a href="vote_list.html">Vote list</a></li>
<li><a href="file_manager.html">File manager</a></li>
<li><a href="calendar.html">Calendar</a></li>
<li><a href="issue_tracker.html">Issue tracker</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="article.html">Article</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="timeline.html">Timeline</a></li>
<li><a href="pin_board.html">Pin board</a></li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-files-o"></i> <span class="nav-label">Other Pages</span><span class="fa arrow"></span></a>
<ul class="nav nav-second-level collapse">
<li><a href="search_results.html">Search results</a></li>
<li><a href="lockscreen.html">Lockscreen</a></li>
<li><a href="invoice.html">Invoice</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="login_two_columns.html">Login v.2</a></li>
<li><a href="forgot_password.html">Forget password</a></li>
<li><a href="register.html">Register</a></li>
<li><a href="404.html">404 Page</a></li>
<li><a href="500.html">500 Page</a></li>
<li><a href="empty_page.html">Empty page</a></li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-globe"></i> <span class="nav-label">Miscellaneous</span><span class="label label-info float-right">NEW</span></a>
<ul class="nav nav-second-level collapse">
<li><a href="toast_notifications.html">Notification</a></li>
<li><a href="nestable_list.html">Nestable list</a></li>
<li><a href="agile_board.html">Agile board</a></li>
<li><a href="timeline_2.html">Timeline v.2</a></li>
<li><a href="diff.html">Diff</a></li>
<li><a href="pdf_viewer.html">PDF viewer</a></li>
<li><a href="i18support.html">i18 support</a></li>
<li><a href="sweetalert.html">Sweet alert</a></li>
<li><a href="idle_timer.html">Idle timer</a></li>
<li><a href="truncate.html">Truncate</a></li>
<li><a href="password_meter.html">Password meter</a></li>
<li><a href="spinners.html">Spinners</a></li>
<li><a href="spinners_usage.html">Spinners usage</a></li>
<li><a href="tinycon.html">Live favicon</a></li>
<li><a href="google_maps.html">Google maps</a></li>
<li><a href="datamaps.html">Datamaps</a></li>
<li><a href="social_buttons.html">Social buttons</a></li>
<li><a href="code_editor.html">Code editor</a></li>
<li><a href="modal_window.html">Modal window</a></li>
<li><a href="clipboard.html">Clipboard</a></li>
<li><a href="text_spinners.html">Text spinners</a></li>
<li><a href="forum_main.html">Forum view</a></li>
<li><a href="validation.html">Validation</a></li>
<li><a href="tree_view.html">Tree view</a></li>
<li><a href="loading_buttons.html">Loading buttons</a></li>
<li><a href="chat_view.html">Chat view</a></li>
<li><a href="masonry.html">Masonry</a></li>
<li><a href="tour.html">Tour</a></li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-flask"></i> <span class="nav-label">UI Elements</span><span class="fa arrow"></span></a>
<ul class="nav nav-second-level collapse">
<li><a href="typography.html">Typography</a></li>
<li><a href="icons.html">Icons</a></li>
<li><a href="draggable_panels.html">Draggable Panels</a></li> <li><a href="resizeable_panels.html">Resizeable Panels</a></li>
<li><a href="buttons.html">Buttons</a></li>
<li><a href="video.html">Video</a></li>
<li><a href="tabs_panels.html">Panels</a></li>
<li><a href="tabs.html">Tabs</a></li>
<li><a href="notifications.html">Notifications & Tooltips</a></li>
<li><a href="helper_classes.html">Helper css classes</a></li>
<li><a href="badges_labels.html">Badges, Labels, Progress</a></li>
</ul>
</li> <li>
<a href="grid_options.html"><i class="fa fa-laptop"></i> <span class="nav-label">Grid options</span></a>
</li>
<li>
<a href="#"><i class="fa fa-table"></i> <span class="nav-label">Tables</span><span class="fa arrow"></span></a>
<ul class="nav nav-second-level collapse">
<li><a href="table_basic.html">Static Tables</a></li>
<li><a href="table_data_tables.html">Data Tables</a></li>
<li><a href="table_foo_table.html">Foo Tables</a></li> </ul>
</li>
<li>
<a href="#"><i class="fa fa-shopping-cart"></i> <span class="nav-label">E-commerce</span><span class="fa arrow"></span></a>
<ul class="nav nav-second-level collapse">
<li><a href="ecommerce_products_grid.html">Products grid</a></li>
<li><a href="ecommerce_product_list.html">Products list</a></li>
<li><a href="ecommerce_product.html">Product edit</a></li>
<li><a href="ecommerce_product_detail.html">Product detail</a></li>
<li><a href="ecommerce-cart.html">Cart</a></li>
<li><a href="ecommerce-orders.html">Orders</a></li>
<li><a href="ecommerce_payments.html">Credit Card form</a></li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-picture-o"></i> <span class="nav-label">Gallery</span><span class="fa arrow"></span></a>
<ul class="nav nav-second-level collapse">
<li><a href="basic_gallery.html">Lightbox Gallery</a></li>
<li><a href="slick_carousel.html">Slick Carousel</a></li>
<li><a href="carousel.html">Bootstrap Carousel</a></li> </ul>
</li>
<li>
<a href="#"><i class="fa fa-sitemap"></i> <span class="nav-label">Menu Levels </span><span class="fa arrow"></span></a>
<ul class="nav nav-second-level collapse">
<li>
<a href="#">Third Level <span class="fa arrow"></span></a>
<ul class="nav nav-third-level">
<li>
<a href="#">Third Level Item</a>
</li>
<li>
<a href="#">Third Level Item</a>
</li>
<li>
<a href="#">Third Level Item</a>
</li> </ul>
</li>
<li><a href="#">Second Level Item</a></li>
<li>
<a href="#">Second Level Item</a></li>
<li>
<a href="#">Second Level Item</a></li>
</ul>
</li>
<li>
<a href="css_animation.html"><i class="fa fa-magic"></i> <span class="nav-label">CSS Animations </span><span class="label label-info float-right">62</span></a>
</li>
<li class="landing_link">
<a target="_blank" href="landing.html"><i class="fa fa-star"></i> <span class="nav-label">Landing Page</span> <span class="label label-warning float-right">NEW</span></a>
</li>
<li class="special_link">
<a href="package.html"><i class="fa fa-database"></i> <span class="nav-label">Package</span></a>
</li>
</ul>
Markup
Copy
Setelah selesai membuat file mainmenu.blade.php kita lanjutkan untuk membuat file secondmenu.blade.php dan untuk file ini juga di simpan di dalam folder layouts seperti file-file sebelumnya dan berikut isi dari file secondmenu.blade.php
<nav class="navbar navbar-static-top white-bg" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i class="fa fa-bars"></i> </a>
<form role="search" class="navbar-form-custom" action="search_results.html">
<div class="form-group">
<input type="text" placeholder="Search for something..." class="form-control" name="top-search" id="top-search">
</div>
</form>
</div>
<ul class="nav navbar-top-links navbar-right">
<li>
<span class="m-r-sm text-muted welcome-message">Welcome to INSPINIA+ Admin Theme.</span>
</li>
<li class="dropdown">
<a class="dropdown-toggle count-info" data-toggle="dropdown" href="#">
<i class="fa fa-envelope"></i> <span class="label label-warning">16</span>
</a>
<ul class="dropdown-menu dropdown-messages">
<li>
<div class="dropdown-messages-box">
<a class="dropdown-item float-left" href="profile.html">
<img alt="image" class="rounded-circle" src="{{ url ('inspinia/img/a7.jpg') }}">
</a>
<div>
<small class="float-right">46h ago</small>
<strong>Mike Loreipsum</strong> started following <strong>Monica Smith</strong>. <br>
<small class="text-muted">3 days ago at 7:58 pm - 10.06.2014</small>
</div>
</div>
</li>
<li class="dropdown-divider"></li>
<li>
<div class="dropdown-messages-box">
<a class="dropdown-item float-left" href="profile.html">
<img alt="image" class="rounded-circle" src="{{ url ('inspinia/img/a4.jpg') }}">
</a>
<div>
<small class="float-right text-navy">5h ago</small>
<strong>Chris Johnatan Overtunk</strong> started following <strong>Monica Smith</strong>. <br>
<small class="text-muted">Yesterday 1:21 pm - 11.06.2014</small>
</div>
</div>
</li>
<li class="dropdown-divider"></li>
<li>
<div class="dropdown-messages-box">
<a class="dropdown-item float-left" href="profile.html">
<img alt="image" class="rounded-circle" src="{{ url ('inspinia/img/profile.jpg') }}">
</a>
<div>
<small class="float-right">23h ago</small>
<strong>Monica Smith</strong> love <strong>Kim Smith</strong>. <br>
<small class="text-muted">2 days ago at 2:30 am - 11.06.2014</small>
</div>
</div>
</li>
<li class="dropdown-divider"></li>
<li>
<div class="text-center link-block">
<a href="mailbox.html" class="dropdown-item">
<i class="fa fa-envelope"></i> <strong>Read All Messages</strong>
</a>
</div>
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle count-info" data-toggle="dropdown" href="#">
<i class="fa fa-bell"></i> <span class="label label-primary">8</span>
</a>
<ul class="dropdown-menu dropdown-alerts">
<li>
<a href="mailbox.html" class="dropdown-item">
<div>
<i class="fa fa-envelope fa-fw"></i> You have 16 messages
<span class="float-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="dropdown-divider"></li>
<li>
<a href="profile.html" class="dropdown-item">
<div>
<i class="fa fa-twitter fa-fw"></i> 3 New Followers
<span class="float-right text-muted small">12 minutes ago</span>
</div>
</a>
</li>
<li class="dropdown-divider"></li>
<li>
<a href="grid_options.html" class="dropdown-item">
<div>
<i class="fa fa-upload fa-fw"></i> Server Rebooted
<span class="float-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="dropdown-divider"></li>
<li>
<div class="text-center link-block">
<a href="notifications.html" class="dropdown-item">
<strong>See All Alerts</strong>
<i class="fa fa-angle-right"></i>
</a>
</div>
</li>
</ul>
</li>
<li>
<a href="login.html">
<i class="fa fa-sign-out"></i> Log out
</a>
</li> </ul> </nav>
Markup
Copy
Setelah selesai membuat file secondmenu.blade.php maka kita lanjutkan ke tahap terakhir yaitu membuat file footer.blade.php dan simpan juga di folder yang sama yaitu di folder layouts berikut isi dari file footer.blade.php
<div class="footer fixed">
<div class="float-right">
10GB of <strong>250GB</strong> Free.
</div>
<div>
<strong>Copyright</strong> Example Company © 2014-2018
</div>
</div>None
Copy
Setelah selesai kita membuat file footer.blade.php maka kita dapat langsung menguji tempalates kita apakah sudah bisa di gunakan ? yuk kita cobain sekarang caranya kita buat sebuah folder dan di simpan di dalam folder resources > views berinama folder tersbut dengan nama Item dan di dalam folder Item kita buat sebuah file dengan nama add.blade.php dan untuk isi dari file add.blade.php adalah sbb :
@extends('layouts.app2')@section('content')
<div class="row">
<div class="col-lg-3">
<div class="ibox ">
<div class="ibox-title">
<div class="ibox-tools">
<span class="label label-success float-right">Monthly</span>
</div>
<h5>Income</h5>
</div>
<div class="ibox-content">
<h1 class="no-margins">40 886,200</h1>
<div class="stat-percent font-bold text-success">98% <i class="fa fa-bolt"></i></div>
<small>Total income</small>
</div>
</div>
</div> <div class="col-lg-3">
<div class="ibox ">
<div class="ibox-title">
<div class="ibox-tools">
<span class="label label-success float-right">Monthly</span>
</div>
<h5>Income</h5>
</div>
<div class="ibox-content">
<h1 class="no-margins">40 886,200</h1>
<div class="stat-percent font-bold text-success">98% <i class="fa fa-bolt"></i></div>
<small>Total income</small>
</div>
</div>
</div> <div class="col-lg-3">
<div class="ibox ">
<div class="ibox-title">
<div class="ibox-tools">
<span class="label label-success float-right">Monthly</span>
</div>
<h5>Income</h5>
</div>
<div class="ibox-content">
<h1 class="no-margins">40 886,200</h1>
<div class="stat-percent font-bold text-success">98% <i class="fa fa-bolt"></i></div>
<small>Total income</small>
</div>
</div>
</div> <div class="col-lg-3">
<div class="ibox ">
<div class="ibox-title">
<div class="ibox-tools">
<span class="label label-success float-right">Monthly</span>
</div>
<h5>Income</h5>
</div>
<div class="ibox-content">
<h1 class="no-margins">40 886,200</h1>
<div class="stat-percent font-bold text-success">98% <i class="fa fa-bolt"></i></div>
<small>Total income</small>
</div>
</div>
</div>
</div>@endsection
Markup
Copy
agar dapat kita coba di browser jangan lupa tambahkan routes nya di file web.php sbb :
Route::get('/item/add')->name('item.add')
->uses('ItemController@add');None
Copy
Dan berikut hasil dari template kita :
Kesimpulan :
Laravel memberikan kita kemudahan dalam melakukan integrasi dengan tempalate lain di luar template default yang disediakan oleh laravel, dengan kita dapat menggunakan template lain maka proses development aplikasi kita akan jadi lebih cepat.
Bagaimana apakah anda sudah mulai integrasi dengan template lain di project anda ?
Pesan saya jangan gunakan template bajakan ya hehehe…!!!
Bagikan tulisan ini agar lebih banyak yang mendapatkan manfaatnya
Silahkan Mengunjungi blog pribadi saya di www.adinata.id dan dapatkan banyak tutorial dan trick web programming di blog saya www.adinata.id
Salam,
Adinata
