PPB - Pertemuan 16 - SI Akademik ITS

 5025231245 | Rafie Zaidan Umara | Pertemuan 16 | PPB C

Final Project SI Akademik ITS

SIAkademik ITS merupakan aplikasi Android sederhana yang dirancang untuk mensimulasikan sistem informasi akademik mahasiswa berbasis mobile. Aplikasi ini menyediakan fitur login, registrasi akun, dashboard akademik, biodata mahasiswa, serta jadwal perkuliahan. Pengembangan aplikasi dilakukan menggunakan bahasa pemrograman Kotlin dan Jetpack Compose dengan menerapkan konsep Material Design sehingga menghasilkan antarmuka yang modern, responsif, dan mudah digunakan.

1. MainActivity.kt

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            SiakademikitsTheme {
                NavGraph()
            }
        }
    }
}

Kode pada MainActivity berfungsi sebagai titik awal aplikasi ketika pertama kali dijalankan. Pada bagian ini digunakan fungsi setContent() untuk menampilkan antarmuka berbasis Jetpack Compose. Selain itu, tema aplikasi diterapkan menggunakan SiakademikitsTheme, kemudian seluruh navigasi halaman dikendalikan melalui pemanggilan fungsi NavGraph().

2. NavGraph.kt

fun NavGraph() {
    val navController = rememberNavController()
    NavHost(navController = navController, startDestination = Screen.Login.route) {
        composable(Screen.Login.route) {
            LoginScreen(
                onLoginSuccess = {
                    navController.navigate(Screen.Dashboard.route) {
                        popUpTo(Screen.Login.route) { inclusive = true }
                    }
                },
                onNavigateToRegister = {
                    navController.navigate(Screen.Register.route)
                }
            )
        }
        composable(Screen.Register.route) {
            RegisterScreen(
                onRegisterSuccess = {
                    navController.navigate(Screen.Login.route) {
                        popUpTo(Screen.Register.route) { inclusive = true }
                    }
                },
                onNavigateToLogin = {
                    navController.navigate(Screen.Login.route) {
                        popUpTo(Screen.Register.route) { inclusive = true }
                    }
                }
            )
        }
        composable(Screen.Dashboard.route) {
            DashboardScreen(
                onLogout = {
                    navController.navigate(Screen.Login.route) {
                        popUpTo(Screen.Dashboard.route) { inclusive = true }
                    }
                },
                onNavigateToBiodata = { navController.navigate(Screen.Biodata.route) },
                onNavigateToJadwal = { navController.navigate(Screen.Jadwal.route) }
            )
        }
        composable(Screen.Biodata.route) {
            BiodataScreen(onBack = { navController.popBackStack() })
        }
        composable(Screen.Jadwal.route) {
            JadwalScreen(onBack = { navController.popBackStack() })
        }
    }
}

Fungsi NavGraph() digunakan untuk mengatur perpindahan antar halaman dalam aplikasi. Melalui NavHost, aplikasi menentukan halaman awal yang akan ditampilkan yaitu halaman Login. Selanjutnya setiap halaman seperti Login, Register, Dashboard, Biodata, dan Jadwal didaftarkan sehingga pengguna dapat berpindah antar halaman dengan memanfaatkan NavController.

3. LoginScreen.kt

