Jejak pengalaman belajar dan sharing IT saya, semua tertuang disini.
Jejak pengalaman belajar dan sharing IT saya, semua tertuang disini.
Materi belum tersedia
Materi belum tersedia
Materi belum tersedia
Materi belum tersedia
Materi belum tersedia
Materi belum tersedia
Materi belum tersedia
Materi belum tersedia
Mahasiswa mampu mengimplementasikan design website biografi yang telah dibuat sebelumnya ke dalam project Laravel menggunakan konsep MVC, routing, controller, dan Blade Template.
Pada praktikum sebelumnya, mahasiswa telah membuat design website biografi menggunakan:
Pada materi ini, design tersebut akan diintegrasikan ke dalam Laravel agar menjadi aplikasi web berbasis framework Laravel.
Tujuan praktikum:
Buka terminal:
composer create-project laravel/laravel biografi-laravelcd biografi-laravelphp artisan servehttp://127.0.0.1:8000Folder penting:
| Folder | Fungsi |
|---|---|
| resources/views | File Blade |
| public | Asset website |
| routes | Routing |
| app/Http/Controllers | Controller |
Mahasiswa sudah memiliki:
Pindahkan asset ke folder:
public/
├── css/
├── js/
└── images/Contoh:
style.cssdipindahkan ke:
public/css/style.cssContoh:
profile.jpgdipindahkan ke:
public/images/profile.jpgFolder public digunakan untuk:
Buat file:
resources/views/biografi.blade.phpSalin isi HTML sebelumnya ke file Blade.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Website Biografi</title>
</head>
<body>
<h1>Profil Mahasiswa</h1>
</body>
</html>Gunakan helper Laravel:
<link rel="stylesheet" href="{{ asset('css/style.css') }}"><img src="{{ asset('images/profile.jpg') }}">asset()Digunakan untuk:
Command:
php artisan make:controller BiografiControllerapp/Http/Controllers/BiografiController.php<?php
namespace App\Http\Controllers;
class BiografiController extends Controller
{
public function index()
{
return view('biografi');
}
}Method digunakan untuk:
File:
routes/web.phpuse App\Http\Controllers\BiografiController;Route::get('/biografi', [BiografiController::class, 'index']);Buka browser:
http://127.0.0.1:8000/biografiHalaman biografi tampil menggunakan Laravel.
public function index()
{
$nama = "Kadek Mahasiswa";
$jurusan = "Sistem Informasi";
return view('biografi', compact('nama', 'jurusan'));
}<h1>{{ $nama }}</h1>
<p>{{ $jurusan }}</p>Website menjadi:
File:
resources/views/layouts/app.blade.php<!DOCTYPE html>
<html>
<head>
<title>Website Biografi</title>
<link rel="stylesheet" href="{{ asset('css/style.css') }}">
</head>
<body>
<header>
<h1>Website Biografi</h1>
</header>
@yield('content')
<footer>
Copyright 2026
</footer>
</body>
</html>@extends('layouts.app')
@section('content')
<h2>{{ $nama }}</h2>
<p>{{ $jurusan }}</p>
@endsectionDigunakan agar:
Route
↓
Controller
↓
Blade View
↓
Browserroutes/web.php
app/Http/Controllers/BiografiController.php
resources/views/biografi.blade.php| Komponen | Fungsi |
|---|---|
| Route | Menentukan URL |
| Controller | Mengatur logic |
| View | Menampilkan halaman |
composer create-project laravel/laravel biografi-laravelphp artisan make:controller BiografiControllerFile:
resources/views/biografi.blade.phpGunakan:
{{ asset('css/style.css') }}dan:
{{ asset('images/profile.jpg') }}Route::get('/biografi', [BiografiController::class, 'index']);Laravel memungkinkan design website statis diubah menjadi aplikasi web yang lebih terstruktur menggunakan konsep MVC. Dengan mengintegrasikan HTML, CSS, dan asset ke dalam Blade Template, mahasiswa dapat membangun website biografi dinamis menggunakan framework Laravel secara profesional.