🚀 Membuat Website Laravel Pertamamu: Dashboard & Profil Mahasiswa!

April 26, 2025
Muhamad Taufiq Hidayat

📚 Laravel Dasar MVC 📚

🎯 Studi Kasus: Dashboard dan Profil Mahasiswa

Laravel adalah salah satu framework PHP paling populer yang menggunakan konsep MVC (Model-View-Controller) untuk memisahkan logika bisnis, tampilan, dan kontrol alur data. Dalam artikel ini, kita akan membahas penerapan dasar Laravel MVC melalui studi kasus sederhana: membuat website mahasiswa dengan dua fitur utama, yaitu Halaman Dashboard dan Halaman Profil.

Studi kasus ini cocok untuk pemula yang ingin memahami alur kerja Laravel secara utuh, mulai dari routing, controller, hingga blade templating.

🛠️ Fitur yang Akan Kita Bangun:

Dashboard: Menampilkan ucapan selamat otomatis (pagi/siang/sore/malam) berdasarkan waktu saat ini, serta menampilkan waktu akses user.
Profil Mahasiswa: Menampilkan data pribadi mahasiswa, seperti Nama, NIM, dan Kelas, yang bisa diatur secara manual melalui controller.

Dengan mengikuti tutorial ini, kamu akan memahami cara kerja struktur MVC pada Laravel secara langsung, sekaligus bisa membuat aplikasi sederhana yang bisa dikembangkan lebih lanjut.

💻 A. Membuat Projek Laravel

1. Persiapan

Sebelum memulai membangun aplikasi Laravel, pastikan perangkat kamu telah terinstall beberapa software penting berikut:

🧩 PHP 8.2 atau lebih tinggi
Laravel membutuhkan versi PHP minimal 8.2 agar semua fitur dan dependensi dapat berjalan dengan baik. Kamu bisa mengeceknya lewat terminal atau CMD dengan perintah:

php -v

📦 Composer
Composer adalah dependency manager untuk PHP yang digunakan untuk meng-install Laravel dan paket-paket yang dibutuhkan.

Cek composer dengan:

1	composer -V

🐬 Database: MySQL

XAMPP (Windows/Mac/Linux)
Laragon (Windows, sangat cocok untuk Laravel)

2. Instalasi Laravel

Setelah semua persiapan selesai, sekarang saatnya kita mulai membuat proyek Laravel baru.

Buka terminal atau command prompt di direktori yang kamu inginkan, lalu jalankan perintah berikut:

1	composer create-project laravel/laravel praktikum_laravel

📁 Penjelasan:

composer create-project digunakan untuk membuat proyek baru dari paket yang tersedia.
laravel/laravel adalah paket resmi Laravel.
praktikum_laravel adalah nama folder proyek yang akan dibuat. Kamu bisa ganti sesuai kebutuhan.

Tunggu proses instalasi selesai. Laravel akan otomatis mengunduh semua dependensi dan membuat struktur folder yang diperlukan.

Jangan lupa masuk forder

1	cd praktikum_laravel

✅ Jika berhasil, kamu akan melihat struktur direktori seperti ini:

praktikum_laravel/

├── app/

├── bootstrap/

├── config/

├── database/

├── public/

├── resources/

├── routes/

├── storage/

├── tests/

└── artisan

Selanjutnya, kita akan menjalankan proyek Laravel untuk memastikan semuanya berjalan lancar. 🔧

3. Siapkan `config/app.php`

Cari bagian:

1	'timezone' => 'UTC',

menjadi

1	'timezone' => 'Asia/Jakarta',

Dengan pengaturan ini, semua fungsi waktu Laravel seperti now(), Carbon::now(), dan date() akan menggunakan zona waktu Jakarta (WIB).

🗂️ B. Memahami Struktur Folder Laravel

Setelah berhasil menginstall Laravel, kamu akan melihat banyak folder dan file di dalam direktori proyek. Untuk pemula, tidak semua folder perlu dipahami langsung — cukup fokus pada beberapa folder inti berikut ini:

📁 `app/`

