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

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 Source code Database Tools Software Icon User Background image Selector Error Database management system Local Primary key Username Password Not null Null One to many Foreign key Header

proyek pemrograman kode sumber basis data alat bantu perangkat lunak ikon pengguna gambar latar belakang pemilih kesalahan sistem manajemen basis data lokal kunci utama nama pengguna kata sandi tidak boleh kosong boleh kosong satu ke banyak kunci penghubung kepala

Banner Sidebar List Copyrights Credits Dashboard Manage Page Approve Pending

gambar spanduk bagian samping daftar hak cipta kredit website dasbor mengatur halaman diterima 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 1.2 1.3 Deskripsi Masalah ................................................................................. 1 Batasan Masalah .................................................................................... 2 Sistematika Penulisan ............................................................................ 2

BAB II METODOLOGI ...................................................................................... 4 2.1 2.2 Analisis Kebutuhan ................................................................................ 4 Struktur Tabel dan Relasi Tabel ............................................................. 5 Struktur Tabel ................................................................................. 5 Relasi Tabel .................................................................................. 11

2.2.1 2.2.2 2.3

Desain Interface ................................................................................... 12

BAB III HASIL DAN PEMBAHASAN ............................................................ 15 3.1 3.2 Hasil dan Pembahasan Website ............................................................ 15 Kelebihan dan Kekurangan .................................................................. 26

BAB IV KESIMPULAN DAN SARAN ............................................................ 27 4.1 4.2 Kesimpulan.......................................................................................... 27 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

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.

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.

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.

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

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.

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).

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).

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).

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.