Dokumentasi Fullstack: Backend Laravel & Frontend Android Jetpack Compose

Aplikasi ini merupakan contoh implementasi fullstack yang terdiri dari backend Laravel dan frontend Android menggunakan Jetpack Compose. Aplikasi ini memungkinkan pengguna untuk mengelola data siswa, melakukan autentikasi, dan menyimpan data ke daftar favorit.

✨ Fitur

✅ Manajemen Pengguna

Admin dapat menambahkan, mengedit, dan menghapus pengguna.

Role-based access untuk mengontrol fitur yang bisa diakses oleh masing-masing peran.

✅ Manajemen Data Akademik

Guru dapat menginput nilai dan absensi siswa.
Siswa dapat melihat jadwal, nilai, dan absensi mereka.

✅ Autentikasi & Otorisasi

Sistem login dengan validasi berbasis peran.
Middleware untuk membatasi akses fitur berdasarkan peran.

✅ Dashboard Interaktif

Tampilan UI yang intuitif untuk masing-masing peran (Admin, Teacher, dan Student).

1. Setup Backend Laravel

1.1. Menjalankan Laravel

Link Video Guide : https://drive.google.com/file/d/1ESD0gGXJmZiAfhUs4LVieROqP-OzIsCa/view?usp=sharing

Untuk menjalankan backend Laravel, ikuti langkah-langkah berikut:

Instal Laravel (Jika belum terinstal):

Jika Anda belum menginstal Laravel, instal secara global dengan Composer:
```
composer global require laravel/installer
```

Clone Repository:

Clone repository backend dari GitHub:

git clone https://github.com/NoBody313/StudentManagement-API.git

Install Dependencies:

Masuk ke folder proyek dan instal dependensi:
```
cd StudentManagement-API
composer install
```
Konfigurasi Environment:

Salin file .env.example ke .env:
```
cp .env.example .env
```
Atur konfigurasi database, mail, dan lainnya sesuai kebutuhan di file .env. Pastikan konfigurasi database sesuai dengan database yang Anda gunakan (MySQL, PostgreSQL, dll.).
Menjalankan Migrate:

Jalankan migration untuk membuat tabel database:
```
php artisan migrate
```
Menjalankan generate JWT Secret:

Generate JWT secret key untuk autentikasi:
```
php artisan jwt:secret
```
Menjalankan Server Laravel:

Jalankan server Laravel dengan opsi host dan port. Ganti 192.168.220.95 dengan IP lokal komputer Anda jika berbeda. Pastikan komputer dan perangkat Android berada dalam jaringan yang sama.
```
php artisan serve --host=192.168.220.95 --port=8000
```
Server Laravel akan berjalan pada http://192.168.220.95:8000.

2. Pengaturan URL di Android (Retrofit & Network Security)

2.1. Retrofit Configuration

Konfigurasikan Retrofit untuk mengarah ke URL server Laravel yang berjalan pada host dan port yang telah Anda tentukan.

Kode Retrofit Instance:

object RetrofitInstance {
    private const val BASE_URL = "[http://192.168.220.95:8000/](http://192.168.220.95:8000/)"

    fun getRetrofitInstance(context: Context): ApiService {
        val client = OkHttpClient.Builder()
            .addInterceptor(AuthInterceptor(context))
            .connectTimeout(30, TimeUnit.SECONDS)
            .readTimeout(30, TimeUnit.SECONDS)
            .build()

        val retrofit = Retrofit.Builder()
            .baseUrl(BASE_URL)
            .client(client)
            .addConverterFactory(GsonConverterFactory.create())
            .build()

        return retrofit.create(ApiService::class.java)
    }
}

Pastikan BASE_URL sesuai dengan host dan port yang digunakan di Laravel. Ganti 192.168.220.95 dengan IP lokal komputer Anda jika berbeda.

2.2. Network Security Configuration

Ubah konfigurasi di res/xml/network_security_config.xml untuk mengizinkan koneksi ke server lokal yang menggunakan HTTP.

