You are on page 1of 122

UNIVERSITAS GUNADARMA

FAKULTAS TEKNOLOGI INDUSTRI

PENULISAN ILMIAH

PENGEMBANGAN SITUS WEB SMAN 1 CIOMAS


DENGAN MENGGUNAKAN TEKNOLOGI
FRAMEWORK CODEIGNITER 1.7.1

Nama : Ibnu Siena Syam


NPM : 50406364
Jurusan : Teknik Informatika
Pembimbing : Dr. Ing. Adang Suhendra., SSi., SKom., MSc.

Diajukan Untuk Melengkapi Syarat


Mencapai Jenjang DIII/ Setara Sarjana Muda
Universitas Gunadarma
2009
PERNYATAAN ORIGINALITAS DAN PUBLIKASI

Saya yang bertanda tangan di bawah ini,

Nama : Ibnu Siena Syam


NPM : 50406364
Judul PI : PENGEMBANGAN SITUS WEB
SMAN 1 CIOMAS DENGAN
MENGGUNAKAN TEKNOLOGI
FRAMEWORK CODEIGNITER 1.7.1

Tanggal Sidang : 1 September 2009


Tanggal Lulus : 1 September 2009

menyatakan bahwa tulisan ini adalah merupakan hasil karya saya sendiri dan dap-
at dipublikasikan sepenuhnya oleh Universitas Gunadarma. Segala kutipan dalam
bentuk apapun telah mengikuti kaidah dan etika yang berlaku. Mengenai isi dan
tulisan adalah merupakan tanggung jawab penulis, bukan Universitas Gunadarma.
Demikian pernyataan ini dibuat dengan sebenarnya dan dengan penuh kesadaran.

Depok, 16-Juli-2009

(Ibnu Siena Syam )

ii
LEMBAR PENGESAHAN

Judul PI : PENGEMBANGAN SITUS WEB SMAN 1 CIOMAS


DENGAN MENGGUNAKAN TEKNOLOGI
FRAMEWORK CODEIGNITER 1.7.1
Nama : Ibnu Siena Syam
NPM : 50406364
Tanggal Sidang : 1 September 2009
Tanggal Lulus : 1 September 2009

Menyetujui

Pembimbing Koordinator PI

(Dr.Ing.Adang Suhendra,SSi.,SKom.,MSc.) (Meilani B. Siregar, SKom.,MMSI.)

Ketua Jurusan Teknik Informatika

(Dr.Ing.Adang Suhendra, SSi., SKom., MSc.)

iii
ABSTRAKSI

Ibnu Siena Syam, 50406364


PENGEMBANGAN SITUS WEB SMAN 1 CIOMAS DENGAN MENG-
GUNAKAN TEKNOLOGI FRAMEWORK CODEIGNITER 1.7.1
PI. Jurusan Teknik Informatika, Fakultas Teknologi Industri, Universitas Gunadar-
ma, 2009
Kata Kunci : Framework, CodeIgniter, Situs web, Sekolah
( xi + 99)

Kebutuhan akan informasi tidak terlepas dari kehidupan saat ini. Banyak
media yang dapat digunakan untuk mendapatkan suatu informasi. Salah satu media
penyebaran informasi yang paling diminati saat ini adalah media internet. Internet
semakin banyak digunakan oleh masyarakat dunia, tidak terkecuali bagi masyarakat
Indonesia, terutama bagi kalangan pelajar dan mahasiswa.
Penyebaran informasi diinternet tidak terlepas dari sebuah layanan yang
bernama situs web (website ). Melalui website informasi dapat disampaikan baik
berbasis teks, grak, suara, animasi, gambar bahkan dalam format video tanpa
dibatasi oleh jarak dan waktu.
Pada kesempatan ini, penulis ingin memanfaatkan media internet untuk mer-
ancang dan membuat situs Sekolah Menengah Atas Negeri 1 Ciomas. Situs ini digu-
nakan sebagai media informasi, yaitu: informasi sekolah, sejarah dan perkembangan,
ekstarkulikuler, visi dan misi, sta pengajar dan lain-lain.
Situs ini dibuat dengan menggunakan Framework CodeIgniter 1.7.1 dengan
teknologi MVC yakni Model View Control. Dengan cara kerja sebagai berikut :
user berhubungan dengan view, dimana didalam view inilah semua informasi dita-
mpilkan. Saat user melakukan permintaan atau request, misal klik tombol maka
request tersebut akan diproses oleh Controller. Apa yang harus dilakukan, data apa
yang diinginkan, apakah ingin melihat data, atau memasukkan data atau mungkin
melakukan validasi data terlebih dahulu, semua diproses di Controller. Kemudian
Controller akan meminta Model untuk menyelesaikan request, entah itu melakukan
query ataupun apapun. Dari Model, data akan dikirim kembali untuk di proses
lebih lanjut di dalam Controller dan baru dari Controller data akan ditampilkan di
View.

Daftar Pustaka (2005-2009)

iv
KATA PENGANTAR

Segala puji dan syukur penulis ke hadirat Allah SWT yang telah memberikan
berkat, anugerah dan karunia yang melimpah, sehingga penulis dapat menyelesaikan
Penulisan Ilmiah ini.
Penulisan Ilmiah ini dibuat guna melengkapi salah satu syarat untuk menye-
lesaikan jenjang D III / setara Sarjana Muda pada Universitas Gunadarma. Ada-
pun judul Penulisan Ilmiah ini adalah "PENGEMBANGAN SITUS WEB SMAN 1
CIOMAS DENGAN MENGGUNAKAN TEKNOLOGI FRAMEWORK CODEIGNITER
1.7.1".
Walaupun banyak kesulitan yang penulis harus hadapi ketika menyusun penulisan
ilmiah ini, namun berkat bantuan dan dorongan dari berbagai pihak, akhirnya tugas
akhir ini dapat diselesaikan dengan baik. Untuk itu penulis tidak lupa mengucapkan
terima kasih kepada:

1. Ibu Prof. Dr. ES. Margianti, SE, MM, selaku Rektor Universitas Gunadarma.

2. Bapak Soebiyantoro SSi., MEng., selaku Dekan Fakultas Teknologi Industri.

3. Ibu Bapak Dr. Ing. Adang Suhendra, Ssi., SKom., MSc., selaku Ketua Juru-
san Teknik Iformatika dan juga selaku sebagai dosen pembimbing yang telah
banyak memberikan bimbingan, arahan, dan waktunya kepada penulis selama
proses pembuatan Penulisan Ilmiah ini berlangsung hingga selesai.

4. Ibu Meilani B. Siregar, SKom., MMSI., selaku Koordinator Penulisan Ilmiah.

5. Bapak Drs. Agus Purwanto, selaku kepala sekolah SMA Negeri 1 Ciomas serta
staf-staf sekolah atas kerjasama dan telah meluangkan waktu pada saat proses
pengambilan data.

6. Untuk Keluarga tercinta, Bapak dan Ibu serta kakak dan adik yang telah
memberikan dukungan moril dan doanya hingga penulis dapat menyelesaikan
Penulisan ilmiah ini.

7. Untuk teman-teman satu bimbingan, Tika, Barli, Indra , Manda, dan Radi
atas kerjasama dan bantuan selama ini.

8. Untuk Teman-teman kelas ex-1IA01, kelas ex-2IA03, kelas 3IA03 angkatan


2006, dan rekan-rekan Monitoring Mahasiswa 2008/2009 yang selalu mem-
berikan dukungan dan dorongan dalam penulisan ini.

9. Dan untuk semua yang tidak dapat disebutkan satu persatu, yang telah mem-
berikan dukungan dan bantuannya baik langsung ataupun tidak langsung
dalam penulisan ini.

v
Akhir kata, hanya kepada Allah SWT jualah segalanya dikembalikan dan
penulis sadari bahwa penulisan ini masih jauh dari sempurna, disebabkan karena
berbagai keterbatasan yang penulis miliki. Untuk itu penulis mengharapkan kritik
dan saran yang bersifat membangun untuk menjadi perbaikan di masa yang akan
datang.

Depok, Juli 2009

Penulis

vi
Daftar Isi

Halaman Judul . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . i
Pernyataan Originalitas dan Publikasi . . . . . . . . . . . . . . . . . . ii
Lembar Pengesahan . . . . . . . . . . . . . . . . . . . . . . . . . . . . iii
Abstraksi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iv
Kata Pengantar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . v
Daftar Isi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . vii
Daftar Gambar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . viii
Daftar Tabel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ix
Daftar Lampiran . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . x
BAB 1 : PENDAHULUAN . . . . . . . . . . . . . . . . . . . . . . . 1
1.1 Latar Belakang . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.2 Batasan Masalah . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.3 Tujuan Penulisan . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.4 Metode Pengembangan Aplikasi . . . . . . . . . . . . . . . . . . 3
1.5 Sistematika Penulisan Ilmiah . . . . . . . . . . . . . . . . . . . . 4
BAB 2 : LANDASAN TEORI . . . . . . . . . . . . . . . . . . . . . 5
2.1 Teknologi Informasi dan Komunikasi . . . . . . . . . . . . . . . 5
2.2 Penyebaran Informasi . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.3 Situs Web (Website ) . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.3.1 Pendukung Website . . . . . . . . . . . . . . . . . . . . . . 7
2.3.2 Kriteria Website . . . . . . . . . . . . . . . . . . . . . . . . 9
2.3.3 Jenis - jenis Website . . . . . . . . . . . . . . . . . . . . . . 10
2.4 Website Sekolah . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
2.5 Bahasa Pemograman Web . . . . . . . . . . . . . . . . . . . . . . 16
2.6 Framework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
2.6.1 Arsitektur . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
2.6.2 Manfaat Framework . . . . . . . . . . . . . . . . . . . . . . 20
2.6.3 Pemilihan Framework . . . . . . . . . . . . . . . . . . . . . 20
2.6.4 Model View Controller (MVC) . . . . . . . . . . . . . . . 21
2.6.5 Jenis-Jenis Framework . . . . . . . . . . . . . . . . . . . . 23
2.7 Pengenalan Database . . . . . . . . . . . . . . . . . . . . . . . . . 23
2.7.1 DDL (Data Denition Language) . . . . . . . . . . . . . 25
2.7.1.1 Create . . . . . . . . . . . . . . . . . . . . . . . . . 25
2.7.1.2 Alter . . . . . . . . . . . . . . . . . . . . . . . . . . 25
2.7.1.3 Drop . . . . . . . . . . . . . . . . . . . . . . . . . . 26
2.7.2 DML (Data Manipulation Language) . . . . . . . . . . . 26
2.7.2.1 Insert . . . . . . . . . . . . . . . . . . . . . . . . . . 26
2.7.2.2 Select . . . . . . . . . . . . . . . . . . . . . . . . . . 26
2.7.2.3 Delete . . . . . . . . . . . . . . . . . . . . . . . . . 27

vii
Update . . . . . . . . . . . . . . . . . . . .
2.7.2.4 . . . . . 27
DCL (Data Control Language) . . . . . . . . . .
2.7.3 . . . . . 27
2.7.3.1 Grant . . . . . . . . . . . . . . . . . . . . . . . . . . 27
2.7.3.2 Revoke . . . . . . . . . . . . . . . . . . . . . . . . . 27
2.8 Diagram UML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
2.8.1 Use Case Diagram . . . . . . . . . . . . . . . . . . . . . . . 28
2.8.2 Class Diagram . . . . . . . . . . . . . . . . . . . . . . . . . 29
2.8.3 Activity Diagram . . . . . . . . . . . . . . . . . . . . . . . . 30
2.8.4 Sequence Diagram . . . . . . . . . . . . . . . . . . . . . . . 32
BAB 3 : ANALISA DAN PEMBAHASAN . . . . . . . . . . . . . 34
3.1 Tinjauan Umum . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
3.2 Analisa Masalah . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
3.3 Pemecahan Masalah . . . . . . . . . . . . . . . . . . . . . . . . . . 35
3.4 Perencanaan Situs . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
3.5 Perancangan Situs . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
3.5.1 Perancangan Database . . . . . . . . . . . . . . . . . . . . 37
3.5.2 Perancangan Tampilan Situs . . . . . . . . . . . . . . . . 42
3.5.2.1 Rancangan Halaman Web . . . . . . . . . . . . . 44
3.5.2.2 Halaman Beranda Tamu (guest ) . . . . . . . . . 45
3.5.2.3 Halaman Beranda Anggota (member ) . . . . . 47
3.5.2.4 Halaman Beranda Administrator . . . . . . . . 48
3.5.3 Perancangan Sistem . . . . . . . . . . . . . . . . . . . . . . 53
3.5.3.1 Use Case Diagram . . . . . . . . . . . . . . . . . . 53
3.5.3.2 Activity Diagram . . . . . . . . . . . . . . . . . . 55
3.5.3.3 Diagram Sequence . . . . . . . . . . . . . . . . . . 57
3.5.3.4 Class Diagram . . . . . . . . . . . . . . . . . . . . 59
3.6 Implementasi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
3.6.1 Framework CodeIgniter . . . . . . . . . . . . . . . . . . . 61
3.6.2 Struktur Direktori . . . . . . . . . . . . . . . . . . . . . . . 62
3.6.3 Helper . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
3.6.3.1 Memuat Helper . . . . . . . . . . . . . . . . . . . 65
3.6.4 Library . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
3.6.5 Permodelan MVC pada CodeIgniter . . . . . . . . . . . 79
3.6.6 Integrasi Framework . . . . . . . . . . . . . . . . . . . . . . 82
BAB 4 : PENUTUP . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
4.1 Kesimpulan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
4.2 Saran . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Bibliogra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Lampiran Output . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99

viii
Daftar Gambar

2.1 Bahasa Pemrograman Web . . . . . . . . . . . . . . . . . . . . . . . . 17


2.2 Model View Controller . . . . . . . . . . . . . . . . . . . . . . . . . . 22
2.3 Use Case Diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
2.4 Class Diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
2.5 Activiti Diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
2.6 Sequence Diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

3.1 Struktur Navigasi Pengunjung . . . . . . . . . . . . . . . . . . . . . . 43


