<![CDATA[Catatan Harian: Projek Sederhana }]]> https://sharka.site/3blog/pages/view/82/projek-sederhana https://sharka.site/3blog/pages/view/82/projek-sederhana Thu, 23 Oct 2025 19:57:40 +0800 https://sharka.site/3blog/pages/view/82/projek-sederhana <![CDATA[Projek Sederhana ]]>

đŸ’ģ Proyek Sederhana CodeIgniter 4 (CRUD Lengkap)

Berikut contoh projek sederhana CodeIgniter 4 (CI4) yang menampilkan landing page dengan data dari database, serta fitur Tambah, Edit, dan Hapus data produk. Tampilan responsif dan bisa digunakan untuk pembelajaran CRUD dasar.

📘 1. Struktur Folder


app/
 ├─ Controllers/
 │   └─ ProdukController.php
 ├─ Models/
 │   └─ ProdukModel.php
 ├─ Views/
 │   ├─ layout/
 │   │   ├─ header.php
 │   │   └─ footer.php
 │   ├─ landingpage.php
 │   ├─ tambah_produk.php
 │   ├─ edit_produk.php
 │   └─ tentang.php

🧩 2. Database (MySQL)


CREATE DATABASE db_toko;
USE db_toko;

CREATE TABLE produk (
  id INT AUTO_INCREMENT PRIMARY KEY,
  nama_produk VARCHAR(100),
  harga INT
);

INSERT INTO produk (nama_produk, harga) VALUES
('Buku Tulis', 5000),
('Pensil 2B', 3000);

🧭 3. Routes – app/Config/Routes.php


$routes->get('/', 'ProdukController::index');
$routes->get('/tentang', 'ProdukController::tentang');
$routes->get('/produk/tambah', 'ProdukController::tambah');
$routes->post('/produk/simpan', 'ProdukController::simpan');
$routes->get('/produk/edit/(:num)', 'ProdukController::edit/$1');
$routes->post('/produk/update/(:num)', 'ProdukController::update/$1');
$routes->get('/produk/hapus/(:num)', 'ProdukController::hapus/$1');

🧠 4. Model – app/Models/ProdukModel.php


<?php
namespace App\Models;
use CodeIgniter\Model;

class ProdukModel extends Model {
  protected $table = 'produk';
  protected $primaryKey = 'id';
  protected $allowedFields = ['nama_produk', 'harga'];
}

🎛ī¸ 5. Controller – app/Controllers/ProdukController.php


<?php
namespace App\Controllers;
use App\Models\ProdukModel;

class ProdukController extends BaseController {
  public function index() {
    $model = new ProdukModel();
    $data['produk'] = $model->findAll();
    return view('landingpage', $data);
  }

  public function tentang() {
    return view('tentang');
  }

  public function tambah() {
    return view('tambah_produk');
  }

  public function simpan() {
    $model = new ProdukModel();
    $model->save([
      'nama_produk' => $this->request->getPost('nama_produk'),
      'harga' => $this->request->getPost('harga')
    ]);
    return redirect()->to('/');
  }

  public function edit($id) {
    $model = new ProdukModel();
    $data['produk'] = $model->find($id);
    return view('edit_produk', $data);
  }

  public function update($id) {
    $model = new ProdukModel();
    $model->update($id, [
      'nama_produk' => $this->request->getPost('nama_produk'),
      'harga' => $this->request->getPost('harga')
    ]);
    return redirect()->to('/');
  }

  public function hapus($id) {
    $model = new ProdukModel();
    $model->delete($id);
    return redirect()->to('/');
  }
}

🧱 6. Header & Footer (layout)

app/Views/layout/header.php


<div style="background:#0d47a1;padding:10px;text-align:center;">
  <h2 style="color:white;margin:0;">🛒 Toko Delta Marena</h2>
  <div style="margin-top:10px;">
    <a href="/" style="color:white;margin:0 15px;text-decoration:none;">Home</a>
    <a href="/produk/tambah" style="color:white;margin:0 15px;text-decoration:none;">Tambah Produk</a>
    <a href="/tentang" style="color:white;margin:0 15px;text-decoration:none;">Tentang</a>
  </div>
</div>

app/Views/layout/footer.php


<div style="background:#0d47a1;color:white;text-align:center;padding:10px;margin-top:20px;">
  <p style="margin:0;">&copy; <?= date('Y'); ?> Delta Marena</p>