network_security_config.xml:

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">192.168.220.95</domain>
    </domain-config>
</network-security-config>

Pastikan untuk mengganti 192.168.220.95 dengan IP lokal Anda jika berbeda.

3. API Endpoint di Backend Laravel

Berikut adalah daftar endpoint API yang dapat digunakan untuk berinteraksi dengan aplikasi:

3.1. API untuk Autentikasi

POST /api/login: Login pengguna.

Body Request:

{
    "email": "johndoe@example.com",
    "password": "password123"
}

Response:

{
    "access_token": "your_generated_token_here"
}

POST /api/register: Registrasi pengguna baru.

Body Request:

{
    "name": "John Doe",
    "email": "johndoe@example.com",
    "password": "password123",
    "password_confirmation": "password123"
}

3.2. API untuk Mengelola Data Siswa

GET /api/students: Mendapatkan daftar semua siswa.

Response:

[
    {
        "id": 1,
        "name": "Student Name",
        "email": "student@example.com",
        "age": 20
        // ... (field lainnya)
    }
]

GET /api/students/{id}: Mendapatkan data siswa berdasarkan ID.

Response:

{
    "id": 1,
    "name": "Student Name",
    "email": "student@example.com",
    "age": 20
    // ... (field lainnya)
}

POST /api/students: Menambah siswa baru.

Body Request:

{
    "name": "New Student",
    "age": 21,
    "email": "newstudent@example.com"
    // ... (field lainnya)
}

Response:

{
    "id": 2,
    "name": "New Student",
    "email": "newstudent@example.com",
    "age": 21
    // ... (field lainnya)
}

PUT /api/students/{id}: Mengubah data siswa berdasarkan ID.

Body Request:

{
    "name": "Updated Student",
    "age": 22,
    "email": "updatedstudent@example.com"
    // ... (field lainnya)
}

Response:

{
    "id": 2,
    "name": "Updated Student",
    "email": "updatedstudent@example.com",
    "age": 22
    // ... (field lainnya)
}

DELETE /api/students/{id}: Menghapus siswa berdasarkan ID.

Response:
```
{
    "message": "Student deleted successfully"
}
```

4. Testing API dengan Postman

Gunakan Postman untuk menguji API yang telah Anda buat di Laravel.

4.1. Registrasi Pengguna

Endpoint: POST /api/register

Body Request:

{
    "name": "John Doe",
    "email": "johndoe@example.com",
    "password": "password123",
    "password_confirmation": "password123"
}

4.2. Login Pengguna

Setelah berhasil registrasi, lakukan login untuk mendapatkan token.

Endpoint: POST /api/login

Body Request:

{
    "email": "johndoe@example.com",
    "password": "password123"
}

Response:

{
    "access_token": "your_generated_token_here"
}

4.3. Mendapatkan Data Pengguna

Gunakan token yang didapatkan dari login untuk mengakses endpoint berikut.

Endpoint: GET /api/user

Headers:

Authorization: Bearer your_generated_token_here

Response:

{
    "id": 1,
    "name": "John Doe",
    "email": "johndoe@example.com"
}

4.4. Mendapatkan Daftar Siswa

Gunakan token yang sama untuk mengakses daftar siswa.

Endpoint: GET /api/students

Headers:

Authorization: Bearer your_generated_token_here

Response:

[
    {
        "id": 1,
        "name": "Student Name",
        "email": "student@example.com"
        // ... (field lainnya)
    }
]

5. Jalankan Aplikasi di Android Studio

Setelah semua konfigurasi selesai, jalankan aplikasi di Android Studio:

Pilih Perangkat: Pilih perangkat emulator atau perangkat fisik yang ingin digunakan.
Emulator: Jika Anda menggunakan emulator, pastikan emulator sudah berjalan.
Perangkat Fisik: Jika menggunakan perangkat fisik, pastikan perangkat terhubung dengan baik ke Android Studio melalui kabel USB dan telah mengaktifkan opsi Developer Mode serta USB Debugging.
Jalankan Aplikasi: Klik tombol Run (tanda segitiga hijau) di Android Studio untuk menjalankan aplikasi.
Pilih Perangkat: Anda bisa memilih perangkat yang terhubung di pop-up yang muncul setelah Anda menekan tombol Run.