Folder ini berisi logika utama aplikasi, termasuk:

Controller: mengatur alur logika dan respons yang dikirim ke pengguna.
Model: mewakili struktur dan relasi data yang disimpan di database.

Contoh: file HomeController.php dan Mahasiswa.php biasanya berada di sini.

📁 `resources/views/`

Di sinilah tempat kamu menaruh file tampilan (view) menggunakan Blade templating engine Laravel.
Ekstensi file-nya adalah .blade.php.

Contoh:

1 2	resources/views/dashboard.blade.php resources/views/profil.blade.php

📄 `routes/web.php`

File ini digunakan untuk mendefinisikan routing atau jalur URL dalam aplikasi kamu.
Misalnya, ketika user mengakses /dashboard, Laravel akan mencocokkan dengan route di file ini dan memanggil controller yang sesuai.

Contoh:

1	Route::get('/dashboard', [DashboardController::class, 'index']);

⚙️ `.env`

File ini menyimpan konfigurasi environment, seperti:

Pengaturan database
Nama aplikasi
Debug mode
(dan jika kamu sudah atur sebelumnya) Timezone

Contoh konfigurasi:

APP_NAME=Laravel

APP_ENV=local

DB_CONNECTION=mysql

DB_DATABASE=praktikum

DB_USERNAME=root

DB_PASSWORD=

Dengan memahami struktur folder ini, kamu akan lebih mudah mengikuti alur kerja Laravel dan memisahkan antara logika, tampilan, serta konfigurasi.

🧠 C. Konsep MVC

Laravel menggunakan arsitektur MVC (Model–View–Controller) yang memisahkan logika aplikasi menjadi tiga bagian utama. Ini bertujuan untuk membuat kode lebih rapi, terstruktur, dan mudah dikembangkan.

🔹 a. Model

Model merupakan representasi data dan logika bisnis.
Digunakan untuk berinteraksi langsung dengan database — seperti mengambil, menyimpan, mengupdate, atau menghapus data.

📁 Letak:
app/Models/

🧩 Contoh

class Mahasiswa extends Model

{

protected $table = 'mahasiswa';

}

🔹 b. View

View bertugas untuk menampilkan data ke pengguna.
Di Laravel, tampilan dibuat menggunakan Blade, yaitu template engine khusus Laravel yang memudahkan penggunaan logika sederhana di dalam HTML.

📁 Letak:
resources/views/

🧩 Contoh:
dashboard.blade.php, profil.blade.php

🔹 c. Controller

Controller mengatur alur antara model dan view.

📁 Letak:
app/Http/Controllers/

🧩 Contoh:

class DashboardController extends Controller

