Tentu!
Berdasarkan proposal skripsi Anda yang berjudul "Rancang Bangun Sistem Manajemen Data
Penerima Dana Zakat dan Sedekah Berbasis Web Menggunakan Framework Laravel", berikut adalah
contoh struktur dasar kode untuk aplikasi Laravel yang dapat Anda gunakan sebagai referensi. Kode
ini mencakup beberapa bagian penting seperti model, controller, dan route.
1. Instalasi Laravel
Pastikan Anda sudah menginstal Laravel. Jika belum, Anda bisa menginstalnya dengan perintah
berikut:
bash
Verify
Open In Editor
Run
Copy code
composer create-project --prefer-dist laravel/laravel nama_project
2. Buat Model dan Migration
Buat model dan migration untuk penerima zakat:
bash
Verify
Open In Editor
Run
Copy code
php artisan make:model PenerimaZakat -m
Edit file migration yang terletak di
database/migrations/xxxx_xx_xx_create_penerima_zakats_table.php:
php
Verify
Open In Editor
Run
Copy code
public function up()
Schema::create('penerima_zakats', function (Blueprint $table) {
$table->id();
$table->string('nama');
$table->string('alamat');
$table->string('no_telepon');
$table->decimal('jumlah_zakat', 10, 2);
$table->timestamps();
});
Jalankan migration:
bash
Verify
Open In Editor
Run
Copy code
php artisan migrate
3. Buat Controller
Buat controller untuk mengelola logika bisnis:
bash
Verify
Open In Editor
Run
Copy code
php artisan make:controller PenerimaZakatController
Edit file app/Http/Controllers/[Link]:
php
Verify
Open In Editor
Run
Copy code
namespace App\Http\Controllers;
use App\Models\PenerimaZakat;
use Illuminate\Http\Request;
class PenerimaZakatController extends Controller
public function index()
$penerimaZakats = PenerimaZakat::all();
return view('penerima_zakat.index', compact('penerimaZakats'));
public function create()
return view('penerima_zakat.create');
}
public function store(Request $request)
$request->validate([
'nama' => 'required',
'alamat' => 'required',
'no_telepon' => 'required',
'jumlah_zakat' => 'required|numeric',
]);
PenerimaZakat::create($request->all());
return redirect()->route('penerima_zakat.index')->with('success', 'Data penerima zakat berhasil
ditambahkan.');
4. Buat Route
Edit file routes/[Link] untuk menambahkan route:
php
Verify
Open In Editor
Run
Copy code
use App\Http\Controllers\PenerimaZakatController;
Route::resource('penerima_zakat', PenerimaZakatController::class);
5. Buat View
Buat folder resources/views/penerima_zakat dan buat file [Link] dan [Link].
[Link]
blade
Verify
Open In Editor
Run
Copy code
@extends('[Link]')
@section('content')
<h1>Data Penerima Zakat</h1>
<a href="{{ route('penerima_zakat.create') }}">Tambah Penerima Zakat</a>
<table>
<thead>
<tr>
<th>Nama</th>
<th>Alamat</th>
<th>No Telepon</th>
<th>Jumlah Zakat</th>
</tr>
</thead>
<tbody>
@foreach ($penerimaZakats as $penerima)
<tr>
<td>{{ $penerima->nama }}</td>
<td>{{ $penerima->alamat }}</td>
<td>{{ $penerima->no_telepon }}</td>
<td>{{ $penerima->jumlah_zakat }}</td>
</tr>
@endforeach
</tbody>
</table>
@endsection
[Link]
blade
Verify
Open In Editor
Run
Copy code
@extends('[Link]')
@section('content')
<h1>Tambah Penerima Zakat</h1>
<form action="{{ route('penerima_zakat.store') }}" method="POST">
@csrf
<label for="nama">Nama:</label>
<input type="text" name="nama" required>
<label for="alamat">Alamat:</label>
<input type="text" name="alamat" required>
<label for="no_telepon">No Telepon:</label>
<input type="text" name="no_telepon" required>
<label for="jumlah_zakat">Jumlah Zakat:</label>
<input type="number" name="jumlah_zakat" required>
<button type=" submit">Simpan</button>
</form>
@endsection
6. Menjalankan Aplikasi
Setelah semua langkah di atas selesai, Anda bisa menjalankan aplikasi dengan perintah:
bash
Verify
Open In Editor
Run
Copy code
php artisan serve
Akses aplikasi melalui browser di [Link]
Dengan struktur ini, Anda sudah memiliki dasar untuk sistem manajemen data penerima dana zakat
dan sedekah. Anda dapat mengembangkan lebih lanjut dengan menambahkan fitur-fitur lain sesuai
kebutuhan proposal skripsi Anda.
You
tolong tambahkan fitur untuk pembayaran zakat, fitur login multi role antara admin dan user
BLACKBOXAI
Tentu! Berikut adalah langkah-langkah untuk menambahkan fitur pembayaran zakat dan fitur login
multi-role antara admin dan user pada aplikasi Laravel Anda.
1. Instalasi Laravel Breeze untuk Autentikasi
Laravel Breeze adalah paket yang menyediakan fitur autentikasi sederhana. Anda bisa menginstalnya
dengan perintah berikut:
bash
Verify
Open In Editor
Run
Copy code
composer require laravel/breeze --dev
php artisan breeze:install
npm install
npm run dev
php artisan migrate
2. Menambahkan Role pada User
Pertama, kita perlu menambahkan kolom role pada tabel users. Buat migration baru:
bash
Verify
Open In Editor
Run
Copy code
php artisan make:migration add_role_to_users_table --table=users
Edit file migration yang baru dibuat di
database/migrations/xxxx_xx_xx_add_role_to_users_table.php:
php
Verify
Open In Editor
Run
Copy code
public function up()
Schema::table('users', function (Blueprint $table) {
$table->string('role')->default('user'); // default role is user
});
Jalankan migration:
bash
Verify
Open In Editor
Run
Copy code
php artisan migrate
3. Update Model User
Edit model User di app/Models/[Link] untuk menambahkan role:
php
Verify
Open In Editor
Run
Copy code
class User extends Authenticatable
{
// ...
public function isAdmin()
return $this->role === 'admin';
4. Menambahkan Middleware untuk Role
Buat middleware untuk memeriksa role pengguna:
bash
Verify
Open In Editor
Run
Copy code
php artisan make:middleware CheckRole
Edit file middleware di app/Http/Middleware/[Link]:
php
Verify
Open In Editor
Run
Copy code
namespace App\Http\Middleware;
use Closure;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
class CheckRole
public function handle(Request $request, Closure $next, $role)
if (!Auth::check() || Auth::user()->role !== $role) {
return redirect('/'); // Redirect to home if not authorized
return $next($request);
Daftarkan middleware di app/Http/[Link]:
php
Verify
Open In Editor
Run
Copy code
protected $routeMiddleware = [
// ...
'role' => \App\Http\Middleware\CheckRole::class,
];
5. Menambahkan Fitur Pembayaran Zakat
Buat model dan migration untuk pembayaran zakat:
bash
Verify
Open In Editor
Run
Copy code
php artisan make:model PembayaranZakat -m
Edit file migration di database/migrations/xxxx_xx_xx_create_pembayaran_zakats_table.php:
php
Verify
Open In Editor
Run
Copy code
public function up()
Schema::create('pembayaran_zakats', function (Blueprint $table) {
$table->id();
$table->foreignId('penerima_zakat_id')->constrained()->onDelete('cascade');
$table->decimal('jumlah', 10, 2);
$table->timestamps();
});
Jalankan migration:
bash
Verify
Open In Editor
Run
Copy code
php artisan migrate
6. Buat Controller untuk Pembayaran Zakat
Buat controller untuk mengelola pembayaran zakat:
bash
Verify
Open In Editor
Run
Copy code
php artisan make:controller PembayaranZakatController
Edit file app/Http/Controllers/[Link]:
php
Verify
Open In Editor
Run
Copy code
namespace App\Http\Controllers;
use App\Models\PenerimaZakat;
use App\Models\PembayaranZakat;
use Illuminate\Http\Request;
class PembayaranZakatController extends Controller
{
public function index()
$pembayaranZakats = PembayaranZakat::with('penerimaZakat')->get();
return view('pembayaran_zakat.index', compact('pembayaranZakats'));
public function create()
$penerimaZakats = PenerimaZakat::all();
return view('pembayaran_zakat.create', compact('penerimaZakats'));
public function store(Request $request)
$request->validate([
'penerima_zakat_id' => 'required|exists:penerima_zakats,id',
'jumlah' => 'required|numeric',
]);
PembayaranZakat::create($request->all());
return redirect()->route('pembayaran_zakat.index')->with('success', 'Pembayaran zakat berhasil
ditambahkan.');
7. Buat Route untuk Pembayaran Zakat
Edit file routes/[Link] untuk menambahkan route pembayaran zakat:
php
Verify
Open In Editor
Run
Copy code
use App\Http\Controllers\PembayaranZakatController;
Route::resource('pembayaran_zakat', PembayaranZakatController::class)->middleware('role:admin');
8. Buat View untuk Pembayaran Zakat
Buat folder resources/views/pembayaran_zakat dan buat file [Link] dan [Link]`.
[Link]
blade
Verify
Open In Editor
Run
Copy code
@extends('[Link]')
@section('content')
<h1>Data Pembayaran Zakat</h1>
<a href="{{ route('pembayaran_zakat.create') }}">Tambah Pembayaran Zakat</a>
<table>
<thead>
<tr>
<th>Penerima Zakat</th>
<th>Jumlah</th>
<th>Tanggal</th>
</tr>
</thead>
<tbody>
@foreach ($pembayaranZakats as $pembayaran)
<tr>
<td>{{ $pembayaran->penerimaZakat->nama }}</td>
<td>{{ $pembayaran->jumlah }}</td>
<td>{{ $pembayaran->created_at }}</td>
</tr>
@endforeach
</tbody>
</table>
@endsection
[Link]
blade
Verify
Open In Editor
Run
Copy code
@extends('[Link]')
@section('content')
<h1>Tambah Pembayaran Zakat</h1>
<form action="{{ route('pembayaran_zakat.store') }}" method="POST">
@csrf
<label for="penerima_zakat_id">Penerima Zakat:</label>
<select name="penerima_zakat_id" required>
@foreach ($penerimaZakats as $penerima)
<option value="{{ $penerima->id }}">{{ $penerima->nama }}</option>
@endforeach
</select>
<label for="jumlah">Jumlah:</label>
<input type="number" name="jumlah" required>
<button type="submit">Simpan</button>
</form>
@endsection
9. Mengatur Role Pengguna
Anda dapat mengatur role pengguna saat pendaftaran atau melalui seeder. Misalnya, untuk
menambahkan admin:
php
Verify
Open In Editor
Run
Copy code
use App\Models\User;
User ::create([
'name' => 'Admin',
'email' => 'admin@[Link]',
'password' => bcrypt('password'),
'role' => 'admin',
]);
10. Menggunakan Middleware di Route
Pastikan Anda menggunakan middleware role pada route yang memerlukan akses admin. Contoh:
php
Verify
Open In Editor
Run
Copy code
Route::group(['middleware' => ['auth']], function () {
Route::resource('penerima_zakat', PenerimaZakatController::class);
Route::resource('pembayaran_zakat', PembayaranZakatController::class)-
>middleware('role:admin');
});
11. Menjalankan Aplikasi
Setelah semua langkah di atas selesai, Anda bisa menjalankan aplikasi dengan perintah:
bash
Verify
Open In Editor
Run
Copy code
php artisan serve
Akses aplikasi melalui browser di [Link]
Dengan penambahan ini, Anda sekarang memiliki fitur pembayaran zakat dan sistem login multi-role
antara admin dan user. Admin dapat mengelola data penerima zakat dan pembayaran zakat,
sementara user dapat mengakses informasi yang relevan. Anda dapat mengembangkan lebih lanjut
sesuai dengan kebutuhan proposal skripsi Anda.
You
apakah codingan ini untuk laravel 11?
BLACKBOXAI
Saat ini, Laravel 11 belum dirilis. Versi terbaru yang tersedia adalah Laravel 10, yang dirilis pada
Februari 2023. Namun, kode yang saya berikan sebelumnya dirancang untuk Laravel 9 dan 10, dan
seharusnya juga dapat berfungsi dengan baik di Laravel 11 ketika dirilis, dengan beberapa
penyesuaian yang mungkin diperlukan tergantung pada perubahan yang diperkenalkan di versi baru
tersebut.
Jika Anda menggunakan Laravel 10, Anda dapat mengikuti langkah-langkah yang saya berikan.
Pastikan untuk memeriksa dokumentasi resmi Laravel untuk versi yang Anda gunakan untuk
memastikan bahwa tidak ada perubahan signifikan yang mempengaruhi kode yang telah saya
berikan.
Jika Anda ingin memastikan bahwa kode tersebut kompatibel dengan Laravel 11 setelah dirilis, Anda
dapat memeriksa changelog dan dokumentasi resmi Laravel saat versi tersebut tersedia.
You
okay tambahkan fitur dashboard admin dan juga CRUD bagi admin untuk mengelola data zakat
BLACKBOXAI
Tentu! Berikut adalah langkah-langkah untuk menambahkan fitur dashboard admin dan CRUD
(Create, Read, Update, Delete) bagi admin untuk mengelola data zakat dalam aplikasi Laravel Anda.
1. Buat Dashboard Admin
Buat route untuk dashboard admin di routes/[Link]:
php
Verify
Open In Editor
Run
Copy code
Route::get('/admin/dashboard', [AdminController::class, 'dashboard'])->middleware('role:admin')-
>name('[Link]');
Buat controller untuk admin:
bash
Verify
Open In Editor
Run
Copy code
php artisan make:controller AdminController
Edit file app/Http/Controllers/[Link]:
php
Verify
Open In Editor
Run
Copy code
namespace App\Http\Controllers;
use App\Models\PenerimaZakat;
use App\Models\PembayaranZakat;
class AdminController extends Controller
public function dashboard()
{
$totalPenerima = PenerimaZakat::count();
$totalPembayaran = PembayaranZakat::count();
return view('[Link]', compact('totalPenerima', 'totalPembayaran'));
2. Buat View untuk Dashboard Admin
Buat folder resources/views/admin dan buat file [Link]:
blade
Verify
Open In Editor
Run
Copy code
@extends('[Link]')
@section('content')
<h1>Dashboard Admin</h1>
<div>
<h2>Total Penerima Zakat: {{ $totalPenerima }}</h2>
<h2>Total Pembayaran Zakat: {{ $totalPembayaran }}</h2>
</div>
@endsection
3. CRUD untuk Data Penerima Zakat
Kita sudah memiliki controller PenerimaZakatController. Sekarang kita akan menambahkan fungsi
untuk mengelola data penerima zakat.
Update PenerimaZakatController
Edit file app/Http/Controllers/[Link] untuk menambahkan fungsi edit dan
update:
php
Verify
Open In Editor
Run
Copy code
public function edit($id)
$penerima = PenerimaZakat::findOrFail($id);
return view('penerima_zakat.edit', compact('penerima'));
public function update(Request $request, $id)
$request->validate([
'nama' => 'required',
'alamat' => 'required',
'no_telepon' => 'required',
'jumlah_zakat' => 'required|numeric',
]);
$penerima = PenerimaZakat::findOrFail($id);
$penerima->update($request->all());
return redirect()->route('penerima_zakat.index')->with('success', 'Data penerima zakat berhasil
diperbarui.');
public function destroy($id)
{
$penerima = PenerimaZakat::findOrFail($id);
$penerima->delete();
return redirect()->route('penerima_zakat.index')->with('success', 'Data penerima zakat berhasil
dihapus.');
Update Route
Pastikan route untuk edit dan delete sudah ada di routes/[Link]:
php
Verify
Open In Editor
Run
Copy code
Route::resource('penerima_zakat', PenerimaZakatController::class)->middleware('role:admin');
Buat View untuk Edit Penerima Zakat
Buat file [Link] di folder resources/views/penerima_zakat:
blade
Verify
Open In Editor
Run
Copy code
@extends('[Link]')
@section('content')
<h1>Edit Penerima Zakat</h1>
<form action="{{ route('penerima_zakat.update', $penerima->id) }}" method="POST">
@csrf
@method('PUT')
<label for="nama">Nama:</label>
<input type="text" name="nama" value="{{ $penerima->nama }}" required>
<label for="alamat">Alamat:</label>
<input type="text" name="alamat" value="{{ $penerima->alamat }}" required>
<label for="no_telepon">No Telepon:</label>
<input type="text" name="no_telepon" value="{{ $penerima->no_telepon }}" required>
<label for="jumlah_zakat">Jumlah Zakat:</label>
<input type="number" name="jumlah_zakat" value="{{ $penerima->jumlah_zakat }}" required>
<button type="submit">Update</button>
</form>
@endsection
4. Menambahkan Fitur CRUD untuk Pembayaran Zakat
Kita juga perlu menambahkan fungsi CRUD untuk pembayaran zakat di PembayaranZakatController.
Update PembayaranZakatController
Edit file app/Http/Controllers/[Link] untuk menambahkan fungsi edit dan
update:
php
Verify
Open In Editor
Run
Copy code
public function edit($id)
$pemb ayaran = PembayaranZakat::findOrFail($id);
return view('pembayaran_zakat.edit', compact('pembayaran'));
public function update(Request $request, $id)
$request->validate([
'jumlah' => 'required|numeric',
'tanggal' => 'required|date',
'metode' => 'required',
]);
$pembayaran = PembayaranZakat::findOrFail($id);
$pembayaran->update($request->all());
return redirect()->route('pembayaran_zakat.index')->with('success', 'Data pembayaran zakat
berhasil diperbarui.');
public function destroy($id)
$pembayaran = PembayaranZakat::findOrFail($id);
$pembayaran->delete();
return redirect()->route('pembayaran_zakat.index')->with('success', 'Data pembayaran zakat
berhasil dihapus.');
Update Route
Pastikan route untuk edit dan delete sudah ada di routes/[Link]:
php
Verify
Open In Editor
Run
Copy code
Route::resource('pembayaran_zakat', PembayaranZakatController::class)->middleware('role:admin');
Buat View untuk Edit Pembayaran Zakat
Buat file [Link] di folder resources/views/pembayaran_zakat:
blade
Verify
Open In Editor
Run
Copy code
@extends('[Link]')
@section('content')
<h1>Edit Pembayaran Zakat</h1>
<form action="{{ route('pembayaran_zakat.update', $pembayaran->id) }}" method="POST">
@csrf
@method('PUT')
<label for="jumlah">Jumlah:</label>
<input type="number" name="jumlah" value="{{ $pembayaran->jumlah }}" required>
<label for="tanggal">Tanggal:</label>
<input type="date" name="tanggal" value="{{ $pembayaran->tanggal }}" required>
<label for="metode">Metode:</label>
<input type="text" name="metode" value="{{ $pembayaran->metode }}" required>
<button type="submit">Update</button>
</form>
@endsection
5. Menambahkan Menu Navigasi untuk Admin
Agar admin dapat mengakses dashboard dan fitur CRUD, tambahkan menu navigasi di layout admin
Anda:
blade
Verify
Open In Editor
Run
Copy code
<ul>
<li><a href="{{ route('[Link]') }}">Dashboard</a></li>
<li><a href="{{ route('penerima_zakat.index') }}">Kelola Penerima Zakat</a></li>
<li><a href="{{ route('pembayaran_zakat.index') }}">Kelola Pembayaran Zakat</a></li>
</ul>
6. Testing
Setelah semua fitur ditambahkan, lakukan pengujian untuk memastikan bahwa semua fungsi CRUD
berjalan dengan baik dan dashboard admin menampilkan data yang benar.
Dengan langkah-langkah di atas, Anda telah berhasil menambahkan fitur dashboard admin dan CRUD
untuk mengelola data zakat dalam aplikasi Laravel Anda. Pastikan untuk menyesuaikan tampilan dan
fungsionalitas sesuai dengan kebutuhan spesifik aplikasi Anda.
You
tambahkan sedikit css dan juga navigasi seperti navbar dan side bar pada halaman user dan admin
BLACKBOXAI
Tentu! Berikut adalah cara untuk menambahkan sedikit CSS dan membuat navigasi seperti navbar
dan sidebar pada halaman user dan admin di aplikasi Laravel Anda.
1. Menambahkan CSS
Anda bisa menambahkan CSS di file public/css/[Link]. Berikut adalah contoh CSS sederhana untuk
navbar dan sidebar:
public/css/[Link]
css
Verify
Open In Editor
Run
Copy code
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
.navbar {
background-color: #4CAF50;
color: white;
padding: 15px;
text-align: center;
.sidebar {
height: 100%;
width: 250px;
position: fixed;
top: 0;
left: 0;
background-color: #f4f4f4;
padding-top: 20px;
.sidebar a {
padding: 10px 15px;
text-decoration: none;
color: #333;
display: block;
.sidebar a:hover {
background-color: #ddd;
.content {
margin-left: 260px; /* Space for sidebar */
padding: 20px;
.footer {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
2. Membuat Navbar dan Sidebar
Berikut adalah contoh struktur HTML untuk navbar dan sidebar. Anda bisa menambahkan ini di
layout utama Anda, misalnya di resources/views/layouts/[Link].
resources/views/layouts/[Link]
blade
Verify
Open In Editor
Run
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{{ asset('css/[Link]') }}">
<title>Dashboard</title>
</head>
<body>
<div class="navbar">
<h1>Dashboard Zakat</h1>
</div>
<div class="sidebar">
<h2>Menu</h2>
<a href="{{ route('[Link]') }}">Dashboard</a>
<a href="{{ route('penerima_zakat.index') }}">Kelola Penerima Zakat</a>
<a href="{{ route('pembayaran_zakat.index') }}">Kelola Pembayaran Zakat</a>
<a href="{{ route('logout') }}" onclick="[Link]();
[Link]('logout-form').submit();">Logout</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
@csrf
</form>
</div>
<div class="content">
@yield('content')
</div>
<div class="footer">
<p>© 2024 Sistem Manajemen Zakat</p>
</div>
</body>
</html>
3. Menambahkan Navigasi untuk Halaman User
Jika Anda juga ingin menambahkan navigasi untuk halaman user, Anda bisa membuat layout terpisah
atau menggunakan layout yang sama dengan menyesuaikan menu. Misalnya, Anda bisa membuat
file resources/views/layouts/[Link]:
resources/views/layouts/[Link]
blade
Verify
Open In Editor
Run
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{{ asset('css/[Link]') }}">
<title>User Dashboard</title>
</head>
<body>
<div class="navbar">
<h1>Dashboard User</h1>
</div>
<div class="sidebar">
<h2>Menu</h2>
<a href="{{ route('penerima_zakat.index') }}">Lihat Penerima Zakat</a>
<a href="{{ route('pembayaran_zakat.index') }}">Lihat Pembayaran Zakat</a>
<a href="{{ route('logout') }}" onclick="[Link]();
[Link]('logout-form').submit();">Logout</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
@csrf
</form>
</div>
<div class="content">
@yield('content')
</div>
<div class="footer">
<p>© 2024 Sistem Manajemen Zakat</p>
</div>
</body>
</html>
4. Menggunakan Layout di Halaman Admin dan User
Pastikan untuk menggunakan layout yang sesuai di halaman admin dan user dengan menambahkan
directive @extends di bagian atas file view Anda. Contoh:
resources/views/admin/[Link]
blade
Verify
Open In Editor
Run
Copy code
@extends('[Link]')
@section('content')
<h1>Dashboard Admin</h1>
<div>
<h2>Total Penerima Zakat: {{ $totalPenerima }}</h2>
<h2>Total Pembayaran Zakat: {{ $totalPembayaran }}</h2>
</div>
@endsection
resources/views/user/[Link]
blade
Verify
Open In Editor
Run
Copy code
@extends('[Link]')
@section('content')
<h1>Dashboard User</h1>
<p>Selamat datang di dashboard pengguna. Anda dapat melihat informasi penerima zakat dan
pembayaran zakat di sini.</p>
@endsection
5. Testing
Setelah menambahkan CSS dan navigasi, pastikan untuk menguji tampilan di browser untuk
memastikan bahwa navbar dan sidebar berfungsi dengan baik dan tampilan responsif.
Dengan langkah-langkah di atas, Anda telah berhasil menambahkan CSS dan navigasi seperti navbar
dan sidebar pada halaman user dan admin di aplikasi Laravel Anda. Pastikan untuk menyesuaikan
lebih lanjut sesuai dengan kebutuhan spesifik aplikasi Anda.
You
okay saya ingin tau apakan kamu bisa membuat dua dashboard terpisah untuk user bagi yang
membayar zakat dan juga penerima zakat agar melihat tampilan yang berbeda
BLACKBOXAI
Tentu! Anda dapat membuat dua dashboard terpisah untuk pengguna yang membayar zakat dan
penerima zakat dengan mengikuti langkah-langkah berikut:
1. Menambahkan Role pada User
Pastikan bahwa model User Anda memiliki role yang membedakan antara pengguna yang membayar
zakat dan penerima zakat. Anda bisa menggunakan kolom role yang sudah ditambahkan sebelumnya.
2. Membuat Route untuk Dashboard
Tambahkan route untuk dashboard pengguna di routes/[Link]:
php
Verify
Open In Editor
Run
Copy code
Route::get('/user/dashboard', [User Controller::class, 'dashboard'])->middleware('auth')-
>name('[Link]');
Route::get('/user/dashboard/pembayar', [User Controller::class, 'dashboardPembayar'])-
>middleware('auth')->name('[Link]');
Route::get('/user/dashboard/penerima', [User Controller::class, 'dashboardPenerima'])-
>middleware('auth')->name('[Link]');
3. Membuat UserController
Buat controller untuk mengelola dashboard pengguna:
bash
Verify
Open In Editor
Run
Copy code
php artisan make:controller UserController
Edit file app/Http/Controllers/[Link]:
php
Verify
Open In Editor
Run
Copy code
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class UserController extends Controller
public function dashboard()
return view('[Link]');
public function dashboardPembayar()
// Logika untuk menampilkan data bagi pengguna yang membayar zakat
return view('user.dashboard_pembayar');
public function dashboardPenerima()
// Logika untuk menampilkan data bagi penerima zakat
return view('user.dashboard_penerima');
4. Membuat View untuk Dashboard
Buat folder resources/views/user dan buat file untuk masing-masing dashboard.
[Link]
blade
Verify
Open In Editor
Run
Copy code
@extends('[Link]')
@section('content')
<h1>Dashboard User</h1>
<p>Silakan pilih jenis dashboard yang ingin Anda akses:</p>
<a href="{{ route('[Link]') }}">Dashboard Pembayar Zakat</a>
<a href="{{ route('[Link]') }}">Dashboard Penerima Zakat</a>
@endsection
dashboard_pembayar.[Link]
blade
Verify
Open In Editor
Run
Copy code
@extends('[Link]')
@section('content')
<h1>Dashboard Pembayar Zakat</h1>
<p>Selamat datang di dashboard pembayar zakat. Di sini Anda dapat melihat informasi terkait
pembayaran zakat Anda.</p>
<!-- Tambahkan informasi dan fitur yang relevan untuk pembayar zakat -->
@endsection
dashboard_penerima.[Link]
blade
Verify
Open In Editor
Run
Copy code
@extends('[Link]')
@section('content')
<h1>Dashboard Penerima Zakat</h1>
<p>Selamat datang di dashboard penerima zakat. Di sini Anda dapat melihat informasi terkait
penerimaan zakat Anda.</p>
<!-- Tambahkan informasi dan fitur yang relevan untuk penerima zakat -->
@endsection
5. Menambahkan Navigasi di Halaman User
Pastikan untuk menambahkan navigasi di layout user Anda agar pengguna dapat dengan mudah
berpindah antara dashboard pembayar dan penerima zakat.
resources/views/layouts/[Link]
blade
Verify
Open In Editor
Run
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{{ asset('css/[Link]') }}">
<title>User Dashboard</title>
</head>
<body>
<div class="navbar">
<h1>Dashboard User</h1>
</div>
<div class="sidebar">
<h2>Menu</h2>
<a href="{{ route('[Link]') }}">Dashboard</a>
<a href="{{ route('[Link]') }}">Dashboard Pembayar Zakat</a>
<a href="{{ route('[Link]') }}">Dashboard Penerima Zakat</a>
<a href="{{ route('logout') }}" onclick="[Link]();
[Link]('logout-form').submit();">Logout</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
@csrf
</form>
</div>
<div class="content">
@yield('content')
</div>
<div class="footer">
<p>© 2024 Sistem Manajemen Zakat</p>
</div>
</body>
</html>
6. Testing
Setelah semua langkah di atas selesai, lakukan pengujian untuk memastikan bahwa pengguna dapat
mengakses dashboard yang sesuai dengan peran mereka dan melihat tampilan yang berbeda
berdasarkan peran mereka sebagai pembayar zakat atau penerima zakat. Pastikan untuk memeriksa
apakah semua tautan dan fitur berfungsi dengan baik.
7. Menambahkan Logika Akses Berdasarkan Role
Jika Anda ingin membatasi akses ke dashboard tertentu berdasarkan role pengguna, Anda bisa
menambahkan logika di dalam metode dashboardPembayar dan dashboardPenerima di User
Controller:
php
Verify
Open In Editor
Run
Copy code
public function dashboardPembayar()
if (auth()->user()->role !== 'pembayar') {
return redirect()->route('[Link]')->with('error', 'Akses ditolak.');
return view('user.dashboard_pembayar');
public function dashboardPenerima()
if (auth()->user()->role !== 'penerima') {
return redirect()->route('[Link]')->with('error', 'Akses ditolak.');
}
return view('user.dashboard_penerima');
Dengan langkah-langkah ini, Anda telah berhasil membuat dua dashboard terpisah untuk pengguna
yang membayar zakat dan penerima zakat, serta memastikan bahwa tampilan dan akses sesuai
dengan peran masing-masing pengguna.