Laravel adalah framework PHP yang populer dan sangat disukai oleh para developer web. Popularitasnya berasal dari sintaksnya yang elegan, fitur-fitur yang lengkap, dan komunitas yang aktif. Jika kamu baru mulai belajar Laravel, cara terbaik untuk menguasainya adalah dengan terjun langsung ke project. Artikel ini akan memberikan kamu contoh project sederhana menggunakan framework Laravel yang akan membantumu belajar sambil praktik. Kita akan membahas langkah demi langkah, dari persiapan lingkungan hingga deployment, sehingga kamu bisa memahami konsep dasar Laravel dengan lebih baik. Siap untuk mulai coding? Yuk, simak terus!

1. Persiapan Lingkungan Pengembangan Laravel untuk Project Sederhana

Sebelum kita mulai membuat contoh project sederhana menggunakan framework Laravel, kita perlu memastikan lingkungan pengembangan kita sudah siap. Ini melibatkan beberapa langkah penting, termasuk menginstal PHP, Composer, dan tool lain yang diperlukan.

• Install PHP: Laravel membutuhkan PHP versi 7.4 atau lebih tinggi. Pastikan PHP sudah terinstall di sistem kamu. Kamu bisa mengecek versi PHP dengan perintah php -v di terminal. Jika belum terinstall, unduh dan install dari situs resmi PHP.

• Install Composer: Composer adalah dependency manager untuk PHP. Laravel bergantung pada Composer untuk mengelola package dan library yang digunakan. Download dan install Composer dari getcomposer.org. Setelah terinstall, kamu bisa menggunakan perintah composer di terminal.

• Install Node.js dan npm (Opsional): Meskipun tidak wajib untuk semua project, Node.js dan npm (Node Package Manager) berguna untuk mengelola front-end assets seperti JavaScript dan CSS. Install Node.js dari nodejs.org. npm akan terinstall otomatis bersamaan dengan Node.js.

• Install Editor/IDE: Pilih editor atau IDE yang nyaman kamu gunakan untuk menulis kode. Beberapa pilihan populer termasuk Visual Studio Code, Sublime Text, dan PHPStorm.

• Database Server: Laravel mendukung berbagai database server seperti MySQL, PostgreSQL, SQLite, dan SQL Server. Pilih salah satu yang sesuai dengan preferensi kamu dan pastikan server tersebut sudah terinstall dan berjalan.

Setelah semua persiapan selesai, kita bisa melanjutkan ke langkah berikutnya yaitu membuat project Laravel baru.

2. Membuat Project Laravel Baru: Langkah Awal Membangun Aplikasi Sederhana

Sekarang setelah lingkungan pengembangan siap, saatnya membuat project Laravel baru. Ini adalah langkah awal yang krusial dalam membangun contoh project sederhana menggunakan framework Laravel.

Related Post

Dokumentasi Laravel Bahasa Indonesia Terbaru: Referensi Lengkap untuk Developer

July 4, 2025

Cara Menggunakan Eloquent ORM di Laravel: Database Jadi Lebih Mudah Dikelola

July 4, 2025

Template Admin Dashboard Gratis untuk Laravel: Hemat Waktu dan Biaya!

July 4, 2025

Jasa Pembuatan Website Berbasis Laravel Profesional: Solusi Website Modern & Efisien

July 4, 2025

• Buka Terminal/Command Prompt: Navigasikan ke direktori di mana kamu ingin menyimpan project Laravel kamu.

• Gunakan Perintah composer create-project: Ketik perintah berikut di terminal dan tekan Enter:

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

  Ganti nama-project dengan nama yang kamu inginkan untuk project kamu. Contohnya:

  composer create-project --prefer-dist laravel/laravel sederhana-todo

  Perintah ini akan mengunduh dan menginstall Laravel beserta semua dependency yang diperlukan. Proses ini mungkin membutuhkan waktu beberapa menit tergantung pada kecepatan internet kamu.

• Masuk ke Direktori Project: Setelah proses instalasi selesai, masuk ke direktori project yang baru dibuat:

  cd nama-project

