PENGGUNAAN FRAMEWORK DJANGO DAN MYSQL PADA APLIKASI SISTEM AKADEMIK TK INSAN KAMIL

(1)

PENGGUNAAN FRAMEWORK DJANGO DAN MYSQL PADA

APLIKASI SISTEM AKADEMIK TK INSAN KAMIL

Taman Kanak-Kanak (TK) Insan Kamil berlokasi di Cikupa, Kabupaten Tangerang menggunakan cara konvensional dalam proses pengolahan datanya, baik data akademik ataupun data keuangan. Bagian administrasi TK Insan Kamil mencatat semua data tersebut dalam buku folio besar. Proses ini mengakibatkan sulitnya pihak sekolah mengecek informasi apabila dibutuhkan. Karena itu, dibuatlah suatu sistem informasi akademik berbasis website pada TK Insan Kamil. Informasi-informasi penting yang akan dimuat di website secara garis besar adalah halaman utama, halaman akademik, dan halaman kritik saran. Pembahasan pada tulisan ini difokuskan pada pengolahan data akademik siswa. Data diolah menggunakan bahasa pemrograman python versi 3.6.6, database MySQL, framework Django versi 1.11, dan Bahasa pemodelan UML (Unified Modelling Language). MySQL sebagai database dipilih karena menerima dan mengirimkan data dengan kecepatan tinggi dan multi user. Sedangkan Django versi 1.11 dipilih karena dapat merepresentasikan data model dari basis data yang dimuat dalam bentuk objek dan sesuai dengan konsep pemograman kekinian yang berbasis Object Oriented Programming (OOP). Penggunaan website dapat membantu pihak sekolah dalam melakukan pengolahan data akademik dan keuangan, menjadi sarana promosi sekolah, serta menjalin jembatan komunikasi antar pihak sekolah dengan orang tua dengan adanya halaman kritik dan saran. Website TK Insan Kamil dapat di akses di http://tkinsankamil.site/

Kata kunci: Framework Django, MySQL, Unified Modelling Language (UML)

PENDAHULUAN

Penggunaan teknologi informasi sebagai alat bantu pengolahan data dapat dengan mudah ditemukan dalam berbagai bidang. Di sektor Pendidikan, teknologi informasi mutlak diperlukan sebagai pengelolaan data akademik dan keuangan. Namun, masih ada sekolah-sekolah tertentu yang menggunakan metode konvensional dalam pengerjaannya. Seperti Taman Kanak-Kanak

(2)

(TK) Insan Kamil yang berlokasi di Jalan Raya Serang Km 10.5 No 11 Bitung Jaya, Kecamatan Cikupa Kabupaten Tangerang, Provinsi Banten. TK ini didirikan oleh Hj. Mila Murlina dan Ika Rachmawati, S.Ag selaku pemilik dan kepala sekolah TK Insan Kamil. Dibangunnya TK Insan Kamil, dilandaskan oleh belum adanya lembaga Pendidikan anak usia dini di daerah tersebut. Maka, pada saat itu dibangun TK Insan Kamil untuk menjadi lembaga pendidikan anak usia dini pertama yang menjadi tempat belajar dan bermain anak-anak yang tinggal di daerah tersebut. TK ini sama sekali belum terjamah teknologi informasi dalam pengelolaaan administrasinya. Hal ini menyebabkan pihak orang tua kesulitan mengetahui informasi akademik anaknya. Miskomunikasi terjadi saat data yang dibutuhkan tidak akurat. Pihak sekolahpun lama kelamaan kesulitan dalam mengelola data yang semakin banyak. Untuk mengatasi segala keterbatasan metode konvensional tersebut, maka dibutuhkan sistem informasi yang tepat.

Gambar 1. Struktur Organisasi TK Insan Kamil

Hal-hal yang perlu diketahui informasinya dari TK Insan Kamil adalah profil sekolah, data guru, data siswa, nilai siswa, kalender akademik, dan status pembayaran SPP. Sejumlah data tadi akan diolah melalui sistem informasi akademik yang disajikan dalam bentuk aplikasi. Sistem informasi akademik diartikan juga sebagai sistem untuk melakukan pengolahan data akademik baik melalui software ataupun hardware sehingga proses kegiatan akademik dapat dikelola dengan baik dan menjadi informasi yang bermanfaat untuk manajemen perguruan tinggi dan pengambilan keputusan oleh eksekutif. Sistem ini bertujuan untuk dapat membantu pelaksanaan pendidikan, sehingga dapat memberikan layanan informasi yang baik dan efektif, melalui jaringan internet.[1] Dalam pembuatannya, terdapat beberapa tahapan yang dijalankan antara lain adalah: Perencanaan Aplikasi, Analisis Sistem, Perancangan Aplikasi, Perancangan Database,

(3)

Perancangan Antarmuka, Pembuatan Aplikasi, Implementasi, dan Uji coba. Aplikasi dibuat dalam bentuk website sehingga dapat diakses kapanpun dan dimanapun.

METODE PENELITIAN

