spk saw

Mengintegrasikan Template Stisla ke Laravel Breeze untuk Sistem Pendukung Keputusan Metode SAW

Setelah sebelumnya kita berhasil menginstal Laravel Breeze dan menguji fitur autentikasi dasar, pada bagian ini kita akan membuat tampilan aplikasi lebih menarik dan profesional menggunakan template admin Stisla.

Apa itu Stisla?

Stisla adalah template admin berbasis Bootstrap 4 yang bersifat gratis dan open-source. Template ini menyediakan berbagai komponen siap pakai seperti sidebar, navbar, tombol, tabel, dan lainnya yang sangat cocok untuk dashboard aplikasi.

Langkah 1: Download Template Stisla

  1. download template stisla disini .

  2. Ekstrak file ZIP, lalu salin folder assets ke dalam direktori public/ pada project Laravel-mu.

    Struktur hasil akhirnya menjadi:

public/assets/
├── css/
├── js/
└── modules/

Langkah 2: Membuat Layout Utama 

Layout ini adalah kerangka utama tampilan sistem. Semua halaman konten akan menggunakan layout ini agar konsisten secara visual dan struktur.

File: resources/views/layouts/global.blade.php

Struktur Utama:

  • Meta dan aset CSS

  • Include navbar dan sidebar

  • Area @yield('content')

  • Script JS dan feedback SweetAlert

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <title>@yield('title')</title>

  <!-- CSS -->
  <link rel="stylesheet" href="{{ asset('assets/modules/bootstrap/css/bootstrap.min.css') }}">
  <link rel="stylesheet" href="{{ asset('assets/modules/fontawesome/css/all.min.css') }}">
  <link rel="stylesheet" href="{{ asset('assets/css/style.css') }}">
  <link rel="stylesheet" href="{{ asset('assets/css/components.css') }}">
  <link rel="stylesheet" href="https://cdn.datatables.net/1.13.1/css/dataTables.bootstrap4.min.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.4.0/css/responsive.bootstrap4.min.css">
  @yield('style')
</head>

<body>
<div id="app">
  <div class="main-wrapper main-wrapper-1">
    <div class="navbar-bg"></div>
    @include('layouts.navbar')
    <div class="main-sidebar sidebar-style-2">
      @include('layouts.sidebar')
    </div>

    <div class="main-content">
      @yield('content')
    </div>

    <footer class="main-footer">
      <div class="footer-left">
        Copyright &copy; 2018 <div class="bullet"></div> Design by 
        <a href="https://nauval.in/">Muhamad Nauval Azhar</a>
      </div>
      <div class="footer-right"></div>
    </footer>
  </div>
</div>

<!-- JS -->
<script src="{{ asset('assets/modules/jquery.min.js') }}"></script>
<script src="{{ asset('assets/modules/bootstrap/js/bootstrap.min.js') }}"></script>
<script src="{{ asset('assets/js/stisla.js') }}"></script>
<script src="{{ asset('assets/js/scripts.js') }}"></script>
<script src="{{ asset('assets/js/custom.js') }}"></script>
<script src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.1/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.4.0/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.4.0/js/responsive.bootstrap4.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<!-- Notifikasi SweetAlert -->
<script>
  @if(session('success'))
  Swal.fire({ icon: 'success', title: 'BERHASIL!', text: '{{ session('success') }}', timer: 3000 });
  @elseif(session('error'))
  Swal.fire({ icon: 'error', title: 'GAGAL!', text: '{{ session('error') }}', timer: 10000 });
  @endif
</script>

@yield('js')
</body>
</html>

Langkah 3: Membuat Sidebar

Sidebar berisi menu navigasi ke berbagai fitur seperti Alternatif, Kriteria, dan Penilaian.

File: resources/views/layouts/sidebar.blade.php

