PROPOSAL

TUGAS AKHIR

DESAIN DAN IMPLEMENTASI E-LEARNING

MENGGUNAKAN FRAMEWORK CODEIGNITER DI
SMK NEGERI 5 KUPANG

RONALDO EKA PUTRA WABANG

NIM. 1723734878

PROGRAM STUDI TEKNIK KOMPUTER DAN JARINGAN

JENJANG PENDIDIKAN DIPLOMA III
JURUSAN TEKNIK ELEKTRO
POLITEKNIK NEGERI KUPANG
2022
 LEMBAR PENGESAHAN

1. Judul Tugas Akhir : Desain dan implementasi E-learning

menggunakan framework codeigniter di
SMK Negeri 5 Kupang
2. Bidang Tugas Akhir : Rancang Bangun
3. Bidang Keahlian :
4. Pengusul
a. Nama Lengkap : Ronaldo Eka Putra Wabang
b. NIM : 1723734878
c. Program Studi : Teknik Komputer dan Jaringan Teknik
d. Jurusan : Elektro
e. No.Telp/HP : 081339303763
f. Alamat Email : aldowabang@gmail.com
5. Dosen Pembimbing I
a. Nama Lengkap dan Gelar
b. NIP : Lita A. Ndoloe, S.Kom.M.Kom.
Pembimbing II : 19830414 20081 2 007
a. Nama Lengkap dan Gelar : Robinson A. Wadu, ST.,MT.
b. NIP : 19770810 200501 1 002
6. Jangka Waktu Pelaksanaan : 6 (Enam) Bulan

Kupang,

Ronaldo Eka Putra Wabang

NIM.1723734878
Mengetahui dan Menyetujui
Dosen Pembimbing I Dosen Pembimbing II

Lita A. Ndoloe, S.Kom.M.Kom Robinson A. Wadu, ST.,MT

NIP . 19830414 20081 2 007 NIP. 19770810 200501 1 002

Ketua Program Studi

Gloria C. Manulangga,ST,M,MT
NIP. 19790101 200801 2 040
 KATA PENGANTAR

Puji Syukur kepada Tuhan Yang Maha Esa yang memberikan Rahmat-Nya
sehingga penulis dapat menyelesaikan penyusunan proposal ini.Adapun tujuan
penyusunan proposal ini ditujukan untuk memenuhi syarat untuk menyelesaikan
pendidikan di Politeknik Negeri Kupang.

Dalam penulisan proposal tugas akhir ini, penulis banyak mendapat bantuan
dan bimbingan dari berbagai pihak, baik secara langsung maupun tidak langsung.
Pada kesempatan ini, penulis mengucapkan limpa terima kasih kepada:

1. Frans Mangngi,ST.,M.Eng, Selaku Direktur Politeknik Negeri Kupang.

2. Sumartini Dana,ST.,MT, Selaku Ketua Jurusan Teknik Elektro.
3. Gloria C. Manulangga,ST,M,MT. Selaku Ketua Program Studi Teknik
Komputer dan Jaringan.
4. Lita A. Ndoloe, S.Kom.M.Kom .Selaku dosen pembimbing satu.
5. Robinson A. Wadu, ST., MT. Selaku dosen pembimbing dua.
6. Orang tua penulis yang selalu memberikan dukungan dan motivasi dalam
penyelesaian penulisan proposal ini.
7. Teman-teman dan semua pihak yang telah membantu penulis hingga
terselesaikannya proposal ini, yang tidak dapat penulis sebutkan satu per satu.

Sebagai penutup, penulis sangat mengharapkan kritik dan saran yang

membangun guna pengembangan proposal tugas akhir selanjutnya.Semoga proposal
ini dapat memberikan manfaat dan sumbangan pemikiran bagi perkembangan
pengetahuan bagi kita semua.

Kupang, April 2022

Penulis
 DAFTAR ISI

KATA PENGANTAR............................................................................................................iii
DAFTAR ISI..........................................................................................................................iv
DAFTAR GAMBAR..............................................................................................................vi
DAFTAR TABEL..................................................................................................................vii
BAB 1......................................................................................................................................1
PENDAHULUAN...................................................................................................................1
1.1 Latar Belakang.........................................................................................................1
1.2 Rumusan Masalah....................................................................................................2
1.3 Tujuan......................................................................................................................2
1.4 Manfaat....................................................................................................................2
1.5 Batasan Masalah.......................................................................................................2
BAB 2......................................................................................................................................4
TINJAUAN PUSTAKA...........................................................................................................4
2.1 Sistem Informasi......................................................................................................4
2.2 Internet.....................................................................................................................6
2.3 Website.....................................................................................................................7
2.4 E-learning................................................................................................................8
2.5 PHP (PHP: Hypertext Preprocessor).......................................................................9
2.6 Codeigniter.............................................................................................................10
2.7 MVC (Model, View dan Controller).......................................................................11
2.8 MySQL...................................................................................................................12
2.9 CSS (Cascading Style Sheet)..................................................................................12
2.10 HTML( Hyper Text Markup Language)................................................................13
2.11 Java Script..............................................................................................................13
2.12 Bootstrap................................................................................................................14
2.13 Basis Data..............................................................................................................15
2.14 MetodeWaterfall.....................................................................................................15
2.15 Xampp....................................................................................................................16
2.16 Unfield Modeling Language (UML).......................................................................17
 2.17 Use case Diagram...................................................................................................18
2.18 Class Diagram........................................................................................................19
2.19 Activity Diagram....................................................................................................20
2.20 Gambaran Umum SMK Negeri 5 Kota Kupang.....................................................22
BAB 3....................................................................................................................................28
METODE PENELITIAN.......................................................................................................28
3.1 Lokasi dan Waktu Penelitian..................................................................................28
3.2 Analisis Kebutuhan Sistem.....................................................................................29
3.3 Use case Diagram..................................................................................................31
3.4 Activity Diagram....................................................................................................33
3.5 Class Diagram.......................................................................................................35
3.6 Sitemap...................................................................................................................36
3.7 Kamus Data............................................................................................................39
3.8 Perancangan Desain GUI (Graphic User Interfaces).............................................45
3.9 Pengujian Sistem....................................................................................................54
DAFTAR PUSTAKA............................................................................................................55
 DAFTAR GAMBAR

Gambar 2. 1 Flowchart codeigniter mengimplementasikan MVC.............................11

Gambar 2. 2 Model, View, Controller.........................................................................12
Gambar 3. 1 Use cas Diagram.....................................................................................31
Gambar 3. 2 Activity Diagram.....................................................................................34
Gambar 3. 3 Class Diagram........................................................................................35
Gambar 3. 4 Desain Site Map Admin..........................................................................36
Gambar 3. 5 Desain Site Map Guru............................................................................37
Gambar 3. 6 Desain Sitemap Siswa.............................................................................38
Gambar 3. 7 Halaman Login........................................................................................45
Gambar 3. 8 Halaman Dashboard admin....................................................................46
Gambar 3. 9 Halaman user guru..................................................................................47
Gambar 3. 10 Halaman user siswa..............................................................................47
Gambar 3. 11 Halaman kelas.......................................................................................48
Gambar 3. 12 Halaman Mata Pelajaran.......................................................................48
Gambar 3. 13 Halaman Relasi.....................................................................................49
Gambar 3. 14 Halaman Relasi 2..................................................................................49
Gambar 3. 15 Halaman Profil......................................................................................50
Gambar 3. 16 Halaman Dashboard Guru....................................................................50
Gambar 3. 17 Halaman Materi Guru...........................................................................51
Gambar 3. 18 Halaman Tugas Guru............................................................................51
Gambar 3. 19 Halaman Absen Guru...........................................................................52
Gambar 3. 20 Halaman Dashboard Siswa..................................................................52
Gambar 3. 21 Halaman Materi siswa..........................................................................53
Gambar 3. 22 Halaman Tugas Siswa...........................................................................53
Gambar 3. 23 Halaman Absen Siswa..........................................................................54
 DAFTAR TABEL

Tabel 3. 1Waktu Penelitian.........................................................................................28

Tabel 3. 2 Deskripri Use Case....................................................................................31
Tabel 3. 3 Data Siswa..................................................................................................39
Tabel 3. 4 Data Guru...................................................................................................40
Tabel 3. 5 Data Mapel.................................................................................................40
Tabel 3. 6 Data Kelas..................................................................................................41
Tabel 3. 7 Data Tugas..................................................................................................41
Tabel 3. 8 Data Materi................................................................................................42
Tabel 3. 9 Data Guru Mapel........................................................................................42
Tabel 3. 10 Data Tugas Siswa.....................................................................................43
Tabel 3. 11 Data Guru kelas........................................................................................43
Tabel 3. 12 Data Materi Siswa....................................................................................44
Tabel 3. 13 Data absen................................................................................................44
 BAB 1

PENDAHULUAN
1.1 Latar Belakang

Dampak Pandemi covid-19 yang melanda dunia tidak terkecuali