Pembuatan aplikasi TK Insan Kamil menggunakan bahasa pemograman python yang dipilih karena dapat dijalankan di berbagai jenis platform sistem operasi. Karena distribusi aplikasi yang dibuat menggunakan python sangat luas dan multiplatform. Beberapa platform yang mendukung python antara lain Linux/Unix dan Windows [2] Sedangkan MySQL adalah sebuah program database server yang mampu menerima dan mengirimkan datanya dengan kecepatan tinggi, multi user, serta menggunakan perintah dasar SQL (Structured Query Language). MySQL bersifat Free Software dan Shareware, artinya penggunaanya gratis. MySQL adalah sebuah database yang dapat digunakan sebagai Client maupun server. Database MySQLmerupakan suatu perangkat lunak database yang berbentuk database relasional atau disebut Relational Database Management System (RDBMS) yang menggunakan suatu bahasa permintaan yang bernama SQL (Structured QueryLanguage)[3]. SQL (Structured Query Language) adalah sebuah bahasa permintaan database yang terstruktur. Bahasa SQL ini dibuat sebagai bahasa yang dapat merelasikan beberapa tabel dalam database maupun merelasikan antar database.

Dalam membuat aplikasi diperlukan sebuah kerangka kerja (framework). Framework juga dapat diartikan sebagai kumpulan script (terutama class dan function) yang dapat membantu developer/programmer dalam menangani berbagai masalah-masalah pemograman seperti koneksi ke database, pemanggilan variabel, file, dan lain-lain. Framework dapat pula dikatakan sebagai komponen pemograman yang siap digunakan kapan saja, sehingga programmer tidak harus membuat skrip yang sama untuk tugas yang sama[4]. Django adalah sebuah framework yang menggunakan bahasa pemograman python untuk membuat website. Django bersifat terbuka dan open source berkonsep Model View Controller (MVC) untuk membuat aplikasi web. Kelebihan dari framework Django dibandingkan dengan framework lainnya adalah [5]: Merepresentasikan data model dari basis data yang dimuat dalam bentuk objek berbasis Object Oriented Programming (OOP), memahami situasi ketika harus menjaga kerahasiaan dan integritas data, desain URL yang lebih mudah dan fleksibel, sistem template yang powerful dan

(4)

mudah dipelajari, sistem chace dapat digunakan dengan mudah, mempermudah web developer dalam membuat multi bahasa, serta tidak perlu menginstal web server selama proses development, cukup dijalankan saja

UML atau Unified Modelling Language adalah bahasa pemodelan standar. Elemen pada model-model yang dibuat akan berhubungan satu dengan lainnya mengikuti standar yang ada. UML lebih dari diagram, karena ia menceritakan konteks. UML dapat menjawab proses ketika pelanggan memesan sesuatu dari sistem, bagaimana transaksinya, bagaimana sistem mengatasi eror yang terjadi, bagaimana keamanan terhadap sistem, dan sebagainya. UML telah diaplikasikan dalam bidang investasi perbankan, lembaga kesehatan, pertahanan, sistem terdistribusi, sistem pendukung alat kerja, retail, sales dan supplier. UML diaplikasikan untuk maksud tertentu, biasanya antara lain untuk[6]: Merancang perangkat lunak, sarana komunikasi antara perangkat lunak dengan proses bisnis, menjabarkan sistem secara rinci untuk analisis dan mencari apa yang diperlukan sistem, mendokumentasikan sistem yang ada, proses-proses dan organisasinya.

Tahapan awal yang dilakukan dalam penelitian ini adalah mengidentifikasi masalah dengan melakukan pengambilan data primer di TK Insan Kamil. Data-data tersebut kemudian dianalisis dan dituliskan dalam bentuk diagram. Solusi dari permasalahan tersebut diuraikan secara rinci menggunakan UML (Uniﬁed Modeling Language). Pembangunan sistem dilakukan dengan menggunakan Python versi 3.6.6, Framework Django, dan MySQL dengan Text Editor Sublime Text. Secara garis besar halaman yang dibuat nanti akan berisi halaman login, halaman utama, halaman akademik (memuat data siswa, nilai siswa, SPP siswa, dll), halaman galeri, dan halaman kritik dan saran.

Pada halaman user akan ditampilkan menu beranda, menu tentang kami dengan sub menu visi-misi sekolah, ekstrakurikulerdan lokasi, kemudian menu akademik yang memiliki sub menu untuk siswa, guru ,dan kalender akademik, menu galeri, serta menu penerimaan siswa baru. Halaman user digunakan untuk user umum dan user login untuk orang tua siswa sedangkan halaman admin akan menampilkan dashboard untuk pengolahan data seluruh sistem. Pada halaman admin dibagi menjadi beberapa urutan anggota admin. Untuk admin adalah user dengan

(5)

hak akses superuser, admin mengolah seluruh data sistem. Untuk kepala sekolah diberikan hak akses untuk pengolahan seluruh data akademik. Untuk operator diberikan akses untuk pengolahan data akademik kecuali nilai guru dan penilaian guru, karena hanya kepala sekolah yang mendapat akses tersebut, serta dapat mengelola data galeri sebagai dokumentasi sekolah. Untuk guru kelas diberikan akses hanya untuk mengolah data penilaian siswa.