Aplikasi Android akan terhubung ke server Laravel dan melakukan request API menggunakan Retrofit.

6. Fitur Aplikasi

Aplikasi ini memiliki beberapa fitur utama, yaitu:

Autentikasi: Pengguna dapat melakukan registrasi dan login untuk mengakses fitur-fitur aplikasi.
Manajemen Data Siswa: Pengguna dapat melihat daftar siswa, melihat detail siswa, menambah siswa baru, mengubah data siswa, dan menghapus siswa.
Fitur Favorite:
- Tambah Favorite: Memungkinkan pengguna untuk menyimpan data siswa ke daftar Favorite.
  - Alur Tampilan:
    1. Pengguna melihat daftar siswa di layar utama.
    2. Di setiap item siswa, terdapat ikon hati (atau ikon lain yang sesuai).
    3. Pengguna dapat menekan ikon hati tersebut untuk menandai siswa sebagai favorit.
    4. Ikon hati akan berubah (misalnya, menjadi berwarna atau terisi) untuk menunjukkan bahwa siswa tersebut telah ditambahkan ke favorit.
  - Alur Teknis:
    1. Ketika pengguna menekan ikon hati, aplikasi akan memanggil fungsi onFavoriteChanged di StudentListItem.
    2. Fungsi ini akan menerima parameter newIsFavorite yang menunjukkan status favorit yang baru (true atau false).
    3. Aplikasi akan memanggil studentRepository.updateFavoriteStatus(student.id, newIsFavorite) untuk memperbarui status favorit di database lokal (Room).
    4. Aplikasi akan memperbarui daftar favoriteStudents dengan data terbaru dari database.
    5. UI akan diperbarui untuk mencerminkan perubahan status favorit.
- Lihat Favorite: Menampilkan daftar siswa Favorite yang telah disimpan.
  - Alur Tampilan:
    1. Pengguna dapat mengakses layar "Favorite" melalui menu navigasi (misalnya, bottom navigation).
    2. Layar "Favorite" akan menampilkan daftar siswa yang telah ditandai sebagai favorit.
    3. Setiap item siswa akan menampilkan informasi siswa dan ikon hati yang sudah terisi.
  - Alur Teknis:
    1. Ketika pengguna membuka layar "Favorite", aplikasi akan mengambil data siswa favorit dari database lokal (Room) menggunakan studentDao.getAllStudents().
    2. Aplikasi akan memfilter data siswa dari API yang memiliki isFavorite true.
    3. Data siswa favorit tersebut akan ditampilkan di layar "Favorite".
- Hapus Favorite: Memungkinkan pengguna untuk menghapus data siswa dari daftar Favorite.
  - Alur Tampilan:
    1. Pengguna melihat daftar siswa di layar "Favorite".
    2. Di setiap item siswa, terdapat ikon hati yang sudah terisi.
    3. Pengguna dapat menekan ikon hati tersebut untuk menghapus siswa dari favorit.
    4. Ikon hati akan berubah (misalnya, menjadi tidak berwarna atau kosong) untuk menunjukkan bahwa siswa tersebut telah dihapus dari favorit.
  - Alur Teknis:
    1. Ketika pengguna menekan ikon hati, aplikasi akan memanggil fungsi onFavoriteChanged di StudentListItem.
    2. Fungsi ini akan menerima parameter newIsFavorite yang menunjukkan status favorit yang baru (false).
    3. Aplikasi akan memanggil studentRepository.updateFavoriteStatus(student.id, newIsFavorite) untuk memperbarui status favorit di database lokal (Room).
    4. Aplikasi akan memperbarui daftar favoriteStudents dengan data terbaru dari database.
    5. UI akan diperbarui untuk mencerminkan perubahan status favorit.

