173 lines
3.4 KiB
Markdown
173 lines
3.4 KiB
Markdown
# 📚 Perpus Digital - Prototipe Frontend Aplikasi Perpustakaan
|
|
|
|
Prototipe frontend untuk aplikasi **perpustakaan digital** yang ditujukan untuk siswa dan guru.
|
|
Aplikasi ini mencakup alur otentikasi (login & register) dan halaman dashboard yang komprehensif untuk menampilkan aktivitas perpustakaan.
|
|
|
|
> ⚠️ Prototipe ini **dibangun tanpa backend atau database**.
|
|
> Semua data yang ditampilkan bersifat statis (**dummy data**) yang disimulasikan melalui Laravel Service untuk keperluan demonstrasi dan pengembangan antarmuka (**UI/UX**).
|
|
|
|
---
|
|
|
|
## ✨ Fitur Utama
|
|
|
|
- [x] **Autentikasi (Login & Register)**
|
|
Sistem login siswa menggunakan **NISN** dan registrasi sederhana.
|
|
|
|
- [x] **Dashboard**
|
|
Menampilkan ringkasan aktivitas siswa/guru seperti statistik pinjaman, grafik, dan pengumuman.
|
|
|
|
- [x] **Peminjaman Buku Offline**
|
|
Simulasi peminjaman buku fisik di perpustakaan.
|
|
|
|
- [x] **Peminjaman Buku Online**
|
|
Simulasi membaca atau meminjam buku digital langsung di aplikasi.
|
|
|
|
- [x] **Riwayat Peminjaman Offline**
|
|
Daftar histori buku fisik yang pernah dipinjam.
|
|
|
|
- [x] **Riwayat Peminjaman Online**
|
|
Daftar histori buku digital yang pernah dipinjam atau dibaca.
|
|
|
|
- [ ] **Role Management**
|
|
Manajemen peran (siswa & guru) untuk akses fitur yang berbeda.
|
|
- Siswa : [x]
|
|
- Penjaga Perpus : [x]
|
|
- Guru : []
|
|
|
|
|
|
- [x] **Katalog Buku**
|
|
Daftar buku dengan informasi detail dan cover.
|
|
|
|
---
|
|
|
|
## 🛠️ Teknologi yang Digunakan
|
|
|
|
- **Framework**: Laravel 12
|
|
- **Frontend**:
|
|
- Bootstrap 5
|
|
- Sass (SCSS) untuk theming kustom
|
|
- Vite.js untuk kompilasi aset
|
|
- **Grafik (Charting)**: Chart.js
|
|
- **Ikon**: Bootstrap Icons
|
|
- **Bahasa**: PHP 8.4, JavaScript
|
|
|
|
---
|
|
|
|
## 📦 Prasyarat
|
|
|
|
Sebelum menjalankan proyek ini, pastikan sudah terinstal:
|
|
|
|
- [PHP](https://www.php.net/) **8.2+**
|
|
- [Composer](https://getcomposer.org/) (manajer paket PHP)
|
|
- [Node.js & NPM](https://nodejs.org/) (manajer paket JavaScript)
|
|
|
|
---
|
|
|
|
## 🚀 Instalasi & Cara Menjalankan
|
|
|
|
### 1. Clone atau Unduh Proyek
|
|
Jika proyek ada di repositori Git:
|
|
```bash
|
|
git clone https://github.com/zhadaarsita/skripsi-perpus-fe.git
|
|
cd skripsi-perpus-fe
|
|
|
|
````
|
|
|
|
Atau ekstrak file **ZIP** jika tidak menggunakan Git.
|
|
|
|
---
|
|
|
|
### 2. Instal Dependensi PHP
|
|
|
|
```bash
|
|
composer install
|
|
```
|
|
|
|
---
|
|
|
|
### 3. Buat File Environment
|
|
|
|
```bash
|
|
cp .env.example .env
|
|
```
|
|
|
|
---
|
|
|
|
### 4. Hasilkan Kunci Aplikasi
|
|
|
|
```bash
|
|
php artisan key:generate
|
|
```
|
|
|
|
---
|
|
|
|
### 5. Instal Dependensi Frontend
|
|
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
---
|
|
|
|
### 6. Compile Aset Frontend & Jalankan Server
|
|
|
|
**A. Development (auto-refresh browser)**
|
|
Gunakan 2 terminal terpisah:
|
|
|
|
* Terminal 1:
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
* Terminal 2:
|
|
|
|
```bash
|
|
php artisan serve
|
|
```
|
|
|
|
**B. Simulasi Produksi**
|
|
|
|
```bash
|
|
npm run build
|
|
php artisan serve
|
|
```
|
|
|
|
---
|
|
|
|
### 7. Buka Aplikasi
|
|
|
|
```text
|
|
http://127.0.0.1:8000
|
|
```
|
|
|
|
---
|
|
|
|
## 🔑 Informasi Login (Dummy Data)
|
|
|
|
Gunakan kredensial berikut untuk masuk sebagai siswa:
|
|
|
|
* **NISN**: `1234567890`
|
|
* **Password**: `password`
|
|
|
|
Gunakan kredensial berikut untuk masuk sebagai guru:
|
|
|
|
* **email**: `rina.marlina@smkn1perpus.sch.id`
|
|
* **Password**: `password`
|
|
|
|
Gunakan kredensial berikut untuk masuk sebagai penjaga perpus:
|
|
|
|
* **email**: `budi.santoso@smkn1perpus.sch.id`
|
|
* **Password**: `password`
|
|
|
|
---
|
|
|
|
## 📚 Belajar Laravel
|
|
|
|
Untuk dokumentasi resmi Laravel:
|
|
👉 [https://laravel.com/docs](https://laravel.com/docs)
|
|
|
|
---
|
|
# skripsi-perpus-fe
|
|
# skripsi-perpus-fe
|
|
# skripsi-perpus-fe-main
|