Kebutuhan minimum hardware yang digunakan yaitu Laptop Acer Aspire ES 11, Processor Intel® Celeron® Processor N3050, RAM 2 GB. Sedangkan kebutuhan software dari aplikasi ini adalah: HTML sebagai instruksi website, CSS untuk desain tampilan website, Python 3.6.3 sebagai bahasa pemograman untuk website, Django 1.11, sebagai framework website, Sistem Operasi Windows, Sublime Text sebagai text editor, MySQL untuk penyimpanan database, dan Google Chrome sebagai web browser.

Struktur navigasi adalah alur yang digunakan dalam aplikasi yang dibuat. Sebelum menyusun aplikasi multimedia kedalam software, harus ditentukan terlebih dahulu alur apa yang akan digunakan dalam aplikasi yang dibuat. Bentuk dasar dari struktur navigasi yang biasa digunakan dalam proses pembuatan aplikasi multimedia ada empat macam, yaitu struktur navigasi linier, hirarki, non linierdan campuran. [7]

PEMBAHASAN

Website TK Insan Kamil dirancang dan ditujukan untuk pihak sekolah, admin sekolah, maupun orang tua. Diagram Unified Modelling Language (UML) yang digunakan dalam perancangan aplikasi adalah use case diagram, activity diagram, dan class diagram. Struktur navigasi user dapat dilihat pada gambar 2

(6)

Gambar 2. Struktur Navigasi User

Selanjutnya dibuat rancangan sistem menggunakan Use Case Diagram seperti gambar 3.

Gambar 3. Use Case Diagram

Setelah Use Case Diagram dibuatlah Activity Diagram yaitu diagram yang menggambarkan workflow (aliran kerja) atau aktivitas dari sebuah sistem atau proses bisnis. Diagram aktivitas menggambarkan aktivitas yang dilakukan oleh sistem.

(7)

Dalam penggambaran struktur sistem dari pendefinisian kelas-kelas yang akan dibuat untuk membangun basis data, dibuatlah Class diagram dengan tiga bagian utama yaitu atribut, operasi, dan nama. Kelas yang ada dalam class diagram digambarkan dapat melakukan fungsi sesuai dengan kebutuhan sistem.

Gambar 5. Class Diagram

Database yang digunakan dalam aplikasi website ini adalah MySQL dengan script dari model yang dibuat oleh Framework Django. Terdapat 7 tabel dalam database yang dibuat yang dibuat dalam sebuah model program Django, ditulis, dan disimpan dalam models.py dalam app. Setiap app memiliki model yang akan membuatkan tabel dalam database dan memiliki model yang berbeda-beda.

(8)

Tabel 1. Struktur Tabel Auth_User

Pada tabel 1 terdapat field id yang berfungsi sebagai primary key. Field ini memiliki fungsi auto increment atau menambah secara otomatis. Field id ini akan otomatis terbuat saat menggunakan Django tanpa harus mendefinisikan pada program.

Tabel 2. Struktur Tabel Auth_User

Pada tabel 2 terdapat field user_id yang berfungsi sebagai foreign key dari tabel Auth_User. Field NIK merupakan field yang berfungsi sebagai primary key di tabel ini

(9)

Pada tabel 3 terdapat field Nama_Guru yang diambil dari field dalam tabel Guru. Untuk field yang merupakan foreign key dari sebuah tabel dapat diambil dari field lainnya untuk ditampilkan. Pada tabel 3 diatas, field yang menjadi foreign key adalah field NIK yang dimiliki guru. Django dapat mengambil field lainnya dari tabel kunci tamu.

Tabel 4. Struktur Data Siswa

Pada Tabel 4 terdapat field NIS sebagai primary key dari tabel siswa. Field Kelas merupakan foreign key dari tabel Kelas Siswa atau tabel 5. Field yang harusnya menjadi kunci tamu adalah Kode_Kelas, namun di Django dapat mengambil field yang lain dari tabel yang memiliki kunci utama.

Tabel 5.Struktur Tabel Kelas

Pada Tabel 5 terdapat field Kode_Kelas yang menjadi primary key. Field Guru merupakan foreign key dari tabel Guru. Field yang diambil adalah Nama_Lengkap dari Guru tersebut.

(10)

Tabel 6. Struktur Tabel Penilaian Siswa

Pada Tabel 6, field id merupakan primary key dari tabel tersebut dan menambah secara otomatis. Field Nama_Siswa dan Judul_Pengembangan merupakan foreign key yang diambil dari tabel Siswa dan Pengembangan Siswa.

Tabel 7. Struktur Tabel SPP Siswa

Pada Tabel 7, field id merupakan primary key dari tabel tersebut. Field Nama_Siswa merupakan foreign key dari tabel Siswa.

Tabel 8. Struktur Tabel Galeri

Tabel 9. Struktur Tabel Kritik Saran

Selanjutnya, tahapan yang akan dilakukan adalah perancangan desain antarmuka user. Pada tahap ini akan digambarkan perancangan desain tiap halaman. Dalam aplikasi ini terdapat dua halaman utama yaitu halaman untuk user dan administrator. Halaman yang dapat diakses oleh user adalah: Halaman Beranda, Halaman Tentang Kami (halaman Visi Misi, Ekstrakurikuler,

(11)

Lokasi), Halaman Akademik (halaman Guru, Siswa, dan Kalender Akademik), Halaman Galeri, Halaman PSB, Halaman Kritik Saran, Halaman Login Orang Tua Siswa, dan Halaman Data Siswa (Berisi biodata, nilai, dan spp siswa) Rancangan desain antar muka dari website TK Insan Kamil dapat dilihat sebagai berikut:

