Tutorial LARAVEL 9 | 2. Templating

byAndrian Ade Rizma -

 


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 :

  1. Mengekstrak Templates AdminLTE
  2. Menyalin / mengambil Folder dist dan plugins pada Folder AdminLTE yang telah di ekstrak
  3. Membuat Controllers Dashboard
  4. Membuat Route untuk Controllers Dashboard
  5. Membuat folder templates di dalam folder resources/views
  6. 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 :

  1. 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 : 

  1. public function index()
  2. {
  3. $data = array(
  4. 'title' => 'Dahsboard',
  5. );
  6. return view('dashboard', $data);
  7. }
sehingga Dashboard.php menjadi seperti berikut :


Membuat Route untuk Controllers Dashboard

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

  1. use App\Http\Controllers\Dashboard;
  2. 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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <title>{{ $title }}</title>
  8.  
  9. <link rel="stylesheet"
  10. href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  11.  
  12. <link rel="stylesheet" href="{{ url('plugins/fontawesome-free/css/all.min.css') }}">
  13.  
  14. <link rel="stylesheet" href="{{ url('plugins/overlayScrollbars/css/OverlayScrollbars.min.css') }}">
  15.  
  16. <link rel="stylesheet" href="{{ url('dist/css/adminlte.min.css') }}">
  17. </head>
  18.  
  19. <body class="hold-transition dark-mode sidebar-mini layout-fixed layout-navbar-fixed layout-footer-fixed">
  20. <div class="wrapper">
  21.  
  22. <div class="preloader flex-column justify-content-center align-items-center">
  23. <img class="animation__wobble" src="dist/img/AdminLTELogo.png" alt="AdminLTELogo" height="60" width="60">
  24. </div>
  25.  
  26. @include('templates.sidebar')
  27.  
  28. @include('templates.topbar')
  29.  
  30. <div class="content-wrapper">
  31.  
  32. <div class="content-header">
  33. <div class="container-fluid">
  34. <div class="row mb-2">
  35. <div class="col-sm-6">
  36. <h1 class="m-0">{{ $title }}</h1>
  37. </div>
  38. <div class="col-sm-6">
  39. <ol class="breadcrumb float-sm-right">
  40. <li class="breadcrumb-item"><a href="#">Home</a></li>
  41. <li class="breadcrumb-item active">Dashboard v2</li>
  42. </ol>
  43. </div>
  44. </div>
  45. </div>
  46. </div>
  47.  
  48.  
  49. <section class="content">
  50. <div class="container-fluid">
  51.  
  52. @yield('content')
  53.  
  54. </div>
  55. </section>
  56.  
  57. </div>
  58.  
  59.  
  60. <aside class="control-sidebar control-sidebar-dark">
  61.  
  62. </aside>
  63.  
  64.  
  65. <footer class="main-footer">
  66. <strong>Copyright &copy; 2014-2021 <a href="https://adminlte.io">AdminLTE.io</a>.</strong>
  67. All rights reserved.
  68. <div class="float-right d-none d-sm-inline-block">
  69. <b>Version</b> 3.2.0
  70. </div>
  71. </footer>
  72. </div>
  73.  
  74.  
  75.  
  76. <script src="{{ url('plugins/jquery/jquery.min.js') }}"></script>
  77.  
  78. <script src="{{ url('plugins/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
  79.  
  80. <script src="{{ url('plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js') }}"></script>
  81.  
  82. <script src="{{ url('dist/js/adminlte.js') }}"></script>
  83.  
  84. <script src="{{ url('dist/js/demo.js') }}"></script>
  85.  
  86. <script src="{{ url('dist/js/pages/dashboard2.js') }}"></script>
  87. </body>
  88.  
  89. </html>
  90.  

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

  1. <aside class="main-sidebar sidebar-dark-primary elevation-4">
  2.  
  3. <a href="index3.html" class="brand-link">
  4. <img src="dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"
  5. style="opacity: .8">
  6. <span class="brand-text font-weight-light">AdminLTE 3</span>
  7. </a>
  8.  
  9. <div class="sidebar">
  10.  
  11. <div class="user-panel mt-3 pb-3 mb-3 d-flex">
  12. <div class="image">
  13. <img src="dist/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image">
  14. </div>
  15. <div class="info">
  16. <a href="#" class="d-block">Alexander Pierce</a>
  17. </div>
  18. </div>
  19.  
  20. <div class="form-inline">
  21. <div class="input-group" data-widget="sidebar-search">
  22. <input class="form-control form-control-sidebar" type="search" placeholder="Search" aria-label="Search">
  23. <div class="input-group-append">
  24. <button class="btn btn-sidebar">
  25. <i class="fas fa-search fa-fw"></i>
  26. </button>
  27. </div>
  28. </div>
  29. </div>
  30.  
  31. <nav class="mt-2">
  32. <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
  33.  
  34. <li class="nav-item">
  35. <a href="{{ url('/dashboard') }}"
  36. class="nav-link {{ url()->current() == url('dashboard') ? 'active' : '' }}">
  37. <i class="nav-icon fas fa-tachometer-alt"></i>
  38. <p>
  39. Dashboard
  40. </p>
  41. </a>
  42. </li>
  43. {{-- <li class="nav-item">
  44. <a href="pages/charts/chartjs.html" class="nav-link">
  45. <i class="far fa-circle nav-icon"></i>
  46. <p></p>
  47. </a>
  48. </li> --}}
  49. </ul>
  50. </nav>
  51.  
  52. </div>
  53.  
  54. </aside>
  55.  
