Perancangan Interface dan Layout

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