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

http://tkinsankamil.site/

(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,

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

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 (Unified 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

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

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.

Gambar 4. Activity Diagram

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.

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

Tabel 3. Struktur Tabel Auth_User

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.

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,

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

Gambar 7. Tampilan Halaman Data Diri Siswa

Gambar 8. Tampilan Halaman Data Diri Siswa

Gambar 9. Tampilan Halaman SPP Siswa

Gambar 10. Rancangan Tampilan Halaman Login

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

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 ’ ] ,

’ APP_DIRS ’ : True ,

’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.*)$ ’ , 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 ) :

return render ( reques t , ’ beranda . html ’ )

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 %}

TK INSAN KAMIL

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

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[\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.

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 )

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 %}

TK INSAN KAMIL

{% 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 " %}

{% 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 " %}

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

sebagai berikut:

{% c s r f _ t o k en %}

Masukkan Username

Isi dengan username yang telah diaktivasi di sekolah

Masukkan Password

Isi dengan password yang telah diaktivasi di sekolah

Login

Ketentuan Login:

1. Te rda f t a r sebagai s i swa di TK Insan Kamil

2. Telah melakukan a k t i v a s i di admin sekolah

3. Menginput username dan password s e sua i

dengan yang dibe r ikan oleh admin di sekolah

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

76

5. Wajib di lakukan oleh orang tua s i swa

J i k a mengalami lupa password:

1. Orang tua dapat menghubungi guru di sekolah atau

datang ke admin sekolah TK Insan Kamil

2. Wajib di lakukan oleh orang tua s i swa

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 ’ ) ,

ur l ( r’^ n i l a i / ’ , views . n i l a i , name=’ n i l a i ’ ) ,

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:

hr e f="/akademik/ data / "

t i t l e ="">Data Di r i Siswa

Ni l a i Siswa

SPP Siswa

LOGOUT

Selamat Datang , {{ user }}

Data Di r i Siswa

Data Di r i

Keterangan

Username

{{user . s i swa . Siswa}}

NIS

{{user . s i swa . NIS}}

Nama Lengkap

{{user . s i swa . Nama_Lengkap}}

Nama Panggilan

{{user . s i swa . Nama_Panggilan}}

J eni s Kelamin

{{user . s i swa . Jeni s_Kelamin}}

Tempat , Tanggal Lahi r

{{user . s i swa . Tempat_Lahir }} ,

&nbsp {{ user . s i swa . Tanggal_Lahi r }}

Alamat

{{user . s i swa . Alamat}}

Agama

{{user . siswa .Agama}}

Anak Ke/td>

{{user . s i swa . Anak_Ke}}

Nama Orang Tua

{{user . s i swa . Nama_Orang_Tua}}

Alamat Orang Tua

{{user . s i swa . Alamat_Orang_Tua}}

Pekerjaan Orang Tua

{{user . siswa . Pekerjaan_Orang_Tua}}

No . Telp Orang Tua

{{user . siswa . No_Telp_Orang_Tua}}

Kelas

{{user . siswa . Kelas }}

Angkatan

{{user . siswa . Angkatan}}

Status

{{user . siswa . Status }}

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:

Data Diri Siswa

Nilai Siswa

SPP Siswa

LOGOUT

Selamat Datang , {{ user }}

Peni l a i an Siswa Dalam Satu Bulan

No.

Judul

Bulan

Ni l a i

De skr ips i

{% f o r data in t amp i l _ n i l a i %}

{{ for loop . counter }}

{{data . Judul_Pengembangan}}

{{data . Bulan}}

{{data . Peni l a i an }}

{{data . De s k r i p s i }}

{% endfor %}

Tampilan dari halaman nilai siswa seperti pada gambar 18.

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:

Data Di r i Siswa

Ni l a i Siswa

SPP Siswa

LOGOUT

Selamat Datang , {{ user }}

SPP Dalam Satu Bulan

No.

Tanggal

Bulan SPP

Status

{% f o r data in tampi l_spp %}

{{ for loop . counter }}

{{data . Tanggal | date : "D, d M Y"}}

{{data . Bulan}}

{{data . Keterangan}}

{% endfor %}

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

http://www.domainesia.com/

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.