Aplikasi ini membuat sistem informasi akademik berbasis Android yang terhubung ke server Django. Server Django dibuat menggunakan framework Django REST untuk membuat API REST. Model data mahasiswa, akun, dan penilaian dibuat dan diserialisasikan untuk ditampilkan sebagai objek JSON lewat API. Berbagai fitur seperti login, update data, dan tampilan halaman ditambahkan pada aplikasi Android yang terhubung ke API tersebut.

1. PEMBUATAN APLIKASI ANDROID SISTEM INFORMASI
AKADEMIK (SIAK) MyPNJ BERBASIS CLIENT SERVER
MENGGUNAKAN API DJANGOREST DAN PYTHON
DJANGO SERVER
TUGAS AKHIR:
Mata Kuliah:
Mobile Programming
Oleh:
Abdul Aziz Subayu
4615030009 – TMJ 5
PROGRAM STUDI TEKNIK MULTIMEDIA DAN JARINGAN
JURUSAN TEKNIK INFORMATIKA DAN KOMPUTER
POLITEKNIK NEGERI JAKARTA
Jln. Prof. Dr. G.A. Siwabessy, Kampus UI Depok 16424
Telp: +6221 7270044 Fax : (021) 7270034

2. Pendahuluan
Aplikasi Sistem Informasi Akademik (SIAK) bertujuan untuk memudahkan mahasiswa untuk
melihat informasi mengenai dirinya yang terdapat pada database universitas ia menuntut ilmu.
Informasi tersebut berupa biodata diri, jurusan yang ia masuki, nilai yang ia dapat per semester,
dan melihat jumlah ketidakhadiran selama ia menuntut ilmu di universitas tersebut. Untuk
menghubungkan aplikasi android dengan server python Django, diperlukan sebuah REST API
yang harus dibuat terlebih dahulu. REST API ini berguna sebagai perantara informasi antara
client dan server dengan bentuk data yang dipertukarkan adalah JSON. Untuk membuat REST
API pada server Python, akan digunakan sebuah framework, yaitu djangorestframework. Pada
laporan ini akan ditunjukkan dari cara menginstall Django dan djangorestframework dengan
mengasumsikan sudah terinstallnya Python versi 3.6 pada perangkat yang digunakan.
Pada pembuatan system informasi ini juga akan dibuat aplikasi berbasis GUI yang akan
digunakan oleh admin jurusan untuk memasukkan dan mendaftarkan data mahasiswa ke server
Django dan juga akan membuat aplikasi berbasis CLI untuk memasukkan data nilai mahasiswa
ke server Django agar keduanya dapat ditampilkan pada aplikasi androidnya. Untuk pembuatan
aplikasi GUI digunakan modul python PyQt5.
Requirement Software
Berikut adalah daftar software yang diperlukan untuk membuat project ini:
- Python versi 3.6
- PyCharm IDE Python versi 2017.3.2 (opsional)
- Python Django versi 2.0 (install melalui terminal/cmd dengan ketik 'pip install django')*
- Python Djangorestframework versi 3.7.7 (install melalui terminal/cmd dengan ketik 'pip
install djangorestframework')*
- Python PyQT5 versi 5.9.2 (install melalui terminal/cmd dengan ketik 'pip install PyQT5')*
- Python requests versi 2.18.4 (install melalui terminal/cmd dengan ketik 'pip install
requests')*
- QtCreator edisi open-source versi 4.5.0
- Android Studio versi 3.0.1
*Perlu melakukan instalasi Python versi 3.x terlebih dahulu
Fungsi
Berikut adalah fungsi/firtur yang diterapkan pada aplikasi android yang akan dibuat nanti:
- Firtur Login yang menggunakan NIM dan password mahasiswa yang sudah didaftarkan ke
server pada aplikasi GUI.
- Firtur Update data, hanya data email, nomor telepon, dan alamat saja yang dapat diubah
pada aplikasi menggunakan method put.

3. - Penggunaan Screen Slide page slider untuk berpindah dari tab profil ke tab nilai dan tab
kompen.
Pembuatan
1. Pembuatan API REST pada server Django.
1.1 Menginstall dependency yang diperlukan
Langkah ini mengasumsikan terinstallnya Python versi 3.x pada perangkat yang digunakan
untuk pembuatan proyek. Dependency yang diperlukan adalah Django, djangorestframework,
PyQt5, dan requests. Untuk menginstallnya (instalasi memerlukan koneksi internet) buka
cmd/terminal lalu ketikkan:
Pip install <nama dependency>
Contoh: pip install Django
Jika tidak bisa, artinya Python belum dimasukkan ke dalam PATH dari system variable (jika
menggunakan Windows), dan untuk pengguna Linux harusnya tidak ada masalah, karna
Python sudah terinstall otomatis di Linux. Untuk cara supaya Python dapat dijalankan langsung
pada cmd merupakan diluar dari scope laporan ini. Anda dapat mencari caranya di Internet.
Setelah memasukkan sintaks diatas, tunggu sampai seluruh paket dependency didownload dan
terinstall dengan benar.
1.2 Membuat Project Server Django
Setelah terinstallnya seluruh dependency, buka CMD/terminal, lalu arahkan ke
direktori/folder yang akan dipakai untuk menyimpan file dari server Django (seperti folder
pada xampp). Lalu ketikkan sintaks berikut di cmd/terminal:
Django-admin startproject <nama project>
Contoh: Django-admin startproject universitas
Jika tidak bisa, coba mengunakan sintak berikut:
Python –m django-admin startproject <nama project>
Perhatikan pada gambar, folder universitas, hasil dari sintaks tersebut akan diletakkan pada
folder Documents. Jika sudah ada, maka gunakan CMD/terminal untuk masuk ke folder
universitas tersebut.
1.2 Membuat Model Mahasiswa, Akun, dan Penilaian pada server Django
Langkah selanjutnya setelah membuat project Django adalah membuat model dari objek
yang akan digunakan untuk penyajian, penyimpanan, dan pertukaran data pada server Django.
Model ini akan bertindak seperti peratara antara modul pywcgi Django dengan database
bawaan Django. Django menggunakan database sqlite3 sebagai database bawaannya. Dengan

4. membuat model pada Django, kita tidak perlu secara langsung melakukan segala operasi pada
databasenya, melainkan cukup dengan melakukan operasi pada model yang dibuat.
Sebelum membuat model tersebut, pertama kita harus membuat webapp untuk model tersebut.
Webapp pada Django bertindak seperti sebuah direktori dari sebuah web server yang akan
diakses. Didalam webapp inilah kita akan membuat model, dan didalam webapp ini juga
dispesifikkan bagaimana representasi model pada web browser.
1.2.1 Membuat Webapp dan Model Mahasiswa
Model Mahasiswa ini akan menampung data-data dasar tentang mahasiswa tersebut. Langkah
pertama yang dilakukan adalah membuat webapp bernama mahasiswa. Untuk melakukannya
buka cmd/terminal yang telah diarahkan ke folder universitas yang telah dibuat pada langkah
sebelumnya, lalu masukkan sintaks berikut:
Jika sudah akan muncul folder mahasiswa didalam folder universitas. Masuk kedalam folder
mahasiswa tersebut dan buka file “models.py” dengan text editor atau IDE python pilihan
kalian. Dan isikan seperti berikut:
Class mahasiswa yang kita buat akan mewariskan seluruh fungsi dari class Model yang dimiliki
Django. Lalu kita memasukkan variable didalam class ini, dimana variable tersebut akan
menjadi nama kolom didatabase dan nama class akan menjadi nama table. Variable GENDER
merupakan tuple yang akan digunakan sebagai pilihan isi dari variable gender. Variable pada
class ini diisi sesuai dengan tipe data yang akan ia simpan. CharField akan bertindak layaknya
tipe data VARCHAR pada database, TextField akan bertindak seperti tipe data BLOB pada
database dan DateField akan bertindak seperti tipe data DATE pada database. Variable foto
sengaja dibuat TextField karena foto akan kita encode mengunakan encoding base64.
Sedangkan validators digunakan untuk memvalidasi inputan apakah yang dimasukkan hanya
sepasi saja, jika iya, maka akan mengeluarkan exception ValidationError. Decorator
max_length berfungsi banyaknya karakter yang akan disimpan, blank berfungsi apakah kolom

5. tersebut diperboleh kan kosong atau tidak, dan decorator primary_key untuk menentukan
bahwa variable tersebut merupakan primary_key untuk database. Jika sudah, save file tersebut.
1.2.2 Membuat Webapp dan Model Akun
Model Akun ini akan berfungsi sebagai akun untuk firtur login pada Aplikasi Android kita
sebelum masuk ke profil mahasiswa. Akun yang akan digunakan untuk login adalah nim dari
mahasiswa itu sendiri yang ingin mengakses data dirinya. Untuk langkahnya sama seperti
langkah sebelumnya, buka CMD/terminal, arahkan ke folder/direktori universitas dimana file
“manage.py” berada. Lalu ketikkan sintaks berikut:
Sama seperti langkah sebelumnya, masuk kedalam folder akun yang baru saja dibuat oleh
Django, lalu edit isi dari file “models.py” menggunakan text editor/IDE yang kalian pilih. Lalu
isikan sebagai berikut:
Sama seperti sebelumnya, class Akun yang kita buat akan mewariskan fungsi dari class Model
dari modul models milik Django. Dan pada class ini terdapat dua variable, username dan
password, yang akan menjadi kolom pada table Akun di database sqlite3 dari Django.
1.2.3 Membuat Webapp dan Model Penilaian
Model Penilaian ini akan menampung data nilai tiap semester untuk tiap mahasiswa yang
berbeda. Langkah yang dilakukan sama seperti dua langkah sebelumnya, yaitu memasukkan
sintaks berikut:
Jika sudah, masuk ke folder penilaian yang baru dibuat dan edit isi dari file “models.py”
menggunakan text editor pilihan kalian sebagai berikut:

6. Class Nilai akan mewariskan fungsi dari class Model dari modul models milik Django, variable
uid disini akan menampung isi yang sama dengan variable nim pada model mahasiswa, sebagai
acuan bahwa nilai tersebut merupakan milik mahasiswa dengan nim sekian. Variable smtX
akan menampung nilai yang dimasukkan pada aplikasi CLI yang akan dibuat nanti, variable
ini menggunakan Charfield dikarenakan nilai yang dimasukkan akan kita encode sebagai cara
untuk mengamankan data (namun untuk project yang sesungguhnya, disarankan menggunakan
enkripsi yang kuat).
1.2.4 Migrasi Model Django ke database Sqlite3 Django.
Setelah semua model yang kita perlukan dan inginkan terlah dibuat beserta attribut yang
dimilikinya, langkah selanjutnya adalah memigrasikan Model tersebut menjadi table dan
kolom untuk database sqlite3 yang dipakai oleh Django. Caranya adalah mengedit isi file
“settings.py” yang ada didalam folder universitas dalam folder universitas.
Didalamnya edit pada bagian INSTALLED_APPS dan tambahkan pada bagian
ALLOWED_HOSTS, menjadi berikut:

7. Jika sudah, selanjutnya buka CMD/terminal lalu arahkan ke folder/direktori dimana file
“manage.py” berada, lalu masukkan sintaks berikut:
- Python manage.py makemigrations mahasiswa
Tunggu sampai proses selesai, lalu kembali masukkan:
- Python manage.py makemigrations akun
Tunggu sampai proses selesai, lalu kembali masukkan:
- Python manage.py makemigrations penilaian
Tunggu sampai proses selesai, lalu kembali masukkan:
- Python manage.py migrate
Tunggu sampai proses selesai. jika sudah selesai maka Model yang telah kita buat sebelumnya
sudah ada pada database sqlite3 bawaan Django dan tinggal menunggu untuk diisikan dengan
data yang sesuai. Langkah selanjutnya adalah membuat serialisasi dari Model yang telah kita
buat untuk ditampilkan pada REST API dari framework djangorestframework dalam bentuk
objek JSON.

8. 1.3 Membuat Serialisasi dari Model Mahasiswa, Akun, dan Nilai
Langkah selanjutnya setelah membuat model adalah membuat serialisasi dari model tersebut
agar dapat ditampilkan dalam bentuk objek JSON pada REST API. Serialisasi model tersebut
dapat kita buat dengan menggunakan framework djangorestframework. Langkah yang
dilakukan adalah, masuk kedalam salah satu folder dari Model, pada laporan ini adalah folder
mahasiswa. Lalu buat sebuah file baru berextensikan “.py” dengan nama “serializers”. Edit isi
file tersebut menggunakan teks editor pilihan kalian dan isikan sebagai berikut:
Masing-masing class yang dibuat akan mewariskan fungsi dari class ModelSerializer yang
berguna untuk menserialisasikan model yang kita buat, diwakilkan dengan variable model, dan
kolom/variable mana saja dari model, diwakilkan dengan variable fields yang berupa tuple,
yang ingin kita ubah menjadi objek JSON untuk ditampilkan, dan dilakukan operasi pada
REST API nanti.
1.4 Membuat REST API dari Serialisasi Model
Setelah pembuatan serialisasi model selesai, langkah selanjutnya adalah menentukan operasi
apa saja yang dapat dilakukan terhadap serialisasi tersebut (apakah GET, POST, PUT, atau
DELETE) dengan memanfaatkan decorators dari api_view milik djangorestframework untuk
membuat tampilan dari REST API dari serialisasi tersebut. Caranya adalah dengan mengedit
isi dari file “view.py” dari folder mahasiswa dan isikan sebagai berikut:

10. Dalam file “view.py” tersebut kita membuat beberapa fungsi yang memanfaatkan decorators
milik djangorestframework sebagai decorators dari fungsi yag kita buat, decorators tersebut
berfungsi sebagai acuan tipe request yang dibuat oleh client dalam mengakses objek JSON dari
serialisasi model kita, Jika hanya ingin melihat isi dari objek JSON maka dapat menggunakan
method GET, untuk mengisikan data baru ke objek JSON maka dapat menggunakan method
POST, untuk mengubah data JSON yang lama menjadi yang baru dapat menggunakan method
PUT, dan untuk menghapus data JSON dapat menggunakan method DELETE.
Selain itu kita mengimport modul Response dari djangorestframework untuk memberikan
informasi log kepada server mengenai request yang dilakukan oleh client ke server dan
response yang diberikan server ke client. Response tersebut juga memberikan logging status
pada system logging server untuk mengetahui apakah operasi tersebut berhasil dilakukan atau
terdapat kesalahan seperti not found, bad request, internal server error, dan lainnya.
Mahasiswa.objects.all() berfungsi untuk menampilkan seluruh data JSON yang ada pada REST
API jika method yang diminta adalah GET. Sedangkan Mahasiswa.object.get(nim=nim)
artinya akan mengambil parameter nim dan menampilkan data JSON yang memiliki nim sesuai
dengan parameter nim yang diberikan kepada REST API saat mengakses url dari REST API.
Sedangkan Mahasiswa.DoesNotExist merupakan fungsi bawaan dari class Model yang
diturunkan ke class Mahasiswa yang digunakan jika data JSON mengenai mahasiswa tersebut
tidak ada saat diakses dan mengembalikan nilai exception yang akan ditangkap dan ditangani.

11. Seri.is.valid() merupakan fungsi yang diwariskan dari class ModelSerializers yang berfungsi
untuk membandingkan Model yang diserialisasikan dengan data yang dikirimkan ke REST
API, jika valid maka data yang dikirimkan akan disimpan, ditandai dengan sintaks seri.save().
Jika tidak sesuai maka server akan mengirimkan response error ke client dengan status 400
Bad Request memanfaatkan modul Response dan Status milik djangorestframework.
REST API untuk penilaian kita pisah dari REST API untuk mahasiswa dan akunnya. Untuk
membuat REST API untuk serialisasi penilaian kita lakukan edit file “views.py” yang ada pada
folder penilaian, dan isikan sebagai berikut:
Setelah REST API selesai dibuat, langkah selanjutnya adalah menentukan path url untuk
masing – masing fungsi dari REST API tersebut

12. 1.5 Membuat URL path REST API
Langkah yang harus dilakukan selanjutnya adalah membuat path URL agar REST API yang
telah dibuat sebelumnya dapat diakses melalui url dari web browser atau url yang akan
ditanamkan pada aplikasi GUI, aplikasi CLI, dan aplikasi android yang nanti akan dibuat.
Untuk melakukannya adalah kita akan mengedit file “urls.py” yang ada didalam folder
universitas yang didalam folder universitas lagi.
Edit isi dari file tersebut seperti berikut:
Masing – masing url tersebut, ketika diakses akan menghubungkan dengan REST API terkait
untuk menangani request yang dilakukan oleh client ke server. Format dari url tersebut
menggunakan regular expression (regex) dari raw string Python yang ditandai dengan huruf
‘r’sebelum tanda petik (tanda dimulainya string)
Setelah semua langkah selesai dilakukan, kita dapat mencoba menjalankan server Django dan
mengakses url yang telah kita buat sebelumnya pada web browser. Untuk menjalankan server
Django, buka CMD/terminal dan arahkan ke folder yang ada file “manage.py” lalu ketik:
Python manage.py runserver

13. 2. Membuat Aplikasi Form GUI dengan PyQT5
REST API yang telah dibuat sebelumnya belum memiliki data apapun yan dapat ditampilkan
dalam bentuk objek JSON pada server Django. Untuk itu kita perlu membuat sebuah aplikasi
GUI yang akan berperan untuk memasukkan data ke server Django yang akan ditampilkan
menjadi objek JSON. Aplikasi ini dalam sebuah Sistem Informasi Akademik dapat diletakkan
pada komputer Admin, sehingga data mahasiswa yang diisikan tidak semena-mena dan
sepenuhnya menjadi tanggung jawab Admin. Aplikasi ini mempermudah admin untuk mengisi
data mahasiswa ke database server Django dibandingkan ia harus mengakses REST API yang
melakukan post data mahasiswa dan memasukkan datanya secara manual dalam bentuk JSON.
Langkah yang harus dilakukan untuk membuat aplikasi GUI ini adalah:
1. Membuat sebuah file berekstensi “.py”, dengan nama sesuai selera.
2. Membuka aplikasi QtCreator. Saat dibuka akan muncul tampilan seperti ini ketika memilih
pilihan Create:
3. Buatlah tampilan seperti berikut pada aplikasi QtCreator:

14. - Kotak putih tersebut adalah widget Text Edit yang terdapat pada Bagian Input Widgets.
- Untuk drop-down menu pada gender pilih Widget ComboBox pada bagian Input Widget.
Untuk mengisikan isiannya, klik 2 kali pada combobox tersebut, lalu klik tombol + untuk
menambahkan isian.
- Untuk bagian tanggal lahir gunakan Widget Date Edit pada bagian Input Widget.
- Untuk menulis keterangan, pilih Widget Label dibagian Display Widget.
- Untuk tombol, pilih Push Button pada bagian Buttons.
Setelah sesuai, ganti tulisan pada object name dibagian property editor sebelah kanan untuk
masing-masing Text Edit, Button, ComboBox, DateEdit sesuai selera, disarankan berkaitan
dengan fungsinya. Contoh penamaannya:

15. Penamaan object tersebut dilakukan untuk mempermudah mereferensikan objek tersebut pada
saat melakukan pemograman back-endnya. Jika sudah save difolder yang sama dengan file py
yang baru saja dibuat.
4. Edit isi file py menjadi sebagai berikut:
File .ui yang telah di save tadi, kita masukkan kedalam variable pada file py yang kita program,
lalu membuat sebuah class yang mewariskan fungsi dari QMainWindow dan Ui_MainWindow
yang diambil sebagai parameter dari pembuatan class.

16. Fungsi validate nim ini, akan memvalidasi apakah nim yang dimasukkan pada TextEdit nim
sudah ada pada server atau belum, jika ada, maka data tersebut akan dipanggil dan dimasukkan
ke TextEdit lain sesuai dengan datanya. Jika tidak, maka fungsi ini harus menangkap
exception/error yang diberkan oleh server sebagai responnya, agar program tidak crash dan
masih tetap dipakai. Atau ketika server tidak dapat diakses yang memberikan kode error 500
Internal Server Error. Jika data sudah ada, maka tombol submit akan dinonaktifkan dan tombol
update akan diaktifkan, ketika tombol update ditekan, maka akan terjadi proses request ke
server dengan menggunakan metode PUT untuk mengganti data lama dengan data baru yang
terdapat pada fungsi update_data(), jika tidak maka akan membuat aplikasi akan membuat
request dengan method POST untuk mengirimkan data yang baru ke server yang terdapat pada
fungsi submit_form(). Kedua method tersebut menggunakan tipe data dictionary pada Python
(setara dengan HashMap pada Java) untuk mengirimkan parameter data ke url REST API yang
diakses menggunakan modul requests dari Python.

18. Baik fungsi submit_form() maupun fungsi update_data(), keduanya diharuskan untuk
menangkap kemungkinan adanya exception/error yang diberikan oleh server untuk mencegah
aplikasi dari crash dan menangani error tersebut. Respon server 400 Bad Request menandakan
adanya data yang diisi secara tidak benar ataupun ada data yang tidak diisi. Lalu fungsi
clear_input() berfungsi untuk mengembalikan isi dari TextEdit seperti semula dan
mengaktifkan tombol submit kembali jika sebelumnya mengupdate data.
Lalu __name__==”__main__” merupakan sintaks yang digunakan untuk menandakan bahwa
ketika program ini dijalankan, maka dimulai dari bagian sintaks tersebut. Setara dengan fungsi
int main() pada C++/C.
Jika sudah selesai, maka kita coba jalankan. Caranya adalah buka CMD/terminal lalu arahkan
kefolder dimana file py kalian berada, lalu ketik
Python <nama file>.py Contoh: Python pyGuI.py

19. Maka akan tampil seperti berikut:
Setelah dijalankan, jangan lupa untuk menjalankan server Djangonya juga menggunakan
sintaks pada langkah sebelumnya. Lalu coba isikan data melalui aplikasi tersebut dan setelah
diisikan, coba edit data yang baru saja dimasukkan. Lalu lihat pada web browser apakah data
berhasil masuk atau tidak, dapat dilihat secara langsung seluruh datanya dengan memasukkan
url (http://127.0.0.1:8000/mahasiswa) atau melihatnya satu persatu dengan url
(http://127.0.0.1:800/mahasiswa/<nim>). Kita juga dapat melihat pada bagian user, apakah
sudah terdaftar atau belum. Dengan memasukkan url pada browser
(http://127.0.0.1:800/user/<nim>). Jika diakses akan muncul seperti berikut:

21. 3. Membuat Aplikasi CLI Pengisian Nilai
REST API untuk Model Mahasiswa dan Akun sudah terisi menggunakan aplikasi GUI yang
baru saja dibuat. Selanjutnya adalah mengisi data JSON pada REST API untuk Model
Penilaian. Pengisian data untuk REST API ini akan menggunakan sebuah aplikasi CLI. Dalam
Sistem informasi Akademik, aplikasi ini dapat memudahkan dosen untuk memasukkan nilai
tiap semester dari tiap mahasiswa untuk direkap di server sehingga mahasiswa dapat melihat
nilai yang mereka dapat per semesternya di apliaksi Android nanti.
Langkah untuk membuat aplikasi berbasis CLI ini adalah sebagai berikut:
1. Buat sebuah file berekstensi .py dengan nama file sesuai dengan selera.
2. Edit isi file tersebut sebagai berikut:
Sama seperti layaknya fungsi validate_nim() pada aplikasi GUI, fungsi ini juga mengambil
data nim yang ada pada server untuk dibandingkan dengan yang di Input. Jika ada maka user
dapat memasukkan nilai sesuai dengan tingkat mahasiswa. Tingkat/angkatan mahasiswa
didapat dari nim yang dimasukkan. Setelah nilai dimasukkan, maka akan ditampung di variable
dengan tipe data dictionary yang kemudian dikirim ke server dengan method POST
menggunakan modul requests Python. Jika sudah, maka program akan kembali ke posisi awal.

24. Jalankan program yang baru dibuat ini untuk mengisi nilai dari data mahasiswa yang telah diisi
sebelumnya agar dapat ditampilkan pada Aplikasi Android nanti. Untuk menjalankan program,
buka cmd/terminal lalu arahkan ke folder dimana file py ini disimpan lalu ketikkan:
Python <nama file>, contoh: Python FormNilai.py
Jika sudah dimasukkan maka kita dapat melihat data yang telah dimasukkan di url nilai dari
mahasiswa tersebut. url tersebut dapat diakses melalui browser dengan mengetikkan
(http://127.0.0.1:8000/mahasiswa/<nim>/nilai).
Contoh: http://127.0.0.1:8000/mahasiswa/4615030009/nilai

25. 4. Membuat Aplikasi Android MyPNJ untuk Mahasiswa
Setelah semuanya telah selesai dilakukan, mulai dari membuat REST API, membuat aplikasi
GUI untuk memasukkan data mahasiswa dan user ke REST API, membuat aplikasi CLI untuk
memasukkan data nilai mahasiswa ke REST API, langkah selanjutnya adalah membuat aplikasi
mobile pada Android untuk pengguna akhir (mahasiswa). Aplikasi di Android ini berguna
untuk mahasiswa mengetahui informasi mengenai dirinya, informasi nilainya tiap semester,
dan informasi ketidakhadiran dan keterlambatan.
Untuk sementara, informasi ketidakhadiran dan keterlambatan akan dibuat secara dummy dan
hardcode pada file Java dari Android Studio. Data dummy tersebut akan diambil dari data
random. Tetapi untuk profil mahasiswa dan nilai mahasiswa akan mengambil dari REST API
di server Django menggunakan method GET, serta mahasiswa dapat mengupdate data email,
nomor telepon, dan alamatnya pada aplikasi dan dikirimkan ke server untuk mengganti data
yang lama dengan data yang baru dimasukkan dengan menggunakan method PUT.
Berikut langkah yang dilakukan untuk membuat aplikasi android MyPNJ:
1. Buka Android Studio
2. Pilih Start New Android Studio Project  Masukkan Application Name dengan MyPNJ 
dan company domain sesuai selera  Pilih minimum SDK adalah API15  Lalu pilih Empty
Activity  Isi Activity Name dengan “LoginActivity”  Finish
3. Membuat Layout Login Activity
Pada tampilan sebelah kiri, buka folder folder app  res  layout. Didalamnya terdapat
sebuah file .xml yang bernama activity_login.xml. File XML ini merupakan file yang akan
menjadi tampilan awal dari Aplikasi Android yang dibuat. Isikan file xml tersebut sebagai
berikut:

27. Pada file xml tersebut kita menggunakan 2 EditText yang akan digunakan oleh user untuk
memasukkan nim dan password yang telah didaftarkan. Kedua EditText tersebut diberikan id
sebagai perantara front-end (xml) dengan back-end (java) sama seperti saat kita membuat
aplikasi GUI tadi. Lalu terdapat 1 Image View yang menggunakan logo Politeknik Negeri
Jakarta untuk ditampilkan pada halaman login di aplikasi. Lalu terdapat 1 Button yang
berfungsi untuk berpindah halaman saat kita tekan, sebelum berpindah halaman, akan
dilakukan proses otentifikasi pada back-end dimana input yang dimasukkan oleh user akan
dibandingkan dengan data yang ada pada server. Data dari server didapat dengan menggunakan
method GET lalu keduanya dibandingkan. Jika sama, maka user akan diarahkan ke halaman
selanjutnya.
4. Menambahkan library Volley
Library volley pada android berguna untuk memudahkan pengembang untuk melakukan fungsi
HTTP Request. Library ini sering digunakan bagi para pengembang aplikasi berbasis client
server untuk menghubungkan aplikasi mereka dengan server mereka, sehingga keduanya dapat
berkomunikasi dan bertukar informasi. Untuk menambahkan library Volley pada android
studio kita. Dibagian kanan terdapat tombol bertuliskan Gradle, klik lalu klik kanan pada :app
dan pilih OpenGradle Config jika sudah terbuka maka tambahkan library volley sebagai
berikut:

28. Setelah ditambahkan, klik tulisan “Sync Now” pada bagian atas. Proses ini memerlukan
koneksi internet.
5. Membuat file Application.java
Setelah selesai menambahkan library Volley, langkah selanjutnya adalah membuat file
Application.Java. File java ini akan melakukan sebuah fungsi untuk melakukan query dari
requests yang dilakukan menggunakan library Volley dibelakang layar. Untuk membuat file
ini, klik kanan pada folder package kita dibagian kiri  New  Java Class, lalu masukkan
nama file Application.java. Lalu isikan sebagai berikut:

30. 6. Membuat file LoginActivity.java
File java ini berfungsi sebagai back-end dari file xml activity_login.xml. Saat memilih Empty
Activity sebelumnya, file ini akan dibuat secara otomatis dibagian kiri buka folder app  java
 (folder yang tidak ada tulisan test dan AndroidTest). Selanjutnya adalah mengubah isi dari
file ini. File ini akan mengambil input dari user (nim dan password) kemudian
membandingkannya dengan data yang didapat dari server Django menggunakan method GET
ketika tombol Login di tekan. Jika sama, maka user akan diarahkan ke Activity selanjutnya
menggunakan Intent. Nim yang didapat sebelumnya akan dioper ke activity selanjutnya
sebagai acuan untuk mengambil data profil dan nilai dari server menggunakan Intent. Berikut
isi dari LoginActivity.java:

31. 7. Membuat activity_home.xml dan HomeActivity.java
File xml dan java ini berguna sebagai wadah untuk file fragment yang akan dibuat nanti. Pada
file ini akan diterapkan Screen Slide Pager, dimana akan menampilkan tampilan dari file xml
fragmen per halaman, sehingga user dapat berpindah tampilan dari profil ke halaman nilai dan
halaman kompen tanpa beganti activity dan tetap pada activity yang sama.
Berikut adalah isi dari activity_home.xml:

32. Selanjutnya adalah isi dari HomeActivity.java:

33. Setelah bagian HomeActivity.java dan activity_home.xml selesai dibuat. Selanjutnya adalah
membuat file model yang akan menampung data yang didapat dari server ke sebuah object.
Kita akan membuat dua file model, satu model mahasiswa yang akan dipakai untuk fragment
profil mahasiswa nanti dan satu lagi model nilai yang akan dipakai di fragment nilai nanti.
8. Membuat model Mahasiswa.java dan NilaiMahasiswa.java
Untuk membuat kedua file yang akan menampung data yang didapat dari server ini, pertama
klik kanan pada file package kalian  pilih New  pilih Package. Beri nama package tersebut
model. Lalu klik kanan pada folder model  New  Java Class. Beri nama Mahasiswa.java.
Isikan Mahasiswa.java sebagia berikut:
Jika sudah, klik kanan pada area kosong  Generate…  pilih Getter and Setter  Pilih
seluruh yang ada pada menu pilihan. Jika sudah, selanjutnya adalah membuat model
NilaiMahasiswa.java.
Langkah yang dilakukan sama seperti membuat Mahasiswa.java. Lalu isikan
NilaiMahasiswa.java seperti berikut:
Jika sudah, klik kanan pada area kosong  Generate…  pilih Getter and Setter  Pilih
seluruh yang ada pada menu pilihan.

34. 9. Membuat Fragment Profiil Mahasiswa.
Fragment ini akan berfungsi untuk menampilkan data mahasiswa yang didapat dari server
kepada user. Data yang diambil dari server masih berupa JSON, oleh karena itu diperlukan
library JSONObject untuk mengambil data yang telah dimasukkan menjadi objek JSON
sebelum ditampilkan kepada user. File java dan xml dari fragment ini akan mengisi tempat
pada file Activity dari HomeActivity dan activity_home dan dapat berganti tempat dengan file
Fragment untuk menampilkan nilai dan file fragment untuk menampilkan ketidakhadiran.
Pada file Fragment ini juga user dapat mengupdate data email, nomor telepon, dan alamat
mereka dan kemudian dikirimkan ke server saat user menekan tombol simpan yang
sebelumnya disembunyikan. Untuk mengubah data yang ditampilkan sebelumnya pada
EditText dan menampilkan tombol simpan, user harus menekan tombol Update terlebih dahulu.
Untuk memulai, klik kanan pada folder layout dibagian kiri  pilih New  Layout Resource
File. Beri nama file ini page_one.xml. Jika sudah, isikan sebagai berikut:

40. Setelah selesai, klik kanan pada package name kalian lalu pilih New  Package. Beri nama
packagenya pager. Kemudian Klik kanan pada folder pager  New  Java Class. Masukkan
nama PageOne.Java. Jika sudah isikan sebagai berikut:

45. Dapat dilihat bahwa nim yang dimasukkan pada Intent pada Activity sebelumnya akan di ambil
sebagai acuan untuk mengambil object JSON tertentu yang memiliki nim yang sama saja.
Proses pengambilan data dilakukan dengan Method GET menggunakan library Volley dalam
bentuk masih berupa objek JSON, kemudian data tersebut dimbil dari objek JSON dan
diletakkan pada objek model Mahasiswa dari class Mahasiswa yang sebelumnya telah dibuat.
Setelah itu, data yang disimpan pada objek model Mahasiswa dipanggil kembali agar datanya
ditampilkan ke TextView dan EditText yang ada pada file xml agar user dapat melihatnya.
Kemudian data email, nomor telepon, dan alamat dapat user ubah dengan menekan tombol
update. Dengan ditekannya tombol update, maka tombol simpan akan muncul dan user dapat
mengubah email, nomor telepon dan alamatnya. Saat user menekan tombol simpan, Aplikasi
akan menghubungi server dengan melakukan request untuk menggantikan data yang lama pada
server dengan data yang baru yang dikirimkan melalui aplikasi dengan menggunakan method
PUT. Untuk mengirimkannya dengen method PUT, data harus dibuat menjadi tipe data Map
lalu dipassing sebagai parameter dari request yang dilakukan.
10. Membuat Fragment Nilai Mahasiswa
Sama dengan Fragment Profil mahasiswa. Fragment ini berfungsi untuk menampilkan nilai
mahasiswa yang sebelumnya telah dimasukkan menggunakan aplikasi CLI dan diletakkan di
Server. Fragment ini akan mengambil data tersebut melalui REST API Penilaian menggunakan
method GET dan menampilkannya ke user.

46. Langkah yang dilakukan sama dengan membuat fragment profil mahasiswa. Klik kanan pada
folder layout  pilih New  pilih Layout Resource File. Lalu beri nama page_two.xml.
Setelah itu isikan sebagai berikut:

50. Setelah selesai membuat file xmlnya, selanjutnya adalah membuat file Javanya. Caranya sama
dengan sebelumnya, klik kanan pada folder pager  New  Java Class. Masukkan nama
PageTwo.Java. Jika sudah isikan sebagai berikut:

53. Sama seperti fragment sebelumnya, fragment ini mengambil nim yang telah dipassing dari
Activity sebelumnya melalui Intent untuk digunakan sebagai acuan pengambilan data nilai.
Data nilai dari server diambil menggunakan method GET dan data yang diambil masih berupa
JSON. JSONObject digunakan untuk mengambil data pada object JSON dan meletakkannya
ke objek model NilaiMahasiswa. Objek model ini kemudian dipanggil kembali untuk
menampilkan data yang telah disimpan pada objek tersebut ke TextView yang ada pada file
xml untuk diperlihatkan ke user.
11. Membuat Fragment Ketidakhadiran
Fragment ini akan mengambil data nim yang di passing melalui Intent dari Activity sebelumnya
untuk mengambil data nama mahasiswa saja yang akan ditampilkan pada fragment ini. Data
mengenai ketidakhadiran pada fragment ini masih berupa data dummy yang didapat dari
penggunaan library Random milik java. Hasil data random tersebut kemudian ditampilkan pada
TextView file xml.
Langkah yang dilakukan pertama adalah membuat file xml. Klik kanan pada folder layout 
New  Layout Resource File. Beri nama page_three.xml. kemudian isikan sebagai berikut:

57. Setelah selesai membuat file xml, selanjutnya adalah membuat file Java dari Fragment
Ketidakhadiran ini. Caranya dengan klik kanan pada folder pager  New  Java Class. Beri
nama PageThree.java kemudian isikan sebagai berikut:

59. 12. Menambahkan Permission
Agar aplikasi kita dapat berjalan pada jaringan dan terjadi komunikasi antara aplikasi dengan
server, kita perlu menambahkan permission untuk mengakses Internet. Untuk menambahkan
permission tersebut, kita harus mengubah file Android manifest.xml. Selain itu kita juga harus
menambahkan file Application.Java ke android manifest agar dapat berjalan dibelakang layar.
Ubahlah Android manifest.xml pada bagian tertentu menjadi seperti berikut:

60. 13. Menghilangkan Action Bar
Kita perlu menghilagkan Action Bar pada bagian atas aplikasi untuk menambahkan ruang dari
tampilan aplikasi yang kita buat. Selain itu kita tidak memerlukan Action Bar pada aplikasi
kita ini. Untuk menghilangkannya, pada bagian kiri pilih app  res  values  styles.xml.
Didalamnya ubah menjadi seperti berikut:
14. Menjalankan Aplikasi
Sebelum menjalankan Aplikasi Android yang telah dibuat. Server Django harus dijalankan
terlebih dahulu menggunakan IP address laptop yang terhubung satu jaringan dengan perangkat
mobile Android yang memiliki aplikasi tersebut. Untuk menjalakan server Django agar dapat
diakses ke LAN, buka CMD/terminal arahkan ke folder dimana file “manage.py” berada lalu
ketikkan:
Python manage.py runserver <IP Laptop>:<port yang diinginkan>
Contoh:
Python manage.py runserver 192.168.43.146:8000

61. 15. Tampilan Aplikasi
Berikut adalah tampilan dari aplikasi MyPNJ yang telah dibuat:

63. SUMBER REFERENSI
http://www.django-rest-framework.org/#
https://github.com/kenwaldek/pythonprogramming
https://www.thecrazyprogrammer.com/2016/10/android-convert-image-base64-string-
base64-string-image.html
https://pythonprogramming.net/open-files-pyqt-tutorial/
https://docs.djangoproject.com/en/1.9/topics/db/models/
https://stackoverflow.com/