# **Horus Entry Exam: Fullstack Programmer Internship**
-----
### **🗃️ 1. Desain dan Implementasi Database**
Tugas Anda adalah merancang dan membuat database untuk menyimpan data pengguna.
* **Nama Database**: `horus_[NamaPanggilanAnda]_db`.
* **DBMS**: Bebas (MySQL, PostgreSQL, dsb.).
* **Tabel**: Buat sebuah tabel bernama `users` dengan struktur sebagai berikut:
| Nama Kolom | Tipe Data | Keterangan |
| :--- | :--- | :--- |
| `id` | `INT` / `BIGINT` | Primary Key, Auto Increment |
| `username` | `VARCHAR(50)` | Wajib diisi, Unik (tidak boleh ada duplikasi) |
| `password` | `VARCHAR(255)` | Wajib diisi (simpan dalam bentuk *hash*) |
| `email` | `VARCHAR(100)` | Wajib diisi, Unik |
| `nama` | `VARCHAR(100)` | Wajib diisi |
| `created_at` | `TIMESTAMP` | Default: Waktu saat ini |
-----
### **🌐 2. Pengembangan REST API**
Buatlah serangkaian *endpoint* API untuk mengelola data pada tabel `users`. Bahasa pemrograman bebas, namun **sangat disarankan menggunakan Python dengan framework Flask**.
* **`POST /users/register`**
* **Fungsi**: Mendaftarkan pengguna baru.
* **Request Body**: `{ "username": "...", "password": "...", "email": "...", "nama": "..." }`
* **Respon Sukses (201 Created)**: `{ "message": "Registrasi berhasil" }`
* **`POST /users/login`**
* **Fungsi**: Mengautentikasi pengguna.
* **Request Body**: `{ "username": "...", "password": "..." }`
* **Respon Sukses (200 OK)**: `{ "message": "Login berhasil", "token": "..." }` (opsional).
* **`GET /users`**
* **Fungsi**: Mendapatkan semua data pengguna (tanpa *password*).
* **Respon Sukses (200 OK)**: `[ { "id": 1, "username": "...", "email": "...", "nama": "..." }, ... ]`
* **`PUT /users/{id}`**
* **Fungsi**: Memperbarui data pengguna berdasarkan ID.
* **Request Body**: `{ "username": "...", "email": "...", "nama": "..." }`
* **Respon Sukses (200 OK)**: `{ "message": "Data user berhasil diperbarui" }`
* **`DELETE /users/{id}`**
* **Fungsi**: Menghapus data pengguna berdasarkan ID.
* **Respon Sukses (200 OK)**: `{ "message": "User berhasil dihapus" }`
-----
### **🖥️ 3. Implementasi Tampilan Web (Frontend)**
Buat antarmuka pengguna yang terhubung dengan API yang telah dibuat. Framework web bebas, namun **sangat disarankan menggunakan Vue.js**.
#### **a. Halaman Login**
* **Deskripsi**: Halaman awal untuk pengguna masuk ke dalam sistem.
* **Alur & Validasi**:
* Pengguna memasukkan `username` dan `password`.
* Jika berhasil, arahkan ke halaman Dashboard.
* Jika gagal, tampilkan pesan error yang jelas (misal: "Username atau password salah").
* Tombol **Registrasi** mengarahkan ke halaman Registrasi.
* **Mockup**:
```
+-------------------------------------------+
| |
| LOGIN |
| |
| Username: [___________________________] |
| |
| Password: [___________________________] |
| |
| ( Login ) ( Registrasi ) |
| |
+-------------------------------------------+
```
#### **b. Halaman Registrasi**
* **Deskripsi**: Halaman untuk pengguna baru membuat akun.
* **Alur & Validasi**:
* Semua *input field* wajib diisi. Lakukan validasi dasar di sisi klien (misal: format email).
* Setelah menekan tombol **Registrasi**, kirim data ke API.
* Jika registrasi berhasil, tampilkan notifikasi sukses dan arahkan pengguna kembali ke halaman Login.
* Jika gagal (misal: username sudah ada), tampilkan pesan error.
* **Mockup**:
```
+-------------------------------------------+
| |
| REGISTRASI AKUN |
| |
| Nama Lengkap: [_______________________] |
| Email: [_______________________] |
| Username: [_______________________] |
| Password: [_______________________] |
| |
| ( Registrasi ) |
| |
+-------------------------------------------+
```
#### **c. Halaman Dashboard**
* **Deskripsi**: Halaman utama setelah login, menampilkan daftar semua pengguna. Halaman ini harus terproteksi (tidak bisa diakses sebelum login).
* **Alur & Fungsionalitas**:
* Tampilkan semua data pengguna dalam format tabel yang mudah dibaca.
* Sediakan fitur **pencarian** (*search*) untuk memfilter data berdasarkan nama atau username.
* Tombol **Update** pada setiap baris akan mengarahkan ke halaman *Update User* dengan membawa data user tersebut.
* Tombol **Delete** akan menghapus data setelah konfirmasi (misal: muncul *pop-up* "Apakah Anda yakin?").
* **Mockup**:
```
+----------------------------------------------------------------------+
| DASHBOARD PENGGUNA |
| |
| Cari Pengguna: [_________________] ( Cari ) |
| |
| | ID | Username | Nama Lengkap | Email | Aksi |
| |----|------------|-------------------|---------------------|--------|
| | 1 | andi_dev | Andi Wijaya | andi@email.com | [U][H] |
| | 2 | budi_s | Budi Santoso | budi@email.com | [U][H] |
| | 3 | citra_p | Citra Permata | citra@email.com | [U][H] |
| |
+----------------------------------------------------------------------+
```
#### **d. Halaman Update User**
* **Deskripsi**: Halaman untuk mengubah informasi pengguna yang sudah ada.
* **Alur & Validasi**:
* *Input field* sudah terisi otomatis dengan data pengguna yang dipilih dari halaman Dashboard.
* Pengguna dapat mengubah data dan menyimpannya dengan menekan tombol **Update**.
* Setelah berhasil, arahkan kembali ke halaman Dashboard dengan data yang sudah diperbarui.
* Tombol **Kembali** akan mengarahkan pengguna ke halaman Dashboard tanpa menyimpan perubahan.
* **Mockup**:
```
+-------------------------------------------+
| |
| UPDATE USER |
| |
| Nama Lengkap: [Budi Santoso___________] |
| Email: [budi@email.com_________] |
| Username: [budi_s_________________] |
| |
| ( Update ) ( Kembali ) |
| |
+-------------------------------------------+
```
-----
### ✅ 4. Deliverables
**Source Code**
Satu repository **publik** di GitHub yang berisi dua folder utama:
```
horus-[nama-panggilan]-exam/
├── backend/
│ ├── app/
│ │ ├── __init__.py
│ │ ├── config.py
│ │ ├── extensions.py # db, migrate, jwt, cors
│ │ ├── models/
│ │ │ ├── __init__.py
│ │ │ └── user.py
│ │ ├── routes/
│ │ │ ├── __init__.py
│ │ │ └── users.py
│ │ ├── services/
│ │ │ ├── __init__.py
│ │ │ └── user_service.py
│ │ └── utils/
│ │ ├── __init__.py
│ │ └── validators.py
│ ├── migrations/ # hasil flask db init
│ ├── .env.example
│ ├── requirements.txt
│ └── run.py # entry point: `python run.py`
│
├── frontend/
│ ├── src/
│ │ ├── assets/
│ │ ├── components/
│ │ │ ├── UserTable.vue
│ │ │ └── SearchBar.vue
│ │ ├── views/
│ │ │ ├── Login.vue
│ │ │ ├── Register.vue
│ │ │ ├── Dashboard.vue
│ │ │ └── UpdateUser.vue
│ │ ├── router/
│ │ │ └── index.js
│ │ ├── store/
│ │ │ └── auth.js
│ │ ├── services/
│ │ │ └── api.js # axios instance
│ │ ├── App.vue
│ │ └── main.js
│ ├── public/
│ │ └── index.html
│ ├── .env.example
│ └── package.json
│
└── README.md
```
> Struktur di atas langsung menjadi **bagian wajib dari deliverable**, sehingga penilai dapat dengan cepat menavigasi kode Anda dan mengecek modularitas, clean-code, serta best-practice yang diterapkan.
### **🏆 5. Kriteria Penilaian (Total 100 Poin)**
| Kriteria | Bobot |
| :--- | :---: |
| **Fungsionalitas Backend & API** | 35 |
| **Fungsionalitas Frontend** | 30 |
| **Kualitas Kode & Struktur** | 20 |
| **Desain Database** | 10 |
| **Dokumentasi (README.md)** | 5 |
**Selamat Mengerjakan\!** Hasil pekerjaan akan menjadi bahan diskusi pada tahap wawancara teknis.
Sign in with Wallet
Connect another wallet