Irdian Yamin : Aplikasi Cuti Online Di Kopkar Walet Kandatel Medan, 2010.
NIK varchar
10 -
Th2008 Int 12
- Th2009 Int
12 -
Th2010 Int 12
- Besar
Int 45
-
Tabel 4.4 Lama Cuti Field
Tipe Panjang
Keterangan id
int 4
Auto_increment Nama
varchar 200
- Nik
Varchar 10
- Nik_atasan
Varchar 10
- Nik_support Varchar
10 -
Mulai Varchar
20 -
Masuk Varchar
20 -
Lama Char
2 -
Jenis Varchar
20 -
Alamat Varchar
255 -
Alasan Varchar
255 -
Catatan Varchar
255 -
Aktivsi Varchar
20 -
4.6 Design Website
Irdian Yamin : Aplikasi Cuti Online Di Kopkar Walet Kandatel Medan, 2010.
Design web diawali dengan mulai pembuatan halaman intro atau index dan selanjutnya membuat halaman-halaman link yang berhubungan antara halaman web
dengan halaman yang lain.
4.8.1 Mendesign Halaman Intro Website
Dalam pendesaian halaman intro website, penulis menggunakan software Adobe Photoshop CS3 dan Swish. Halaman intro adalah halaman pembuka yang berupa
animasi dan gambar yang dibuat sedemikin rupa agar website terlihat lebih menarik. Gambar yang ditampilkan pada halaman intro.
Adapun tampilan halaman intro website seperti ditunjukan gambar 4.5 sebagai berikut:
Gambar 4.8.1 Design Halaman Intro Website Tahap-tahap yang dilakukan penulis dalam membangun halaman website
adalah sebagai berikut:
Irdian Yamin : Aplikasi Cuti Online Di Kopkar Walet Kandatel Medan, 2010.
1. Membuka Macromedia Dreamweaver MX 2004 sebagai software pengatur letak
layout dan penulisan skrip-skrip PHP dalam membangun halaman. Tampilannya dapat dilihat seperti gambar berikut ini:
Gambar 4.7 Tampilan Macromedia Dreamweaver MX 2004
2. Mengatur letak layout dengan memanfaatkan tool dan perintah yang terdapat pada
Macromedia Dreamweaver yaitu dengan meletakkan link-link, grafik, isi berita dan modul-modul lainnya di tempat yang telah ditentukan.
3. Menulis dan meletakkan skrip-skrip PHP dan HTML yang diperlukan pada tempat
yang sesuai yang dikerjakan di jendela Code pada Macromedia Dreamweaver. 4.
Mengerjakan halaman-halaman berikutnya.
4.9.1 Mendefenisikan Website
Irdian Yamin : Aplikasi Cuti Online Di Kopkar Walet Kandatel Medan, 2010.
Pertama sekali yang perlu kita lakukan sebelum merancang situs yang akan kita buat agar semua file tertata rapi dan terkumpul pada satu dokumen maka kita perlu
mendefenisikan sebuah website. Dreamweaver memberikan kemudahan bagi kita dalam manajemen file yang digunakan dalam membuat halaman web. Untuk itu kita
perlu mendefenisikan sebuah web proyek yang baru kepada area kerja Dreamweaver.
Untuk mendefenisikan situs baru, klik menu Site pilih Manage Site seperti
yang terlihat dibawah ini :
Gambar 4.8 Window Manage site
Setelah itu klik New pilih Site untuk menampilkan window yang berisi pengaturan site yang akan dibuat. Pilih tab Advanced pilih Category pilih Lokal Info
untuk mengatur folder-folder tempat file yang akan digunakan dalam membuat halaman web. Berikut ini adalah keterangannya :
Irdian Yamin : Aplikasi Cuti Online Di Kopkar Walet Kandatel Medan, 2010.
1. Pada isian Site name, isikan nama proyek situs yang akan kita buat. Pada
Tugas Akhir saya ini, saya memberi nama proyeknya dengan Cuti.
2. Local root folder merupakan folder utama proyek kita. Beri centang pada
Refresh local file list automatically agar file terbaru anda muncul di
Dreamweaver.
Gambar 4.9 Windo w Site Definition
3 Default image folder merupakan folder tempat file-file gambar anda
disimpan. Default images folder harus berada pada didalam Local root folder. 4. Jika kita telah memiliki domain isikan alamat domain kita di isian HTTP
address agar semua link yang ada pada halaman web kita selalu dicek.
5. Enable cache memungkinkan Dreamweaver menggunakan temporary file
ketika ketika kita mengetes halaman web yang kita buat Preview in Browser pada browser di komputer lokal. Fungsinya untuk mempercepat proses
pengeksekusian file ke browser.
Irdian Yamin : Aplikasi Cuti Online Di Kopkar Walet Kandatel Medan, 2010.
Gambar 4.10 Halaman Data Karyawan
4.9.5 Penggabungan Scripts Dengan Layout Situs
Mungkin karena kemudahan serta kecanggihan editor ini, membuatnya lebih banyak dipakai oleh para web desaigner dan web programming. Salah satu kemudahan yang
dimiliki oleh Dreamweaver MX 2004 adalah dapat menggabungkan script program pada layout halaman situs. Penggabungan antara script pemrograman web dengan
halaman situs seperti JavaScripts, PHP dan lain-lain dapat dengan menuliskan
langsung scriptsnya pada tempat yang telah kita tentukan pada jendela Code atau pada jendela Split, atau dengan memanggil nama filenya saja yang terletak dalam satu
Irdian Yamin : Aplikasi Cuti Online Di Kopkar Walet Kandatel Medan, 2010.
dokumen. Dan ini hanya bisa dilakukan hanya untuk pemrograman Server Side seperti PHP.
Untuk memanggil file PHP mis : photo.php untuk ditempatkan pada halaman situs, cukup dengan cara :
1. Tempatkan kursor pada tempat yang telah kita tentukan.
2. Pada Jendela Split, beralihlah pada bagian Code kemudian ketikkan ?
include ‘photo.php’ ?.
4.9.6 Membuat Pop-Up Menu
Pop-Up Menu digunakan untuk membuat sebuah menu dengan banyak pilihan link yang langsung dapat diakses oleh pengunjung. Pop-Up Menu tidak memakan banyak
tempat dan dapat dibuat bertingkat sehingga kita tidak perlu bingung untuk menempatkan menu ini. Kita dapat menggunakan teks atau gambar image sebagai
sarana untuk membuat menu ini. Sebelum kita membuat pop-up menu, ada baiknya kita persiapkan teks atau
images sebagai penghubung pop-up menu. Dibawah ini adalah contoh gambar image sebagai penghubung pop-up menu:
Gambar 4.11 Gambar Sebagai Link Penghubung Menu
Irdian Yamin : Aplikasi Cuti Online Di Kopkar Walet Kandatel Medan, 2010.
Adapun cara membuat pop-up menu pada Dreamweaver MX 2004 adalah sebagai berikut :
1. Pilih gambar yang dijadikan penghubung pop-up menu. Misalnya PROFIL
2. Pilih menu Window pilih Behaviors dan aktifkan panel Behaviors atau dapat
juga digunakan dengan menekan kombinasi tombol
3. Klik tanda pada panel Behaviors, kemudian pilih submenu Show Pop-
Up Menu pada tampilan yang ada sehingga muncul tampilan kotak dialog Show Pop-Up Menu
4. Pastikan kalau kita sudah berada pada tabulasi Contents. Pada bagian ini, isi
dan pilih beberapa ketentuan berikut : a.
Masukkan nama menu pada kotak Text
b. Tentukan nama file yang akan dituju pada kotak Link.
c. Tentukan target linknya pada kotak Target. Kita dapat memilih dan
menentukan targetnya dengan mengklik panah bawah kotak Target.
5. Aktifkan tabulasi Appearance untuk mengubah tampilan menu pop-up menu,
seperti gambar di bawah ini :
Gambar 4.12 Window Appearance Show Menu
Irdian Yamin : Aplikasi Cuti Online Di Kopkar Walet Kandatel Medan, 2010.
a. Vertical Menu atau Horizontal Menu digunakan untuk menampilkan
menu dengan arah horizontal dan vertical.
b. Pilih jenis dan ukuran font untuk teks menu pada kotak Font dan kotak
Size. Tentukan pula style dan perataan dari teks menu.
c. Up State digunakan untuk menentukan format teks beserta sel pada saat
tidak dipilih.
Irdian Yamin : Aplikasi Cuti Online Di Kopkar Walet Kandatel Medan, 2010.
BAB 5
IMPLEMENTASI SISTEM
5.1 Pengertian Sistem Informasi