• Jalankan Server Pengembangan Laravel: Laravel sudah dilengkapi dengan server pengembangan bawaan. Kamu bisa menjalankannya dengan perintah:

  php artisan serve

  Ini akan menjalankan server di http://localhost:8000. Buka browser kamu dan kunjungi alamat tersebut. Jika kamu melihat halaman selamat datang Laravel, berarti project kamu sudah berhasil dibuat dan server berjalan dengan baik.

3. Mendesain Database untuk Aplikasi To-Do List Sederhana dengan Laravel

Salah satu contoh project sederhana menggunakan framework Laravel yang ideal untuk pemula adalah aplikasi To-Do List. Sebelum kita mulai membuat interface dan logic aplikasi, kita perlu mendesain database-nya terlebih dahulu.

• Pilih Database: Seperti yang disebutkan sebelumnya, Laravel mendukung berbagai database. Untuk contoh ini, kita akan menggunakan MySQL.

• Buat Database: Gunakan tools seperti phpMyAdmin atau command line untuk membuat database baru. Beri nama database tersebut, misalnya todo_list.

• Desain Tabel todos: Kita akan membuat satu tabel bernama todos yang akan menyimpan data tugas-tugas yang perlu dikerjakan. Tabel ini akan memiliki kolom-kolom berikut:

  • id: Integer, primary key, auto-increment. Ini akan menjadi ID unik untuk setiap tugas.
  • title: VARCHAR(255), tidak boleh kosong. Ini akan menyimpan judul atau deskripsi singkat dari tugas.
  • description: TEXT, boleh kosong. Ini akan menyimpan deskripsi detail dari tugas (opsional).
  • completed: BOOLEAN, default 0. Ini akan menandakan apakah tugas sudah selesai dikerjakan atau belum. 0 berarti belum selesai, 1 berarti sudah selesai.
  • created_at: TIMESTAMP, akan otomatis mencatat waktu pembuatan tugas.
  • updated_at: TIMESTAMP, akan otomatis mencatat waktu terakhir tugas diubah.

• Buat Migration: Laravel menyediakan fitur migration untuk mengelola struktur database dengan mudah. Gunakan perintah berikut di terminal untuk membuat migration untuk tabel todos:

  php artisan make:migration create_todos_table

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

• Edit File Migration: Buka file migration yang baru dibuat dan tambahkan kode berikut di dalam method up():

  public function up()
  {
      Schema::create('todos', function (Blueprint $table) {
          $table->id();
          $table->string('title');
          $table->text('description')->nullable();
          $table->boolean('completed')->default(0);
          $table->timestamps();
      });
  }

  Kode ini mendefinisikan struktur tabel todos seperti yang sudah kita desain sebelumnya.

• Jalankan Migration: Setelah selesai mengedit file migration, jalankan perintah berikut di terminal untuk membuat tabel di database:

  php artisan migrate

  Pastikan kamu sudah mengatur koneksi database di file .env dengan benar sebelum menjalankan perintah ini.

4. Membuat Model dan Controller untuk Mengelola Data To-Do List dengan Laravel

Setelah kita memiliki database dan struktur tabel, langkah selanjutnya dalam contoh project sederhana menggunakan framework Laravel kita adalah membuat Model dan Controller. Model akan berinteraksi dengan database, sedangkan Controller akan menangani logic aplikasi dan mengatur interaksi antara Model dan View.

• Buat Model Todo: Gunakan perintah berikut di terminal untuk membuat Model Todo:

  php artisan make:model Todo

  Ini akan membuat file Todo.php di direktori app/Models.

• Edit Model Todo: Buka file Todo.php dan tambahkan kode berikut:

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

  $fillable mendefinisikan kolom-kolom mana yang boleh diisi (mass assignable) dari input user. Ini penting untuk keamanan.

• Buat Controller TodoController: Gunakan perintah berikut di terminal untuk membuat Controller TodoController:

  php artisan make:controller TodoController

  Ini akan membuat file TodoController.php di direktori app/Http/Controllers.

