Laravel adalah framework PHP yang populer karena kemudahan, fleksibilitas, dan fitur-fitur canggih yang ditawarkannya. Jika Anda baru memulai belajar Laravel, cara terbaik untuk memahaminya adalah dengan mengerjakan proyek. Artikel ini akan membahas contoh aplikasi sederhana dengan Laravel 8, yang akan membantu Anda belajar Laravel dengan proyek secara praktis. Kita akan membangun sebuah aplikasi CRUD (Create, Read, Update, Delete) sederhana untuk mengelola daftar tugas (Todo List).

Mengapa Mempelajari Laravel dengan Proyek Sederhana?

Teori memang penting, tetapi praktik jauh lebih efektif dalam memahami sebuah framework seperti Laravel. Dengan membangun contoh aplikasi sederhana dengan Laravel 8, Anda akan:

• Memahami Struktur Direktori Laravel: Anda akan familiar dengan di mana file-file penting berada (routes, controllers, models, views).
• Mengenal Konsep MVC (Model-View-Controller): Laravel menggunakan pola MVC, dan proyek ini akan membantu Anda memahami bagaimana ketiganya berinteraksi.
• Mempelajari Routing dan Middleware: Anda akan belajar bagaimana menangani request dan menerapkan middleware untuk autentikasi atau validasi.
• Berinteraksi dengan Database: Anda akan belajar bagaimana membuat migration, seeder, dan menggunakan Eloquent ORM untuk berinteraksi dengan database.
• Membuat Tampilan dengan Blade Templating Engine: Anda akan belajar menggunakan Blade, template engine bawaan Laravel, untuk membuat tampilan yang dinamis dan terstruktur.
• Melatih Kemampuan Debugging: Tidak ada proyek yang sempurna di percobaan pertama. Anda akan belajar bagaimana debugging kode Laravel Anda.
• Membangun Portofolio: Proyek ini bisa menjadi awal dari portofolio Anda, menunjukkan kemampuan Anda dalam menggunakan Laravel.

Persiapan Awal: Instalasi Laravel 8 dan Konfigurasi Lingkungan

Sebelum memulai contoh aplikasi sederhana dengan Laravel 8, pastikan Anda telah memenuhi persyaratan berikut:

1. PHP >= 7.3: Laravel 8 membutuhkan PHP versi 7.3 atau lebih tinggi. Pastikan Anda telah menginstal PHP dan mengaktifkan ekstensi yang diperlukan (seperti php-mbstring, php-xml, php-pdo).
2. Composer: Composer adalah package manager untuk PHP. Gunakan Composer untuk menginstal Laravel dan dependencies lainnya. Anda bisa mengunduh Composer dari https://getcomposer.org/.
3. Database Server: Anda membutuhkan database server seperti MySQL, PostgreSQL, atau SQLite. Pilih salah satu dan pastikan Anda sudah menginstalnya.
4. Text Editor/IDE: Gunakan text editor atau IDE (Integrated Development Environment) favorit Anda untuk menulis kode. Rekomendasi: VS Code, PHPStorm, Sublime Text.

Setelah semua persiapan selesai, ikuti langkah-langkah berikut untuk menginstal Laravel 8:

Related Post

Tips Optimasi Performa Website Laravel: Website Cepat dan Responsif

May 12, 2025

Komunitas Laravel Indonesia Aktif: Tempat Bertukar Ilmu dan Pengalaman

May 12, 2025

Resource Belajar Laravel Bahasa Indonesia Terlengkap: Sumber Informasi Terpercaya

May 11, 2025

Belajar Laravel dari Nol Sampai Mahir: Roadmap Lengkap untuk Pemula

May 11, 2025

1. Buka Terminal/Command Prompt: Navigasi ke direktori di mana Anda ingin menyimpan proyek Anda.

2. Jalankan Perintah Berikut:

   composer create-project --prefer-dist laravel/laravel todoapp

   Ganti todoapp dengan nama proyek Anda.

3. Masuk ke Direktori Proyek:

   cd todoapp

