Fastprint-Web

FastPrint Product Management System

Sistem manajemen produk terintegrasi dengan API FastPrint untuk Junior Programmer Test

Daftar Isi

1. Tentang Proyek
   • Fitur Utama
   • Teknologi yang Digunakan
2. Getting Started
   • Instalasi
3. Penggunaan
4. Struktur Database
5. API Reference
6. Screenshot
7. Roadmap
8. Kontribusi
9. Lisensi
10. Kontak
11. Ucapan Terima Kasih

Tentang Proyek

Sistem Manajemen Produk FastPrint adalah aplikasi web yang dibangun sebagai bagian dari tes Junior Programmer. Aplikasi ini mengintegrasikan data produk dari API FastPrint ke dalam database lokal dan menyediakan antarmuka CRUD (Create, Read, Update, Delete) yang lengkap untuk mengelola data produk.

Fitur Utama

• ✅ Integrasi API FastPrint - Mengambil data produk secara otomatis dari API eksternal
• ✅ Manajemen Produk Lengkap - CRUD (Create, Read, Update, Delete) untuk data produk
• ✅ Filter Produk - Menampilkan produk berdasarkan status "Bisa Dijual"
• ✅ Validasi Form - Validasi input untuk nama produk dan harga
• ✅ Konfirmasi Hapus - Alert konfirmasi sebelum menghapus data
• ✅ Pagination - Menampilkan data produk dengan pagination (10 item per halaman)
• ✅ Relasi Database - Implementasi relasi antar tabel (Produk, Kategori, Status)
• ✅ UI Modern - Menggunakan Tailwind CSS untuk tampilan yang responsif dan modern
• ✅ Progress Bar - Progress indicator saat mengambil data dari API

(back to top)

Teknologi yang Digunakan

• 
• 
• 
• 
• 

(back to top)

Getting Started

Ikuti langkah-langkah berikut untuk menjalankan proyek ini di komputer lokal Anda.

Pastikan komputer Anda sudah terinstal software berikut:

• PHP >= 8.1

  php --version

• Composer (Dependency Manager untuk PHP)

  composer --version

  Jika belum terinstal, download dari getcomposer.org

• MySQL >= 5.7 atau MariaDB

  mysql --version

• Node.js & NPM (untuk Tailwind CSS)

  node --version
  npm --version

Instalasi

Ikuti langkah-langkah berikut dengan seksama:

1. Clone Repository

   git clone https://github.com/geboboi/fastprint-web.git
   cd fastprint-web

2. Install Dependencies PHP

   composer install

3. Install Dependencies Node.js

   npm install

4. Copy File Environment

   cp .env.example .env

5. Generate Application Key

   php artisan key:generate

6. Konfigurasi Database

   Buka file .env dan sesuaikan konfigurasi database:

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

7. Buat Database

   Buka MySQL/phpMyAdmin dan buat database baru:

   CREATE DATABASE fastprint_web;

8. Jalankan Migration

   Buat tabel-tabel yang diperlukan:

   php artisan migrate

   Migration akan membuat tabel berikut:

   • produk - Tabel untuk menyimpan data produk
   • kategori - Tabel untuk menyimpan kategori produk
   • status - Tabel untuk menyimpan status produk

9. Import Data dari API FastPrint

   Jalankan seeder untuk mengambil data dari API:

   php artisan db:seed

   Atau jalankan command secara langsung:

   php artisan produk:fetch

   Catatan: Username API akan berubah setiap hari mengikuti server. Contoh untuk tanggal 29 Januari 2026: tesprogrammer290126C22

10. Compile Assets (Tailwind CSS)

    npm run dev

    Atau untuk production:

    npm run build

11. Jalankan Aplikasi

    php artisan serve

    Aplikasi akan berjalan di http://localhost:8000

(back to top)

Penggunaan

Halaman Utama

Setelah instalasi selesai, buka browser dan akses http://localhost:8000

Anda akan melihat halaman utama yang menampilkan daftar produk dengan fitur:

• Filter Status - Pilih "Bisa Dijual" atau "Semua" produk
• Pagination - Navigasi halaman dengan 10 produk per halaman
• Action Buttons - Edit dan Hapus untuk setiap produk

Menambah Produk Baru