• Edit Controller TodoController: Buka file TodoController.php dan tambahkan beberapa method untuk menangani operasi CRUD (Create, Read, Update, Delete) pada data To-Do List. Berikut adalah contoh beberapa method yang bisa kamu tambahkan:

  • index(): Menampilkan daftar semua tugas.
  • create(): Menampilkan form untuk membuat tugas baru.
  • store(): Menyimpan tugas baru ke database.
  • show(): Menampilkan detail satu tugas tertentu.
  • edit(): Menampilkan form untuk mengedit tugas yang sudah ada.
  • update(): Memperbarui tugas yang sudah ada di database.
  • destroy(): Menghapus tugas dari database.

  Kode untuk masing-masing method akan melibatkan interaksi dengan Model Todo untuk mengambil atau memanipulasi data. Contoh:

  public function index()
  {
      $todos = Todo::all();
      return view('todos.index', compact('todos'));
  }
  
  public function store(Request $request)
  {
      Todo::create($request->all());
      return redirect()->route('todos.index')
                      ->with('success','Todo created successfully.');
  }

5. Membuat Views dengan Blade Template Engine untuk Menampilkan Data To-Do List

Setelah kita memiliki Model dan Controller, saatnya membuat Views. Views adalah tampilan antarmuka pengguna yang akan menampilkan data To-Do List kita. Laravel menggunakan Blade Template Engine untuk membuat Views dengan mudah dan efisien. Dalam contoh project sederhana menggunakan framework Laravel ini, kita akan membuat beberapa view:

• Buat Direktori todos di resources/views: Ini akan menjadi tempat kita menyimpan semua view yang berkaitan dengan To-Do List.

• Buat File index.blade.php: Ini akan menampilkan daftar semua tugas. Contoh kode:

  <!DOCTYPE html>
  <html>
  <head>
      <title>To-Do List</title>
  </head>
  <body>
      <h1>To-Do List</h1>
  
      @if ($message = Session::get('success'))
          <p>{{ $message }}</p>
      @endif
  
      <a href="{{ route('todos.create') }}">Create New Todo</a>
  
      <table>
          <thead>
              <tr>
                  <th>Title</th>
                  <th>Description</th>
                  <th>Completed</th>
                  <th>Actions</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) }}">Show</a>
                          <a href="{{ route('todos.edit',$todo->id) }}">Edit</a>
                          <form action="{{ route('todos.destroy',$todo->id) }}" method="POST">
                              @csrf
                              @method('DELETE')
                              <button type="submit">Delete</button>
                          </form>
                      </td>
                  </tr>
              @endforeach
          </tbody>
      </table>
  </body>
  </html>

• Buat File create.blade.php: Ini akan menampilkan form untuk membuat tugas baru.

• Buat File edit.blade.php: Ini akan menampilkan form untuk mengedit tugas yang sudah ada.

• Buat File show.blade.php: Ini akan menampilkan detail satu tugas tertentu.

Setiap view akan menggunakan Blade syntax untuk menampilkan data yang dikirim dari Controller dan membuat form untuk input user. Jangan lupa untuk menggunakan @csrf directive di dalam form untuk melindungi aplikasi dari serangan CSRF.

6. Konfigurasi Routes untuk Menghubungkan URL dengan Controller dan Views

Setelah kita memiliki Model, Controller, dan Views, langkah terakhir dalam contoh project sederhana menggunakan framework Laravel kita adalah mengkonfigurasi Routes. Routes mendefinisikan bagaimana URL akan dipetakan ke Controller dan action yang sesuai.

• Buka File routes/web.php: File ini berisi semua definisi route untuk aplikasi web kita.

• Tambahkan Routes untuk To-Do List: Kita akan menambahkan route untuk setiap operasi CRUD yang kita definisikan di Controller TodoController. Contoh:

  Route::resource('todos', TodoController::class);

  Route::resource adalah cara yang mudah untuk mendefinisikan semua route standar untuk resource (dalam kasus ini, todos). Ini akan membuat route untuk:

  • GET /todos: Menampilkan daftar semua tugas (index)
  • GET /todos/create: Menampilkan form untuk membuat tugas baru (create)
  • POST /todos: Menyimpan tugas baru (store)
  • GET /todos/{todo}: Menampilkan detail satu tugas (show)
  • GET /todos/{todo}/edit: Menampilkan form untuk mengedit tugas (edit)
  • PUT/PATCH /todos/{todo}: Memperbarui tugas (update)
  • DELETE /todos/{todo}: Menghapus tugas (destroy)

  Laravel secara otomatis akan menghubungkan route-route ini dengan method yang sesuai di TodoController.