<aside id="sidebar-wrapper">
    <div class="sidebar-brand">
        <a href="index.html">SPK SAW</a>
    </div>
    <div class="sidebar-brand sidebar-brand-sm">
        <a href="index.html">SAW</a>
    </div>
    <ul class="sidebar-menu">
        <li class="menu-header">Dashboard</li>
        <li class="{{ request()->is('dashboard') ? 'active' : '' }}">
            <a class="nav-link" href="{{ route('dashboard') }}"><i class="fas fa-fire"></i> <span>Dashboard</span></a>
        </li>
        <li class="menu-header">Master Data</li>
        <li class="{{ request()->is('dashboard/kriteria*') ? 'active' : '' }}">
            <a class="nav-link" href=""><i class="fas fa-list"></i> <span>Kriteria</span></a>
        </li>
        <li class="{{ request()->is('dashboard/alternatif*') ? 'active' : '' }}">
            <a class="nav-link" href=""><i class="fas fa-box"></i> <span>Alternatif</span></a>
        </li>
        <li class="{{ request()->is('dashboard/nilai*') ? 'active' : '' }}">
            <a class="nav-link" href=""><i class="fas fa-edit"></i> <span>Penilaian</span></a>
        </li>
        <li class="menu-header">Perhitungan SAW</li>
        <li class="{{ request()->is('dashboard/hasil-perhitungan*') ? 'active' : '' }}">
            <a class="nav-link" href=""><i class="fas fa-file"></i> <span>Proses Perhitungan</span></a>
        </li>
        <li class="menu-header">Pengaturan</li>
        <li class="">
            <a class="nav-link" href="blank.html"><i class="fas fa-user"></i> <span>User</span></a>
        </li>

    </ul>
</aside>

Langkah 4: Membuat Navbar

Navbar digunakan untuk tampilan atas dan profil user (jika diperlukan).

File: resources/views/layouts/navbar.blade.php

<nav class="navbar navbar-expand-lg main-navbar">
    <form class="form-inline mr-auto">
        <ul class="navbar-nav mr-3">
            <li><a href="#" data-toggle="sidebar" class="nav-link nav-link-lg"><i class="fas fa-bars"></i></a></li>
        </ul>
    </form>
    <ul class="navbar-nav navbar-right">
        <li class="dropdown"><a href="#" data-toggle="dropdown"
                class="nav-link dropdown-toggle nav-link-lg nav-link-user">
                <img alt="image" src="{{ asset('assets/img/avatar/avatar-1.png') }}" class="rounded-circle mr-1">
                <div class="d-sm-none d-lg-inline-block">Hi, {{ Auth::user()->name }}</div>
            </a>
            <div class="dropdown-menu dropdown-menu-right">
                <a href="{{ route('logout') }}" onclick="event.preventDefault();
          document.getElementById('logout_id').submit();" class="dropdown-item has-icon text-danger">
                    <i class="fas fa-sign-out-alt"></i> Logout
                </a>
                <form method="POST" id="logout_id" action="{{ route('logout') }}" style="display:none;">
                    @csrf

                </form>
            </div>
        </li>
    </ul>
</nav>

Langkah 5: Menggunakan Layout di Halaman

Contoh penggunaan layout global.blade.php di halaman alternatif:

File: resources/views/dashboard.blade.php

@extends('layouts.global')

@section('title')
    Dashboard
@endsection

@section('content')
    <section class="section">
        <div class="section-header">
            <h1>Dashboard</h1>
        </div>

        <div class="section-body">
            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-6 col-12">
                    <div class="card card-statistic-1">
                        <div class="card-icon bg-danger">
                            <i class="fas fa-money-bill-alt"></i>
                        </div>
                        <div class="card-wrap">
                            <div class="card-header">
                                <h4>Total Kriteria</h4>
                            </div>
                            <div class="card-body">
                                0
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-6 col-12">
                    <div class="card card-statistic-1">
                        <div class="card-icon bg-warning">
                            <i class="far fa-money-bill-alt"></i>
                        </div>
                        <div class="card-wrap">
                            <div class="card-header">
                                <h4>Total Alternatif</h4>
                            </div>
                            <div class="card-body">
                                0
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

Langkah 6: Custom Tampilan Login Laravel Breeze

Laravel Breeze menyediakan halaman login default. Di part ini kita akan mengganti tampilan login dengan template Stisla agar lebih modern.

File yang Dimodifikasi