Indonesia juga berdampak pada sistem belajar mengajar yang kurang efektif
di SMK N 5 Kupang, dimana siswa mengalami kesulitan berinteraksi secara
langsung dengan guru untuk membahas masalah akademik, sementara guru
mengalami kesulitan dalam memberikan materi dan soal latihan/quiz karena
masih secara manual. Hal ini berdampak pada menurunnya kualitas
pendidikan dan keterampilan murid. Beban itu merupakan tanggung jawab
semua elemen pendidikan khususnya SMK N 5 Kupang dalam mencari suatu
inovasi untuk memfasilitasi semua stakeholders pendidikan melalui suatu
media belajar guna memonitoring kegiatan belajar mengajar sehingga tetap
kondusif dan dapat digunakan dalam kondisi apapun, dengan memanfaatkan
kemajuan teknologi dibangunlah suatu sistem informasi bimbingan belajar
yang dapat diakses melalui sebuah website E-learning sehingga dapat
memudahkan guru untuk mengetahui seberapa banyak kemampuan murid
dalam menerima pelajaran selama bimbingan belajar, serta murid dapat
melihat materi pelajaran, tugas-tugas, nilai, jadwal belajar dan kisi-kisi soal
ujian yang mungkin akan keluar pada ujian. Selain itu siswa diharapkan dapat
lebih mudah memperoleh informasi-informasi tentang pembelajaran yang
diikuti sehingga dapat lebih giat dalam mengikuti aktivitas pembelajaran di
rumah. Melalui sistem E-Learning tersebut juga m diharapkan dapat
membantu para guru dalam memperbaiki efektivitas dan efisiensi proses
pembelajaran serta membantu dalam pencapaian tujuan-tujuan pembelajaran.

1
 Berdasarkan latar belakang yang telah dipaparkan diatas, maka penulis
bermaksud mengambil topik proposal tugas akhir dengan judul “Desain Dan
Implementasi E-Learning Menggunakan Codeigniter Di SMK Negeri 5
Kupang” yang diharapkan dapat menjawab permasalahan pembelajaran di
SMK Negeri 5 Kupang.

1.2 Rumusan Masalah

Berdasarkan latar belakang di atas dapat diambil rumusan masalah yaitu:
1. Bagaimana membangun sebuah website E-Learning yang dapat membantu
proses belajar mengajar?
2. Bagaimana menerapkan sistem E-Learning di SMK Negeri 5 Kupang ?
3. Bagaimana menguji sistem E-Learning di SMK Negeri 5 Kupang sehingga
mampu mendukung kegiatan belajar mengajar dalam masa pandemic covid-
19?

1.3 Tujuan
Tujuan pembuatan website ini adalah :
1. Menguji dan mengimplementasikan sistem E-Learning di SMK Negeri 5
Kupang.
2. Dapat terciptanya sistem E-Learning di SMK Negeri 5 Kupang.
3. Sebagai syarat mutlak untuk menyelesaikan studi pendidikan Diploma 3
(D3) di Politeknik Negeri Kupang.

1.4 Manfaat
Manfaat pembuatan website ini adalah :
1. Mempermudah proses belajar mengajar pada SMK Negeri 5 Kupang.
2. Untuk mengetahui dan menganalisis sistem informasi E-Learning pada
SMK Negeri 5 Kupang.

1.5 Batasan Masalah

Adapun batasan masalah dalam penulisan proposal tugas akhir ini yaitu :

2
1. Sistem ini dibuat bagi guru dan siswa sebagai sarana belajar mengajar pada
SMK Negeri 5 Kupang.
2. Pada sistem E-Learning difokuskan untuk mengolah data berupa data guru,
siswa, mata pelajaran, absensi dan jadwal (guru dan siswa).

3
 BAB 2

TINJAUAN PUSTAKA
2.1 Sistem Informasi
a. Sistem
Sistem berasal dari bahasa Latin (systema) dan bahasa Yunani (sustema)
yang artinya suatu kesatuan yang terdiri komponen atau elemen yang
dihubungkan bersama untuk memudahkan aliran informasi, materi atau
energi. Secara sederhana suatu sistem dapat diartikan sebagai suatu
kumpulan atau himpunan dari unsur, komponen atau variabel-variabel yang
terorganisir, saling berinteraksi, saling ketergantungan satu sama lainnya
dan terpadu. Istilah sistem banyak dipergunakan dalam berbagai disiplin
ilmu, beberapa ahli mendefinisikan sistem sebagai berikut:
1. Menurut Mc. Leod dalam Hanif (2007), sistem adalah sebagian
sekelompok elemen- elemen yang berintegrasi dengan maksud yang
sama untuk mencapai suatu tujuan.
2. Menurut Davis dalam Ladjamudin (2005), sistem adalah bagian-bagian
saling berkaitan yang beroperasi bersama untuk mencapai saran
ataumaksud.
3. Menurut Lucas dalam Ladjamudin (2005), sistem adalah suatu
komponen atau variabel yang terorganisir, saling berinteraksi, saling
tergantung satu sama lain dan terpadu.
Dilihat dari definisi yang dikemukakan oleh para pakar dapat
disimpulkan bahwa sistem merupakan kumpulan elemen atau komponen
yang saling berinteraksi, saling berhubungan dan saling bertergantungan
antara satu dengan yang lain secara terpadu untuk mencapai tujuan secara
efektif dan efisien.(Ramanda, 2016)

4
b. Informasi
Informasi adalah data yang diolah menjadi bentuk yang lebih berguna
dan lebih berarti bagi penerimanya.Sumberinformasiadalah data.Data
kenyataannya yang menggambarkan suatu kejadian–kejadiandan kesatuan
nyata. Kejadian–kejadian(event) adalah kejadian yang terjadi pada saat
tertentu. Menurut para ahli adalah sebagai berikut:
1. Menurut Gordon BDavis(2015:8) Informasi adalah data yangtelahdiolah
menjadi suatu bentuk yang pentingbagisipenerima dan mempunyai
nilainyatayang dapat dirasakan dalam keputusan–keputusan yang
sekarang atau keputusan –keputusan yang akan datang.
2. Pengertian Informasi menurut Kusrini (2007) adalah sebagai berikut :
“Informasi adalah data yang sudah diolah menjadi sebuah bentuk yang
berguna bagi pengguna yang bermanfaat dalam pengambilan keputusan
saat ini atau mendukung sumber informasi”.
3. Pengertian Informasi menurut Jogiyanto yang dikutip oleh Machmud
(2013) adalah sebagai berikut: “Informasi diartikan sebagai data yang
diolah menjadi bentuk yang lebih berguna dan lebih berarti bagi yang
menerimanya”.
Jadi Informasi adalah data yang diproses kedalam bentuk yang lebih
berarti bagi penerima dan berguna dalam pengambilan keputusan,
sekarang atau untuk masa yang akan dating (MACHMUD, 2013)
(Asmara & Alhamidi, 2017).
c. Sistem Informasi
Sistem Informasi adalah kumpulan atau susunan yang terdiri dari
perangkat keras dan perangkat lunak serta tenaga pelaksanaannya yang
bekerja dalam sebuah proses berurutan dan secara bersama-sama saling
mendukung untuk menghasilkan suatu produk (Dengen, 2009:48). Menurut
para ahli sebagai berikut :

5
 1. Definisi Sistem Informasi menurut Azhar Susanto (2008) adalah sebagai
berikut : “Sistem informasi adalah kumpulan dari subsistem apapun baik
phisik ataupun non phisik yang saling berhubungan satu sama lain dan
bekerja sama secara harmonis untuk mencapai satu tujuan yaitu
mengolah data menjadi informasi yang berarti dan berguna”.
2. Menurut Laudon yang dikutip oleh Mukti, dkk (2013), an information
system can be defined technically as a set of interrelated components that
collect (or retrieve), process, store, and distribute information to support
decision making and control in an organization. Sistem informasi adalah
kumpulan komponen yang saling berhubungan dalam mengumpulkan,
memproses, menyimpan, menyediakan dan mendistribusikan informasi
untuk mendukung pengambilan keputusan dan pengendalian di dalam
organisasi.
3. Menurut Robert yang dikutip oleh Minarni dan Saputra (2011), Sistem
informasi adalah suatu sistem di dalam suatu organisasi yang
mempertemukan kebutuhan pengolahan transaksi harian, mendukung
operasi, bersifat manajerial dan kegiatan strategi dari suatu organisasi
dan menyediakan pihak luar tertentu dengan laporan - laporan yang
diperlukan.
4. Menurut Leitch Davis yang dikutip oleh Minarni dan Saputra (2011),
Sistem informasi adalah “suatu sistem didalam sebuah organisasi yang
mempertemukan kebutuhan pengolahan data transaksi harian 8-yang
mendukung operasi dan bersifat manajerial dan kegiatan strategis yang
diperlukan bagi pihak luar tertentu” (Minarni dkk, 2011) (Asmara &
Alhamidi, 2017).

2.2 Internet
Internet (Inter-Network) adalah sebutan untuk sekumpulan jaringan
komputer yang menghubungkan situs akademik, pemerintahan, komersial,

6
 organisasi, maupun perorangan. Internet menyediakan akses untuk layanan
