BAB 3 PERANCANGAN SISTEM. 3.1 Mendefenisikan Web dalam Macromedia Dreamweaver 8

Transkripsi

1 BAB 3 PERANCANGAN SISTEM 3.1 Mendefenisikan Web dalam Macromedia Dreamweaver 8 Sebelum membangun web yang akan kita buat, pertama kali yang dilakukan adalah file tersusun rapi dan terkumpul dalam satu dokumen maka dapat didefenisikan menjadi sebuah web. Macromedia Dreamweaver 8 memberikan kemudahan bagi kita dalam manajemen file yang digunakan dalam membuat halaman web. Untuk itu kita perlu mendefenisikan sebuah web proyek yang baru kepada ruang kerja Macromedia Dreamweaver 8. Untuk mendefinisikan web baru, klik menu Site pilih Manage Site seperti pada gambar di bawah ini : Gambar 3.1 Tampilan Kotak dialog Manage Sites

2 24 Setelah itu klik New pilih Site untuk menampilkan window yang berisi pengaturan site yang akan dibuat. Pilih tab Advance lalu Category kemudian pilih lokal info untuk mengatur folder-folder tempat file yang akan digunakan dalam membuat halaman web. Berikut ini adalah penjelasannya : 1. Pada isian Site name, isikan nama proyek web yang akan kita buat. Pada tugas akhir saya ini, saya memberi nama tktb. 2. Local Root folder merupakan folder utama proyek ini. Beri centang pada Refresh local file automatically agar file terbaru muncul di Macromedia Dreamweaver 8. Gambar 3.2 Tampilan Window Site Definition 3. Default Image folder merupakan folder tempat file-file gambar disimpan. Default Image folder harus berada didalam Local Root folder. 4. Jika kita telah memiliki domain, isikan alamat domain kita dengan HTTP address agar semua link yang ada pada halaman web selalu diperiksa. 5. Enable cache memungkinkan Dreamweaver menggunakan temporary file ketika kita mencoba halaman web yang dibuat (Preview in Browser) pada browser

3 25 dikomputer lokal. Fungsinya untuk mempercepat proses pengeksekusian file ke browser Merancang File Gambar Utama File ini merupakan materi utama yang digunakan dalam mengaplikasikan sebuah website sebagai interface terhadap user pada halaman utama website File Halaman Website File halaman website menggunakan bahasa pemrograman PHP sehingga bereksistensi.php, sedangkan MySQL digunakan sebagai tempat penyimpanan databasenya. Berikut ini penjelasan dari file halaman website yaitu : 1. index.php Halaman index.php merupakan penggabungan antara tag-tag HTML dan pemrograman PHP. File ini adalah halaman utama pada website jika browser dijalankan. Didalam tampilan website, file ini diberi nama index. 2. profil.php, izin.php, alur_imb.php, st_org.php, pegawai.php. Halaman-halaman ini merupakan penggabungan antara tag-tag HTML dan pemrograman PHP yang menampilkan tentang profil, tata cara pengurusan Surat Izin Mendirikan Bangunan, alur pengurusan izin, struktur organisasi Dinas Tata Kota Tata bangunan, dan data pegawai. 3. login.php Halaman login.php merupakan penggabungan antara tag-tag HTML, database MySQL dan pemrograman PHP. Halaman ini akan meminta user untuk mengisi username dan password. Jika user dapat mengisikan dengan benar,

4 26 maka akan ditampilkan data-data pribadi Dinas Tata Kota Tata Bangunan yang berisi data pegawai dan data gaji pegawai. 4. berita.php Halaman berita.php merupakan penggabungan antara tag-tag HTML dan pemrograman PHP. Halaman ini menampilkan tentang berita-berita terkini tentang Dinas Tata Kota Tata Bangunan Kota Medan. 3.2 Database Website Dalam penginputan data, data akan disimpan dalam database. Dalam hal ini penulis mengambil MySQL sebagai tempat penyimpanan data pada website ini yang memiliki server tersendiri. Untuk menghasilkan informasi pada website dibutuhkan beberapa tabel data dalam satu database, yaitu : 1. Tabel Login Tabel 3.1 Database takot-tabel login 2. Tabel Pegawai Tabel 3.2 Database takot-tabel pegawai

