Laravel, framework PHP yang elegan dan powerful, menjadi pilihan populer bagi banyak developer untuk membangun aplikasi web modern. Tapi, memulai dengan Laravel bisa terasa menantang, terutama bagi pemula. Artikel ini akan memberikan contoh project Laravel sederhana untuk belajar, fokus pada implementasi kode mudah, agar Anda dapat memahami dasar-dasar Laravel dengan cepat dan efektif. Mari kita mulai!
1. Mengapa Belajar Laravel dengan Contoh Project Sederhana?
Memulai dengan teori dan dokumentasi bisa membosankan. Belajar melalui contoh project memberikan pendekatan yang lebih praktis dan interaktif. Dengan membangun sebuah aplikasi sederhana, Anda akan:
- Memahami Struktur Laravel: Melihat bagaimana file-file diorganisasikan dan bagaimana komponen-komponen Laravel berinteraksi.
- Menguasai Konsep Dasar: Mempelajari routing, controller, model, view, database migration, dan lainnya melalui implementasi langsung.
- Mengatasi Masalah dengan Praktis: Menemukan dan memecahkan masalah yang muncul selama proses pengembangan, yang akan memperkuat pemahaman Anda.
- Membangun Portofolio: Memiliki project kecil yang bisa Anda tunjukkan sebagai bukti kemampuan Anda.
Jadi, alih-alih hanya membaca tentang Laravel, mari kita langsung terjun ke contoh project Laravel sederhana untuk belajar!
2. Ide Project Sederhana: Aplikasi To-Do List
Untuk contoh project Laravel sederhana untuk belajar, kita akan membangun aplikasi To-Do List. Aplikasi ini memungkinkan pengguna untuk:
- Menambahkan tugas (to-do)
- Menandai tugas sebagai selesai
- Menghapus tugas
Kenapa To-Do List? Karena:
- Sederhana: Konsepnya mudah dipahami dan diimplementasikan.
- Relevan: To-Do List adalah aplikasi klasik yang bisa digunakan sebagai dasar untuk project yang lebih kompleks.
- Melibatkan Banyak Konsep Dasar: Menggunakan database, formulir, routing, dan tampilan.
3. Persiapan Lingkungan Pengembangan Laravel: Langkah Awal yang Penting
Sebelum mulai mengoding, pastikan Anda memiliki lingkungan pengembangan yang siap. Berikut langkah-langkahnya:
- PHP: Pastikan PHP sudah terinstall di komputer Anda. Laravel membutuhkan PHP versi 7.3 atau lebih tinggi. Anda bisa mengecek versi PHP dengan perintah
php -vdi terminal. - Composer: Composer adalah dependency manager untuk PHP. Download dan install Composer dari getcomposer.org.
- Database: Pilih database yang ingin Anda gunakan (MySQL, PostgreSQL, SQLite). Pastikan database server sudah terinstall dan berjalan. Untuk contoh project Laravel sederhana untuk belajar ini, kita akan menggunakan MySQL.
- Editor Kode: Gunakan editor kode favorit Anda (VS Code, Sublime Text, PHPStorm).
Setelah semua siap, buka terminal dan navigasi ke direktori tempat Anda ingin membuat project Laravel.
4. Membuat Project Laravel Baru: Memulai dengan composer create-project
Gunakan perintah berikut untuk membuat project Laravel baru:
composer create-project laravel/laravel todo-appPerintah ini akan mengunduh dan menginstall Laravel ke dalam folder todo-app. Ganti todo-app dengan nama project Anda jika perlu.
Setelah proses selesai, navigasi ke dalam folder project:
cd todo-app5. Konfigurasi Database: Menghubungkan Aplikasi dengan Data
Buka file .env yang terletak di root project. Cari bagian yang berkaitan dengan konfigurasi database. Sesuaikan dengan pengaturan database Anda. Contoh:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=todo_app
DB_USERNAME=root
DB_PASSWORD=Pastikan Anda sudah membuat database dengan nama todo_app (atau sesuai dengan konfigurasi Anda) di MySQL.
6. Membuat Model dan Migrasi: Definisi Struktur Data
Sekarang kita akan membuat model dan migrasi untuk tabel todos. Model merepresentasikan tabel di database, sedangkan migrasi digunakan untuk membuat dan memodifikasi struktur tabel.
Gunakan perintah berikut untuk membuat model Todo dan migrasi terkait:
php artisan make:model Todo -mPerintah ini akan membuat dua file:
app/Models/Todo.php: ModelTodo.database/migrations/YYYY_MM_DD_HHMMSS_create_todos_table.php: Migrasi untuk tabeltodos.
Buka file migrasi (database/migrations/YYYY_MM_DD_HHMMSS_create_todos_table.php). Modifikasi method up() menjadi seperti berikut:
<?php
use IlluminateDatabaseMigrationsMigration;
use IlluminateDatabaseSchemaBlueprint;
use IlluminateSupportFacadesSchema;
return new class extends Migration
{
/**
* Run the migrations.
*/
public function up(): void
{
Schema::create('todos', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->boolean('completed')->default(false);
$table->timestamps();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('todos');
}
};Kode ini akan membuat tabel todos dengan kolom:
id: Primary key, auto-increment.title: Judul tugas (string).completed: Status tugas (boolean, default false).created_at: Tanggal dan waktu pembuatan.updated_at: Tanggal dan waktu pembaruan.
Jalankan migrasi untuk membuat tabel di database:
php artisan migrate7. Membuat Controller: Logika Aplikasi dan Routing
Controller adalah tempat kita menulis logika aplikasi. Buat controller TodoController dengan perintah:
php artisan make:controller TodoControllerIni akan membuat file app/Http/Controllers/TodoController.php. Buka file tersebut dan tambahkan method-method berikut:
<?php
namespace AppHttpControllers;
use AppModelsTodo;
use IlluminateHttpRequest;
class TodoController extends Controller
{
public function index()
{
$todos = Todo::all();
return view('todos.index', compact('todos'));
}
public function create()
{
return view('todos.create');
}
public function store(Request $request)
{
$request->validate([
'title' => 'required|max:255',
]);
Todo::create($request->all());
return redirect()->route('todos.index')
->with('success', 'Todo created successfully.');
}
public function edit(Todo $todo)
{
return view('todos.edit', compact('todo'));
}
public function update(Request $request, Todo $todo)
{
$request->validate([
'title' => 'required|max:255',
]);
$todo->update($request->all());
return redirect()->route('todos.index')
->with('success', 'Todo updated successfully.');
}
public function destroy(Todo $todo)
{
$todo->delete();
return redirect()->route('todos.index')
->with('success', 'Todo deleted successfully.');
}
}Method-method ini:
index(): Menampilkan daftar semua to-do.create(): Menampilkan form untuk membuat to-do baru.store(): Menyimpan to-do baru ke database.edit(): Menampilkan form untuk mengedit to-do.update(): Mengupdate to-do di database.destroy(): Menghapus to-do dari database.
8. Membuat Route: Menghubungkan URL ke Controller
Sekarang kita perlu mendefinisikan route agar URL tertentu mengarah ke method controller yang sesuai. Buka file routes/web.php dan tambahkan route berikut:
<?php
use AppHttpControllersTodoController;
use IlluminateSupportFacadesRoute;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider and all of them will
| be assigned to the "web" middleware group. Make something great!
|
*/
Route::resource('todos', TodoController::class);
Route::get('/', function () {
return view('welcome');
});Route::resource('todos', TodoController::class); secara otomatis membuat route untuk semua method di TodoController (index, create, store, show, edit, update, destroy).
9. Membuat View: Tampilan Aplikasi
Kita membutuhkan view untuk menampilkan data dan form. Buat folder resources/views/todos dan buat file-file berikut:
resources/views/todos/index.blade.php: Menampilkan daftar to-do.resources/views/todos/create.blade.php: Form untuk membuat to-do baru.resources/views/todos/edit.blade.php: Form untuk mengedit to-do.
Berikut contoh isi file resources/views/todos/index.blade.php:
<!DOCTYPE html>
<html>
<head>
<title>To-Do List</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>To-Do List</h1>
@if ($message = Session::get('success'))
<div class="alert alert-success">
<p>{{ $message }}</p>
</div>
@endif
<a class="btn btn-success" href="{{ route('todos.create') }}"> Create New Todo</a>
<table class="table table-bordered">
<tr>
<th>No</th>
<th>Title</th>
<th width="280px">Action</th>
</tr>
@foreach ($todos as $todo)
<tr>
<td>{{ ++$i }}</td>
<td>{{ $todo->title }}</td>
<td>
<form action="{{ route('todos.destroy',$todo->id) }}" method="POST">
<a class="btn btn-primary" href="{{ route('todos.edit',$todo->id) }}">Edit</a>
@csrf
@method('DELETE')
<button type="submit" class="btn btn-danger">Delete</button>
</form>
</td>
</tr>
@endforeach
</table>
{{-- {!! $todos->links() !!} --}}
</div>
</body>
</html>Contoh isi file resources/views/todos/create.blade.php:
<!DOCTYPE html>
<html>
<head>
<title>Create New Todo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Create New Todo</h1>
@if ($errors->any())
<div class="alert alert-danger">
<strong>Whoops!</strong> There were some problems with your input.<br><br>
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<form action="{{ route('todos.store') }}" method="POST">
@csrf
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Title:</strong>
<input type="text" name="title" class="form-control" placeholder="Title">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 text-center">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
</body>
</html>Contoh isi file resources/views/todos/edit.blade.php:
<!DOCTYPE html>
<html>
<head>
<title>Edit Todo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Edit Todo</h1>
@if ($errors->any())
<div class="alert alert-danger">
<strong>Whoops!</strong> There were some problems with your input.<br><br>
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<form action="{{ route('todos.update',$todo->id) }}" method="POST">
@csrf
@method('PUT')
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Title:</strong>
<input type="text" name="title" value="{{ $todo->title }}" class="form-control" placeholder="Title">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 text-center">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
</body>
</html>Pastikan Anda sudah menginstall Bootstrap atau framework CSS lainnya untuk tampilan yang lebih baik.
10. Menjalankan Aplikasi: Melihat Hasilnya
Jalankan server development Laravel dengan perintah:
php artisan serveBuka browser Anda dan kunjungi http://localhost:8000/todos. Anda akan melihat aplikasi To-Do List Anda! Sekarang Anda bisa menambahkan, mengedit, dan menghapus tugas.
11. Langkah Selanjutnya: Meningkatkan Aplikasi
Setelah berhasil membuat aplikasi To-Do List sederhana, Anda bisa meningkatkan aplikasi ini dengan fitur-fitur berikut:
- Otentikasi: Menambahkan sistem login dan registrasi pengguna.
- Validasi yang Lebih Ketat: Menambahkan validasi yang lebih kompleks untuk input pengguna.
- Fitur Pencarian: Memungkinkan pengguna mencari tugas berdasarkan judul.
- Responsif: Membuat tampilan yang responsif di berbagai ukuran layar.
- Testing: Menulis unit test dan feature test untuk memastikan aplikasi berjalan dengan baik.
- Menggunakan Eloquent Relationships: Jika Anda ingin menambahkan kategori ke ToDo list, anda bisa menggunakan Eloquent relationships.
12. Kesimpulan: Laravel Mudah dengan Contoh Project Sederhana
Dengan contoh project Laravel sederhana untuk belajar ini, Anda telah mempelajari dasar-dasar Laravel dan membangun aplikasi To-Do List yang berfungsi. Jangan berhenti di sini! Teruslah bereksperimen, mencoba fitur-fitur baru, dan membangun project yang lebih kompleks. Ingatlah, implementasi kode mudah adalah kunci untuk memahami Laravel dengan cepat. Selamat belajar!
Sumber Terpercaya:
- Dokumentasi Laravel: Sumber resmi untuk semua informasi tentang Laravel.
- Laravel News: Blog yang berisi berita, tutorial, dan tips tentang Laravel.
- Laracasts: Platform pembelajaran online yang menawarkan video tutorial berkualitas tinggi tentang Laravel.