telekomnunikasi dan sumber daya informasi untuk jutaan pemakainya yang
tersebar di seluruh dunia. Adapun Layanan internet yang tersedia saat ini
seperti komunikasi langsung (email, chat), diskusi (Usenet News, email, milis),
sumber daya informasi yang terdistribusi (World Wide Web, Gopher), remote
login dan lalu lintas file (Telnet, FTP), dan aneka layanan lainnya. Jaringan
yang membentuk internet bekerja berdasarkan suatu set protokol standar yang
digunakan untuk menghubungkan jaringan komputer dan mengalamati lalu
lintas dalam jaringan. Protokol ini mengatur format data yang diijinkan,
penanganan kesalahan (error handling), lalu lintas pesan, dan standar
komunikasi lainnya. Protokol standar pada internet dikenal sebagai TCP/IP
(Transmission Control Protocol/Internet Protocol).Protokol ini memiliki
kemampuan untuk bekerja diatas segala jenis komputer, tanpa terpengaruh oleh
perbedaan perangkat keras maupun sistem operasi yang digunakan. Sebuah
sistem komputer yang terhubung secara langsung ke jaringan memiliki nama
domain dan alamat IP (Internet Protocol) dalam bentuk numerik dengan format
tertentu sebagai pengenal. Internet juga memiliki gateway ke jaringan dan
layanan yang berbasis protokol lainnya (Rohaya, 2008).

2.3 Website

Website merupakan sebuah media informasi yang ada di internet.Website

tidak hanya dapat digunakan untuk penyebaran infomasi saja melainkan bisa
digunakan untuk membuat toko online.Website adalah kumpulan dari halaman-
halaman situs, yang biasanya terangkum dalam sebuah domain atau subdomain,
yang tempatnya berada di dalam World Wide Web (WWW) di Internet. Sebuah
halaman web adalah dokumen yang ditulis dalam format HTML (Hyper Text
Markup Language), yang hampir selalu bisa diakses melalui HTTP, yaitu
protokol yang menyampaikan informasi dari server website untuk ditampilkan
kepada para pemakai melalui web browser. Semua publikasi dari website-

7
 website tersebut dapat membentuk sebuah jaringan informasi yang sangat
besar.Halaman-halaman dari website akan bisa diakses melalui sebuah URL
yang biasa disebut Homepage.URL ini mengatur halaman-halaman situs untuk
menjadi sebuah hirarki, meskipun, hyperlink-hyperlink yang ada di halaman
tersebut mengatur para pembaca dan memberitahu mereka susunan keseluruhan
dan bagaimana arus informasi ini berjalan. Beberapa website membutuhkan
subskripsi (data masukan) agar para user bisa mengakses sebagian atau
keseluruhan isi website tersebut (Javacreativity, 2014) (Trimarsiah & Arafat,
2017).

2.4 E-learning

E-learning merupakan metode pembelajaran menggunakan media

elektronik (audio/visual) melalui teknologi internet.Saat ini e-learning muncul
sebagai paradigma baru dalam bidang pendidikan modern, terutama untuk
mempermudah guru bidang studi memantau siswa dalam mempermudah
memahami dan atau mengulang materi sekolah. Sudah banyak penelitian
memperlihatkan bukti empiris dalam mendukung gagasan bahwa
memanfaatkan teknologi E-learning secara efektif dapat memberikan banyak
peluang (Kosasi, 2015)
Istilah e-learning memiliki pengertian yang luas, seperti menurut William
Horton pada bukunya yang berjudul E-learning by Design: “E-learning adalah
penggunaan dari teknologi elektronik untuk menciptakan pengalaman belajar
(Fuad et al., 2013)
E-learning mempermudah interaksi antara peserta didik dengan
bahan/materi, peserta didik dengan pengajar maupun sesama peserta
didik.Peserta didik dapat saling berbagi informasi dan dapat mengakses bahan
bahan belajar setiap saat dan berulang-ulang, dengan kondisi yang demikian itu
peserta didik dapat lebih memantapkan penguasaannya terhadap materi
pembelajaran.

8
 Menurut Bates (1995) dan Wulf (1996) manfaat Pembelajaran elektronik
Learning (e-Learning) itu terdiri atas 4 hal, yaitu:
1. Meningkatkan kadar interaksi pembelajaran antara peserta didik dengan guru
atau instruktur (enhance interactivity).
2. Memungkinkan terjadinya interaksi pembelajaran dari mana dan kapansaja
(time and place flexibility).
3. Menjangkau peserta didik dalam cakupan yang luas (potential to reach
aglobal audience).
4. Mempermudah penyempurnaan dan penyimpanan materi pembelajaran (easy
updating of content as well as archivable capabilities).

2.5 PHP (PHP: Hypertext Preprocessor)

Menurut Hidayatullah dan Kawistara (2014:231), PHP singkatan dari Perl

Hypertext Preprocessor yaitu bahasa pemrograman web server-side yang
bersifat open source.PHP merupakan script yang berintegrasi dengan HTML
dan berada pada server (server side HTML embedded scripting).PHP adalah
script yang digunakan untuk membuat halaman web dinamis. Dinamis berarti
halaman yang akan ditampilkan dibuat saat halaman itu diminta oleh client.
Mekanisme ini menyebabkan informasi yang diterima client selalu yang
terbaru/up to date.Semua script PHP dieksekusi pada server dimana script
tersebut dijalankan.Pengertian PHP menurut Kristanto (2010:9), “PHP adalah
bahasa pemrograman yang digunakan secara luas untuk penanganan pembuatan
dan pengembangan sebuah web dan bisa digunakan pada HTML”.PHP
merupakan singkatan dari “PHP : Perl Hypertext Preprocessor”, dan
merupakan bahasa yang disertakan dalam dokumen HTML sekaligus bekerja di
sisi server(server-server HTML-embedded scripting). Artinya sintaks dan
perintah yang diberikan akan sepenuhnya dijalankan di server tetapi disertakan
pada halaman HTML biasa, sehingga scriptnya tak tampak di sisi client. PHP
dirancang untuk dapat bekerja sama dengan database server dan dibuat

9
 sedemikian rupa sehingga pembuatan dokumen HTML yang dapat mengakses
database menjadi begitu mudah. Tujuan dari bahasa scripting ini adalah untuk
membuat aplikasi dimana aplikasi tersebut dibangun oleh PHP pada umumnya
akan memberikan hasil kepada web browser, tetapi proses keseluruhannya
dijalankan di server(Fridyanthie & Mahdiati, 2016).

2.6 Codeigniter

Codeigniter merupakan sebuah framework yang dibuat dengan menggunakan

bahasa PHP, yang dapat digunakan untuk pengembangan web secara
cepat.Adapun framework sendiri dapat diartikan sebagai suatu struktur pustaka-
pustaka, kelas-kelas dan infrastruktur run-time yang dapat digunakan oleh
programmer untuk mengembangkan aplikasi web secara cepat.Tujuan
penggunaan framework adalah untuk mempermudah pengembang web
mengembangkan aplikasi web yang robust secara cepat tanpa kehilangan
fleksibilitas.CodeIgniter merupakan sebuah framework yang dibuat dengan
menggunakan bahasa PHP, yang dapat digunakan untuk pengembangan web
secara cepat.Adapun framework sendiri dapat diartikan sebagai suatu struktur
pustaka-pustaka, kelas-kelas dan infrastruktur run-time yang dapat digunakan
oleh programmer untuk mengembangkan aplikasi web secara cepat.Tujuan
penggunaan framework adalah untuk mempermudah pengembang web
mengembangkan aplikasi web yang robust secara cepat tanpa kehilangan
fleksibilitas.
Sidik (2012) menyatakan bahwa codeigniter (CI) adalah framework
pengembangan aplikasi (application development framework) yang memiliki
suatu kerangka yang sistematis untuk bekerja atau membuat program dengan
menggunakan PHP. Codeigniter menyediakan sekumpulan library yang banyak
untuk keperluan menyelesaikan pekerjaan yang umum, dengan menggunakan
antarmuka dan struktur logika yang sederhana untuk mengakses library-nya.

10
 a) index.php berlaku sebagai controller di depan, yang menginisiasikan
sumber daya yang dibutuhkan untuk menjalankan codeigniter,
b) Router akan memeriksa request HTTP untuk menentukan apa yang
harus dilakukan dengan request tersebut,
c) Jika ada file cache, maka file cache langsung dikirimkan kepada
browser, dengan memotong eksekusi sistem normal,
d) Untuk keamanan, sebelum suatu aplikasi controller dipanggil, request
HTTP dan data yang dikirimkan oleh pengguna disaring (filter)
terlebih dahulu,
e) Controller akan memuat model, library, helper, dan sumber daya
lainnya yang diperlukan untuk memproses request tersebut.
f) View terakhir di-render kemudian dikirimkan kepada browser untuk
dilihat. Jika caching didefinisikan, maka view akan di-cache terlebih
dahulu, setelah itu baru dikirimkan kepada browser. (Kelen & Belalawe,
2018)

Gambar 2. 1 Flowchart codeigniter mengimplementasikan MVC

2.7 MVC (Model, View dan Controller)