5 27 3. Tabel Potongan Tabel 3.3 Database takot-tabel potongan 4. Tabel Gaji Tabel 3.4 Database takot-tabel gaji 3.3 Membangun Halaman Situs Web Website Dinas Tata Kota Tata Bangunan Kota Medan dirancang atas kebutuhan informasi dari tiap pengunjung. Berikut ini adalah halaman-halaman website Dinas Tata Kota Tata Bangunan Kota Medan yang dirancang penulis agar pengunjung dapat menerima informasi yang disajikan.

6 28 HOME IZIN DOWNLOAD FILE PEGAWAI INDEX LOGINS POTONGAN PEGAWAI GAJI STRUKTUR ORGANISASI ALUR URUS IMB Gambar 3.3 Rancangan halaman web 1. Halaman Index Merupakan halaman utama yang pertama kali diakses saat situs dibuka. Halaman Index beisi foto dan alamat dari Dinas Tata Kota Tata Bangunan. 2. Halaman Home Merupakan halaman mengenai profil dari Dinas Tata Kota Tata Bangunan.. 3. Halaman Izin Merupakan halaman yang berisi tata cara, syarat, peraturan daerah dan informasi lain dalam mengurus Surat Izin Mendirikan Bangunan di instansi tersebut.

7 29 4. Halaman Download File Merupakan links yang yang berfungsi untuk mendownload file atau tulisan pada tiap halaman. 5. Halaman Pegawai Merupakan halaman yang berisikan tentangg data pegawai pada Dinas Tata Kota Tata Bangunan. Namun data tersebut hanya dapat di baca oleh pengunjung website. 6. Halaman Struktur Organisasi Merupakan halaman yang berisikan struktur jabatan di Dinas Tata Kota Tata Bangunan Kota Medan. 7. Halaman Alur Urus IMB Merupakan halaman dimana pengunjung dapat mengetahui alur dalam mengurus Surat Izin Mendirikan Bangunan (SIMB). 8. Halaman Logins Merupakan halaman untuk login yang pengunjung harus mengisi username dan password yang bersifat rahasia. Jika berhasil dengan benar mengisi username dan password tersebut, pengunjung dapat mengakses data pribadi Dinas Tata Kota Tata Bangunan Kota Medan. Disini pengunjung dapat menginput, mengedit ataupun menghapus data pegawai, data potongan gaji pegawai dan data gaji pegawai. 9. Halaman Pegawai Merupakan halaman dimana pengunjung situs dapat melihat, memasukkan, mengedit ataupun menghapus data pegawai pada instasi tersebut. Namun sebelum masuk pada halaman ini, pengunjung harus berhasil mengisi username dan password yang bersifat rahasia pada halaman login.

8 Halaman Potongan Merupakan halaman dimana pengunjung situs dapat melihat, memasukkan, mengedit ataupun menghapus data potongan gaji pegawai pada instasi tersebut. Namun sebelum masuk pada halaman ini, pengunjung harus berhasil mengisi username dan password yang bersifat rahasia pada halaman login. 11. Halaman Gaji Merupakan halaman dimana pengunjung situs dapat melihat, memasukkan, mengedit ataupun menghapus data gaji pegawai pada instasi tersebut. Namun sebelum masuk pada halaman ini, pengunjung harus berhasil mengisi username dan password yang bersifat rahasia pada halaman login. 3.4 Flowchart Situs Di dalam web Dinas Tata Kota Tata Bangunan Kota Medan terdapat alur-alur link yang dapat kita gambarkan dalam bentuk flowchart. Di bawah ini adalah bentukbentuk flowchart yang didapat dari web Dinas Tata Kota Tata Bangunan Kota Medan. a. Flowchart Menu Utama Seorang Pengunjung dapat mengakses web Dinas Tata Kota Tata Banguna Kota Medan dan dapat berpindah halaman web menuju halaman lain. Flowchart menu utama dapat dilihat pada gambar dibawah ini:

9 31 Start Tampilkan Web Pilih link pada menu Home A Izin B Download File C Alur IMB D Pegawai E Logins F Struktur Org END Gambar 3.4 Alur Flowchart Menu Utama