{

public function index()

{

$nama = "Taufiq";

return view('dashboard', compact('nama'));

}

Dengan memahami konsep MVC ini, kamu akan lebih mudah membangun aplikasi Laravel secara efisien dan terstruktur.

🔧 D. Membuat Controller `Dashboard`

Untuk menampilkan halaman dashboard, kita perlu membuat sebuah controller yang bertugas mengelola logika dan data yang akan dikirim ke view.

1. Buat Controller

Buka terminal di root folder proyek Laravel, lalu jalankan perintah berikut:

1	php artisan make:controller DashboardController --resource

Perintah ini akan membuat file controller bernama DashboardController.php di folder:

1	app/Http/Controllers/

2. Tambahkan Logika ke Method `index`

Buka file DashboardController.php, lalu temukan method index(). Tambahkan kode berikut:

public function index()

{

// Set nama dan NIM

$nama = "M Taufiq Hidayat";

$nim = 2211102342;

// Dapatkan jam saat ini

date_default_timezone_set('Asia/Jakarta');

$jam = date('H');

// Tentukan salam sesuai waktu

$salam = match (true) {

$jam >= 5 && $jam < 12 => 'Selamat Pagi',

$jam >= 12 && $jam < 15 => 'Selamat Siang',

$jam >= 15 && $jam < 18 => 'Selamat Sore',

default => 'Selamat Malam',

};

// Waktu akses saat ini

$waktuAkses = date('H:i:s');

// Kirim data ke view

return view('dashboard', compact('nama', 'salam', 'waktuAkses', 'nim'));

}

📌 Penjelasan Singkat:

match (true) digunakan untuk menentukan salam berdasarkan waktu (versi modern dari if-else).
compact(...) mengirim variabel ke tampilan (view) dashboard.blade.php.

📄 E. Membuat Template Master `app.blade.php`

Agar tampilan halaman lebih konsisten dan rapi, kita bisa membuat template master menggunakan Blade. Template ini akan menjadi kerangka utama yang bisa digunakan di semua halaman (dashboard, profil, dll).

🗂️ Lokasi File

Buat file baru di:

1	resources/views/layouts/app.blade.php

Atau kamu bisa buat dengan ketik perintah

alau kamu ingin membuat file tampilan Blade (.blade.php) langsung lewat terminal, kamu bisa menggunakan perintah

1	php artisan make:view nama_view

✅ Contoh Kasus: Membuat Template Master

Misalnya kamu ingin membuat file app.blade.php di dalam resources/views/layouts/, cukup jalankan:

1	php artisan make:view layouts.app

💡 Penjelasan:

Titik (.) di antara layouts dan app menandakan bahwa app.blade.php berada di dalam folder layouts.
Laravel akan membuat struktur seperti ini:
1
2
3
4

resources/
└── views/
└── layouts/
└── app.blade.php

🧾 Isi dari `layouts/app.blade.php`

Setelah file dibuat, kamu bisa isi dengan template master seperti berikut:

<!DOCTYPE html>

<head>

<title>@yield('title')</title>

</head>

<body>

@yield('content')

</div>

</body>

</html>

📊 F. Membuat View Dashboard (`resources/views/dashboard.blade.php`)

📌 Cara Menggunakannya di View Lain

📄 1. Buat View `dashboard.blade.php`

Kamu bisa buat langsung dengan perintah artisan:

1	php artisan make:view dashboard

File ini akan otomatis muncul di:

1	resources/views/dashboard.blade.php

Jika nanti kamu membuat view dashboard.blade.php, kamu bisa “extend” dari layouts.app seperti ini:

@extends('app')

@section('title', 'Dashboard')

@section('content')

<h4 class="mb-0">👨‍🎓 Dashboard Mahasiswa</h4>

</div>

<h1 class="card-title fw-bold">{{ $salam }}, {{ $nama }} 👋</h1>

Waktu Akses: <span class="badge bg-success">{{ $waktuAkses }}</span>

</p>

<hr>

<p class="text-muted small fst-italic">Selamat datang kembali, semoga harimu menyenangkan!</p>

</div>

<a href="/profil" class="btn btn-outline-primary px-4">Lihat Profil</a>

</div>

@endsection

1. `@extends('layouts.app')`

Baris ini menunjukkan bahwa file Blade ini menggunakan template master dari file resources/views/layouts/app.blade.php. Artinya:

Struktur HTML dasar seperti <head>, <body>, CDN Bootstrap, dsb, sudah ada di layouts.app.
Kamu hanya tinggal isi bagian-bagian tertentu yang disediakan template, seperti @yield('title') dan @yield('content').

2. `@section('title', 'Dashboard')`

Baris ini akan mengisi bagian @yield('title') di layout utama (app.blade.php) dengan teks "Dashboard", biasanya akan ditampilkan sebagai <title>Dashboard</title> di tab browser.

3. `@section('content') @endsection`

Ini adalah tempat untuk menuliskan isi utama halaman (bagian konten yang berbeda-beda tiap halaman).

Namun, dalam contoh ini:

1 2	@section('content') @endsection

Bagian content masih kosong, sehingga kalau halaman ini dirender, tidak ada konten apa pun yang tampil di bagian body (selain template umum dari layout).

🔧 Cara Mengisinya:

Untuk menampilkan isi dashboard seperti salam, nama, dsb, kamu harus isi bagian content. Misalnya:

@section('content')

<h1>{{ $salam }}, {{ $nama }}</h1>

<p>Waktu Akses: {{ $waktuAkses }}</p>

</div>

@endsection

Kesimpulan

Saat kamu melihat @section('content') @endsection masih kosong, itu artinya halaman ini belum menampilkan apa-apa di bagian utamanya. Tinggal kamu isi di bagian itu untuk menampilkan data atau HTML sesuai kebutuhan halaman.

👤 G. Membuat Controller Profil

public function index()

{

$mahasiswa = [

'nama' => 'Febrilia Ananda',

'nim' => '2211102342',

'kelas' => 'IF-PWT-05'

];

return view('profil', ['mahasiswa' => $mahasiswa]);

}

📄 H. Membuat View Profil (`resources/views/profil.blade.php`)

@extends('app')

@section('title', 'Profil Mahasiswa')

@section('content')

<h4>Profil Mahasiswa</h4>

</div>

<strong>Nama:</strong> {{ $mahasiswa['nama'] }}

</li>

<strong>NIM:</strong> {{ $mahasiswa['nim'] }}

</li>

<strong>Kelas:</strong> {{ $mahasiswa['kelas'] }}

</li>

</ul>

</div>

<a href="/dashboard" class="btn btn-primary">Kembali ke Dashboard</a>

</div>

@endsection

🌐 I. Routing (`routes/web.php`)

use Illuminate\Support\Facades\Route;

use App\Http\Controllers\DashboardController;

use App\Http\Controllers\ProfilController;

Route::get('/dashboard', [DashboardController::class, 'index']);

Route::get('/profil', [ProfilController::class, 'index']);

✅ J. Hasil Output

Akses http://localhost:8000/dashboard → menampilkan salam & waktu akses.
Akses http://localhost:8000/profil → menampilkan biodata mahasiswa.

Kategori:

Uncategorized

Tags:

Microsoft

Muhamad Taufiq Hidayat

Author's Profile

Postingan Terbaru

🚀 Membuat Website Laravel Pertamamu: Dashboard & Profil Mahasiswa!

📚 Laravel Dasar MVC 📚

🎯 Studi Kasus: Dashboard dan Profil Mahasiswa

🛠️ Fitur yang Akan Kita Bangun:

💻 A. Membuat Projek Laravel

1. Persiapan

2. Instalasi Laravel

3. Siapkan config/app.php

🗂️ B. Memahami Struktur Folder Laravel

📁 app/

📁 resources/views/

📄 routes/web.php

⚙️ .env

🧠 C. Konsep MVC

🔹 a. Model

🔹 b. View

🔹 c. Controller

🔧 D. Membuat Controller Dashboard

1. Buat Controller

2. Tambahkan Logika ke Method index

📄 E. Membuat Template Master app.blade.php

🗂️ Lokasi File

✅ Contoh Kasus: Membuat Template Master

🧾 Isi dari layouts/app.blade.php

📊 F. Membuat View Dashboard (resources/views/dashboard.blade.php)

📌 Cara Menggunakannya di View Lain

📄 1. Buat View dashboard.blade.php

1. @extends('layouts.app')

2. @section('title', 'Dashboard')

3. @section('content') @endsection

🔧 Cara Mengisinya:

Kesimpulan

👤 G. Membuat Controller Profil

📄 H. Membuat View Profil (resources/views/profil.blade.php)

🌐 I. Routing (routes/web.php)

✅ J. Hasil Output

Kategori:

Tags:

3. Siapkan `config/app.php`

📁 `app/`

📁 `resources/views/`

📄 `routes/web.php`

⚙️ `.env`

🔧 D. Membuat Controller `Dashboard`

2. Tambahkan Logika ke Method `index`

📄 E. Membuat Template Master `app.blade.php`

🧾 Isi dari `layouts/app.blade.php`

📊 F. Membuat View Dashboard (`resources/views/dashboard.blade.php`)

📄 1. Buat View `dashboard.blade.php`

1. `@extends('layouts.app')`

2. `@section('title', 'Dashboard')`

3. `@section('content') @endsection`

📄 H. Membuat View Profil (`resources/views/profil.blade.php`)

🌐 I. Routing (`routes/web.php`)