3.2 Struktur Navigasi Admin . . . . . . . . . . . . . . . . . . . . . . . . . 43
3.3 Struktur Navigasi Anggota (Member ) . . . . . . . . . . . . . . . . . . 44
3.4 Halaman Beranda Tamu (Guest ) . . . . . . . . . . . . . . . . . . . . 45
3.5 Halaman Beranda Tamu (Guest ) . . . . . . . . . . . . . . . . . . . . 46
3.6 Halaman Beranda Anggota (Member ) . . . . . . . . . . . . . . . . . . 47
3.7 Halaman Beranda Administrator . . . . . . . . . . . . . . . . . . . . 48
3.8 Halaman Tambah username&password . . . . . . . . . . . . . . . . . 49
3.9 Halaman Tambah Prole Sekolah . . . . . . . . . . . . . . . . . . . . 50
3.10 Halaman Tambah Guru . . . . . . . . . . . . . . . . . . . . . . . . . 51
3.11 Halaman Tambah Berita dan Events . . . . . . . . . . . . . . . . . . 52
3.12 Halaman Tambah Gallery . . . . . . . . . . . . . . . . . . . . . . . . 53
3.13 Use Case Diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
3.14 Activity Diagram Administrator . . . . . . . . . . . . . . . . . . . . . 56
3.15 Activity Diagram Anggota . . . . . . . . . . . . . . . . . . . . . . . . 57
3.16 Diagram Sequence Administrator . . . . . . . . . . . . . . . . . . . . 58
3.17 Diagram Sequence Anggota . . . . . . . . . . . . . . . . . . . . . . . 59
3.18 Class Diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
3.19 Struktur Direktori CodeIgniter . . . . . . . . . . . . . . . . . . . . . . 63
3.20 Model MVC CodeIgniter . . . . . . . . . . . . . . . . . . . . . . . . . 82
3.21 Halaman Home Tamu (guest ) . . . . . . . . . . . . . . . . . . . . . . 84
3.22 Halaman Hubungi Kami . . . . . . . . . . . . . . . . . . . . . . . . . 86
3.23 Halaman Login . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
3.24 Halaman Home Administrator . . . . . . . . . . . . . . . . . . . . . . 90
3.25 Halaman Home Member . . . . . . . . . . . . . . . . . . . . . . . . . 91
3.26 Halaman Prole Sekolah . . . . . . . . . . . . . . . . . . . . . . . . . 92
3.27 Halaman Visi Misi Selangkapnya . . . . . . . . . . . . . . . . . . . . 93
3.28 Halaman Edit Visi Misi . . . . . . . . . . . . . . . . . . . . . . . . . . 94
3.29 Halaman Tambah Data . . . . . . . . . . . . . . . . . . . . . . . . . . 95

ix
Daftar Tabel

2.1 Bahasa Pemograman Web . . . . . . . . . . . . . . . . . . . . . . . . 17

3.1 Tabel Admin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38


3.2 Tabel berita_events . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
3.3 Tabel data_siswa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
3.4 Tabel galery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
3.5 Tabel guru . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
3.6 Tabel pesan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
3.7 Tabel proleskul . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
3.8 Tabel prole_skul . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
3.9 Tabel prole_skul_2 . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

x
Daftar Lampiran

Tampilan Output ............................................................................... 99

xi
Bab 1
PENDAHULUAN

1.1 Latar Belakang

Kebutuhan akan informasi tidak terlepas dari kehidupan saat ini. Banyak me-

dia yang dapat digunakan untuk mendapatkan suatu informasi. Salah satu media

penyebaran informasi yang paling diminati saat ini adalah media internet. Internet

semakin banyak digunakan oleh masyarakat dunia, tidak terkecuali bagi masyarakat

Indonesia, terutama bagi kalangan pelajar, mahasiswa, pengusaha dan pada saat

ini sedang berkembang dan semakin popular, dan juga merupakan suatu kumpulan

jaringan berskala besar atau WAN (Wide Area Network ). Dalam arti sebenarnya,

internet merupakan jaringan tanpa batas yang melibatkan jutaan komputer diselu-

ruh dunia dan menjadikan internet sebagai kata kunci dalam proses penyebaran dan

media mencari informasi, diantaranya dalam bidang ekonomi, pendidikan, pemerin-

tahan, sosial dan lain-lain.

Penyebaran informasi diinternet tidak terlepas dari sebuah layanan yang

bernama website. Melalui website informasi dapat disampaikan baik berbasis teks,

grak, suara, animasi, gambar bahkan dalam format video.

Seiring dengan perkembangan internet yang semakin pesat membuat Univer-

sitas Gunadarma memberikan suatu pengabdian kepada masyarakat didalam dunia

pendidikan yang berupa pembuatan website Sekolah Menengah Atas baik negeri

maupun swasta yang sesuai dengan visi dan misi Universitas Gunadarma. Den-

gan adanya pembuatan website tersebut kiranya dapat memberikan suatu informasi

yang tepat dan terbaik bagi pelajar dalam memilih Sekolah Menengah Atas tanpa

harus datang ke Sekolah Menengah Atas tersebut.

1
2

Pada kesempatan ini, penulis ingin memanfaatkan media internet untuk mer-

ancang dan membuat situs Sekolah Menengah Atas Negeri 1 Ciomas. Situs ini digu-

nakan sebagai media informasi, yaitu: informasi sekolah, sejarah dan perkembangan,

ekstarkulikuler, visi dan misi, sta pengajar dan lain-lain.

Dengan dibuatnya website ini diharapkan dapat memudahkan masyarakat

khususnya warga Sekolah Menengah Atas Negeri 1 Ciomas dalam mendapatkan

informasi mengenai sekolah tersebut. Oleh karena itu penulis mencoba membuat

website ini dengan judul "Pengembangan situs web SMAN 1 Ciomas dengan meng-

gunakan teknologi Framework CodeIgniter 1.7.1". Penulisan ilmiah ini, dibangun

dengan menggunakan framework CodeIgniter sebagai software penunjang pembu-

atan website, dikarenakan CodeIgniter memiliki kemudahan dalam pembuatannya,

ringan dan cepat, selain itu CodeIgniter bersifat Open Source (CodeIgniter yang

didistribusikan secara gratis).

1.2 Batasan Masalah

Pada penulisan ini, penulis membatasi pembahasan pada permintaan sekolah

atas websitenya, dengan menggunakan framework CodeIgniter sebagai framework

dasar pembuatan website, Apache sebagai web server, MySQL sebagai basis data,

dan HTML untuk membangun website. Fasilitas yang diberikan pada website ini

yaitu :

• Multiuser.

• Berita dan Events Sekolah.

• Gallery.

• Data Guru dan Siswa.


3

• Hubungi Kami dan Buku Tamu.

Multiuser dibagi menjadi dua yaitu administrator dan anggota (member ),

dimana keduanya dapat melakukan insert, update, dan delete isi (content ) pada

website.

1.3 Tujuan Penulisan

Tujuan tulisan ini adalah untuk membuat website berisi informasi SMAN 1

Ciomas secara online yang akan memberikan kemudahan dalam mencari informasi

yang dibutuhkan tentang hal-hal yang berkaitan dengan SMAN 1 Ciomas yang

diharapkan dapat lebih efesien dan efektif.

1.4 Metode Pengembangan Aplikasi

Metode yang digunakan dalam penelitian ini, yaitu :

1. Menganalisis kebutuhan user untuk membuat situs web sekolah SMAN 1

Ciomas dengan cara melakukan kunjungan langsung pada sekolah yang bersangku-

tan.

2. Menganalisis suatu masalah yang timbul pada kebutuhan user.

3. Merancang database dan tampilan dari suatu website tersebut.

4. Melakukan proses pembuatan program(coding ) dengan menggunakan frame-

work CodeIgniter.

5. Melakukan proses pembuatan program(coding ) dengan menggunakan frame-

work CodeIgniter.
4

1.5 Sistematika Penulisan Ilmiah

Penulisan Ilmiah ini diuraikan ke dalam 4 bab, yang diharapkan dapat mem-

permudah dan melengkapi penulisan.

Bab 1 PENDAHULUAN

Bab ini berisi hal-hal yang melatar belakangi penulisan, ruang lingkup, tujuan

penelitian, metode penelitian serta sistematika penulisan ilmiah yang digunakan.

Bab 2 LANDASAN TEORI

Bab ini menguraikan beberapa teori yang menunjang penelitian ilmiah serta

istilah-istilah yang digunakan dalam penulisan ini.

BAB 3 ANALISA DAN PEMBAHASAN

Bab ini membahas analisis kongurasi website sekolah yang akan dibuat serta

merancang framework sebagai dasar pembuatan website.

BAB 4 PENUTUP

Bab ini berisi tentang simpulan dan saran dari pembahasan dalam penulisan

ilmiah ini.
Bab 2
LANDASAN TEORI

2.1 Teknologi Informasi dan Komunikasi

Informasi adalah data yang telah diproses menjadi bentuk yang memiliki

arti bagi penerima dan dapat berupa fakta, suatu nilai yang bermanfaat. Jadi ada

suatu proses transformasi data menjadi suatu informasi yaitu input - proses - output.

Kualitas informasi tergantung dari 3 hal, yaitu informasi harus :

• Akurat, berarti informasi harus bebas dari kesalahan-kesalahan dan tidak bias
atau menyesatkan. Akurat juga berarti informasi harus jelas mencerminkan

maksudnya.

• Tetap pada waktunya, berarti informasi yang datang pada penerima tidak

boleh terlambat.

• Relevan, berarti informasi tersebut menpunyai manfaat untuk pemakainya.

Relevansi informasi untuk tiap-tiap orang satu dengan yang lainnya berbeda.

Istilah teknologi informasi mulai populer di akhir tahun 70-an. Pada masa

sebelumnya istilah teknologi informasi biasa disebut teknologi komputer atau pengo-

lahan data elektronis (electronic data processing ). Teknologi informasi didenisikan

sebagai teknologi pengolahan dan penyebaran data menggunakan perangkat keras

(hardware ) dan perangkat lunak (software ), komputer, komunikasi, dan elektronik

digital.

Komunikasi didenisikan sebagai suatu proses penyampaian informasi (pesan,

ide, gagasan) dari satu pihak kepada pihak lain agar terjadi saling mempengaruhi

diantara keduanya. Pada umumnya, komunikasi dilakukan dengan menggunakan

5
6

kata-kata (lisan) yang dapat dimengerti oleh kedua belah pihak. Namun perkem-

bangan komunikasi sudah bukan hanya melalui kata-kata (lisan), tetapi juga dengan

menggunakan media informasi seperti media cetak dan media elektronik.

Dengan adanya media-media informasi tersebut dibutuhkan sebuah teknologi

untuk mendukukung agar proses komunikasi berjalan lancar. Disinilah peranan

teknologi informasi sangat dibutuhkan.

2.2 Penyebaran Informasi

Proses komunikasi yang pada intinya adalah menyampaikan infomasi dari

suatu pihak ke pihak lain, salah satunya adalah penyebaran informasi atau yang

biasa disebut dengan penyebaran informasi. Tujuan penyebaran informasi adalah

menyampaikan informasi dari suatu pihak kepada khalayak ramai ditujukan agar

semua pihak dapat mengetahui informasi yang diberikan dengan mudah melalui se-

buah media komunikasi. Penyebaran informasi tersebut dapat berupa berita aktual,

dan promosi atau informasi yang diberikan untuk tujuan meningkatkan populari-

tas. Dalam penerapannya, penyebaran informasi dilakukan di hampir semua bidang

yaitu dalam bidang bisnis, hiburan, kesehatan, dan pendidikan. Media komunikasi

terbagi menjadi 3 macam yaitu :

• Media Komunikasi Visual contohnya poster, iklan , brosur, website.

• Media Komunikasi Audio contohnya radio.

• Media Komunikasi Audiovisual contohnya CD interaktif, televisi, video.

Media komunikasi sebagai jembatan penyampaian informasi ke publik. Den-

gan adanya berbagai media komunikasi ini penyampaian segala informasi lebih mu-

dah dan cepat sampai pada publik. Media komunikasi yang efektif saat ini adalah
7

situs web (website ), karena website saat ini lebih popular, murah dan cepat serta

terbaru (uptodate ).

2.3 Situs Web (Website )

Situs Web (Website ) adalah merupakan dokumen yang tersimpan dalam web

server yang memiliki jenis dan topik tertentu. Webpage atau yang lebih kita den-

gar sebagai homepage, adalah suatu halaman khusus dari situs web tertentu yang

tersimpan dalam bentuk le. Dalam homepage tersimpan informasi dan link yang

menghubungkan informasi ke informasi lain baik itu page yang sama atau pun web

page lain pada website yang berbeda.

2.3.1 Pendukung Website

Hal - hal yang menjadi pendukung jalannya suatu website antara lain adalah

1. Internet

Internet adalah sekumpulan dari beberapa komputer, jaringan dan gateway

yang berkomunikasi antara satu dengan yang lainnya. Komunikasi berlang-

sung dengan memakai dokumen yang formatnya sama yang disebut protokol

TCP/IP. Pusat internet merupakan pengatur komunikasi data kecepatan ting-

gi (high-speed ) diantara beberapa komputer. Jumlah komputer yang terkait

bisa mencapai ratusan atau ribuan, dan masing-masing bisa berisikan aneka

ragam informasi. Disamping itu ada beberapa komputer yang tugasnya mem-

bantu penyaluran (me-rutekan) informasi dan data. Dengan kemampuan ini

maka internet dapat menawarkan sejumlah jasa ke pemakai, antara lain : per-

cakapan(chatting), surat elektronik(e-mail), WWW, ftp, newsgroup, gopher,

telnet dan lain sebagainya.


8

2. URL (Uniform Resource Locators)

URL atau Uniform Resource Locators adalah data berisikan alamat internet

dari suatu situs Web atau sumber daya dalam WWW, atau protokol yang digu-

nakan untuk mengaksesnya. Bentuk umum URL ialah http:// yang berisikan

alamat internet dari suatu halaman Web yang dapat disebut sebagai pro-

tokol di internet yang menyebabkan browser dapat mengambil suatu informasi

dari server WWWW. Bentuk lain dari URL ialah gopher:// dan ftp:// yang

merupakan jasa pelayanan internet yang digunakan untuk transfer le dari

satu komputer ke komputer lain melalui saluran telepon biasa dalam bentuk

WWW.

3. Web Server

Web server adalah sistem untuk menjalankan situs Web yang menempatkan se-

mua informasi di dalam medianya, yang berupa perangkat lunak dan perangkat

keras, untuk menjalankan situs Web yang terkandung didalamnya. Dalam in-

ternet yang menjadi server Web adalah providernya.

4. World Wide Web (WWW)

World Wide Web atau WWW merupakan hubungan antar dokumen pada

server http diseluruh dunia. Dokumen yang ada dalam WWW dikenal sebagai

halaman atau halaman web, yang ditulis menggunakan bahasa HTML. Hala-

man Web identik dengan suatu alamat di internet yang biasa dinamakan URL

(Uniform Resource locators) sebagai penentu nama komputer dan jalur yang

dapat diakses, yang ditransmisikan dari satu titik ke titik lain oleh pemakai

http. Halaman Web biasanya berisikan informasi berupa teks, gambar/image,

grak, cuplikan lm dan suara/lagu.


9

Isi halaman Web itu biasanya berbentuk kecil dan akan ada program kecil

yang menjalankannya sewaktu obyek tersebut diaktifkan. Obyek tersebut di-