MVC (Model, View dan Controller) yang merupakan sebuah arsitektur

untuk membuat sebuah program. Tujuan dari pembagian program ke dalam tiga
bagian besar ini adalah untuk memisahkan fokus perhatian, tanggung jawab,
dan logika ke dalam bagian masing-masing. (Harianja, 2010).

11
 Gambar 2. 2 Model, View, Controller

a. Model adalah bagian dari aplikasi yang mengimplementasikan logika untuk

domain data aplikasi. Umumnya, objek model digunakan untuk mengambil
data dari database atau menyimpan data ke dalam database.
b. View adalah komponen yang menampilkan antarmuka (user interface) untuk
pengguna aplikasi. Antarmuka ini dibuat berdasarkan data dari model.
c. Controller merupakan komponen yang digunakan untuk menangani
interaksi pengguna, bekerja dengan model, dan memilih view mana yang
digunakan untuk me-render data.(Kelen & Belalawe, 2018)

2.8 MySQL

MYSQL menurut Raharjo (2011), merupakan RDBMS (server database)

yang mengelola database dengan cepat menampung dalam jumlah sangat besar
dan dapat diakses oleh banyak user.Sedangkan Menurut Kadir (2008) MySQL
adalah sebuah software open source yang digunakan untuk membuat sebuah
database. Berdasarkan pendapat yang dikemukakan di atas dapat ditarik
kesimpulan bahwa MySQL adalah Suatu software atau program yang digunakan
untuk membuat sebuah basis data yang bersifat open source(Trimarsiah &
Arafat, 2017).

2.9 CSS (Cascading Style Sheet)

Menurut Sugiri (2007) yang dikutip oleh Fatmawati (2016) dalam jurnalnya
mendefinisikan CSS (Cascading Style Sheet) adalah sebuah cara untuk
memisahkanisi dengan layout dalam halam-halaman web yang dibuat.
Cascading Style Sheetdikembangkan untuk menata gata pengaturan halaman

12
 web. Pada awalnya CSSdikembangkan pada SGML pada tahun 1970 dan terus
dikembangkan hingga saat ini CSS telah mendukung banyak bahasa, Cascading
Style Sheet memiliki arti gaya menata halaman bertingkat. Yang berarti setiap
satu elemen yang telah format, makanan dari elemen tersebut secara otomatis
mengikuti format elemen induknya.

2.10 HTML( Hyper Text Markup Language)

Menurut (Ardhana, 2012) yang dikutip oleh Fatmawati (2016) dalam

jurnalnya mendefinisikan Hypertext Markup language merupakan suatu bahasa
yang dikenal oleh web browser untuk menampilkan informasi seperti teks,
gambar, suara,animasi, bahkan video.
HTML adalah bahasa yang digunakan untuk membuat halaman web.
Hypertext mengacu pada hyperlink yang mungkin terdapat dalam halaman
HTML. Bahasa markup ini mengacu pada cara tag yang digunakan, untuk
menentukan tata letak halaman dan elemen di dalam halaman.HTML digunakan
untuk membuat dokumen elektronik (disebut halaman) yang ditampilkan di
World Wide Web (www). Setiap halaman berisi serangkaian koneksi ke halaman
lain yang disebut hyperlink. Setiap halaman web yang Anda lihat di Internet
ditulis menggunakan satu versi kode HTML atau yang lain.

2.11 Java Script

Menurut Bratadinata(2013), JavaScript adalah “bahasa web-browser”.

Tanpa JavaScript, konten yang ditampilkan dalam browser akan tetap statis,
tidak dinamis dan interaktif. Bahasa yang dulu tidak populer ini, dalam
beberapa tahun terakhir menjadi salah satu bahasa penting yang wajib dikuasai
oleh web developer. Bahkan saat ini JavaScript juga makin populer sebagai
bahasa pemrograman server menggunakan program yang disebut Node JS yang

13
 berbasis V8 JavaScript Engine buatan Google yang juga digunakan oleh
browser populer yaitu Google Chrome.

2.12 Bootstrap

Bootstrap merupakan produk open source yang dibuat oleh Mark Otto dan
Jacob Thornton yang ketika awal dirilis, keduanya merupakan karyawan di
twitter,dan ada kebutuhan untuk menstandarisasi perlengkapan (toolsets) dari
antarmuka para insinyur yang ada di perusahaan. (Spurlock, 2013).Bootstrap
memiliki semua jenis HTML dan template desain berbasis CSS untuk berbagai
fungsi dan komponen, seperti navigasi, sistem grid, carousel gambar, dan
tombol (button).
Bootstrap memiliki berbagai tipe file di dalamnya. Dimana ada tiga file
utama yang mengelola interface user dan fungsionalitas website yaitu :
a) Bootstrap.css
Bootstrap.css adalah framework yang mengatur dan mengelola layout
website. HTML mengatur konten dan struktur halaman web, sedangkan CSS
berurusan dengan layout situs. Oleh karena itu, kedua struktur ini harus
bekerja bersama-sama untuk melakukan tindakan tertentu.
b) Bootsrap.js
Bootstrap.js ini merupakan bagian inti dari Bootstrap. Di dalamnya
terdapat file JavaScript yang bertanggung jawab atas interaktivitas website.
c) Glyphicons
Ikon berperan penting pada front-end website. Terkadang ikon
dikaitkan dengan tindakan tertentu serta data yang ada di dalam interface
user. Untuk task ini, Bootstrap menggunakan Glyphicons.Glyphicons
menyediakan berbagai set premium yang akan membuat website terlihat
lebih menarik dan juga sesuai dengan niche.

14
2.13 Basis Data

Basis data merupakan koleksi dari data– data yang terorganisir dengan
cara sedemikian rupa sehingga data tersebut mudah disimpan dan dimanipulasi.
(Dzacko,2007). Basis data atau Database merupakan kumpulan file - file yang
saling berkaitan dan berinteraksi, relasi tersebut bila ditunjukan dengan kunci
dari tiap-tiap file yang ada. Satu database menunjukkan suatu kumpulan data
yang dipakai dalam suatu lingkup perusahaan, instansi. Pengolahan database
merupakan suatu cara yang dilakukan terhadap file-file yang berada di suatu
instansi yang mana file tersebut dapat disusun, diurut, diambil sewaktu-waktu
serta dapat ditampilkan dalam bentuk suatu laporan sehingga dapat mengolah
file-file yang berisikan informasi tersebut secara rapi. Menurut Marlinda yang
dikutip oleh Syaifudin (2013) bahwa Sistem basis data adalah suatu sistem
menyusun dan mengelola record–record menggunakan komputer untuk
menyimpan atau merekam serta memelihara data operasional lengkap sebuah
organisasi atau perusahaan sehingga mampu menyediakan informasi yang
optimal yang diperlukan pemakai untuk proses pengambilan keputusan
(Asmara & Alhamidi, 2017).

2.14 MetodeWaterfall

Dalam menunjang penyusunan penelitian ini, maka penulis menggunakan

metode pengembangan perangkat lunak dan pengumpulan data-data yang
dibutuhkan. Metode yang digunakan pada pengembangan perangkat lunak
perancangan sistem informasi ujian berbasis web menggunakan model
waterfall, alasan menggunakan metode waterfall adalah Karena Metode ini
tahapan dan juga urutan dari metode yang dilakukan berurutan dan
berkelanjutan, seperti layaknya sebuah air terjun. Tahapan - tahapan model
waterfall (Sukamto & Shalahuddin, 2013) adalah:

15
 1. Analisis Kebutuhan Perangkat Lunak Dalam analisa kebutuhan ini
bertujuan untuk menganalisis kebutuhan yang dibutuhkan dalam
perancangan baik berupa dokumen maupun sumber lain yang dapat
membantu dalam menentukan solusi permasalahan yang ada baik dari sisi
user maupun admin.
2. Desain Dalam Desain perangkat lunak menggunakan pemodelan basis data
dengan menggunakan ERD (Entity Relationship Diagram).
3. Pembuatan Kode Program Dalam tahap ini peneliti mulai membangun
aplikasi sesuai dengan analisis kebutuhan untuk membuat form input dan
output dengan aplikasi berbasis mobile dengan bahasa pemrograman
android.
4. Pengujian Pada tahapan ini pengujian program dilakukan dengan
menggunakan BlackBox Testing dengan harapan bahwa perancangan yang
sudah dibuat dapat berjalan dengan sesuai kehendak.
5. Pendukung (Support) atau Pemeliharaan Dalam proses pemeliharaan ini
penulis mengupayakan pengembangan sistem yang telah dirancang terkait
software dan hardware dapat dibuat maksimal agar aplikasi dapat berjalan
dengan baik.(Purnia et al., 2019).

2.15 Xampp

Menurut Wicaksono (2008:7) menjelaskan bahwa “XAMPP adalah sebuah

software yang berfungsi untuk menjalankan website berbasis PHP dan
menggunakan pengolah data MYSQL di komputer lokal”. XAMPP berperan
sebagai server web pada komputer lokal.XAMPP juga dapat disebut sebuah
Cpanel server virtual, yang dapat membantu melakukan preview sehingga
dapat dimodifikasi website tanpa harus online atau terakses dengan internet.
Sebagai informasi kata XAMPP merupakan singkatan dari:
X: berarti program ini dapat dijalankan diberbagai platform, misalnya Windows,
Linux, mac OS, dan Solaris.

16
 A: Apache, merupakan aplikasi web server, dan bertugas untuk menghasilkan
halaman web yang benar kepada user berdasarkan kode PHP yang
dituliskan oleh pembuat halaman web. Jika diperlukan juga berdasarkan
kode PHP yang dituliskan, maka dapat saja suatu database diakses terlebih
dahulu (misalnya dalam MySQL) untuk mendukung halaman web yang
dihasilkan.
M: MySQL, merupakan aplikasi database server. Pengembangnya disebut
Structured Query Language (SQL).SQL merupakan bahasa terstruktur yang
digunakan untuk mengolah database beserta isinya.Pengguna dapat
memanfaatkan MySQL untuk menambahkan, mengubah dan menghapus
data yang berada dalam database.
P: PHP, bahasa pemrograman lainnya yang serupa, dan lain sebagainya
(Fridyanthie & Mahdiati, 2016).

2.16 Unfield Modeling Language (UML)

Unified Modeling Language (UML) adalah bahasa spesifikasi standar yang

dipergunakan untuk mendokumentasikan, menspesifikasikan dan membanngun
perangkat lunak. UML merupakan metodologi dalam mengembangkan sistem
berorientasi objek dan juga merupakan alat untuk mendukung pengembangan
sistem (Suendri, 2018).

Unified Modeling Language (UML) adalah sebuah bahasa yang berdasarkan

grafik atau gambar untuk memvisualisasi, menspesifikasikan, membangun, dan
pendokumentasian dari sebuah sistem pengembangan software berbasis OO
(Object-Oriented). UML sendiri juga memberikan standar penulisan sebuah
sistem blue print, yang meliputi konsep bisnis proses, penulisan kelas-kelas
dalam bahasa program yang spesifik, skema database, dan komponen-
komponen yang diperlukan dalam sistem software. Diagram Unified Modelling
Language (UML) (Suendri, 2018) antara lain sebagai berikut:

17
2.17 Use case Diagram

Use case menggambarkan external view dari sistem yang akan kita buat
modelnya. Model use case dapat dijabarkan dalam diagram use case, tetapi
perlu diingat, diagram tidak identik dengan model karena model lebih luas dari
diagram. Use case harus mampu menggambarkan urutan aktor yang
menghasilkan nilai terukur. Berikut adalah daftar simbol yang digunakan untuk
mendesain use case. (Hendini, 2016)

Tabel 2. 1 Tabel Simbol Use case

Gambar Keterangan

Use case. menggambarkan

fungsionalitas yang disediakan sistem
sebagai unit-unit yang bertukar pesan
antar unit dengan aktir, yang dinyatakan
dengan menggunakan kata kerja

Actor atau aktor adalah Abstraction dari

orang atau sistem yang lain yang
mengaktifkan fungsi dari target sistem.
Untuk mengidentifikasikan aktor, harus
ditentukan pembagian tenaga kerja dan
tugas-tugas yang berkaitan dengan
peran pada konteks target sistem. Orang
atau sistem bisa muncul dalam
beberapa peran. Perlu dicatat bahwa
aktor berinteraksi dengan Use case,
tetapi tidak memiliki kontrol terhadap
use case

18
 Asosiasi antara aktor dan use case,
digambarkan dengan garis tanpa panah
yang mengindikasika n siapa atau apa
Yang meminta interaksi secara
langsung dan bukannya
mengindikasikan data.

Asosiasi antara aktor dan use case yang

menggunakan panah terbuka untuk
mengindikasikan bila aktor berinteraksi
secara pasif dengan sistem.

Include, merupakan di dalam use case

lain (required) atau pemanggilan use
<< Include >>
case oleh use case lain, contohnya
adalah pemanggilan sebuah fungsi
program.

<< Extend >> Extend, merupakan perluasan dari use

case lain jika kondisi atau syarat

2.18 Class Diagram

Kelas sebagai suatu set objek yang memiliki atribut dan perilaku yang
sama, kelas kadang disebut kelas objek. Class memiliki tiga area pokok yaitu :
- Nama, kelas harus mempunyai sebuah nama.
- Atribut, adalah kelengkapan yang melekat pada kelas. Nilai dari suatu kelas
hanya bisa diproses sebatas atribut yang dimiliki.
- Operasi, adalah proses yang dapat dilakukan oleh sebuah kelas, baik pada
kelas itu sendiri ataupun kepada kelas lainnya.

19
 Untuk mendesain rancangan class diagram dibutuhkan simbol-simbol.
Berikut adalah daftar simbol class diagram. (Hendini, 2016)

Tabel 2. 2 Tabel Class Diagram

Gambar Keterangan

Association adalah apa yang

menghubungkan antara objek dan objek
lainnya.

Class adalah himpunan dari objek-

objek yang berbagi atribut serta operasi
yang sama

Dependency adalah hubungan dimana

perubahan yang terjadi pada suatu
elemen mandirii akan mempengaruhi
elemen yang bergantung padanya
elemen yang tidak mandiri.

2.19 Activity Diagram

Menunjukkan aktivitas sistem dalam bentuk kumpulan aksi-aksi,

bagaimana masing-masing aksi tersebut dimulai, keputusan yang mungkin
terjadi hingga berakhirnya aksi. Activity diagram juga dapat menggambarkan
proses lebih dari satu aksi dalam waktu bersamaan. “Diagram activity adalah
aktifitas-aktifitas, objek, state, transisi state dan event. Dengan kata lain
kegiatan diagram alur kerja menggambarkan perilaku sistem untuk aktivitas”

20
 Berikut adalah simbol-simbol yang dibutuhkan untuk mendesain diagram
activity. (Hendini, 2016)

Tabel 2. 3 Tabel Activity Diagram

Gambar Keterangan

Start Point, diletakkan pada pojok kiri

atas dan merupakan awal aktivitas.

End Point, akhir aktivitas

Activities, menggambarkan suatu

proses/kegiatan bisnis

Fork/percabangan, digunakan untuk

menunjukkan kegiatan yang dilakukan
secara paralel atau untuk menggabung
kan dua kegiatan paralel menjadi satu

Join (penggabungan) atau rake,

digunakan untuk menunjukkan adanya
dekomposisi.

Decision Points, menggambarkan

pilihan untuk pengambilan keputusan,
true atau false.

Swimlane, pembagian activity diagram

untuk menunjukkan siapa melakukan
apa.

21
2.20 Gambaran Umum SMK Negeri 5 Kota Kupang

 Sejarah Singkat SMK Negeri 5 Kota Kupang

Sekolah Menengah Kejuruan Negeri 5 Kupang merupakan sekolah
alih fungsi dari ST/SMP Ketrampilan, yang mulai beroperasi tahun
pelajaran 2002/2003, dengan SK Pendirian Wali Kota Kupang, Nomor.
47/KEP/PK/2006, tanggal 29 April 2006. Lokasi sekolah terletak di Jalan
Nanga Jamal Kelurahan Naikoten I Kecamatan Kota Raja – Kota Kupang
dan menjadi satu lokasi,/berdampingan dengan SMP Negeri 9 Kupang,
berdiri di atas tanah seluas 4.673 m2. Kondisi fisik gedung sekitar  + 65 %
peninggalan ST/SMP Ketrampilan yang dibangun di era tahun 1980an,
sehingga beberapa gedung memerlukan program renovasi/rehab.
Dalam perjalanan usia sekolah yang ke 11 tahun sejak ijin beroperasi, 
SMK Negeri 5 Kupang telah berhasil menamatkan peserta didik/alumni
sebanyak 1.726 orang dan telah dipimpin oleh beberapa Kepala Sekolah :

1. Os. A. Hilly, BSc. (2002 – 2003)

2. Drs. Olla Aloysius (2003 – 2005)
3. David Djoni AtI, S.Pd (2005  – 2008)
4. Drs. Martinus Rona (2008  – 2012)
5. Thofilus Wabang,S.Sos (27 Desember 2012 – 30 Oktober 2014).
6. Alexander J. Giri, STP, M.Si (21 Nopember 2014 – 1 Mei 2019)
7. Dra. Safirah C. Abineno ( 7 Mei 2019 – Sekarang)

Walaupun lokasi sekolah kurang strategis, tidak dilalui jalur kendaraan

umum/angkut (+ 0,6 Km dari jalan utama) terletak di daerah pemukiman
penduduk, minat masuk calon peserta didik semakin meningkat, hal ini
dibuktikan dengan jumlah pendaftar tahun pelajaran 2017/2018 sebanyak
388 orang, yang dapat ditampung/diterima 360 orang atau sebanyak 90 %.

22
 Dari prestasi kelulusan dalam Ujian Nasional 9 tahun terakhir juga
terjadi peningkatan, tahun pelajaran 2007/2008 = 91,57%, tahun pelajaran
2008/2009 = 99,41%,  tahun pelajaran 2009/2010 mencapai 100% dan
tahun pelajaran 2010/2011 = 99,01 % (tanpa ujian ulang), tahun pelajaran
2011/2012 = 100% dan Tahun 2012/2013 = 100%, tahun pelajaran
2013/2014 = 100 % tahun pelajaran 2014/2015 = 99,49%, tahun pelajaran
2015/2016 = 100 %, tahun pelajaran 2016/2017  = 100 %, tahun pelajaran
2017/2018 = 100 %, tahun pelajaran 2018/2019 = 100 %
Dalam upaya pengembangan sekolah menuju SMK Berstandar
Nasional, SMK Negeri 5 Kupang masih diperhadapkan dengan berbagai
keterbatasan sarana prasarana, keterbatasan lahan untuk memenuhi
kebutuhan ruang belajar teori dan praktek/workshop, kekurangan tenaga
pendidik dan kependidikan, serta kekurangan tenaga pendidik kejuruan
yang berkompeten di bidang keahliannya.
Pendapatan sekolah melalui partisipasi orang tua/wali peserta didik
melalui dana komite dan dukungan orang tua untuk melengkapi kebutuhan
belajar peserta didik masih sangat terbatas. Hal ini karena sekitar +72%
peserta didik berasal dari keluarga kurang mampu dan memiliki latar
belakang pendidikan yang tidak memadai, sehingga dalam upaya
meningkatkan mutu pembelajaran memerlukan strategi dan kerja keras
untuk mengantisipasi berbagai hambatan yang dialami akibat keterbatasan
pengetahuan dan ekonomi orang tua/wali peserta didik.
Menghadapi beberapa kenyataan di atas, sesuai dengan arah kebijakan
pemerintah pusat melalui Renstra Direktorat Pembinaan SMK Tahun 2010
– 2014, tentang  layanan pendidikan menengah kejuruan yang bermutu,
relevan dan berkesetaraan di semua propinsi, kabupaten dan kota, maka
dalam rangka mengembangkan SMK Negeri 5 Kupang menuju SMK
Berstandar Nasional tidaklah berlebihan apabila kami sangat

23
 mengharapkan untuk mendapatkan perhatian lebih dari Pemerintah Pusat,
Pemerintah Daerah Provinsi NTT dan Pemerintah Daerah Kota Kupang.

 Sistem Pembelajaran Pada SMK Negeri 5 Kupang

Situasi akademik SMK Negeri 5 Kota Kupang ditengah pandemi
covid 19, Tetap menjalankan proses kegiatan belajar mengajar dengan
selalu menjalankan protokol kesehatan. Dalam upaya pencegahan
penyebaran virus ini SMK Negeri 5 Kota Kupang melakukan kegiatan
belajar mengajar tatap muka dengan memberlakukan sistem shift kepada
para siswa dan guru. Yaitu siswa dibagi ke dalam kelompok-kelompok
kecil dan diberi jadwal belajar mengajar sesuai shift masing-masing. Untuk
menghindari kerumunan sehingga diharapkan kegiatan belajar mengajar
tetap efektif meskipun berjalan ditengah pembatasan sosial akibat pandemi.
Selain itu oleh karena kegiatan belajar mengajar di sekolah dalam shift
terbilang cukup singkat siswa diharapkan mampu belajar lebih efektif dan
efisien dalam menggunakan waktu belajar yang singkat di sekolah

24
 Tugas Pokok Dan Fungsi
