BAB III ANALISIS DAN PERANCANGAN
III.1. Analisis Sistem Tahap analisis sistem yang berjalan ini bertujuan untuk mencari informasi mengenai sistem yang lama guna mendapatkan bahan evaluasi untuk pengembangan pada sistem yang akan dirancang. Dengan adanya bahan evaluasi sistem yang lama, maka diharapkan agar pembangunan aplikasi yang baru akan dilakukan dapat terbentuk dengan lebih baik daripada sistem sebelumnya. Analisis yang ada pada tahap analisis sistem yang sedang berjalan ini tiga jenis analisis, yaitu meliputi analisis input, analisis process dan analisis output. Melihat kebutuhan akan informasi tentang Letak SMK Negeri dan Swasta yang memiliki jurusan TKJ (Teknik Komputer dan Jaringan) di Kota Medan merupakan hal yang penting bagi masyarakat yang ingin mengetahui letak dari SMK Negeri dan Swasta yang memiliki jurusan TKJ (Teknik Komputer dan Jaringan). Namum kessulitan umum yang dialami oleh masyarakat adalah tidak terdapat informasi yang cukup dan tidak mengenal letak SMK Negeri dan Swasta tersebut. Dalam aplikasi yang dibuat ini akan membantu masyarakat dalam mendapatkan informasi letak SMK Negeri dan Swasta yang memiliki jurusan TKJ (Teknik Komputer dan Jringan) yang ingin diketahui. Menyajikan sebuah peta yang dapat berinteraksi dengan penggunanya sehinggga dapat memberikan informasi yang lebih akurat.
31
32
Dalam analisa yang sedang berjalan adanya pemeriksaan secara terperinci agar masalah dalam keterbatasan sistem yang lama dapat diketahui dengan jelas. Maka dijelaskan bentuk input dari sistem yang sedang berjalan adalah sebagai berikut: Tabel III. Nama-nama Sekolah TKJ No
Nama Sekolah
1.
Methodist-8 medan
2.
SMK SWASTA PANCA BUDI
3.
SMK NEGERI 9 MEDAN
4.
SMK SWASTA TELADAN SUMUT-2
5.
SMK NEGERI 5 MEDAN
6.
SMK 1 Medan Area
7.
SMK SWASTA EKAPRASETYA
8.
SMK SWASTA MARKUS
9.
SMK Swasta Teladan Tembung Medan
Alamat
No Telepon
Jl. Kl yos sudarso 166A Medan Jendral Gatot Subroto Km. 4,5 Medan, Simpang Tanjung, MEDAN SUNGGAL, KOTA MEDAN 20122 Jl. Patriot No. 20 A Medan, Lalang, MEDAN SUNGGAL, KOTA MEDAN 20127 Jl. Pendidikan No. 62 Medan, Cinta Damai, MEDAN HELVETIA, KOTA MEDAN 20126 Jl. Timor No. 36 Medan, Gaharu, MEDAN TIMUR, KOTA MEDAN 20235
(061)82123432
Jl. Gatot Subroto No. 141 Medan, Sei Sikambing B, MEDAN SUNGGAL, KOTA MEDAN 20122 Jl. Eka Prasetya Helvetia, Tanjung Gusta, MEDAN HELVETIA, KOTA MEDAN 20124 Jl. Kapten Muslim No. 226 Medan, HELVETIA TIMUR, MEDAN HELVETIA, KOTA MEDAN 20124 Jalan Pertiwi No. 95 Kec. Medan Tembung Medan
(061)8440208
(061)8456743
(061)8454350
(061)8475913
(061)4523246
(061)8450153
(061)8459970
(061) 7382218
33
10.
SMK-TI Kalam Kudus Medan
11.
SMK SWASTA TELKOM SANDHY PUTRA MEDAN
12.
SMK NEGERI 2 MEDAN
13. SMK SWASTA PARULIAN 1
14. SMK SWASTA-TI ALWASHLIYAH PASAR SENEN
15.
SMK SWASTA MULIA TANJUNG SARI (BM)
16. SMK SWASTA SULTAN ISKANDAR MUDA
17. SMK SWASTA BUDI LUHUR
18 SMK SWASTA BRIGJEN KATAMSO
19 SMK SWASTA ARRAHMAN 1
20 SMK SWASTA SUTAN OLOAN (TI) MEDAN
Jl. Kapten muslim no 114/130 Jl. Letjen Jamin Ginting Km. 11,1 No. 9 C Medan, Simpang Selayang, MEDAN TUNTUNGAN, KOTA MEDAN 20135 Jl. STM No. 12 A Medan, SITI REJO II, MEDAN AMPLAS, KOTA MEDAN 20219 Jl. SM. Raja Gg. Jati I No. 23 Medan, Teladan Barat, MEDAN KOTA, KOTA MEDAN 20217 Pasar Senen No.7 Kp. Baru Medan, Kampung Baru, MEDAN MAIMUN, KOTA MEDAN 20358
(061) 8456531
Jl. Kenanga Sari No. 33 Tanjung Sari Medan, Tanjung Sari, MEDAN SELAYANG, KOTA MEDAN 20132
(061)8217095
Jl. T. Amir Hamzah Lk. Xi Pekan I Sunggal, Sunggal, MEDAN SUNGGAL, KOTA MEDAN 20128 Jl. Gatot Subroto No. 141 Medan, Sei Sikambing B, MEDAN SUNGGAL, KOTA MEDAN 20122 Jl. Sunggal No. 370 Medan, Sunggal, MEDAN SUNGGAL, KOTA MEDAN 20128 JL. H.A.MANAF LUBIS NO 58 MEDAN, TANJUNG GUSTA, MEDAN HELVETIA, KOTA MEDAN 20125 Jl. H.M.Sutan Oloan 1 Medan, Helvetia Timur, MEDAN HELVETIA, KOTA MEDAN 20217
(061)
(061)7865520
(061)7346982
(061)7883282
(061)8457702
(061)8454324
(061)8443151
(061)8450418
(061)8455304
34
III.1.1. Analisis Input Analisis input yang ada pada sistem yang lama, yaitu : 1. Calon Siswa/I
melihat informasi pada brosur yang dibagi-bagi disetiap
Sekolah. 2. Calon Siswa/I mencatat alamat Sekolah tersebut. 3. Calon Siswa/I mengunjungi Sekolah SMK Negeri dan swasta yang memiliki Jurusan TKJ (Teknik Komputer dan Jaringan) di Kota Medan yang mereka ketahui.
III.1.2.Analisis Process Calon Siswa Melihat Brosur Sekolah Iklan Media Televisi Iklan Media Cetak Iklan Brosur Iklan internet
Calon Siswa Menginput Iklan yang ada
Calon Siswa Mengunjungi Sekolah TKJ
Gambar III.1. Activity Diagram Proses Analisis III.1.3.Analisis Output Analisis output untuk rangkaian kerja pada kegiatan mencari Sekolah SMK Negeri dan Swasta yang memiliki jurusan TKJ (Teknik Komputer dan Jaringan) di Kota Medan yang lama yaitu, setelah calon Siswa/I melihat brosur dan mengunjungi Sekolah yang di inginkan maka calon Siswa akan menerima Fasilitas yang diberikan pada sekolah tersebut.
35
III.2. Evaluasi Sistem yang Berjalan Sistem yang sedang berjalan memiliki beberapa kelemahan dan kelebihan yang dijabarkan sebagai berikut: Kelemahan: 1.
Sistem yang dibuat masih sangat sederhana.
2.
Sistem yang dirancang masih kurang mendetail.
3.
Sistem yang dibuat belum bisa dioperasikan secara online.
Kelebihan: 1. Sistem ini mampu memberikan Informasi Letak SMK Negeri dan Swasta yang memiliki Jurusan TKJ (Teknik Komputer dan Jaringan) di Kota Medan. 2. User dapat menentukan perjalanan menuju kesuatu tempat dengan mudah menggunakan sarana transportasi umum yang ada. 3. Aplikasi ini dapat memberi tampilan informasi yang user inginkan sehingga memudahkan user untuk mengoprasikannya dan dengan mudah menyerap informasi yang dihasilkan. III.3. Desain Sistem Desain sistem pada penelitian ini dibagi menjadi dua desain, yaitu desain sistem secara global untuk penggambaran model sistem secara garis besar dan desain sistem secara detail untuk membantu dalam pembuatan sistem.
III.3.1. Desain Sistem Secara Global Desain sistem secara global menggunakan bahasa pemodelan UML yang terdiri dari Usecase Diagram, Activity Diagram, Class Diagram, dan Sequence
36
Diagram, Database menggunakan MySQL, Bahasa Program menggunakan Php dan Design peta menggunakan QuantunGIS.
III.3.1.1.Usecase Diagram Secara garis besar, bisnis proses sistem yang akan dirancang digambarkan dengan usecase diagram yang terdapat pada Gambar III.2 : Sistem Informasi Geografis SMK TKJ <extends> Data Sekolah
Login
<extends> <extends>
<extends> Data Penanda
Profil
Olah Blog
Logout Admin
Melihat Peta Sekolah Beranda Sekolah
komentar
user User
Gambar III.2.Usecase Diagram Sistem
III.3.1.2. Activity Diagram Bisnis proses yang telah digambarkan pada usecase diagram diatas dijabarkan dengan activity diagram : 1.
Activity Diagram Melihat Peta Aktivitas melihat peta diterangkan dalam langkah-langkah state, dimulai dari
kegiatan melihat panel peta kemudian mencari lokasi Sekolah, selanjutnya
37
menekan tombol atau kode yang ada pada peta dan yang terakhir melihat informasi yang di sajikan dalam peta yang ditunjukkan pada gambar III.3 :
Melihat Peta Sekolah
Melihat salah satu lokasi Sekolah
Menekan tanda Sekolah pada peta
Melihat Informasi lokasi Sekolah
Gambar III.3.Activity Diagram Melihat Peta
2.
Activity Diagram Login Admin Aktvitas proses login admin diterangkan dalam langkah-langkah state,
dimulai dari memasukkan username, memasukkan password, jika akun valid maka mengaktifkan menu administrator, sedangkan jika tidak valid, maka tampilkan pesan kesalahan yang ditunjukkan pada gambar III.4:
38
Memasukkan Username Form Login
Masukkan User name dan password Memasukkan Password
Valid
Aktifkan Menu Administrator
Invalid
Menampilkan Pesan Error
Gambar III.4. Activity Diagram Login Admin
3.
Activity Diagram Mengolah Data sekolah Aktivitas proses mengolah data Sekolah diterangkan dalam langkah-langkah
state yang ditunjukan pada gambar III.5 :
Memilih Aksi Pada from Sekolah Pencarian
Memilih pencarian
Mengetik kata kunci
Menekan enter
Tambah
Mengisi data
Edit
Memilih data
Menekan tombol simpan
Menyimpan data
Mengubah data
Menyimpan data
Komfirmasi penghapusan
Menghapus data
Hapus
Memilih data Tidak
Ya
Gambar III.5. Activity Diagram Mengolah Data Sekolah
39
4.
Activity Diagram Mengolah Data Penanda Aktvitas proses mengolah data penanda diterangkan dalam langkah-langkah
state yang ditunjukkan pada gambar III.6 : Memilih Aksi Pada from penanda Sekolah Pencarian
Memilih pencarian
Mengetik kata kunci
Menekan enter
Tambah Mengisi data penanda
Edit
Mengisi data penanda
Menekan tombol Tambah
Menyimpan data
Mengubah info
Menyimpan data
Hapus Mengisi data penanda
Komfirmasi penghapusan
Menghapus data
Ya
Tidak
Gambar III.6. Activity Diagram Mengolah Data Penanda 5.
Activity Diagram Mengolah Data Blog Aktvitas proses mengolah data konten diterangkan dalam langkah-langkah
state yang ditunjukkan pada gambar III.7 : Memilih Aksi Pada from blog Sekolah Pencarian
Memilih pencarian
Mengetik kata kunci
Menekan enter
Tambah
Mengisi data
Edit
Memilih data
Menekan tombol simpan
Menyimpan data
Mengubah data
Menyimpan data
Komfirmasi penghapusan
Menghapus data
Hapus
Memilih data Tidak
Ya
Gambar III.7. Activity Diagram Mengolah Data Blog
40
6.
Activity Diagram Mengolah Data Akun Aktvitas proses mengolah data akun diterangkan dalam langkah-langkah state
yang ditunjukkan pada gambar III.8 :
Mengisi Data User
Mengisi Data NamaUser
Mengisi data Password Lama
Mengisi Data Password Baru
Gambar III.8. Activity Diagram Mengolah Data Akun
7.
Activity Diagram Keluar Aktvitas proses keluar diterangkan dalam langkah-langkah state yang
ditunjukkan pada gambar III.9 :
Menekan Tombol Logout
Men-disable Menu Admin
Meng-enable Tombol Login
Gambar III.9. Activity Diagram Keluar
41
III.3.1.3. Class Diagram Rancangan kelas-kelas yang akan digunakan pada sistem yang akan dirancang dapat dilihat pada gambar III.10 : Jalan
Komentar
+ kode_jalan +nama_jalan +Tipe_jalan +Lon +Lat
+ kode_Komentar +nama +Email +Tanggal +Pesan
+Jalan -InitComponent() +Main(String agrs[])
+Komentar -InitComponent() +Main(String agrs[])
Sekolah + kode_tempat +nama_Sekolah +Nama_kasek +Alamat +Telepon +Gambar +Lon +Lat +Keterangan +Sekolah -InitComponent() +Main(String agrs[])
Using
Using
Connection
Using
ConnectionManager() Using
Konten
Using
User
+ kode_Konten +Tanggal +Terbit +Judul +Isi +Thumbnail +Tag
+ Id_User +Username +Password +Nama
+Konten -InitComponent() +Main(String agrs[])
Gambar III.10. Class Diagram Sistem
+User -InitComponent() +LoginAction(Evt) +ResetAction(Evt)
42
III.3.1.4. Sequence Diagram Rangkaian kegiatan pada setiap terjadi event sistem digambarkan pada sequence diagram berikut: 1.
Sequence Diagram pada Form Peta Serangkaian kegiatan saat terjadi event pada form peta dapat dilihat pada
gambar III.11 : Main
GeoToolkit
MapViewer
setVisible(true)
getMap()
getInfo()
renderMap() getLokasi() selectLokasi()
getArah()
selectLokasi()
Gambar III.11. Sequence Diagram Form Peta Kelas Main memanggil pustaka kode geoToolkit untuk mendapatkan peta melalui metode getMap() yang akan di render pada mapViewer dengan menambahkan informasi yang diambil dari basis data yang tersedia.
2.
Sequence Diagram pada Form Login Serangkaian kegiatan saat terjadi event pada form login dapat dilihat pada
gambar III.12 :
43
Main
loginManager
adminModel
setVisible(true)
Select()
loginAction()
Gambar III.12. Sequence Diagram Form Login
Kelas Main memanggil objek loginManager yang akan mencari data yang diinput-kan oleh user dari objek adminModel. Jika data ada, maka objek loginManager akan mengeksekusi metode loginAction(). 3.
Sequence Diagram pada Form Data Penanda Serangkaian kegiatan saat terjadi event pada form Data Penanda dapat dilihat
pada gambar III.13 :
44
Main
PenandaManager
PenandaController
PenandaModel
setVisible(true) SelectAll() updateTableModel() getFormValue() Insert(info) insertRow(Penanda)
getFormValue() update(Penanda)
updateRow(Penanda)
getFormValue() delete(Penanda) deleteSelectedRow()
Gambar III.13. Sequence Diagram Form Data Penanda Kelas Main bertindak sebagai pemicu pada tampilan data penanda, saat objek Penanda Manager dibentuk, kelas Penanda Manager akan meminta objek Penanda Controller untuk memperbaharui TableModel yang ada pada objek Penanda Manager, secara sekuensial objek Penanda Controller akan memanggil methodselectAll() dari objek PenandaModel. Saat objek Penanda Manager menangani kejadian penambahan baris dari methodinsertRow(), objek Penanda Controller akan mengambil nilai yang diinputkan pengguna lewat metode getFormValue(), yang selanjutnya akan diproses dalam metode insert() oleh objek Penanda Model. Saat objek Penanda Manager mengalami kejadian updateRow(),
45
kelas Penanda Controller() juga akan mengambil nilai yang dimasukkan pengguna melalui metode getFormValue() yang selanjutnya ditransfer ke objek Penanda Model dengan metode update(). Operasi terakhir yaitu untuk kejadian deleteSelectedRow(), objek Penanda Controller akan mengambil nilai kunci dari form dan menghapus data melalui methodedelete dari objek Penanda Model.
4.
Sequence Diagram pada Form Data Konten Serangkaian kegiatan saat terjadi event pada form Data Konten dapat dilihat
pada gambar III.14 : Main
KontenManager
KontenController
KonteniModel
setVisible(true) SelectAll() updateTableModel() getFormValue() Insert(konten) insertRow(konten)
getFormValue() update(konten)
updateRow(konten)
getFormValue() delete(konten) deleteSelectedRow()
Gambar III.14. Sequence Diagram Form Data Konten
46
Kelas Main bertindak sebagai pemicu pada tampilan Konten, saat objek KontenManager
dibentuk,
kelas
KontenManager
akan
meminta
objek
KontenController untuk memperbaharui TableModel yang ada pada objek KontenManager, secara sekuensial objek KontenController akan memanggil methodselectAll() dari objek KontenModel. Saat objek KontenManager menangani
kejadian
penambahan
baris
dari
methodinsertRow(),
objek
KontenController akan mengambil nilai yang diinputkan pengguna lewat metode getFormValue(), yang selanjutnya akan diproses dalam metode insert() oleh objek KontenModel. Saat objek KontenManager mengalami kejadian updateRow(), kelas KontenController() juga akan mengambil nilai yang dimasukkan pengguna melalui
metode
getFormValue()
yang
selanjutnya
ditransfer
ke
objek
KontenModel dengan metode update(). Operasi terakhir yaitu untuk kejadian deleteSelectedRow(), objek KontenController akan mengambil nilai kunci dari form dan menghapus data melalui methodedelete dari objek KontenModel.
5.
Sequence Diagram pada Form Pengaturan Akun Serangkaian kegiatan saat terjadi event pada form Pengaturan Akun dapat
dilihat pada gambar III.15 :
47
Main
AkunManager
AkunController
AkunModel
setVisible(true) SelectAll() updateTableModel() getFormValue() Insert(akun)
getFormValue() update(akun)
updateRow(akun)
getFormValue() delete(akun) deleteSelectedRow()
Gambar III.15. Sequence Diagram Form Akun Kelas Main bertindak sebagai pemicu pada tampilan Akun, saat objek AkunManager dibentuk, kelas AkunManager akan meminta objek AkunController untuk memperbaharui TableModel yang ada pada objek AkunManager, secara sekuensial objek AkunController akan memanggil methodselectAll() dari objek AkunModel. Saat objek AkunManager menangani kejadian penambahan baris dari methodinsertRow(), objek AkunController akan mengambil nilai yang diinputkan pengguna lewat metode getFormValue(), yang selanjutnya akan diproses dalam metode insert() oleh objek AkunModel. Saat objek AkunManager mengalami kejadian updateRow(), kelas AkunController() juga akan mengambil
48
nilai yang dimasukkan pengguna melalui metode getFormValue() yang selanjutnya ditransfer ke objek AkunModel dengan metode update(). Operasi terakhir yaitu untuk kejadian deleteSelectedRow(), objek AkunController akan mengambil nilai kunci dari form dan menghapus data melalui methodedelete dari objek AkunModel. 6.
Sequence Diagram pada Form Pengaturan Akun Serangkaian kegiatan saat terjadi event pada form Pengaturan Akun dapat
dilihat pada gambar III.16 : Main
AkunManager
AkunController
AkunModel
setVisible(true) SelectAll() updateTableModel() getFormValue() Insert(akun)
getFormValue() update(akun)
updateRow(akun)
getFormValue() delete(akun) deleteSelectedRow()
Gambar III.16. Sequence Diagram Form Akun
49
Kelas Main bertindak sebagai pemicu pada tampilan Akun, saat objek Akun Manager dibentuk, kelas Akun Manager akan meminta objek Akun Controller untuk memperbaharui TableModel yang ada pada objek Akun Manager, secara sekuensial objek Akun Controller akan memanggil methodselectAll() dari objek AkunModel. Saat objek Akun Manager menangani kejadian penambahan baris dari methodinsertRow(), objek Akun Controller akan mengambil nilai yang diinputkan pengguna lewat metode getFormValue(), yang selanjutnya akan diproses dalam metode insert() oleh objek Akun Model. Saat objek Akun Manager mengalami kejadian updateRow(), kelas Akun Controller() juga akan mengambil nilai yang dimasukkan pengguna melalui metode getFormValue() yang selanjutnya ditransfer ke objek Akun Model dengan metode update(). Operasi terakhir yaitu untuk kejadian deleteSelectedRow(), objek Akun Controller akan mengambil nilai kunci dari form dan menghapus data melalui methodedelete dari objek Akun Model.
7.
Sequence Diagram pada Form Pencarian Data Sekolah Serangkaian kegiatan saat terjadi event pada pencarian data sekolah yang
dilakukan oleh user dapat dilihat pada gambar III.17 : Main
SekolahManager
SekolahController
model
SetVisible(True)
Connection()
Searchdata Sekolah Select() getdatasekolah
Gambar III.17. Sequence Diagram Pencarian Data Sekolah
50
Kelas Main bertindak sebagai pemicu pada tampilan pencarian data Sekolah, saat objek SekolahManager dibentuk, kelas SekolahManager akan meminta objek SekolahController untuk memperbaharui TableModel yang ada pada objek SekolahManager, secara sekuensial objek SekolahController akan memanggil data yang di cari dari objek SekolahManager, kemudian SekolahController akan mengirim data kepada SekolahModel. 8.
Sequence Diagram pada Form Pencarian Data Penanda Serangkaian kegiatan saat terjadi event pada pencarian data penanda yang
dilakukan oleh user dapat dilihat pada gambar III.18 : Main
PenandaManager
PenandaController
PenandaModel
setVisible(true)
searchdataPenanda() Connection () Selectl() getdatapenanda()
Gambar III.18. Sequence Diagram Pencarian Data Penanda Kelas Main bertindak sebagai pemicu pada tampilan pencarian data penanda, saat objek PenandaManager dibentuk, kelas PenandaManager akan meminta objek PenandaController untuk memperbaharui TableModel yang ada pada objek PenandaManager, secara sekuensial objek PenandaController akan memanggil data yang dicari dari objek PenandaManager, kemudian PenandaController akan mengirim data kepada PenandaModel.
51
9.
Sequence Diagram pada Form Pencarian Data Konten Serangkaian kegiatan saat terjadi event pada pencarian data Konten yang
dilakukan oleh user dapat dilihat pada gambar III.19 : Main
KontenManager
KontenController
KontenModel
setVisible(true)
searchdataKonten() Connection () Selectl() getdatakonten()
Gambar III.19. Sequence Diagram Pencarian Data Konten Kelas Main bertindak sebagai pemicu pada tampilan pencarian data Konten, saat objek KontenManager dibentuk, kelas KontenManager akan meminta objek KontenController untuk memperbaharui TableModel yang ada pada objek KontenManager, secara sekuensial objek KontenController akan memanggil data yang dicari dari objek KontenManager, kemudian KontenController akan mengirim data kepada KontenModel.
III.3.2. Desain Sistem Secara Detail Tahap perancangan berikutnya yaitu desain sistem secara detail yang meliputi desain output sistem, desain input sistem, dan desain database.
III.3.2.1. Desain Output Berikut ini adalah rancangan tampilan desain peta yang akan dihasilkan oleh sistem:
52
HEADER ATAS HOME
Peta SMK
Guest Book
Admin
Tampilan Blog ( Informasi)
Menu Website
Gambar III.20. Desain Tampilan Menu Home Untuk User
HEADER ATAS Menu Web
Cari sekolah
Nama Sekolah
PETA
SMK Teladam Sumut Eka Prasetya Panca Budi Markus Kalam Kudus SMK Negeri 5 SMK Negeri 9 SMK Medan Area Teladan Medan Methodist-8
Gambar III.21. Desain Tampilan Peta Untuk User
53
HEADER ATAS HOME
Peta SMK
Guest Book
Admin
Nama Menu Website
Email Pesan
Kirim
Reset
Tampilan Pesan (komentar)
Gambar III.24 Hasil Output Dari Form Data Jaco
Gambar III.22. Desain Tampilan Menu Guest Book User
III.3.2.2. Desain Input Berikut ini adalah rancangan atau desain input sebagai antarmuka pengguna: 1.
Desain Form Login Desain form Login dapat dilihat pada gambar III.23
Gambar III.23. Desain Form Input Login untuk Admin
2.
Desain Form Data Sekolah Desain form Data Sekolah dapat dilihat pada gambar III.24 :
54
HEADER ATAS Nama Sekolah Nama Kepala sekolah Alamat
Telepon Gambar Sekolah Longitudinal
Ambil Lot/Lat Peta
Latitude keterangan
Tambah
Reset
Gambar III.24. Desain Form Input Data Sekolah
3.
Desain Form Data Konten Desain form Data Konten dapat dilihat pada gambar III.25 : HEADER ATAS Judul
4.
:
Terbit :
Gambar :
Gambar III.29 Desain Form input Data Konten Desain Form Pengaturan Akun Desain form Pengaturan Akun dapat dilihat pada gambar III.30 :
Tambah
Reset
Gambar III.25. Desain Data Konten
55
Form Pengaturan Akun Username Nama Administrator Passwor Lama Passwor Baru Ubah
Reset
Gambar III.26. Desain Form Input Pengaturan Akun
III.3.2.3.Desain Basis Data Desain basis data terdiri dari tahap merancang kamus data, melakukan normalisasi tabel, merancang struktur tabel, dan membangun EntityRelationship Diagram (ERD). III.3.2.3.1. Kamus Data Kamus data merupakan sebuah daftar yang terorganisasi dari elemen data yang berhubungan dengan sistem, dengan definisi yang tepat dan teliti sehingga pemakai dan analis sistem akan memiliki pemahaman yang umum mengenai input, output, dan komponen penyimpan. Dalam perancangan Sistem Informasi Geografis SMK Negeri dan Swasta yang memiliki Jurusan TKJ di Kota Medan berbasis Web, Record tersimpan dalam beberapa file dengan arsitektur data sebagai berikut :
56
1. Tabel Data User Tabel User ini untuk menampung record data admin name dan password administrator. Berikut tampilan rancangan struktur data tersebut Nama Database
: Alexander_gis_smktkj
Nama Tabel
: User
Primary Key
: Id
Tabel III.1. User File Name
Type Field
Width
Keterangan
User
Varcar
10
User Name
Password
Varcar
10
Password
2. Tabel Sekolah Tabel GIS ini untuk menampung record data Informasi Geografis SMK Negeri dan Swasta yang memiliki Jurusan TKJ (Teknik Komputer dan Jaringan), Berikut tampilan rancangan struktur data tersebut. Nama Database
: alexander_gis_smktkj
Nama Table
: sekolah
Filed Key
: id
57
Table III.2. Sekolah Filed Name
Type Filed
Width
Keterangan
kode_tempat
Int
5
ID
Nama_sekolah
varchar
25
Keterangan
Nama_kasek
varchar
25
Keterangan
alamat
Varchar
100
Lokasi
telepon
varchar
12
Keterangan
gambar
Varchar
30
Keterangan
Lon
double
-
Koordinat X
Lat
double
-
Koordinat Y
keterangan
text
-
Keterangan
3. Tabel Berita Tabel berita ini untuk menampung semua data yang ada di tampilan Menu Home. Berikut ditampilkan rancangan data tersebut. Nama Database
: alexander_gis_smktkj
Nama Tabel
: konten
Tabel III.3. Berita Filed Name Kode_konten
Type Filed Int
Width
Keterangan
11
_
58
tanggal
timestamp
-
_
terbit
varchar
6
_
judul
Varchar
25
_
Isi
text
-
_
thumbnail
varchar
25
_
Tag
varchar
30
-
4. Tabel Komentar Table Komentar ini untuk menampung seluruh komentar data informasi yang ada di menu utama, Berikut ditampilan rancangan struktur data tersebut. Nama Database
: alexander_gis_smktkj
Nama Table
: komentar
Table III.4. Komentar Filed Name
Type Filed
Width
Keterangan
Kode_komentar
int
5
_
nama
Varchar
25
_
Emai
Varchar
25
_
tanggal
detetime
-
-
pesan
text
-
-
59
5. Table Jalan Tabel jalan ini untuk menampung record data informasi mengenai jalanjalan yang ada di Menu Utama, Berikut ini di tampilkan rancangan struktur data tersebut. Nama Database
: alexander_gis_smktkj
Nama Tabel
: jalan
Tabel III.5 Jalan Filed Name
Type Filed
Width
Keterangan
Kode_jalan
int
5
-
Nama_jalan
Varchar
30
-
Tipe_jalan
Varchar
10
-
Lon
double
-
-
Lat
double
-
-
III.3.2.3.2. ERD (EntityRelationship Diagram) Tahap selanjutnya pada penelitian ini yaitu merancang ERD untuk mengetahui hubungan antar tabel yang telah didesain sebelumnya, ERD tersebut dapat dilihat pada gambar III.27 :
60
Kode_Tempa t
Kode_Konte n
Nama_Sekola h
Tanggal
Nama_Kasek Terbit Alamat judul Telepon
Sekolah
Memilik i
Konten isi
Gambar thumbnail Lon tag Lat Memilik i
Kode_Komentar
Nama
Email
Komentar
Tanggal Pesan
Gambar III.27. Diagram ERD
III.3.2.4. Logika/Algoritma Program Logika atau algoritma program pada penelitian ini menggunakan algoritma tipe deskriptif. Algoritma yang akan dibuat dapat dipahami dengan langkahlangkah deskripsi sebagai berikut: 1. Mengakses otoritas sistem: 1.1. Memasukan nama pengguna.
61
1.2. Memasukan kata sandi. 1.3. Menekan tombol "Login". 1.4. Jika otoritas valid maka mengaktifkan menu administrator. 1.5. Jika tidak valid maka menampilkan pesan peringatan. 2. Mengolah Data Admin: 2.1. Menekan menu Pengaturan Akun. 2.2. Mengubah data Admin: 2.2.1. Mengubah atribut Username. 2.2.2. Mengubah atribut Nama Administrator. 2.2.3. Mengubah atribut Password. 2.2.4. Menekan tombol "Ubah". 3. Mengolah Data Sekolah: 3.1. Menekan menu data Sekolah 3.2. Mencari data Akun: 3.2.1. Memilih pencarian berdaisarkan kolom yang terseda. 3.2.2. Mengetik kata kunci pencarian pada komponen pencarian.
3.3. Menambah data Sekolah : 3.3.1. Mengisi atribut Nama Sekolah 3.3.2. Mengisi atribut Nama Kepala Sekolah 3.3.3. Mengisi atribut Alamat 3.3.4. Mengisi atribut Telepon 3.3.5. Memasukan gambar
62
3.3.6. Mengisi atribut Longitudinal 3.3.7. Mengisi atribut Latitude 3.3.8. Mengisi keterangan 3.3.9. Menekan tombol "Tambah". 3.4. Mengubah data Sekolah : 3.4.1. Memilih baris data Sekolah yang akan diubah pada tabel sekolah. 3.4.2. Mengisi atribut Nama Sekolah 3.4.3. Mengisi atribut Telepon 3.4.4. Mengisi atribut Alamat 3.4.5. Menekan tombol "Simpan". 3.5. Menghapus data Sekolah : 3.5.1. Memilih baris data Sekolah yang akan dihapus pada komponen tabel sekolah. 3.5.2. Memilih konfirmasi dari "Confirmation Dialog". 3.5.3. Jika menekan "Yes" maka hapus data Akun yang terpilih. 3.5.4. Jika menekan "No" maka membatalkan proses penghapusan data Akun yang terpilih. 4. Mengolah Data Komentar : 4.1. Menekan menu komentar 4.2. Mencari data komentar: 4.2.1. Memilih pencarian berdasarkan kolom yang tersedia. 4.2.2. Mengetik kata kunci pencarian pada komponen pencarian.
63
4.3. Menambah data komentar: 4.3.1. Mengisi atribut Nama. 4.3.2. Mengisi atribut Email. 4.3.3. Mengisi atribut Pesan 4.3.4. Menekan tombol "Tambah". 4.4. Menghapus data komentar: 4.4.1. Memilih baris data komentar yang akan dihapus 4.4.2. Memilih konfirmasi dari "Confirmation Dialog". 4.4.3. Jika menekan "Yes" maka hapus data Akun yang terpilih. 4.4.4. Jika menekan "No" maka membatalkan proses penghapusan data Akun yang terpilih. 5. Mengolah Data Konten: 5.1. Menekan menu data Konten. 5.2. Mencari data Konten: 5.2.1. Memilih pencarian berdasarkan kolom yang terseda. 5.2.2. Mengetik kata kunci pencarian pada komponen pencarian. 5.3. Menambah data Konten: 5.3.1. Mengisi atribut Judul 5.3.2. Mengisi atribut Terbit. 5.3.3. Mengisi atribut Isi Halaman. 5.3.4. Mengisi atribut Thumbnail 5.3.5. Menekan tombol "Tambah". 5.4. Mengubah data Konten:
64
5.4.1. Memilih baris data Konten yang akan diubah pada tabel Konten. 5.4.2. Mengubah atribut Judul 5.4.3. Mengubah atribut Terbit. 5.4.4. Mengubah atribut Isi Halaman. 5.4.5. Mengubah atribut Thumbnail 5.4.6. Menekan tombol "Simpan". 5.5. Menghapus data Konten: 5.5.1. Memilih baris data Konten yang akan dihapus pada komponen tabel Konten. 5.5.2. Memilih konfirmasi dari "Confirmation Dialog". 5.5.3. Jika menekan "Yes" maka hapus data Konten yang terpilih. 5.5.4. Jika menekan "No" maka membatalkan proses penghapusan data