4. Konfigurasi .env: File .env berisi konfigurasi lingkungan proyek Anda, termasuk konfigurasi database. Buka file .env dan ubah konfigurasi database sesuai dengan database yang Anda gunakan. Contoh untuk MySQL:

   DB_CONNECTION=mysql
   DB_HOST=127.0.0.1
   DB_PORT=3306
   DB_DATABASE=todoapp
   DB_USERNAME=root
   DB_PASSWORD=

   Ganti todoapp, root, dan (kosongkan jika tidak ada password) dengan detail database Anda.

5. Generate Application Key:

   php artisan key:generate

   Perintah ini akan menghasilkan application key yang digunakan untuk mengenkripsi data.

Sekarang Laravel 8 Anda sudah terinstal dan siap digunakan untuk contoh aplikasi sederhana dengan Laravel 8 ini.

Membuat Database dan Migration untuk Todo List

Langkah selanjutnya dalam contoh aplikasi sederhana dengan Laravel 8 kita adalah membuat database dan migration untuk menyimpan data todo list.

1. Buat Database: Buat database baru di database server Anda. Misalnya, jika Anda menggunakan MySQL, Anda bisa menggunakan perintah berikut:

   CREATE DATABASE todoapp;

2. Buat Migration: Gunakan perintah Artisan make:migration untuk membuat migration untuk tabel todos.

   php artisan make:migration create_todos_table

   Ini akan membuat file migration baru di direktori database/migrations.

3. Edit Migration: Buka file migration yang baru dibuat dan tambahkan kode berikut ke dalam method up():

   <?php
   
   use IlluminateDatabaseMigrationsMigration;
   use IlluminateDatabaseSchemaBlueprint;
   use IlluminateSupportFacadesSchema;
   
   class CreateTodosTable extends Migration
   {
       /**
        * Run the migrations.
        *
        * @return void
        */
       public function up()
       {
           Schema::create('todos', function (Blueprint $table) {
               $table->id();
               $table->string('title');
               $table->text('description')->nullable();
               $table->boolean('completed')->default(false);
               $table->timestamps();
           });
       }
   
       /**
        * Reverse the migrations.
        *
        * @return void
        */
       public function down()
       {
           Schema::dropIfExists('todos');
       }
   }

   Kode di atas akan membuat tabel todos dengan kolom id, title (judul tugas), description (deskripsi tugas), completed (status selesai/belum selesai), created_at, dan updated_at.

4. Jalankan Migration: Jalankan migration untuk membuat tabel di database Anda.

   php artisan migrate

   Perintah ini akan menjalankan semua migration yang belum dijalankan dan membuat tabel todos di database Anda.

Membuat Model dan Controller untuk Todo List

Setelah membuat database dan migration, kita perlu membuat Model dan Controller untuk berinteraksi dengan data todo list. Ini adalah inti dari contoh aplikasi sederhana dengan Laravel 8 kita.

1. Buat Model: Gunakan perintah Artisan make:model untuk membuat model Todo.

   php artisan make:model Todo

   Ini akan membuat file model baru di direktori app/Models.

2. Edit Model: Buka file model Todo dan tambahkan kode berikut:

   <?php
   
   namespace AppModels;
   
   use IlluminateDatabaseEloquentFactoriesHasFactory;
   use IlluminateDatabaseEloquentModel;
   
   class Todo extends Model
   {
       use HasFactory;
   
       protected $fillable = ['title', 'description', 'completed'];
   }

   Properti $fillable menentukan kolom mana yang boleh diisi melalui mass assignment (misalnya, saat membuat atau memperbarui data).

3. Buat Controller: Gunakan perintah Artisan make:controller untuk membuat controller TodoController.

   php artisan make:controller TodoController --resource

   Opsi --resource akan membuat resource controller yang berisi method standar untuk operasi CRUD (index, create, store, show, edit, update, destroy).

