Tutorial LARAVEL 9 | 2. Templating

Templating Laravel 9 - Selamat datang di website CopyPasteKode, pada tutorial kali ini kita akan belajar bagaimana cara membuat templating di LARAVEL dan tutorial kali merupakan lanjutan series LARAVEL 9 kita, yang sebelumnya kita telah berhasil menginstall LARAVEL pada perangkat kita.

Bagi teman-teman yang ingin mengikuti tutorial kali ini, teman-teman wajib menginstall atau telah mempunyai Project LARAVEL 9 di perangkat yang teman-teman gunakan saat ini. Jika teman-teman belum menginstall Project LARAVEL 9, saya sarankan teman-teman untuk mengikuti tutorial sebelumnya Instalasi LARAVEL

Disini saya menggunakan Template AdminLTE v.3 (bootstrap 4)

Persyaratan :

Install LARAVEL 9
Download Templates Admin LTE disini

Sampai disini saya anggap teman-teman telah mempunyai atau telah menginstall Project LARAVEL 9 dan telah mendownload template AdminLTE pada perangkat yang digunakan.

Baiklah, tanpa perlu berlama-lama lagi, langsung saja kita mulai tutorial kita ^^

Langkah-langkah Membuat Templating :

Mengekstrak Templates AdminLTE
Menyalin / mengambil Folder dist dan plugins pada Folder AdminLTE yang telah di ekstrak
Membuat Controllers Dashboard
Membuat Route untuk Controllers Dashboard
Membuat folder templates di dalam folder resources/views
Membuat views dashboard

Langsung saja kita mulai dengan langkah yang pertama

Mengekstrak Template AdminLTE

Jika teman-teman sudah mendownload template AdminLTE, teman-teman buka folder download lalu cari file AdminLTE yang telah didownload sebelumnya seperti gambar dibawah :

Kemudian double klik pada file AdminLTE diatas, sehingga menjadi seperti berikut :

Menyalin / mengambil Folder dist dan plugins

Langkah selanjutnya adalah Menyalin / mengambil folder dist dan plugins didalam folder AdminLTE buka folder AdminLTE yang telah di ekstrak kemudian temukan folder bernama dist dan plugins seperti contoh gambar dibawah :

lalu copy dan paste kan folder tersebut ke dalam folder public pada project LARAVEL kita, seperti contoh gambar dibawah :

Membuat Controllers Dashboard

Buka project LARAVEL pada code editor yang teman-teman gunakan disini saya menggunakan code editor Visual Studio Code atau VS Code, seperti contoh gambar dibawah :