</div>

🏠 7. View Landing Page – landingpage.php


<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Landing Page</title>
</head>
<body style="font-family:'Poppins',sans-serif;margin:0;background:#e3f2fd;">
  <?= view('layout/header'); ?>
  <div style="max-width:600px;margin:20px auto;padding:20px;background:white;border-radius:12px;">
    <h2 style="color:#0d47a1;text-align:center;">Daftar Produk</h2>
    <table style="width:100%;border-collapse:collapse;">
      <thead>
        <tr style="background:#bbdefb;">
          <th style="padding:8px;border:1px solid #ccc;">Nama</th>
          <th style="padding:8px;border:1px solid #ccc;">Harga</th>
          <th style="padding:8px;border:1px solid #ccc;">Aksi</th>
        </tr>
      </thead>
      <tbody>
        <?php foreach($produk as $p): ?>
        <tr>
          <td style="padding:8px;border:1px solid #ccc;"><?= esc($p['nama_produk']); ?></td>
          <td style="padding:8px;border:1px solid #ccc;">Rp <?= number_format($p['harga'],0,',','.'); ?></td>
          <td style="padding:8px;border:1px solid #ccc;text-align:center;">
            <a href="/produk/edit/<?= $p['id']; ?>" style="color:#1565c0;text-decoration:none;">Edit</a> |
            <a href="/produk/hapus/<?= $p['id']; ?>" style="color:#d32f2f;text-decoration:none;" onclick="return confirm('Yakin hapus?')">Hapus</a>
          </td>
        </tr>
        <?php endforeach; ?>
      </tbody>
    </table>
  </div>
  <?= view('layout/footer'); ?>
</body>
</html>

➕ 8. View Tambah Produk – tambah_produk.php


<form action="/produk/simpan" method="post" style="max-width:500px;margin:auto;padding:20px;background:white;border-radius:12px;">
  <h2 style="text-align:center;color:#2e7d32;">Tambah Produk</h2>
  <label>Nama Produk</label>
  <input type="text" name="nama_produk" style="width:100%;padding:8px;margin:8px 0;border:1px solid #ccc;border-radius:6px;" required>
  <label>Harga</label>
  <input type="number" name="harga" style="width:100%;padding:8px;margin:8px 0;border:1px solid #ccc;border-radius:6px;" required>
  <button type="submit" style="background:#2e7d32;color:white;padding:10px 20px;border:none;border-radius:8px;">Simpan</button>
</form>

✏ī¸ 9. View Edit Produk – edit_produk.php


<form action="/produk/update/<?= $produk['id']; ?>" method="post" style="max-width:500px;margin:auto;padding:20px;background:white;border-radius:12px;">
  <h2 style="text-align:center;color:#ef6c00;">Edit Produk</h2>
  <label>Nama Produk</label>
  <input type="text" name="nama_produk" value="<?= esc($produk['nama_produk']); ?>" style="width:100%;padding:8px;margin:8px 0;border:1px solid #ccc;border-radius:6px;" required>
  <label>Harga</label>
  <input type="number" name="harga" value="<?= esc($produk['harga']); ?>" style="width:100%;padding:8px;margin:8px 0;border:1px solid #ccc;border-radius:6px;" required>
  <button type="submit" style="background:#ef6c00;color:white;padding:10px 20px;border:none;border-radius:8px;">Update</button>
</form>

ℹī¸ 10. View Tentang Kami – tentang.php


<div style="max-width:600px;margin:auto;padding:20px;background:white;border-radius:12px;">
  <h2 style="color:#0d47a1;text-align:center;">Tentang Kami</h2>
  <p style="text-align:justify;">
    Kami adalah toko sederhana bernama <strong>Delta Marena</strong> yang menjual perlengkapan sekolah.
    Sistem ini dibuat untuk latihan CRUD di CodeIgniter 4.
  </p>
</div>

✅ Hasil Akhir

  • Home – Menampilkan daftar produk (bisa Edit & Hapus)
  • Tambah Produk – Form tambah data
  • Edit Produk – Mengubah data
  • Tentang Kami – Halaman statis

🚀 Proyek ini siap kamu kembangkan menjadi aplikasi toko, inventaris, atau katalog produk.

]]> Muh.Taqiuddin.S