Seri 12 Belajar Laravel 10 dari Nol || Admin Panel

03.40

 



Panel Admin

Banyak aplikasi web memiliki bagian admin yang dapat diakses oleh administrator atau moderator untuk mengelola data aplikasi, seperti mendaftarkan produk, mengelola penjualan, menghasilkan laporan, dan mengelola pengguna. Umumnya, bagian ini disebut panel administrasi. Karena sifatnya, bagian ini diamankan oleh sistem login atau otentikasi. Untuk saat ini, kita akan membuat panel admin publik, yang dapat diakses oleh pengunjung mana pun. Kita akan mengimplementasikan sistem login nanti untuk mengamankan dan memverifikasi bahwa hanya pengguna yang diizinkan (admin) yang dapat mengakses bagian ini.
Untuk membuat panel admin, kita perlu menyertakan layout, controller, view, file baru, dan routes baru. Jadi, mari kita mulai.

Layout Admin

Umumnya, panel administrasi terlihat berbeda dari halaman utama. Mereka cukup minimalis dan banyak dari mereka menampilkan informasi seperti spreadsheet. Mari mulai konstruksi panel admin Kita dengan mendefinisikan layout baru. Layout ini akan digunakan di seluruh halaman panel admin.
Di resources/views/layouts, buat file baru admin.blade.php dan isi dengan kode berikut.




<!doctype html>
<html lang="en">

 

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous" />
<link href="{{ asset('/css/admin.css') }}" rel="stylesheet" />
<title>@yield('title', 'Admin - Online Store')</title>
</head>

 

<body>
<div class="row g-0">
<!-- sidebar -->
<div class="p-3 col fixed text-white bg-dark">
<a href="{{ route('admin.home.index') }}" class="text-white text-decoration-none">
<span class="fs-4">Admin Panel</span>
</a>
<hr />
<ul class="nav flex-column">
<li><a href="{{ route('admin.home.index') }}" class="nav-link text-white">- Admin - Home</a></li> <li><a href="#" class="nav-link text-white">- Admin - Products</a></li>
<li>
<a href="{{ route('home.index') }}" class="mt-2 btn bg-primary text-white">Kembali ke halaman utama</a> </li>
</ul>
</div>
<!-- sidebar -->
<div class="col content-grey">
<nav class="p-3 shadow text-end">
<span class="profile-font">Admin</span>
<img class="img-profile rounded-circle" src="{{ asset('/img/undraw_profile.svg') }}"> </nav>
<div class="g-0 m-5">
@yield('content')
</div>
</div>
</div>

 

<!-- footer -->
<div class="copyright py-4 text-center text-white">
<div class="container">
<small>
Copyright - <a class="text-reset fw-bold text-decoration-none" target="_blank"
href="https://www.idiarso.my.id/">
idiarso
</a> - <b>Belajar-Laravel 10</b>
</small>
</div>
</div>
<!-- footer -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous">
</script>
</body> </html>


Kita memiliki layout baru. Layout ini memiliki struktur yang berbeda dan berisi sidebar dengan tiga tautan.
• “- Admin - Home” mengarah ke halaman utama panel admin.
• “- Admin - Products” mengarah ke halaman pengelolaan produk panel admin (halaman ini akan diimplementasikan di bab berikutnya).
• “Kembali ke halaman utama” mengarah kembali ke halaman utama toko online.

Layout admin.blade.php mengimpor file admin.css dan gambar baru. Mari tambahkan elemen-elemen ini ke dalam proyek kita.

Membuat file admin.css

Di public/css, buat file baru admin.css dan isi dengan kode berikut.


.copyright {
background-color: #1a252f;
}
.fixed {
-ms-flex: 0 0 250px;
flex: 0 0 250px;
}
.content-grey {
background-color: #f8f9fc;
}
hr {
margin-top: 0.8em;
margin-bottom: 0.8em;
}
.img-profile {
height: 2rem;
width: 2rem;
}
.profile-font {
color: #858796 !important; font-size: 80%;
font-weight: 400;
}
.card-header {
background-color: #f8f9fc; border-bottom: 1px solid #e3e6f0;
}



Kita memiliki beberapa kelas CSS kustom. Sebagian besar dari mereka digunakan dalam layout admin.

Menambahkan gambar profil undraw

Unduh file undraw_profile.svg dari taut
an ini https://github.com/idiarso/laravelku/blob/main/public/undraw_profile.svg dan simpan di dalam folder public/img. Atau, simpan gambar profil admin Anda sendiri.

HomeController Admin
Di app/Http/Controllers/, buat subfolder Admin. Kemudian, di app/Http/Controllers/Admin, buat file baru AdminHomeController.php dan isi dengan kode berikut.




<?php
namespace App \ Http \ Controllers \ Admin;
use App \ Http \ Controllers \ Controller; use Illuminate \ Http \ Request;class AdminHomeController extends Controller
{
public function index()
{
$viewData = [];
$viewData["title"] = "Admin Page - Admin - Online Store"; return view('admin.home.index')->with("viewData", $viewData);
} }


Kita memiliki metode index sederhana yang menampilkan view admin.home.index.

Tampilan index admin

Mari buat tampilan index admin. Di resources/views/, buat subfolder admin. Selanjutnya, buat subfolder home di resources/views/admin. Terakhir, di resources/views/admin/home, buat file baru index.blade.php dan isi dengan kode berikut.



@extends('layouts.admin')
@section('title', $viewData["title"])
@section('content')
<div class="card">
<div class="card-header">
Admin Panel - Halaman Utama
</div>
<div class="card-body">
Selamat datang di Panel Admin, gunakan sidebar untuk navigasi antara berbagai pilihan. </div>
</div>
@endsection


Kita memiliki tampilan sederhana yang menampilkan pesan "selamat datang di panel admin". Perhatikan bahwa tampilan ini memperluas layout admin baru (bukan layout app).


Memodifikasi routes

Mari masukkan routes baru ke halaman utama admin. Di routes/web.php, lakukan perubahan berikut dalam teks tebal.



Route::get('/products', 'App \ Http \ Controllers \ ProductController@index')->name("product.index");
Route::get('/products/{id}', 'App \ Http \ Controllers \ ProductController@show')->name("product.show");
Route::get('/admin', 'App \ Http \ Controllers \ Admin \ AdminHomeController@index')->name("admin.home.index");


routes baru ("/admin") akan menampilkan halaman utama admin yang baru (yang dirender di dalam metode index AdminHomeController).

Menjalankan aplikasi

Di Terminal, masuk ke direktori proyek, dan jalankan perintah berikut.


php artisan serve


Sekarang buka routes ("/admin") dan Anda akan melihat Panel Admin baru (lihat gambar dibawah).

Catatan: Anda dapat menemukan kode aplikasi di repositori GitHub di https://github.com/idiarso/laravelku


,
By:
IDIARSO
IDIARSO

Menulis adalah kegiatan saya disela rutinitas kerja,silahkan berkomentar dibawah ini sebagai bahan masukan

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)