4. Edit Controller: Buka file controller TodoController dan tambahkan kode berikut:

   <?php
   
   namespace AppHttpControllers;
   
   use AppModelsTodo;
   use IlluminateHttpRequest;
   
   class TodoController extends Controller
   {
       /**
        * Display a listing of the resource.
        *
        * @return IlluminateHttpResponse
        */
       public function index()
       {
           $todos = Todo::all();
           return view('todos.index', compact('todos'));
       }
   
       /**
        * Show the form for creating a new resource.
        *
        * @return IlluminateHttpResponse
        */
       public function create()
       {
           return view('todos.create');
       }
   
       /**
        * Store a newly created resource in storage.
        *
        * @param  IlluminateHttpRequest  $request
        * @return IlluminateHttpResponse
        */
       public function store(Request $request)
       {
           $request->validate([
               'title' => 'required',
           ]);
   
           Todo::create($request->all());
   
           return redirect()->route('todos.index')
                            ->with('success', 'Todo created successfully.');
       }
   
       /**
        * Display the specified resource.
        *
        * @param  AppModelsTodo  $todo
        * @return IlluminateHttpResponse
        */
       public function show(Todo $todo)
       {
           return view('todos.show', compact('todo'));
       }
   
       /**
        * Show the form for editing the specified resource.
        *
        * @param  AppModelsTodo  $todo
        * @return IlluminateHttpResponse
        */
       public function edit(Todo $todo)
       {
           return view('todos.edit', compact('todo'));
       }
   
       /**
        * Update the specified resource in storage.
        *
        * @param  IlluminateHttpRequest  $request
        * @param  AppModelsTodo  $todo
        * @return IlluminateHttpResponse
        */
       public function update(Request $request, Todo $todo)
       {
           $request->validate([
               'title' => 'required',
           ]);
   
           $todo->update($request->all());
   
           return redirect()->route('todos.index')
                            ->with('success', 'Todo updated successfully.');
       }
   
       /**
        * Remove the specified resource from storage.
        *
        * @param  AppModelsTodo  $todo
        * @return IlluminateHttpResponse
        */
       public function destroy(Todo $todo)
       {
           $todo->delete();
   
           return redirect()->route('todos.index')
                            ->with('success', 'Todo deleted successfully.');
       }
   }

   Controller ini berisi method untuk menampilkan daftar todo, membuat todo baru, menyimpan todo, menampilkan detail todo, mengedit todo, memperbarui todo, dan menghapus todo. Kita juga menambahkan validasi sederhana untuk memastikan bahwa kolom title wajib diisi.

Membuat Views dengan Blade Templating Engine

Setelah membuat Model dan Controller, kita perlu membuat Views untuk menampilkan data dan menerima input dari pengguna. Blade adalah template engine bawaan Laravel yang memudahkan pembuatan tampilan yang dinamis dan terstruktur. Bagian ini sangat penting dalam contoh aplikasi sederhana dengan Laravel 8 ini.

1. Buat Direktori todos di resources/views: Buat direktori todos di dalam direktori resources/views untuk menyimpan semua view yang terkait dengan todo list.

2. Buat index.blade.php: Buat file index.blade.php di dalam direktori resources/views/todos dan tambahkan kode berikut:

   <!DOCTYPE html>
   <html>
   <head>
       <title>Todo List</title>
       <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
   </head>
   <body>
       <div class="container mt-5">
           <h2>Todo List</h2>
           <a href="{{ route('todos.create') }}" class="btn btn-primary mb-3">Create New Todo</a>
   
           @if ($message = Session::get('success'))
               <div class="alert alert-success">
                   <p>{{ $message }}</p>
               </div>
           @endif
   
           <table class="table table-bordered">
               <thead>
                   <tr>
                       <th>Title</th>
                       <th>Description</th>
                       <th>Completed</th>
                       <th>Action</th>
                   </tr>
               </thead>
               <tbody>
                   @foreach ($todos as $todo)
                       <tr>
                           <td>{{ $todo->title }}</td>
                           <td>{{ $todo->description }}</td>
                           <td>{{ $todo->completed ? 'Yes' : 'No' }}</td>
                           <td>
                               <a href="{{ route('todos.show', $todo->id) }}" class="btn btn-info">Show</a>
                               <a href="{{ route('todos.edit', $todo->id) }}" class="btn btn-primary">Edit</a>
                               <form action="{{ route('todos.destroy', $todo->id) }}" method="POST" style="display: inline;">
                                   @csrf
                                   @method('DELETE')
                                   <button type="submit" class="btn btn-danger" onclick="return confirm('Are you sure?')">Delete</button>
                               </form>
                           </td>
                       </tr>
                   @endforeach
               </tbody>
           </table>
       </div>
   </body>
   </html>

   View ini menampilkan daftar todo dengan link untuk menampilkan detail, mengedit, dan menghapus todo. Kita juga menggunakan Bootstrap untuk mempercantik tampilan.