namakan Hyperlink. Pengunjung situs (site) juga bisa men-download le dan

mengirim pesan dan kesan melalui e-mail dengan memanfaatkan link pada

halaman Web.

5. Browser Web

Merupakan software penterjemah le HTML menjadi halaman Web untuk

kemudian ditampilkan di monitor, elemen dari browser Web yaitu halaman

Web yang berisi teks informatif, citra yang berupa gambar, Hypertext link

yang intraconnect dan interconnect halaman Web.

2.3.2 Kriteria Website

Media website berkembang cepat, ide, proses dan perangkat aplikasi pengem-

bangan website baru bermunculan dengan cepat. Untuk mengawasi dan mengikuti

satu-persatu akan sangat melelahkan, tapi tidak dengan mengikuti suatu garis besar

pedomannya dalam mendesain sebuah situs web yang baik.

Kriteria website yang baik menurut Academy of Digital Arts & Sciences

dalam artikelnya di Adobe.com antara lain.

1. Content

Content yang baik akan menarik, relevan, dan pantas untuk target audiens

situs web tersebut. Content yang baik juga harus dibikin khusus untuk web

bukan hanya diambil dari media lain dan informasi yang disajikan aktual.

Gaya penulisannya pun harus disesuaikan dengan web dan target audiencenya.
10

2. Struktur dan Navigasi

Dua Elemen ini adalah penting untuk menciptakan kepercayaan pengunjung

situs kepada situs web anda, membimbing dan memberikan mereka kendali

setiap saat.

3. Desain Visual

Visual Design yang baik menarik, berkualitas tinggi (berukuran le yang

masuk akal) dan mendukung content, struktur dan navigasi, sambil menam-

bahkan elemen-elemen penarik perhatian seperti gambar dan animasi.

4. Interaktivitas

Keindahan Web adalah bahwa di web dimungkinkan pengunjung situs anda

berinteraksi dengan situs anda, anda, pengunjung situs web yang lain (inilah

dasar komunitas sebuah situs web), dan dengan komputernya. Interaktivitas

adalah apa yang melibatkan pengguna situs web anda dalam user experience

yang anda rancang dengan situs web anda.

2.3.3 Jenis - jenis Website

Klasikasi website berdasarkan

1. Situs Perusahaan

Website yang menekankan informasi suatu perusahaan dalam bentuk company

prole di internet.

2. E-learning

Website yang menyediakan informasi sistem pengajaran, sistem pelatihan,

berbasis internet. Dengan E-Learning masyarakat terutama insan pelajar da-

pat mengikuti kegiatan belajar secara online melalui internet.


11

3. E-Commerce

Website yang menyediakan informasi produk dalam bentuk katalog online dan

dilengkapinya dengan sistem order transaksi online.

4. Situs Portal

Website yang banyak sekali memiliki fasilitas dan tur, sehingga terbentuklah

suatu komunitas online dari website tersebut. contoh yahoo.com yang memi-

liki banyak komunitas seperti yahoo group, yahoo mail, yahoo game, yahoo

nance, yahoo chat dsb.

5. Situs Pribadi

Website pribadi yang menampilkan informasi prol pemiliknya. Juga dapat

berbentuk blog pribadi.

6. Situs Jejaring Sosial

Website yang memiliki fungsi sebagai media interaksi sosial dan sebagai media

komunikasi yang efektif bagi pemerintah untuk mendapatkan masukan lang-

sung dari masyarakatnya. Sudah banyak situs jejaring sosial yang terkenal,

seperti Friendster, Facebook.

7. Situs Pendidikan

Website yang menyediakan informasi kegiatan pendidikan dari suatu lembaga

pendidikan. Situs pendidikan terbagi menjadi 2 kategori yaitu :

(a) Situs Perguruan Tinggi contohnya Sekolah Tinggi, Akademi dan Univer-

sitas.

(b) Situs Sekolah contohnya SD, SMP, SMA.


12

2.4 Website Sekolah

Salah satu jenis website yang akan dibahas pada penulisan ini adalah si-

tus pendidikan untuk kategori situs sekolah khususnya pada tingkat SMA. Website

sekolah memiliki beberapa keuntungan, diantaranya :

1. Memperkenalkan prol sekolah.

Membuat orang-orang mengerti dimana, bagaimana dan apa hebatnya seko-

lah, tentu saja harus ada informasi. Prol sekolah bisa membuat masyarakat

mengetahui informasi tentang sekolah tersebut seperti:

• Fasilitas yang tersedia.

• Kurikulum intra dan ekstrakurikulernya.

• Dimana lokasi sekolah, apakah lokasinya mudah diakses.

• Prestasi sekolah tersebut.

• Berapakah biaya yang harus dikeluarkan untuk bersekolah di sekolah


tersebut.

• Kegiatan-kegiatan sekolah tersebut.

• Guru-guru di sekolah tersebut.

• Contact information untuk menanyakan segala hal yang berkaitan dengan

sekolah tersebut.

• Dan lain sebagainya.

Betapa banyak informasi yang bisa di tampilkan dan betapa banyak pula man-

faatnya baik dari sisi pemilik situs (sekolah), orang tua calon siswa, orang tua

siswa, bahkan alumni.


13

2. Media komunikasi antara sekolah dengan dunia luar.

Siapapun, dimanapun dan kapanpun orang bisa berkomunikasi dengan seko-

lah melalui media website di Internet. Bentuk komunikasi yang terjalin di-

antaranya:

• komunikasi antar siswa melalui media forum.

• komunikasi antara orang tua siswa/calon siswa dengan sekolah melalui

media email ataupun form kontak di website.

• komunikasi antara sekolah dengan institusi pendidikan di dalam/luar


negeri.

• komunikasi antara sekolah dengan alumni.

3. Media resmi sekolah.

Media resmi sekolah untuk media publikasi informasi resmi ke masyarakat,

seperti:

• Pengumuman.

• Press release.

• Berita resmi sekolah

Ada beberapa hal yang harus kita pertimbangkan pada saat kita ingin mem-

buat sebuah situs sekolah, diantaranya kita harus memperhatikan :

(a) Pemilihan warna.

Warna merupakan salah satu elemen yang penting dalam tampilan se-

buah situs. Situs dengan pemilihan warna yang baik akan membuat

pengakses nyaman dan mempunyai kesenangan tersendiri pada saat dia

mengakses situs dan membaca isi di dalamnya.


14

(b) Desain Struktur Content.

Struktur content yang baik adalah bisa membuat pengunjung merasa

mudah dalam mencari sebuah informasi.

(c) Desain Tata Letak Situs.

Meliputi bagaimana penempatan isi situs secara umum. Isi situs se-

cara umum seperti ada sebuah menu, lalu ada isi (content ) , header

(title), Footer, dan isi-isi lainnya menyesuaikan struktur situs yang su-

dah kita rancang sebelumnya. Lalu misalnya ada sebuah foto yang ingin

anda tonjolkan/tampilkan, bagaimana penempatannya? Banner ? dan

elemen-elemen lain dari sebuah situs. Kombinasi tata letak dari semua

elemen-elemen yang ingin ditampilkan akan berpengaruh pada tampilan

dan selanjutnya pengunjung akan menilai tata letak situs anda.

(d) Desain Gras

Desain gras merupakan elemen utama yang diperhatikan oleh pengun-

jung situs karena disini ada sebuah kondisi dimana pengunjung akan

berkomentar, situs ini bagus atau tidak. Parameter-parameter yang ki-

ta bahas sebelumnya seperti desain layout, struktur content dan lainnya

sangat berpengaruh untuk desain gras situs anda. Terutama untuk de-

sain tata letak biasanya menjadi satu dalam proses desain. Itu hanya

masalah cara dan kebiasaan dari masing-masing desainer.

(e) Navigasi

Apakah navigasi yang digunakan memudahkan pengunjung untuk men-

cari informasi dalam situs tersebut ? Navigasi yang baik tergantung

dari struktur menu yang disusun pada saat pembuatan struktur content

secara menyeluruh. Untuk implementasinya di situs bisa menggunakan


15

berbagai macam cara seperti :

• pull down menu.

• jump menu (select form).

• tree menu.

Menu-menu tersebut pada umumnya dibuat dengan pemrograman javascript,

applet maupun yang lainnya dan perlu juga diperhatikan kompatibilitas-

nya dengan browser-browser yang umum dipakai.

(f) Ketepatan isi

Apakah di situs tersebut terbebas dari broken link ? bebas dari error? Pa-

da kasus yang umum hal ini sering terjadi pada saat halaman yang kita tu-

ju tidak ada isinya (The page cannot be found), lalu ada aplikasi-aplikasi

yang mengalami gangguan/error, atau bahkan Membangun & Meman-

faatkan website Sekolah ada yang melakukan percobaan-percobaan/trial

situs di area aktif situs tersebut (try & error). Terkadang para web de-

veloper lupa untuk tidak melakukan developent atau uji coba di area

server yang sudah aktif/running. Tentunya broken link ataupun error ta-

di harus diusahakan seminimal mungkin untuk sebuah situs yang sudah

bisa diakses di internet. Hal tersebut bisa menjadi bug atau titik lemah

sebuah situs yang seringkali menjadi celah para hacker untuk merusak

situs tersebut.

(g) Mobilitas Content

Apakah informasi di situs selalu diperbaharui dan tidak statis ? adakah

sebuah kolom interaktif antara pemilik situs dengan pengunjung situs

atau bahkan antar pengunjung itu sendiri ? Pengunjung tentunya selalu

ingin melihat sesuatu yang baru terutama informasi yang ditampilkan.


16

Bila mereka melihat isi situs selalu sama dan tidak berubah dalam jang-

ka waktu tertentu maka mereka akan menilai situs ini statis dan tidak

menarik lagi untuk mereka kunjungi.

(h) Esiensi

Dalam point ini kita bicara mengenai konsistensi penempatan dan tampi-

lan untuk content desain di setiap halaman. Hal ini akan mempermudah

pengunjung dalam pencarian informasi, tidak membingungkan mereka

dan dengan adanya konsistensi tersebut akan mempercepat loading time

halaman web. Bayangkan bila ada sebuah situs dimana setiap halaman

memiliki perbedaan dalam tata letaknya, misalkan dari sisi penempatan

isi, warna teks, penempatan menu dan lain sebagainya. Pengunjung akan

kebingungan dan harus menyediakan waktunya untuk memahami mak-

sud dan isi situs tersebut "per halaman". Sebuah kejadian yang membuat

pengunjung merasa malas melihat halaman berikutnya.

2.5 Bahasa Pemograman Web

Dalam pembuatan website dapat dibaca oleh browser adalah HTML. HTML

merupakan bahasa standar yang digunakan untuk dokumen WWW. Bahasa HTML

merupakan tag (akhiran) yang menandakan cara browser menampilkan elemen ha-

laman seperti teks dan gambar dan cara browser menanggapi sesuatu tindakan

tertentu dari pemakai seperti Hyperlink dengan hanya meng-klik mouse dan/atau

menekan keyboard. Disamping bahasa HTML ada bahasa pemograman lain yag

dapat disinergikan dengan HTML. Bahasa-bahasa pemograman yang dipakai dapat

dilihat pada tabel berikut:


17

Tabel 2.1: Bahasa Pemograman Web

ASP Java/JSP PHP


ColdFusion JavaScript Python
Flash/Actionscript Perl Ruby

Menurut situs berdasarkan sumber http://webdesign.about.com/ pemogra-

man yang paling sering digunakan adalah php, berikut adalah hasil polling yang

dilakukan oleh web tersebut.

Gambar 2.1: Bahasa Pemrograman Web

Dari gambar diatas dapat dilihat bahwa bahasa pemograman yang paling

banyak digunakan oleh programmer adalah PHP(PHP HyperText PreProcessor).

PHP adalah bahasa pemrograman yang berjalan pada sisi server (server side) yang

digunakan untuk pengembangan Web dan dapat disatukan dengan HTML. PHP

bersifat dinamis, artinya dengan le yang sama dapat menghasilkan output yang

berbeda-beda.
18

Alasan mengapa php banyak digunakan oleh pembuat website dapat dilihat

dari kelebihan-kelebihan php, yakni sebagai berikut:

1. Gratis.

2. Kode program (script ) terintegrasi dengan le HTML, sehingga developer bisa

berkonsentrasi pada penampilan dokumen web nya.

3. Tidak ada proses compiling dan linking.

4. Berorientasi obyek (object oriented ).

5. Sintaksis pemrogramannya mudah dipelajari karena menyerupai bahasa C.

6. Integrasi yang luas ke berbagai server basis data. Basis data yang didukung

oleh PHP: Oracle, Sybase, MySQL, mSQL, PostgreeSQL, Solid, ODBC, Ad-

abasD, FilePRo, Velocis, Informix, dBase, UNIX dbm.

7. MultiPlatform, PHP hampir dapat digunakan di hampir semua server web

yang ada di pasaran seperti Apache, AOLServer, fhttpd, phttpd, Microsoft IIS

dan lain-lain dengan berbagai sistem operasi seperti Linux, FreeBSD, Unix,

Solaris dan Windows sehingga hambatan teknis dapat lebih ditekan.

Kemudahan-kemudahan yang ada dalam php membuat para pembuat website

leluasa dalam membuat web yang dinamis. Perkembangan teknologi juga telah

melahirkan beberapa metodologi khusus berbasis php yang dapat digunakan untuk

membuat website dengan tujuan memudahkan para pembuat website. Salah satu

metodologi khusus yang digunakan adalah dengan menggunakan Framework.


19

2.6 Framework

Framework adalah sekumpulan library yang diorganisasikan pada sebuah ran-

cangan arsitektur untuk memberikan kecepatan, ketepatan, kemudahan dan konsis-

tensi di dalam pengembangan aplikasi dari denisi tersebut, framework mengandung

unsur-unsur berikut :

• Librari

• Arsitektur

• Metodologi

Framework menyediakan pustaka yang lengkap dan terintegrasi. Unsur ini-

lah yang paling banyak memberikan keuntungan bagi pengembang aplikasi. Sebagai

contoh, framework aplikasi web menyediakan library-library dasar berkaitan layanan

web, seperti authentication, database access, html generation, template engine, ses-

sion management, caching, searching, email, http, pdf, zip dan ajax. Framework

juga menyediakan sarana extension untuk pustaka-pustaka yang belum tersedia atau

pustaka yang perlu ditingkatkan kemampuannya.

2.6.1 Arsitektur

Sebuah aplikasi membutuhkan rancangan bagaimana sistem dibangun, yaitu

bagaimana elemen-elemen di dalam aplikasi disusun dan diintegrasikan, seperti pen-

gorganisasian le dan pustaka, dan bagaimana pustaka-pustaka digunakan. Frame-

