BAB III ANALISIS DAN PERANCANGAN

Transkripsi

1 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

2 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 Alamat No Telepon 1. Methodist-8 medan Jl. Kl yos sudarso 166A Medan 2. SMK SWASTA PANCA BUDI Jendral Gatot Subroto Km. 4,5 Medan, Simpang Tanjung, MEDAN SUNGGAL, KOTA MEDAN SMK NEGERI 9 MEDAN Jl. Patriot No. 20 A Medan, Lalang, MEDAN SUNGGAL, KOTA MEDAN SMK SWASTA TELADAN SUMUT-2 Jl. Pendidikan No. 62 Medan, Cinta Damai, MEDAN HELVETIA, KOTA MEDAN SMK NEGERI 5 MEDAN Jl. Timor No. 36 Medan, Gaharu, MEDAN TIMUR, KOTA MEDAN SMK 1 Medan Area Jl. Gatot Subroto No. 141 Medan, Sei Sikambing B, MEDAN SUNGGAL, KOTA MEDAN SMK SWASTA EKAPRASETYA Jl. Eka Prasetya Helvetia, Tanjung Gusta, MEDAN HELVETIA, KOTA MEDAN SMK SWASTA MARKUS Jl. Kapten Muslim No. 226 Medan, HELVETIA TIMUR, MEDAN HELVETIA, KOTA MEDAN SMK Swasta Teladan Tembung Medan Jalan Pertiwi No. 95 Kec. Medan Tembung Medan (061) (061) (061) (061) (061) (061) (061) (061) (061)

3 SMK-TI Kalam Kudus Medan Jl. Kapten muslim no 114/ SMK SWASTA TELKOM SANDHY Jl. Letjen Jamin Ginting Km. 11,1 No. PUTRA MEDAN 9 C Medan, Simpang Selayang, MEDAN TUNTUNGAN, KOTA MEDAN SMK NEGERI 2 MEDAN Jl. STM No. 12 A Medan, SITI REJO II, MEDAN AMPLAS, KOTA MEDAN Jl. SM. Raja Gg. Jati I No. 23 Medan, SMK SWASTA PARULIAN 1 Teladan Barat, MEDAN KOTA, KOTA MEDAN Pasar Senen No.7 Kp. Baru Medan, SMK SWASTA-TI ALWASHLIYAH Kampung Baru, PASAR SENEN MEDAN MAIMUN, KOTA MEDAN SMK SWASTA MULIA TANJUNG SARI (BM) SMK SWASTA SULTAN ISKANDAR MUDA SMK SWASTA BUDI LUHUR SMK SWASTA BRIGJEN KATAMSO SMK SWASTA ARRAHMAN 1 SMK SWASTA SUTAN OLOAN (TI) MEDAN Jl. Kenanga Sari No. 33 Tanjung Sari Medan, Tanjung Sari, MEDAN SELAYANG, KOTA MEDAN Jl. T. Amir Hamzah Lk. Xi Pekan I Sunggal, Sunggal, MEDAN SUNGGAL, KOTA MEDAN Jl. Gatot Subroto No. 141 Medan, Sei Sikambing B, MEDAN SUNGGAL, KOTA MEDAN Jl. Sunggal No. 370 Medan, Sunggal, MEDAN SUNGGAL, KOTA MEDAN JL. H.A.MANAF LUBIS NO 58 MEDAN, TANJUNG GUSTA, MEDAN HELVETIA, KOTA MEDAN Jl. H.M.Sutan Oloan 1 Medan, Helvetia Timur, MEDAN HELVETIA, KOTA MEDAN (061) (061) (061) (061) (061) (061) (061) (061) (061) (061) (061)

4 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.

5 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

6 36 Diagram, Database menggunakan MySQL, Bahasa Program menggunakan Php dan Design peta menggunakan QuantunGIS. III 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 Login <extends> <extends> Data Sekolah <extends> Admin <include> Logout Data Penanda <extends> Olah Blog Profil <include> Melihat Peta Sekolah <include> Beranda Sekolah user komentar User Gambar III.2.Usecase Diagram Sistem III 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

7 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:

8 38 Memasukkan Form Login Username Masukkan Memasukkan User name Password dan password Valid Invalid Aktifkan Menu Administrator 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 Menekan tombol simpan Menyimpan data Edit Memilih data Mengubah data Menyimpan data Hapus Memilih data Komfirmasi penghapusan Menghapus data Tidak Ya Gambar III.5. Activity Diagram Mengolah Data Sekolah

9 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 Menekan tombol Tambah Menyimpan data Edit Mengisi data penanda Mengubah info Menyimpan data Hapus Mengisi data penanda Komfirmasi penghapusan Menghapus data Tidak Ya 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 Menekan tombol simpan Menyimpan data Edit Memilih data Mengubah data Menyimpan data Hapus Memilih data Komfirmasi penghapusan Menghapus data Tidak Ya Gambar III.7. Activity Diagram Mengolah Data Blog

10 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

11 41 III Class Diagram Rancangan kelas-kelas yang akan digunakan pada sistem yang akan dirancang dapat dilihat pada gambar III.10 : Jalan + kode_jalan +nama_jalan +Tipe_jalan +Lon +Lat +Jalan -InitComponent() +Main(String agrs[]) Komentar + kode_komentar +nama + +Tanggal +Pesan +Komentar -InitComponent() +Main(String agrs[]) Using Sekolah + kode_tempat +nama_sekolah +Nama_kasek +Alamat +Telepon +Gambar +Lon +Lat +Keterangan +Sekolah -InitComponent() +Main(String agrs[]) Using Connection Using Using ConnectionManager() Using Konten + kode_konten +Tanggal +Terbit +Judul +Isi +Thumbnail +Tag +Konten -InitComponent() +Main(String agrs[]) Gambar III.10. Class Diagram Sistem User + Id_User +Username +Password +Nama +User -InitComponent() +LoginAction(Evt) +ResetAction(Evt)

