tidak ya
ya ya
7. Tampilan Flowchart Halaman Jadwal
Gambar 3.11 Flowchart Halaman Jadwal
3.7 Perancangan Interface dan Layout
Perancangan interface dan layout diawali dengan mulai pembuatan halaman intro atau index dan selanjutnya membuat halaman-halaman link yang berhubungan antara alaman
web dengan halaman yang lain. Perancangan interface diawali dengan membuat rancangan dasar tampilan web
yang akan ditranformasikan dalam bentuk sketsa digital.
Daftar Jadwal
Daftar Jadwal
Tambah Jadwal
Ubah data
Kelas
Keluar Keluar
Universitas Sumatera Utara
1. Perancangan interface halaman depan
Gambar 3.12 Tampilan Interface halaman depan
Header
Home Admin
Jadwal Mata kuliah
Cetak
Copyright by 2011 date
Universitas Sumatera Utara
2. Perancangan Interface Halaman Login
Gambar 3.13 Tampilan Interface halaman Login 3.
Perancangan Interface Halaman Admin
Gambar 3.14 Tampilan Interface halaman Admin
Header
Login Admin
Copyright by 2011
Copyright by 2011
Home Dosen
Header
Mata Kuliah Ruang
Kelas Jadwal
Logout
Konten Input Data
Universitas Sumatera Utara
4. Perancangan Interface Halaman Dosen
Gambar 3.15 Tampilan Interface halaman Dosen 5.
Perancangan Interface Halaman Tambah Dosen
Gambar 3.16 Tampilan Interface halaman Tambah Dosen
Header
Home Dosen
Mata Kuliah Ruang
Kelas Jadwal
Logout
Copyright by 2011
Pencarian
Tambah Dosen
Tabel Data Dosen
Home Dosen
Mata Kuliah Ruang
Kelas Jadwal
Logout
simpan
Tabel tambah Data Dosen
Header
batal
Copyright by 2011
Universitas Sumatera Utara
6. Perancangan Interface Halaman Mata Kuliah
Gambar 3.17 Tampilan Interface halaman Mata Kuliah
7. Perancangan Interface Halaman Mata Kuliah
Gambar 3.18 Tampilan Interface halaman Tambah Mata Kuliah
Header
Home Dosen
Mata Kuliah Ruang
Kelas Jadwal
Logout
Copyright by 2011
Pencarian
Tambah Mata kuliah
Tabel Mata Kuliah
Home Dosen
Mata Kuliah Ruang
Kelas Jadwal
Logout
simpan
Tabel tambah Mata Kuliah
Header
batal
Copyright by 2011
Universitas Sumatera Utara
8. Perancangan Interface Halaman Ruang
Gambar 3.19 Tampilan Interface Halaman Ruang
9. Perancangan Interface Halaman Tambah Ruang
Gambar 3.20 Tampilan Interface Halaman Tambah Ruang
Header
Home Dosen
Mata Kuliah Ruang
Kelas Jadwal
Logout
Copyright by 2011
Tambah Ruang
Tabel Data Ruang
Home Dosen
Mata Kuliah Ruang
Kelas Jadwal
Logout
simpan
Tabel tambah Data Ruang
Header
batal
Copyright by 2011
Universitas Sumatera Utara
10. Perancangan Interface Halaman Kelas
Gambar 3.21 Tampilan Interface Halaman Kelas 11.
Perancagan Interface Halaman Tambah Kelas
Gambar 3.22 Tampilan Interface Halaman Kelas
Header
Home Dosen
Mata Kuliah Ruang
Kelas Jadwal
Logout
Copyright by 2011
Tambah Kelas
Tabel Data Kelas
Home Dosen
Mata Kuliah Ruang
Kelas Jadwal
Logout
simpan
Tabel tambah Data Kelas
Header
batal
Copyright by 2011
Universitas Sumatera Utara
12. Perancangan Interface Halaman Jadwal
Gambar 3.23 Tampilan Interface Halaman Jadwal
13. Perancangan Interface Halaman Tambah Jadwal
Gambar 3.24 Tampilan Interface Halaman Tambah Jadwal
Header
Home Dosen
Mata Kuliah Ruang
Kelas Jadwal
Logout
Copyright by 2011
Cetak
Tambah Jadwal
Tabel Jadwal
Home Dosen
Mata Kuliah Ruang
Kelas Jadwal
Logout
simpan
Tabel tambah Data Jadwal
Header
batal
Copyright by 2011
Universitas Sumatera Utara
14. Perancangan Interface Halaman Cetak
Gambar 3.25 Tampilan Interface Halaman Tambah Jadwal
Tahap-tahap yang dilakukan penulis dalam membangun halaman website adalah sebagai berikut:
1. Membuka Macromedia Dreamweaver 8 sebagai software pengatur letak layout
dan penulisan skrip-skrip PHP dalam membangun halaman. Tampilannya dapat dilihat seperti gambar berikut ini:
Hasil Cetak Tabel
Universitas Sumatera Utara
Gambar 3.26 Tampilan Macromedia Dreamweaver 8
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. Situs yang baik adalah situs yang memperhatikan nilai keindahan pada
halamannya. Banyak situs yang mempergunakan halaman sederhana, tetapi kebanyakan juga situs yang menampilkan informasi, dengan tetap menghadirkan halaman dengan
template yang indah sehingga menjadikan situs tersebut sering dikunjungi orang. Terkadang dengan pemakaian template halaman pada sebuah situs, bisa jadi
waktu untuk mengakses site tersebut menjadi agak lamban, ini disebabkan karena images
Universitas Sumatera Utara
pada halaman situs tersebut tidak dipotong-potong dibagi menjadi ukuran file kecil. Pengelolaan situs yang benar adalah jika kita mempergunakan halaman template dengan
ukuran yang besar, perlu kita potong-potong bagi, agar pengaksesan situsnya menjadi cepat.
Berikut ini adalah contoh layout sistem informasi penjadwalan matakuliah dengan menggunakan editor web Dreamweaver 8.
Gambar 3.27 Layout halaman utama sistem informasi penjadwalan mata kuliah
Dalam perancangan situs, kita pasti akan disibukan dalam menangani scripting dan design web yang telah kita buat. Untuk itu di lembar kerja Macromedia Dreamwaver
MX 2004 ada 3 tabulasi jendela yang membantu kita dalam merancang situs yang kita buat.
1. Jendela Code : Pada jendela ini kita hanya bisa menuliskan teks scripting
pemrograman web, baik itu HTML, JavaScripts, PHP dan lain-lain .
Universitas Sumatera Utara
2. Jendela Split : Pada Jendela ini Dreamweaver memberikan kemudahan bagi kita
dalam merancang situs, dengan membagi dua jendela pada lembar kerja yaitu Jendela Code dengan Jendela Design.
3. Jendela Design : Pada Jendela ini kita hanya bisa merancang situs tanpa bisa
menuliskan scripting pemrograman web. Pada jendela design kita bisa menuliskan teks, menampilkan images, dan lain-lain. Apa yang kita buat di jendela design
maka itulah yang akan kita lihat pada browsingnya atau yang dikenal dengan
istilah WYSIWYG What You See Is What You Get.
3.8 Penggabungan Scripts Dengan Layout Situs