3. Buat create.blade.php: Buat file create.blade.php di dalam direktori resources/views/todos dan tambahkan kode berikut:

   <!DOCTYPE html>
   <html>
   <head>
       <title>Create New Todo</title>
       <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
   </head>
   <body>
       <div class="container mt-5">
           <h2>Create New Todo</h2>
           <form action="{{ route('todos.store') }}" method="POST">
               @csrf
               <div class="form-group">
                   <label for="title">Title:</label>
                   <input type="text" class="form-control" id="title" name="title" required>
               </div>
               <div class="form-group">
                   <label for="description">Description:</label>
                   <textarea class="form-control" id="description" name="description"></textarea>
               </div>
               <div class="form-group">
                   <label for="completed">Completed:</label>
                   <select class="form-control" id="completed" name="completed">
                       <option value="0">No</option>
                       <option value="1">Yes</option>
                   </select>
               </div>
               <button type="submit" class="btn btn-primary">Submit</button>
               <a href="{{ route('todos.index') }}" class="btn btn-secondary">Cancel</a>
           </form>
       </div>
   </body>
   </html>

   View ini menampilkan form untuk membuat todo baru.

4. Buat show.blade.php: Buat file show.blade.php di dalam direktori resources/views/todos dan tambahkan kode berikut:

   <!DOCTYPE html>
   <html>
   <head>
       <title>Show Todo</title>
       <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
   </head>
   <body>
       <div class="container mt-5">
           <h2>Show Todo</h2>
           <div class="card">
               <div class="card-body">
                   <h5 class="card-title">{{ $todo->title }}</h5>
                   <p class="card-text">{{ $todo->description }}</p>
                   <p class="card-text">Completed: {{ $todo->completed ? 'Yes' : 'No' }}</p>
                   <a href="{{ route('todos.index') }}" class="btn btn-primary">Back</a>
               </div>
           </div>
       </div>
   </body>
   </html>

   View ini menampilkan detail todo.

5. Buat edit.blade.php: Buat file edit.blade.php di dalam direktori resources/views/todos dan tambahkan kode berikut:

   <!DOCTYPE html>
   <html>
   <head>
       <title>Edit Todo</title>
       <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
   </head>
   <body>
       <div class="container mt-5">
           <h2>Edit Todo</h2>
           <form action="{{ route('todos.update', $todo->id) }}" method="POST">
               @csrf
               @method('PUT')
               <div class="form-group">
                   <label for="title">Title:</label>
                   <input type="text" class="form-control" id="title" name="title" value="{{ $todo->title }}" required>
               </div>
               <div class="form-group">
                   <label for="description">Description:</label>
                   <textarea class="form-control" id="description" name="description">{{ $todo->description }}</textarea>
               </div>
               <div class="form-group">
                   <label for="completed">Completed:</label>
                   <select class="form-control" id="completed" name="completed">
                       <option value="0" {{ $todo->completed ? '' : 'selected' }}>No</option>
                       <option value="1" {{ $todo->completed ? 'selected' : '' }}>Yes</option>
                   </select>
               </div>
               <button type="submit" class="btn btn-primary">Update</button>
               <a href="{{ route('todos.index') }}" class="btn btn-secondary">Cancel</a>
           </form>
       </div>
   </body>
   </html>

   View ini menampilkan form untuk mengedit todo.

Konfigurasi Routes untuk Aplikasi Todo List