10 32 b. Flowchart Administrator Halaman administrator hanya diakses oleh seorang yang berhak mengaksesnya. Data login yang terdiri dari nama dan password dari seorang administrator harus sesuai dengan data yang ada pada tabel administrator. Jika data nama dan password sesuai, maka admin diantarkan menuju tampilan halaman administrator. Jika proses login gagal, maka kembali lagi ke halaman form administrator. Dapat kita lihat gambar flowchart administrator sebagai berikut : F Buka halaman administrator Input Nama & Password Status= administrator Nama atau Password salah Tampilkan hlm. administrator Pegawai A Potongan B Gaji C Gambar 3.5 Alur Flowchart Administrator

11 33 c. Flowchart Pegawai Untuk halaman pegawai saat mengakses halamannya, kita dapat langsung mengisi form isian yang terdapat dalam halaman tersebut. Halaman ini dapat ditemui setelah berhasil login. Flowchart pegawai dapat kita lihat sebagai berikut : A Buka halaman pegawai Halaman isi pegawai Isi form Simpan Simpan db takot Data sudah disimpan Lihat data pegawai logins F Gambar 3.6 Alur Flowchart Pegawai

12 34 d. Flowchart Potongan Gaji Untuk halaman potongan gaji saat mengakses halamannya, kita dapat langsung mengisi form isian yang terdapat dalam halaman tersebut. Halaman ini dapat ditemui setelah berhasil login. Flowchart potongan gaji dapat kita lihat sebagai berikut : B Buka halaman potongan Halaman isi potongan Isi form Simpan Simpan db takot Data sudah disimpan Lihat data potongan logins F Gambar 3.7 Alur Flowchart Potongan Gaji

13 35 e. Flowchart Gaji Untuk halaman gaji saat mengakses halamannya, kita dapat langsung mengisi form isian yang terdapat dalam halaman tersebut. Halaman ini dapat ditemui setelah berhasil login. Flowchart gaji dapat kita lihat sebagai berikut : B Buka halaman gaji Halaman isi gaji Isi form Simpan Simpan db takot Data sudah disimpan Lihat data gaji logins F Gambar 3.8 Alur Flowchart Gaji

14 Tampilan Situs Web Dalam merancang tampilan suatu website, memiliki beberapa faktor yang perlu diperhatikan. Dimana tampilan website ini digunakan sebagai interface terhadap user untuk mempublikasikan suatu institusi ataupun individu kepada khalayak ramai. Hal-hal yang perlu diperhatikan dalam perancangan tampilan website adalah : a. Tata letak perancangan gambar pada website b. Pengaturan layout c. Kombinasi Warna d. Pemilihan jenis huruf dan ukurannya e. Materi yang dipaparkan dalam website Dalam perancangan ini penulis menggunakan warna kecoklatan yang disesuaikan dengan seragam dinas Pegawai Negeri Sipil serta kuning dan dipadukan dengan warna lain untuk memperindah tampilan website. Gambar 3.9 Tampilan Home Dinas Tata Kota Tata Bangunan Kota Medan

15 BAB 4 IMPLEMENTASI SISTEM 4.1 Pengertian Implementasi Sistem Setelah dianalisis dan dirancang secara rinci dan teknologi telah diseleksi dan dipilih. Tiba saatnya, sistem untuk diimplementasikan. Implementasi sistem adalah langkahlangkah atau prosedur-prosedur yang dilakukan dalam menyelesaikan desain sistem yang telah disetujui, untuk menguji, menginstal, dan memulai sistem baru atau sistem yang diperbaiki untuk menggantikan sistem yang lama. Sedangkan tahap implementasi sistem merupakan tahap meletakkan sistem agar sistem dapat siap untuk dioperasikan. Tahap implementasi sistem terdiri dari langkah-langkah sebagai berikut ini : 1. Menerapkan rencana implementasi 2. Melakukan kegiatan implementasi 3. Tindak lanjut implementasi 4.2 Tujuan Implementasi Sistem Adapun tujuan-tujuan dari implementasi sistem, yaitu : 1. Mengkaji rangkaian sistem baik dari segi software maupun hardware sebagai sarana pengolah data dan penyaji informasi.

