39
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 Programming Project Praktikum Pemrograman Web - Website Sekolah

Embed Size (px)

DESCRIPTION

Laporan Programming Project Praktikum Pemrograman Web - Website Sekolah

Citation preview

Page 1: Laporan Programming Project Praktikum Pemrograman Web - Website Sekolah

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

Page 2: Laporan Programming Project Praktikum Pemrograman Web - Website Sekolah

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

Page 3: Laporan Programming Project Praktikum Pemrograman Web - Website Sekolah

i

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

Page 4: Laporan Programming Project Praktikum Pemrograman Web - Website Sekolah

ii

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.

Page 5: Laporan Programming Project Praktikum Pemrograman Web - Website Sekolah

iii

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.

Page 6: Laporan Programming Project Praktikum Pemrograman Web - Website Sekolah

iv

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

Page 7: Laporan Programming Project Praktikum Pemrograman Web - Website Sekolah

v

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

Page 8: Laporan Programming Project Praktikum Pemrograman Web - Website Sekolah

vi

Banner gambar spanduk

Sidebar bagian samping

List daftar

Copyrights hak cipta

Credits kredit website

Dashboard dasbor

Manage mengatur

Page halaman

Approve diterima

Pending ditunda

Page 9: Laporan Programming Project Praktikum Pemrograman Web - Website Sekolah

vii

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

Page 10: Laporan Programming Project Praktikum Pemrograman Web - Website Sekolah

viii

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

Page 11: Laporan Programming Project Praktikum Pemrograman Web - Website Sekolah

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 informasi-

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

Page 12: Laporan Programming Project Praktikum Pemrograman Web - Website Sekolah

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.

Page 13: Laporan Programming Project Praktikum Pemrograman Web - Website Sekolah

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.

Page 14: Laporan Programming Project Praktikum Pemrograman Web - Website Sekolah

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

Page 15: Laporan Programming Project Praktikum Pemrograman Web - Website Sekolah

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.

Page 16: Laporan Programming Project Praktikum Pemrograman Web - Website Sekolah

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

Page 17: Laporan Programming Project Praktikum Pemrograman Web - Website Sekolah

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

Page 18: Laporan Programming Project Praktikum Pemrograman Web - Website Sekolah

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

Page 19: Laporan Programming Project Praktikum Pemrograman Web - Website Sekolah

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.

Page 20: Laporan Programming Project Praktikum Pemrograman Web - Website Sekolah

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

Page 21: Laporan Programming Project Praktikum Pemrograman Web - Website Sekolah

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.

Page 22: Laporan Programming Project Praktikum Pemrograman Web - Website Sekolah

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

CONTENT

SIDEBAR 1

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

Page 23: Laporan Programming Project Praktikum Pemrograman Web - Website Sekolah

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.

Page 24: Laporan Programming Project Praktikum Pemrograman Web - Website Sekolah

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 icon-

icon yang ada pada halaman content.

Page 25: Laporan Programming Project Praktikum Pemrograman Web - Website Sekolah

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

Page 26: Laporan Programming Project Praktikum Pemrograman Web - 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.

Page 27: Laporan Programming Project Praktikum Pemrograman Web - Website Sekolah

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.

Page 28: Laporan Programming Project Praktikum Pemrograman Web - Website Sekolah

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.

Page 29: Laporan Programming Project Praktikum Pemrograman Web - Website Sekolah

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

fungsi tersebut seperti ubah profil, ubah password, data siswa, data guru, artikel,

halaman, komentar, dan buku tamu.

Gambar 3.9 Halaman manage data siswa

Page 30: Laporan Programming Project Praktikum Pemrograman Web - Website Sekolah

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

Page 31: Laporan Programming Project Praktikum Pemrograman Web - Website Sekolah

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

Page 32: Laporan Programming Project Praktikum Pemrograman Web - Website Sekolah

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

Page 33: Laporan Programming Project Praktikum Pemrograman Web - Website Sekolah

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.

Page 34: Laporan Programming Project Praktikum Pemrograman Web - Website Sekolah

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.

Page 35: Laporan Programming Project Praktikum Pemrograman Web - Website Sekolah

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.

Page 36: Laporan Programming Project Praktikum Pemrograman Web - Website Sekolah

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.

Page 37: Laporan Programming Project Praktikum Pemrograman Web - Website Sekolah

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.

Page 38: Laporan Programming Project Praktikum Pemrograman Web - Website Sekolah

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.

Page 39: Laporan Programming Project Praktikum Pemrograman Web - Website Sekolah

29

LAMPIRAN

Lampiran 1: Lembar asistensi 1 dan 2

Lampiran 2: Source code website dan softcopy laporan dalam format pdf.