Bab 3 Gambaran Umum SMAN 10 Medan
4.2 Perancangan Sistem 28
Perancangan sistem adalah upaya untuk sekolah untuk memulai memiliki sistem dalam
memberikan informasi mengenai sekolah. Perancangan sistem dilakukan setelah
mendapatkan gambaran dengan jelas apa yang akan dilakukan
Desain sistem secara umum mengidentifikasi komponen sistem informasi yang
akan didesain secara terinci. Desain terinci dimaksudkan untuk ahli komputer yang akan
mengimplementasikan sistem
4.3 Perancangan Website
Sistem yang dibuat dalam situs ini bekerja dalam sebuah web server dan dapat diakses
melalui jaringan interanet dan internet. Karena program ini berjalan dalam sebuah
jaringan intranet dan internet, maka dapat dijalankan dengan multiuser, dapat diakses
oleh banyak pengguna secara bersamaan dari komputer yang berbeda.
Website yang di rancang terdiri dari beberapa halaman yang berbeda. Dimana setiap halaman dari website itu di klik menurut halaman yang diinginkan maka tampilan
yang keluar akan berbeda dengan menampilkan halaman yang diinginkan tersebut.
Struktur website tersebut menampilkan struktur hirarki dan isi halaman per
halaman. Dengan adanya struktur, akan sangat mudah untuk memvisualisasikan isi dari
setiap halaman situs dan navigasi antar halaman.
31
gambar berikut :
Gambar 4.1 Struktur website SMAN 10 Medan
HOME PROFIL BERITA FASILTAS
BUKU
TAMU KONTAK
HEADER BERUPA GAMBAR
MAIN MENU DAFTAR GURU VISI DAN MISI STRUKTUR ORGANISASI KESISWAAN DENAH CALENDER GAMBAR KALENDER ADMIN SIMBOL LOGIN ADMIN
ISI DARI SETIAP HALAMAN YANG AKAN DI TAMPILKAN
FOOTER BERUPA GAMBAR BERBENTUK FLASH
33
Gambar 4.3 Perancangan Website dengan menggunakan Macromedia Fireworks
Pada gambar 4.3 penulis merancang desaian template atau halaman website. Pada
bagian ini juga, penulis merancang tombol – tombol atau menu – menu yang akan
ditampilkan website SMAN 10 MEDAN. Gambar – gambar yang akan digunakan harus
terlebih dahulu di import ke lembar kerja Fireworks sehingga dapat langsung digunakan.
Halaman website ini dirancang dengan menggabungkan atau menyusun beberapa
tampilan gambar sesuai dengan kebutuhan dan tampilan yang diinginkan setelah melalui
proses import. Serta tombol yang digunakan juga berupa gambar dimana pada setiap
gambarnya diberikan nama tombolnya masing – masing dengan fungsinya
masing-masing. Setelah perancangan selesai maka penulis akan mengubah atau meng-export
desain tampillan halaman website SMAN 10 MEDAN ke dalam file HTML. Hal ini
di export ke dalam HTML lalu penulis menjalankan file tersebut pada Macromedia
Dreamweaver 8. Kemudian penulis menduplikasi halaman atau tampilan website tersebut
sesuai dengan jumlah tombol atau menu yang akan ditampilkan pada website, sehingga
ada hubungan antar tombol atau menu. Sehingga jumlah tampilan sesuai dengan
banyaknya jumlah tombol yang tersedia. Setelah menduplikasinya penulis hanya tinggal
mengkoneksikan antar tombol satu dan lainnya sehingga semua tombol dapat terkoneksi
dengan baik.
Berikut ini adalah beberapa script tombol yang digunakan untuk mengkoneksikan
ke halaman yang diinginkan.
1. Tombol Home (index.php)
Scirpt pada tombol home
<a href="index.php"><img name="websma_r2_c2" src="image/web%20sma_r2_c2.gif" width="128" height="40" border="0" id="websma_r2_c2" alt="" /></a>
Script ini untuk mengkoneksikan halaman home atau halaman awal.
2. Tombol Profil
Scirpt pada tombol home
<a href="profil.htm"><img name="websma_r2_c4" src="image/web%20sma_r2_c4.gif" width="125" height="40" border="0" id="websma_r2_c4" alt="" /></a>
35
3. Tombol Berita
Scirpt pada tombol berita
<a href="berita.php"><img name="websma_r2_c12" src="image/web%20sma_r2_c12.gif" width="125" height="40" border="0" id="websma_r2_c12" alt="" /></a>
Script ini untuk mengkoneksikan halaman berita.
4. Tombol Fasilitas
Scirpt pada tombol fasilitas
<a href="fasilitas.htm"><img name="websma_r2_c14" src="image/tes_r2_c14.gif" width="125" height="40" border="0" id="websma_r2_c14" alt="" /></a>
Script ini untuk mengkoneksikan halaman fasilitas.
5. Tombol Buku Tamu
Scirpt pada tombol buku tamu
<a href="bukutamu-tampil.php"><img name="websma_r2_c16" src="image/web%20sma_r2_c16.gif" width="125" height="40" border="0" id="websma_r2_c16" alt="" /></a>
6. Tombol Kontak
Scirpt pada tombol kontak
<a href="kontak.htm"><img name="websma_r2_c19" src="image/web%20sma_r2_c19.gif" width="125" height="40" border="0" id="websma_r2_c19" alt="" /></a>
Script ini untuk mengkoneksikan halaman kontak
7. Tombol Daftar Guru
Scirpt pada tombol guru
<a href="guru.php"><img name="websma_r10_c2" src="image/coba_r10_c2.gif" width="176" height="30" border="0" id="websma_r10_c2" alt="" /></a>
Script ini untuk mengkoneksikan halaman daftar guru
8. Tombol Visi Misi
Scirpt pada tombol visi misi
<a href="visi.htm"><img name="websma_r11_c2" src="image/web%20sma_r11_c2.gif" width="176" height="30" border="0" id="websma_r11_c2" alt="" /></a>
37
9. Tombol Struktur Organisasi
Scirpt pada tombol organisasi
<a href="struktur.htm"><img name="websma_r12_c2" src="image/web%20sma_r12_c2.gif" width="176" height="30" border="0" id="websma_r12_c2" alt="" /></a>
Script ini untuk mengkoneksikan halaman organisasi
10. Tombol Kesiswaan
Scirpt pada tombol kesiswaan
<a href="kesiswaan.php"><img name="websma_r13_c2" src="image/web%20sma_r13_c2.gif" width="176" height="30" border="0" id="websma_r13_c2" alt="" /></a>
Script ini untuk mengkoneksikan halaman kesiswaan
11. Tombol Denah
Scirpt pada tombol denah
<a href="denah.html"><img name="websma_r14_c2" src="image/tes_r14_c2.gif" width="176" height="30" border="0" id="websma_r14_c2" alt="" /></a>
12. Tombol Admin
Scirpt pada tombol admin
<a href="login.php"><img name="websma_r22_c3" src="image/web%20sma_r22_c3.gif" width="166" height="46" border="0" id="websma_r22_c3" alt="" /></a>
Script ini untuk mengkoneksikan halaman admin
4.3.1 Halaman Home
Halaman ini merupakan halaman utama dari website. Halaman ini berisikan beberapa
informasi umum tentang sekolah dan link-link utama yang menuju ke halaman-halaman
lainnya.
4.3.2 Halaman Profil
Halaman ini berisikan informasi sekilas tentang sekolah, alamat sekolah dan link-link
yang menghubungkan ke halaman profil tentang sekolah lainnya.
4.3.3 Berita
Halaman ini berisikan berita dan informasi mengenai sekolah dan pengeetahuaan umum
39
4.3.4 Fasilitas
Halaman ini berisikan beberapa gambar berisikan fasilitas yang ada di SMAN 10 Medan.
4.3.5 Buku Tamu
Halaman ini berisikan form tamu untuk memberikan pesan dan kesan kepada sekolah.
4.3.6 Daftar Guru
Halaman ini berisikan mengenai informasi guru yang ada di SMAN 10 Medan
4.3.7 Visi dan Misi
Halaman ini berisikan mengenai visi dan misi sekolah SMAN 10 Medan
4.3.8 Struktur Organisasi
Halaman ini berisikan struktur organisasi yang ada di sekolah SMAN 10 Medan
4.3.9 Kesiswaan
4.3.10 Denah
Halaman ini berisikan denah sekolah SMAN 10 Medan.
4.3.11 Halaman Admin
Halaman admin berisikan login yang akan menghubungkan ke halaman administrator.
Halaman ini khusus hanya dapat diakses oleh administrator website untuk melakukan
pengaturan website seperti menambah, menghapus dan mengubah data.
4.4 Diagram Konteks