96895843 Laporan Programming Project Website Sekolah Praktikum Pemrograman Web
LAPORAN AKHIR
PRAKTIKUM PEMROGAMAN WEB
LABORATORIUM SISTEM INFORMASI DAN
REKAYASA PERANGKAT LUNAK
WEBSITE SEKOLAH
Disusun Oleh:
Nama/NIM : Ali Zainal Abidin / 10523114
Nama/NIM : Artha Galang S. / 10523121
Nama/NIM : Ramadani / 10523144
JURUSAN TEKNIK INFORMATIKA
FAKULTAS TEKNOLOGI INDUSTRI
UNIVERSITAS ISLAM INDONESIA
2012
LAPORAN AKHIR
PRAKTIKUM PEMROGAMAN WEB
LABORATORIUM SISTEM INFORMASI DAN
REKAYASA PERANGKAT LUNAK
WEBSITE SEKOLAH
Asisten Pembimbing : Widi Widayat
Disusun Oleh:
Nama/NIM : Ali Zainal Abidin / 10523114
Nama/NIM : Artha Galang S. / 10523121
Nama/NIM : Ramadani / 10523144
JURUSAN TEKNIK INFORMATIKA
FAKULTAS TEKNOLOGI INDUSTRI
UNIVERSITAS ISLAM INDONESIA
2012
HALAMAN PENGESAHAN ASISTEN
WEBSITE SEKOLAH
Telah Dipertahankan di Depan Sidang Penguji
Diajukan Sebagai Salah Satu Syarat
Untuk Menempuh Ujian Responsi Praktikum
Yogyakarta, 11 Juni 2012
Asisten
yang mengesahkan
Status Laporan : Diterima / Ditolak dengan Revisi
Tanggal koreksi : ________________
Alasan ditolak :
.................................................................................................................
.................................................................................................................
.................................................................................................................
.................................................................................................................
.................................................................................................................
.................................................................................................................
.................................................................................................................
.................................................................................................................
.................................................................................................................
.................................................................................................................
.................................................................................................................
.................................................................................................................
Diserahkan kembali paling lambat : ___ _______ 2012
i
PERSEMBAHAN
Laporan programming project yang berjudul Website Sekolah ini kami buat
dan kami persembahkan untuk pihak-pihak yang telah membantu dalam
pembuatan programming project ini, yaitu Widi Widayat selaku asisten
pembimbing kami selama kami menjalani praktikum dan teman-teman mahasiswa
yang juga turut membantu dalam pembuatan programming project ini.
ii
MOTTO
1. Semua mimpi kita akan menjadi kenyataan, jika kita memiliki keberanian
untuk mengejarnya.
2. Bermimpilah seperti jika anda akan hidup selamanya, jalani hidup seperti jika
anda akan mati hari ini.
3. Belajar ketika orang lain tidur, bekerja ketika orang lain bermalasan, dan
bermimpi ketika orang lain berharap.
4. Bermimpilan seperti jika anda akan hidup selamanya, jalani hidup seperti jika
anda akan meninggal hari ini.
5. Untuk mencapai kesuksesan, kita jangan hanya bertindak, tapi juga perlu
bermimpi, jangan hanya berencana, tapi juga perlu untuk percaya.
iii
KATA PENGANTAR
Rasa syukur yang dalam kami ucapkan kepada Allah SWT, karena atas
limpahan rahmat dan karunia-Nyalah kami dapat menyelesaikan laporan
Programming Project Pemrograman Web ini yang berjudul “Website Sekolah”.
Laporan ini kami buat dalam rangka memenuhi salah satu mata kuliah Praktikum
Pemrograman Web di Fakultas Teknologi Industri Universitas Islam Indonesia.
Dalam proses penyusunan Laporan Programming Project Pemrograman Web
ini kami telah berusaha dengan sebaik-baiknya, akan tetapi kami merasa masih
banyak kekurangannya. Selama penyusunan kami mendapatkan bimbingan,
arahan, koreksi dan saran, untuk itu rasa terima kasih yang sedalam-dalamnya
kami sampaikan kepada :
1. Widi Widayat selaku asisten pembimbing kami.
2. Rekan-rekan mahasiwa yang telah banyak memberikan masukan untuk
pembuatan program maupun laporan ini.
Demikian laporan ini kami buat semoga bermanfaat.
Yogyakarta, 11 Juni 2012
Penyusun
iv
TAKARIR
Programming Project
proyek pemrograman
Source code
kode sumber
Database
basis data
Tools
alat bantu
Software
perangkat lunak
Icon
ikon
User
pengguna
Background image
gambar latar belakang
Selector
pemilih
Error
kesalahan
Database management system
sistem manajemen basis data
Local
lokal
Primary key
kunci utama
Username
nama pengguna
Password
kata sandi
Not null
tidak boleh kosong
Null
boleh kosong
One to many
satu ke banyak
Foreign key
kunci penghubung
Header
kepala
v
Banner
gambar spanduk
Sidebar
bagian samping
List
daftar
Copyrights
hak cipta
Credits
kredit website
Dashboard
dasbor
Manage
mengatur
Page
halaman
Approve
diterima
Pending
ditunda
vi
DAFTAR ISI
HALAMAN PENGESAHAN ASISTEN .............................................................. i
PERSEMBAHAN ................................................................................................ ii
MOTTO.............................................................................................................. iii
KATA PENGANTAR ........................................................................................ iv
TAKARIR ........................................................................................................... v
DAFTAR ISI ..................................................................................................... vii
DAFTAR GAMBAR ........................................................................................ viii
BAB I PENDAHULUAN .................................................................................... 1
1.1
Deskripsi Masalah ................................................................................. 1
1.2
Batasan Masalah .................................................................................... 2
1.3
Sistematika Penulisan ............................................................................ 2
BAB II METODOLOGI ...................................................................................... 4
2.1
Analisis Kebutuhan ................................................................................ 4
2.2
Struktur Tabel dan Relasi Tabel ............................................................. 5
2.2.1
Struktur Tabel ................................................................................. 5
2.2.2
Relasi Tabel .................................................................................. 11
2.3
Desain Interface ................................................................................... 12
BAB III HASIL DAN PEMBAHASAN ............................................................ 15
3.1
Hasil dan Pembahasan Website ............................................................ 15
3.2
Kelebihan dan Kekurangan .................................................................. 26
BAB IV KESIMPULAN DAN SARAN ............................................................ 27
4.1
Kesimpulan.......................................................................................... 27
4.2
Saran ................................................................................................... 27
DAFTAR PUSTAKA ........................................................................................ 28
LAMPIRAN ...................................................................................................... 29
vii
DAFTAR GAMBAR
Gambar 2.1 Struktur tabel admin.......................................................................... 5
Gambar 2.2 Struktur tabel siswa........................................................................... 6
Gambar 2.3 Struktur tabel guru ............................................................................ 7
Gambar 2.4 Struktur tabel halaman ...................................................................... 8
Gambar 2.5 Struktur tabel artikel ......................................................................... 9
Gambar 2.6 Struktur tabel komentar..................................................................... 9
Gambar 2.7 Struktur tabel buku tamu ................................................................. 10
Gambar 2.8 Relasi tabel database pada website sekolah ..................................... 11
Gambar 2.9 Interface halaman depan website .................................................... 12
Gambar 2.10 Interface halaman login website .................................................... 13
Gambar 2.11 Interface halaman admin pada website sekolah ............................. 14
Gambar 3.1 Halaman depan website sekolah...................................................... 15
Gambar 3.2 Halaman artikel/berita pada website sekolah ................................... 15
Gambar 3.3 Halaman buku tamu pada website ................................................... 16
Gambar 3.4 Halaman direktori siswa.................................................................. 17
Gambar 3.5 Informasi yang ditampilkan pada data siswa ................................... 17
Gambar 3.6 Halaman direktori guru ................................................................... 18
Gambar 3.7 Halaman user admin ....................................................................... 18
Gambar 3.8 Halaman dashboard ........................................................................ 19
Gambar 3.9 Halaman manage data siswa ........................................................... 19
Gambar 3.10 Halaman tambah data siswa .......................................................... 20
Gambar 3.11 Halaman manage data guru ........................................................... 20
Gambar 3.12 Halaman tambah data guru............................................................ 21
Gambar 3.13 Halaman manage page .................................................................. 21
Gambar 3.14 Tambah halaman page pada website sekolah................................. 22
Gambar 3.15 Halaman manage artikel atau berita .............................................. 22
Gambar 3.16 Halaman tambah artikel/berita ...................................................... 23
Gambar 3.17 Halaman list komentar .................................................................. 24
Gambar 3.18 Halaman list buku tamu ................................................................ 24
Gambar 3.19 Ubah pesan buku tamu .................................................................. 25
viii
1
BAB I
PENDAHULUAN
1.1 Deskripsi Masalah
Pada saat ini kebutuhan akan informasi sangat penting bagi instansi-instansi
seperti sekolah yang membutuhkan media dan sarana informasi untuk
memberikan informasi tersebut kepada guru, murid, orang tua, dan kalangan
umum lainnya. Namun pada kenyataannya dalam penyampaian informasiinformasi tersebut masih banyak mengalami masalah dikarenakan media yang
digunakan untuk menyampaikan informasi tersebut masih terbatas dan tidak
mencakup seluruh kalangan yang membutuhkannya.
Kalangan yang membutuhkan informasi itu tidak hanya berada pada lingkup
sekolah, namun ada juga dari luar sekolah seperti para wali atau orang tua murid
yang membutuhkan informasi dari sekolah itu. Selain wali/orang tua murid,
masyarakat umum juga dapat mengakses informasi tersebut, maka dibutuhkannya
website untuk menyampaikan informasi secara global.
Website yang dibangun dapat menampilkan informasi-informasi yang
biasanya ada pada website sekolah yaitu profil, visi dan misi, berita, dan lain-lain.
Selain itu website ini juga dapat menampilkan data-data seperti direktori murid
dan guru. Data murid dan guru akan ditampilkan secara ringkas pada website itu
dengan menggunakan tabel sehingga tata letak dari direktori tersebut rapi.
Website akan mempunyai fitur seperti buku tamu, komentar pada bagian isi berita
sehingga terjadi interaksi antara user dengan sistem. Dengan adanya website ini
sekolah dapat menyampaikan informasinya secara luas.
Selanjutnya pada website ini juga menyediakan berita tentang penerimaan
siswa baru, agar masyarakat umum jika ada yang ingin mendaftarkan anak atau
saudaranya dapat melihat informasi tersebut pada website sekolah, dengan tujuan
untuk memudahkan calon pendaftar. Setelah itu calon pendaftar dapat datang ke
sekolah yang bersangkutan untuk mendapatkan informasi lebih lanjut.
2
1.2 Batasan Masalah
Agar dalam pembahasan permasalahan tidak berkembang terlalu luas, peneliti
memandang perlu memberikan batasan-batasan masalah yang perlu diteliti untuk
website sekolah meliputi:
1. Website yang dibangun adalah website untuk sekolah menengah atas.
2. Tidak terdapat fitur seperti penerimaan siswa baru secara online (PSB
Online) dan penerimaan beasiswa.
3. Interakasi yang terjadi antara user dengan sistem adalah pada buku tamu
dan komentar pada berita sekolah.
4. Hanya admin yang dapat mengelola website tersebut.
5. Data murid dan guru ditampilkan secara ringkas.
6. Tidak menyimpan data alumni sekolah.
1.3 Sistematika Penulisan
Dalam penyusunan laporan ini terdapat beberapa bab yang membahas
programming project tentang website sekolah. Adapun penjelasan secara ringkas
dari beberapa bab tersebut adalah sebagai berikut :
a. BAB I PENDAHULUAN
Pada bab ini menjelaskan tentang studi kasus dan apa yang ingin dibuat
dalam mengatasi permasalahan yang dihadapi oleh suatu sekolah dalam
kemudahan untuk menyampaikan informasi.
b. BAB II METODOLOGI
Dalam bab ini menjelaskan tentang metode untuk menyelesaikan masalah
yaitu dengan analisis kebutuhan, struktur dan relasi tabel pada database
serta rancangan interface untuk membangun sebuah website sekolah.
c. BAB III HASIL DAN PEMBAHASAN
Menjelaskan secara lengkap terhadap fungsi-fungsi yang ada pada website
sekolah tersebut. Selain itu juga menjelaskan kelebihan dan kekurangan
nya.
3
d. BAB IV SIMPULAN DAN SARAN
Bab ini menjelaskan tentang kesimpulan dari website yang dibuat dan
saran untuk Laboratorium Sistem Informasi dan Rekayasa Perangkat
Lunak (SIRKEL), dan para asisten yang bertugas di laboratorium tersebut.
4
BAB II
METODOLOGI
2.1 Analisis Kebutuhan
Dalam pembuatan programming project pemrogaram web ini, kami
menggunakan
beberapa
tools
untuk
memudahkan
selama
pengerjaan
programming project ini. Tools-tools tersebut berupa software untuk pengerjaan
coding website dan software untuk mendesain antarmuka (interface) pada website
sekolah tersebut.
Adapun tools-tools yang dijelaskan diatas adalah Adobe Photoshop CS3,
Adobe Dreamweaver CS3, Netbeans 6.9.1, Oracle XE 10g, dan XAMPP 1.7.7.
Setiap tools tersebut memiliki kegunaan masing-masing yaitu:
a. Adobe Photoshop CS3
Dalam pembuatan website ini, Peneliti menggunakan tools ini karena
mudah dalam penggunaan untuk membuat desain web, dan tools ini sudah
menjadi standar dalam pembuatan desain web, maupun desain lainnya.
Tools ini digunakan untuk mendesain interface pada website sekolah yaitu
untuk mendesain header, tombol, menu, dan icon pada website tersebut.
b. Adobe Dreamweaver CS3
Tools ini digunakan untuk membuat cascending style sheet (css) pada
website sekolah. Karena mudah dalam penggunaannya, seperti sudah
tersedianya pilihan warna yang memudahkan user dalam memilih warna,
pengaturan background image yang mudah, serta mudah dalam pembuatan
selector pada css ini.
c. Netbeans 6.9.1
Tools ini digunakan untuk pembuatan coding php. Karena dalam
pembuatan coding php tidak boleh terjadi kesalahan (error) yang akan
menimbulkan website tersebut tidak dapat berjalan seperti yang
diinginkan, maka dalam pembuatannya digunakan netbeans yang dapat
5
mendeteksi error dalam pembuatan coding sehingga kesalahan tersebut
dapat teratasi dengan mudah.
d. Oracle XE 10g
Dalam penyimpanan data website ini seperti data siswa, data guru, berita,
dan lain-lain menggunakan database management system yaitu Oracle XE
10g. Oracle dapat menyimpan data dalam jumlah yang besar dan
pembuatan basisdatanya pun mudah seperti DBMS lain yaitu MySql dll.
e. XAMPP 1.7.7
Untuk menjalankan website ini pada server local yaitu menjalankannya
pada komputer yang tidak terkoneksi dengan internet, maka digunakan
XAMPP sebagai server pada komputer itu agar website sekolah ini dapat
berjalan meskipun tidak terhubung dengan internet. XAMPP mempunyai
server local yang bernama Apache yaitu server yang sudah lama popular
untuk membangun sebuah server.
2.2 Struktur Tabel dan Relasi Tabel
Dalam membuat database website sekolah ini terdapat tujuh tabel yang
mempunyai struktur tabel dengan tipe data tertentu dan relasi tabel untuk
menghubungkan tabel satu dengan tabel yang lain. Tujuh tabel tersebut adalah
tabel admin, siswa, guru, halaman, artikel, komentar, dan buku tamu.
2.2.1
Struktur Tabel
Gambar 2.1 Struktur tabel admin
Penjelasan gambar 2.1
Tabel ini digunakan untuk menyimpan data admin yang mempunyai 6
kolom dengan tipe datanya masing-masing. Berikut penjelasan struktur tabel
admin.
6
a. Kolom id_admin sebagai primary key dengan tipe data number tanpa
batasan pengisian karakter.
b. Kolom username dengan tipe data varchar2 dengan panjang maksimal
pengisian 25 karakter, dan pada kolom ini harus terisi data (not null).
c. Kolom password dengan tipe data varchar2 dengan panjang maksimal
pengisian 25 karakter, dan pada kolom ini harus terisi data (not null).
d. Kolom nama dengan tipe data varchar2 dengan panjang maksimal
pengisian 50 karakter, dan pada kolom ini harus terisi data (not null).
e. Kolom telpon dengan tipe data varchar2 dengan panjang maksimal
pengisian 30 karakter, dan pada kolom ini boleh tidak terisi data (null).
f. Kolom alamat dengan tipe data varchar2 dengan panjang maksimal
pengisian 300 karakter, dan pada kolom ini boleh tidak terisi data
(null).
Gambar 2.2 Struktur tabel siswa
Penjelasan gambar 2.2
Tabel ini digunakan untuk menyimpan data siswa yang mempunyai 8
kolom dengan tipe datanya masing-masing. Berikut penjelasan struktur tabel
siswa.
a. Kolom nis sebagai primary key dengan tipe data number tanpa batasan
pengisian karakter.
b. Kolom nama dengan tipe data varchar2 dengan panjang maksimal
pengisian 50 karakter, dan pada kolom ini harus terisi data (not null).
7
c. Kolom jenis kelamin dengan tipe data varchar2 dengan panjang
maksimal pengisian 25 karakter, dan pada kolom ini harus terisi data
(not null).
d. Kolom ttl dengan tipe data varchar2 dengan panjang maksimal
pengisian 100 karakter, dan pada kolom ini harus terisi data (not null).
e. Kolom telpon dengan tipe data varchar2 dengan panjang maksimal
pengisian 30 karakter, dan pada kolom ini boleh tidak terisi data (null).
f. Kolom alamat dengan tipe data varchar2 dengan panjang maksimal
pengisian 300 karakter, dan pada kolom ini boleh tidak terisi data
(null).
g. Kolom namawali dengan tipe data varchar2 dengan panjang maksimal
pengisian 50 karakter, dan pada kolom ini boleh tidak terisi data (null).
h. Kolom kelas dengan tipe data varchar2 dengan panjang maksimal
pengisian 25 karakter, dan pada kolom ini boleh tidak terisi data (null).
Gambar 2.3 Struktur tabel guru
Penjelasan gambar 2.3
Tabel ini digunakan untuk menyimpan data guru yang mempunyai 8
kolom dengan tipe datanya masing-masing. Berikut penjelasan struktur tabel
guru.
a. Kolom nip sebagai primary key dengan tipe data number tanpa batasan
pengisian karakter.
b. Kolom nama dengan tipe data varchar2 dengan panjang maksimal
pengisian 50 karakter, dan pada kolom ini harus terisi data (not null).
8
c. Kolom jenis kelamin dengan tipe data varchar2 dengan panjang
maksimal pengisian 25 karakter, dan pada kolom ini harus terisi data
(not null).
d. Kolom ttl dengan tipe data varchar2 dengan panjang maksimal
pengisian 100 karakter, dan pada kolom ini harus terisi data (not null).
e. Kolom telpon dengan tipe data varchar2 dengan panjang maksimal
pengisian 30 karakter, dan pada kolom ini boleh tidak terisi data (null).
f. Kolom alamat dengan tipe data varchar2 dengan panjang maksimal
pengisian 300 karakter, dan pada kolom ini boleh tidak terisi data
(null).
g. Kolom jabatan dengan tipe data varchar2 dengan panjang maksimal
pengisian 50 karakter, dan pada kolom ini boleh tidak terisi data (null).
h. Kolom matapelajaran dengan tipe data varchar2 dengan panjang
maksimal pengisian 50 karakter, dan pada kolom ini boleh tidak terisi
data (null).
Gambar 2.4 Struktur tabel halaman
Penjelasan gambar 2.4
Tabel ini digunakan untuk menyimpan data halaman seperti halaman
sejarah sekolah, visi & misi, dan lain-lain yang mempunyai 3 kolom dengan
tipe datanya masing-masing. Berikut penjelasan struktur tabel halaman.
a. Kolom idhalaman sebagai primary key dengan tipe data number tanpa
batasan pengisian karakter.
b. Kolom judul dengan tipe data varchar2 dengan panjang maksimal
pengisian 100 karakter, dan pada kolom ini harus terisi data (not null).
c. Kolom isi dengan tipe data varchar2 dengan panjang maksimal
pengisian 4000 karakter, dan pada kolom ini boleh tidak terisi data
(null).
9
Gambar 2.5 Struktur tabel artikel
Penjelasan gambar 2.5
Tabel ini digunakan untuk menyimpan data artikel yang mempunyai 4
kolom dengan tipe datanya masing-masing. Berikut penjelasan struktur tabel
artikel.
a. Kolom idartikel sebagai primary key dengan tipe data number tanpa
batasan pengisian karakter.
b. Kolom judul dengan tipe data varchar2 dengan panjang maksimal
pengisian 100 karakter, dan pada kolom ini harus terisi data (not null).
c. Kolom isi dengan tipe data varchar2 dengan panjang maksimal
pengisian 4000 karakter, dan pada kolom ini boleh tidak terisi data
(null).
d. Kolom waktu dengan tipe data varchar2 dengan panjang maksimal
pengisian 100 karakter, dan pada kolom ini boleh tidak terisi data
(null).
Gambar 2.6 Struktur tabel komentar
Penjelasan gambar 2.6
Tabel ini digunakan untuk menyimpan data komentar yang mempunyai 4
kolom dengan tipe datanya masing-masing. Berikut penjelasan struktur tabel
artikel.
a. Kolom idkomentar sebagai primary key dengan tipe data number tanpa
batasan pengisian karakter.
10
b. Kolom nama dengan tipe data varchar2 dengan panjang maksimal
pengisian 50 karakter, dan pada kolom ini harus terisi data (not null).
c. Kolom email dengan tipe data varchar2 dengan panjang maksimal
pengisian 50 karakter, dan pada kolom ini boleh tidak terisi data (null).
d. Kolom isi dengan tipe data varchar2 dengan panjang maksimal
pengisian 1000 karakter, dan pada kolom ini boleh tidak terisi data
(null).
Gambar 2.7 Struktur tabel buku tamu
Penjelasan gambar 2.7
Tabel ini digunakan untuk menyimpan data bukutamu yang diisi oleh
pengunjung website sekolah yang mempunyai 5 kolom dengan tipe datanya
masing-masing. Berikut penjelasan struktur tabel bukutamu.
a. Kolom idtamu sebagai primary key dengan tipe data number tanpa
batasan pengisian karakter.
b. Kolom nama dengan tipe data varchar2 dengan panjang maksimal
pengisian 50 karakter, dan pada kolom ini harus terisi data (not null).
c. Kolom email dengan tipe data varchar2 dengan panjang maksimal
pengisian 50 karakter, dan pada kolom ini boleh tidak terisi data (null).
d. Kolom isi dengan tipe data varchar2 dengan panjang maksimal
pengisian 1000 karakter, dan pada kolom ini boleh tidak terisi data
(null).
e. Kolom status dengan tipe data varchar2 dengan panjang maksimal
pengisian 25 karakter, dan pada kolom ini boleh tidak terisi data (null).
11
2.2.2
Relasi Tabel
Gambar 2.8 Relasi tabel database pada website sekolah
Penjelasan gambar 2.8
a. Tabel admin dan siswa berelasi dengan kardinalitas one to many (1:N)
sehingga primary key yang ada ditabel admin akan menjadi foreign key
di tabel siswa.
b. Tabel admin dan guru berelasi dengan kardinalitas one to many (1:N)
sehingga primary key yang ada ditabel admin akan menjadi foreign key
di tabel guru.
c. Tabel admin dan halaman berelasi dengan kardinalitas one to many
(1:N) sehingga primary key yang ada ditabel admin akan menjadi
foreign key di tabel halaman.
d. Tabel admin dan artikel berelasi dengan kardinalitas one to many (1:N)
sehingga primary key yang ada ditabel admin akan menjadi foreign key
di tabel artikel.
12
e. Tabel admin dan buktamu berelasi dengan kardinalitas one to many
(1:N) sehingga primary key yang ada ditabel admin akan menjadi
foreign key di tabel bukutamu.
f. Tabel artikel dan komentar berelasi dengan kardinalitas one to many
(1:N) sehingga primary key yang ada ditabel artikel akan menjadi
foreign key di tabel komentar.
2.3 Desain Interface
HEADER
MENU 1
MENU 2
MENU 3
MENU 4
MENU N
SIDEBAR 1
CONTENT
SIDEBAR 2
SIDEBAR N
FOOTER
Gambar 2.9 Interface halaman depan website
Pada interface halaman depan website sekolah ini, terdapat bagian header,
menu atas, content, dan sidebar. Pada bagian header digunakan untuk meletakkan
header maupun banner gambar sekolah atau judul website itu sendiri. Bagian
menu digunakan untuk menu-menu yang ada pada website sekolah yaitu beranda,
sejarah singkat tentang sekolah, visi & misi, sarana dan prasarana, dll. Pada
bagian content digunakan untuk content atau isi dari website tersebut seperti
13
artikel, berita, dan lain-lain. Bagian sidebar digunakan untuk meletakkan content
lainnya seperti list artikel terbaru, list komentar, dan lain-lain. Dan terakhir pada
bagian footer biasanya dipakai untuk menaruh copyrights ataupun credits dari
suatu website.
Gambar 2.10 Interface halaman login website
Pada halaman user ini terdapat dua form yang digunakan oleh admin untuk
masuk ke sistem atau halaman administrator , form tersebut adalah form username
dan password, dan sebuah tombol user.
14
Gambar 2.11 Interface halaman admin pada website sekolah
Pada halaman admin ini sama seperti halaman depan namun bedanya adalah
pada halaman ini terdapat icon-icon dengan fungsinya masing-masing. Icon-icon
tersebut diilustrasikan sebagai fungsi yang ada pada website tersebut yaitu fungsi
untuk data siswa, guru, artikel, halaman, komentar, buku tamu, dan lain-lain.
Selain itu juga terdapat sidebar berupa menu user, fungsinya sama seperti iconicon yang ada pada halaman content.
15
BAB III
HASIL DAN PEMBAHASAN
3.1 Hasil dan Pembahasan Website
Gambar 3.1 Halaman depan website sekolah
Tampilan pada gambar diatas adalah halaman depan atau beranda dari website
sekolah ketika pengunjung membuka website ini. Pada halaman depan
menampilkan artikel maupun berita yang diposting oleh admin.
Gambar 3.2 Halaman artikel/berita pada website sekolah
16
Halaman artikel atau berita memuat artikel yang diposting oleh admin.
Pengunjung dapat memberikan komentar pada form komentar yang terdapat
dibawah artikel tersebut.
Gambar 3.3 Halaman buku tamu pada website
Pada website ini terdapat buku tamu yang dapat digunakan oleh pengunjung
untuk menulis pesan, kritik, maupun saran kepada sekolah tersebut. Pengunjung
cukup memasukkan nama, email, dan isi pesan ke dalam form yang telah tersedia.
Pesan akan ditampilkan pada halaman tersebut jika admin telah menyetujuinya.
17
Gambar 3.4 Halaman direktori siswa
Pada halaman ini, pengunjung dapat melihat detail siswa dengan mengeklik
menu direktori siswa yang ada pada sidebar diwebsite ini. cukup mengklik detail
maka akan muncul informasi tentang siswa tersebut namun informasi yang
ditampilkan secara singkat saja. Untuk memudahkan melihat data siswa, maka ada
form pencarian siswa, hanya dengan memasukkan nama siswa maka akan tampil
hasil pencarian data siswa tersebut.
Gambar 3.5 Informasi yang ditampilkan pada data siswa
Halaman detail data siswa hanya menampilkan data siswa secara singkat, tidak
terlalu lengkap karena untuk menjaga informasi siswa pada sekolah ini.
18
Gambar 3.6 Halaman direktori guru
Sama seperti halaman direktori siswa, pada halaman ini pengunjung dapat
melihat detail guru dengan mengeklik menu direktori guru yang ada pada sidebar
diwebsite ini. cukup mengklik detail maka akan muncul informasi tentang guru
tersebut namun informasi yang ditampilkan secara singkat saja. Untuk
memudahkan melihat data guru, maka ada form pencarian guru, hanya dengan
memasukkan nama guru maka akan tampil hasil pencarian data guru tersebut.
Gambar 3.7 Halaman user admin
Tampilan pada gambar diatas merupakan halaman user untuk admin agar bisa
masuk ke halaman administrator. Pada halaman administrator tersebutlah admin
dapat mengelola data-data seperti data siswa, guru, artikel, halaman, komentar,
dan buku tamu.
19
Gambar 3.8 Halaman dashboard
Halaman dashboard merupakan halaman pertama yang muncul ketika admin
telah user ke website sekolah ini. dalam halaman ini terdapat icon-icon yang
merujuk pada fungsi yang sesuai dengan ilustrasi pada icon tersebut. Fungsifungsi tersebut seperti ubah profil, ubah password, data siswa, data guru, artikel,
halaman, komentar, dan buku tamu.
Gambar 3.9 Halaman manage data siswa
20
Pada halaman manage data siswa, admin dapat menambah, mengubah, dan
menghapus serta mencari data siswa. Dalam halaman ini juga menampilkan
banyaknya data siswa perkelas.
Gambar 3.10 Halaman tambah data siswa
Pada halaman tambah data siswa digunakan admin untuk menambah data
siswa. Untuk menambah data siswa, admin perlu memasukkan data seperti NIS,
Nama, Jenis Kelamin, Tempat dan Tanggal lahir, Telpon, Wali Murid, Kelas, dan
Alamat. Setelah mengklik tombol Submit, maka halaman akan menuju ke
halaman manage data siswa.
Gambar 3.11 Halaman manage data guru
21
Pada halaman manage data guru, admin dapat menambah, mengubah, dan
menghapus serta mencari data guru.
Gambar 3.12 Halaman tambah data guru
Pada halaman tambah data guru digunakan admin untuk menambah data guru.
Untuk menambah data guur, admin perlu memasukkan data seperti NIP, Nama,
Jenis Kelamin, Tempat dan Tanggal lahir, Telpon, Jabatan, Mata Pelajaran, dan
Alamat. Setelah mengklik tombol Submit, maka halaman akan menuju ke
halaman manage data guru.
Gambar 3.13 Halaman manage page
22
Pada halaman manage page menampilkan daftar halaman utama yang ada
pada website sekolah ini seperti halaman sejarah singkat sekolah, visi dan misi,
serta sarana dan prasarana. Admin dapat membuat, mengubah, dan menghapus
data halaman ini.
Gambar 3.14 Tambah halaman page pada website sekolah
Pada halaman ini, admin dapat membuat halaman baru untuk website sekolah
ini. data yang dimasukkan cukup judul dan isinya saja. Judul halaman ini akan
menjadi salah satu menu atas pada website ini. Untuk teks editor menggunakan
TinyMCE agar dalam pembuatan halaman baru lebih mudah.
Gambar 3.15 Halaman manage artikel atau berita
23
Halaman manage berita digunakan untuk membuat dan mengubah artikel atau
berita yang diposting pada website sekolah ini. Selain itu pada halaman ini dapat
menghapus artikel atau berita dan dapat mencari artikel tersebut pada form
pencarian artikel dihalaman ini. pada halaman ini juga dapat langsung melihat
artikel atau berita yang sudah dibuat sebelumnya tanpa perlu ke halaman depan
atau beranda.
Gambar 3.16 Halaman tambah artikel/berita
Sama seperti pada halaman tambah page baru, pada halaman ini admin juga
dapat membuat artikel atau berita baru untuk website sekolah ini. data yang
dimasukkan cukup judul dan isinya saja. Untuk teks editor menggunakan
TinyMCE agar dalam pembuatan artikel baru lebih mudah.
24
Gambar 3.17 Halaman list komentar
Pada halaman list komentar, admin dapat melihat komentar serta detail
komentar yang ditulis oleh pengunjung pada website sekolah ini. jika terdapat
komentar yang negatif maka admin dapat menghapus komentar tersebut. Detail
komentar yang tampil pada halaman tersebut adalah nama, email, dan isi dari
komentar yang ditulis serta artikel yang dikomentari oleh pengunjung.
Gambar 3.18 Halaman list buku tamu
Pada halaman list buku tamu, admin dapat melihat pesan buku tamu yang
ditulis oleh pengunjung website. Pesan buku tamu akan ditampilkan pada halaman
buku tamu jika admin telah mengubah status pending menjadi approve. Selain itu
jika terdapat pesan yang negatif maka admin berhak menghapus pesan buku tamu
tersebut.
25
Gambar 3.19 Ubah pesan buku tamu
Pada halaman ini, admin dapat mengubah pesan buku tamu yaitu dari status
pending menjadi approve atau sebaliknya sesuai dengan keinginan admin. Jika
statusnya diubah menjadi approve maka pesan buku tamu tersebut akan
ditampilkan pada halaman buku tamu diwebsite ini, jika diubah pending maka
pesan tersebut tidak akan ditampilkan.
26
3.2 Kelebihan dan Kekurangan
Dalam pembuatan website ini tidak terlepas dari kekurangan dan kelebihan
yang ada pada website sekolah ini. kelebihan dan kekurangan yang ada pada
website sekolah ini yaitu.
Kelebihan
a. Interface yang memudahkan user dalam menggunakan website ini.
b. Memberikan informasi tentang data siswa dan guru secara ringkas.
c. Dapat mencari data siswa maupun guru, selain itu juga dapat mencari
artikel atau berita yang ada pada website.
d. Terdapat form komentar dan buku tamu pada website ini.
Kekurangan
a. Tidak terdapat fitur seperti penerimaan siswa baru.
b. Siswa dan guru maupun pengunjung lain tidak dapat user pada website ini.
c. Tidak menyimpan data-data alumni sekolah.
d. Pencarian data belum terlalu lengkap misal untuk mencari data siswa
berdasarkan kelas, dan lain sebagainya.
27
BAB IV
KESIMPULAN DAN SARAN
4.1 Kesimpulan
Website ini dibuat untuk menyampaikan informasi kepada masyarakat umum.
Website ini khusus dibuat untuk kalangan sekolah yang memuat informasi tentang
sekolah tersebut agar mereka yang ingin mengetahui informasi terbaru dapat
melihat pada website sekolah.
Website ini hanya dikelola oleh admin, sedangkan guru, siswa, dan user lain
hanya dapat melihat informasi tersebut. Pengelolaan data hanya admin yang
menanganinya. Admin dapat mengelola data siswa dan guru seperti menambah,
mengubah, dan menghapus data tersebut. Selain itu admin dapat membuat
halaman dan artikel baru serta mengubah dan menghapusnya. Serta admin juga
dapat mengelola komentar maupun pesan buku tamu yang diisi oleh pengunjung.
4.2 Saran
Kami berharap project kami dapat bermanfaat bagi para pembaca agar dapat
menjadi contoh yang baik bagi teman mahasiswa yang lain. Pada project website
sekolah ini masih jauh dari kata sempurna, maka dari itu besar harapan kami
untuk dapat dikembangkan oleh teman mahasiswa yang lain khususnya
mahasiswa teknik informatika.
28
DAFTAR PUSTAKA
SIRKEL,
Laboratorium.
Modul
Praktikum
Pemrograman
Web.
Laboratorium Sistem Informasi dan Rekayasa Perangkat Lunak. 2012. Jurusan
Teknik Informatika Fakultas Teknologi Industri Universitas Islam Indonesia
Yogyakarta.
29
LAMPIRAN
Lampiran 1: Lembar asistensi 1 dan 2
Lampiran 2: Source code website dan softcopy laporan dalam format pdf.
PRAKTIKUM PEMROGAMAN WEB
LABORATORIUM SISTEM INFORMASI DAN
REKAYASA PERANGKAT LUNAK
WEBSITE SEKOLAH
Disusun Oleh:
Nama/NIM : Ali Zainal Abidin / 10523114
Nama/NIM : Artha Galang S. / 10523121
Nama/NIM : Ramadani / 10523144
JURUSAN TEKNIK INFORMATIKA
FAKULTAS TEKNOLOGI INDUSTRI
UNIVERSITAS ISLAM INDONESIA
2012
LAPORAN AKHIR
PRAKTIKUM PEMROGAMAN WEB
LABORATORIUM SISTEM INFORMASI DAN
REKAYASA PERANGKAT LUNAK
WEBSITE SEKOLAH
Asisten Pembimbing : Widi Widayat
Disusun Oleh:
Nama/NIM : Ali Zainal Abidin / 10523114
Nama/NIM : Artha Galang S. / 10523121
Nama/NIM : Ramadani / 10523144
JURUSAN TEKNIK INFORMATIKA
FAKULTAS TEKNOLOGI INDUSTRI
UNIVERSITAS ISLAM INDONESIA
2012
HALAMAN PENGESAHAN ASISTEN
WEBSITE SEKOLAH
Telah Dipertahankan di Depan Sidang Penguji
Diajukan Sebagai Salah Satu Syarat
Untuk Menempuh Ujian Responsi Praktikum
Yogyakarta, 11 Juni 2012
Asisten
yang mengesahkan
Status Laporan : Diterima / Ditolak dengan Revisi
Tanggal koreksi : ________________
Alasan ditolak :
.................................................................................................................
.................................................................................................................
.................................................................................................................
.................................................................................................................
.................................................................................................................
.................................................................................................................
.................................................................................................................
.................................................................................................................
.................................................................................................................
.................................................................................................................
.................................................................................................................
.................................................................................................................
Diserahkan kembali paling lambat : ___ _______ 2012
i
PERSEMBAHAN
Laporan programming project yang berjudul Website Sekolah ini kami buat
dan kami persembahkan untuk pihak-pihak yang telah membantu dalam
pembuatan programming project ini, yaitu Widi Widayat selaku asisten
pembimbing kami selama kami menjalani praktikum dan teman-teman mahasiswa
yang juga turut membantu dalam pembuatan programming project ini.
ii
MOTTO
1. Semua mimpi kita akan menjadi kenyataan, jika kita memiliki keberanian
untuk mengejarnya.
2. Bermimpilah seperti jika anda akan hidup selamanya, jalani hidup seperti jika
anda akan mati hari ini.
3. Belajar ketika orang lain tidur, bekerja ketika orang lain bermalasan, dan
bermimpi ketika orang lain berharap.
4. Bermimpilan seperti jika anda akan hidup selamanya, jalani hidup seperti jika
anda akan meninggal hari ini.
5. Untuk mencapai kesuksesan, kita jangan hanya bertindak, tapi juga perlu
bermimpi, jangan hanya berencana, tapi juga perlu untuk percaya.
iii
KATA PENGANTAR
Rasa syukur yang dalam kami ucapkan kepada Allah SWT, karena atas
limpahan rahmat dan karunia-Nyalah kami dapat menyelesaikan laporan
Programming Project Pemrograman Web ini yang berjudul “Website Sekolah”.
Laporan ini kami buat dalam rangka memenuhi salah satu mata kuliah Praktikum
Pemrograman Web di Fakultas Teknologi Industri Universitas Islam Indonesia.
Dalam proses penyusunan Laporan Programming Project Pemrograman Web
ini kami telah berusaha dengan sebaik-baiknya, akan tetapi kami merasa masih
banyak kekurangannya. Selama penyusunan kami mendapatkan bimbingan,
arahan, koreksi dan saran, untuk itu rasa terima kasih yang sedalam-dalamnya
kami sampaikan kepada :
1. Widi Widayat selaku asisten pembimbing kami.
2. Rekan-rekan mahasiwa yang telah banyak memberikan masukan untuk
pembuatan program maupun laporan ini.
Demikian laporan ini kami buat semoga bermanfaat.
Yogyakarta, 11 Juni 2012
Penyusun
iv
TAKARIR
Programming Project
proyek pemrograman
Source code
kode sumber
Database
basis data
Tools
alat bantu
Software
perangkat lunak
Icon
ikon
User
pengguna
Background image
gambar latar belakang
Selector
pemilih
Error
kesalahan
Database management system
sistem manajemen basis data
Local
lokal
Primary key
kunci utama
Username
nama pengguna
Password
kata sandi
Not null
tidak boleh kosong
Null
boleh kosong
One to many
satu ke banyak
Foreign key
kunci penghubung
Header
kepala
v
Banner
gambar spanduk
Sidebar
bagian samping
List
daftar
Copyrights
hak cipta
Credits
kredit website
Dashboard
dasbor
Manage
mengatur
Page
halaman
Approve
diterima
Pending
ditunda
vi
DAFTAR ISI
HALAMAN PENGESAHAN ASISTEN .............................................................. i
PERSEMBAHAN ................................................................................................ ii
MOTTO.............................................................................................................. iii
KATA PENGANTAR ........................................................................................ iv
TAKARIR ........................................................................................................... v
DAFTAR ISI ..................................................................................................... vii
DAFTAR GAMBAR ........................................................................................ viii
BAB I PENDAHULUAN .................................................................................... 1
1.1
Deskripsi Masalah ................................................................................. 1
1.2
Batasan Masalah .................................................................................... 2
1.3
Sistematika Penulisan ............................................................................ 2
BAB II METODOLOGI ...................................................................................... 4
2.1
Analisis Kebutuhan ................................................................................ 4
2.2
Struktur Tabel dan Relasi Tabel ............................................................. 5
2.2.1
Struktur Tabel ................................................................................. 5
2.2.2
Relasi Tabel .................................................................................. 11
2.3
Desain Interface ................................................................................... 12
BAB III HASIL DAN PEMBAHASAN ............................................................ 15
3.1
Hasil dan Pembahasan Website ............................................................ 15
3.2
Kelebihan dan Kekurangan .................................................................. 26
BAB IV KESIMPULAN DAN SARAN ............................................................ 27
4.1
Kesimpulan.......................................................................................... 27
4.2
Saran ................................................................................................... 27
DAFTAR PUSTAKA ........................................................................................ 28
LAMPIRAN ...................................................................................................... 29
vii
DAFTAR GAMBAR
Gambar 2.1 Struktur tabel admin.......................................................................... 5
Gambar 2.2 Struktur tabel siswa........................................................................... 6
Gambar 2.3 Struktur tabel guru ............................................................................ 7
Gambar 2.4 Struktur tabel halaman ...................................................................... 8
Gambar 2.5 Struktur tabel artikel ......................................................................... 9
Gambar 2.6 Struktur tabel komentar..................................................................... 9
Gambar 2.7 Struktur tabel buku tamu ................................................................. 10
Gambar 2.8 Relasi tabel database pada website sekolah ..................................... 11
Gambar 2.9 Interface halaman depan website .................................................... 12
Gambar 2.10 Interface halaman login website .................................................... 13
Gambar 2.11 Interface halaman admin pada website sekolah ............................. 14
Gambar 3.1 Halaman depan website sekolah...................................................... 15
Gambar 3.2 Halaman artikel/berita pada website sekolah ................................... 15
Gambar 3.3 Halaman buku tamu pada website ................................................... 16
Gambar 3.4 Halaman direktori siswa.................................................................. 17
Gambar 3.5 Informasi yang ditampilkan pada data siswa ................................... 17
Gambar 3.6 Halaman direktori guru ................................................................... 18
Gambar 3.7 Halaman user admin ....................................................................... 18
Gambar 3.8 Halaman dashboard ........................................................................ 19
Gambar 3.9 Halaman manage data siswa ........................................................... 19
Gambar 3.10 Halaman tambah data siswa .......................................................... 20
Gambar 3.11 Halaman manage data guru ........................................................... 20
Gambar 3.12 Halaman tambah data guru............................................................ 21
Gambar 3.13 Halaman manage page .................................................................. 21
Gambar 3.14 Tambah halaman page pada website sekolah................................. 22
Gambar 3.15 Halaman manage artikel atau berita .............................................. 22
Gambar 3.16 Halaman tambah artikel/berita ...................................................... 23
Gambar 3.17 Halaman list komentar .................................................................. 24
Gambar 3.18 Halaman list buku tamu ................................................................ 24
Gambar 3.19 Ubah pesan buku tamu .................................................................. 25
viii
1
BAB I
PENDAHULUAN
1.1 Deskripsi Masalah
Pada saat ini kebutuhan akan informasi sangat penting bagi instansi-instansi
seperti sekolah yang membutuhkan media dan sarana informasi untuk
memberikan informasi tersebut kepada guru, murid, orang tua, dan kalangan
umum lainnya. Namun pada kenyataannya dalam penyampaian informasiinformasi tersebut masih banyak mengalami masalah dikarenakan media yang
digunakan untuk menyampaikan informasi tersebut masih terbatas dan tidak
mencakup seluruh kalangan yang membutuhkannya.
Kalangan yang membutuhkan informasi itu tidak hanya berada pada lingkup
sekolah, namun ada juga dari luar sekolah seperti para wali atau orang tua murid
yang membutuhkan informasi dari sekolah itu. Selain wali/orang tua murid,
masyarakat umum juga dapat mengakses informasi tersebut, maka dibutuhkannya
website untuk menyampaikan informasi secara global.
Website yang dibangun dapat menampilkan informasi-informasi yang
biasanya ada pada website sekolah yaitu profil, visi dan misi, berita, dan lain-lain.
Selain itu website ini juga dapat menampilkan data-data seperti direktori murid
dan guru. Data murid dan guru akan ditampilkan secara ringkas pada website itu
dengan menggunakan tabel sehingga tata letak dari direktori tersebut rapi.
Website akan mempunyai fitur seperti buku tamu, komentar pada bagian isi berita
sehingga terjadi interaksi antara user dengan sistem. Dengan adanya website ini
sekolah dapat menyampaikan informasinya secara luas.
Selanjutnya pada website ini juga menyediakan berita tentang penerimaan
siswa baru, agar masyarakat umum jika ada yang ingin mendaftarkan anak atau
saudaranya dapat melihat informasi tersebut pada website sekolah, dengan tujuan
untuk memudahkan calon pendaftar. Setelah itu calon pendaftar dapat datang ke
sekolah yang bersangkutan untuk mendapatkan informasi lebih lanjut.
2
1.2 Batasan Masalah
Agar dalam pembahasan permasalahan tidak berkembang terlalu luas, peneliti
memandang perlu memberikan batasan-batasan masalah yang perlu diteliti untuk
website sekolah meliputi:
1. Website yang dibangun adalah website untuk sekolah menengah atas.
2. Tidak terdapat fitur seperti penerimaan siswa baru secara online (PSB
Online) dan penerimaan beasiswa.
3. Interakasi yang terjadi antara user dengan sistem adalah pada buku tamu
dan komentar pada berita sekolah.
4. Hanya admin yang dapat mengelola website tersebut.
5. Data murid dan guru ditampilkan secara ringkas.
6. Tidak menyimpan data alumni sekolah.
1.3 Sistematika Penulisan
Dalam penyusunan laporan ini terdapat beberapa bab yang membahas
programming project tentang website sekolah. Adapun penjelasan secara ringkas
dari beberapa bab tersebut adalah sebagai berikut :
a. BAB I PENDAHULUAN
Pada bab ini menjelaskan tentang studi kasus dan apa yang ingin dibuat
dalam mengatasi permasalahan yang dihadapi oleh suatu sekolah dalam
kemudahan untuk menyampaikan informasi.
b. BAB II METODOLOGI
Dalam bab ini menjelaskan tentang metode untuk menyelesaikan masalah
yaitu dengan analisis kebutuhan, struktur dan relasi tabel pada database
serta rancangan interface untuk membangun sebuah website sekolah.
c. BAB III HASIL DAN PEMBAHASAN
Menjelaskan secara lengkap terhadap fungsi-fungsi yang ada pada website
sekolah tersebut. Selain itu juga menjelaskan kelebihan dan kekurangan
nya.
3
d. BAB IV SIMPULAN DAN SARAN
Bab ini menjelaskan tentang kesimpulan dari website yang dibuat dan
saran untuk Laboratorium Sistem Informasi dan Rekayasa Perangkat
Lunak (SIRKEL), dan para asisten yang bertugas di laboratorium tersebut.
4
BAB II
METODOLOGI
2.1 Analisis Kebutuhan
Dalam pembuatan programming project pemrogaram web ini, kami
menggunakan
beberapa
tools
untuk
memudahkan
selama
pengerjaan
programming project ini. Tools-tools tersebut berupa software untuk pengerjaan
coding website dan software untuk mendesain antarmuka (interface) pada website
sekolah tersebut.
Adapun tools-tools yang dijelaskan diatas adalah Adobe Photoshop CS3,
Adobe Dreamweaver CS3, Netbeans 6.9.1, Oracle XE 10g, dan XAMPP 1.7.7.
Setiap tools tersebut memiliki kegunaan masing-masing yaitu:
a. Adobe Photoshop CS3
Dalam pembuatan website ini, Peneliti menggunakan tools ini karena
mudah dalam penggunaan untuk membuat desain web, dan tools ini sudah
menjadi standar dalam pembuatan desain web, maupun desain lainnya.
Tools ini digunakan untuk mendesain interface pada website sekolah yaitu
untuk mendesain header, tombol, menu, dan icon pada website tersebut.
b. Adobe Dreamweaver CS3
Tools ini digunakan untuk membuat cascending style sheet (css) pada
website sekolah. Karena mudah dalam penggunaannya, seperti sudah
tersedianya pilihan warna yang memudahkan user dalam memilih warna,
pengaturan background image yang mudah, serta mudah dalam pembuatan
selector pada css ini.
c. Netbeans 6.9.1
Tools ini digunakan untuk pembuatan coding php. Karena dalam
pembuatan coding php tidak boleh terjadi kesalahan (error) yang akan
menimbulkan website tersebut tidak dapat berjalan seperti yang
diinginkan, maka dalam pembuatannya digunakan netbeans yang dapat
5
mendeteksi error dalam pembuatan coding sehingga kesalahan tersebut
dapat teratasi dengan mudah.
d. Oracle XE 10g
Dalam penyimpanan data website ini seperti data siswa, data guru, berita,
dan lain-lain menggunakan database management system yaitu Oracle XE
10g. Oracle dapat menyimpan data dalam jumlah yang besar dan
pembuatan basisdatanya pun mudah seperti DBMS lain yaitu MySql dll.
e. XAMPP 1.7.7
Untuk menjalankan website ini pada server local yaitu menjalankannya
pada komputer yang tidak terkoneksi dengan internet, maka digunakan
XAMPP sebagai server pada komputer itu agar website sekolah ini dapat
berjalan meskipun tidak terhubung dengan internet. XAMPP mempunyai
server local yang bernama Apache yaitu server yang sudah lama popular
untuk membangun sebuah server.
2.2 Struktur Tabel dan Relasi Tabel
Dalam membuat database website sekolah ini terdapat tujuh tabel yang
mempunyai struktur tabel dengan tipe data tertentu dan relasi tabel untuk
menghubungkan tabel satu dengan tabel yang lain. Tujuh tabel tersebut adalah
tabel admin, siswa, guru, halaman, artikel, komentar, dan buku tamu.
2.2.1
Struktur Tabel
Gambar 2.1 Struktur tabel admin
Penjelasan gambar 2.1
Tabel ini digunakan untuk menyimpan data admin yang mempunyai 6
kolom dengan tipe datanya masing-masing. Berikut penjelasan struktur tabel
admin.
6
a. Kolom id_admin sebagai primary key dengan tipe data number tanpa
batasan pengisian karakter.
b. Kolom username dengan tipe data varchar2 dengan panjang maksimal
pengisian 25 karakter, dan pada kolom ini harus terisi data (not null).
c. Kolom password dengan tipe data varchar2 dengan panjang maksimal
pengisian 25 karakter, dan pada kolom ini harus terisi data (not null).
d. Kolom nama dengan tipe data varchar2 dengan panjang maksimal
pengisian 50 karakter, dan pada kolom ini harus terisi data (not null).
e. Kolom telpon dengan tipe data varchar2 dengan panjang maksimal
pengisian 30 karakter, dan pada kolom ini boleh tidak terisi data (null).
f. Kolom alamat dengan tipe data varchar2 dengan panjang maksimal
pengisian 300 karakter, dan pada kolom ini boleh tidak terisi data
(null).
Gambar 2.2 Struktur tabel siswa
Penjelasan gambar 2.2
Tabel ini digunakan untuk menyimpan data siswa yang mempunyai 8
kolom dengan tipe datanya masing-masing. Berikut penjelasan struktur tabel
siswa.
a. Kolom nis sebagai primary key dengan tipe data number tanpa batasan
pengisian karakter.
b. Kolom nama dengan tipe data varchar2 dengan panjang maksimal
pengisian 50 karakter, dan pada kolom ini harus terisi data (not null).
7
c. Kolom jenis kelamin dengan tipe data varchar2 dengan panjang
maksimal pengisian 25 karakter, dan pada kolom ini harus terisi data
(not null).
d. Kolom ttl dengan tipe data varchar2 dengan panjang maksimal
pengisian 100 karakter, dan pada kolom ini harus terisi data (not null).
e. Kolom telpon dengan tipe data varchar2 dengan panjang maksimal
pengisian 30 karakter, dan pada kolom ini boleh tidak terisi data (null).
f. Kolom alamat dengan tipe data varchar2 dengan panjang maksimal
pengisian 300 karakter, dan pada kolom ini boleh tidak terisi data
(null).
g. Kolom namawali dengan tipe data varchar2 dengan panjang maksimal
pengisian 50 karakter, dan pada kolom ini boleh tidak terisi data (null).
h. Kolom kelas dengan tipe data varchar2 dengan panjang maksimal
pengisian 25 karakter, dan pada kolom ini boleh tidak terisi data (null).
Gambar 2.3 Struktur tabel guru
Penjelasan gambar 2.3
Tabel ini digunakan untuk menyimpan data guru yang mempunyai 8
kolom dengan tipe datanya masing-masing. Berikut penjelasan struktur tabel
guru.
a. Kolom nip sebagai primary key dengan tipe data number tanpa batasan
pengisian karakter.
b. Kolom nama dengan tipe data varchar2 dengan panjang maksimal
pengisian 50 karakter, dan pada kolom ini harus terisi data (not null).
8
c. Kolom jenis kelamin dengan tipe data varchar2 dengan panjang
maksimal pengisian 25 karakter, dan pada kolom ini harus terisi data
(not null).
d. Kolom ttl dengan tipe data varchar2 dengan panjang maksimal
pengisian 100 karakter, dan pada kolom ini harus terisi data (not null).
e. Kolom telpon dengan tipe data varchar2 dengan panjang maksimal
pengisian 30 karakter, dan pada kolom ini boleh tidak terisi data (null).
f. Kolom alamat dengan tipe data varchar2 dengan panjang maksimal
pengisian 300 karakter, dan pada kolom ini boleh tidak terisi data
(null).
g. Kolom jabatan dengan tipe data varchar2 dengan panjang maksimal
pengisian 50 karakter, dan pada kolom ini boleh tidak terisi data (null).
h. Kolom matapelajaran dengan tipe data varchar2 dengan panjang
maksimal pengisian 50 karakter, dan pada kolom ini boleh tidak terisi
data (null).
Gambar 2.4 Struktur tabel halaman
Penjelasan gambar 2.4
Tabel ini digunakan untuk menyimpan data halaman seperti halaman
sejarah sekolah, visi & misi, dan lain-lain yang mempunyai 3 kolom dengan
tipe datanya masing-masing. Berikut penjelasan struktur tabel halaman.
a. Kolom idhalaman sebagai primary key dengan tipe data number tanpa
batasan pengisian karakter.
b. Kolom judul dengan tipe data varchar2 dengan panjang maksimal
pengisian 100 karakter, dan pada kolom ini harus terisi data (not null).
c. Kolom isi dengan tipe data varchar2 dengan panjang maksimal
pengisian 4000 karakter, dan pada kolom ini boleh tidak terisi data
(null).
9
Gambar 2.5 Struktur tabel artikel
Penjelasan gambar 2.5
Tabel ini digunakan untuk menyimpan data artikel yang mempunyai 4
kolom dengan tipe datanya masing-masing. Berikut penjelasan struktur tabel
artikel.
a. Kolom idartikel sebagai primary key dengan tipe data number tanpa
batasan pengisian karakter.
b. Kolom judul dengan tipe data varchar2 dengan panjang maksimal
pengisian 100 karakter, dan pada kolom ini harus terisi data (not null).
c. Kolom isi dengan tipe data varchar2 dengan panjang maksimal
pengisian 4000 karakter, dan pada kolom ini boleh tidak terisi data
(null).
d. Kolom waktu dengan tipe data varchar2 dengan panjang maksimal
pengisian 100 karakter, dan pada kolom ini boleh tidak terisi data
(null).
Gambar 2.6 Struktur tabel komentar
Penjelasan gambar 2.6
Tabel ini digunakan untuk menyimpan data komentar yang mempunyai 4
kolom dengan tipe datanya masing-masing. Berikut penjelasan struktur tabel
artikel.
a. Kolom idkomentar sebagai primary key dengan tipe data number tanpa
batasan pengisian karakter.
10
b. Kolom nama dengan tipe data varchar2 dengan panjang maksimal
pengisian 50 karakter, dan pada kolom ini harus terisi data (not null).
c. Kolom email dengan tipe data varchar2 dengan panjang maksimal
pengisian 50 karakter, dan pada kolom ini boleh tidak terisi data (null).
d. Kolom isi dengan tipe data varchar2 dengan panjang maksimal
pengisian 1000 karakter, dan pada kolom ini boleh tidak terisi data
(null).
Gambar 2.7 Struktur tabel buku tamu
Penjelasan gambar 2.7
Tabel ini digunakan untuk menyimpan data bukutamu yang diisi oleh
pengunjung website sekolah yang mempunyai 5 kolom dengan tipe datanya
masing-masing. Berikut penjelasan struktur tabel bukutamu.
a. Kolom idtamu sebagai primary key dengan tipe data number tanpa
batasan pengisian karakter.
b. Kolom nama dengan tipe data varchar2 dengan panjang maksimal
pengisian 50 karakter, dan pada kolom ini harus terisi data (not null).
c. Kolom email dengan tipe data varchar2 dengan panjang maksimal
pengisian 50 karakter, dan pada kolom ini boleh tidak terisi data (null).
d. Kolom isi dengan tipe data varchar2 dengan panjang maksimal
pengisian 1000 karakter, dan pada kolom ini boleh tidak terisi data
(null).
e. Kolom status dengan tipe data varchar2 dengan panjang maksimal
pengisian 25 karakter, dan pada kolom ini boleh tidak terisi data (null).
11
2.2.2
Relasi Tabel
Gambar 2.8 Relasi tabel database pada website sekolah
Penjelasan gambar 2.8
a. Tabel admin dan siswa berelasi dengan kardinalitas one to many (1:N)
sehingga primary key yang ada ditabel admin akan menjadi foreign key
di tabel siswa.
b. Tabel admin dan guru berelasi dengan kardinalitas one to many (1:N)
sehingga primary key yang ada ditabel admin akan menjadi foreign key
di tabel guru.
c. Tabel admin dan halaman berelasi dengan kardinalitas one to many
(1:N) sehingga primary key yang ada ditabel admin akan menjadi
foreign key di tabel halaman.
d. Tabel admin dan artikel berelasi dengan kardinalitas one to many (1:N)
sehingga primary key yang ada ditabel admin akan menjadi foreign key
di tabel artikel.
12
e. Tabel admin dan buktamu berelasi dengan kardinalitas one to many
(1:N) sehingga primary key yang ada ditabel admin akan menjadi
foreign key di tabel bukutamu.
f. Tabel artikel dan komentar berelasi dengan kardinalitas one to many
(1:N) sehingga primary key yang ada ditabel artikel akan menjadi
foreign key di tabel komentar.
2.3 Desain Interface
HEADER
MENU 1
MENU 2
MENU 3
MENU 4
MENU N
SIDEBAR 1
CONTENT
SIDEBAR 2
SIDEBAR N
FOOTER
Gambar 2.9 Interface halaman depan website
Pada interface halaman depan website sekolah ini, terdapat bagian header,
menu atas, content, dan sidebar. Pada bagian header digunakan untuk meletakkan
header maupun banner gambar sekolah atau judul website itu sendiri. Bagian
menu digunakan untuk menu-menu yang ada pada website sekolah yaitu beranda,
sejarah singkat tentang sekolah, visi & misi, sarana dan prasarana, dll. Pada
bagian content digunakan untuk content atau isi dari website tersebut seperti
13
artikel, berita, dan lain-lain. Bagian sidebar digunakan untuk meletakkan content
lainnya seperti list artikel terbaru, list komentar, dan lain-lain. Dan terakhir pada
bagian footer biasanya dipakai untuk menaruh copyrights ataupun credits dari
suatu website.
Gambar 2.10 Interface halaman login website
Pada halaman user ini terdapat dua form yang digunakan oleh admin untuk
masuk ke sistem atau halaman administrator , form tersebut adalah form username
dan password, dan sebuah tombol user.
14
Gambar 2.11 Interface halaman admin pada website sekolah
Pada halaman admin ini sama seperti halaman depan namun bedanya adalah
pada halaman ini terdapat icon-icon dengan fungsinya masing-masing. Icon-icon
tersebut diilustrasikan sebagai fungsi yang ada pada website tersebut yaitu fungsi
untuk data siswa, guru, artikel, halaman, komentar, buku tamu, dan lain-lain.
Selain itu juga terdapat sidebar berupa menu user, fungsinya sama seperti iconicon yang ada pada halaman content.
15
BAB III
HASIL DAN PEMBAHASAN
3.1 Hasil dan Pembahasan Website
Gambar 3.1 Halaman depan website sekolah
Tampilan pada gambar diatas adalah halaman depan atau beranda dari website
sekolah ketika pengunjung membuka website ini. Pada halaman depan
menampilkan artikel maupun berita yang diposting oleh admin.
Gambar 3.2 Halaman artikel/berita pada website sekolah
16
Halaman artikel atau berita memuat artikel yang diposting oleh admin.
Pengunjung dapat memberikan komentar pada form komentar yang terdapat
dibawah artikel tersebut.
Gambar 3.3 Halaman buku tamu pada website
Pada website ini terdapat buku tamu yang dapat digunakan oleh pengunjung
untuk menulis pesan, kritik, maupun saran kepada sekolah tersebut. Pengunjung
cukup memasukkan nama, email, dan isi pesan ke dalam form yang telah tersedia.
Pesan akan ditampilkan pada halaman tersebut jika admin telah menyetujuinya.
17
Gambar 3.4 Halaman direktori siswa
Pada halaman ini, pengunjung dapat melihat detail siswa dengan mengeklik
menu direktori siswa yang ada pada sidebar diwebsite ini. cukup mengklik detail
maka akan muncul informasi tentang siswa tersebut namun informasi yang
ditampilkan secara singkat saja. Untuk memudahkan melihat data siswa, maka ada
form pencarian siswa, hanya dengan memasukkan nama siswa maka akan tampil
hasil pencarian data siswa tersebut.
Gambar 3.5 Informasi yang ditampilkan pada data siswa
Halaman detail data siswa hanya menampilkan data siswa secara singkat, tidak
terlalu lengkap karena untuk menjaga informasi siswa pada sekolah ini.
18
Gambar 3.6 Halaman direktori guru
Sama seperti halaman direktori siswa, pada halaman ini pengunjung dapat
melihat detail guru dengan mengeklik menu direktori guru yang ada pada sidebar
diwebsite ini. cukup mengklik detail maka akan muncul informasi tentang guru
tersebut namun informasi yang ditampilkan secara singkat saja. Untuk
memudahkan melihat data guru, maka ada form pencarian guru, hanya dengan
memasukkan nama guru maka akan tampil hasil pencarian data guru tersebut.
Gambar 3.7 Halaman user admin
Tampilan pada gambar diatas merupakan halaman user untuk admin agar bisa
masuk ke halaman administrator. Pada halaman administrator tersebutlah admin
dapat mengelola data-data seperti data siswa, guru, artikel, halaman, komentar,
dan buku tamu.
19
Gambar 3.8 Halaman dashboard
Halaman dashboard merupakan halaman pertama yang muncul ketika admin
telah user ke website sekolah ini. dalam halaman ini terdapat icon-icon yang
merujuk pada fungsi yang sesuai dengan ilustrasi pada icon tersebut. Fungsifungsi tersebut seperti ubah profil, ubah password, data siswa, data guru, artikel,
halaman, komentar, dan buku tamu.
Gambar 3.9 Halaman manage data siswa
20
Pada halaman manage data siswa, admin dapat menambah, mengubah, dan
menghapus serta mencari data siswa. Dalam halaman ini juga menampilkan
banyaknya data siswa perkelas.
Gambar 3.10 Halaman tambah data siswa
Pada halaman tambah data siswa digunakan admin untuk menambah data
siswa. Untuk menambah data siswa, admin perlu memasukkan data seperti NIS,
Nama, Jenis Kelamin, Tempat dan Tanggal lahir, Telpon, Wali Murid, Kelas, dan
Alamat. Setelah mengklik tombol Submit, maka halaman akan menuju ke
halaman manage data siswa.
Gambar 3.11 Halaman manage data guru
21
Pada halaman manage data guru, admin dapat menambah, mengubah, dan
menghapus serta mencari data guru.
Gambar 3.12 Halaman tambah data guru
Pada halaman tambah data guru digunakan admin untuk menambah data guru.
Untuk menambah data guur, admin perlu memasukkan data seperti NIP, Nama,
Jenis Kelamin, Tempat dan Tanggal lahir, Telpon, Jabatan, Mata Pelajaran, dan
Alamat. Setelah mengklik tombol Submit, maka halaman akan menuju ke
halaman manage data guru.
Gambar 3.13 Halaman manage page
22
Pada halaman manage page menampilkan daftar halaman utama yang ada
pada website sekolah ini seperti halaman sejarah singkat sekolah, visi dan misi,
serta sarana dan prasarana. Admin dapat membuat, mengubah, dan menghapus
data halaman ini.
Gambar 3.14 Tambah halaman page pada website sekolah
Pada halaman ini, admin dapat membuat halaman baru untuk website sekolah
ini. data yang dimasukkan cukup judul dan isinya saja. Judul halaman ini akan
menjadi salah satu menu atas pada website ini. Untuk teks editor menggunakan
TinyMCE agar dalam pembuatan halaman baru lebih mudah.
Gambar 3.15 Halaman manage artikel atau berita
23
Halaman manage berita digunakan untuk membuat dan mengubah artikel atau
berita yang diposting pada website sekolah ini. Selain itu pada halaman ini dapat
menghapus artikel atau berita dan dapat mencari artikel tersebut pada form
pencarian artikel dihalaman ini. pada halaman ini juga dapat langsung melihat
artikel atau berita yang sudah dibuat sebelumnya tanpa perlu ke halaman depan
atau beranda.
Gambar 3.16 Halaman tambah artikel/berita
Sama seperti pada halaman tambah page baru, pada halaman ini admin juga
dapat membuat artikel atau berita baru untuk website sekolah ini. data yang
dimasukkan cukup judul dan isinya saja. Untuk teks editor menggunakan
TinyMCE agar dalam pembuatan artikel baru lebih mudah.
24
Gambar 3.17 Halaman list komentar
Pada halaman list komentar, admin dapat melihat komentar serta detail
komentar yang ditulis oleh pengunjung pada website sekolah ini. jika terdapat
komentar yang negatif maka admin dapat menghapus komentar tersebut. Detail
komentar yang tampil pada halaman tersebut adalah nama, email, dan isi dari
komentar yang ditulis serta artikel yang dikomentari oleh pengunjung.
Gambar 3.18 Halaman list buku tamu
Pada halaman list buku tamu, admin dapat melihat pesan buku tamu yang
ditulis oleh pengunjung website. Pesan buku tamu akan ditampilkan pada halaman
buku tamu jika admin telah mengubah status pending menjadi approve. Selain itu
jika terdapat pesan yang negatif maka admin berhak menghapus pesan buku tamu
tersebut.
25
Gambar 3.19 Ubah pesan buku tamu
Pada halaman ini, admin dapat mengubah pesan buku tamu yaitu dari status
pending menjadi approve atau sebaliknya sesuai dengan keinginan admin. Jika
statusnya diubah menjadi approve maka pesan buku tamu tersebut akan
ditampilkan pada halaman buku tamu diwebsite ini, jika diubah pending maka
pesan tersebut tidak akan ditampilkan.
26
3.2 Kelebihan dan Kekurangan
Dalam pembuatan website ini tidak terlepas dari kekurangan dan kelebihan
yang ada pada website sekolah ini. kelebihan dan kekurangan yang ada pada
website sekolah ini yaitu.
Kelebihan
a. Interface yang memudahkan user dalam menggunakan website ini.
b. Memberikan informasi tentang data siswa dan guru secara ringkas.
c. Dapat mencari data siswa maupun guru, selain itu juga dapat mencari
artikel atau berita yang ada pada website.
d. Terdapat form komentar dan buku tamu pada website ini.
Kekurangan
a. Tidak terdapat fitur seperti penerimaan siswa baru.
b. Siswa dan guru maupun pengunjung lain tidak dapat user pada website ini.
c. Tidak menyimpan data-data alumni sekolah.
d. Pencarian data belum terlalu lengkap misal untuk mencari data siswa
berdasarkan kelas, dan lain sebagainya.
27
BAB IV
KESIMPULAN DAN SARAN
4.1 Kesimpulan
Website ini dibuat untuk menyampaikan informasi kepada masyarakat umum.
Website ini khusus dibuat untuk kalangan sekolah yang memuat informasi tentang
sekolah tersebut agar mereka yang ingin mengetahui informasi terbaru dapat
melihat pada website sekolah.
Website ini hanya dikelola oleh admin, sedangkan guru, siswa, dan user lain
hanya dapat melihat informasi tersebut. Pengelolaan data hanya admin yang
menanganinya. Admin dapat mengelola data siswa dan guru seperti menambah,
mengubah, dan menghapus data tersebut. Selain itu admin dapat membuat
halaman dan artikel baru serta mengubah dan menghapusnya. Serta admin juga
dapat mengelola komentar maupun pesan buku tamu yang diisi oleh pengunjung.
4.2 Saran
Kami berharap project kami dapat bermanfaat bagi para pembaca agar dapat
menjadi contoh yang baik bagi teman mahasiswa yang lain. Pada project website
sekolah ini masih jauh dari kata sempurna, maka dari itu besar harapan kami
untuk dapat dikembangkan oleh teman mahasiswa yang lain khususnya
mahasiswa teknik informatika.
28
DAFTAR PUSTAKA
SIRKEL,
Laboratorium.
Modul
Praktikum
Pemrograman
Web.
Laboratorium Sistem Informasi dan Rekayasa Perangkat Lunak. 2012. Jurusan
Teknik Informatika Fakultas Teknologi Industri Universitas Islam Indonesia
Yogyakarta.
29
LAMPIRAN
Lampiran 1: Lembar asistensi 1 dan 2
Lampiran 2: Source code website dan softcopy laporan dalam format pdf.