Gambar 6. Tampilan halaman Penilaian siswa

(12)

(13)

Gambar 9. Tampilan Halaman SPP Siswa

(14)

Gambar 11. Rancangan Tampilan Halaman Admin Akademik Pembayaran Siswa

Gambar 12.Rancangan Tampilan Halaman Admin Akademik Penilaian Siswa

Pembuatan website TK Insan Kamil menggunakan framework Django dengan menerapkan konsep model MVC (Models, Views, Controllers). Models adalah tempat yang berhubungan langsung dengan database, Views adalah tempat untuk menampilkan informasi, sedangkan Controllers adalah tempat untuk kontrol aplikasiyang mengatur hubungan antara Views dan Models. Langkah pertama dalam pembuatan website dengan menginstal framework django. Dalam pembuatan website ini menggunakan sistem operasi windows 10, bahasa pemograman python versi 3.6 dan sudah terinstal di komputer, serta command prompt sebagai terminal, dengan langkah-langkah instalasi sebagai berikut: Membuat sebuah folder dengan nama aplikasi, Membuka folder aplikasi di command promt, melihat versi python di komputer dengan menulis python –version, membuat environment dengan menulis perintah python -m venv Env, secara otomatis akan terbuat folder Env di dalam folder aplikasi, mengaktivasi environment dengan menulis Env\Scripts\activate.bat, menginstall django dengan menulis pip install Django==1.1*. Nanti pada command promt akan memperlihatkan proses instalasi berupa pengunduhan paket installer django

(15)

Beberapa hal yang harus diperhatikan saat menggunakan django adalah adalah: Membuka terminal command promt, membuka folder aplikasi di command promt, membuka environment dengan menulis perintah python -m venv Env seperti gambar 13

Gambar 13: Environment Django

Setelah itu kita akan mengaktivasi environment dengan menulis Env\Scripts\activate.bat, membuat projek dengan menulis perintah django-admin startproject website, kemudian memindahkan ke dalam projek tersebut dengan perintah cd website. Terakhir kita akan jalankan server django dengan menulis perintah python manage.py runserver, secara otomatis akan diberikan URL untuk dijalankan seperti Gambar 14.

Gambar 14: Menjalankan Server Django

Pembuatan halaman dalam framework Django dilakukan dengan melakukan konfigurasi pada file settings.py, urls.py, dan views.py. File settings.py adalah file pengaturan untuk web. urls.py merupakan file url ketika mengakses web, dan views.py berfungsi untuk menampilkan apa yang akan ditampilkan. Pembuatan halaman beranda dan tentang kami berada dalam satu halaman dan dilakukan dalam project django. Setelah memiliki project dan menjalankan server, dilakukan pengaturan pada settings.py seperti ini:

TEMPLATES = [ { ’BACKEND’ :

’ django . template . backends . django . DjangoTemplates ’ , ’DIRS ’ : [ ’ templates ’ ] ,

(16)

’OPTIONS ’ : { ’ context_processors ’ : [

’ django . template . context_processors.debug ’ , ’ django . template . context_processors.request ’ , ’ django . contrib.auth.context_processors.auth ’ ,

’ django . contrib . messages . context_processors.messages ’ , ] ,

} , } , ]

Sintaks diatas menunjukkan tempat untuk url mencari dimana file.html digunakan. DIRS yang berarti directory menunjukkan dimana file disimpan yaitu di folder templates pada project website.

Setelah melakukan konfigurasi pada file settings.py, dilakukan konfigurasi pada urls.py dan views.py. Untuk sintaks dalam urls.py seperti berikut:

from django . conf .urls import url, include from django . c ont r i b import admin from django . conf import settings from django . views . static import serve

from django . conf . url s . s t a t i c import s t a t i c from . import views

u r l p a t t e r n s = [

url ( r’^ jet / ’ , include ( ’ jet . urls ’ , ’ jet ’ ) ) , url ( r’^ jet / dashboard / ’ ,

inc lude ( ’ jet . dashboard . urls ’ , ’ jet_dashboard ’ ) ) , ur l ( r’^$ ’ , views . home) , ]

i f s e t t i n g s .DEBUG: u r l p a t t e r n s += [

ur l ( r’^media /(?P<path >.*)$ ’ , serve ,

{ ’ document_root ’ : s e t t i n g s .MEDIA_ROOT, } ) , ]

Penjelasan dari sintaks diatas adalah untuk mencari view yang tepat jika pengguna mengakses suatu url. Untuk halaman beranda, maka dibuat statement url(r’^$’, views.home), yang berarti jika terdapat akses url dariweb maka akan mencari views dengan definisi fungsi home. Kemudian

untuk file views.py dibuat seperti ini:

from django.http import HttpResponse from django.shortcuts import render def index ( request ) :

return render ( request , ’ index . html ’ ) def home( r eque s t ) :