Setelah route dikonfigurasi, kamu bisa mengakses aplikasi To-Do List kamu melalui browser. Cobalah untuk membuat, membaca, memperbarui, dan menghapus data To-Do List.

7. Menambahkan Fitur Validasi Form untuk Memastikan Data yang Benar

Salah satu aspek penting dari aplikasi web adalah validasi form. Validasi memastikan bahwa data yang dimasukkan oleh user sesuai dengan format dan aturan yang kita tentukan. Dalam contoh project sederhana menggunakan framework Laravel ini, kita akan menambahkan validasi ke form pembuatan dan pengeditan To-Do List.

• Gunakan Form Request: Laravel menyediakan fitur Form Request untuk mengelola validasi form dengan lebih terstruktur. Gunakan perintah berikut di terminal untuk membuat Form Request baru:

  php artisan make:request StoreTodoRequest

  Ini akan membuat file StoreTodoRequest.php di direktori app/Http/Requests.

• Edit Form Request: Buka file StoreTodoRequest.php dan tambahkan aturan validasi di dalam method rules():

  public function rules()
  {
      return [
          'title' => 'required|max:255',
          'description' => 'nullable',
      ];
  }

  Kode ini mendefinisikan dua aturan:

  • title harus diisi (required) dan maksimal 255 karakter.
  • description boleh kosong (nullable).

• Gunakan Form Request di Controller: Di dalam method store() dan update() di TodoController, ganti Request $request dengan StoreTodoRequest $request. Contoh:

  public function store(StoreTodoRequest $request)
  {
      Todo::create($request->validated());
      return redirect()->route('todos.index')
                      ->with('success','Todo created successfully.');
  }

  Laravel akan secara otomatis menjalankan validasi berdasarkan aturan yang kita definisikan di StoreTodoRequest. Jika validasi gagal, Laravel akan mengarahkan user kembali ke form dengan pesan error. Kamu bisa menampilkan pesan error ini di view menggunakan directive @error.

8. Implementasi Fitur Pencarian (Search) pada Aplikasi To-Do List

Menambahkan fitur pencarian akan membuat contoh project sederhana menggunakan framework Laravel kita menjadi lebih berguna. Pengguna dapat dengan mudah menemukan tugas tertentu berdasarkan kata kunci.

• Modifikasi Method index() di Controller: Di dalam method index() di TodoController, tambahkan logic untuk menangani pencarian. Kita akan mengambil parameter search dari request dan menggunakan Eloquent untuk mencari tugas yang sesuai.

  public function index(Request $request)
  {
      $search = $request->input('search');
  
      $todos = Todo::query()
          ->when($search, function ($query, $search) {
              return $query->where('title', 'like', '%' . $search . '%')
                           ->orWhere('description', 'like', '%' . $search . '%');
          })
          ->get();
  
      return view('todos.index', compact('todos'));
  }

  Kode ini melakukan hal berikut:

  • Mengambil nilai parameter search dari request.
  • Menggunakan method when() untuk menjalankan query hanya jika parameter search ada.
  • Menggunakan method where() dan orWhere() untuk mencari tugas yang judul atau deskripsinya mengandung kata kunci pencarian.
  • Menggunakan like operator untuk pencarian case-insensitive.

• Tambahkan Form Pencarian di View: Di dalam view index.blade.php, tambahkan form untuk memasukkan kata kunci pencarian.

  <form action="{{ route('todos.index') }}" method="GET">
      <input type="text" name="search" placeholder="Search...">
      <button type="submit">Search</button>
  </form>

  Form ini akan mengirimkan request GET ke route todos.index dengan parameter search.

9. Styling Aplikasi To-Do List dengan CSS Framework (Bootstrap/Tailwind CSS)