work menyediakan struktur aplikasi dan bagaimana interaksi di dalam struktur

tersebut. MVC (Model View Controller ) adalah salah satu pola rancangan yang

banyak digunakan dalam arsitektur aplikasi saat ini.


20

2.6.2 Manfaat Framework

Beberapa manfaat yang dapat kita peroleh dengan menggunakan framework

dalam pengembangan aplikasi :

• penggunaan komponen-komponen reusable, waktu pengembangan lebih singkat

penerapan design patterns memudahkan dalam rancangan, pengembangan dan

pemeliharaan sistem.

• stability dan reliability, aplikasi yang kita bangun lebih stabil dan handal kare-

na berbasis pada framework yang sudah teruji stabilitas dan kehandalannya.

• Coding style konsisten, memudahkan dalam membaca kode dan dalam mene-
mukan bugs.

• security concern, framework mengantisipasi dan memasang perisai terhadap

adanya berbagai masalah keamanan yang mungkin timbul

• dokumentasi, framework dapat mendisiplinkan kita untuk menulis dokumen-


tasi untuk apa yang kita tulis

2.6.3 Pemilihan Framework

Pemilihan framework yang salah akan menjadi sebuah bencana bagi penggu-

nanya. Ada beberapa hal yang harus di pertimbangkan dalam memilih framework:

• Pertama dokumentasi dari framework itu sendiri. Dokumentasi sangat pent-


ing adanya mengingat pada umumnya tidak banyak orang/perusahaan yang

membuat framework sendiri dalam membuat applikasi. Oleh karena itu kita

akan sangat tergantung dengan dokumentasi yang di sediakan oleh framework

yang kita pilih.


21

• Berikutnya kesesuaian framework tersebut dengan applikasi apa yang hendak


kita kembangkan. Kita memilih framework dengan fasilitas yang pas dengan

kebutuhan kita.

• Kemudian perhatikan standar - standar framework yang ada, misalkan apakah

framework tersebut MVC, apakah framework tesebut mendukung versi sekian,

apakah mendukung templating dan lain-lain. Semakin banyak hal yang di

support oleh framework tersebut semakin baik. Karena hal tersebut akan

mempengaruhi kualitas dari software yang dikembangkan.

• Lalu yang terakhir adalah faktor kemudahan. Tentunya ini sangat tergantung
dari sumberdaya yang ada.

2.6.4 Model View Controller (MVC)

Secara umum tujuan suatu aplikasi web adalah menampilkan informasi yang

diminta oleh pengguna. Pengguna mengirimkan permintaannya melalui program

browser ke web server, web server akan melakukan pemrosesan atas permintaan

tersebut, kemudian hasilnya akan dikirimkan kembali dan akan ditampilkan juga di

program browser. Berdasarkan mekanisme ini, aplikasi web dapat dibagi menjadi

tiga bagian:

1. Bagian yang berfungsi untuk mengintepretasikan permintaan dari pengguna

(HTTP Request )

2. Bagian yang memodelkan problem domain atau bussines logic

3. Bagian yang mengelola tampilan yang akan dikirimkan ke pengguna.

Dalam pemrograman aplikasi web yang menggunakan PHP terkadang ketiga

bagian program dicampur menjadi satu bagian. Aplikasi web merupakan bagian
22

yang sangat sering mengalami perubahan. Seperti perubahan tampilan, layout, pe-

nambahan menu dan banyak lagi yang tidak ada kaitannya atau tidak memberikan

dampak pada logika dari aplikasi web tersebut. Dengan mencampuradukkan ketiga

bagian tersebut maka setiap kali dilakukan perubahan pada tampilan ada kemu-

ngkinan diperlukan juga perubahan pada bagian logikanya. Hal ini memperbesar

kemungkinan timbulnya kesalahan pada aplikasi.

MVC(Model View Controller ) adalah pola dasar yang memisahkan ketiga

bagian program menjadi tiga buah objek yang terpisah. Interaksi antara ketiga

bagian program tersebut dapat digambarkan seperti dibawah ini:

Gambar 2.2: Model View Controller

Controller pada dasarnya merupakan penerima tamu dari permintaan yang

datang (HTTP request ). Controller merupakan bagian yang mengatur hubungan

antara bagian model dan bagian view, controller berfungsi untuk menerima request
23

dan data dari user kemudian menentukan apa yang akan diproses oleh aplikasi.

View merupakan bagian yang menangani presentation logic. Pada suatu

aplikasi web bagian ini biasanya berupa le template HTML, yang diatur oleh con-

troller. View berfungsi untuk menerima dan merepresentasikan data kepada user.

Bagian ini tidak memiliki akses langsung terhadap bagian model.

Model merupakan representasi dari proses bisnis di dalam setiap aplikasi

perangkat lunak. Model adalah bagian yang bertugas mengolah data mentah men-

jadi data yang mengandung arti yang diinginkan oleh pengguna. Model biasanya

berhubungan langsung dengan database untuk memanipulasi data, menangani vali-

dasi dari bagian controller, namun tidak dapat berhubungan langsung dengan bagian

view.

2.6.5 Jenis-Jenis Framework

Berikut ini jenis-jenis framework yang sering digunakan

1. .NET Framework,

2. PHP Framework,

3. Ruby On Rails (untuk membuat aplikasi web dengan bahasa Ruby),

4. Django (untuk membuat aplikasi Web dengan bahasa Python),

5. Google Web Toolkit (GWT),

2.7 Pengenalan Database

Database adalah suatu kumpulan data yang terintegrasi yang di organisas-

ikan untuk memenuhi kebutuhan para pemakai di dalam suatu organisasi. Semua
24

pengaksesan ke database ditangani oleh suatu piranti lunak yang disebut Database

Management System.

Secara sik suatu database terdiri atas entitas-entitas yang biasanya disebut

tabel. Tiap-tiap tabel tersebut mempunyai atribut-atribut yang disebut eld. Dan

isi dari tabel tersebut disebut tupel atau record yang merupakan tumpukan baris

yang mempunyai minimal satu atribut dari tabel tersebut.

Structure Query Language, atau biasa disingkat SQL, adalah bahasa yang

digunakan untuk mendenisikan, memanipulasi, dan mengontrol suatu database.

MySQL adalah database server relasional dibawah lisensi GNU (General Public Li-

cense ). Dengan sifatnya yang Open Source, memungkinkan juga user untuk mem-

odikasi pada kode sumbernya untuk memenuhi kebutuhan spesikasi. MySQL

merupakan database multi-user. Dengan memiliki banyak tur, MySQL bisa ber-

saing dengan database komersial sekalipun. Tidak mengejutkan, bahwa MySQL

menjadi database pilihan untuk banyak pengguna PHP.

MySQL yang merupakan hasil pikiran dari Michael Monty Widenius, David

Axmark, dan Allan Larson dimulai tahun 1995. Mereka bertiga kemudian mendirikan

perusahaan bernama MySQL AB di Swedia. Tujuan awal ditulisnya program MySQL

adalah untuk mengembangkan aplikasi web yang akan digunakan oleh salah satu

client MySQL AB. Memang pada saat itu, MySQL AB merupakan sebuah perusa-

haan konsultan database dan pengembang software.

MySQL versi 1.0 dirilis pada mei 1996 dan penggunaannya hanya terbatas

dikalangan intern saja. Pada bulan Oktober 1996, MySQL versi 3.11.0 dirilis ke

masyarakat luas di bawah lisensi "Terbuka tapi Terbatas". Barulah pada bulan Juli

2000, MySQL AB mengumumkan, bahwa mulai MySQL versi 3.23.19 diterapkan

sebagai General Public License (GPU).

Seperti halnya SQL engine yang lain. MySQL mempunyai tiga sub bahasa,
25

yaitu : Data Denition Language (DDL), Data Manipulation Language (DML) dan

Data Control Language (DCL). DDL berfungsi pada obyek database, seperti mem-

buat tabel, mengubah tabel, dan menghapus tabel. DML untuk objek tabel, seperti

melihat, menambah, menghapus dan mengubah isi tabel. Sedangkan DCL untuk ke-

pentingan sekuritas database, seperti memberikan hak akses ke database dan meng-

hapus hak tersebut dari database.

2.7.1 DDL (Data Denition Language)

DDL bertugas untuk membuat obyek SQL dan menyimpan denisinya dalam

tabel. Contoh dari obyek yang dimaksud diatas adalah tabel, view, dan index.

Pembuatan tabel, perubahan struktur tabel, perubahan nama tabel, serta perintah

untuk menghapus tabel, dilakukan dengan sub bahasa yang tergolong dalam DDL.

Perintah-perintah yang digolongan dalam DDL adalah create, alter, dan drop.

2.7.1.1 Create

Perintah untuk membuat tabel. Bentuk umumnya adalah create table na-

ma_table (nama_eld1 type, nama_eld2 type,..., nama_eld_n type);

2.7.1.2 Alter

Perintah untuk mengubah struktur tabel antara lain :

1. Perubahan nama eld

Alter table nama_table change nama_eld_lama nama_eld_baru tipe_data;

2. Perubahan tipe data

Alter table nama_table modify nama_eld_baru tipe_data_baru;


26

3. Penambahan eld

Alter table nama_table add nama_eld tipe_data_baru;

4. Penghapusan eld

Alter table nama_tabel drop column nama_eld;

2.7.1.3 Drop

Perintah menghapus tabel. Bentuk umumnya adalah Drop table nama_table;

2.7.2 DML (Data Manipulation Language)

DML digunakan untuk menampilkan, mengubah, menambah dan menghapus

baris dalam tabel. Perintah - perintah yang digolongkan dalam DML adalah select,

update, insert dan delete.

2.7.2.1 Insert

Perintah memasukkan data. Bentuk umumnya adalah

Insert into nama_table values (isi_eld1, isi_eld2,..., isi_eld_n);

atau

Insert into nama_table (nama_eld_1, nama_eld_2, ... ,nama_eld_n)

values (isi_eld1, isi_eld2, ... , isi_eld_n);

2.7.2.2 Select

Perintah untuk menampilkan data. Bentuk umumnya adalah Select na-

ma_eld_1, nama_eld_2, ... , nama_eld_n from nama_tabel where criteria

order by nama_eld ascending | descending;


27

2.7.2.3 Delete

Perintah untuk menghapus data. Bentuk umumnya adalah Delete from na-

ma_tabel where criteria;

2.7.2.4 Update

Perintah untuk mengubah data. Bentuk umumnya adalah Update nama_tabel

set nama_eld_1 = isi_baru_1, nama_eld_2 = isi_baru_2, ... , nama_eld_n

= isi_baru_n, where criteria;

2.7.3 DCL (Data Control Language)

Sebagai alat kontrol keamanan terhadap database dan tabelnya digunakan

DCL. Dua perintah utama di dalam DCL adalah grant dan revoke.

2.7.3.1 Grant

Perintah untuk mengizinkan user mengakses tabel dalam database tertentu.

Bentuk umumnya adalah

Grant jenis_statement_yang_diizinkan | all priveleges on nama_database

to nama_user;

2.7.3.2 Revoke

Perintah untuk mencabut kembali izin yang sudah pernah diberikan sebelum-

nya oleh grant. Bentuk umumnya adalah

Revoke jenis_statement_yang_diizinkan | all priveleges on nama_database

from nama_user;
28

2.8 Diagram UML

Abstraksi konsep dasar UML yang terdiri dari structural classication, dy-

namic behavior, dan model management, bisa kita pahami dengan mudah apabila

kita melihat gambar dibawah dari Diagrams. Main concepts bisa kita pandang se-

bagai term yang akan muncul pada saat kita membuat diagram dan view adalah

kategori dari diagram tersebut.

2.8.1 Use Case Diagram

Use case diagram menggambarkan fungsionalitas yang diharapkan dari se-

buah sistem. Yang ditekankan adalah "apa" yang diperbuat sistem, dan bukan

"bagaimana". Sebuah use case merepresentasikan sebuah interaksi antara aktor

dengan sistem. Use case merupakan sebuah pekerjaan tertentu, misalnya login ke

sistem, meng-create sebuah daftar belanja, dan sebagainya. Seorang/sebuah aktor

adalah sebuah entitas manusia atau mesin yang berinteraksi dengan system untuk

melakukan pekerjaan-pekerjaan tertentu.

Gambar 2.3: Use Case Diagram


29

Use case diagram dapat sangat membantu bila kita sedang menyusun require-

ment sebuah sistem, mengkomunikasikan rancangan dengan klien, dan merancang

test case untuk semua feature yang ada pada sistem. Sebuah use case dapat meng-

include fungsionalitas use case lain sebagai bagian dari proses dalam dirinya. Secara

umum diasumsikan bahwa use case yang di-include akan dipanggil setiap kali use

case yang meng-include dieksekusi secara normal. Sebuah use case dapat di-include

oleh lebih dari satu use case lain, sehingga duplikasi fungsionalitas dapat dihindari

dengan cara menarik keluar fungsionalitas yang common. Sebuah use case juga

dapat meng-extend use case lain dengan behaviour -nya sendiri. Sementara hubun-

gan generalisasi antar use case menunjukkan bahwa use case yang satu merupakan

spesialisasi dari yang lain.

2.8.2 Class Diagram

Class adalah sebuah spesikasi yang jika diinstansiasi akan menghasilkan se-

buah objek dan merupakan inti dari pengembangan dan desain berorientasi objek.

Class menggambarkan keadaan (atribut/properti) suatu sistem, sekaligus menawarkan

layanan untuk memanipulasi keadaan tersebut (metoda/fungsi). Class diagram

menggambarkan struktur dan deskripsi class, package dan objek beserta hubun-

gan satu sama lain seperti containment, pewarisan, asosiasi, dan lain-lain. Class

memiliki tiga area pokok :

1. Nama (dan stereotype)

2. Atribut

3. Metoda

Atribut dan metoda dapat memiliki salah satu sifat berikut :


30

Gambar 2.4: Class Diagram

1. Private, tidak dapat dipanggil dari luar class yang bersangkutan.

2. Protected, hanya dapat dipanggil oleh class yang bersangkutan dan anak-anak

yang mewarisinya.

3. Public, dapat dipanggil oleh siapa saja.

Class dapat merupakan implementasi dari sebuah interface, yaitu class ab-

strak yang hanya memiliki metoda. Interface tidak dapat langsung diinstansiasikan,

tetapi harus diimplementasikan dahulu menjadi sebuah class.

2.8.3 Activity Diagram

Activity diagrams menggambarkan berbagai alur aktivitas dalam sistem yang

sedang dirancang, bagaimana masing-masing alur berawal, decision yang mungkin

terjadi, dan bagaimana mereka berakhir. Activity diagram juga dapat menggam-

barkan contoh class diagram, menggambarkan proses paralel yang mungkin terjadi

pada beberapa eksekusi. Activity diagram merupakan state diagram khusus, di


