Membangun Frontend untuk Website E-Commerce dengan CodeIgniter 4

Setelah backend API selesai dibangun, langkah berikutnya dalam membangun website e-commerce adalah membuat Frontend menggunakan CodeIgniter 4 (CI4). Frontend ini akan menampilkan produk dan memungkinkan pengguna berinteraksi dengan sistem secara visual.

1. Menyiapkan Template dengan Bootstrap

• Unduh dan tambahkan Bootstrap ke proyek Anda atau gunakan CDN di app/Views/layout.php:

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">

• Buat folder app/Views/layouts/ dan buat file main.php untuk template dasar.

• Tambahkan navbar dan struktur HTML dasar di dalamnya.

2. Membuat Halaman Home

• Buat file Home.php di app/Controllers/:

  namespace App\Controllers;
  use App\Models\ProdukModel;
  
  class Home extends BaseController {
      public function index() {
          $model = new ProdukModel();
          $data['produk'] = $model->findAll();
          return view('home', $data);
      }
  }

• Buat file home.php di app/Views/:

  <h2>Daftar Produk</h2>
  <div class="row">
      <?php foreach ($produk as $p): ?>
      <div class="col-md-4">
          <div class="card">
              <img src="<?= $p['gambar']; ?>" class="card-img-top" alt="<?= $p['nama']; ?>">
              <div class="card-body">
                  <h5 class="card-title"><?= $p['nama']; ?></h5>
                  <p class="card-text">Rp <?= number_format($p['harga'], 0, ',', '.'); ?></p>
              </div>
          </div>
      </div>
      <?php endforeach; ?>
  </div>

3. Menampilkan Data Menggunakan AJAX

• Tambahkan script di dalam home.php untuk memuat produk secara dinamis:

  <script>
  $(document).ready(function(){
      $.get("/api/produk", function(data){
          let html = "";
          data.forEach(p => {
              html += `<div class='col-md-4'>
                  <div class='card'>
                      <img src='${p.gambar}' class='card-img-top'>
                      <div class='card-body'>
                          <h5 class='card-title'>${p.nama}</h5>
                          <p class='card-text'>Rp ${p.harga.toLocaleString()}</p>
                      </div>
                  </div>
              </div>`;
          });
          $(".row").html(html);
      });
  });
  </script>

4. Mengatur Routing Frontend

• Buka file app/Config/Routes.php dan tambahkan:

  $routes->get('/', 'Home::index');

• Sekarang halaman utama dapat diakses melalui http://localhost:8080/.

Dengan mengikuti langkah-langkah di atas, frontend sederhana untuk website e-commerce telah dibuat menggunakan CodeIgniter 4, Bootstrap, dan AJAX. Frontend ini dapat dikembangkan lebih lanjut dengan fitur interaktif lainnya seperti pencarian, filter produk, dan checkout.