1. Klik tombol "Tambah Produk" di halaman utama
2. Isi form dengan data berikut:
   • Nama Produk (wajib diisi)
   • Harga (wajib diisi, hanya angka)
   • Kategori (pilih dari dropdown)
   • Status (pilih dari dropdown)
3. Klik "Simpan"

Mengedit Produk

1. Klik tombol "Edit" pada produk yang ingin diubah
2. Ubah data yang diperlukan
3. Klik "Update"

Menghapus Produk

1. Klik tombol "Hapus" pada produk yang ingin dihapus
2. Konfirmasi penghapusan pada dialog alert
3. Produk akan dihapus dari database

Mengambil Data Terbaru dari API

Untuk memperbarui data produk dari API FastPrint:

php artisan produk:fetch

Command ini akan:

• Login ke API FastPrint dengan kredensial yang sesuai
• Mengambil semua data produk
• Menyimpan/update data ke database lokal
• Menampilkan progress bar selama proses

(back to top)

Struktur Database

Tabel: produk

Kolom	Tipe Data	Keterangan
id_produk	INT (PK)	Primary Key
nama_produk	VARCHAR(255)	Nama produk
harga	INT	Harga produk (dalam rupiah)
kategori_id	INT (FK)	Foreign key ke tabel kategori
status_id	INT (FK)	Foreign key ke tabel status
created_at	TIMESTAMP	Waktu pembuatan
updated_at	TIMESTAMP	Waktu update terakhir

Tabel: kategori

Kolom	Tipe Data	Keterangan
id_kategori	INT (PK)	Primary Key
nama_kategori	VARCHAR(255)	Nama kategori
created_at	TIMESTAMP	Waktu pembuatan
updated_at	TIMESTAMP	Waktu update

Tabel: status

Kolom	Tipe Data	Keterangan
id_status	INT (PK)	Primary Key
nama_status	VARCHAR(255)	Nama status
created_at	TIMESTAMP	Waktu pembuatan
updated_at	TIMESTAMP	Waktu update

Relasi Database

produk
├── belongsTo kategori (kategori_id -> id_kategori)
└── belongsTo status (status_id -> id_status)

(back to top)

API Reference

Endpoint API FastPrint

URL: https://recruitment.fastprint.co.id/tes/api_tes_programmer

Method: POST

Content-Type: application/x-www-form-urlencoded

Request Parameters

Parameter	Tipe	Deskripsi
username	string	Format: tesprogrammer[DDMMYY]C22
password	string	MD5 hash dari bisacoding-[DD-MM-YY]
status	string	Filter status (default: "1")

Contoh Request

// Tanggal: 29-01-2026
$username = 'tesprogrammer290126C22';
$password = md5('bisacoding-29-01-26');

$response = Http::asForm()->post('https://recruitment.fastprint.co.id/tes/api_tes_programmer', [
    'username' => $username,
    'password' => $password,
    'status'   => '1'
]);

Response Format

{
  "error": 0,
  "ket": "Sukses",
  "data": [
    {
      "id_produk": "1",
      "nama_produk": "Contoh Produk",
      "harga": "Rp 50.000",
      "kategori": "Nama Kategori",
      "status": "bisa dijual"
    }
  ]
}

Error Response

{
  "error": 1,
  "ket": "Username atau Password salah"
}

(back to top)

(back to top)

Kontak

Gabriela Sihutomo - gabie.jelita@gmail.com

Project Link: https://github.com/geboboi/fastprint-web

(back to top)

(back to top)

Troubleshooting

Error: "SQLSTATE[HY000] [2002] Connection refused"

Solusi:

• Pastikan MySQL service sudah berjalan
• Periksa konfigurasi di file .env (DB_HOST, DB_PORT, DB_USERNAME, DB_PASSWORD)

Error: "Username atau Password salah" saat fetch data

Solusi:

• Periksa username di file GetProduk.php apakah sudah sesuai dengan tanggal hari ini
• Format username: tesprogrammer[DDMMYY]C22
• Contoh: untuk tanggal 29 Januari 2026 → tesprogrammer290126C22

Tailwind CSS tidak bekerja

Solusi:

npm run dev

Atau compile untuk production:

npm run build

Migration error

Solusi:

php artisan migrate:fresh
php artisan db:seed

Port 8000 sudah digunakan

Solusi: Jalankan di port berbeda:

php artisan serve --port=8080

(back to top)