7. Tampilan Aplikasi

Untuk memberikan gambaran lebih jelas mengenai tampilan aplikasi, berikut adalah beberapa gambar yang menunjukkan antarmuka aplikasi Android yang terhubung dengan backend Laravel.

Tampilan Login
Tampilan Dashboard
Tampilan Profile
Tampilan Daftar Siswa
Tampilan Daftar Favorite

Dengan mengikuti langkah-langkah ini, aplikasi Android Anda akan dijalankan dan berkomunikasi dengan server backend Laravel.

8. Catatan Tambahan

IP Lokal: Pastikan untuk mengganti 192.168.220.95 dengan IP lokal komputer Anda di semua konfigurasi (Laravel, Retrofit, dan Network Security).
Jaringan: Pastikan komputer dan perangkat Android berada dalam jaringan yang sama.
Database: Pastikan konfigurasi database di file .env sudah benar dan sesuai dengan database yang Anda gunakan.
JWT Secret: Pastikan Anda sudah menjalankan php artisan jwt:secret untuk generate JWT secret key.
Postman: Gunakan Postman untuk menguji semua endpoint API sebelum menjalankan aplikasi Android.
Error Handling: Jika terjadi error, periksa log di Android Studio dan log di server Laravel untuk mencari tahu penyebabnya.
Model dan Entity: Pastikan model dan entity yang kamu gunakan sudah sesuai dengan struktur data yang ada di database.
Mapper: Pastikan mapper yang kamu gunakan sudah sesuai dengan model dan entity yang kamu gunakan.

Name		Name	Last commit message	Last commit date
.idea		.idea
app		app
gradle		gradle
.gitignore		.gitignore
README.md		README.md
build.gradle.kts		build.gradle.kts
gradle.properties		gradle.properties
gradlew		gradlew
gradlew.bat		gradlew.bat
settings.gradle.kts		settings.gradle.kts

Navigation Menu

Repository navigation

About

Repository files navigation

Dokumentasi Fullstack: Backend Laravel & Frontend Android Jetpack Compose

✨ Fitur

✅ Manajemen Pengguna

✅ Manajemen Data Akademik

✅ Autentikasi & Otorisasi

✅ Dashboard Interaktif

1. Setup Backend Laravel

1.1. Menjalankan Laravel

2. Pengaturan URL di Android (Retrofit & Network Security)

2.1. Retrofit Configuration

2.2. Network Security Configuration

3. API Endpoint di Backend Laravel

3.1. API untuk Autentikasi

3.2. API untuk Mengelola Data Siswa

4. Testing API dengan Postman

4.1. Registrasi Pengguna

4.2. Login Pengguna

4.3. Mendapatkan Data Pengguna

4.4. Mendapatkan Daftar Siswa

5. Jalankan Aplikasi di Android Studio

6. Fitur Aplikasi

7. Tampilan Aplikasi

8. Catatan Tambahan

About

Releases

Packages

Contributors

Languages

Latest commit

History

Folders and files

Repository files navigation

Dokumentasi Fullstack: Backend Laravel & Frontend Android Jetpack Compose

✨ Fitur

✅ Manajemen Pengguna

✅ Manajemen Data Akademik

✅ Autentikasi & Otorisasi

✅ Dashboard Interaktif

1. Setup Backend Laravel

1.1. Menjalankan Laravel

2. Pengaturan URL di Android (Retrofit & Network Security)

2.1. Retrofit Configuration

2.2. Network Security Configuration

3. API Endpoint di Backend Laravel

3.1. API untuk Autentikasi

3.2. API untuk Mengelola Data Siswa

4. Testing API dengan Postman

4.1. Registrasi Pengguna

4.2. Login Pengguna

4.3. Mendapatkan Data Pengguna

4.4. Mendapatkan Daftar Siswa

5. Jalankan Aplikasi di Android Studio

6. Fitur Aplikasi

7. Tampilan Aplikasi

8. Catatan Tambahan

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages