4
3. Metode Perancangan Sistem
Proses perancangan dibutuhkan dalam sebuah penelitian guna mempermudah penelitian itu sendiri serta agar penelitian tersebut terarah dan dapat mencapai tujuan
yang dikehendaki. Tahapan penelitian menggunakan alur seperti pada gambar 1. Metode yang digunakan untuk membangun sistem informasi dalam penelitian ini
adalah metode perancangan sistem dengan menggunakan model
Prototype
.
Prototype
merupakan model perancangan sistem dimana kebutuhan diubah menjadi sistem yang bekerja
Working System
yang diperbaiki secara terus menerus sesuai dengan kebutuhan dari kerjasama antara analis dengan pengguna
user
[6].
Gambar 1 Tahapan Penelitian
Tahap pertama wawancara, wawancara dilakukan dengan Dra. Maskuroh Fitriyati, M.Pd selaku Kasi Kurikulum Dinas Pendidikan Kota Salatiga
pada tanggal 12 April 2012. Pengumpulan kebutuhan pengguna dari metode
prototype
adalah mengidentifikasi kebutuhan dasar pengguna melalui proses
requirement
dan analisis. Pengumpulan bahan untuk penelitian ini dilakukan dengan cara
mengumpulkan data sekolah, data peserta didik, data nilai kelulusan UAN, data tingkat kelulusan UAN dan data wilayah sekolah SMA dan SMK di Kota Salatiga.
Tahap kedua wawancara , adalah wawancara terhadap
user
.
User
dalam sistem ini adalah calon siswa dan orang tua siswa tersebut. Wawancara dilakukan pada
tanggal 25 Mei 2012. Pengumpulan kebutuhan berdasarkan informasi apa saja yang harus ditampilkan disistem ini.
User
yaitu calon siswa dan orang tua siswa menginginkan sebuah sistem informasi yang menampilkan letak lokasi sekolah,
informasi alamat sekolah, fasilitas sekolah, gambaran mengenai lingkungan sekolah dan tingkat kelulusan sekolah. Setelah mendapatkan semua data tersebut,
developer
melakukan analisis kebutuhan sistem yang dikembangkan berdasarkan permintaan pengguna sistem.
Setelah mengidentifikasi kebutuhan
user
, data yang didapat sebelumnya kemudian dijadikan acuan untuk mengembangkan
prototype
untuk perancangan sistem. Perancangan sistem ini
developer
membuat sebuah
prototype
yang telah disesuaikan berdasarkan dengan
kebutuhan dari
user
, sehingga sistem yang dibuat sesuai dengan kebutuhan dari
user.
Evaluasi
Prototyping
adalah tahapan
developer
bekerja dengan
user
untuk menentukan seberapa baik
prototype
itu dan apakah
prototype
yang dibuat sudah sesuai dengan kebutuhannya. Jika belum sesuai
user
memberikan saran bagaimana memperbaiki
prototype
tersebut.
Developer
kemudian menggunakan masukan
ini untuk memperbaharui
prototype
yang ada. Berdasarkan kebutuhan pengguna sistem yaitu calon siswa dan orang tua
siswa, maka sistem dalam penelitian ini dibagi menjadi 2 pengguna sistem yaitu
user
biasa dan administrator.
User
biasa adalah calon siswa dan orang tua siswa yang akan
5
menggunakan sistem ini untuk memperoleh informasi sekolah.
User
biasa memiliki hak akses untuk melihat peta
Google Earth
, melakukan navigasi standar peta seperti
zoom inout
, menggeser posisi peta, mencari sekolah, melihat informasi alamat sekolah, fasilitas sekolah, gambaran mengenai lingkungan sekolah, tingkat kelulusan
sekolah dan animasi mengenai gambaran sekolah. Administrator dalam sistem ini adalah Dinas pendidikan Kota Salatiga. Administrator memiliki hak akses penuh
dalam sistem ini yaitu melihat, mengedit, menghapus, dan menambah peta lokasi sekolah maupun animasi sekolah. Administrator juga dapat melihat, mengedit,
menghapus, dan menambah data sekolah dan tingkat kelulusan sekolah. Administrator
ini lah yang nantinya akan memperbarui serta memanajemen data-data yang ada dalam sistem informasi ini.
Setelah
prototype
sudah sesuai, dilakukan pembuatan pengkodean untuk membangun sistem. Setelah sistem yang ada sudah menjadi sebuah perangkat lunak
atau aplikasi yang siap pakai, barulah diadakan pengujian sistem.
Developer
melakukan pengujian apakah aplikasi sudah berjalan sesuai dengan permintaan pemakai. Dilakukan evaluasi sistem untuk menentukan apakah sistem yang sudah jadi
sesuai dengan yang diharapkan. Jika belum sesuai
developer
kembali memperbaharui aplikasi yang ada, jika sudah sesuai barulah
developer
masuk ke tahap yang terakhir. Menggunakan sistem merupakan tahap terahir dari model
prototype.
Aplikasi yang telah diuji dan diterima oleh user siap untuk digunakan.
Spesifikasi perangkat keras dan perangkat lunak yang digunakan dalam penelitian ini adalah sebagai berikut:
Tabel 1 Tabel analisis kebutuhan perangkat keras dan lunak Perangkat KerasLunak Versi dan Spesifikasi
Prosesor Intel Pentium 4
Random Access Memory
RAM 1 GB
VGA
Card On Board
Mouse
dan
Keyboard
Standar Sistem Operasi
Microsoft Windows XP SP 2 Monitor
LCD 14”
XAMPP
1.7.3
Animation Editor Adobe Flash
CS 3
Script Editor
Netbeans IDE 6.7.1 UML
Editor
Rational Rose 2000
Browser
Google Chroom
Perancangan sistem menggunakan
Unified Modelling Language
UML. Proses pertama dalam perancangan aplikasi adalah membuat
Use Ca se Diagram
.
Use case
merupakan gambaran skenario dari interaksi antara user dengan sistem. Sebuah diagram
use ca se
menggambarkan hubungan antara aktor dan kegiatan yang dapat dilakukannya terhadap aplikasi.
Perancangan sistem menggunakan
Unified Modelling Language
UML. Proses pertama dalam perancangan aplikasi adalah membuat
Use Ca se Diagram
.
Use case
merupakan gambaran skenario dari interaksi antara user dengan sistem. Sebuah diagram
use ca se
menggambarkan hubungan antara aktor dan kegiatan yang dapat dilakukannya terhadap aplikasi.
6
Gambar 2
Use Case
Diagram
Alur pada gambar 2 diatas dimulai ketika calon siswa baru atau orang tua siswa mulai menjalankan aplikasi, calon siswa baru atau orang tua siswa akan masuk
ke dalam halaman utama. Pada halaman tersebut terdapat pilihan menu yaitu menu pilih sekolah. Setelah masuk pada menu pilihan sekolah, calon siswa baru atau orang
tua siswa dapat memilih pilihan sekolah SMA atau SMK. Setelah masuk dalam menu tersebut, calon siswa baru atau orang tua siswa dapat melihat tampilan peta berupa
Google Earth
, tampilan animasi
Flash
panorama sekolah dan keterangan umum mengenai sekolah tersebut.
Alur pada administrator dimulai ketika Dinas Pendidikan mulai menjalankan
aplikasi, administrator Dinas Pendidikan akan melalukan
login
pada halaman utama, lalu masuk ke dalam halaman utama administrator. Pada halaman administrator
tersebut terdapat pilihan menu yaitu menu pilih edit sekolah. Setelah masuk pada menu pilihan edit sekolah, administrator Dinas Pendidikan dapat memilih pilihan
manajemen sekolah SMA atau SMK. Setelah masuk dalam menu tersebut, administrator dapat menambah dan menghapus data keterangan umum sekolah,
menambah, menghapus dan mengedit posisi
longitude
dan
atitude Google Earth
, menambah atau menghapus tampilan animasi
Flash
Panorama sekolah.
Gambar 4
Activity
Diagram Administrator Dinas Pendidikan
Activity Diagram
dijelaskan mengenai aktifitas yang dapat dilakukan pengguna sistem, baik sebagai
admin
maupun
user
. Misalnya,
admin
dapat menggunakan hak aksesnya untuk menambahkan sekolah, mengedit keterangan
sekolah, menentukan lokasi sekolah dengan memasukkan
longitud latitud
untuk menentukan posisi sekolah ditampilan
Google Ea rth
, mengganti atau menambahkan animasi
Flash
Panorama, mengisi data detail sekolah, dan keluar dari sistem.
Administrator sistem ini adalah Dinas Pendidikan. Gambar 4 menunjukkan seluruh aktifitas yang dapat dilakukan oleh
admin
, yaitu dapat melakukan pengaturan tampilan kata untuk halaman home, mengisi keterangan pada tampilan menu kontak
kami. Masuk pada menu manajemen sekolah, admin langsung memilih untuk manajemen SMA atau SMA, pada prinsipnya menu pengeditannya sama. Masuk
menu manajemen SMA atau SMK, admin dapat menambahkan sekolah, melakukan edit sekolah, terdapat menu tambah data detail sekolah, admin dapat menambahkan
detail sekolah, edit data detail sekolah.
7
Gambar 5
Activity
Diagram Calon Siswa BaruOrang Tua Siswa
Gambar 5 menunjukkan hak akses yang dapat dilakukan oleh
user
.
User
dalam hal ini adalah calon siswa baru dan orang tua siswa.
User
tidak perlu melakukan
login
sebagai member untuk melihat sistem.
User
hanya dapat melihat informasi yang telah disediakan, yaitu melihat tampilan awal, masuk pada pilihan
menu SMA atau SMK, memilih salah satu daftar lalu melihat halaman tampilan sekolah. Setelah itu
user
dapat melihat peta lokasi sekolah, melihat animasi panorama sekolah, melihat keterangan sekolah dan keluar dari sistem.
Gambar 6
Class Diagram
Sistem memiliki
cla ss diagram
seperti pada Gambar 6, menampilkan
class diagram
dari sistem yang dibangun, menggambarkan hubungan setiap
class
pada sistem. Terdapat 4
entity
yang digunakan pada sistem yaitu
entity
users yang digunakan untuk menampung data user,
entity
sekolah yang digunakan untuk menampung data sekolah baik SMA maupun SMK dan dibedakan melalui jenisnya,
entity
sekolah_detail yang digunakan untuk menampung detail sekolah berupa data jumlah siswa sekolah maupun tingkat kelulusan, dan
entity
animasi yang digunakan untuk menampung data animasi sekolah yang akan ditampilkan.
Tahap yang ketiga merupakan tahap penulisan kode. Penulisan kode ini dilakukan untuk pembuatan sistem yang berupa
WebGIS
yang akan menampilkan data-data sekolah dan peta sekolah di Kota Salatiga beserta menampilkan animasi
Flash
Panorama sekolah. Program dibangun dengan menggunakan PHP 5 untuk
web
, mySql untuk
database
, dan
Google Earth
untuk pemetaan program. Animasi Sekolah dibuat dengan menggunakan
Adobe Flash
CS 3. Tahap yang keempat adalah tahap pengujian program, pada tahap ini akan
dilakukan analisa terhadap sistem yang telah dibuat. Analisa tersebut adalah apakah sistem yang dibuat telah sesuai dengan kebutuhan atau tidak, apakah sistem yang
dibuat telah dapat berjalan dengan baik dengan menampilkan data-data, dan agar mengetahui kekurangan dari sistem yang dibuat sehingga dapat dibenahi apabila
terdapat kesalahan dalam pembuatan sistem.
8
Desain Antarmuka Perancangan antar muka ini memberi gambaran awal bagaimana tampilan
antar muka yang akan digunakan dalam pengembangan sistem informasi ini. Dalam tampilan antar muka sistem ini akan memunculkan daftar sekolah, peta berupa
Google Earth
, dan tampilan Panorama mengenai lingkungan sekolah SMA dan SMK.
Desain Halaman
Home
Gambar 7 Desain Halaman Awal
Home
Keterangan Gambar 7 : 1. Judul Aplikasi
2. Menu Beranda 3. Daftar SMA
4. Daftar SMK 5. Kontak Kami
6. Pencarian 7.
Login User Name
8.
Login Password
9. Tampilan Map
Google Earth
Peta SMA dan SMK seluruh Kota Salatiga 10. Keterangan tentang halaman Beranda
Pada gambar 14 menjelaskan tentang tampilan awal atau beranda dari aplikasi sistem informasi yang akan dibuat. Pada nomer 1, terdapat teks judul dari aplikasi
sistem tersebut. Nomer 2 merupakan sebuah Menu Beranda yang berfungsi apabila
user
masuk ke menu lain, lalu
user
ingin kembali ke menu utama, dengan melakukan
action
terhadap menu beranda,
user
akan kembali lagi pada menu utama. Nomer 3 merupakan Menu Daftar SMA,
user
akan dihubungkan ke halaman daftar SMA. Nomer 4 merupakan Menu Daftar SMK,
user
akan dihubungkan ke halaman daftar SMK. Nomer 5 adalah menu Kontak Kami. Nomer 6 merupakan Menu Pencarian.
Nomer 7 dan 8 merupakan
text box
yang digunakan untuk menerima inputan
username
dan
pa ssword
yang diinput oleh
user
. Nomer 9 merupakan tampilan map
Google Earth
pemetaan sekolah SMA dan SMK di Kota Salatiga. Nomer 10 berupa
text
keterangan tentang halaman beranda.
Tampilan Halaman Daftar SMA dan Daftar SMK
1
2 3
4 5
6
7
7 8
9
10
1
2 3
4 5
6
7
7 8
9
9
Gambar 8 Desain Halaman SMA atau SMK
Keterangan Gambar 8 : 1. Judul Aplikasi
2. Menu Beranda 3. Daftar SMA
4. Daftar SMK 5. Kontak Kami
6. Pencarian 7.
Login User Name
8.
Login Password
9.
List
Daftar SMA atau SMK di Kota Salatiga Untuk halaman Daftar SMA dan SMK pada prinsipnya sama, hanya tampilan
daftarnya saja yang berbeda, untuk halaman Daftar SMA akan diberikan
list
daftar SMA di Kota Salatiga. Sedangkan untuk halaman Daftar SMK akan diberikan
list
daftar SMK di Kota Salatiga. Nomer 9 merupakan
field
untuk menampilkan daftar SMA atau SMK di Kota Salatiga, yaitu berupa nama sekolah, dan keterangan awal
tentang SMA dan SMK. Tampilan Halaman Profile Sekolah
Gambar 9 Desain Halaman Profile Sekolah
Keterangan Gambar 9 :
1. Judul Aplikasi 2. Menu Beranda
3. Daftar SMA 4. Daftar SMK
5. Kontak Kami 6. Pencarian
7.
Login User Name
8.
Login Password
9. Tampilan Map
Google Earth
Peta Lokasi SMA dan SMK. 10. Tampilan Animasi Panorama Sekolah.
11. Keterangan Sekolah. Pada gambar 9 merupakan tampilan profile sekolah, yang berisi peta lokasi
sekolah nomer 9, tampilan animasi Panorama sekolah nomer 10, dan keterangan mengenai sekolah nomer 11.
1
2 3
4 5
6
7
7 8
9
10 11
10
4. Hasil dan Pembahasan Halaman