buka file topbar.blade.php kemudian tambahkan script berikut :

  1. <nav class="main-header navbar navbar-expand navbar-dark">
  2.  
  3. <ul class="navbar-nav">
  4. <li class="nav-item">
  5. <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
  6. </li>
  7. <li class="nav-item d-none d-sm-inline-block">
  8. <a href="index3.html" class="nav-link">Home</a>
  9. </li>
  10. <li class="nav-item d-none d-sm-inline-block">
  11. <a href="#" class="nav-link">Contact</a>
  12. </li>
  13. </ul>
  14.  
  15. <ul class="navbar-nav ml-auto">
  16.  
  17. <li class="nav-item">
  18. <a class="nav-link" data-widget="navbar-search" href="#" role="button">
  19. <i class="fas fa-search"></i>
  20. </a>
  21. <div class="navbar-search-block">
  22. <form class="form-inline">
  23. <div class="input-group input-group-sm">
  24. <input class="form-control form-control-navbar" type="search" placeholder="Search"
  25. aria-label="Search">
  26. <div class="input-group-append">
  27. <button class="btn btn-navbar" type="submit">
  28. <i class="fas fa-search"></i>
  29. </button>
  30. <button class="btn btn-navbar" type="button" data-widget="navbar-search">
  31. <i class="fas fa-times"></i>
  32. </button>
  33. </div>
  34. </div>
  35. </form>
  36. </div>
  37. </li>
  38.  
  39. <li class="nav-item dropdown">
  40. <a class="nav-link" data-toggle="dropdown" href="#">
  41. <i class="far fa-comments"></i>
  42. <span class="badge badge-danger navbar-badge">3</span>
  43. </a>
  44. <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
  45. <a href="#" class="dropdown-item">
  46.  
  47. <div class="media">
  48. <img src="dist/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 mr-3 img-circle">
  49. <div class="media-body">
  50. <h3 class="dropdown-item-title">
  51. Brad Diesel
  52. <span class="float-right text-sm text-danger"><i class="fas fa-star"></i></span>
  53. </h3>
  54. <p class="text-sm">Call me whenever you can...</p>
  55. <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
  56. </div>
  57. </div>
  58.  
  59. </a>
  60. <div class="dropdown-divider"></div>
  61. <a href="#" class="dropdown-item">
  62.  
  63. <div class="media">
  64. <img src="dist/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
  65. <div class="media-body">
  66. <h3 class="dropdown-item-title">
  67. John Pierce
  68. <span class="float-right text-sm text-muted"><i class="fas fa-star"></i></span>
  69. </h3>
  70. <p class="text-sm">I got your message bro</p>
  71. <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
  72. </div>
  73. </div>
  74.  
  75. </a>
  76. <div class="dropdown-divider"></div>
  77. <a href="#" class="dropdown-item">
  78.  
  79. <div class="media">
  80. <img src="dist/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
  81. <div class="media-body">
  82. <h3 class="dropdown-item-title">
  83. Nora Silvester
  84. <span class="float-right text-sm text-warning"><i class="fas fa-star"></i></span>
  85. </h3>
  86. <p class="text-sm">The subject goes here</p>
  87. <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
  88. </div>
  89. </div>
  90.  
  91. </a>
  92. <div class="dropdown-divider"></div>
  93. <a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
  94. </div>
  95. </li>
  96.  
  97. <li class="nav-item dropdown">
  98. <a class="nav-link" data-toggle="dropdown" href="#">
  99. <i class="far fa-bell"></i>
  100. <span class="badge badge-warning navbar-badge">15</span>
  101. </a>
  102. <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
  103. <span class="dropdown-item dropdown-header">15 Notifications</span>
  104. <div class="dropdown-divider"></div>
  105. <a href="#" class="dropdown-item">
  106. <i class="fas fa-envelope mr-2"></i> 4 new messages
  107. <span class="float-right text-muted text-sm">3 mins</span>
  108. </a>
  109. <div class="dropdown-divider"></div>
  110. <a href="#" class="dropdown-item">
  111. <i class="fas fa-users mr-2"></i> 8 friend requests
  112. <span class="float-right text-muted text-sm">12 hours</span>
  113. </a>
  114. <div class="dropdown-divider"></div>
  115. <a href="#" class="dropdown-item">
  116. <i class="fas fa-file mr-2"></i> 3 new reports
  117. <span class="float-right text-muted text-sm">2 days</span>
  118. </a>
  119. <div class="dropdown-divider"></div>
  120. <a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
  121. </div>
  122. </li>
  123. <li class="nav-item">
  124. <a class="nav-link" data-widget="fullscreen" href="#" role="button">
  125. <i class="fas fa-expand-arrows-alt"></i>
  126. </a>
  127. </li>
  128. <li class="nav-item">
  129. <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button">
  130. <i class="fas fa-th-large"></i>
  131. </a>
  132. </li>
  133. </ul>
  134. </nav>
  135.  

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 :

  1. @extends('templates.index')
  2.  
  3. @section('content')
  4. <div class="row">
  5. <div class="col-12 col-sm-6 col-md-3">
  6. <div class="info-box">
  7. <span class="info-box-icon bg-info elevation-1"><i class="fas fa-cog"></i></span>
  8. <div class="info-box-content">
  9. <span class="info-box-text">CPU Traffic</span>
  10. <span class="info-box-number">
  11. 10
  12. <small>%</small>
  13. </span>
  14. </div>
  15.  
  16. </div>
  17.  
  18. </div>
  19.  
  20. <div class="col-12 col-sm-6 col-md-3">
  21. <div class="info-box mb-3">
  22. <span class="info-box-icon bg-danger elevation-1"><i class="fas fa-thumbs-up"></i></span>
  23. <div class="info-box-content">
  24. <span class="info-box-text">Likes</span>
  25. <span class="info-box-number">41,410</span>
  26. </div>
  27.  
  28. </div>
  29.  
  30. </div>
  31.  
  32.  
  33. <div class="clearfix hidden-md-up"></div>
  34. <div class="col-12 col-sm-6 col-md-3">
  35. <div class="info-box mb-3">
  36. <span class="info-box-icon bg-success elevation-1"><i class="fas fa-shopping-cart"></i></span>
  37. <div class="info-box-content">
  38. <span class="info-box-text">Sales</span>
  39. <span class="info-box-number">760</span>
  40. </div>
  41.  
  42. </div>
  43.  
  44. </div>
  45.  
  46. <div class="col-12 col-sm-6 col-md-3">
  47. <div class="info-box mb-3">
  48. <span class="info-box-icon bg-warning elevation-1"><i class="fas fa-users"></i></span>
  49. <div class="info-box-content">
  50. <span class="info-box-text">New Members</span>
  51. <span class="info-box-number">2,000</span>
  52. </div>
  53.  
  54. </div>
  55.  
  56. </div>
  57. </div>
  58. @endsection
  59.  
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.. ^_^

Tags

إرسال تعليق

أحدث أقدم

نموذج الاتصال