(17)

Penjelesan dari sintaks diatas adalah membaca dari file urls.py jika terdapat views dengan def index atau home. Halaman beranda memiliki views home dan akan meminta akses kepada file beranda.html. File beranda.html berada pada folder templates yang telah dibuat dan dijelaskan pada sintaks file settings.py, berikut sintaks dari file beranda.html:

{% load s t a t i c %} <!DOCTYPE html> <html lang="zxx"> <head> <t i t l e >TK INSAN KAMIL</ t i t l e > <meta name="viewpor t " content="width=device_width , i n i t i a l_s c a l e=1"> <meta cha r s e t="ut f_8" />

{% inc lude " snippe t s / s c r i p t s . html " %} {% inc lude " snippe t s /tema . html " %} {% inc lude " snippe t s / font . html " %} </head>

<body>

{% inc lude " snippe t s / banner . html " %} {% inc lude " snippe t s / header . html " %} {% inc lude " snippe t s / about . html " %} {% inc lude " snippe t s / v i s imi s i . html " %} {% inc lude " snippe t s / e skul . html " %} {% inc lude " snippe t s /maps . html " %} {% inc lude " snippe t s / f o o t e r . html " %} </body>

</html>

Untuk membuat halaman akademik siswa, pengaturan dilakukan pada models.py, urls.py, dan views.py. Untuk membuat tabel siswa, dan kelas siswa, tambahkan class dengan nama Siswa, dan Kelas_Siswa dalam file models.py seperti berikut:

c l a s s Siswa (models .Model ) :

NIS = models . CharField (max_length=15, blank=False , primary_key=True )

Nama_Lengkap = models . CharField (max_length=50, blank=False , nul l=Fa l s e )

Nama_Panggilan = models . CharField (max_length=20, blank=False , nul l=Fa l s e )

j k = (

( ’ P ’ , ’ Pria ’ ) , ( ’W’ , ’ Wanita ’ ) , )

(18)

Jenis_Kelamin = models . CharField (max_length=10, choices=jk , d e f aul t=’P ’ )

Tempat_Lahir = models . CharField (max_length=25, blank=Fal se , nul l=True )

Tanggal_Lahi r = models . DateField ( blank=Fa l s e ) Alamat = models . CharField (max_length=60, nul l=True ) Agama = models . CharField (max_length=10, nul l=True ) Anak_Ke = models . Integer Field ( nul l=True )

Tinggi_Badan = models . I n t e g e r F i e l d ( nul l=True ) Berat_Badan = models . I n t e g e r F i e l d ( nul l=True )

Nama_Orang_Tua = models . CharField (max_length=50, nul l=True ) Alamat_Orang_Tua = models . CharField (max_length=60, nul l=True ) Pekerjaan_Orang_Tua = models . CharField (max_length=40, nul l=True ) No_Telp_Orang_Tua = models . CharField (max_length=13,nul l=True )

Kelas = models . ForeignKey ( Kelas_Siswa , to_field=’Kode_Kelas ’ , nul l=True ) angkatan = (

( ’ Ga n j i l 18/19 ’ , ’ Ga n j i l 18/19 ’ ) , ( ’ Genap 18/19 ’ , ’Genap 18/19 ’ ) , )

Angkatan = models . CharField (max_length=15, choi c e s=angkatan , nul l=True )

s t a t u s = (

( ’ Ak t i f ’ , ’ Ak t i f ’ ) , ( ’TA ’ , ’ Tidak Ak t i f ’ ) , )

St a tus = models . CharField (max_length=10, choi c e s=s t a tus , d e f aul t=’ Ak t i f ’ ) c l a s s Meta :

verbose_name = ’ Tabel Siswa ’

verbose_name_plural = ’ Tabel Siswa ’ def _ _ s t r _ _ ( s e l f ) :

r e turn " { } . " . format ( s e l f . Nama_Lengkap) c l a s s Kelas_Si swa (models .Model ) :

Kode_Kelas = models . CharField (max_length=3, blank=Fal se , primary_key=True )

Nama_Kelas = models . CharField (max_length=5) Keterangan = models . CharField (max_length=50, nul l=True )

Guru = models . ForeignKey (Guru , t o _ f i e l d=’NIK ’ ) c l a s s Meta :

verbose_name = ’ Tabel Siswa ( Kelas Siswa ) ’

verbose_name_plural = ’ Tabel Siswa ( Kelas Siswa ) ’ def _ _ s t r _ _ ( s e l f ) :

r e turn " { } " . format ( s e l f . Nama_Kelas )

Untuk menyimpan data dan mengisi data dalam admin django, dilakukan makemigrations dan migrate kemudian masuk ke dalam django admin dengan username dan pasword yang telah

(19)

dibuat sebelumnya, untuk mengisi record siswa. Tambahkan script berikut pada urls.py dalam app akademik:

ur l ( r’^s i swa / ’ , views . s i swa ) ,

ur l ( r’^k e l a s /(?P<kelas Input >[\w]+)/$ ’ , views . kelasSiswa ) ,

Tambahkan script berikut pada views.py dalam app akademik: def s i swa ( r eque s t ) :

