169 lines
4.9 KiB
Markdown
169 lines
4.9 KiB
Markdown
# 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:
|
|
|
|
```bash
|
|
php -v
|
|
composer --version
|
|
node -v
|
|
psql --version
|
|
```
|
|
|
|
## Instalasi di Local
|
|
|
|
### 1. Clone repository
|
|
|
|
```bash
|
|
git clone <url-repository> probindo-web
|
|
cd probindo-web
|
|
```
|
|
|
|
### 2. Install dependency
|
|
|
|
```bash
|
|
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
|
|
|
|
```bash
|
|
cp .env.example .env
|
|
php artisan key:generate
|
|
```
|
|
|
|
### 4. Buat database PostgreSQL
|
|
|
|
Buat database kosong, misalnya lewat `psql`:
|
|
|
|
```sql
|
|
CREATE DATABASE probindo_db;
|
|
```
|
|
|
|
Lalu sesuaikan koneksi database di `.env` (bawaan `.env.example` masih SQLite):
|
|
|
|
```env
|
|
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
|
|
|
|
```bash
|
|
php artisan migrate
|
|
```
|
|
|
|
### 6. Jalankan aplikasi
|
|
|
|
Cara termudah, satu perintah untuk menjalankan server Laravel, queue worker, dan Vite sekaligus:
|
|
|
|
```bash
|
|
composer dev
|
|
```
|
|
|
|
Atau jalankan di dua terminal terpisah:
|
|
|
|
```bash
|
|
# 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, alamat, atau daftar jasa** cukup di `resources/js/data/site.ts`, otomatis berlaku di semua halaman.
|
|
- **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.
|