Pembangunan Sistem E-Learning Tingkat SMP Berbasis Web Menggunakan PHP dan MySQL Chapter III V
BAB 3
ANALISIS DAN PERANCANGAN SISTEM
3.1 Analisis Sistem
Sebelum merancang sebuah aplikasi yang akan dibangun, faktor yang harus
diperhatikan adalah tahap analisis. Tahap analisis merupakan tahap pemahaman
dengan perangkat lunak yang akan digunakan, kebutuhan fungsional, diagram alir
data, kamus alir data dan enkripsi
proses. Tahap analisis bertujuan untuk
mengetahui mekanisme sistem, proses–proses yang terlibat dalam sistem serta
hubungan antara proses tersebut.
3.2 Perancangan Sistem
Perancangan sistem adalah upaya suatu organisasi atau lembaga untuk memulai
memiliki suatu sistem yang lebih baik lagi dari sistem yang sebelumnya.
Perancangan sistem dilakukan setelah mendapat gambaran dengan jelas apa yang
harus dikerjakan. Tujuan dari perancangan sistem adalah untuk memenuhi
kebutuhan user (pemakai) mengenai gambaran yang jelas tentang perancangan
sistem yang akan dibuat serta diimplementasikan.
Universitas Sumatera Utara
33
3.2.1 Diagram Konteks
Model yang diusulkan dalam proses sistem dirancang untuk mendapatkan
informasi dari siswa (student) dan guru (teacher). Keduanya menganalisis,
memberikan input dan menyimpan data untuk administrator (manager). Dalam
sistem ini siswa dapat memilih mata kelas, mengunduh file materi, dan
sebagainya. Juga para siswa dapat menjawab kuis dan ujian secara on-line. Para
guru dapat memberikan materi pelajaran dan soal tugas, kuis, maupun ujian online. Sedangkan Administrator tidak berhak mengenai penerimaan atau penolakan
dari isi pelajaran. Ia hanya berhak mendaftarkannya masing-masing baik sebagai
guru ataupun sebagai siswa. Diagram konteks sistem dapat disajikan dalam
Gambar 3.1.
Data Siswa
Siswa
Data Guru
File materi pelajaran
File tugas
Laporan nilai siswa
Mencari Data
Guru
Hak Akses
Hak Akses
Sistem Aplikasi
Elearning
Materi
Jadwal Mengajar
Mata Pelajaran
Jadwal Mengajar
Admin
Gambar 3.1 Diagram Konteks Elearning
Universitas Sumatera Utara
34
3.2.2 Data Flow Diagram (DFD)
Beberapa detil mungkin akan dimasukkan ke dalam sistem utama untuk menutup
seluruh persyaratan sebuah e-Learning. Siswa akan masuk ke sistem registrasinya
atau membuat profil. Setelah registrasi, maka siswa akan diberi hak akses untuk
bisa mengakses sistem elearning. Kemudian guru harus memberikan datanya
terlebih dahulu kepada admin, selanjutnya admin akan mendaftarkan guru tersebut
pada sistem. Setelah terdaftar maka guru dapat mengakses serta meng-upload file
materi pada sistem elearning. Para administrator dapat memantau seluruh
kegiatan, dan apabila terdapat user-user yang tidak berkepentingan maka
administrator dapat menghapus akun user tersebut. Laporan user dan instruktur
disimpan di dalam penyimpanan data base. Guru dapat memberikan nilai kepada
siswa melalui tugas dan ujian online. Data flow diagram ini dapat diilustrasikan
dalam Gambar 3.2.
Universitas Sumatera Utara
35
Data Guru
Data Siswa
Siswa
Guru
Hak Akses
Hak Akses
1.0
Guru
Input Data
Siswa
Jadwal Mengajar
2.0
Mata Pelajaran
Input Mata Pelajaran
Input Jadwal Mengajar
Jadwal Mengajar
Mata Pelajaran
Jadwal Mengajar
3.0
Input Materi
Materi
Materi Elearning
Mencari Data
4.0
Pengelolaan
Elearning
Materi
File materi pelajaran
File tugas
Laporan nilai siswa
Admin
Gambar 3.2 Data Flow Diagram (DFD)
Universitas Sumatera Utara
36
3.2.3 Perancangan Antarmuka
Perancangan antar muka yang akan di buat meliputi beberapa perancangan,
diantaranya perancangan struktur menu dan spesifikasi antarmuka. Perancangan
antarmuka dibuat untuk menggambarkan tampilan program yang akan digunakan
oleh pengguna untuk berinteraksi dengan aplikasi yang dibuat. Perancnagan
dibuat berdasarkan tampilan antarmuka input saat aplikasi diimplementasikan.
Perancangan antarmuka dapat dilihat pada gambar 3.3 berikut ini.
Form Utama
Home
Profile
Info Pendaftaran
Pendaftaran
Login
Tambah Data Siswa
Menu Admin
Kelola Kelas
Menu Guru
Tambah Kelas
Print Laporan
Data Guru
Menu Siswa
Edit Data
Data Siswa
Edit Data
Edit/delete Kelas
Tambahkan Mapel
Kelola Mata
Pelajaran
Ganti Password
Edit/delete Mapel
Tambah Jadwal Baru
Ganti Password
Ganti
Password
Materi Ajar
Download
File
Edit/delete Jadwal
Tambahkan Tugas
Baru
Edit/delete Jadwal
Laporan Nilai
Tugas
Tugas
Kerjakan
Tugas
Edit/delete Jadwal
Laporan Nilai
Edit/delete Jadwal
Kelola Siswa
Lihat Jadwal Mengajar
Hapus File Materi
Laporan nilai
Kelola Profile
Print Jadwal
Print Laporan Jadwal
Tugas
Ganti Password
Jadwal Mata
Pelajaran
Tambahkan Bahan Baru
Upload Materi
Kelola Jadwal
Mengajar
Ganti Password
Print Laporan
Edit/delete Jadwal
Edit/delete Jadwal
Edit/delete Jadwal
Kelola Guru
Edit/delete Jadwal
Edit/delete Jadwal
logout
Logout
Logout
Gambar 3.3 Perancangan Antarmuka Elearning
Universitas Sumatera Utara
37
3.2.4 Entity Relationship Diagram (ERD)
Dalam perancangan suatu sistem sangat diperlukan sebuah gambaran ERD untuk
mempermudah dilakukannya analisis dan memberikan gambaran alur kerja yang
jelas untuk mempermudah pengerjaan sistem sejak awal. ERD berikut akan
menjelaskan setiap entitas yang dipakai dalam sistem dan atribut-stribut apa saja
yang terdapat dalam setiap entitas tersebut.
Nip
Nm_guru
tanggal
level
password
Kd_pelajaran
TTL
golongan
tamatan
Tbl_guru
nip
Id_mater_ajar
alamat
upload
keterangan
Materi_ajar
Kd_kelas
jabatan
Jenis_kelamin
File_materi_ajar
agama
telepon
foto
Id_tugas
nip
Kd_pelajaran
input
Kd_kelas
Id_admin
upload
Nama_lengkap
Tbl_tugas
Batas_waktu
password
username
Tbl_admin
level
mengajar
Jenis_kelamin
memberi
Id_nilai_tugas
mengunduh
No_induk
Kd_kelas
nip
input
Tbl_nilai_tugas
Id_tugas
mengerjakan
Nilai_tugas
Tlb_kelas
melihat
kapasitas
input
Nm_kelas
jk
No_induk
memilih
TTL
agama
password
Tbl_siswa
Nm_siswa
judul
alamat
foto
Kd_kelas
Sekolah_asal
Tbl_page
level
melihat
isi
Id_page
Kd_kelas
Id_jadwal
input
Kd_pelajaran
Tbl_jadwal_pelajaran
hari
Jam_selesai
melihat
nip
Jam_mulai
Gambar 3.4 Entity Relationship Diagram
Universitas Sumatera Utara
38
3.2.5 Perancangan Database
Pada tahapan ini dipersiapkan tempat untuk menampung data di server, data
tersebut nantinya akan diproses oleh program yang kita buat pada tahap
pemrograman, baik penambahan, pengeditan, panghapusan dan menampilkan isi
database ke halaman website. Database terdiri atas tabel-tabel yang dibuat dengan
menggunakan program MySQL.
Adapun database yang dibuat oleh penulis adalah database db_alumni
dengan tabel-tabel sebagai berikut:
Tabel 3.1 Tabel Admin
Nama Field
Type
Size
id_admin
Int
5
Username
Varchar
40
Password
Varchar
40
nama_lengkap
Varchar
35
jenis_kelamin
Varchar
10
level
Varchar
10
Keterangan
primary key
Tabel 3.2 Tabel Guru
Nama Field
Type
Size
Nip
Varchar
20
Password
Varchar
20
Keterangan
Primary key
Universitas Sumatera Utara
39
nm_guru
Varchar
40
Alamat
Varchar
150
tempat_lahir
Varchar
30
tanggal_lahir
Varchar
20
jenis_kelamin
Varchar
10
Foto
Varchar
40
Telepon
Varchar
12
Agama
Varchar
10
Jabatan
Varchar
40
Golongan
Varchar
7
Tamatan
Varchar
150
Level
Varchar
10
Tabel 3.3 Jadwal Pelajaran
Nama Field
Type
Size
id_ jadwa_pelajaran
Int
11
kd_kelas
Varchar
11
kd_pelajaran
Varchar
11
Nip
Varchar
20
Hari
Varchar
20
jam_mulai
Time
jam_selesai
Time
Keterangan
Primary key
Universitas Sumatera Utara
40
Tabel 3.4 kelas
Nama Field
Type
Size
kd_kelas
Varchar
4
Nip
Varchar
20
nm_kelas
Varchar
203
Kapasitas
Int
Keterangan
Primary key
Tabel 3.5 Materi Ajar
Nama Field
Type
Size
id_mata_pelajaran
Int
5
kd_pelajaran
Varchar
5
Nip
Varchar
20
kd_kelas
Varchar
5
Keterangan
Text
file-materi_ajar
Varchar
Tanggal
Date
Keterangan
Primary key
255
Tabel 3.6 Nilai Tugas
Nama Field
Type
Size
id_nilai_tugas
Int
5
id_tugas
Int
5
no_induk
Int
11
nilai_tugas
Int
5
Keterangan
Primary key
Universitas Sumatera Utara
41
Tabel 3.7 Page
Nama Field
Type
Size
id_page
Int
5
Judul
Varchar
255
Isi
Text
Keterangan
Primary key
Tabel 3.8 Siswa
Nama Field
Type
Size
no_induk
Varchar
10
Password
Varchar
15
nm_siswa
Varchar
20
Alamat
Varchar
30
tempat_lahir
Varchar
15
tanggal_lahir
Varchar
20
Jk
Varchar
10
Agama
Varchar
10
Foto
Text
sekolah_asal
Varchar
20
nm_ortu
Varchar
20
Pekerjaan
Varchar
20
kd-kelas
Varchar
5
Level
Varchar
10
Keterangan
Primary key
Universitas Sumatera Utara
42
Tabel 3.9 Tugas
Nama Field
Type
Size
id_tugas
Int
10
Nip
Varchar
50
kd_pelajaran
Varchar
20
kd_kelas
Varchar
4
batas_waktu
Datetime
Keterangan
Primary key
3.2.6 Flowchart
Dalam perancangan sistem elearning, penggunaan flowchart merupakan alat yang
tepat untk menggambarkan alur kerja dari sistem. Flowchart menjelaskan alur
kerja mulai dari awal sampai akhir dari sistem yang akan dibuat. Flowchart
berikut menjelaskan secara rinci alur kerja sistem elerning SMP.
START
Home
Profile
Info Pendaftaran
Pendaftaran
Login
Isi data diri
siswa
Input NIP/
NIS/
Username,
Level, &
Password
N
Simpa n?
Benar
N
Y
Y
Menu
Elearning
“Selamat
datang di
Sis tem
Elearning
SMP
Finis h
Gambar 3.5 Flowchart e-learning
Universitas Sumatera Utara
43
3.3 Pembangunan Halaman Sistem
Desain
dapat
didefinisikan
sebagai
tahap setelah analisis
dari
siklus
pengembangan sistem: pendefinisian dari kebutuhan-kebutuhan fungsional dan
persiapan untuk rancang bangun implementasi, menggambarkan bagaimana suatu
sistem dibentuk.
Menurut John Burch dan Garry Grudnitski dalam buku Analisa dan
Desain, Sistem Informasi Pendekatan Terstruktur adalah Desain Sistem dapat
didefinisikan sebagai penggambaran dan pembuatan sketsa atau pengaturan dari
beberapa elemen yang terpisah ke dalam satu kesatuan yang utuh dan berfungsi.
Tahap desain sistem mempunyai dua maksud atau tujuan utama, yaitu:
1. Untuk memenuhi kebutuhan para pemakai sistem.
2. Untuk memberikan gambaran yang jelas dan rancang bangun yang
lengkap kepada pemrogram komputer dan ahli-ahli teknik lainnya yang
terlibat. Tujuannya lebih condong pada desain sistem yang terinci, yaitu
pembuatan rancang bangun yang jelas dan lengkap untuk nantinya
digunakan untuk pembuatan program komputernya.
3.3.1
Desain Home
Desain home adalah tampilan utama sisem yang muncul pertama kali di layar
komputer dan digunakan untuk menerangkan menu-menu pada sistem.
Universitas Sumatera Utara
44
Logo Elearning
Tentang
elearning
Header
Right side
Body
Kalender
Footer
Gambar 3.6 Desain Home
3.3.2 Desain Pendaftaran Elearning
Desain pendaftaran elearning adalah halaman yang menampilkan formulir online
kosong, dimana pendaftar baru harus mengisi formulir tersebut dengan data
dirinya agar pendaftar dapat bergabung dengan sistem.
Logo El earning
Tentang
elearning
Header
Tambah data siswa
No induk
Password
Nama Lengkap
Alamat
TTL
Jenis Kelamin
Agama
Asal sekolah
Nama orangtua
Kelas
Upload foto
Right side
Kalender
Simpan
Footer
Gambar 3.7 Desain Pendaftaran E-learning
Universitas Sumatera Utara
BAB 4
IMPLEMENTASI SISTEM
4.1 Pengertian Implementasi Sistem
Implementasi sistem adalah langkah-langkah atau prosedur-prosedur yang
dilakukan dalam menyelesaikan desain sistem yang telah disetujui, untuk
menguji, menginstall dan memulai sistem baru atau sistem yang diperbaiki untuk
menggantikan sistem yang lama.
4.2 Tujuan Implementasi Sistem
Tujuan Implementasi sistem adalah sebagai berikut:
1. Menyelesaikan desain sistem yang telah disetujui sebelumnya.
2. Memastikan bahwa pemakai (user) dapat mengoperasikan sistem baru.
3. Menguji apakah sistem baru tersebut sesuai dengan pemakai.
4. Memastikan bahwa konversi ke sistem baru berjalan yaitu dengan membuat
rencana, mengontrol dan melakukan instalasi baru secara benar.
Universitas Sumatera Utara
46
4.3 Komponen Utama dalam Sistem
Dalam pembuatan sistem elearning SMP yang sudah dirancang membutuhkan
perangkat keras (hardware), perangkat lunak (software), dan tenaga pelaksana
(brainware).
a. Perangkat keras (hardware)
Perangkat keras yang dibutuhkan dalam pembuatan sistem elearning SMP ini
antara lain:
1. Prosesor
2. Harddisk
3. Memori
4. Monitor
5. Keyboard
6. Mouse
7. Dan lain-lain
b. Perangkat Lunak (software)
1. PHP, MySQL, dan Sublime Text 2
2. XAMPP Control v3.2.1
3. Anti virus untuk mengetahui terjadinya kerusakan sistem.
c. Tenaga Pelaksana (Brainware)
Yaitu orang yang memiliki keahlian yang baik dan mengerti sistem operasi
komputer untuk menjalankan program.
Universitas Sumatera Utara
47
4.4 Instalasi Apache, PHP dan MySQL
Dalam menginstalasi Apache, PHP dan MySQL dilakukan secara satu per satu.
Adapun softwarenya dapat diperoleh dari situs http://www.apache.org untuk
Apache, http://www.php.net untuk PHP dan http://www.mysql.com untuk MySQL.
Tahap instalasinya dimulai dengan menginstalasi Apache, kemudian disusul
dengan menginstalasi PHP dan MySQL. Setelah instalasi selesai dilanjutkan
dengan melakukan pengaturan konfigurasi yang diberikan setelah instalasi selesai.
Namun hal ini memerlukan pengaturan yang sedikit rumit.
4.4.1 Menjalankan Apache, MySQL, dan PHP
Untuk Menjalankan ketiga software yang digunakan dapat dilakukan dengan cara
sebagai berikut:
1. Untuk menjalankan Apache, Klik Start > Programs > Apache HTTP Server
5.0.55 > Control Apache Server > Monitor Apache Servers.
2. Kemudian untuk melihat Apache telah ter-install dengan baik, tuliskan
http://localhost/ di URL. Jika telah berhasil akan terlihat seperti gambar
berikut ini:
Universitas Sumatera Utara
48
Gambar 4.1 Uji Apache
3. Uji apakah PHP telah dapat dijalankan dengan cara tuliskan script berikut
pada notepad :
Simpan dengan nama info.php dan letakkan di folder htdocs pada Apache.
4. Buka internet explorer dan tulis http://localhost/info.php di URL address. Jika
berhasil akan tampil sebagai berikut:
Gambar 4.2 Uji PHP
Universitas Sumatera Utara
49
5. Uji apakah MySQL telah dapat dijalankan dengan cara jalankan command
prompt dan ketikan seperti gambar berikut:
Gambar 4.3 Uji MySQL
6. Maka Apache, MySQL dan PHP telah dijalankan.
4.4.2 Pengujian Website di Browser
Setelah selesai mengerjakan semua halaman website yang dibuat, maka website
tersebut harus di uji terlebih dahulu di browser sebelum di-upload di internet.
Adapun cara menguji website di browser sebagai berikut:
1. Simpan website yang telah dibuat pada folder htdocs yang terdapat pada
apache dalam folder tersendiri, misalnya C:\Program Files\Apache
Group\Apache2\htdocs\elearninggun
2. Buka google chrome kemudian ketikan http://localhost/elearninggun pada
URL. Jika berhasil akan tampil seperti berikut ini:
Universitas Sumatera Utara
50
Gambar 4.4 Halaman Index Elearning SMP
4.5 Memperbarui Web
Memperbarui situs web adalah salah satu cara untuk mempertahankan situs agar
tetap dikunjungi oleh pengunjung. Dalam memperbarui situs kita harus melihat
dan mengetahui apa yang sekiranya dibutuhkan oleh pengunjung. Ada beberapa
hal yang dapat kita lakukan dalam memperbarui web kita yaitu :
1. Memperbarui Isi Web
Suatu situs web yang baik akan selalu memperbarui isi (content) dengan baik.
Dengan semakin seringnya content diperbarui (ditambah, diganti, dikoreksi)
menunjukkan kepada pengunjung situs bahwa situs kita memang benar-benar
terpelihara.
Universitas Sumatera Utara
51
2. Mengubah Tampilan Desain Web
Situs dengan wajah baru dapat menyegarkan rasa bosan pengunjung terhadap
situs yang telah kita buat. Mengubah desain situs web sangat disarankan
terutama jika situs web kita banyak dikunjungi dan memiliki banyak artikel
didalamnya.
3. Menambah Fitur-Fitur Yang Menarik
Dari berbagai teknologi web yang telah dikenal maka kita dapat membuat
layanan atau fitur khusus dari situs web yang dapat menarik hati pengunjung
dengan pelayanan atau fasilitas yang disediakan kemudian membuat mereka
penasaran dan mengeksplorasi lebih lanjut situs web kita. Karena mungkin
pengunjung akan senang dengan inovasi yang kita terapkan pada situs kita.
4.6 Demonstrasi Program
Adapun tampilan program yang dirancang penulis adalah sebagai berikut:
4.6.1
Tampilan Homepage
Halaman utama menampilkan sambutan dan pengenalan umum tentang apa itu
Sekolah Menengah Pertama beserta kegiatan umum yang dilakukan di sekolah
Universitas Sumatera Utara
52
Gambar 4.5 Tampilan Bagian Homepage
4.6.2
Tampilan Info Pendaftaran
Info pendaftaran menampilkan informasi mengenai apa itu e-Learning dan tujuannya
bagi Sekolah Menengah Pertama.
Gambar 4.6 Tampilan Info Pendaftaran
Universitas Sumatera Utara
53
4.6.3
Tampilan Halaman login
Halaman login menyediakan form login baik sebaga admin, guru, maupun siswa.
Halaman ini harus diisi dengan username dan password yang benar sesuai level masingmasing.
Gambar 4.7 Tampilan Halaman Admin
4.6.4
Tampilan Halaman Pendaftaran
Menampilkan form isian yang wajib di isi siswa dengan data-datta diri yang benar agar
dapat terdaftar di sistem e-learning.
Gambar 4.8 Tampilan Halaman login
Universitas Sumatera Utara
54
4.6.5
Tampilan Halaman Admin
Halaman admin berisi form input mata pelajaran dan jadwal mengajar, serta form untuk
mengelola kelas dan guru.
Gambar 4.9 Tampilan Halaman Admin
4.6.6
Tampilan Halaman Guru
Gambar 4.10 Tampilan Halaman Login Guru
Universitas Sumatera Utara
55
4.6.7
Tampilan Halaman Login Siswa
Gambar 4.11 Tampilan Halaman Login Siswa
4.6.8 Tampilan Unduh Materi
Gambar 4.12 Halaman Unduh Materi
Universitas Sumatera Utara
56
4.6.9 Tampilan Halaman Tugas Siswa
Halaman tugas siswa menampikan soal-soal tugas siswa yang telah di-upload oleh
guru. Soal-soal tersebut harus dikerjakan oleh setiap siswa, dan dikerjakan secara
online.
Gambar 4.13 Halaman Tugas Siswa
Universitas Sumatera Utara
BAB 5
KESIMPULAN DAN SARAN
5.1 Kesimpulan
Setelah dilakukannya pembahasan kembali oleh penulis, penulis akhirnya dapat
membuat kesimpulan sebagai berikut :
1. Website sistem elearning SMP ini adalah sarana pembelajaran secara online yang
dapat diakses oleh pihak-pihak yang terdaftar dalam sistem.
2. Website Sistem elearning SMP ini menyajikan halaman berbagi pakai file yang
dapat di-upload oleh guru dan diunduh oleh siswa
3. Website sistem elearning SMP ini juga menyajikan tempat untuk mengerjakan tugas,
mengerjakan ujian, dan menghitung nilai siswa secara online.
5.2 Saran
Dalam mengakhiri penulisan Tugas Akhir, penulis menyampaikan saran yaitu
jadikanlah website ini sebagai sarana pengembangan sistem belajar-mengajar
yang efektif bagi semua pihak yang berkepentingan, khususnya di lingkungan
Sekolah Menengah Pertama,serta pergunakanlah website ini untuk kepentingan
pendidikan yang benar-benar berisi nilai edukasi yang posistif demi kemajuan
pendidikan Indonesia.
Universitas Sumatera Utara
ANALISIS DAN PERANCANGAN SISTEM
3.1 Analisis Sistem
Sebelum merancang sebuah aplikasi yang akan dibangun, faktor yang harus
diperhatikan adalah tahap analisis. Tahap analisis merupakan tahap pemahaman
dengan perangkat lunak yang akan digunakan, kebutuhan fungsional, diagram alir
data, kamus alir data dan enkripsi
proses. Tahap analisis bertujuan untuk
mengetahui mekanisme sistem, proses–proses yang terlibat dalam sistem serta
hubungan antara proses tersebut.
3.2 Perancangan Sistem
Perancangan sistem adalah upaya suatu organisasi atau lembaga untuk memulai
memiliki suatu sistem yang lebih baik lagi dari sistem yang sebelumnya.
Perancangan sistem dilakukan setelah mendapat gambaran dengan jelas apa yang
harus dikerjakan. Tujuan dari perancangan sistem adalah untuk memenuhi
kebutuhan user (pemakai) mengenai gambaran yang jelas tentang perancangan
sistem yang akan dibuat serta diimplementasikan.
Universitas Sumatera Utara
33
3.2.1 Diagram Konteks
Model yang diusulkan dalam proses sistem dirancang untuk mendapatkan
informasi dari siswa (student) dan guru (teacher). Keduanya menganalisis,
memberikan input dan menyimpan data untuk administrator (manager). Dalam
sistem ini siswa dapat memilih mata kelas, mengunduh file materi, dan
sebagainya. Juga para siswa dapat menjawab kuis dan ujian secara on-line. Para
guru dapat memberikan materi pelajaran dan soal tugas, kuis, maupun ujian online. Sedangkan Administrator tidak berhak mengenai penerimaan atau penolakan
dari isi pelajaran. Ia hanya berhak mendaftarkannya masing-masing baik sebagai
guru ataupun sebagai siswa. Diagram konteks sistem dapat disajikan dalam
Gambar 3.1.
Data Siswa
Siswa
Data Guru
File materi pelajaran
File tugas
Laporan nilai siswa
Mencari Data
Guru
Hak Akses
Hak Akses
Sistem Aplikasi
Elearning
Materi
Jadwal Mengajar
Mata Pelajaran
Jadwal Mengajar
Admin
Gambar 3.1 Diagram Konteks Elearning
Universitas Sumatera Utara
34
3.2.2 Data Flow Diagram (DFD)
Beberapa detil mungkin akan dimasukkan ke dalam sistem utama untuk menutup
seluruh persyaratan sebuah e-Learning. Siswa akan masuk ke sistem registrasinya
atau membuat profil. Setelah registrasi, maka siswa akan diberi hak akses untuk
bisa mengakses sistem elearning. Kemudian guru harus memberikan datanya
terlebih dahulu kepada admin, selanjutnya admin akan mendaftarkan guru tersebut
pada sistem. Setelah terdaftar maka guru dapat mengakses serta meng-upload file
materi pada sistem elearning. Para administrator dapat memantau seluruh
kegiatan, dan apabila terdapat user-user yang tidak berkepentingan maka
administrator dapat menghapus akun user tersebut. Laporan user dan instruktur
disimpan di dalam penyimpanan data base. Guru dapat memberikan nilai kepada
siswa melalui tugas dan ujian online. Data flow diagram ini dapat diilustrasikan
dalam Gambar 3.2.
Universitas Sumatera Utara
35
Data Guru
Data Siswa
Siswa
Guru
Hak Akses
Hak Akses
1.0
Guru
Input Data
Siswa
Jadwal Mengajar
2.0
Mata Pelajaran
Input Mata Pelajaran
Input Jadwal Mengajar
Jadwal Mengajar
Mata Pelajaran
Jadwal Mengajar
3.0
Input Materi
Materi
Materi Elearning
Mencari Data
4.0
Pengelolaan
Elearning
Materi
File materi pelajaran
File tugas
Laporan nilai siswa
Admin
Gambar 3.2 Data Flow Diagram (DFD)
Universitas Sumatera Utara
36
3.2.3 Perancangan Antarmuka
Perancangan antar muka yang akan di buat meliputi beberapa perancangan,
diantaranya perancangan struktur menu dan spesifikasi antarmuka. Perancangan
antarmuka dibuat untuk menggambarkan tampilan program yang akan digunakan
oleh pengguna untuk berinteraksi dengan aplikasi yang dibuat. Perancnagan
dibuat berdasarkan tampilan antarmuka input saat aplikasi diimplementasikan.
Perancangan antarmuka dapat dilihat pada gambar 3.3 berikut ini.
Form Utama
Home
Profile
Info Pendaftaran
Pendaftaran
Login
Tambah Data Siswa
Menu Admin
Kelola Kelas
Menu Guru
Tambah Kelas
Print Laporan
Data Guru
Menu Siswa
Edit Data
Data Siswa
Edit Data
Edit/delete Kelas
Tambahkan Mapel
Kelola Mata
Pelajaran
Ganti Password
Edit/delete Mapel
Tambah Jadwal Baru
Ganti Password
Ganti
Password
Materi Ajar
Download
File
Edit/delete Jadwal
Tambahkan Tugas
Baru
Edit/delete Jadwal
Laporan Nilai
Tugas
Tugas
Kerjakan
Tugas
Edit/delete Jadwal
Laporan Nilai
Edit/delete Jadwal
Kelola Siswa
Lihat Jadwal Mengajar
Hapus File Materi
Laporan nilai
Kelola Profile
Print Jadwal
Print Laporan Jadwal
Tugas
Ganti Password
Jadwal Mata
Pelajaran
Tambahkan Bahan Baru
Upload Materi
Kelola Jadwal
Mengajar
Ganti Password
Print Laporan
Edit/delete Jadwal
Edit/delete Jadwal
Edit/delete Jadwal
Kelola Guru
Edit/delete Jadwal
Edit/delete Jadwal
logout
Logout
Logout
Gambar 3.3 Perancangan Antarmuka Elearning
Universitas Sumatera Utara
37
3.2.4 Entity Relationship Diagram (ERD)
Dalam perancangan suatu sistem sangat diperlukan sebuah gambaran ERD untuk
mempermudah dilakukannya analisis dan memberikan gambaran alur kerja yang
jelas untuk mempermudah pengerjaan sistem sejak awal. ERD berikut akan
menjelaskan setiap entitas yang dipakai dalam sistem dan atribut-stribut apa saja
yang terdapat dalam setiap entitas tersebut.
Nip
Nm_guru
tanggal
level
password
Kd_pelajaran
TTL
golongan
tamatan
Tbl_guru
nip
Id_mater_ajar
alamat
upload
keterangan
Materi_ajar
Kd_kelas
jabatan
Jenis_kelamin
File_materi_ajar
agama
telepon
foto
Id_tugas
nip
Kd_pelajaran
input
Kd_kelas
Id_admin
upload
Nama_lengkap
Tbl_tugas
Batas_waktu
password
username
Tbl_admin
level
mengajar
Jenis_kelamin
memberi
Id_nilai_tugas
mengunduh
No_induk
Kd_kelas
nip
input
Tbl_nilai_tugas
Id_tugas
mengerjakan
Nilai_tugas
Tlb_kelas
melihat
kapasitas
input
Nm_kelas
jk
No_induk
memilih
TTL
agama
password
Tbl_siswa
Nm_siswa
judul
alamat
foto
Kd_kelas
Sekolah_asal
Tbl_page
level
melihat
isi
Id_page
Kd_kelas
Id_jadwal
input
Kd_pelajaran
Tbl_jadwal_pelajaran
hari
Jam_selesai
melihat
nip
Jam_mulai
Gambar 3.4 Entity Relationship Diagram
Universitas Sumatera Utara
38
3.2.5 Perancangan Database
Pada tahapan ini dipersiapkan tempat untuk menampung data di server, data
tersebut nantinya akan diproses oleh program yang kita buat pada tahap
pemrograman, baik penambahan, pengeditan, panghapusan dan menampilkan isi
database ke halaman website. Database terdiri atas tabel-tabel yang dibuat dengan
menggunakan program MySQL.
Adapun database yang dibuat oleh penulis adalah database db_alumni
dengan tabel-tabel sebagai berikut:
Tabel 3.1 Tabel Admin
Nama Field
Type
Size
id_admin
Int
5
Username
Varchar
40
Password
Varchar
40
nama_lengkap
Varchar
35
jenis_kelamin
Varchar
10
level
Varchar
10
Keterangan
primary key
Tabel 3.2 Tabel Guru
Nama Field
Type
Size
Nip
Varchar
20
Password
Varchar
20
Keterangan
Primary key
Universitas Sumatera Utara
39
nm_guru
Varchar
40
Alamat
Varchar
150
tempat_lahir
Varchar
30
tanggal_lahir
Varchar
20
jenis_kelamin
Varchar
10
Foto
Varchar
40
Telepon
Varchar
12
Agama
Varchar
10
Jabatan
Varchar
40
Golongan
Varchar
7
Tamatan
Varchar
150
Level
Varchar
10
Tabel 3.3 Jadwal Pelajaran
Nama Field
Type
Size
id_ jadwa_pelajaran
Int
11
kd_kelas
Varchar
11
kd_pelajaran
Varchar
11
Nip
Varchar
20
Hari
Varchar
20
jam_mulai
Time
jam_selesai
Time
Keterangan
Primary key
Universitas Sumatera Utara
40
Tabel 3.4 kelas
Nama Field
Type
Size
kd_kelas
Varchar
4
Nip
Varchar
20
nm_kelas
Varchar
203
Kapasitas
Int
Keterangan
Primary key
Tabel 3.5 Materi Ajar
Nama Field
Type
Size
id_mata_pelajaran
Int
5
kd_pelajaran
Varchar
5
Nip
Varchar
20
kd_kelas
Varchar
5
Keterangan
Text
file-materi_ajar
Varchar
Tanggal
Date
Keterangan
Primary key
255
Tabel 3.6 Nilai Tugas
Nama Field
Type
Size
id_nilai_tugas
Int
5
id_tugas
Int
5
no_induk
Int
11
nilai_tugas
Int
5
Keterangan
Primary key
Universitas Sumatera Utara
41
Tabel 3.7 Page
Nama Field
Type
Size
id_page
Int
5
Judul
Varchar
255
Isi
Text
Keterangan
Primary key
Tabel 3.8 Siswa
Nama Field
Type
Size
no_induk
Varchar
10
Password
Varchar
15
nm_siswa
Varchar
20
Alamat
Varchar
30
tempat_lahir
Varchar
15
tanggal_lahir
Varchar
20
Jk
Varchar
10
Agama
Varchar
10
Foto
Text
sekolah_asal
Varchar
20
nm_ortu
Varchar
20
Pekerjaan
Varchar
20
kd-kelas
Varchar
5
Level
Varchar
10
Keterangan
Primary key
Universitas Sumatera Utara
42
Tabel 3.9 Tugas
Nama Field
Type
Size
id_tugas
Int
10
Nip
Varchar
50
kd_pelajaran
Varchar
20
kd_kelas
Varchar
4
batas_waktu
Datetime
Keterangan
Primary key
3.2.6 Flowchart
Dalam perancangan sistem elearning, penggunaan flowchart merupakan alat yang
tepat untk menggambarkan alur kerja dari sistem. Flowchart menjelaskan alur
kerja mulai dari awal sampai akhir dari sistem yang akan dibuat. Flowchart
berikut menjelaskan secara rinci alur kerja sistem elerning SMP.
START
Home
Profile
Info Pendaftaran
Pendaftaran
Login
Isi data diri
siswa
Input NIP/
NIS/
Username,
Level, &
Password
N
Simpa n?
Benar
N
Y
Y
Menu
Elearning
“Selamat
datang di
Sis tem
Elearning
SMP
Finis h
Gambar 3.5 Flowchart e-learning
Universitas Sumatera Utara
43
3.3 Pembangunan Halaman Sistem
Desain
dapat
didefinisikan
sebagai
tahap setelah analisis
dari
siklus
pengembangan sistem: pendefinisian dari kebutuhan-kebutuhan fungsional dan
persiapan untuk rancang bangun implementasi, menggambarkan bagaimana suatu
sistem dibentuk.
Menurut John Burch dan Garry Grudnitski dalam buku Analisa dan
Desain, Sistem Informasi Pendekatan Terstruktur adalah Desain Sistem dapat
didefinisikan sebagai penggambaran dan pembuatan sketsa atau pengaturan dari
beberapa elemen yang terpisah ke dalam satu kesatuan yang utuh dan berfungsi.
Tahap desain sistem mempunyai dua maksud atau tujuan utama, yaitu:
1. Untuk memenuhi kebutuhan para pemakai sistem.
2. Untuk memberikan gambaran yang jelas dan rancang bangun yang
lengkap kepada pemrogram komputer dan ahli-ahli teknik lainnya yang
terlibat. Tujuannya lebih condong pada desain sistem yang terinci, yaitu
pembuatan rancang bangun yang jelas dan lengkap untuk nantinya
digunakan untuk pembuatan program komputernya.
3.3.1
Desain Home
Desain home adalah tampilan utama sisem yang muncul pertama kali di layar
komputer dan digunakan untuk menerangkan menu-menu pada sistem.
Universitas Sumatera Utara
44
Logo Elearning
Tentang
elearning
Header
Right side
Body
Kalender
Footer
Gambar 3.6 Desain Home
3.3.2 Desain Pendaftaran Elearning
Desain pendaftaran elearning adalah halaman yang menampilkan formulir online
kosong, dimana pendaftar baru harus mengisi formulir tersebut dengan data
dirinya agar pendaftar dapat bergabung dengan sistem.
Logo El earning
Tentang
elearning
Header
Tambah data siswa
No induk
Password
Nama Lengkap
Alamat
TTL
Jenis Kelamin
Agama
Asal sekolah
Nama orangtua
Kelas
Upload foto
Right side
Kalender
Simpan
Footer
Gambar 3.7 Desain Pendaftaran E-learning
Universitas Sumatera Utara
BAB 4
IMPLEMENTASI SISTEM
4.1 Pengertian Implementasi Sistem
Implementasi sistem adalah langkah-langkah atau prosedur-prosedur yang
dilakukan dalam menyelesaikan desain sistem yang telah disetujui, untuk
menguji, menginstall dan memulai sistem baru atau sistem yang diperbaiki untuk
menggantikan sistem yang lama.
4.2 Tujuan Implementasi Sistem
Tujuan Implementasi sistem adalah sebagai berikut:
1. Menyelesaikan desain sistem yang telah disetujui sebelumnya.
2. Memastikan bahwa pemakai (user) dapat mengoperasikan sistem baru.
3. Menguji apakah sistem baru tersebut sesuai dengan pemakai.
4. Memastikan bahwa konversi ke sistem baru berjalan yaitu dengan membuat
rencana, mengontrol dan melakukan instalasi baru secara benar.
Universitas Sumatera Utara
46
4.3 Komponen Utama dalam Sistem
Dalam pembuatan sistem elearning SMP yang sudah dirancang membutuhkan
perangkat keras (hardware), perangkat lunak (software), dan tenaga pelaksana
(brainware).
a. Perangkat keras (hardware)
Perangkat keras yang dibutuhkan dalam pembuatan sistem elearning SMP ini
antara lain:
1. Prosesor
2. Harddisk
3. Memori
4. Monitor
5. Keyboard
6. Mouse
7. Dan lain-lain
b. Perangkat Lunak (software)
1. PHP, MySQL, dan Sublime Text 2
2. XAMPP Control v3.2.1
3. Anti virus untuk mengetahui terjadinya kerusakan sistem.
c. Tenaga Pelaksana (Brainware)
Yaitu orang yang memiliki keahlian yang baik dan mengerti sistem operasi
komputer untuk menjalankan program.
Universitas Sumatera Utara
47
4.4 Instalasi Apache, PHP dan MySQL
Dalam menginstalasi Apache, PHP dan MySQL dilakukan secara satu per satu.
Adapun softwarenya dapat diperoleh dari situs http://www.apache.org untuk
Apache, http://www.php.net untuk PHP dan http://www.mysql.com untuk MySQL.
Tahap instalasinya dimulai dengan menginstalasi Apache, kemudian disusul
dengan menginstalasi PHP dan MySQL. Setelah instalasi selesai dilanjutkan
dengan melakukan pengaturan konfigurasi yang diberikan setelah instalasi selesai.
Namun hal ini memerlukan pengaturan yang sedikit rumit.
4.4.1 Menjalankan Apache, MySQL, dan PHP
Untuk Menjalankan ketiga software yang digunakan dapat dilakukan dengan cara
sebagai berikut:
1. Untuk menjalankan Apache, Klik Start > Programs > Apache HTTP Server
5.0.55 > Control Apache Server > Monitor Apache Servers.
2. Kemudian untuk melihat Apache telah ter-install dengan baik, tuliskan
http://localhost/ di URL. Jika telah berhasil akan terlihat seperti gambar
berikut ini:
Universitas Sumatera Utara
48
Gambar 4.1 Uji Apache
3. Uji apakah PHP telah dapat dijalankan dengan cara tuliskan script berikut
pada notepad :
Simpan dengan nama info.php dan letakkan di folder htdocs pada Apache.
4. Buka internet explorer dan tulis http://localhost/info.php di URL address. Jika
berhasil akan tampil sebagai berikut:
Gambar 4.2 Uji PHP
Universitas Sumatera Utara
49
5. Uji apakah MySQL telah dapat dijalankan dengan cara jalankan command
prompt dan ketikan seperti gambar berikut:
Gambar 4.3 Uji MySQL
6. Maka Apache, MySQL dan PHP telah dijalankan.
4.4.2 Pengujian Website di Browser
Setelah selesai mengerjakan semua halaman website yang dibuat, maka website
tersebut harus di uji terlebih dahulu di browser sebelum di-upload di internet.
Adapun cara menguji website di browser sebagai berikut:
1. Simpan website yang telah dibuat pada folder htdocs yang terdapat pada
apache dalam folder tersendiri, misalnya C:\Program Files\Apache
Group\Apache2\htdocs\elearninggun
2. Buka google chrome kemudian ketikan http://localhost/elearninggun pada
URL. Jika berhasil akan tampil seperti berikut ini:
Universitas Sumatera Utara
50
Gambar 4.4 Halaman Index Elearning SMP
4.5 Memperbarui Web
Memperbarui situs web adalah salah satu cara untuk mempertahankan situs agar
tetap dikunjungi oleh pengunjung. Dalam memperbarui situs kita harus melihat
dan mengetahui apa yang sekiranya dibutuhkan oleh pengunjung. Ada beberapa
hal yang dapat kita lakukan dalam memperbarui web kita yaitu :
1. Memperbarui Isi Web
Suatu situs web yang baik akan selalu memperbarui isi (content) dengan baik.
Dengan semakin seringnya content diperbarui (ditambah, diganti, dikoreksi)
menunjukkan kepada pengunjung situs bahwa situs kita memang benar-benar
terpelihara.
Universitas Sumatera Utara
51
2. Mengubah Tampilan Desain Web
Situs dengan wajah baru dapat menyegarkan rasa bosan pengunjung terhadap
situs yang telah kita buat. Mengubah desain situs web sangat disarankan
terutama jika situs web kita banyak dikunjungi dan memiliki banyak artikel
didalamnya.
3. Menambah Fitur-Fitur Yang Menarik
Dari berbagai teknologi web yang telah dikenal maka kita dapat membuat
layanan atau fitur khusus dari situs web yang dapat menarik hati pengunjung
dengan pelayanan atau fasilitas yang disediakan kemudian membuat mereka
penasaran dan mengeksplorasi lebih lanjut situs web kita. Karena mungkin
pengunjung akan senang dengan inovasi yang kita terapkan pada situs kita.
4.6 Demonstrasi Program
Adapun tampilan program yang dirancang penulis adalah sebagai berikut:
4.6.1
Tampilan Homepage
Halaman utama menampilkan sambutan dan pengenalan umum tentang apa itu
Sekolah Menengah Pertama beserta kegiatan umum yang dilakukan di sekolah
Universitas Sumatera Utara
52
Gambar 4.5 Tampilan Bagian Homepage
4.6.2
Tampilan Info Pendaftaran
Info pendaftaran menampilkan informasi mengenai apa itu e-Learning dan tujuannya
bagi Sekolah Menengah Pertama.
Gambar 4.6 Tampilan Info Pendaftaran
Universitas Sumatera Utara
53
4.6.3
Tampilan Halaman login
Halaman login menyediakan form login baik sebaga admin, guru, maupun siswa.
Halaman ini harus diisi dengan username dan password yang benar sesuai level masingmasing.
Gambar 4.7 Tampilan Halaman Admin
4.6.4
Tampilan Halaman Pendaftaran
Menampilkan form isian yang wajib di isi siswa dengan data-datta diri yang benar agar
dapat terdaftar di sistem e-learning.
Gambar 4.8 Tampilan Halaman login
Universitas Sumatera Utara
54
4.6.5
Tampilan Halaman Admin
Halaman admin berisi form input mata pelajaran dan jadwal mengajar, serta form untuk
mengelola kelas dan guru.
Gambar 4.9 Tampilan Halaman Admin
4.6.6
Tampilan Halaman Guru
Gambar 4.10 Tampilan Halaman Login Guru
Universitas Sumatera Utara
55
4.6.7
Tampilan Halaman Login Siswa
Gambar 4.11 Tampilan Halaman Login Siswa
4.6.8 Tampilan Unduh Materi
Gambar 4.12 Halaman Unduh Materi
Universitas Sumatera Utara
56
4.6.9 Tampilan Halaman Tugas Siswa
Halaman tugas siswa menampikan soal-soal tugas siswa yang telah di-upload oleh
guru. Soal-soal tersebut harus dikerjakan oleh setiap siswa, dan dikerjakan secara
online.
Gambar 4.13 Halaman Tugas Siswa
Universitas Sumatera Utara
BAB 5
KESIMPULAN DAN SARAN
5.1 Kesimpulan
Setelah dilakukannya pembahasan kembali oleh penulis, penulis akhirnya dapat
membuat kesimpulan sebagai berikut :
1. Website sistem elearning SMP ini adalah sarana pembelajaran secara online yang
dapat diakses oleh pihak-pihak yang terdaftar dalam sistem.
2. Website Sistem elearning SMP ini menyajikan halaman berbagi pakai file yang
dapat di-upload oleh guru dan diunduh oleh siswa
3. Website sistem elearning SMP ini juga menyajikan tempat untuk mengerjakan tugas,
mengerjakan ujian, dan menghitung nilai siswa secara online.
5.2 Saran
Dalam mengakhiri penulisan Tugas Akhir, penulis menyampaikan saran yaitu
jadikanlah website ini sebagai sarana pengembangan sistem belajar-mengajar
yang efektif bagi semua pihak yang berkepentingan, khususnya di lingkungan
Sekolah Menengah Pertama,serta pergunakanlah website ini untuk kepentingan
pendidikan yang benar-benar berisi nilai edukasi yang posistif demi kemajuan
pendidikan Indonesia.
Universitas Sumatera Utara