s i swa = Siswa . o b j e c t s . a l l ( ) ; cont ext = {

’ data ’ : siswa , }

return render ( request ,

’ akademik/ s i swa . html ’ , cont ext ) def kelasSi swa ( reques t , k e l a s Input ) : s i swa =

Siswa . o b j e c t s . f i l t e r ( Kelas=k e l a s Input ) ; ke las _data =

Siswa . o b j e c t s . value s ( ’ Kelas ’ ) . d i s t i n c t ( ) ; cont ext = {

’ kelas_data ’ : kelas_data , ’ data ’ : siswa ,

}

r e turn render ( reques t ,

’ akademik/ f o r k e l a s . html ’ , cont ext ) def l i s t ( r eque s t ) :

semua_f ield =

Peni laian_Si swa . o b j e c t s . a l l ( ) cont ext = {

’ p a g e _ t i t l e ’ : ’ Peni laian_Si swa Siswa ’ , ’ semua_f ield ’ : semua_f ield ,

}

r e turn render ( reques t ,

’ akademik/ l i s t . html ’ , cont ext )

Halaman siswa akan menampilkan data semua siswa dan siswa berdasarkan kelas yang datanya diambil dari database. Tampilan halaman akademik siswa seperti pada Gambar 15 dan 16.

(20)

Gambar 15: Halaman Akademik Semua Siswa

Gambar 16: Halaman Akademik Siswa Berdasarkan Kelas

Untuk membuat halaman login hal pertama yang dilakukan adalah membuat form login di suatu halaman dari url yang telah dibuat dan diambil dari views. Halaman login ini akan muncul ketika user menekan button login di beranda, dikhusukan oleh orang tua siswa. Ubah views.py terlebih dahulu di dalam app akademik. Untuk sintaksnya ditulis sebagai berikut:

def or tu ( r eque s t ) : cont ext = {

’ judul ’ : ’ LOGIN ORANG TUA SISWA’ , }

user = None

if request.method == "GET " :

if request.user. is _ authenticated ( ) : return redirect ( ’ data ’ )

else :

return render

( reques t , ’ akademik/ orangtua . html ’ , cont ext ) i f r eque s t .method == "POST " :

username_login = request.POST[ ’ username ’ ] password_login = request.POST[ ’ password ’ ]

user = authenticate ( request , username=username_login , password=password_login )

if user is not None : log in ( request , user )

(21)

return redirect ( ’ data ’ ) else :

return redirect ( ’ ortu ’ ) return render

( request , ’ akademik/orangtua . html ’ , context ) Untuk urls.py perlu penambahkan script seperti berikut: ur l ( r’^or tu / ’ , views . ortu , name=’ ortu ’ ) ,

Setelah konfigurasi di url dan views, buat halaman untuk login pada orangtua. html dengan script sebagai berikut:

{% load s t a t i c %}

<!DOCTYPE html> <html lang="zxx"> <head>

<t i t l e >TK INSAN KAMIL</ t i t l e > {% inc lude " snippe t s / s c r i p t s . html " %} {% inc lude " snippe t s /tema . html " %} {% inc lude " snippe t s / font . html " %} </head>

<body>

{% inc lude " akademik/ navbar . html " %} {% inc lude " akademik/ or tu . html " %} {% inc lude " snippe t s / f o o t e r . html " %} {% inc lude " snippe t s / j a v a s c r i p t . html " %}

</body> </html>

Halaman login terdapat dalam “akademik/ortu.htm”. Script dari file tersebut sebagai berikut:

<div class=" container "> <br> <form method="POST"> {% c s r f _ t o k en %} <div class="form-group"> <l a b e l f o r="username"> Masukkan Username </label>

Isi dengan username yang telah diaktivasi di sekolah</small> </div>

(22)

<l a b e l f o r="password">Masukkan Password </label>

<input type="password " name="password " id="password " c l a s s="form_c ont r o l " id="exampleInputPassword1 "

placeholder="Password Siswa"> <small id="emailHelp "

c l a s s="form-text text-muted">

Isi dengan password yang telah diaktivasi di sekolah </small>

</div>

<button type="Submit " class="btn btn-primary"> Login</button>

</form> <br>

<div class=" alert alert-success "role=" alert "> <b>Ketentuan Login:</b>

<br>

1. Te rda f t a r sebagai s i swa di TK Insan Kamil <br> 2. Telah melakukan a k t i v a s i di admin sekolah <br> 3. Menginput username dan password s e sua i

dengan yang dibe r ikan oleh admin di sekolah <br>

4. Password berbeda s e t i a p s i swa dan t ida k boleh di sebarkan 76

<br>

5. Wajib di lakukan oleh orang tua s i swa <br><br>

<b>J i k a mengalami lupa password:</b> <br>

1. Orang tua dapat menghubungi guru di sekolah atau datang ke admin sekolah TK Insan Kamil <br> 2. Wajib di lakukan oleh orang tua s i swa </div>

</div> </div>

Halaman Data Siswa yang berisi data siswa berupa biodata, nilai, dan spp. Halaman ini dapat diakses jika sudah login terlebih dahulu. Pembuatan halaman ini perlu mengkonfigurasi di urls.py, views.py, dan tambahan file html untuk menampilkan. Berikut script tambahan di urls.py:

ur l ( r’^data / ’ , views . data , name=’data ’ ) ,

(23)

ur l ( r’^spp / ’ , views . spp , name=’ spp ’ ) , Tambahkan def pada views.py seperti berikut: def data ( r eque s t ) :

data = Siswa . objects.filter ( Siswa= request.user ) cont ext = {

’ tampil_data ’ : data , }

return render ( request , ’ akademik/ data . html ’ , cont ext ) def n i l a i ( r equest ) :

n i l a i = Penilaian_Si swa . o b j e c t s . f i l t e r ( Siswa = r eque s t . user )

cont ext = {

’ t amp i l _ n i l a i ’ : n i l a i , }

r e turn render ( reques t , ’ akademik/ n i l a i . html ’ , cont ext ) def spp ( r eque s t ) :

spp = SPP_Siswa . o b j e c t s . f i l t e r ( Siswa = r eque s t . user ) cont ext = {

’ tampi l_spp ’ : spp , }

r e turn render ( reques t , ’ akademik/ spp . html ’ , cont ext )

Pada halaman ini terdapat tiga button yaitu data, nilai, dan spp. Pembuatan halaman dengan tiga button tersebut dalam beberapa file html dengan menggunakan script pada orangtua.html, dengan mengubah script berikut:

{% inc lude " akademik/ or tu . html " %}

Mengubah dengan script untuk memanggil data dengan script berikut: {% inc lude " akademik/ datanya . html " %}

Pada file nilai.html pun sama dengan melakukan include file agar memanggil file yang sesuai. Untuk button nilai tambahkan script berikut:

{% inc lude " akademik/ n i l a i n y a . html " %}

Pada file spp.html pun sama dengan melakukan include file agar memanggil file yang sesuai. Untuk button spp tambahkan script berikut:

{% inc lude " akademik/ bayaran . html " %}

Halaman data siswa akan menampilkan isinya dengan memanggil file akademik/datanya.html. Script akademik/datanya.html sebagai berikut:

<l i c l a s s="nav_l i n k "> <a c l a s s= " btn btn_primary "

(24)

hr e f="/akademik/ data / " t i t l e ="">Data Di r i Siswa</a> <a c l a s s= " btn btn_primary " hr e f="/akademik/ n i l a i / " t i t l e =""> Ni l a i Siswa</a> <a c l a s s= " btn btn_primary " hr e f="/akademik/ spp / " t i t l e ="">SPP Siswa</a><br><br>

<a hr e f="{% ur l ’ logout ’ %}">LOGOUT </a>

</ l i> </ul> <br>

<span c l a s s="sub_l i n e ">Selamat Datang , {{ user }} </span>

<h3 c l a s s="wthree_t i t l e ">Data Di r i Siswa </h3>

</div>

<th scope=" col " width="400"

c l a s s=" t ext_c ent e r ">Keterangan </th> </t r> </thead> <tbody> <t r> <td>Username</td>

<td>{{user . s i swa . Siswa}}</td> </t r>

<t r>

<t r>

<td>Nama Lengkap</td>

<td>{{user . s i swa . Nama_Lengkap}}</td> </t r>

<t r>

(25)

<td>{{user . s i swa . Nama_Panggilan}}</td> </t r>

<t r>

<td>J eni s Kelamin</td>

<td>{{user . s i swa . Jeni s_Kelamin}}</td> </t r>

<t r>

<td>Tempat , Tanggal Lahi r</td> <td>{{user . s i swa . Tempat_Lahir }} , &nbsp {{ user . s i swa . Tanggal_Lahi r }} </td>

</t r> <t r>

<td>Alamat</td>

<td>{{user . s i swa . Alamat}}</td> </t r>

<t r>

<td>Agama</td>

<td>{{user . siswa .Agama}}</td> </t r>

<t r>

<t r>

<td>Nama Orang Tua</td>

<td>{{user . s i swa . Nama_Orang_Tua}}</td> </t r>

<t r>

<td>Alamat Orang Tua</td>

<td>{{user . s i swa . Alamat_Orang_Tua}}</td> </t r>

<t r>

<td>Pekerjaan Orang Tua</td>

<td>{{user . siswa . Pekerjaan_Orang_Tua}}</td> </t r>

<t r>

<td>No . Telp Orang Tua</td>

<td>{{user . siswa . No_Telp_Orang_Tua}}</td> </t r>

<t r>

<td>Kelas</td>

<td>{{user . siswa . Kelas }}</td> </t r>

<t r>

(26)

<td>{{user . siswa . Angkatan}}</td> </t r>

<t r>

<td>Status</td>

<td>{{user . siswa . Status }}</td> </t r> </tbody> </table> </div> </div> </s e c t ion>

Tampilan dari halaman data siswa setelah login berhasil seperti pada gambar 17

Gambar 17: Tampilan Halaman Data Biodata Siswa

Halaman nilai siswa akan menampilkan isinya dengan memanggil file akademik/nilainya.html. Script akademik/datanya.html sebagai berikut:

<l i c l a s s="nav-link "> <a c l a s s= " btn btn-primary "

hr e f="/akademik/ data / " t i t l e =""> Data Diri Siswa</a>

