Jefry Ardiansyah Toy : Portal Akademik SMA Negeri 15 Medan, 2010.
a. Membuat dokumen baru dengan ukuran panjang 1024 pixel dan lebar 218 pixel.
Kemudian mengisi warna gambar background dengan warna hijau transparan.
b. Dengan memanfaatkan tool-tool yang ada di Photoshop seperti filter tool, artistic
tool, dan neon glow tool dan mengunaka ACDsee seperti add text tool dengan kreasi penulis, dibentuk suatu layoutheader seperti gambar berikut ini:
Gambar 4.13 LayoutHeader Website Edit Pakai Photoshop
4.9 Membangun Halaman Website
Adapun halaman - halaman yang dibangun oleh penulis adalah:
a. Halaman index.php, merupakan halaman yang pertama kali muncul pada saat
website dibuka. Halaman ini berisikan artikel dan link-link menuju halaman berikutnya.
Jefry Ardiansyah Toy : Portal Akademik SMA Negeri 15 Medan, 2010.
b. Halaman data_guru.php, merupakan halaman yang berisikan tentang data guru dan
pegawai di SMA Negeri 15 Medan.
c. Halaman profil.php, sejarah_sklh.php, visimisi.php, organ_sklh.php, fasilitas.php
dan ruang.php, merupakan halaman yang memberikan informasi mengenai profil, kata sambutan, sejarah sekolah, visi dan misi sekolah serta fasilitas dan ruang dari
SMA Negeri 15 Medan.
d. Halaman daftar.php, merupakan halaman ynag digunakan untuk mendaftar sebagai
anggota di website ini. Dengan mendaftar di website ini user dapat menulis artikel.
e. Halaman admin.php, merupakan halaman yang hanya dapat diakses oleh admin
untuk melakukan pengaturan seperti menghapus atau mengubah artikel, alumni dan anggota serta menambah data guru baru
f. Halaman creator.php, merupakan halaman yang memuat profil pembuat website
SMA Negeri 15 Medan.
Tahap-tahap yang dilakukan penulis dalam membangun halaman website adalah sebagai berikut:
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:
Jefry Ardiansyah Toy : Portal Akademik SMA Negeri 15 Medan, 2010.
Gambar 4.14 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.
Jefry Ardiansyah Toy : Portal Akademik SMA Negeri 15 Medan, 2010.
4.9.1 Mendefenisikan Website
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.15 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
Jefry Ardiansyah Toy : Portal Akademik SMA Negeri 15 Medan, 2010.
untuk mengatur folder-folder tempat file yang akan digunakan dalam membuat halaman web. Berikut ini adalah keterangannya :
1. Pada isian Site name, isikan nama proyek situs yang akan kita buat. Pada
Tugas Akhir saya ini, saya memberi nama proyeknya dengan Eria.
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.16 Windo w Site Definition
Jefry Ardiansyah Toy : Portal Akademik SMA Negeri 15 Medan, 2010.
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.
4.9.2 Penempatan Layout Situs
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 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.
Jefry Ardiansyah Toy : Portal Akademik SMA Negeri 15 Medan, 2010.
Berikut ini adalah gambar layout tata letak SMA Negeri 15 Medan dengan menggunakan editor web Dreamweaver MX 2004.
Gambar 4.17 Layout Web SMA Negeri 15 Medan
Pembuatan layout pada Dreamweaver MX 2004, menggunakan fasilitas tabel untuk menempatkan images-images yang telah dibagi. Cara membuat tabel pada
Dreamweaver banyak caranya, salah satunya adalah menggunakan menu Insert pada menu bar kemudian pilih Table. Selanjutnya akan tampil sebuah kotak dialog Table,
kemudian tentukan jumlah baris tabel dan kolom tabel dengan memasukkan angka pada beberapa kotak teks yang sudah disediakan. Pada Situs SMA Negeri 15 Medan
ini penulis menggunakan 2 kolom dan 4 baris. Dibawah ini adalah gambar kotak dialog tabel :
Jefry Ardiansyah Toy : Portal Akademik SMA Negeri 15 Medan, 2010.
Gambar 4.18 Window Tabel
Keterangan Pada Window Tabel :
A. Bagian Table Size
1. Rows : Bagian yang digunakan untuk menentukan jumlah baris tabel.
2. Columns : Bagian yang digunakan untuk menentukan jumlah kolom tabel.
3. Width : Bagian yang digunakan untuk menentukan ukuran lebar tabel.
dan satuan ukuran yang dipakai pixel atau persentase.
4. Border : Bagian yang digunakan untuk mengatur ketebalan border atau
batas tabel.
Jefry Ardiansyah Toy : Portal Akademik SMA Negeri 15 Medan, 2010.
5. Cell Padding : Bagian yang digunakan untuk mengatur jarak antara isi sel dengan batas isi sel.
6. Cell Spacing : Bagian yang digunakan untuk menentukan jarak antarsel dalam
tabel.
B. Bagian Header
Digunakan untuk memberikan keterangan teks pada bagian tabel sesuai dengan pilihan yang tersedia.
1. None : Tanpa menggunakan keterangan teks.
2. Left : Menampilkan keterangan teks pada kolom pertama atau pada
bagian sebelah kiri.
3. Top : Menampilkan keterangan teksa pada pertama atau pada bagian
sebelah atas.
4. Both : Menampilkan keterangan teks pada kolom dan baris pertama.
C. Bagian Accessbility
Kita dapat memberikan keterangan judul tabel pada kotak teks Caption. Sedangkan
untuk perataan teksnya kita dapat memilih dari daftar yang sudah disediakan pada
kotak daftar Align Caption.
Jefry Ardiansyah Toy : Portal Akademik SMA Negeri 15 Medan, 2010.
4.9.3 Jendela Perancangan Situs
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 . 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.
Jefry Ardiansyah Toy : Portal Akademik SMA Negeri 15 Medan, 2010.
4.9.4 Halaman Situs
Pada jendela halaman utama atau yang sering juga dinamakan dengan file index memiliki 4 buah link. Link adalah suatu teks atau gambar yang dipakai dalam
dokumen HTML untuk melompat dari satu dokumen ke dokumen atau ketempat lain pada dokumen yang sama. Kita dapat menggunakan teks images yang ada didalam
halaman Web dan juga dapat membuat teks khusus untuk digunakan sebagai link.
Untuk membuat link pada Dreamweaver MX 2004 dapat diikuti cara berikut :
1. Tempatkan kursor pada tempat kerja atau images yang ingin kita jadikan link.
2. Kemudian pada Properti Inspector pilih link dan pilih file yang ingin kita
jadikan tempat tujuan dengan mengklik icon berbentuk folder.
Berikut ini adalah contoh halaman index yang ditampilkan pada browser Internet Explorer.
Jefry Ardiansyah Toy : Portal Akademik SMA Negeri 15 Medan, 2010.
Gambar 4.19 Halaman Visi dan Misi Pada Situs
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
Jefry Ardiansyah Toy : Portal Akademik SMA Negeri 15 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.20 Gambar Sebagai Link Penghubung Pop-Up Menu
Jefry Ardiansyah Toy : Portal Akademik SMA Negeri 15 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 Ctrl + F3.
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 seperti dibawah ini:
Gambar 4.21 Window Content Show Pop-Up Menu
Jefry Ardiansyah Toy : Portal Akademik SMA Negeri 15 Medan, 2010.
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.22 Window Appearance Show Pop-Up Menu
Jefry Ardiansyah Toy : Portal Akademik SMA Negeri 15 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. d.
Over State digunakan untuk menentukan format teks beserta sel pada
saat terpilih atau ditunjuk oleh pointer mouse. 6.
Aktifkan tabulasi Advanced. Tab Advanced berfungsi untuk mengubah
tampilan kotak menu pop-up.
Gambar 4.23 Window Advanced Show Pop-Up Menu
Jefry Ardiansyah Toy : Portal Akademik SMA Negeri 15 Medan, 2010.
a. Cell Width dan Cell Height, digunakan untuk menentukan lebar dan
tinggi kotak pop-up menu. Jika kita menghendaki agar Dreamweaver
mengaturnya secara otomatis, pilih Automatic.
b. Cell Padding dan Cell Spacing digunakan untuk menentukan jarak
antar sel dan jarak teks dengan sel. c.
Tentukan penundaan waktu tampilan menu pada menu Delay.
d. Jika kita ingin memberikan border pada kotak men, kita dapat
memberikan centang pada kotak Pop-Up Borders.
e. Tentukan lebar border pada kotak Border Width, tentukan warna untuk
border pada kotak Border Color, warna untuk bayangan menu pada kotak Shadow dan warna untuk sorot menu pada kotak Highlight.
7. Klik tabulasi Position untuk mengatur posisi pop-up menu. Lihat gambar
dibawah ini :
Gambar 4.24 Windo w Position Show Pop-Up Menu
Jefry Ardiansyah Toy : Portal Akademik SMA Negeri 15 Medan, 2010.
a. Pilih posisi pop-up menu dengan mengklik tombol pada Menu
Position. Jika Anda ingin menentukan sendiri posisi pop-up menu, Anda dapat mengisikan pada kotak X dan Y.
b. Untuk menyembunyikan tampilan menu pop-up menu pada saat mouse
melewati menu. Anda dapat memberikan tanda centang pada kotak Hide menu on onMouseOut event.
c. Untuk mengakhiri pembuatan Pop-Up Menu, tekan OK.
Hasil dari menu yang dibuat dapat dilihat pada Jendela Browser Internet Explorer berikut ini :
Gambar 4.25 Tampilan Pop-Up Menu pada Jendela Browser
Jefry Ardiansyah Toy : Portal Akademik SMA Negeri 15 Medan, 2010.
BAB 5
IMPLEMENTASI SISTEM
5.1 Pengertian Sistem Informasi