fun LoginScreen(onLoginSuccess: () -> Unit, onNavigateToRegister: () -> Unit) {
    var nrp by remember { mutableStateOf("") }
    var password by remember { mutableStateOf("") }

Fungsi LoginScreen() digunakan untuk menampilkan halaman login mahasiswa. Pada halaman ini pengguna dapat memasukkan NRP dan password sebelum masuk ke sistem. Selain menyediakan tombol login, halaman ini juga menyediakan navigasi menuju halaman registrasi bagi pengguna yang belum memiliki akun. Desain halaman dibuat menggunakan kombinasi Column, Card, dan warna identitas ITS sehingga tampil lebih menarik.

4. RegisterScreen.kt

fun RegisterScreen(onRegisterSuccess: () -> Unit, onNavigateToLogin: () -> Unit) {
    var nama by remember { mutableStateOf("") }
    var nrp by remember { mutableStateOf("") }

Fungsi RegisterScreen() digunakan untuk menampilkan formulir pendaftaran akun baru. Pengguna diminta mengisi informasi seperti nama lengkap dan NRP. Setelah proses registrasi selesai, pengguna dapat langsung diarahkan kembali ke halaman login untuk melakukan proses masuk ke aplikasi.

5. DashboardScreen.kt

@Composable
fun DashboardScreen(onLogout: () -> Unit, onNavigateToBiodata: () -> Unit, onNavigateToJadwal: () -> Unit) {
    var showLogoutDialog by remember { mutableStateOf(false) }

    val menuItems = listOf(
        SiaMenu("Biodata", Icons.Default.Person),
        SiaMenu("Transkrip", Icons.AutoMirrored.Filled.List),
        SiaMenu("Jadwal", Icons.Default.DateRange),
        SiaMenu("FRS", Icons.Default.Edit),
        SiaMenu("IPD", Icons.Default.Star),
        SiaMenu("Kurikulum", Icons.Default.Info),
        SiaMenu("Biaya", Icons.Default.ThumbUp),
        SiaMenu("Surat", Icons.Default.Email)
    )

Fungsi DashboardScreen() berperan sebagai halaman utama setelah pengguna berhasil login. Pada halaman ini ditampilkan berbagai menu akademik seperti Biodata, Jadwal, Transkrip, FRS, Kurikulum, dan beberapa layanan akademik lainnya. Dashboard dibuat menggunakan LazyColumn sehingga daftar menu dapat ditampilkan secara rapi dan mudah diakses oleh pengguna.

Class SiaMenu digunakan untuk menyimpan data setiap menu yang ditampilkan pada dashboard. Setiap menu memiliki nama dan ikon yang berbeda sehingga dapat ditampilkan secara dinamis tanpa harus membuat komponen satu per satu.

6. BiodataScreen.kt

@Composable
fun BiodataScreen(onBack: () -> Unit) {

Fungsi BiodataScreen() digunakan untuk menampilkan informasi lengkap mahasiswa. Data yang ditampilkan meliputi NRP, nama, jenis kelamin, alamat, email, nomor telepon, dosen wali, dan informasi akademik lainnya. Data biodata ditampilkan menggunakan LazyColumn agar informasi yang cukup banyak tetap nyaman dibaca oleh pengguna.

7. Data Biodata Mahasiswa

fun BiodataScreen(onBack: () -> Unit) {
    val biodataFields = listOf(
        "NRP" to "5025231245",
        "Nama" to "Rafie Zaidan Umara",
        "Jenis Kelamin" to "Laki-laki",
        "NIK" to "1234567890",
        "Dosen Wali" to "Lorem Ipsum",
        "Alamat" to "Jalan Surabaya",
        "Telepon" to "081234567890",
        "Email" to "rafie@gmail.com",
        "Tanggal Lahir" to "2 Jun 2005",
        "Gol. Darah" to "B+"
    )

Variabel biodataFields digunakan untuk menyimpan seluruh informasi mahasiswa dalam bentuk pasangan data (key-value). Data tersebut kemudian ditampilkan secara otomatis pada halaman biodata sehingga mempermudah proses pengelolaan informasi mahasiswa.

8. JadwalScreen.kt

@Composable
fun JadwalScreen(onBack: () -> Unit) {
    val jadwal = listOf(
        JadwalItem("Kamis", "15:30-17:20", "TW1-203", "UG4901 - Agama Islam", "32", "Miqdarul Khoir Syarofit, Lc., M.Pd.I"),
        JadwalItem("Kamis", "11:00-12:50", "TW1-306", "UG4914 - Bahasa Inggris", "29", "Hermanto, S.S., M.Pd."),
        JadwalItem("Rabu", "07:00-08:50", "TIF 113", "EF4602 - Interaksi Manusia & Komputer", "B", "Dr. Anny Yuniarti, S.Kom., M.Comp.Sc."),
        JadwalItem("Rabu", "15:30-17:20", "TW1-703", "UG4915 - Kewirausahaan Berbasis Teknologi", "27", "Yanurita Dwi Hapsari, S.Si., M.Sc.")
    )

Fungsi JadwalScreen() digunakan untuk menampilkan jadwal perkuliahan mahasiswa. Informasi yang ditampilkan meliputi hari, jam kuliah, ruang kelas, mata kuliah, kelas, dan dosen pengampu. Tampilan dibuat menggunakan komponen Card sehingga setiap jadwal terlihat lebih terstruktur dan mudah dibedakan.

Class JadwalItem digunakan sebagai model data untuk menyimpan informasi setiap mata kuliah yang diambil mahasiswa. Dengan menggunakan data class, proses penyimpanan dan penampilan jadwal menjadi lebih terorganisir dan mudah dikembangkan pada fitur berikutnya.

9. Kesimpulan

Berdasarkan hasil implementasi yang telah dilakukan, aplikasi SIAkademik ITS berhasil dibuat menggunakan bahasa pemrograman Kotlin dengan framework Jetpack Compose. Aplikasi ini memiliki beberapa fitur utama seperti login, registrasi akun, dashboard akademik, biodata mahasiswa, dan jadwal perkuliahan. Penerapan konsep navigasi, state management, serta komponen Material Design mampu menghasilkan antarmuka yang modern, responsif, dan mudah digunakan. Melalui proyek ini, pengembang dapat memahami penerapan dasar pengembangan aplikasi Android modern sekaligus implementasi sistem informasi akademik dalam bentuk aplikasi mobile.

Link Repo: https://github.com/zetfizet/mobile-programming/tree/master/siakademikits