31

mana sebagian besar state adalah action dan sebagian besar transisi di-trigger oleh

selesainya state sebelumnya (internal processing ). Oleh karena itu activity diagram

tidak menggambarkan behaviour internal sebuah sistem (dan interaksi antar subsis-

tem) secara eksak, tetapi lebih menggambarkan proses-proses dan jalur-jalur aktivi-

tas dari level atas secara umum. Sebuah aktivitas dapat direalisasikan oleh satu use

case atau lebih. Aktivitas menggambarkan proses yang berjalan, sementara use case

menggambarkan bagaimana aktor menggunakan sistem untuk melakukan aktivitas.

Gambar 2.5: Activiti Diagram

Sama seperti state, standar UML menggunakan segiempat dengan sudut

membulat untuk menggambarkan aktivitas. Decision digunakan untuk menggam-

barkan behaviour pada kondisi tertentu. Untuk mengilustrasikan proses-proses par-

alel (fork dan join ) digunakan titik sinkronisasi yang dapat berupa titik, garis hor-

izontal atau vertikal. Activity diagram dapat dibagi menjadi beberapa object swim-

lane untuk menggambarkan objek mana yang bertanggung jawab untuk aktivitas

tertentu.
32

2.8.4 Sequence Diagram

Sequence diagram menggambarkan interaksi antar objek di dalam dan di

sekitar sistem (termasuk pengguna, display, dan sebagainya) berupa message yang

digambarkan terhadap waktu. Sequence diagram terdiri antar dimensi vertikal (wak-

tu) dan dimensi horizontal (objek-objek yang terkait). Sequence diagram biasa

digunakan untuk menggambarkan skenario atau rangkaian langkah-langkah yang

dilakukan sebagai respons dari sebuah event untuk menghasilkan output tertentu.

Diawali dari apa yang men-trigger aktivitas tersebut, proses dan perubahan apa

saja yang terjadi secara internal dan output apa yang dihasilkan. Masing-masing

objek, termasuk aktor, memiliki lifeline vertikal.

Gambar 2.6: Sequence Diagram

Message digambarkan sebagai garis berpanah dari satu objek ke objek lain-

nya. Pada fase desain berikutnya, message akan dipetakan menjadi operasi/metoda

dari class. Activation bar menunjukkan lamanya eksekusi sebuah proses, biasanya

diawali dengan diterimanya sebuah message. Untuk objek-objek yang memiliki sifat
33

khusus, standar UML mendenisikan icon khusus untuk objek boundary, controller

dan persistent entity.


Bab 3
ANALISA DAN PEMBAHASAN

3.1 Tinjauan Umum

Kemajuan suatu bangsa sangat ditentukan oleh kualitas pendidikan. Oleh

karena itu, pendidikan sebagai sarana untuk mencerdaskan kehidupan bangsa memi-

liki peranan yang sangat strategis. Pendidikan berkontribusi dalam mengembangkan

sumber daya manusia (SDM) yang bermutu, dengan indikator berkualitikasi ahli,

terampil, kreatif, inovatif, serta memiliki attitude (sikap dan perilaku) yang positif.

Pendidikan sekolah merupakan pusat menimba berbagai ilmu terutama ilmu

pengetahuan serta sebagai lembaga pendidikan. Sehingga sekolah sangat mement-

ingkan kualitas serta mutu belajar, untuk itu informasi yang disampaikan haruslah

mudah dan dimengerti serta dapat diakses oleh masyarakat luas. Agar ketika ingin

memasuki lingkungan sekolah tidak perlu lagi untuk mendatangi sekolah tersebut.

Seiring dengan kebutuhan dan perkembangan teknologi seperti internet, da-

pat dimanfaatkan dalam pembuatan website sekolah. Dimana website sekolah dapat

dijadikan sebagai pusat penyampaian informasi, yang dapat memudahkan masyarakat

dalam mengakses informasi sekolah tersebut, sehingga tidak dibatasi ruang dan wak-

tu.

SMA Negeri 1 Ciomas merupakan salah satu SMA Negeri yang terdapat di

Kabupaten Bogor. Selama perjalanannya telah banyak menghasilkan lulusan yang

berhasil masuk ke PTN yang ada di Bogor maupun di Luar Bogor.

34
35

3.2 Analisa Masalah

Dalam lingkungan sekolah, ada berbagai cara untuk menyampaikan infor-

masi. Biasanya para siswa mendapatkan informasi seputar kegiatan sekolah melalui

madding sekolah yang telah ditempel atau dengan membagikan surat pengumuman,

dan juga dapat dilakukan secara lisan lewat pengumuman tiap kelas.

Informasi yang didapat di sekolah biasanya terbatas karena informasi yang

diberikan tidak sepenuhnya diberikan oleh pihak sekolah. Karena keterbatasan wak-

tu maupun kesibukan para guru maupun sta sekolah tersebut. Informasi yang

diberikan berupa data guru maupun siswa,dan info terbaru di sekolah.

Dalam SMA Negeri 1 Ciomas informasi yang didapat hanya melalui selebaran

brosur dan madding saja. Sehingga informasi yang didapat masih kurang lengkap

pada pusat informasi dan memungkinkan terjadinya kesalahan dalam penyampaian

informasi seperti pelayanan informasi yang kurang memuaskan dan informasi yang

masih simpang siur. Dan juga hambatan yang dialami dikarenakan banyak orang

yang belum mengetahui SMA Negeri 1 Ciomas dan hanya mengetahui sekolah SMA

Negeri 1 Ciomas melalui mulut ke mulut sehingga orang kurang jelas tentang seluk-

beluk sekolah SMA Negeri 1 Ciomas.

3.3 Pemecahan Masalah

Website yang akan dibuat menyajikan kepraktisan informasi SMA Negeri

1 Ciomas yang dapat meningkatkan kualitas dan kuantitas dengan memanfaatkan

teknologi internet. Begitu juga masyarakat luas dapat melakukan pengaksesan den-

gan cepat tanpa harus mendatangi sekolah tersebut. Dengan adanya web sekolah,

maka siswa dapat melihat informasi maupun pengumuman secara langsung tanpa

harus datang ke sekolah.


36

Dengan pembuatan aplikasi website SMA Negeri 1 Ciomas maka dapat meningkatkan

penyajian informasi yang komunikatif serta dapat memperoleh kebutuhan informasi

dengan cepat, mudah dan lebih esien. Sehingga SMA Negeri 1 Ciomas tidak hanya

dikenal di daerah Bogor saja, tapi diseluruh Indonesia maupun dunia.

Dalam proses pembuatannya, situs dibuat dengan melalui beberapa tahap,

yaitu:

1. Perencanaan situs.

2. Perancangan situs.

3. Implementasi.

3.4 Perencanaan Situs

Pada tahapan ini penyusun mencari ide untuk menentukan gaya design yang

ingin digunakan. Melalui referensi dari situs Cool Web Design, http://www.cwd.dk,

penulis menemukan gaya design yang cocok untuk penulis implementasikan pada

situs yang penulis buat. Selanjutnya penulis mencari contoh layout sebuah web

untuk menentukan usability dan navigasi yang tepat.

Situs yang penulis buat lebih ditujukan untuk kalangan sendiri, oleh karena

itu yang bisa menjadi member di situs ini adalah guru maupun siswa SMA Negeri 1

Ciomas. Namun pengunjung situs yang yang bukan guru maupun siswa SMA Negeri

1 Ciomas tetap dapat melihat berita-berita maupun events-events dan perkemban-

gan terbaru dari SMA Negeri 1 Ciomas.

Untuk menjadi member di situs SMA Negeri 1 Ciomas ini, siswa maupun guru

langsung menghubungi webmaster. Hal ini digunakan untuk mencegah terjadinya

penambahan atau perubahan data yang tidak diinginkan, karena pemantauan situs
37

yang belum optimal. Member pada situs ini terbagi menjadi dua tingkatan/level.

Dua tingkatan tersebut adalah :

1. Webmaster, merupakan level tertinggi dan mempunyai feature yang lebih

lengkap dibandingkan dengan level-level yang lain. Member yang berada pa-

da level ini biasanya adalah orang yang dapat mengelola suatu situs web dan

mengerti tentang dunia internet secara mendalam.

2. Reguler Member, merupakan member dengan level paling rendah. Feature

yang dimiliki sangat terbatas.

3.5 Perancangan Situs

Tahapan ini merupakan tahapan persiapan pembuatan situs dan terdiri dari

beberapa langkah. Dan akan dijelaskan secara detail pada sub bab berikut.

3.5.1 Perancangan Database

Perancangan database merupakan suatu perancangan yang bertujuan untuk

menggambarkan struktur dan bagian-bagian dari suatu database. Dengan membuat

rancangan database, relasi antar tabel juga akan terlihat.

Dibawah ini merupakan rancangan database di dalam web SMA Negeri 1

Ciomas. Secara umum database web sekolah ini memiliki 9 tabel yang masing-

masing tabelnya memiliki eld tersendiri. Ke-9 tabel itu antara lain:

1. Tabel admin

Tabel ini digunakan untuk menyimpan username dan password yang digu-

nakan untuk masuk kedalam halaman admin. Baik berstatus admin maupun

user. Field-eld yang dimiliki sebagai berikut :


38

Tabel 3.1: Tabel Admin

2. Tabel berita_events

Tabel ini digunakan untuk menyimpan artikel berupa berita dan events-events.

Field-led yang digunakan sebagai berikut :

Tabel 3.2: Tabel berita_events

3. Tabel data_siswa

Tabel yang digunakan untuk menyimpan informasi jumlah siswa laki-laki dan

perempuan setiap kelas pada tahun ajaran tertentu dan jumlah siswa pada

tiga tahun terakhir. Field-eld yang digunakan sebagai berikut :


39

Tabel 3.3: Tabel data_siswa

4. Tabel galery

Tabel ini digunakan untuk menyimpan gambar. Field yang dimiliki :

Tabel 3.4: Tabel galery

5. Tabel guru

Tabel yang digunakan untuk menyimpan informasi mengenai data-data guru.

Field-led yang dimiliki sebagai berikut :


40

Tabel 3.5: Tabel guru

6. Tabel pesan

Tabel ini digunakan untuk menyimpan pesan. Field-eld yang dimiliki :

Tabel 3.6: Tabel pesan

7. Tabel proleskul

Tabel ini digunakan untuk menyimpan informasi visimisi, sejarah sekolah,

struktur organisasi, dan sambutan dari kepala sekolah. Field-led yang dimi-

liki :
41

Tabel 3.7: Tabel proleskul

8. Tabel prole_skul

Tabel yang digunakan untuk menyimpan prol sekolah. Field-led yang dim-

iliki sebagai berikut :

Tabel 3.8: Tabel prole_skul

9. Tabel prole_skul_2

Tabel ini digunakan untuk menyimpan informasi mengenai prestasi, program,

dan kerjasama antar lembaga. Filed-lednya sebagai berikut :


42

Tabel 3.9: Tabel prole_skul_2

Maksud dibuatnya tabel-tabel beserta eldnya itu adalah sebagai tempat dimana

data-data yang akan masuk dan keluar dari sistem disimpan.

3.5.2 Perancangan Tampilan Situs

Rancangan situs web merupakan hal yang diperlukan di dalam proses pem-

buatan aplikasi yang terdapat di dalam suatu situs web. Rancangan ini digunakan

untuk mengkomunikasikan kebutuhan user kedalam suatu desain untuk diisi dengan

tur-tur website.

Struktur navigasi merupakan rancangan gambaran hubungan dan rantai kerja

dari beberapa kerja atau beberapa area yang berbeda dan dapat membantu men-

gorganisasikan seluruh halaman dalam web dengan pemberian hyperlink.


43

Gambar 3.1: Struktur Navigasi Pengunjung

Gambar 3.2: Struktur Navigasi Admin


44

Gambar 3.3: Struktur Navigasi Anggota (Member )

3.5.2.1 Rancangan Halaman Web

Perancangan halaman di dalam web SMA Negeri 1 Ciomas ini di bagi menjadi

3 tampilan dasar. Ke-3 tampilan dasar ini terletak pada :

• Halaman Beranda Tamu (guest ),

• Halaman Beranda Anggota (member ), dan

• Halaman Beranda Administrator.


45

3.5.2.2 Halaman Beranda Tamu (guest )

Gambar 3.4: Halaman Beranda Tamu (Guest )

Untuk rancangan halaman tamu yang lainnya merupakan pengembangan dari

halaman beranda tamu. Yang berbeda hanya Content atau isi dari web. Sesuai
46

kebutuhan sehingga secara umum dapat digambarkan seperti gambar 3.5.

Gambar 3.5: Halaman Beranda Tamu (Guest )


47

3.5.2.3 Halaman Beranda Anggota (member )

Gambar 3.6: Halaman Beranda Anggota (Member )


48

3.5.2.4 Halaman Beranda Administrator

Gambar 3.7: Halaman Beranda Administrator

Halaman anggota (member ) tidak jauh berbeda dengan halaman administra-

tor, yang membedakan halaman angota dengan halaman administrator yaitu dari

sisi struktur navigasinya. Struktur navigasi untuk halaman admin lebih lengkap di

bandingkan dengan halaman anggota. Sedangkan untuk menu username&password

pada halaman administrator semua username dan password ditampilkan. Pada ha-

laman anggota hanya menampilkan username dan password milik anggota tersebut

dan tidak dapat dapat menambah anggota (member ). Administrator dan anggota
49

(member ) dapat mengolah data pada website. Seperti menambah artikel (berita dan

events), gallery dan pada halaman administrator lebih banyak lagi. Pada halaman

administrator ada beberapa isi (content ) web yang hanya dapat dilakukan perintah

edit seperti pada menu kata sambutan, visimisi, sejarah sekolah, prol sekolah, dan

struktur organisasi pada menu prole sekolah. Dan ada beberapa data yang dapat

di tambah, seperti :

1. Tambah Username & password

Gambar 3.8: Halaman Tambah username&password

Digunakan untuk menambah anggota (member ) maupun admin. Penambahan

hanya dapat dilakukan oleh administrator. Status disini dibagi menjadi dua

yaitu admin dan user(anggota ).


50

2. Tambah Prole Sekolah

Halaman ini digunakan untuk menambah prole sekolah. Seperti program

sekolah, kerjasama antar lembaga, dan prestasi.

Gambar 3.9: Halaman Tambah Prole Sekolah

3. Tambah Guru

Diisi jika ada tambahan guru, baik guru bantu (honorer ) maupun guru pin-

dahan dari sekolah lain. Disini diisi tentang data diri guru.
51

Gambar 3.10: Halaman Tambah Guru

4. Tambah Berita & Events

Halaman ini digunakan untuk menambah berita maupun events, penamba-

han dapat berupa penambahan berita ataupun penambahan events dengan