Setelah membuat Model, Controller, dan Views, kita perlu mengkonfigurasi routes untuk menghubungkan request HTTP ke method controller yang sesuai.

1. Buka routes/web.php: Buka file routes/web.php di direktori routes.

2. Tambahkan Resource Route: Tambahkan resource route untuk TodoController.

   <?php
   
   use IlluminateSupportFacadesRoute;
   use AppHttpControllersTodoController;
   
   /*
   |--------------------------------------------------------------------------
   | Web Routes
   |--------------------------------------------------------------------------
   |
   | Here is where you can register web routes for your application. These
   | routes are loaded by the RouteServiceProvider within a group which
   | contains the "web" middleware group. Now create something great!
   |
   */
   
   Route::get('/', function () {
       return view('welcome');
   });
   
   Route::resource('todos', TodoController::class);

   Route::resource('todos', TodoController::class) akan membuat routes untuk semua method CRUD di TodoController (index, create, store, show, edit, update, destroy). Ini sangat memudahkan dalam membangun contoh aplikasi sederhana dengan Laravel 8.

Uji Coba Aplikasi Todo List Anda

Setelah semua langkah di atas selesai, Anda dapat menguji coba aplikasi todo list Anda.

1. Jalankan Server Pengembangan Laravel: Buka terminal dan jalankan perintah berikut:

   php artisan serve

   Ini akan menjalankan server pengembangan Laravel di http://localhost:8000.

2. Buka Aplikasi di Browser: Buka http://localhost:8000/todos di browser Anda.

3. Uji Fitur CRUD: Anda seharusnya dapat melihat daftar todo, membuat todo baru, menampilkan detail todo, mengedit todo, dan menghapus todo.

Jika semuanya berjalan lancar, Anda telah berhasil membangun contoh aplikasi sederhana dengan Laravel 8!

Tips dan Trik Belajar Laravel dengan Proyek

Berikut beberapa tips dan trik untuk memaksimalkan pengalaman belajar Laravel dengan proyek:

• Mulai dari yang Sederhana: Jangan langsung mencoba membangun aplikasi yang kompleks. Mulai dengan proyek sederhana seperti todo list, blog sederhana, atau aplikasi pencatat pengeluaran.
• Baca Dokumentasi: Dokumentasi Laravel sangat lengkap dan membantu. Selalu rujuk ke dokumentasi saat Anda mengalami kesulitan.
• Gunakan Laravel Tinker: Laravel Tinker adalah REPL (Read-Eval-Print Loop) yang memungkinkan Anda berinteraksi dengan aplikasi Laravel Anda dari baris perintah. Gunakan Tinker untuk menguji kode, memeriksa data, dan debugging.
• Bergabung dengan Komunitas: Bergabunglah dengan komunitas Laravel di forum, grup Facebook, atau Slack. Bertanya jika Anda mengalami kesulitan dan belajar dari pengalaman orang lain.
• Latihan Secara Teratur: Semakin sering Anda berlatih, semakin cepat Anda akan memahami Laravel. Sisihkan waktu setiap hari atau minggu untuk mengerjakan proyek Laravel.
• Gunakan Debugger: Konfigurasikan Xdebug atau alat debugging lainnya dengan IDE Anda untuk memudahkan debugging kode Laravel.
• Pelajari SOLID Principles: Memahami SOLID principles akan membantu Anda menulis kode yang lebih bersih, terstruktur, dan mudah di-maintain.
• Gunakan Version Control (Git): Gunakan Git untuk melacak perubahan kode Anda dan berkolaborasi dengan orang lain.

Kesimpulan

Dengan mengikuti panduan ini dan membangun contoh aplikasi sederhana dengan Laravel 8 ini, Anda telah mengambil langkah penting dalam mempelajari Laravel. Jangan berhenti di sini! Teruslah berlatih, eksplorasi fitur-fitur Laravel lainnya, dan bangun proyek-proyek yang lebih kompleks. Semoga artikel ini bermanfaat dan membantu Anda dalam perjalanan Anda menjadi developer Laravel yang handal. Selamat belajar dan mencoba!