Meskipun fungsionalitasnya penting, tampilan aplikasi juga berpengaruh besar terhadap pengalaman pengguna. Menggunakan CSS framework seperti Bootstrap atau Tailwind CSS akan mempermudah kita untuk memberikan tampilan yang menarik dan responsif pada contoh project sederhana menggunakan framework Laravel kita.

• Pilih CSS Framework: Pilih salah satu framework CSS yang kamu sukai. Bootstrap dan Tailwind CSS adalah dua pilihan populer. Bootstrap menawarkan komponen siap pakai dan mudah digunakan, sedangkan Tailwind CSS memberikan fleksibilitas lebih dengan utility classes.

• Install CSS Framework: Ikuti instruksi instalasi di dokumentasi resmi framework yang kamu pilih. Biasanya ini melibatkan penggunaan npm atau yarn untuk menginstall package CSS framework tersebut.

• Import CSS Framework: Import file CSS framework ke dalam file app.css di direktori resources/css.

• Gunakan CSS Classes di View: Modifikasi view index.blade.php, create.blade.php, edit.blade.php, dan show.blade.php untuk menggunakan CSS classes dari framework yang kamu pilih. Misalnya, jika kamu menggunakan Bootstrap, kamu bisa menggunakan classes seperti container, table, btn, dan lain-lain.

Dengan menambahkan styling CSS, aplikasi To-Do List kita akan terlihat lebih profesional dan menarik.

10. Deployment Aplikasi Laravel Sederhana ke Hosting

Setelah kita selesai mengembangkan aplikasi To-Do List, langkah terakhir adalah melakukan deployment ke hosting agar bisa diakses secara online. Deployment melibatkan beberapa langkah penting, termasuk konfigurasi server, upload file, dan konfigurasi database. Dalam contoh project sederhana menggunakan framework Laravel ini, kita akan membahas langkah-langkah umum untuk deployment.

• Pilih Hosting: Pilih penyedia hosting yang mendukung PHP dan MySQL. Banyak pilihan hosting tersedia, mulai dari shared hosting hingga cloud hosting.

• Konfigurasi Server: Pastikan server hosting kamu sudah dikonfigurasi dengan benar. Ini termasuk menginstall PHP versi yang sesuai, mengaktifkan extension PHP yang dibutuhkan, dan mengkonfigurasi web server (seperti Apache atau Nginx).

• Upload File: Upload semua file dan direktori project Laravel kamu ke server hosting. Biasanya kamu bisa menggunakan FTP atau SSH untuk melakukan upload file. Pastikan kamu mengupload semua file kecuali direktori vendor dan file .env.

• Konfigurasi Database: Buat database baru di server hosting dan import struktur tabel dari file SQL yang sudah kita buat sebelumnya. Konfigurasi koneksi database di file .env di server hosting. Pastikan kamu menggunakan credentials yang benar untuk database yang baru dibuat.

• Jalankan Command composer install: Setelah file diupload, masuk ke direktori project di server hosting melalui SSH dan jalankan command composer install. Ini akan menginstall semua dependency yang dibutuhkan oleh aplikasi Laravel kamu.

• Generate Application Key: Jalankan command php artisan key:generate untuk menghasilkan application key baru.

• Konfigurasi Web Server: Konfigurasi web server untuk mengarahkan traffic ke direktori public di dalam project Laravel kamu. Ini penting agar aplikasi Laravel kamu bisa diakses melalui browser.

• Set Permissions: Pastikan direktori storage memiliki permission yang benar (biasanya 775 atau 777) agar aplikasi Laravel kamu bisa menulis file ke direktori tersebut.

Setelah semua langkah ini selesai, aplikasi Laravel kamu seharusnya sudah bisa diakses melalui browser. Selamat! Kamu sudah berhasil membuat dan mendeploy contoh project sederhana menggunakan framework Laravel.

Dengan mengikuti contoh project sederhana ini, kamu sudah mendapatkan dasar yang kuat untuk belajar Laravel. Jangan berhenti di sini! Teruslah bereksplorasi dan mencoba project-project yang lebih kompleks untuk mengasah kemampuan kamu. Selamat coding!