4.3 Mendesain Layout Web
Salah satu faktor agar situs diminati para pengunjung adalah desain layout yang bagus. Sebelum kita mendesain sebuah layout terlebih dahulu kita harus membuat
sketsa,setelah itu kita bagi situs menjadi beberapa bagian, diantaranya adalah: a.
Bagian header berisi nama sekolah dan beberapa grafik untuk mempercantik tampilan.
b. Navigasi harus mudah dikenali dan mudah digunakan
c. Bagian konten merupakan isi yang ingin disampaikan kepada pengunjung.
d. Bagian Footer berisi nama, dan informasi dari pemilik situs
e. Bagian-bagian lainnya, bisa merupakan artikel, info terkini, polling, dan
kalender.
Gambar 4.9 Rancangan Halaman Utama
Struktur Kalender
Ekstrakurikuler Galeri
Lokasi Profile
Tentang Kami
Login Info Guru
Nilai Siswa Buku Tamu
Info Alumni Berita
Isi
Facebook Header
Footer
Home
Universitas Sumatera Utara
Gambar 4.3 Rancangan Halaman Administrator
Gambar 4.10 Rancangan Halaman Utama Administrator
4.4 Perancangan Halaman Website
Adapun halaman - halaman yang dibangun oleh penulis adalah:
a. Halaman index merupakan halaman yang pertama kali muncul pada saat
website dibuka. Halaman ini berisikan artikel dan link-link menuju halaman berikutnya.
b. Halaman home merupakan halaman yang sama seperti halaman index.
c. Halaman profil merupakan halaman yang berisikan tentang profil sekolah,
mengenai visi misi, dan sejarah sekolah
Header
Footer
Logout Info Guru
Nilai Siswa Buku Tamu
Info Alumni Berita
Isi
Universitas Sumatera Utara
d. Halaman struktur merupakan halaman yang berisikan data mengenai struktur
organisasi, kurikulum dan yayasan SMA Swasta Kesatria Medan. e. Halaman Kalender Akademik merupakan halaman yang berisikan jadwal
kegiatan di SMA Swasta Kesatria Medan f.
Halaman Akademik berisikan data mengenai guru dan siswa serta hal- hal yang berkaitan dengan kegiatan akademik
g. Halaman Aplikasi berisikan data mengenai aplikasi untuk masuk ke
halaman login, halaman berita, alumni dan buku tamu h.
Halaman Tentang Kami berisikan profil sekolah prestasi yg pernah dicapai dan sejarah pergantian kepala sekolah SMA Swasta Kesatria
Medan. i.
Halaman Ekstrakurikuler berisikan kegiatan ekstrakurikuler apa saja yang ada di SMA Swasta Kesatria Medan.
Universitas Sumatera Utara
4.4.1 Design halaman Home
Dalam mendesign halaman ini, penulis menggunakan software Adobe Photoshop CS3. Halaman home adalah halaman pembuka yang merupakan halaman yang akan
tampil setelah masuk kedalam situs SMA Swasta Kesatria Medan. Adapun tampilannya adalah sebagai berikut :
Gambar 4.11 Tampilan Halaman Home
Universitas Sumatera Utara
4.4.2 Design halaman Login Administrator
Dalam mendesign halaman ini, penulis menggunakan software Adobe Photoshop CS3. Untuk masuk ke halaman admin, admin harus melakukan login terlebih dahulu
dengan mengisi username dan password dengan benar . Adapun tampilannya adalah sebagai berikut :
Gambar 4.12 Tampilan Halaman Login Administrator
Universitas Sumatera Utara
4.4.3 Design halaman Administrator
Halaman administrator adalah kumpulan halaman web yang berfungsi sebagai ruang kerja seorang admin untuk memanage dan mengelola data dari website. Data yang
ditampilkan pada website diambil langsung dari database. Ada 3 tiga cara dari seorang admin dalam mengelola database melalui halaman admin yaitu menambah
data, mengedit data dan menghapus data.
Pada halaman administrator website SMA Swasta Kesatria Medan terdapat 5 lima menu utama, yaitu Halaman Info Guru, Halaman Nilai Siswa, Halaman Buku
Tamu, Halaman Info Alumni dan Halaman Berita. Tampilan halaman administrator dapat dilihat pada gambar dibawah ini :
Gambar 4.13 Tampilan Halaman Utama Administrator
Universitas Sumatera Utara
4.5 Perancangan Database
Perancangan database adalah salah satu langkah untuk menentukan file database, table, tipe data dan ukuran dari data yang digunakan. Tahap ini merupakan tahap yang
paling penting dalam perancangan sistem.
Pada tahap ini dipersiapkan tempat untuk menampung data di server, data tersebut nantinya akan diproses oleh program yang kita buat pada tahap
pemrograman, baik penambahan, pengeditan, panghapusan dan menampilkan isi database ke halaman web. Database terdiri atas tabel-tabel yang dibuat dengan
menggunakan program MySQL.
Adapun database yang dibuat oleh penulis adalah database Website SMA Swasta Kesatria Medan dengan tabel-tabel sebagai berikut:
a. Tabel admin
Tabel 4.1 admin Field
Type Length
Keterangan
username Varchar
30 Username
password Varchar
30 Password
Universitas Sumatera Utara
b. Tabel alumni
Tabel 4.2 alumni Field
Type Length
Keterangan
id Int
11 Id alumni
nama Varchar
30 Nama Alumni
alamat Varchar
50 Alamat Alumni
jeniskelamin Varchar
20 Jenis Kelamin
tempat Varchar
40 Tempat Lahir
ttl Varchar
30 Tanggal lahir
agama Varchar
50 Agama
stambuk Varchar
50 Stambuk Tahun Masuk
telp Varchar
50 Telepon HP
facebook Varchar
50 Facebook
c. Tabel berita
Tabel 4.3 berita Field
Type Length
Keterangan
id Int
11 Id Berita
judul Varchar
70 Judul Berita
pathGbr Varchar
300 Lokasi gambar
isi Varchar
1000 Isi berita
Universitas Sumatera Utara
ttl Varchar
30 Tanggal posting berita
waktu Varchar
20 Waktu
d.Tabel komentar2
Tabel 4.4 komentar2 Field
Type Length
Keterangan
id Int
11 Id
nama Varchar
40 Nama penulis komentar
email Varchar
30 Email penulis komentar
komentar Varchar
150 Isi komentar
e. Tabel guru
Tabel 4.5 guru Field
Type Length
Keterangan
id Int
11 Id Guru
nama Varchar
40 Nama Guru
nip Varchar
30 NIP Guru
jeniskelamin Varchar
20 Jenis Kelamin
tempat Varchar
30 Tempat Lahir
ttl Varchar
20 Tanggal Lahir
Universitas Sumatera Utara
agama Varchar
20 Agama
jabatan Varchar
30 Jabatan di Sekolah
golongan Varchar
10 Golongan jika PNS
nuptk Varchar
30 NUPTK
pelajaran Varchar
30 Pelajaran yang diajarkan
universitas Varchar
40 Tamatan dari
ijazah Varchar
20 Ijazah terakhir
tamat Varchar
20 Tahun tamat
jurusan Varchar
30 Jurusan saat kuliah dulu
s2 Varchar
30 Jurusan jika S2
telp Varchar
30 Telepon HP
pathGbr Varchar
300 Lokasi gambar
f. Tabel judul
Tabel 4.6 judul Field
Type Length
Keterangan
id Int
11 Id Judul Nilai Siswa
judul Varchar
70 Judul Nilai Siswa
Universitas Sumatera Utara
g. Tabel nilai
Tabel 4.7 nilai Field
Type Length
Keterangan
id Int
11 Id nilai
nama Varchar
50 Nama Siswa
jurusan Varchar
5 Jurusan Siswa
agama Varchar
5 Bid. Studi Agama
pkn Varchar
5 Bid. Studi Kewarganegaraan
indonesia Varchar
5 Bid. Studi Indonesia
inggris Varchar
5 Bid. Studi Inggris
matematika Varchar
5 Bid. Studi Matematika
sejarah Varchar
5 Bid. Studi Sejarah
fisika Varchar
5 Bid. Studi Fisika
geografi Varchar
5 Bid. Studi Geografi
biologi Varchar
5 Bid. Studi Biologi
ekonomi Varchar
5 Bid. Studi Ekonomi
kimia Varchar
5 Bid. Studi Kimia
sosiologi Varchar
5 Bid. Studi Sosiologi
penjas Varchar
5 Bid. Studi Penjas
kesenian Varchar
5 Bid. Studi Kesenian
komputer Varchar
5 Bid. Studi Komputer
jerman Varchar
5 Bid. Studi B. Jerman
Universitas Sumatera Utara
4.6 Algoritma Situs
Kategori