memilih kategori pada combobox.


52

Gambar 3.11: Halaman Tambah Berita dan Events

5. Tambah Gallery

Tambah Gallery digunakan jika ingin menambahkan foto/gambar. Dalam pe-

nambahan foto ini berdasarkan kategori yaitu, Bangunan & Fasilitas Sekolah,

Kegiatan Sekolah, dan Ekstrakulikuler.


53

Gambar 3.12: Halaman Tambah Gallery

3.5.3 Perancangan Sistem

Perancangan sistem pada pembangunan situs web ini menggunakan UML

yang digunakan untuk merancang model sebuah sistem. Perancangan model sistem

pada situs web ini digambarkan melalui Diagram Use Case, Diagram Sequence,

Diagram Activity, dan Class Diagram.

3.5.3.1 Use Case Diagram

Pada diagram ini terdapat tiga aktor yang merupakan pengguna sistem, yaitu

pengunjung, anggota dan administrator. Pengunjung memiliki use case, yaitu hanya

dapat mengakses informasi sekolah seperti mengakses prole sekolah, gallery, mem-

baca berita dan events, menigis buku tamu, dan dapat menghubungi kami yaitu
54

seperti mengirim email.

Gambar 3.13: Use Case Diagram

Anggota dapat mengelola informasi sekolah seperti berita dan events, men-

gelola gallery, dan mengelola account seperti mengubah nama, username, dan pass-

word. Aktor administrator memiliki use case untuk memelihara, mengelola kejadian

yang terjadi selama sistem berlangsung. Selain itu aktor administrator juga memiliki

use case menulis berita dan events, menulis program sekolah, dan menulis prestasi.
55

3.5.3.2 Activity Diagram

Diagram activity administrator yang terlihat pada gambar 3.14, menggam-

barkan bahwa seorang administrator wajib melakukan otentikasi dengan melakukan

login terlebih dahulu sebelum dapat mengelola website, apabila admin melakukan

validasi dengan benar maka administrator dapat mengakses menu-menu yang ada

untuk mengelola segala yang berkaitan dengan web SMA Negeri 1 Ciomas. Setelah

selesai, administrator harus keluar dengan melakukan logout.


56

Gambar 3.14: Activity Diagram Administrator

Seperti halnya dengan administrator, semua anggota yang ingin mengakses

menu-menu di halamannya harus melakukan otentikasi terlebih dahulu dan men-

gakhirinya dengan melakukan logout.


57

Gambar 3.15: Activity Diagram Anggota

3.5.3.3 Diagram Sequence

Diagram sequence yang terlihat pada gambar menggambarkan administrator

yang dihadapkan pada tampilan halaman login dimana sistem meminta adminis-

trator untuk memasukkan username, password. setelah administrator memasukkan

username, password maka sistem akan mengecek apakah username, password benar

atau salah. Apabila username dan password salah maka akan tampil pesan kesala-
58

han dan sistem akan meminta kembali untuk memasukkan username dan password.

Tetapi jika username dan password yang telah dimasukkan benar maka adminis-

trator akan masuk ke halaman admin. Proses ini sama dengan proses yang terjadi

pada anggota yang ingin masuk ke halaman anggotanya masing-masing

Gambar 3.16: Diagram Sequence Administrator


59

Gambar 3.17: Diagram Sequence Anggota

3.5.3.4 Class Diagram

Class Diagram yang terlihat pada gambar menggambarkan keterhubungan

antar tabel dalam database.


60

Gambar 3.18: Class Diagram

3.6 Implementasi

Tahap ini merupakan tahap pembuatan website SMA Negeri 1 Ciomas den-

gan menerapkan model MVC (Model View Controller) dalam penggunaan Frame-
61

work PHP CodeIgniter 1.7.1.

3.6.1 Framework CodeIgniter

CodeIgniter Adalah Framework PHP yang menggunakan pola MVC (Model

View Controller ) CodeIgniter yang dapat digunakan oleh siapa saja untuk keperluan

pembuatan situs web. Struktur CodeIgniter lebih banyak meniru Ruby on Rail

(RoR), sebuah framework pembuatan aplikasi web dengan menggunakan bahasa

pemrograman Ruby. Selain itu, dokumentasinya lebih lengkap dan tentunya mudah

dipahami.

CodeIgniter dikembangkan oleh EllisLab Inc, framewok dibawah lisensi Apache

/ BSD-style open source sehingga Framework ini termasuk aplikasi Open Source

oleh karena itu kita dapat menggunakan, menggandakan, memodikasi dan mendis-

tribusikan framework CodeIgniter beserta dokumentasi untuk banyak tujuan.

Framework CodeIgniter berjalan pada PHP versi 4.3.2 atau yang lebih ter-

baru, dan mendukung database diantaranya:

• MySQL

• MySQLi

• MS SQL

• Postgres

• Oracle

• SQLite

• ODBC
62

Keunggulan framework CodeIgniter :

• CodeIgniter sangat ringan, terstruktur, mudah dipelajari, dokumentasi lengkap

dan support yang luar biasa dari forum CodeIgniter.

• Menggunakan pattern MVC yang mempermudah dan meningkatkan esibilitas

• Menghasilkan url yang search engine friendly

• Mudah untuk membuat library dan helpernya

• Jalan di PHP 4 (4.3.2+) dan 5

• Support banyak database MySQL (4.1+), MySQLi, MS SQL, Postgres, Oracle,

SQLite, dan ODBC.

• Sekuritas aplikasi terjaga

• Banyak library dan helper yang mempermudah pekerjaan

3.6.2 Struktur Direktori

Struktur direktori dari framework CodeIgniter seperti pada gambar 3.19 Di-

rektori Application merupakan direktori yang sangat penting karena pada direktori

ini aplikasi web dibuat.

• Folder system menyimpan semua le, baik itu le aplikasi yang kita buat

maupun core frameworknya.

• Folder application: disinilah aplikasi yang akan kita bangun diletakkan

• Folder cong : tempat menyimpan semua le kongurasi yang ada di aplikasi

mulai dari database, router dan autoload dari aplikasi


63

Gambar 3.19: Struktur Direktori CodeIgniter

• Folder controllers : tempat menyimpan semua le controller.

• Folder errors : tempat menyimpan semua template error aplikasi

• Folder helpers : tempat menyimpan helper-helper yang bukan berasal dari CI

• Folder hooks : tempat menyimpan hook yang digunakan untuk mengubah alur

fungsi dari core CI

• Folder language tempat menyimpan bahasa-bahasa yang akan di gunakan


64

• Folder libraries tempat menyimpan semua library buatan kita sendiri

• Folder models tempat menyimpan semua model.

• Folder views tempat menyimpan semua le view applikasi.

• Folder cache tempat menyimpan semua cache yang dibuat caching library.

• Folder codeigniter tempat menyimpan semua semua le internals CI.

• Folder database tempat menyimpan semua driver database drivers dan class

yang akan digunakan.

• Folder fonts tempat menyimpan semua fonts yang digunakan image manipu-
lation library.

• Folder helpers tempat menyimpan semua helper core CI.

• Folder language tempat menyimpan semua langguage core CI.

• Folder libaries tempat menyimpan semua library core CI

• Folder logs tempat menyimpan semua logs generated oleh CI.

• Folder plugin tempat menyimpan semua plugin core CI.

• Folder scaolding tempat menyimpan semua le yang berfungsi sebagai scaf-

folding .

• Folder user_guide berisi userguide/manual penggunaan CI.

Framework CodeIgniter juga menyediakan libray dan helper untuk memper-

mudah pembuatan website.


65

3.6.3 Helper

Helper, sama seperti namanya bertujuan untuk membantu pengguna dalam

membuat website yang berbasis framework khususnya CodeIgniter. File Helper

adalah sekumpulan fungsi sederhana yang disediakan oleh Framework CodeIgniter.

Tidak seperti sebagian besar system pada CodeIgniter. Helper tidak ditulis dengan

format OOP (Object Oriented Programming). Helper fungsi procedural yang seder-

hana. Setiap fungsi helper mewakili satu tugas tertentu dengan tidak bergantung

dengan fungsi yang lain.

Secara default CodeIgniter tidak memuat le helper. File helper harus dimuat

sehingga dapat diakses oleh Controller dan View.

File helper pada Framework CodeIgniter disimpan didalam direktori sys-

tem/helpers atau di direktori system/application/helpers. CodeIgniter pertama

akan memuat le helper pada direktori system/application/helpers, apabila tidak

terdapat le helper pada director tersebut maka CodeIgniter akan memuat le helper

yang ada pada direktori system/helpers

3.6.3.1 Memuat Helper

Untuk menggunakan helper kita harus memuat helper terlebih dahulu, memu-

at le helper kita menggunakan fungsi seperti dibawah ini

$this->load->helper('nama_helper');
Penulisan nama Helper tidak menyertakan ekstensi php dari le helper terse-

but. Jika ingin memuat lebih dari satu le helper kita dapat menyertakan nama le

helper dalam array seperti contoh di bawah ini

