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

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

Universitas Sumatera Utara

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


25

dikomputer lokal. Fungsinya untuk mempercepat proses pengeksekusian file ke browser.

3.1.1

Merancang File Gambar Utama

File ini merupakan materi utama yang digunakan dalam mengaplikasikan sebuah website sebagai interface terhadap user pada halaman utama website.

3.1.2

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,


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


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.


28

HOME

IZIN

INDEX

DOWNLOAD FILE

PEGAWAI

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.


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.


30

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


31

Start

Tampilkan Web

Pilih link pada menu

Home

A

Izin

B

Download File

C

D

Alur IMB

E

Pegawai

F

Logins

END

Struktur Org

Gambar 3.4 Alur Flowchart Menu Utama


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


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


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


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


36

3.5 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


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.


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.

4.3.1

Har dwar e (Per angkat Ker as)

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.


39

4.3.2

Softwar e (Per angkat 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 oper asi Windows XP

b.

Macromedia Dreamweaver 8 salah satu web editor yang paling inovatif dan lengkap dibandingkan software web editor lain.


40

Gambar 4.2 Tampilan Macromedia Dreamweaver 8

c.

XAMPP merupakan kumpulan aplikasi yang mencakup apache sebagai web

server nya, 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


41

Web Browser sebagai tempat tampilan halaman web, seperti : Internet Explorer,

d.

Mozilla, Netscape Navigator, dan lain-lain.

4.3.3

Br ainwar e (Per angkat Oper ator)

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 .


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.


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

Recommend Documents