<aclass= " btn btn-primary "

hr e f="/akademik/ nilai / " t i t l e =""> Nilai Siswa</a>

<a class= " btn btn-primary "

hr e f="/akademik/ spp / " t i t l e =""> SPP Siswa</a><br><br>

(27)

LOGOUT</a> </ l i>

</ul> <br>

<div class=" sec-main"> <span class="sub-line "> Selamat Datang , {{ user }} </span>

Peni l a i an Siswa Dalam Satu Bulan</h3> </div>

<th scope=" col " c l a s s=" t ext_c ent e r "> Judul</th>

<th scope=" col " c l a s s=" t ext_c ent e r "> Bulan</th>

<th scope="row">{{ for loop . counter }}</th> <td>{{data . Judul_Pengembangan}}</td> <td>{{data . Bulan}}</td> <td>{{data . Peni l a i an }}</td> <td>{{data . De s k r i p s i }}</td> </t r> {% endfor %} </tbody> </table> </div> </div> </s e c t ion>

(28)

Gambar 18: Tampilan Halaman Data Nilai Siswa

Halaman data spp siswa akan menampilkan isinya dengan memanggil file akademik/bayaran.html. Script akademik/bayaran.html sebagai berikut:

<div c l a s s=" cont a ine r py_lg5"> <ul c l a s s="nav"> <l i c l a s s="nav_l i n k "> <a c l a s s= " btn btn_primary " hr e f="/akademik/ data / " t i t l e =""> Data Di r i Siswa</a> <a c l a s s= " btn btn_primary " hr e f="/akademik/ n i l a i / " t i t l e =""> Ni l a i Siswa</a> <a c l a s s= " btn btn_primary " hr e f="/akademik/ spp / " t i t l e =""> SPP Siswa</a><br><br> <a hr e f="{% ur l ’ logout ’ %}"> LOGOUT</a> </ l i> </ul> <br> <div c l a s s=" sec_main">

<span c l a s s="sub_l i n e ">Selamat Datang , {{ user }}</span> <h3 c l a s s="wthree_t i t l e ">SPP Dalam Satu Bulan</h3> </div>

<th scope=" col ">No.</th> <th scope=" col ">Tanggal</th> <th scope=" col ">Bulan SPP</th> <th scope=" col ">Status</th>

(29)

</t r> </thead> <tbody>

{% f o r data in tampi l_spp %} <t r>

<th scope="row">{{ for loop . counter }}</th> <td>{{data . Tanggal | date : "D, d M Y"}}</ td> <td>{{data . Bulan}}</td> <td>{{data . Keterangan}}</td> </t r> {% endfor %} </tbody> </table> </div> </div> </s e c t ion>

Tampilan dari halaman data spp siswa seperti pada gambar 19.

Gambar 19. Halaman Data SPP Siswa

Setelah program selesai, maka langkah berikutnya adalah mengunggah website dengan mendaftar website www.domainesia.com. Paket yang dipilih adalah paket Super Hosting di DomaiNesia. Setelah melakukan pembayaran, pihak website akan memberikan billing, username, dan password untuk melakukan hosting program. Setelah melakukan login, maka kita akan mencari setup python app dan membuka file manager untuk upload file website yang telah penulis buat beserta file sql yang akan digunakan. Jika telah berhasil, domain yang telah dibeli akan dapat diakses dengan alamat http://tkinsankamil.site/

SIMPULAN DAN SARAN

Dari hasil penelitian yang dilakukan, hasil output sudah dan setiap menu dapat berfungsi dengan baik. Dengan demikian, tujuan pembuatan website TK Insan Kamil sudah mencapai tujuannya yaitu memudahkan komunikasi antar sekolah dan orang tua. Orang tua dan pihak sekolah sangat

(30)

terbantu dengan wecsite yang dukup lengkap ini, Selain itu, pemasaran TK Insan Kamil dapat tersebar di sekitar wilayah Kecamatan Cikupa. Namun website yang dibangun belum dapat mengelola pendaftaran siswa baru secara online. Kedepannya website ini dapat dikembangkan lebih lengkap lagi.

DAFTAR PUSTAKA

[1] Homaidi, A. (2016). Sistem informasi akademik amik ibrahimy berbasis web. Jurnal Ilmiah Informatika 1(1), 2.

[2] Enterprise, J. (2017). Otodidak Pemograman Python. Jakarta: PT Elex Media Komputindo.

[3] Saputro, H. (2012). Modul Pembelajaran Praktek Basis Data (MySQL). [4] https://www.scribd.com/doc/52982287/PENGERTIAN FRAMEWORK. Pengertian framework. Diakses pada 5 Agustus 2019.

[5] Nurusysyabani, K. (2018). Apa itu django web framework.

https://www.medium.com/@nurusysyabani/apa-itu-django-webframewrok. Diakses pada 3 Agustus 2019.

[6] Oktafianto, M. (2016). Analisis dan Perancangan Sistem Informasi Menggunakan Model Terstruktur dan UML. Yogyakarta: Andi Offset. [7] https://www.coursehero.com/file/15133216/Struktur Navigasi-3/. Struktur navigasi. Diakses pada 6 Agustus 2019.