16 38 2. Menyelesaikan rancangan sistem yang ada dalam dokumen sistem yang baru atau yang telah disetujui. 3. Memastikan bahwa pemakai dapat mengoperasikan dengan mudah terhadap sistem yang baru dan mendapat informasi yang baik dan jelas. 4. Memperhitungkan bahwa sistem telah memenuhi permintaan pemakai yaitu dengan menguji sistem secara menyeluruh. 5. Memastikan bahwa sistem telah berjalan lancar dengan mengontrol dan melalukan instalasi secara benar. 4.3 Komponen Dalam Implementasi Sistem Pada web Dinas Tata Kota Tata Bangunan Kota Medan ini dibutuhkan beberapa komponen utama mencakup hardware (perangkat keras), software (perangkat lunak), dan brainware (perangkat operator). Komponen-komponen itu mempunyai peran yang sangat penting dalam menunjang penerapan sistem yang dirancang terhadap pengolahan data Hardware (Perangkat Keras) Hardware merupakan suatu komponen yang dibutuhkan dalam mewujudkan sistem yang diusulkan. Hardware meliputi : a. Monitor Super VGA. b. CPU (Central Processing Unit). c. Harddisk sebagai tempat sistem beroperasi dan media penyimpanan. d. Memori minimal 128 MB.

17 Software (Perangkat Lunak) Adapun software yang digunakan dalam perancangan web Dinas Tata Kota Tata Bangunan Kota Medan ini meliputi : a. Sistem operasi Windows XP Gambar 4.1 Tampilan sistem operasi Windows XP b. Macromedia Dreamweaver 8 salah satu web editor yang paling inovatif dan lengkap dibandingkan software web editor lain.

18 40 Gambar 4.2 Tampilan Macromedia Dreamweaver 8 c. XAMPP merupakan kumpulan aplikasi yang mencakup apache sebagai web servernya, PHP sebagai bahasa pemrogramannya, dan mysql sebagai tempat penampungan dan penyimpanan databasenya. Dengan menggunakan XAMPP, memudahkan penginstalan ketiga paket aplikasi tersebut tanpa perlu melakukan konfigurasi. Gambar 4.3 Tampilan XAMPP

19 41 d. Web Browser sebagai tempat tampilan halaman web, seperti : Internet Explorer, Mozilla, Netscape Navigator, dan lain-lain Brainware (Perangkat Operator) Brainware adalah sumber daya manusia yang akan berperan sebagai user ataupun administrator sistem. Brainware yang dibutuhkan sebagai administrator nantinya bekerja pada server dalam pengolahan web. Brainware yang dapat menjalankan web Dinas Tata Kota Tata Bangunan Kota Medan terbagi 2 yaitu : a. Administrator Administrator harus mengerti bahasa pemrograman PHP dan MySQL serta mengerti akan jalannya sistem. b. User (Pengunjung) User (Pengunjung) tidak harus memiliki kemampuan khusus hanya mampu mengoperasikan internet browser.

20 BAB 5 KESIMPULAN DAN SARAN 5.1 Kesimpulan Dalam penulisan Tugas Akhir ini telah diuraikan bagaimana perancangan sistem dalam mengaplikasikan web Dinas Tata Kota Tata Bangunan Kota Medan. Oleh karena itu, dapat penulis simpulkan : 1. Sejalan dengan perkembangan internet, banyak sekali situs yang bermunculan maka penulis tertarik untuk membuat Tugas Akhir yang berupa website. 2. Aplikasi web Dinas Tata Kota Tata Bangunan Kota Medan merupakan kumpulan halaman yang dapat mengolah data yang kita inginkan, sehingga isi dan tampilannya dapat berubah sesuai dengan kebutuhan. 3. Website Dinas Tata Kota Tata Bangunan Kota Medan ini adalah sarana informasi online yang dapat diakses oleh siapapun juga. 5.2 Saran 1. Sebaiknya ada partisispasi dari pihak instansi tersebut untuk melanjutkan pembenahan ataupun pengembangan website ini. 2. Meningkatkan pelatihan kepada para pegawai untuk mengoperasikan computer, terutama dalam hal pengembangan website.