lalu buka terminal, disini saya menggunakan terminal vs code cukup dengan menekan Ctrl+` , maka terminal vs code akan otomatis terbuka, kemudian ketikan perintah berikut :

php artisan make:controller Dashboard

keterangan :

php artisan make:controller Dashboard adalah perintah untuk membuat Controllers dengan nama Dashboard didalam folder app/Http/Controllers

Tutup Terminal ketika proses pembuatan Controllers Dashboard telah selesai, kemudian buka folder app/Http/Controllers dan lihat apakah Controllers dengan nama Dashboard.php sudah ada atau belum, jika belum berarti ada kesalahan atau teman-teman melewatkan beberapa langkah diatas dan jika Controllers Dashboard.php sudah ada, teman-teman buka Dashboard.php

lalu tambahkan method index sebagai berikut :

public function index()
{
$data = array(
'title' => 'Dahsboard',
);
return view('dashboard', $data);
}

sehingga Dashboard.php menjadi seperti berikut :

Membuat Route untuk Controllers Dashboard

buka folder routes, klik pada file web.php kemudian tambahkan Route seperti berikut :

```
use App\Http\Controllers\Dashboard;
```
Route::get('/dashboard', [Dashboard::class, 'index'])->name('dashboard');

Membuat folder templates di dalam folder resources/views

Buka folder resources/views kemudian tambahkan folder baru dengan nama templates, lalu buat beberapa file baru sebagai berikut :

index.blade.php
sidebar.blade.php
topbar.blade.php

buka file index.blade.php kemudian tambahkan script berikut

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ $title }}</title>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<link rel="stylesheet" href="{{ url('plugins/fontawesome-free/css/all.min.css') }}">
<link rel="stylesheet" href="{{ url('plugins/overlayScrollbars/css/OverlayScrollbars.min.css') }}">
<link rel="stylesheet" href="{{ url('dist/css/adminlte.min.css') }}">
</head>
<body class="hold-transition dark-mode sidebar-mini layout-fixed layout-navbar-fixed layout-footer-fixed">
<div class="wrapper">
<div class="preloader flex-column justify-content-center align-items-center">
<img class="animation__wobble" src="dist/img/AdminLTELogo.png" alt="AdminLTELogo" height="60" width="60">
</div>
@include('templates.sidebar')
@include('templates.topbar')
<div class="content-wrapper">
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1 class="m-0">{{ $title }}</h1>
</div>
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active">Dashboard v2</li>
</ol>
</div>
</div>
</div>
</div>
<section class="content">
<div class="container-fluid">
@yield('content')
</div>
</section>
</div>
<aside class="control-sidebar control-sidebar-dark">
</aside>
<footer class="main-footer">
<div class="float-right d-none d-sm-inline-block">
<b>Version</b> 3.2.0
</div>
</footer>
</div>
<script src="{{ url('plugins/jquery/jquery.min.js') }}"></script>
<script src="{{ url('plugins/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
<script src="{{ url('plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js') }}"></script>
<script src="{{ url('dist/js/adminlte.js') }}"></script>
<script src="{{ url('dist/js/demo.js') }}"></script>
<script src="{{ url('dist/js/pages/dashboard2.js') }}"></script>
</body>
</html>

buka file sidebar.blade.php kemudian tambahkan script berikut :

<aside class="main-sidebar sidebar-dark-primary elevation-4">
<a href="index3.html" class="brand-link">
<img src="dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"
style="opacity: .8">
<span class="brand-text font-weight-light">AdminLTE 3</span>
</a>
<div class="sidebar">
<div class="user-panel mt-3 pb-3 mb-3 d-flex">
<div class="image">
<img src="dist/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image">
</div>
<div class="info">
<a href="#" class="d-block">Alexander Pierce</a>
</div>
</div>
<div class="form-inline">
<div class="input-group" data-widget="sidebar-search">
<input class="form-control form-control-sidebar" type="search" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-sidebar">
<i class="fas fa-search fa-fw"></i>
</button>
</div>
</div>
</div>
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<li class="nav-item">
<a href="{{ url('/dashboard') }}"
class="nav-link {{ url()->current() == url('dashboard') ? 'active' : '' }}">
<i class="nav-icon fas fa-tachometer-alt"></i>
<p>
Dashboard
</p>
</a>
</li>
{{-- <li class="nav-item">
<a href="pages/charts/chartjs.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p></p>
</a>
</li> --}}
</ul>
</nav>
</div>
</aside>

buka file topbar.blade.php kemudian tambahkan script berikut :

<nav class="main-header navbar navbar-expand navbar-dark">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
</li>
<li class="nav-item d-none d-sm-inline-block">
<a href="index3.html" class="nav-link">Home</a>
</li>
<li class="nav-item d-none d-sm-inline-block">
<a href="#" class="nav-link">Contact</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" data-widget="navbar-search" href="#" role="button">
<i class="fas fa-search"></i>
</a>
<div class="navbar-search-block">
<form class="form-inline">
<div class="input-group input-group-sm">
<input class="form-control form-control-navbar" type="search" placeholder="Search"
aria-label="Search">
<div class="input-group-append">
<button class="btn btn-navbar" type="submit">
<i class="fas fa-search"></i>
</button>
<button class="btn btn-navbar" type="button" data-widget="navbar-search">
<i class="fas fa-times"></i>
</button>
</div>
</div>
</form>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="far fa-comments"></i>
<span class="badge badge-danger navbar-badge">3</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<a href="#" class="dropdown-item">
<div class="media">
<img src="dist/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 mr-3 img-circle">
<div class="media-body">
<h3 class="dropdown-item-title">
Brad Diesel
<span class="float-right text-sm text-danger"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">Call me whenever you can...</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<div class="media">
<img src="dist/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
<div class="media-body">
<h3 class="dropdown-item-title">
John Pierce
<span class="float-right text-sm text-muted"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">I got your message bro</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<div class="media">
<img src="dist/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
<div class="media-body">
<h3 class="dropdown-item-title">
Nora Silvester
<span class="float-right text-sm text-warning"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">The subject goes here</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="far fa-bell"></i>
<span class="badge badge-warning navbar-badge">15</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<span class="dropdown-item dropdown-header">15 Notifications</span>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-envelope mr-2"></i> 4 new messages
<span class="float-right text-muted text-sm">3 mins</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-users mr-2"></i> 8 friend requests
<span class="float-right text-muted text-sm">12 hours</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-file mr-2"></i> 3 new reports
<span class="float-right text-muted text-sm">2 days</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-widget="fullscreen" href="#" role="button">
<i class="fas fa-expand-arrows-alt"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button">
<i class="fas fa-th-large"></i>
</a>
</li>
</ul>
</nav>

Membuat views dashboard

Tambahkan file baru dengan nama dashboard.blade.php di dalam folder resources/views seperti contoh gambar dibawah :

Buka file dashboard.blade.php , kemudian tambahkan script berikut :

@extends('templates.index')
@section('content')
<div class="row">
<div class="col-12 col-sm-6 col-md-3">
<div class="info-box">
<span class="info-box-icon bg-info elevation-1"><i class="fas fa-cog"></i></span>
<div class="info-box-content">
<span class="info-box-text">CPU Traffic</span>
<span class="info-box-number">
10
<small>%</small>
</span>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-3">
<div class="info-box mb-3">
<span class="info-box-icon bg-danger elevation-1"><i class="fas fa-thumbs-up"></i></span>
<div class="info-box-content">
<span class="info-box-text">Likes</span>
<span class="info-box-number">41,410</span>
</div>
</div>
</div>
<div class="clearfix hidden-md-up"></div>
<div class="col-12 col-sm-6 col-md-3">
<div class="info-box mb-3">
<span class="info-box-icon bg-success elevation-1"><i class="fas fa-shopping-cart"></i></span>
<div class="info-box-content">
<span class="info-box-text">Sales</span>
<span class="info-box-number">760</span>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-3">
<div class="info-box mb-3">
<span class="info-box-icon bg-warning elevation-1"><i class="fas fa-users"></i></span>
<div class="info-box-content">
<span class="info-box-text">New Members</span>
<span class="info-box-number">2,000</span>
</div>
</div>
</div>
</div>
@endsection

Pada pembuatan templating kita menggunakan beberapa fungsi diantaranya :

@include('templates.sidebar') untuk menyelipkan script dari templates/sidebar.blade.php
@include('templates.topbar') untuk menyelipkan script dari templates/topbar.blade.php
@yield('content') untuk menempatkan script yang berada didalam @section('content')
@extends('templates.index') untuk mrnggunakan file index.blade.php yang berada didalam templates
@section('content') untuk menandai bahwa script ini akan digunakan pada templates.index
@endsection adalah tutup dari @section('content')

Testing Templating

Jalankan Local Development Server Pada Project Laravel, kemudian

ketikan http://127.0.0.1:8000/dashboard pada kolom pencarian di web browser

Jika semua proses atau langkah diatas, telah teman-teman ikuti tanpa ada yang terlewat harusnya akan menampilkan halaman dashboard seperti berikut :

Sampai disini kita telah berhasil membuat templating dengan template AdminLTE v.3 pada project LARAVEL 9 kita, gimana teman-teman, mudah bukan jika ada yang ingin teman-teman tanyakan jangan ragu untuk bertanya pada kolom komentar. Sampai jumpa pada tutorial berikutnya bye bye.. ^_^

Trending

Tutorial LARAVEL 9 | 4. Filter & Search with Pagination

Tutorial Codeigniter 4 - Membuat Upload Image pada Codeigniter 4

Tutorial CRUD PHP + Template AdminLTE 3 + Jquery Datatable + Sweet alert 2 | #5 Membuat Halaman Dashboard + Chart

Tutorial Codeigniter 4 - Membuat CRUD (Create Read Update dan Delete) + Datatables di Codeigniter 4

Tutorial CRUD PHP + Template AdminLTE 3 + Jquery Datatable + Sweet alert 2 | #4 Crud with Jquery Datatables + Sweet Alert 2

Rekomendasi Extensions Visual Studio Code Untuk Program Web

Tutorial LARAVEL 9 | 5. Login dan Logout

Tutorial CRUD PHP + Template AdminLTE 3 + Jquery Datatable + Sweet alert 2 | #2 Membuat Folder Project dan Koneksi Database