$this->load->helper( array('nama_helper1', 'nama_helper2', 'na-


ma_helper3') );
66

File helper dapat diakses secara global pada CodeIgniter dan dapat dimuat

secara otomatis ketika web diakses web browser atau dikenal dengan istilah auto-load

yaitu dengan menambahkan nama helper yang diperlukan pada le autoload.php

pada direktori system/applicaton/cong contoh penggunaanya seperti dibawah ini

$autoload['helper'] = array('url','form','date', 'text', 'security');

Jenis-Jenis Helper

1. Array Helper

File helper yang terdiri dari fungsi yang membantu penggunaan array. Helper

ini dapat dimuat dengan menggunakan perintah dibawah ini.

$this->load->helper('array');

Fungsi yang tersedia pada helper array:

• element( ) : fungsi untuk mengambil data dari suatu tipe data array

• random_element() : fungsi untuk mengambil data array sebagai input

dan kemudian mengembalikan menjadi elemen acak dari data array terse-

but

2. Cookie Helper

File Helper yang terdiri dari fungsi yang membantu pengerjaan dengan cookies.

Untuk memuat helper ini kita dapat menggunakan perintah dibawah ini

$this->load->helper('cookie');

Fungsi yang tersedia pada helper cookie:

• set_cookie() : fungsi untuk mengisi cookie dengan suatu nilai.


67

• get_cookie() : fungsi untuk mendapatkan isi dari cookie

• delete_cookie() : fungsi untuk menghapus cookie

3. Date Helper

File Helper yang terdiri dari fungsi yang membantu pengerjaan dengan Tang-

gal. Untuk memuat helper ini kita dapat menggunakan perintah dibawah ini

$this->load->helper('date');

Fungsi yang tersedia pada helper date antara lain now(), mdate(), standard_date(),

local_to_gmt(), gmt_to_local(), mysql_to_unix(), unix_to_human(),

human_to_unix(), timespan(), timezones(), timezone_menu()

4. Directory Helper

File Helper yang terdiri dari fungsi yang membantu pengerjaan yang berhubun-

gan dengan direktori. Untuk memuat helper ini kita dapat menggunakan per-

intah dibawah

$this->load->helper('directory');

Fungsi yang tersedia pada helper direktory : directory_map

5. Download Helper

File Helper yang terdiri dari fungsi yang membantu pengerjaan yang berhubun-

gan dengan pengunduhan data. Untuk memuat helper ini kita dapat meng-

gunakan perintah dibawah

$this->load->helper('download');

Fungsi yang tersedia pada helper download : force_download


68

6. Email Helper

File Helper yang menyediakan fungsi yang membantu bekerja dengan email.

Untuk memuat helper ini kita dapat menggunakan perintah dibawah

$this->load->helper('email');

Fungsi yang tersedia pada helper email : valid_email, send_email

7. File Helper

File Helper yang terdiri dari fungsi yang membantu pengerjaan yang berhubun-

gan dengan le. Untuk memuat helper ini kita dapat menggunakan perintah

dibawah

$this->load->helper('le');

Fungsi yang tersedia pada helper le : read_le, write_le, delete_les,

get_lenames, get_dir_le_info, get_le_info, get_mime_by_extension, sym-

bolic_permissions, octal_permissions.

8. Form Helper

File Helper yang menyediakan fungsi yang membantu bekerja dengan form.

Untuk memuat helper ini kita dapat menggunakan perintah dibawah

$this->load->helper('form');

Fungsi yang tersedia pada helper form : form_open(), form_open_multipart(),

form_hidden(), form_input(), form_password(), form_upload(), form_textarea(),

form_dropdown(), form_eldset(), form_eldset_close(), form_checkbox(),

form_radio(), form_submit(), form_label(), form_reset(), form_button(),

form_close(), form_prep(), set_value(), set_select(), set_checkbox(), set_radio().


69

9. HTML Helper

File Helper yang menyediakan fungsi yang membantu bekerja dengan HTML.

Untuk memuat helper ini kita dapat menggunakan perintah dibawah

$this->load->helper('html');

Fungsi yang tersedia pada helper html : br(), heading(), img(), link_tag(),

nbs(), ol(), ul(), meta(), doctype().

10. Inector Helper

File Helper yang menyediakan fungsi yang mengizinkan user untuk mengubah

kata menjadi tunggal(singular), jamak(plural), camel case. Untuk memuat

helper ini kita dapat menggunakan perintah dibawah

$this->load->helper('inector');

Fungsi yang tersedia pada helper inector : singular(), plural(), camelize(),

underscore(), humanize().

11. Number Helper

File Helper yang menyediakan fungsi yang membantu bekerja dengan data

numerik. Untuk memuat helper ini kita dapat menggunakan perintah dibawah

ini

$this->load->helper('number');

Fungsi yang tersedia pada helper number adalah byte_format().

12. Path Helper

File Helper yang menyediakan fungsi yang yang mengizinkan user untuk bek-

erja dengan le path pada server. Untuk memuat helper ini kita dapat meng-

gunakan perintah dibawah ini


70

$this->load->helper('path');

Fungsi yang tersedia pada helper path adalah set_realpath().

13. Security Helper

File Helper yang menyediakan fungsi yang digunakan untuk keperluan security.

Untuk memuat helper ini kita dapat menggunakan perintah dibawah ini

$this->load->helper('security');

Fungsi yang tersedia pada helper security adalah xss_clean(), dohash(),

strip_image_tags(), encode_php_tags().

14. String Helper

File Helper yang menyediakan menyediakan fungsi yang membantu bekerja

dengan string. Untuk memuat helper ini kita dapat menggunakan perintah

dibawah ini

$this->load->helper('string');

Fungsi yang tersedia pada helper string adalah random_string(), alterna-

tor(), alternator(), reduce_double_slashes(), repeater(), trim_slashes(), re-

duce_multiples(), quotes_to_entities(), strip_quotes().

15. Text Helper

File Helper yang menyediakan fungsi yang membantu bekerja dengan text.

Untuk memuat helper ini kita dapat menggunakan perintah dibawah ini

$this->load->helper('text');

Fungsi yang tersedia pada helper text adalah word_limiter(), character_limiter(),

ascii_to_entities(), entities_to_ascii(), word_censor(), highlight_code(), high-

light_phrase(), word_wrap().
71

16. URL Helper

File Helper yang menyediakan fungsi yang membantu bekerja dengan text.

Untuk memuat helper ini kita dapat menggunakan perintah dibawah ini

$this->load->helper('url');

Fungsi yang tersedia pada helper URL adalah site_url(), base_url(), cur-

rent_url(), uri_string(), index_page(), anchor(), anchor_popup(), mailto(),

safe_mailto(), auto_link(), url_title(), prep_url(), redirect().

17. XML Helper

File Helper yang menyediakan fungsi yang membantu bekerja dengan data

XML. Untuk memuat helper ini kita dapat menggunakan perintah dibawah

ini.

$this->load->helper('xml');

Fungsi yang tersedia pada helper XML adalah xml_convert().

3.6.4 Library

Pada Framework CodeIgniter terdapat le library yang digunakan untuk

pembuatan web. Semua le library yang tersedia terletak pada direktori system/libraries.

Untuk menggunakan library tersebut dengan cara menyertakan pada controller den-

gan menggunakan kode dibawah ini.

$this->load->library('nama_kelas');
Nama_kelas merupakan nama kelas yang digunakan. Berikut ini contoh

untuk memuat library validation class

$this->load->library('validation');
72

Macam - macam Library class

1. Benchmarking Class

CodeIgniter mempunyai Benchmarking Class yang selalu aktif. Benchmarking

class ini sudah di inisialisasi secara otomatis oleh sistem CodeIgniter sehingga

user tidak perlu memuat le ini.

2. Calendering Class

Calendaring Class memperbolehkan user untuk membuat kalender dengan di-

namis. Kalender dapat dibuat menggunakan template. Dan memperbolehkan

pengontrolan setiap aspek dari design tersebut. Dan user juga dapat melakukan

passing data pada kalender.

3. Cong Class

Cong Class menyediakan cara untuk melakukan pengambilan kongurasi

preferensi. Preferensi kongurasi dapat berasal dari le cong pada direk-

tori system/application/cong/ atau le yang dibuat oleh user. Cong class

juga ini sudah di inisialisasi secara otomatis oleh sistem CodeIgniter sehingga

user tidak perlu memuat le ini.

4. Database Class

Database Class menyediakan cara untuk koneksi dengan database, serta melakukan

operasi-operasi pada database. Untuk menginisialisasi database class ini den-

gan menggunakan kode seperti dibawah ini.

$this->load->database();

Atau juga dapat menambahkan database di bagian libraries pada le au-

toload.php pada direktori system/application/cong.


73

5. Email Class

Email Class digunakan dalam keperluan yang berhubungan dengan email seper-

ti mengirim email. Untuk menginisialisasi class ini dengan menggunakan kode

seperti dibawah ini.

$this->load->library('email');

Atau juga dapat menambahkan email di bagian libraries pada le autoload.php

pada direktori system/application/cong.

6. Encryption Class

Encryption Class digunakan dalam keperluan yang berhubungan dengan enkrip-

si data. CodeIgniter juga menyediakan enkripsi 2 arah. Dan mendukung

metode enkripsi yang lain seperti MCrypt, SHA, Chipper. Untuk menginisial-

isasi class ini dengan menggunakan kode seperti dibawah ini.

$this->load->library('encrypt');

Atau juga dapat menambahkan encrypt di bagian libraries pada le autoload.php

pada direktori system/application/cong.

7. File Uploading Class

File Uploading Class digunakan dalam keperluan yang berhubungan dengan

pengunggahan data. Menginisialisasi class ini dengan menggunakan kode

seperti dibawah ini.

$this->load->library('upload');

Setelah upload class dimuat maka objek akan tersedia dengan menggunakan

$this->upload.
74

8. FTP Class

CodeIgniter juga mempunyai FTP Class yang memperbolehkan data di trans-

fer ke remote server. Data remotes dapat dipindahkan, diubah namanya dan

di hapus. Menginisialisasi class ini dengan menggunakan kode seperti dibawah

ini.

$this->load->library('ftp');

Fungsi - fungsi yang terdapat pada ftp class ini antara lain connect(), upload(),

rename(), move(), delete_le(), delete_dir(), list_les(), mirror(), mkdir(),

chmod(), close().

9. HTML Table Class

HTML Table Class menyediakan fungsi pembangkit otomatis tabel HTML

dari array atau hasil pengambilan dari database. Menginisialisasi class ini

dengan menggunakan kode seperti dibawah ini.

$this->load->library('table')

Fungsi - fungsi yang terdapat pada HTML Table class adalah generate(),

set_caption(), set_heading(), add_row(), make_columns(), set_template(),

set_empty().

10. Image Manipulation Class

Image Manipulation class digunakan untuk mengubah ukuran gambar, mem-

buat thumbnail gambar, memotong gambar, merotasi gambar, efek water-

marking. Menginisialisasi class ini dengan menggunakan kode seperti dibawah

ini.

$this->load->library('image_lib')
75

Fungsi - fungsi yang terdapat pada Image Manipulation class adalah resize(),

crop(),rotate(),clear(),watermark().

11. Input Class.

Input class mempunyai 2 kegunaan

• sebagai pra-proses input data untuk sekuriti.

• menyediakan beberapa fungsi helper untuk pengambilan input data dan


untuk keperluan security ltering dan xss ltering. Fungsi - fungsi yang

terdapat pada input class adalah xss_clean(), post(), get(), get_post(),

cookie(), server(), ip_address(), valid_ip($ip), user_agent().

12. Output Class.

Output class adalah class kecil yang mempunyai satu fungsi utama. Un-

tuk mengirimkan hasil ke web browser. Output class juga dapat digunakan

dalam proses caching halaman web jika user menggunakan tur tersebut. Out-

put class dimuat secara otomatis sehingga user tidak perlu diinisialisasi oleh

user. Fungsi - fungsi yang terdapat pada input class adalah set_output(),

get_output(), set_header(), set_status_header(), enable_proler(), cache().

13. Pagination Class.

Pagination class biasa digunakan untuk proses paging. Pada CodeIgniter pag-

ination class sangat mudah digunakan dan mudah untuk diatur oleh user.

Menginisialisasi class ini dengan menggunakan kode seperti dibawah ini.

$this->load->library('pagination')
76

14. Session Class

Session class digunakan untuk keperluan session pada user. untuk Mengin-

isialisasi class ini dengan menggunakan kode seperti dibawah ini.

$this->load->library('session')

Fungsi - fungsi yang terdapat pada Session class adalah userdata(), set_userdata(),

unset_userdata(), set_ashdata(), ashdata(), keep_ashdata(), sess_destroy().

15. Trackback Class

Trackback class menyediakan fungsi yang membolehkan user untuk mengir-

im dan menerima data trackback. Untuk Menginisialisasi class ini dengan

menggunakan kode seperti dibawah ini.

$this->load->library('trackback').

16. Unit Testing Class

Unit Testing Class merupakan library pada CodeIgniter yang digunakan untuk

keperluan unit testing. Class ini terdiri dari sebuah fungsi evaluasi dan dua

fungsi hasil. Ini diperuntukkan untuk mengevaluasi kode dan menentukan

apakah web di buat dengan tipe data yang benar. untuk Menginisialisasi class

ini dengan menggunakan kode seperti dibawah ini.

$this->load->library('unit_test').

17. User Agent Class

User Agent Class merupakan library pada CodeIgniter yang digunakan untuk

mengidentikasikan informasi tentang browser, perangkat mobile, atau robot

yang mengunjungi web. Untuk Menginisialisasi class ini dengan menggunakan

kode seperti dibawah ini.


77

$this->load->library('user_agent').

Fungsi - fungsi yang terdapat pada class ini adalah is_browser(), is_mobile(),

is_robot(), is_referral(), browser(), version(), mobile(), robot(), platform(),

referrer(), agent_string(), accept_lang(), accept_charset().

18. URI Class

URI Class merupakan library pada CodeIgniter yang menyediakan fungsi un-

tuk membantu mendaptkan informasi dari URI string. Class ini sudah di

inisialisasi secara otomatis oleh sistem Code Igniter sehingga user tidak perlu

memuat le ini.

Fungsi - fungsi yang terdapat pada class ini adalah rsegment(), slash_segment(),

slash_rsegment(), uri_to_assoc(), ruri_to_assoc(), assoc_to_uri(), uri_string(),

ruri_string(), total_segments(), total_rsegments(), segment_array().

19. Zip Encoding Class

Zip Encoding Class merupakan library pada CodeIgniter yang menyediakan

fungsi untuk membuat le arsip ZIP. File arsip bisa diunduh ke komputer

atau disimpan ke sebuah direktori. Untuk Menginisialisasi class ini dengan

menggunakan kode seperti dibawah ini.

$this->load->library('zip').

Fungsi - fungsi yang terdapat pada class ini adalah add_dir(), read_le(),

add_data(), read_dir(), archive(), download()

20. The Typography Class

The Typography Class merupakan library pada CodeIgniter yang menyediakan

fungsi untuk mnegubah format dari teks. Untuk Menginisialisasi class ini

dengan menggunakan kode seperti dibawah ini.


78

$this->load->library('typography').

Fungsi - fungsi yang terdapat pada class ini adalah auto_typography(), for-

mat_characters(), nl2br_except_pre(), protect_braced_quotes.

21. Loader Class

Loader Class merupakan le library pada CodeIgniter yang berguna untuk

memuat elemen. Elemen elemen tersebut bisa berupa library, le view, le

helper, le plugins.

• Untuk meload le view :

$this->load->view('le_name')

• Untuk meload le model :

$this->load->model('Model_name')

• Untuk meload database :

$this->load->database('options', true/false)

• Untuk meload le variable array :

$this->load->vars($array)

• Untuk meload le le helper :

$this->load->helper('le_name')

• Untuk meload le plugin :

$this->load->plugin('le_name')

• Untuk meload le :

$this->load->le('lepath/lename', true/false)

• Untuk meload le cong :

$this->load->cong('le_name')
79

3.6.5 Permodelan MVC pada CodeIgniter

Saat kita mengakses alamat instalasi CodeIgniter, misalkan di alamat

http://localhost/codeigniter, kita menjumpai halaman selamat datang.

Halaman ini disediakan oleh le welcome_message.php di dalam folder

system/application/views. File tersebut dikontrol oleh le welcome.php di folder

system/application/controllers.

Disini, controller welcome.php tidak menggunakan model, karena aplikasinya

sangat sederhana, tidak ada pengolahan data, dan tidak memerlukan interaksi den-

gan visitor.

Bagaimana CodeIgniter mengetahui controller mana yang dipanggil saat ki-

ta mengakses alamat root http://localhost/codeigniter (sebenarnya kita mengakses:

http://localhost/codeigniter/index.php/controller_default)? Hal ini, kita denisikan

di dalam le routes.php dalam folder system/application/cong.

Seperti sudah disebutkan di awal bahwa CodeIgniter menerapkan lingkungan

pengembangan dengan metode MVC (Model View Controller ). MVC memisahkan

antara logika pembuatan kode dengan pembuatan template atau tampilan website.

Pengunaan MVC membuat pembuat sebuah proyek website menjadi lebih terstruk-

tur dan lebih sederhana.

Secara sederhana konsep MVC terdiri dari tiga bagian yaitu bagian Model,

bagian View, dan bagian Controller. Didalam website dinamis setidaknya terdiri

dari 3 hal pokok, yaitu basis data, logika aplikasi dan cara menampilkan halaman

website. Tiga hal tersebut direpresentasikan dengan MVC yaitu model untuk basis

data, view untuk cara menampilkan halaman website dan controller untuk logika

aplikasi.
80

1. Model

Merepresentasikan struktur data dari website yang bisa berupa basis data

maupun data lain, misalnya dalam bentuk le teks atau le xml. Biasanya di-

dalam model akan berisi class dan fungsi untuk mengambil, melakukan update

dan menghapus website. Karena sebuah website biasanya menggunakan basis

data dalam menyimpan data maka bagian Model biasanya akan berhubungan

dengan perintah-perintah SQL.

Model bisa dibilang khusus digunakan untuk melakukan koneksi ke basis data

oleh karena itu logika-logika pemrograman yang berada didalam model juga

harus berhubungan dengan basis data. Misalnya saja pemilihan kondisi tetapi

untuk melakukan query yang mana.

2. View

Merupakan informasi yang ditampilkan kepada pengunjung website. Sebisa

mungkin didalam View tidak berisi logika-logika kode tetapi hanya berisi

variabel-variabel yang berisi data yang siap ditampilkan. View bisa dibilang

adalah halaman website yang dibuat menggunakan HTML dengan bantuan

CSS atau JavaScript.

Didalam view jangan pernah ada kode untuk melakukan koneksi ke basis data.

View hanya dikhususkan untuk menampilkan data-data dari hasil dari model

dan controller.

3. Controller

Controller merupakan penghubung antara Model dan View. Didalam Con-

troler inilah terdapat class dan fungsi-fungsi yang memproses permintaan dari

View kedalam struktur data didalam Model.


81

Controller juga tidak boleh berisi kode untuk mengakses basis data. Tugas

controller adalah menyediakan berbagai variabel yang akan ditampilkan di

view, memanggil model untuk melakukan akses ke basis data, menyediakan

penanganan error, mengerjakan proses logika dari aplikasi serta melakukan

validasi atau cek terhadapat input.

Jadi secara singkat urutan sebuat request adalah sebagai berikut : user

berhubungan dengan view, dimana didalam view inilah semua informasi ditampilkan.

Saat user melakukan permintaan atau request, misal klik tombol maka request terse-

but akan diproses oleh Controller. Apa yang harus dilakukan, data apa yang di-

inginkan, apakah ingin melihat data, atau memasukkan data atau mungkin melakukan

validasi data terlebih dahulu, semua diproses di Controller. Kemudian Controller

akan meminta Model untuk menyelesaikan request, entah itu melakukan query ataupun

apapun. Dari Model, data akan dikirim kembali untuk di proses lebih lanjut di dalam

Controller dan baru dari Controller data akan ditampilkan di View.

Jika digambarkan akan seperti gambar berikut :


82

Gambar 3.20: Model MVC CodeIgniter

3.6.6 Integrasi Framework

Seperti yang telah dijelaskan sebelumnya pembuatan website dengan meng-

gunakan framework CodeIgniter bekerja didalam folder system. Didalam folder

system terdapat beberapa folder lain, yang akan sering kita akses adalah folder ap-

plication karena di folder inilah kode-kode (script-script ) akan disimpan. Kode-kode

yang dibuat akan disimpan didalam folder yang sesuai. Model disimpan pada folder

models, Controller disimpan pada folder controller, dan View disimpan pada folder

Views.

Controller yang digunakan pada website ini yaitu :

- admin - berita - buku_tamu - cek_login - chek

- data_siswa - events - gallery - kerjasama_antar_lembaga - member

- pesan - prestasi - prole_guru - prole_sekolah - viewer


83

Model yang digunakan sebagai berikut :

- madmin

- mviewer

Dan untuk view dibedakan menjadi tiga folder, yaitu

1. Folder admin : Pada folder ini berisikan untuk tampilan administrator.

2. Folder member : Folder ini digunakan untuk tampilan anggota (member ).

3. Folder guest : Untuk menyimpan tampilan tamu (guest ).

Folder Admin yang digunakan yaitu sebagai berikut :

- berita_skul - buku_tamu - data_siswa

- footer - galery_admin - header

- home - kata_sambutan - menu

- pesan - prole_guru - prole_skul

- userpass

Folder member berisikan le-le sebagai berikut :

- berita_skul - galery_member - home

- userpass_user - menu - header

- footer

Dan untuk folder guest le-le yang digunakan yaitu sebagai berikut:

- berita - buku_tamu - data_siswa

- events - hal_utama - halaman_admin

- home - kerjasama - pesan

- prestasi - prol_skul - prole_guru_viewer

- program - sejarah_skul - slide_depan

- slideshow - struktur - visimisi


84

Gambar 3.21: Halaman Home Tamu (guest )

Pada saat mengakses alamat http://sman1ciomas-bgr.sch.id maka halaman

yang tampil pertama kali seperti tampak pada gambar di atas, yaitu halaman home

tamu (guest ). Untuk menampilkan halaman tersebut akan diproses oleh sebuah

controller, controller yang digunakan yaitu controller viewer dengan function index.

Pada controller ini tidak memanggil sebuah model, karena query yang digunakan

tidak terlalu complex. Kemudian controller viewer akan memanggil view untuk
85

memberikan tampilan kepada user. View yang digunakan berada pada folder guest,

yaitu le hal_utama dan home. File hal_utama merupakan sebuah le yang digu-

nakan untuk menampilkan header, menu (struktur navigasi), isi website, dan footer.

Sehingga le ini akan selalu digunakan oleh controller-controller yang berhubungan

dengan tampilan tamu (guest ). Sedangkan le home merupakan le yang digu-

nakan untuk menampilkan isi dari halaman home dan merupakan bagian dari le

hal_utama.

Ketika user melakukan request seperti mengklik salah satu menu, misalkan

user mengklik menu Hubungi Kami. Maka request tersebut akan di proses oleh

controller pesan dengan function hubungi_kami. Controller ini memanggil sebuah

model, yaitu model mviewer. Dimana pada model ini terdapat beberapa function,

dan function yang digunakan oleh controller pesan dengan function hub_kami yaitu

function captcha. Function captcha digunakan untuk membuat sebuah kode-kode

keamanan, kemudian data akan dikirim kembali ke controller tersebut dan selan-

jutnya controller akan memanggil view pada folder guest dengan nama hal_utama

dan pesan. Seperti telah di jelaskan sebelumnya le hal_utama merupakan le uta-

ma untuk tampilan tamu (guest ). Sedangkan le pesan merupakan isi dari menu

Hubungi Kami. Halaman Hubungi Kami dapat dilihat pada gambar dibawah ini.
86

Gambar 3.22: Halaman Hubungi Kami

Setelah user mengisi eld-eld yang tersedia pada menu Hubungi Kami dan

mengklik tombol kirim, maka controller pesan dengan function input_pesan akan

di proses. Dimana pada function ini data yang di masukkan (input ) oleh user akan

disimpan kedalam database. Untuk memasukkan data tersebut kedalam database

diperlukan sebuah model. Model yang digunakan yaitu model mviewer dengan

function pesan. Dimana pada function inilah data-data yang di masukkan oleh
87

user akan di simpan kedalam database. Kemudian dari model ini data akan dikirim

kembali ke controller untuk diproses lebih lanjut di controller dan selanjutnya akan

ditampilkan di view, dengan le hal_utama dan pesan.

Dan untuk menu-menu lainnya, menggunakan cara kerja yang hampir sama

dengan menu diatas. Yang membedakan adalah controller yang digunakan dan view

yang digunakan. Setiap menu memiliki controller tersendiri dan view yang tersendiri

pula.

Untuk melakukan perubahan isi website harus melakukan login terlebih dahu-

lu, baik administrator maupun anggota (member ). Untuk melakukan login, user

mengklik menu Administrator. Seperti tampak pada gambar dibawah ini :


88

Gambar 3.23: Halaman Login

Untuk login (masuk kedalam halaman administrator maupun halaman anggota)

controller yang digunakan sebanyak dua controller, yaitu controller chek_login dan

controller login. Pada saat user mengklik tombol Login maka controller yang akan

diproses terlebih dahulu adalah controller chek_login. Pada controller ini akan di-

lakukan pengecekan validasi, apakah data yang dimasukkan telah sesuai atau tidak.

Kemudian pada controller ini akan memanggil model madmin dengan function auth.
89

Function ini digunakan untuk melakukan pengecekan pada database, apakah data

yang dimasukkan terdapat pada database atau tidak. Selanjutnya data dikirim kem-

bali ke controller untuk proses lebih lanjut. Jika data yang dimasukkan terdapat

pada database, maka memanggil le lib_login pada folder libraries. Dimana pada le

ini akan menyimpan informasi mengenai user tersebut. Kemudian data dikirimkan

kembali ke controller untuk melakukan proses selanjutnya, yaitu dengan memanggil

controller chek. Tetapi jika data tidak ada pada database maka akan memanggil

controller viewer dengan function administrator untuk menampilkan pesan kesala-

han. Ketika berhasil melakukan login yaitu dengan dipanggilnya controller chek,

dimana pada controller ini proses yang dilakukan yaitu memanggil lib_status pada

folder libraries. Pada lib_status akan dilakukan pengecekan apakah user tersebut

berstatus sebagai admin atau user. Jika status user tersebut bertipe admin maka

user tersebut merupakan administrator, tetapi jika status user tersebut bertipe user

maka user tersebut login sebagai anggota (member ).

User yang login sebagai administrator maka controller yang akan di proses

adalah controller admin, sedangkan user yang login sebagai anggota (member ) maka

controller yang akan diproses adalah controller member. Pada controller admin

maupun controller member menggunakan beberapa function, dimana tiap function

mempunyai perintah dan kondisi tertentu. Ketika proses login telah berhasil dan

user merupakan administrator proses yang pertama kali dijalankan adalah function

home pada controller admin, dan dapat ditampilkan seperti gambar dibawah ini :
90

Gambar 3.24: Halaman Home Administrator

Dan Ketika login sebagai anggota (member ) maka proses yang pertama kali

adalah memanggil function home pada controller member, halaman home anggota

sebagai berikut:
91

Gambar 3.25: Halaman Home Member

Tampilan administrator dengan anggota (member ) tidaklah terlalu jauh berbe-

da, yang membedakan administrator dengan anggota adalah menu yang ditampilkan.

Menu pada halaman administrator lebih banyak dibandingkan pada halaman anggota

(member ).

Ketika administrator mengklik menu prole sekolah, maka proses yang terja-

di adalah memanggil controller admin dengan function prole_skul. Pada function

ini controller akan memanggil sebuah model dengan nama le madmin dan function

yang digunakan adalah function ambil_program_semua, ambil_kerjasama_semua,

dan ambil_prestasi_semua. Function-function ini akan melakukan sebuah query

yaitu mengambil data dari database, kemudian data tersebut akan dikirimkan kem-

bali ke controller untuk dilakukan proses selanjutnya, yaitu data tersebut akan di-
92

tampilkan pada view. View yang digunakan untuk status admin ini berada pada

folder admin, dan le yang digunakan adalah prole_skul. Halaman prole sekolah

digambarkan pada gambar berikut ini :

Gambar 3.26: Halaman Prole Sekolah

Ketika admin mengklik 'selengkapnya' pada pilihan Visi Misi maka controller

yang digunakan adalah controller admin dengan function lihat_detail. Pada func-

tion ini akan melakukan perintah query untuk menampilkan record tertentu dari

database. Karena query yang digunakan tidak terlalu banyak maka pada function

ini tidak menggunakan model. Proses yang terjadi yaitu controller melakukan ek-
93

sekusi kemudian hasil dari eksekusi tersebut akan ditampilkan dengan memanggil

le prole_skul pada folder view admin. Halaman akan tampak seperti gambar

dibawah ini:

Gambar 3.27: Halaman Visi Misi Selangkapnya

Untuk merubah isi dari visi tinggal mengklik 'Edit'. Ketika user melakukan

request untuk edit data, controller yang di proses adalah controller admin dengan

function form_edit. Pada proses edit ini function form_edit tidak memanggil mod-

el, karena query yang dilakukan tidaklah terlalu banyak. Kemudian controller akan

memanggil view untuk menampilkan hasil dari proses yaitu dengan menggunakan

view prole_skul. Akan tampak pada gambar di bawah ini :


94

Gambar 3.28: Halaman Edit Visi Misi

Ketika admin mengklik 'Edit Visi' maka controller yang digunakan adalah

controller admin dengan functionnya edit. Pada function ini controller akan me-

manggil model madmin dengan function edit_visi_misi, ambil_program_semua,

ambil_kerjasama_semua, dan ambil_prestasi_semua. Function edit_visi_misi

akan melakukan perubahan pada database pada record tertentu, sedangkan pada

function ambil_program_semua, ambil_kerjasama_semua, dan ambil_prestasi_semua

melakukan query untuk mengambil data dari database dan menghitung jumlah da-

ta yang terdapat pada database. Kemudian dari model akan mengirim data kem-

bali ke controller untuk melakukan proses selanjutnya. Selanjutnya controller akan

menampilkan data tersebut ke user dengan memanggil view prole_skul.


95

Pada menu prole sekolah, administrator dapat menambah data, yaitu den-

gan mengklik 'Tambah Data'. Data yang dapat di tambah pada menu prole sekolah

yaitu, program sekolah, kerjasama antar lembaga, dan prestasi. Halaman tambah

data seperti pada gambar dibawah ini.

Gambar 3.29: Halaman Tambah Data

Ketika admin melakukan request dengan mengklik tombol simpan, maka pros-

es yang terjadi adalah memanggil controller admin dengan function tambah_prole_skul.

Controller ini akan memanggil model madmin dengan function tambah_prole_skul,


96

ambil_program_semua, ambil_kerjasama_semua, dan ambil_prestasi_semua. Func-

tion tambah_prole_skul digunakan untuk memasukkan data-data yang diberikan

oleh view kedalam database, sedangkan ambil_program_semua, ambil_kerjasama_semua,

dan ambil_prestasi_semua digunakan untuk mengambil data dari database dan

menghitung jumlah data yang terdapat di database. Kemudian data-data tersebut

dikirim kembali ke controller untuk di proses lebih lanjut, dan kemudian controller

akan menampilkannya dengan memanggil view prole_skul.

Sama halnya dengan menu-menu yang lain. Semua proses akan dijalankan

pada controller admin dan model madmin, yang membedakan hanyalah function-

function yang dipanggil. Dan untuk setiap menampilkan ke user menggunakan view

pada folder admin.

Sementara untuk proses anggota (member ) menu yang dapat di gunakan

sedikit berbeda dengan menu yang terdapat pada administrator. Setiap proses yang

terjadi menggunakan controller member dan model yang digunakan adalah madmin.

Dan untuk menampilkan ke user view yang digunakan terdapat pada folder mem-

ber.
Bab 4
PENUTUP

4.1 Kesimpulan

Setelah menyelesaikan proses pembuatan website sekolah SMA Negeri 1 Ciomas

dengan menggunakn Framework PHP CodeIgniter, maka penulis mengambil kesim-

pulan bahwa dari segi desain, tampilan , menu ataupun link - link yang disajikan

dalam website sekolah SMA Negeri 1 Ciomas ini sudah bagus namun belum menarik

karena masih sangat sederhana.

Dari segi kegunaan, website ini dapat menjadi alternatife khalayak umum

untuk mengetahui informasi tentang sekolah SMA Negeri 1 Ciomas. Website ini

juga layak dibaca untuk semua kalangan, baik sekolah maupun dari luar sekolah.

Dalam sistem program website ini sudah dapat berjalan dengan baik karena tidak

terdapat error pada program saat pengkoneksian kedalam database dan diharapkan

sesuai dengan keinginan user.

4.2 Saran

Dalam perancangan website ini disadari masih banyak memiliki kekurangan.

Maka dari itu perlu yang harus dikembangkan misal dengan ditambahkan fasilitas

pendaftaran online, ataupun suara-suara, efek atau animasi supaya tampilan dalam

website ini menjadi lebih menarik dan informasi yang lebih banyak lagi.

97
Bibliogra

[1] Abdul Kadir, Tuntutan Praktis Belajar Database Manggunakan MySQL, ANDI,

Yogyakarta 2008.

[2] Abdul Majid, "Kriteria Isi Web", http://majidnst.wordpress.com/2007/11/05/kriteria-

isi-web/, 05 Juni 2009.

[3] Harry Yunanto, "Dasar-dasar Pembuatan Website Dengan CodeIgniter",

http://www.iorme.net/wp/wp-content/uploads/2008/03/buku-ci-bab1-4.pdf,

06 Mei 2009.

[4] Munawar, Permodelan Visual Dengan UML, Graha Ilmu, Yogyakarta, 2005

[5] Sri Rahayu, "Sekapur Sirih Tentang Framework CI

(CodeIgniter)", http://oke.or.id/wp-content/plugins/dowloads-

manager/upload/le47dc937797808.pdf, 06 Mei 2009.

[6] URL: http://www.codeigniter.com/user_guide/, 06 Mei 2009.

[7] URL: http://id.wikipedia.org/wiki/Ilmu_komputer, 24 Juli 2009

[8] URL: http://id.wikipedia.org/wiki/Komunikasi,24 Juli 2009.

98
LAMPIRAN OUTPUT

1. Halaman Pengunjung (Guest )

• Halaman Home

99
• Halaman Visi Misi

100
• Halaman Prol Sekolah

101
• Halaman Struktur Organisasi

102
• Halaman Prole Guru

103
• Halaman Data Siswa

104
• Halaman Prestasi

105
• Halaman Berita Events

106
• Halaman Gallery

107
2. Halaman Home Administrator

3. Halaman Home Anggota (Member )

108
4. Halaman Tambah Berita Events

109
5. Halaman Gallery

110
6. Halaman Tambah Gallery

111

You might also like