1. Kepala Sekolah
Kepala sekolah selaku educator, pimpinan, administrator dan
supervisor.Selaku educator, Kepala Sekolah mempunyai tugas
untuk melaksanakan proses pembelajaran secara efektif dan efisien.
Dalam melaksanakan tugasnya Kepala Sekolah dapat
mendelegasikan kepada para Wakil Kepala Sekolah.
2. Wakil Kepala Sekolah Urusan Kurikulum
a. Menyusun dan menjabarkan kalender pendidikan
b. Menyusun pembagian tugas guru dan jadwal pelajaran
c. Mengatur penyusunan tugas guru dan jadwal pelajaran
d. Mengatur penyusunan program pembelajaran (program-
program satuan pembelajaran, dan persiapan mengajar,
penjabaran dan penyesuaian kurikulum
e. Mengatur pelaksanaan kegiatan kurikuler dan
ekstrakurikuler
f. Mengatur  pelaksanaan program penilaian, kriteria kenaikan
kelas, kriteria kelulusan dan laporan kemajuan belajar siswa,
serta pembagian rapor dan STTB

g. Mengatur pelaksanaan program perbaikan dan pengayaan

h. Mengatur pemanfaatan lingkungan sebagai sumber belajar
i. Mengatur pengembangan MGMP dan koordinator mata
pelajaran
j. Mengatur mutasi siswa
k. Melakukan supervisi administrasi dan akademis
l. Menyusun laporan.

3. Wali Kelas
a. Mewakili orang tua dan Kepala Sekolah dalam lingkungan
kelasnya.

25
 b. Membina Kepribadian dan Budi Pekerti siswa di kelasnya.
c. Membantu Pengembangan Kecerdasan siswa di kelasnya.
d. Membantu Pengembangan Kepemimpinan siswa di kelasnya.

4. Guru
a. Sebagai Pengajar. Mengajari murid di sekolah
merupakan tugas utama seorang guru..
b. Mendisiplinkan Murid.
c. Sebagai Wali Kelas.
d. Membimbing dan Mengarahkan Murid.
e. Melatih Murid.
f. Mengevaluasi Pelajaran Murid.
g. Memberi Penilaian.
5. Bimbingan Konseling
a. Membantu memasyarakatkan pelayanan bimbingan dan
konseling kepada siswa.
b. Membantu konselor mengidentifikasi siswa-siswa yang
memerlukan layanan bimbingan dan konseling, serta
pengumpulan data tentang siswa-siswa tersebut.
c. Mengalihtangankan siswa yang memerlukan pelayanan
bimbingan dan konseling kepada konselor.
d. Menerima siswa alih tangan dari konselor, yaitu siswa yang
menuntut konselor memerlukan pelayanan khusus. seperti
pengajaran/latihan perbaikan,  dan program pengayaan.
e. Membantu mengembangkan suasana kelas, hubungan guru-
siswa dan hubungan siswa-siswa yang menunjang
pelaksanaan pelayanan bimbingan dan konseling.
f. Memberikan kesempatan dan kemudahan kepada siswa yang
memerlukan layanan/kegiatan bimbingan dan konseling

26
 untuk mengikuti /menjalani layanan/kegiatan yang
dimaksudkan itu.
g. Berpartisipasi dalam kegiatan khusus penanganan masalah
siswa, seperti konferensi kasus.
h. Membantu pengumpulan informasi yang diperlukan dalam
rangka penilaian pelayanan bimbingan dan konseling serta
upaya tindak lanjutnya.

27
 BAB 3

METODE PENELITIAN
3.1 Lokasi dan Waktu Penelitian

a. Lokasi Pengambilan Data

Penulis melakukan pengambilan data ini pada SMK Negeri 5 Kupang.
b. Waktu Penelitian
Tabel 3. 1Waktu Penelitian

Tahun 2022
No Kegiatan
Februari Maret April Mei Juni Juli

1 Persiapan

Penyusunan
2
Proposal

Ujian
3
Proposal

Revisi
4
Proposal

Pembuatan
dan
5
Pengujian
Sistem

Penyusunan
6
TA

28
 7 Ujian TA

Revisi dan
8 Penjilidan
TA

3.2 Analisis Kebutuhan Sistem

Metode yang digunakan untuk membangun sistem ini adalah Model

waterfall. Model ini merupakan sebuah pendekatan terhadap pengembangan
perangkat lunak yang sistematik, dengan beberapa tahapan, yaitu: Analisis,
Desain, Penulisan, Pengujian dan Penerapan serta Pemeliharaan. Pada tahap ni,
penulis melakukan analisa terhadap struktur kebutuhan yang akan digunakan
pada sistem. Langkah-langkah kerja adalah sebagai berikut :
1. Analisis Kebutuhan Input :
a. Admin :
● Menginput Data Siswa
● Menginput Data Guru
● Menginput Data Kelas
● Menginput Data Mata Pelajaran
● Menginput Data Jadwal Mengajar

b. User Guru
● Menginput Soal Tugas
● Menginput Nilai Siswa
● Menginput Data Materi
● Menginput absen

c. User Siswa
● Menginput Jawaban Tugas

29
2. Analisis Kebutuhan Proses :
Dilakukan proses pengolahan data berdasarkan data yang telah diinput
oleh admin, user guru dan siswa, untuk menghasilkan output berupa
informasi yang akan diberikan kepada pengunjung website.

3. Analisis Kebutuhan Output :

a. Admin
● Mendapat Informasi Data Kelas
● Mendapat Informasi Data Guru
● Mendapat Informasi Data Siswa
● Mendapat Informasi Data Mata Pelajaran
● Mendapat Informasi Data Jadwal Mengajar

b. User Guru :
● Mendapat Informasi Data Jadwal Mengajar
● Mendapat Informasi Data Tugas Siswa
● Mendapat Informasi Data Nilai Siswa
● Mendapat Informasi Data Absen

c. User Siswa:
● Mendapat Informasi Materi
● Mendapat Informasi Data Jadwal Mata Pelajaran
● Mendapat Informasi Tugas
● Mendapat Informasi Nilai
● Mendapat Informasi Data Absen

30
3.3 Use case Diagram

Use Case diagram berfungsi untuk mendeskripsikan sebuah interaksi antara

satu atau lebih aktor dengan sistem informasi yang diusulkan. Penggambaran
sistem dalam bentuk Use Case terlihat pada Gambar 3.1

Gambar 3. 1 Use case Diagram

Berikut ini merupakan deskripsi dari masing-masing use case yang berada pada
sistem e-learning SMKN 5 Kupang , yaitu terlihat pada Tabel 3.2

Tabel 3. 2 Deskripri Use Cae

No Id Use Case Use Case Deskripsi

1. UC-01 Login Use Case ini menggambarkan aktor

melakukan proses login terlebih dahulu
sebelum masuk sistem.

31
2. UC-02 Mengolah Use case ini menggambarkan proses
seluruh data penambahan pengguna baru dalam hal
pengguna ini penambahan guru dan siswa.

3. UC-03 Mengolah data Use case ini menggambarkan

kelas penegelolahan kelas berupa
penambahan kelas dan penghapusan
kelas.

4. UC-04 Mengelola mata Use case ini menggambarkan

pelajaran pengolahan mata pelajaran berupa
penambahan dan penghapusan mata
pelajaran.

5. UC-05 Mengelolah Use case ini menggambarkan proses

jadwal mengajar pembuatan jadwal mengajar bagi guru.
guru

6. UC-06 Membuka dan Use case ini menggambarkan proses

mengunduh aktor mengakses dan mengunduh materi
materi yg diberikan oleh guru.
pembelajarn

7. UC-07 Mengerjakan Use case ini menggambarkan proses

dan mengirim mengungah dan tugas yg telah diberikan
tugas guru.

8. UC-08 Melihat absen Use case ini menggambarkan proses

aktor mengakses dan melihat data
kehadiran.

9. UC-09 Mengolah Use case ini menggambarkan proses

materi dan tugas aktor mengelola materi dan tugas siswa

32
 siswa dalam hal ini adalah mengupload materi
dan tugas untuk siswa.

10. UC-10 Mengelolah Use case ini menggambarkan aktor

laporan dan nilai dapat hasil kerja dari siswa dan
siswa memberikan nilai.

11. UC-11 Mengelolah Use case ini menggambarkan proses

absen aktor menginput data absensi dari siswa

3.4 Activity Diagram

Diagram aktivitas adalah diagram flowchart yang diperluas yang

menunjukkan aliran kendali satu aktivitas ke aktivitas lain. Berikut dapat dilihat
mengenai activity diagram Sistem Desain dan implementasi e-learning
menggunakan codeigniter di SMKN 5 Kupang seperti yang terlihat pada gambar
3.2.
Diagram tersebut telah menggambarkan alur sistem yang dimulai dengan
mengakses halaman login pada sistem e-learning. pengguna dapat memutuskan
untuk mengakses sistem dengan cara melewati login sistem yang telah
disediakan. jika berhasil login ke sistem maka akan ditampilkan pada halaman
berdasarkan hak akses yang telah diatur pada sistem. Setiap user yang telah
berhasil login dapat melakukan setiap aktivitas berdasarkan hak aksesnya
misalnya para guru yang dapat mengupload tugas yang nantinya akan diterima
oleh siswa. Setelah itu para user masuk ke dalam sistem, user juga bisa keluar
dari sistem ketika sudah selesai dengan aktivitasnya maka akan diantarkan ke
halaman login pada sistem. Berikut adalah gambar lengkap aktivitas dari sistem.

33
Gambar 3. 2 Activity Diagram

34
3.5 Class Diagram

Berikut dijelaskan mengenai class diagram pada sistem Desain dan

implementasi e-learning menggunakan framework codeigniter di SMKN 5
Kupang terlihat pada gambar 3.3 .

Gambar 3. 3 Class Diagram

35
3.6 Sitemap

Sitemap adalah file yang berisi daftar semua halaman penting dari suatu
website. Dengan adanya sitemap dapat mempermudah mesin pencarian dalam
hal ini Googlebot untuk menemukan semua halaman hanya dalam satu tempat.
Sitemap memiliki peran penting dalam SEO. Agar semua halaman pada aplikasi
pelayanan ini dapat dengan mudah ditemukan oleh Google Bot maka berikut
adalah design sitemap sistem E-learning SMK Negeri 5 Kupang.

1. Sitemap Admin
Merupakan halaman yang hanya dapat diakses oleh petugas atau
admin sistem elearning barang yang sudah ditentukan. Admin ini
mempunyai hak untuk mengakses dan mengolah termasuk menginput,
mengedit, dan menghapus semua data E-learning SMK Negeri 5 Kupang.

Gambar 3. 4 Desain Site Map Admin

36
2. Sitemap Guru
Pada sitemap Guru ini merupakan halaman yang hanya dapat diakses
oleh guru melalui login yang telah disediakan.

Gambar 3. 5 Desain Site Map Guru

37
3. Sitemap Siswa
Pada sitemap siswa ini merupakan halaman yang hanya dapat siswa
oleh guru melalui login yang telah disediakan

Gambar 3. 6 Desain Sitemap Siswa

38
3.7 Kamus Data

Kamus Data (Data Dictionary) adalah suatu penjelasan tertulis tentang

suatu data yang berada di dalam database atau suatu daftar data elemen yang
terorganisir dengan definisi yang tetap dan sesuai dengan sistem, sehingga user
dan analis sistem mempunyai pengertian yang sama tentang input, output, dan
komponen data store.Kamus yang berdasarkan penggambaran tabel relasi dari
sistem informasi yang dirancang dan diusulkan adalah sebagai berikut:

1. Nama tabel : DataSiswa

Primary key : id_siswa
Foreign key : kelas
Tabel 3. 3 Data Siswa

No Nama Field Type Length Keterangan

1 id_siswa Int Id siswa

2 no_induk_siswa Varchar 100 No induk siswa

3 nama_siswa Varchar 255 Nama siswa

4 email Varchar 100 Email siswa

5 password Varchar 255 Password siswa

6 jenis_kelamin Varchar 100 Jenis kelamin

7 kelas Int Id_kelas siswa

8 role Int Tingkatan akun

9 is_activate Int Status akun

10 date_created Int Waktu pembuatan

39
 11 avatar Varchar 255 Foto

2. Nama tabel : DataGuru

Primary key : id_Guru
Foreign key :
Tabel 3. 4 Data Guru

No Nama Field Type Length Keterangan

1 id_guru Int Id guru

2 nama_guru Varchar 100 Nama guru

3 email Varchar 100 Email guru

4 password Varchar 255 Password guru

5 role Int Tingkatan akun

6 is_activate Int Status akun

7 date_created Int Waktu pembuatan

8 avatar Varchar 255 Foto

3. Nama tabel : Data Mapel

Primary key : id_mapel
Foreign key :

40
 Tabel 3. 5 Data Mapel

No Nama Field Type Length Keterangan

1 id_mapel Int Id mapel

2 nama_mapel Varchar 100 Nama mapel

3 hari Int Hari belajar

4 Jam Int Waktu belajar

4. Nama tabel : Data Kelas

Primary key : id_kelas
Foreign key :
Tabel 3. 6 Data Kelas

No Nama Field Type Length Keterangan

1 id_kelas Int Id kelas

2 nama_kelas Varchar 100 Nama kelas

5. Nama tabel : Data Tugas

Primary key : id_tugas
Foreign key : kode_tugas, kelas, mapel, guru

Tabel 3. 7 Data Tugas

No Nama Field Type Length Keterangan

41
 1 id_tugas Int Id tugas

2 kode_tugas Varchar 100 Kode tugas

3 kelas Int Kelas

4 mapel Int Mata pelajaran

5 guru Int Guru

6 nama_tugas Varchar 255 Judul tugas

7 deskripsi Longtext Ketarangan tugas

8 date_created Int Tanggal dibuat

9 due_date Varchar 255 Batas waktu

10 date_upload Int Tanggal upload

6. Nama tabel : Data Materi

Primary key : id_materi
Foreign key : kode_materi, kelas, mapel, guru
Tabel 3. 8 Data Materi

No Nama Field Type Length Keterangan

1 id_materi Int Id tugas

2 kode_materi varchar 100 Kode tugas

42
 3 kelas Int Kelas

4 mapel Int Mata pelajaran

5 guru Int Guru

6 nama_materi varchar 255 Judul tugas

7 text_materi longtext Ketarangan

8 date_created Int Tanggal dibuat

7. Nama tabel : guru_mapel

Primary key : id_guru_mapel
Foreign key : guru, mapel

Tabel 3. 9 Data Guru Mapel

No Nama Field Type Length Keterangan

1 id_guru_mapel Int Id guru map

2 nama_mapel varchar 100 Nama mapel

3 Mapel Int Id mapel

4 Guru Int Id guru

8. Nama tabel : tugas_siswa

Primary key : id_tugas_siswa
Foreign key : kode_tugas, kelas, mapel, guru

43
 Tabel 3. 10 Data Tugas Siswa

No Nama Field Type Length Keterangan

1 id_tugas_siswa Int Id tugas siswa

2 tugas int Id tugas

3 siswa Int Id siswa

4 text_siswa Longtext Keterangan

5 date_send Int Tanggal krim

6 isi_telat Int Terlambat

7 Nilai Int Nilai

8 catatan_guru Longtext Catatan

9. Nama tabel : guru_kelas

Primary key : id_guru_kelas
Foreign key : guru, kelas
Tabel 3. 11 Data Guru kelas

No Nama Field Type Length Keterangan

1 id_guru_kelas Int Id guru kelas

2 nama_kelas varchar 100 Nama kelas

3 Kelas Int Id kelas

4 Guru Int Id guru

44
10. Nama tabel : materi_siswa
Primary key : id_materi_siswa
Foreign key : materi, kelas, mapel, guru
Tabel 3. 12 Data Materi Siswa

No Nama Field Type Length Keterangan

1 id_materi_siswa Int Id materi siswa

2 Materi Int Id materi

3 Siswa Int Id siswa

4 Kelas Int Kelas

5 Mapel Int Mata pelajarn

6 Dilihat Int Dilhat

7 Nilai Int Nilai

11. Nama tabel : absen

Primary key : id_absen
Foreign key : siswa, kelas, mapel, guru

Tabel 3. 13 Data absen

No Nama Field Type Length Keterangan

1 id_absen Int Id absen

2 Siswa Int Id siswa

45
 3 Kelas Int Kelas

4 Mapel Int Mapel

5 Date_created Int Waktu dibuat

6 Guru Int Guru mapel

7 keterangan varchar Keterangan

3.8 Perancangan Desain GUI (Graphic User Interfaces)

3.7.1 Admin
1. Login
Halaman login adalah halaman yang digunakan pada saat ingin
mengakses ke dalam sistem e-learning. Halaman login ini menerapkan
user access level sehingga sistem dapat mengidentifikasi user berdasarkan
level dari user (admin, guru, dan siswa) tersebut lalu akan diarahkan ke
halaman dashboard berdasarkan level dari user. Dengan menggunakan
user access semua user dapat menggunakan satu halaman login untuk
masuk ke sistem.

Gambar 3. 7 Halaman Login

46
2. Dashboard
Tampilan dashboard pada admin sama seperti user lainya hanya terdapat
perbedaan pada menu yang diakses. Menu-menu tersebut mewakili apa saja
yang bisa diakses berdasarkan level dari usernya.

Gambar 3. 8 Halaman Dashboard admin

47
3. Menu User
Halaman yang akan menampilkan data seluruh dari user guru dan siswa
yang ada di E-learning SMK Negeri 5 Kupang. Halaman ini hanya dapat
diakses oleh Admin.
a. User Guru

Gambar 3. 9 Halaman user guru

b. User Siswa

48
 Gambar 3. 10 Halaman user siswa

4. Kelas
Merupakan halaman yang dapat diakses oleh admin untuk
menampilkan banyaknya kelas dan juga untuk menambah, mengedit,
dan menghapus kelas.

Gambar 3. 11 Halaman kelas

5. Mapel

49
 Merupakan halaman untuk menampilkan banyaknya mapel dan juga
untuk menambah, mengedit dan menghapus mapel.

Gambar 3. 12 Halaman Mata Pelajaran

6. Relasi
Merupakan halaman yang dapat diakses oleh admin untuk mengatur
jadwal pembelajarn guru.

Gambar 3. 13 Halaman Relasi

50
 Gambar 3. 14 Halaman Relasi 2

7. Profil
Merupakan halaman yang menampil informasi tentang akun tersebut.

Gambar 3. 15 Halaman Profil

3.7.2 Guru

51
 1. Dashboard
Merupakan halaman yang menampilkan kelas dan mata pelajaran
yang telah diinput oleh admin.

Gambar 3. 16 Halaman Dashboard Guru

2. Materi
Merupakan halaman untuk guru menginput materi untuk siswa.

Gambar 3. 17 Halaman Materi Guru

3. Tugas

52
 Merupakan halaman untuk guru menginput tugas untuk siswa.

Gambar 3. 18 Halaman Tugas Guru

4. Absen
Merupakan halaman untuk guru menginput absen untuk siswa.

Gambar 3. 19 Halaman Absen Guru

53
3.7.3 Siswa
1. Dashboard
Merupakan halaman yang menampilkan data-data pembelajaran
siswa

Gambar 3. 20 Halaman Dashboard Siswa

2. Materi
Merupakan halaman yang digunakan siswa untuk melihat materi yang
diupload oleh guru.

Gambar 3. 21 Halaman Materi siswa

54
3. Tugas
Merupakan halaman yang digunakan siswa untuk melihat tugas yang
diupload oleh guru dan dapat mengupload tugas ke guru.

Gambar 3. 22 Halaman Tugas Siswa

4. Absen
Merupakan halaman untuk siswa menginput absensi.

Gambar 3. 23 Halaman Absen Siswa

55
3.9 Pengujian Sistem

Pada tahap ini akan dilakukan pengujian terhadap sistem menggunakan

metode Web Performance Test yang melibatkan beberapa pengujian sebagai
berikut :
1. Pengujian Fungsionalitas
Pada tahap ini pengujian yang dilakukan hanya mengevaluasi
fungsionalitas dari tampilan interface yaitu pengujian terhadap fungsi
masing-masing menu dan sub-sub menu yang ada pada aplikasi web ini.
Selain itu user mencoba berbagai fitur pada aplikasi ini kemudian sistem
memeriksa script pada formulir berfungsi seperti yang diharapkan.
2. Performance Test
Pengujian kinerja (Performance Test) adalah jenis pengujian untuk
mengetahui kecepatan suatu website. Dalam performance test terdapat
skenario pengujian yang akan dilakukan untuk mengetahui kecepatan
respon sistem ketika menyimpan input data dalam ukuran besar dan
menampilkan informasi dengan cepat sesuai permintaan user.

DAFTAR PUSTAKA

Afyenni, R. (2014). Perancangan Data Flow Diagram untuk Sistem Informasi

Sekolah (Studi Kasus Pada SMA Pembangunan Laboratorium UNP).
Teknoif, 2(1), 35–39.
Asmara, R., & Alhamidi. (2017). Pengolahan Data Rehabilitasi Penyalahgunaan
Narkoba Pada Klinik Aqilah Payakumbuh. Sistem Informasi Dan
Manajemen Informatika, 4(1), 74–83.
Bratadinata, A. (2013). Mengenal JavaScript.
Fridyanthie, E. wida, & Mahdiati, T. (2016). Rancang Bangun Sisteem Informasi
Permintaan ATK berbasis Intranet (Studi Kasus: Kejaksaan Negeri
Rangkasbitung). Khatulistiwa Informatika, IV(2), 41.

56
Fuad, H., Hakim, Z., & Panchadria, P. A. (2013). Rancang Bangun Sistem Informasi
E-Learning Berbasis Web di SMK Negeri 1 Tangerang. Jurnal SISFOTEK
GLOBAL, 3(1), 4–8.
Kelen, Y. R. L., & Belalawe, B. J. (2018). Implementasi Model-View-Controller
(Mvc) Pada Ujian Online Melalui Penerapan Framework Codeigniter. Jurnal
Pendidikan Teknologi Informasi (JUKANTI), 1(1), 10–16.
https://doi.org/10.37792/jukanti.v1i1.5
Kosasi, S. (2015). Perancangan E-learning untuk Meningkatkan Motivasi Belajar
Guru dan Siswa. Jurnal Informatika, 0362, 27213.
Laila, N., & Wahyuni. (2011). Sistem Informasi Pengolahan Data Inventory Pada
Toko Buku Studi Cv. Aneka Ilmu Semarang. Jurnal Teknik Elektro, 3(1),
16.
Purnia, D. S., Rifai, A., & Rahmatullah, S. (2019). Penerapan Metode Waterfall
dalam Perancangan Sistem Informasi Aplikasi Bantuan Sosial Berbasis
Android. Jurnal.Umj.Ac.Id/Index.Php/Semnastek, 1–7.
Rohaya, S. (2008). INTERNET: PENGERTIAN, SEJARAH, FASILITAS DAN
KONEKSINYA. Perpustakaan Digital UIN Sunan Kalijaga Yogyakarta, 1, 56–
68. https://doi.org/10.1080/1362937970840757
Ramanda, K. (2016). Pemesanan Menu Makanan Dengan. Jurnal Pilar Nusa
Mandiri, XII(2), 182–189.

Trimarsiah, Y., & Arafat, M. (2017). Analisis Dan Perancangan Website Sebagai
Sarana Informasi Pada Lembaga Bahasa Kewirausahaan dan Komputer
AKMI BATURAJA. Jurnal Ilmiah MATRIK, 19, 1–10.

57