12 42 III 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 :

13 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 :

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

15 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

16 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 :

17 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

18 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

19 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

20 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) Connection () searchdatapenanda() 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.

21 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) Connection () searchdatakonten() 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 Desain Output sistem: Berikut ini adalah rancangan tampilan desain peta yang akan dihasilkan oleh

22 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 Nama Sekolah Cari sekolah Menu Web 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

23 53 HEADER ATAS HOME Peta SMK Guest Book Admin Nama Menu Website 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 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 :

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 : Terbit : Gambar : Gambar III.29 Desain Form input Data Konten 4. Desain Form Pengaturan Akun Desain form Pengaturan Akun dapat dilihat pada gambar III.30 : Tambah Reset Gambar III.25. Desain Data Konten

25 55 Form Pengaturan Akun Username Nama Administrator Passwor Lama Passwor Baru Ubah Reset Gambar III.26. Desain Form Input Pengaturan Akun III Desain Basis Data Desain basis data terdiri dari tahap merancang kamus data, melakukan normalisasi tabel, merancang struktur tabel, dan membangun EntityRelationship Diagram (ERD). III 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 :

26 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 Nama Tabel Primary Key : Alexander_gis_smktkj : User : 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 Nama Table Filed Key : alexander_gis_smktkj : sekolah : id

27 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 Nama Tabel : alexander_gis_smktkj : konten Tabel III.3. Berita Filed Name Type Filed Width Keterangan Kode_konten Int 11 _

28 58 tanggal timestamp - _ terbit varchar 6 _ judul Varchar 25 _ Isi text - _ thumbnail varchar 25 _ Tag varchar Tabel Komentar Table Komentar ini untuk menampung seluruh komentar data informasi yang ada di menu utama, Berikut ditampilan rancangan struktur data tersebut. Nama Database Nama Table : alexander_gis_smktkj : 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 - -

29 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 Nama Tabel : alexander_gis_smktkj : 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 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 :

30 60 Kode_Tempa Nama_Sekola Kode_Konte Nama_Kasek Tanggal Alamat Terbit Telepon Gambar Sekolah Memilik i Konten judul isi Lon thumbnail Lat tag Memilik i Kode_Komentar Nama Komentar Tanggal Pesan Gambar III.27. Diagram ERD III 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.

31 Memasukan kata sandi Menekan tombol "Login" Jika otoritas valid maka mengaktifkan menu administrator Jika tidak valid maka menampilkan pesan peringatan. 2. Mengolah Data Admin: 2.1. Menekan menu Pengaturan Akun Mengubah data Admin: Mengubah atribut Username Mengubah atribut Nama Administrator Mengubah atribut Password Menekan tombol "Ubah". 3. Mengolah Data Sekolah: 3.1. Menekan menu data Sekolah 3.2. Mencari data Akun: Memilih pencarian berdaisarkan kolom yang terseda Mengetik kata kunci pencarian pada komponen pencarian Menambah data Sekolah : Mengisi atribut Nama Sekolah Mengisi atribut Nama Kepala Sekolah Mengisi atribut Alamat Mengisi atribut Telepon Memasukan gambar

32 Mengisi atribut Longitudinal Mengisi atribut Latitude Mengisi keterangan Menekan tombol "Tambah" Mengubah data Sekolah : Memilih baris data Sekolah yang akan diubah pada tabel sekolah Mengisi atribut Nama Sekolah Mengisi atribut Telepon Mengisi atribut Alamat Menekan tombol "Simpan" Menghapus data Sekolah : Memilih baris data Sekolah yang akan dihapus pada komponen tabel sekolah Memilih konfirmasi dari "Confirmation Dialog" Jika menekan "Yes" maka hapus data Akun yang terpilih 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: Memilih pencarian berdasarkan kolom yang tersedia Mengetik kata kunci pencarian pada komponen pencarian.

33 Menambah data komentar: Mengisi atribut Nama Mengisi atribut Mengisi atribut Pesan Menekan tombol "Tambah" Menghapus data komentar: Memilih baris data komentar yang akan dihapus Memilih konfirmasi dari "Confirmation Dialog" Jika menekan "Yes" maka hapus data Akun yang terpilih Jika menekan "No" maka membatalkan proses penghapusan data Akun yang terpilih. 5. Mengolah Data Konten: 5.1. Menekan menu data Konten Mencari data Konten: Memilih pencarian berdasarkan kolom yang terseda Mengetik kata kunci pencarian pada komponen pencarian Menambah data Konten: Mengisi atribut Judul Mengisi atribut Terbit Mengisi atribut Isi Halaman Mengisi atribut Thumbnail Menekan tombol "Tambah" Mengubah data Konten:

34 Memilih baris data Konten yang akan diubah pada tabel Konten Mengubah atribut Judul Mengubah atribut Terbit Mengubah atribut Isi Halaman Mengubah atribut Thumbnail Menekan tombol "Simpan" Menghapus data Konten: Memilih baris data Konten yang akan dihapus pada komponen tabel Konten Memilih konfirmasi dari "Confirmation Dialog" Jika menekan "Yes" maka hapus data Konten yang terpilih Jika menekan "No" maka membatalkan proses penghapusan data