Perancangan Sistem Perancangan Website

4.2 Perancangan Sistem

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. Secara sederhana struktur website dari situs yang penulis buat ditunjukkan pada Universitas Sumatera Utara gambar berikut : Gambar 4.1 Struktur website SMAN 10 Medan Dan adapun desain rancangan halaman utama website SMAN 10 sebagai berikut : Universitas Sumatera Utara 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 Gambar 4.2 Dialog Perancangan Website SMAN 10 Medan Universitas Sumatera Utara 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 dapat dilakukan dengan cara File Export Lokasi Penyimpanan lalu pilih Save. Setelah Universitas Sumatera Utara 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.phpimg name=websma_r2_c2 src=imageweb20sma_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.htmimg name=websma_r2_c4 src=imageweb20sma_r2_c4.gif width=125 height=40 border=0 id=websma_r2_c4 alt= a Script ini untuk mengkoneksikan halaman profil Universitas Sumatera Utara 3. Tombol Berita Scirpt pada tombol berita a href=berita.phpimg name=websma_r2_c12 src=imageweb20sma_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.htmimg name=websma_r2_c14 src=imagetes_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.phpimg name=websma_r2_c16 src=imageweb20sma_r2_c16.gif width=125 height=40 border=0 id=websma_r2_c16 alt= a Script ini untuk mengkoneksikan halaman buku tamu Universitas Sumatera Utara 6. Tombol Kontak Scirpt pada tombol kontak a href=kontak.htmimg name=websma_r2_c19 src=imageweb20sma_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.phpimg name=websma_r10_c2 src=imagecoba_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.htmimg name=websma_r11_c2 src=imageweb20sma_r11_c2.gif width=176 height=30 border=0 id=websma_r11_c2 alt= a Script ini untuk mengkoneksikan halaman visi misi Universitas Sumatera Utara 9. Tombol Struktur Organisasi Scirpt pada tombol organisasi a href=struktur.htmimg name=websma_r12_c2 src=imageweb20sma_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.phpimg name=websma_r13_c2 src=imageweb20sma_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.htmlimg name=websma_r14_c2 src=imagetes_r14_c2.gif width=176 height=30 border=0 id=websma_r14_c2 alt= a Script ini untuk mengkoneksikan halaman denah Universitas Sumatera Utara 12. Tombol Admin Scirpt pada tombol admin a href=login.phpimg name=websma_r22_c3 src=imageweb20sma_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 lainnya. Universitas Sumatera Utara

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

Halaman ini berisikan kegiatan – kegiatan siswa – siswi yang ada di SMAN 10 Medan Universitas Sumatera Utara

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