Ubah file resources/views/auth/login.blade.php menjadi seperti berikut:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
  <title>Login &mdash; Stisla</title>

  <!-- General CSS Files -->
  <link rel="stylesheet" href="{{ asset('assets/modules/bootstrap/css/bootstrap.min.css') }}">
  <link rel="stylesheet" href="{{ asset('assets/modules/fontawesome/css/all.min.css') }}">

  <!-- CSS Libraries -->
  <link rel="stylesheet" href="{{ asset('assets/modules/bootstrap-social/bootstrap-social.css') }}">

  <!-- Template CSS -->
  <link rel="stylesheet" href="{{ asset('assets/css/style.css') }}">
  <link rel="stylesheet" href="{{ asset('assets/css/components.css') }}">
<!-- Start GA -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-94034622-3"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-94034622-3');
</script>
<!-- /END GA --></head>

<body>
  <div id="app">
    <section class="section">
      <div class="container mt-5">
        <div class="row">
          <div class="col-12 col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-lg-6 offset-lg-3 col-xl-4 offset-xl-4">
            <div class="login-brand">
              <img src="{{ asset('assets/img/stisla-fill.svg') }}" alt="logo" width="100" class="shadow-light rounded-circle">
            </div>

            <div class="card card-primary">
              <div class="card-header"><h4>Login</h4></div>

              <div class="card-body">
                <form method="POST" action="{{ route('login') }}">
                    @csrf
                  <div class="form-group">
                    <label for="email">Email</label>
                    <input id="email" type="email" name="email" class="form-control @error('email') is-invalid @enderror" name="email" tabindex="1" autofocus>
                    @error('email')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                    @enderror
                  </div>

                  <div class="form-group">
                    <div class="d-block">
                    	<label for="password" class="control-label">Password</label>
                      <div class="float-right">
                      </div>
                    </div>
                    <input id="password" name="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" tabindex="2">
                    @error('password')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                    @enderror
                  </div>
                  <div class="form-group">
                    <button type="submit" class="btn btn-primary btn-lg btn-block" tabindex="4">
                      Login
                    </button>
                  </div>
                </form>
              </div>
            </div>
            <div class="simple-footer">
              Copyright &copy; Stisla 2018
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>

  <!-- General JS Scripts -->
  <script src="{{ asset('assets/modules/jquery.min.js') }}"></script>
  <script src="{{ asset('assets/modules/popper.js') }}"></script>
  <script src="{{ asset('assets/modules/tooltip.js') }}"></script>
  <script src="{{ asset('assets/modules/bootstrap/js/bootstrap.min.js') }}"></script>
  <script src="{{ asset('assets/modules/nicescroll/jquery.nicescroll.min.js') }}"></script>
  <script src="{{ asset('assets/modules/moment.min.js') }}"></script>
  <script src="{{ asset('assets/js/stisla.js') }}"></script>

  <!-- JS Libraies -->

  <!-- Page Specific JS File -->

  <!-- Template JS File -->
  <script src="{{ asset('assets/js/scripts.js') }}"></script>
  <script src="{{ asset('assets/js/custom.js') }}"></script>
</body>
</html>

KESIMPULAN

Pada bagian ini, kita telah berhasil mengubah tampilan sistem SPK berbasis Laravel menjadi jauh lebih profesional dan responsif dengan mengintegrasikan template admin Stisla. Beberapa hal penting yang telah dilakukan:

  • Membuat layout utama (global.blade.php) sebagai kerangka dasar tampilan sistem.

  • Menambahkan komponen navbar dan sidebar agar navigasi sistem lebih rapi dan modular.

  • Mengubah tampilan halaman login default Laravel Breeze menjadi lebih menarik menggunakan desain dari Stisla.

Dengan integrasi ini, sistem kini memiliki antarmuka pengguna yang lebih modern dan siap untuk dikembangkan lebih lanjut. Di part selanjutnya, kita akan mulai membangun fitur CRUD untuk data kriteria

 

PEMROGRAMAN MUDAH

Suka dengan tulisan di Pemrograman Mudah? Kamu bisa memberikan dukungan dengan berdonasi atau bagikan konten ini di sosial media. Terima kasih atas dukungan Anda!

Kategori

Tag