Probindo Web

Website company profile PT Probindo Artika Jaya (PAJ), dibangun dengan Laravel + Inertia.js + React.

Tech Stack

Bagian	Teknologi
Backend	Laravel 13, PHP 8.3+
Frontend	React 19 + TypeScript, Inertia.js v3
Styling	Tailwind CSS v4 (light & dark mode)
Routing frontend	Laravel Wayfinder (route bertipe dari Laravel ke TypeScript)
Build tool	Vite+ (vp)
Auth (dashboard)	Laravel Fortify
Database	PostgreSQL
Testing	Pest / PHPUnit

Prasyarat

Pastikan sudah terpasang:

• PHP 8.3 atau lebih baru dengan ekstensi pdo_pgsql, pgsql, mbstring, openssl, fileinfo, dan pdo_sqlite (dipakai saat menjalankan test)
• Composer 2
• Node.js 22 dan npm
• PostgreSQL (versi 14 ke atas disarankan)
• Git

Cek versi:

php -v
composer --version
node -v
psql --version

Instalasi di Local

1. Clone repository

git clone <url-repository> probindo-web
cd probindo-web

2. Install dependency

composer install
npm install

Project ini memakai ignore-scripts=true di .npmrc, jadi script install dari package npm tidak dijalankan otomatis.

3. Siapkan file environment

cp .env.example .env
php artisan key:generate

4. Buat database PostgreSQL

Buat database kosong, misalnya lewat psql:

CREATE DATABASE probindo_db;

Lalu sesuaikan koneksi database di .env (bawaan .env.example masih SQLite):

DB_CONNECTION=pgsql
DB_HOST=127.0.0.1
DB_PORT=5432
DB_DATABASE=probindo_db
DB_USERNAME=postgres
DB_PASSWORD=password_anda

Sesuaikan DB_PORT, DB_USERNAME, dan DB_PASSWORD dengan instalasi PostgreSQL di komputer Anda.

5. Jalankan migrasi

php artisan migrate

6. Jalankan aplikasi

Cara termudah, satu perintah untuk menjalankan server Laravel, queue worker, dan Vite sekaligus:

composer dev

Atau jalankan di dua terminal terpisah:

# Terminal 1 — server Laravel
php artisan serve

# Terminal 2 — Vite dev server (hot reload)
npm run dev

Buka http://localhost:8000 di browser.

Kenapa ada dua port? Halaman dibuka lewat port 8000 (Laravel). Port 5173 adalah Vite dev server yang hanya menyajikan file JS/CSS dan hot reload saat development, bukan untuk dibuka langsung.

Halaman Website

URL	Halaman	File
/	Beranda	resources/js/pages/site/home.tsx
/tentang-kami	Tentang Kami	resources/js/pages/site/about.tsx
/jasa	Jasa & Solusi IT	resources/js/pages/site/services.tsx
/klien	Klien & Portofolio	resources/js/pages/site/clients.tsx
/kontak	Kontak & Konsultasi	resources/js/pages/site/contact.tsx

Route didefinisikan di routes/web.php.

Struktur Frontend

resources/js/
├── data/site.ts              # Info perusahaan, 2 lokasi kantor, 8 jasa, opsi form
├── layouts/site-layout.tsx   # Kerangka halaman: header + konten + footer
├── components/site/          # Komponen UI yang dipakai ulang
│   ├── section.tsx, container.tsx, section-header.tsx, page-hero.tsx
│   ├── button.tsx, card.tsx, feature-card.tsx, step-card.tsx, ...
│   ├── site-header.tsx, site-footer.tsx, theme-toggle.tsx
│   └── sections/             # Section bersama (form konsultasi, grid jasa, CTA)
└── pages/site/               # Halaman, tinggal menyusun section + data

• Ubah kontak atau alamat kantor cukup di resources/js/data/site.ts, otomatis berlaku di semua halaman.
• Teks website (Bahasa Indonesia & Inggris) ada di resources/js/content/: satu file per halaman (home.ts, about.ts, ...) plus common.ts untuk navbar, footer, form, dan 8 jasa. Setiap file berisi objek id dan en; TypeScript akan error bila versi en tidak lengkap. Gunakan **teks** untuk penekanan dan ==teks== untuk highlight merah di judul.
• Bahasa dipilih lewat tombol ID/EN di navbar dan disimpan di cookie locale (default id), dibaca oleh middleware app/Http/Middleware/HandleLocale.php.
• Warna tema (light & dark) ada di resources/css/app.css, pada blok .probindo-site (light) dan .dark .probindo-site (dark).

Perintah yang Sering Dipakai

Perintah	Fungsi
composer dev	Jalankan server, queue, dan Vite sekaligus
npm run dev	Vite dev server saja
npm run build	Build aset untuk production ke public/build
npm run types:check	Cek tipe TypeScript
npm run check	Format + lint frontend
php artisan test	Jalankan test
php artisan wayfinder:generate	Generate ulang route TypeScript setelah menambah route

Troubleshooting

Halaman putih / aset tidak termuat File public/hot tertinggal dari sesi npm run dev sebelumnya. Jalankan lagi npm run dev, atau hapus public/hot lalu npm run build.

Error could not find driver saat test Ekstensi pdo_sqlite belum aktif. Buka php.ini, aktifkan extension=pdo_sqlite, lalu restart terminal.

Error koneksi database saat migrate Pastikan PostgreSQL berjalan, database sudah dibuat, dan DB_* di .env sudah benar. Setelah mengubah .env, jalankan php artisan config:clear.

Import @/routes error di editor File route TypeScript di-generate otomatis. Jalankan php artisan wayfinder:generate atau npm run dev.

Catatan

Form konsultasi di halaman Beranda, Jasa, dan Kontak belum terhubung ke backend: saat ini hanya menampilkan pesan sukses di browser tanpa menyimpan atau mengirim data.