![Penulisan Ilmiah [PDF]](https://pdfs.asia/img/200x200/penulisan-ilmiah.jpg)
21 0 3 MB
UNIVERSITAS GUNADARMA FAKULTAS TEKNOLOGI INDUSTRI
PENULISAN ILMIAH
PENGEMBANGAN SITUS WEB SMAN 1 CIOMAS DENGAN MENGGUNAKAN TEKNOLOGI FRAMEWORK CODEIGNITER 1.7.1 Nama NPM Jurusan Pembimbing
: : : :
Ibnu Siena Syam 50406364 Teknik Informatika 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 NPM Judul PI
: : :
Ibnu Siena Syam 50406364 PENGEMBANGAN SITUS WEB SMAN 1 CIOMAS DENGAN MENGGUNAKAN TEKNOLOGI FRAMEWORK CODEIGNITER 1.7.1
Tanggal Sidang Tanggal Lulus
: :
1 September 2009 1 September 2009
menyatakan bahwa tulisan ini adalah merupakan hasil karya saya sendiri dan dapat 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 Nama NPM Tanggal Sidang Tanggal Lulus
: PENGEMBANGAN SITUS WEB SMAN 1 CIOMAS DENGAN MENGGUNAKAN TEKNOLOGI FRAMEWORK CODEIGNITER 1.7.1 : Ibnu Siena Syam : 50406364 : 1 September 2009 : 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 MENGGUNAKAN TEKNOLOGI FRAMEWORK CODEIGNITER 1.7.1 PI. Jurusan Teknik Informatika, Fakultas Teknologi Industri, Universitas Gunadarma, 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, gra k, suara, animasi, gambar bahkan dalam format video tanpa dibatasi oleh jarak dan waktu. Pada kesempatan ini, penulis ingin memanfaatkan media internet untuk merancang dan membuat situs Sekolah Menengah Atas Negeri 1 Ciomas. Situs ini digunakan 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 ditampilkan. 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 menyelesaikan jenjang D III / setara Sarjana Muda pada Universitas Gunadarma. Adapun 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 Jurusan 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 memberikan dukungan dan dorongan dalam penulisan ini. 9. Dan untuk semua yang tidak dapat disebutkan satu persatu, yang telah memberikan 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 . . . . . . . . . . . . . . . . . . . . . . . . . Pernyataan Originalitas dan Publikasi . . . . . . . . . . . . Lembar Pengesahan . . . . . . . . . . . . . . . . . . . . . . Abstraksi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Kata Pengantar . . . . . . . . . . . . . . . . . . . . . . . . . Daftar Isi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Daftar Gambar . . . . . . . . . . . . . . . . . . . . . . . . . Daftar Tabel . . . . . . . . . . . . . . . . . . . . . . . . . . . Daftar Lampiran . . . . . . . . . . . . . . . . . . . . . . . . BAB 1 : PENDAHULUAN . . . . . . . . . . . . . . . . . 1.1 Latar Belakang . . . . . . . . . . . . . . . . . . . . . . 1.2 Batasan Masalah . . . . . . . . . . . . . . . . . . . . . 1.3 Tujuan Penulisan . . . . . . . . . . . . . . . . . . . . . 1.4 Metode Pengembangan Aplikasi . . . . . . . . . . . 1.5 Sistematika Penulisan Ilmiah . . . . . . . . . . . . . BAB 2 : LANDASAN TEORI . . . . . . . . . . . . . . . 2.1 Teknologi Informasi dan Komunikasi . . . . . . . . 2.2 Penyebaran Informasi . . . . . . . . . . . . . . . . . . 2.3 Situs Web (Website ) . . . . . . . . . . . . . . . . . . . . 2.3.1 Pendukung Website . . . . . . . . . . . . . . . 2.3.2 Kriteria Website . . . . . . . . . . . . . . . . . 2.3.3 Jenis - jenis Website . . . . . . . . . . . . . . . 2.4 Website Sekolah . . . . . . . . . . . . . . . . . . . . . 2.5 Bahasa Pemograman Web . . . . . . . . . . . . . . . 2.6 Framework . . . . . . . . . . . . . . . . . . . . . . . . . 2.6.1 Arsitektur . . . . . . . . . . . . . . . . . . . . . 2.6.2 Manfaat Framework . . . . . . . . . . . . . . . 2.6.3 Pemilihan Framework . . . . . . . . . . . . . . 2.6.4 Model View Controller (MVC) . . . . . . . . 2.6.5 Jenis-Jenis Framework . . . . . . . . . . . . . 2.7 Pengenalan Database . . . . . . . . . . . . . . . . . . 2.7.1 DDL (Data De nition Language) . . . . . . 2.7.1.1 Create . . . . . . . . . . . . . . . . . . 2.7.1.2 Alter . . . . . . . . . . . . . . . . . . . 2.7.1.3 Drop . . . . . . . . . . . . . . . . . . . 2.7.2 DML (Data Manipulation Language) . . . . 2.7.2.1 Insert . . . . . . . . . . . . . . . . . . . 2.7.2.2 Select . . . . . . . . . . . . . . . . . . . 2.7.2.3 Delete . . . . . . . . . . . . . . . . . .
vii
. . . . . . . . . .
. . . . .
. . . . . . . . . .
. . . . .
. . . . . . . . . .
. . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . .
i ii iii iv v vii viii ix x 1 1 2 3 3 4 5 5 6 7 7 9 10 12 16 19 19 20 20 21 23 23 25 25 25 26 26 26 26 27
Update . . . . . . . . . . . . . . . . . . . . DCL (Data Control Language) . . . . . . . . . . 2.7.3.1 Grant . . . . . . . . . . . . . . . . . . . . . 2.7.3.2 Revoke . . . . . . . . . . . . . . . . . . . . 2.8 Diagram UML . . . . . . . . . . . . . . . . . . . . . . . . 2.8.1 Use Case Diagram . . . . . . . . . . . . . . . . . . 2.8.2 Class Diagram . . . . . . . . . . . . . . . . . . . . 2.8.3 Activity Diagram . . . . . . . . . . . . . . . . . . . 2.8.4 Sequence Diagram . . . . . . . . . . . . . . . . . . BAB 3 : ANALISA DAN PEMBAHASAN . . . . . . . . . 3.1 Tinjauan Umum . . . . . . . . . . . . . . . . . . . . . . . 3.2 Analisa Masalah . . . . . . . . . . . . . . . . . . . . . . . 3.3 Pemecahan Masalah . . . . . . . . . . . . . . . . . . . . . 3.4 Perencanaan Situs . . . . . . . . . . . . . . . . . . . . . . 3.5 Perancangan Situs . . . . . . . . . . . . . . . . . . . . . . 3.5.1 Perancangan Database . . . . . . . . . . . . . . . 3.5.2 Perancangan Tampilan Situs . . . . . . . . . . . 3.5.2.1 Rancangan Halaman Web . . . . . . . . 3.5.2.2 Halaman Beranda Tamu (guest ) . . . . 3.5.2.3 Halaman Beranda Anggota (member ) 3.5.2.4 Halaman Beranda Administrator . . . 3.5.3 Perancangan Sistem . . . . . . . . . . . . . . . . . 3.5.3.1 Use Case Diagram . . . . . . . . . . . . . 3.5.3.2 Activity Diagram . . . . . . . . . . . . . 3.5.3.3 Diagram Sequence . . . . . . . . . . . . . 3.5.3.4 Class Diagram . . . . . . . . . . . . . . . 3.6 Implementasi . . . . . . . . . . . . . . . . . . . . . . . . . 3.6.1 Framework CodeIgniter . . . . . . . . . . . . . . 3.6.2 Struktur Direktori . . . . . . . . . . . . . . . . . . 3.6.3 Helper . . . . . . . . . . . . . . . . . . . . . . . . . 3.6.3.1 Memuat Helper . . . . . . . . . . . . . . 3.6.4 Library . . . . . . . . . . . . . . . . . . . . . . . . . 3.6.5 Permodelan MVC pada CodeIgniter . . . . . . 3.6.6 Integrasi Framework . . . . . . . . . . . . . . . . . BAB 4 : PENUTUP . . . . . . . . . . . . . . . . . . . . . . . 2.7.3
4.1 4.2
2.7.2.4
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . .
. . . .
. . . .
Kesimpulan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Saran . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Bibliogra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Lampiran Output . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
viii
27 27 27 27 28 28 29 30 32 34 34 35 35 36 37 37 42 44 45 47 48 53 53 55 57 59 60 61 62 65 65 71 79 82 97 97 97 98 99
Daftar Gambar 2.1 2.2 2.3 2.4 2.5 2.6
Bahasa Pemrograman Web Model View Controller . . Use Case Diagram . . . . Class Diagram . . . . . . . Activiti Diagram . . . . . Sequence Diagram . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
17 22 28 30 31 32
3.1 3.2 3.3 3.4 3.5 3.6 3.7 3.8 3.9 3.10 3.11 3.12 3.13 3.14 3.15 3.16 3.17 3.18 3.19 3.20 3.21 3.22 3.23 3.24 3.25 3.26 3.27 3.28 3.29
Struktur Navigasi Pengunjung . . . . . Struktur Navigasi Admin . . . . . . . . Struktur Navigasi Anggota (Member ) . Halaman Beranda Tamu (Guest ) . . . Halaman Beranda Tamu (Guest ) . . . Halaman Beranda Anggota (Member ) . Halaman Beranda Administrator . . . Halaman Tambah username&password Halaman Tambah Pro le Sekolah . . . Halaman Tambah Guru . . . . . . . . Halaman Tambah Berita dan Events . Halaman Tambah Gallery . . . . . . . Use Case Diagram . . . . . . . . . . . Activity Diagram Administrator . . . . Activity Diagram Anggota . . . . . . . Diagram Sequence Administrator . . . Diagram Sequence Anggota . . . . . . Class Diagram . . . . . . . . . . . . . . Struktur Direktori CodeIgniter . . . . . Model MVC CodeIgniter . . . . . . . . Halaman Home Tamu (guest ) . . . . . Halaman Hubungi Kami . . . . . . . . Halaman Login . . . . . . . . . . . . . Halaman Home Administrator . . . . . Halaman Home Member . . . . . . . . Halaman Pro le Sekolah . . . . . . . . Halaman Visi Misi Selangkapnya . . . Halaman Edit Visi Misi . . . . . . . . . Halaman Tambah Data . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
43 43 44 45 46 47 48 49 50 51 52 53 54 56 57 58 59 60 63 82 84 86 88 90 91 92 93 94 95
ix
. . . . . .
. . . . . .
Daftar Tabel 2.1
Bahasa Pemograman Web . . . . . . . . . . . . . . . . . . . . . . . . 17
3.1 3.2 3.3 3.4 3.5 3.6 3.7 3.8 3.9
Tabel Tabel Tabel Tabel Tabel Tabel Tabel Tabel Tabel
Admin . . . . berita_events data_siswa . . galery . . . . . guru . . . . . . pesan . . . . . pro leskul . . pro le_skul . pro le_skul_2
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
x
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
38 38 39 39 40 40 41 41 42
Daftar Lampiran Tampilan Output ............................................................................... 99
xi
Bab 1 PENDAHULUAN 1.1 Latar Belakang 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, 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 diseluruh dunia dan menjadikan internet sebagai kata kunci dalam proses penyebaran dan media mencari informasi, diantaranya dalam bidang ekonomi, pendidikan, pemerintahan, sosial dan lain-lain. Penyebaran informasi diinternet tidak terlepas dari sebuah layanan yang bernama website. Melalui website informasi dapat disampaikan baik berbasis teks, gra k, suara, animasi, gambar bahkan dalam format video. Seiring dengan perkembangan internet yang semakin pesat membuat Universitas 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. Dengan 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 merancang dan membuat situs Sekolah Menengah Atas Negeri 1 Ciomas. Situs ini digunakan 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 menggunakan teknologi Framework CodeIgniter 1.7.1". Penulisan ilmiah ini, dibangun dengan menggunakan framework CodeIgniter sebagai software penunjang pembuatan 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 bersangkutan. 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 framework CodeIgniter. 5. Melakukan proses pembuatan program(coding ) dengan menggunakan framework CodeIgniter.
4
1.5 Sistematika Penulisan Ilmiah Penulisan Ilmiah ini diuraikan ke dalam 4 bab, yang diharapkan dapat mempermudah 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 kon gurasi 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 pengolahan data elektronis (electronic data processing ). Teknologi informasi dide nisikan sebagai teknologi pengolahan dan penyebaran data menggunakan perangkat keras (hardware ) dan perangkat lunak (software ), komputer, komunikasi, dan elektronik digital. Komunikasi dide nisikan 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 perkembangan 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 sebuah media komunikasi. Penyebaran informasi tersebut dapat berupa berita aktual, dan promosi atau informasi yang diberikan untuk tujuan meningkatkan popularitas. 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. Dengan adanya berbagai media komunikasi ini penyampaian segala informasi lebih mudah 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 dengar 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 berlangsung dengan memakai dokumen yang formatnya sama yang disebut protokol TCP/IP. Pusat internet merupakan pengatur komunikasi data kecepatan tinggi (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 membantu penyaluran (me-rutekan) informasi dan data. Dengan kemampuan ini maka internet dapat menawarkan sejumlah jasa ke pemakai, antara lain : percakapan(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 digunakan untuk mengaksesnya. Bentuk umum URL ialah http:// yang berisikan alamat internet dari suatu halaman Web yang dapat disebut sebagai protokol 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 semua informasi di dalam medianya, yang berupa perangkat lunak dan perangkat keras, untuk menjalankan situs Web yang terkandung didalamnya. Dalam internet 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. Halaman 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, gra k, 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 dinamakan 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 pengembangan 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 menambahkan 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 Klasi kasi website berdasarkan 1. Situs Perusahaan
Website yang menekankan informasi suatu perusahaan dalam bentuk company pro le di internet. 2. E-learning
Website yang menyediakan informasi sistem pengajaran, sistem pelatihan, berbasis internet. Dengan E-Learning masyarakat terutama insan pelajar dapat 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 memiliki banyak komunitas seperti yahoo group, yahoo mail, yahoo game, yahoo nance, yahoo chat dsb. 5. Situs Pribadi
Website pribadi yang menampilkan informasi pro l 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 langsung 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 Universitas. (b) Situs Sekolah contohnya SD, SMP, SMA.
12
2.4 Website Sekolah Salah satu jenis website yang akan dibahas pada penulisan ini adalah situs pendidikan untuk kategori situs sekolah khususnya pada tingkat SMA. Website sekolah memiliki beberapa keuntungan, diantaranya : 1. Memperkenalkan pro l sekolah. Membuat orang-orang mengerti dimana, bagaimana dan apa hebatnya sekolah, tentu saja harus ada informasi. Pro l 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 manfaatnya 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 sekolah melalui media website di Internet. Bentuk komunikasi yang terjalin diantaranya:
• 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 membuat sebuah situs sekolah, diantaranya kita harus memperhatikan : (a) Pemilihan warna. Warna merupakan salah satu elemen yang penting dalam tampilan sebuah 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 secara umum seperti ada sebuah menu, lalu ada isi (content ) , header (title), Footer, dan isi-isi lainnya menyesuaikan struktur situs yang sudah 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 Gra s Desain gra s merupakan elemen utama yang diperhatikan oleh pengunjung situs karena disini ada sebuah kondisi dimana pengunjung akan berkomentar, situs ini bagus atau tidak. Parameter-parameter yang kita bahas sebelumnya seperti desain layout, struktur content dan lainnya sangat berpengaruh untuk desain gra s situs anda. Terutama untuk desain 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 mencari 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 kompatibilitasnya dengan browser-browser yang umum dipakai. (f) Ketepatan isi Apakah di situs tersebut terbebas dari broken link ? bebas dari error? Pada kasus yang umum hal ini sering terjadi pada saat halaman yang kita tuju tidak ada isinya (The page cannot be found), lalu ada aplikasi-aplikasi yang mengalami gangguan/error, atau bahkan Membangun & Memanfaatkan website Sekolah ada yang melakukan percobaan-percobaan/trial situs di area aktif situs tersebut (try & error). Terkadang para web developer lupa untuk tidak melakukan developent atau uji coba di area server yang sudah aktif/running. Tentunya broken link ataupun error tadi 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 jangka waktu tertentu maka mereka akan menilai situs ini statis dan tidak menarik lagi untuk mereka kunjungi. (h) E siensi Dalam point ini kita bicara mengenai konsistensi penempatan dan tampilan 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 maksud 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 halaman 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 ColdFusion Flash/Actionscript
Java/JSP JavaScript Perl
PHP Python Ruby
Menurut situs berdasarkan sumber http://webdesign.about.com/ pemograman 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, AdabasD, 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 rancangan arsitektur untuk memberikan kecepatan, ketepatan, kemudahan dan konsistensi di dalam pengembangan aplikasi dari de nisi tersebut, framework mengandung unsur-unsur berikut :
• Librari • Arsitektur • Metodologi Framework menyediakan pustaka yang lengkap dan terintegrasi. Unsur inilah 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 pengorganisasian le dan pustaka, dan bagaimana pustaka-pustaka digunakan. Framework 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 karena berbasis pada framework yang sudah teruji stabilitas dan kehandalannya.
• Coding style konsisten, memudahkan dalam membaca kode dan dalam menemukan bugs.
• security concern, framework mengantisipasi dan memasang perisai terhadap adanya berbagai masalah keamanan yang mungkin timbul
• dokumentasi, framework dapat mendisiplinkan kita untuk menulis dokumentasi untuk apa yang kita tulis
2.6.3 Pemilihan Framework Pemilihan framework yang salah akan menjadi sebuah bencana bagi penggunanya. Ada beberapa hal yang harus di pertimbangkan dalam memilih framework:
• Pertama dokumentasi dari framework itu sendiri. Dokumentasi sangat penting 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, penambahan 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 kemungkinan 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 menjadi data yang mengandung arti yang diinginkan oleh pengguna. Model biasanya berhubungan langsung dengan database untuk memanipulasi data, menangani validasi 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 organisasikan 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 mende nisikan, 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 memodi kasi pada kode sumbernya untuk memenuhi kebutuhan spesi kasi. MySQL merupakan database multi-user. Dengan memiliki banyak tur, MySQL bisa bersaing 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 perusahaan 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 De nition Language (DDL), Data Manipulation Language (DML) dan
Data Control Language (DCL). DDL berfungsi pada obyek database, seperti membuat tabel, mengubah tabel, dan menghapus tabel. DML untuk objek tabel, seperti melihat, menambah, menghapus dan mengubah isi tabel. Sedangkan DCL untuk kepentingan sekuritas database, seperti memberikan hak akses ke database dan menghapus hak tersebut dari database.
2.7.1 DDL (Data De nition Language) DDL bertugas untuk membuat obyek SQL dan menyimpan de nisinya 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 nama_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 nama_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 sebelumnya 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 classi cation, dy-
namic behavior, dan model management, bisa kita pahami dengan mudah apabila kita melihat gambar dibawah dari Diagrams. Main concepts bisa kita pandang sebagai 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 sebuah 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 requirement sebuah sistem, mengkomunikasikan rancangan dengan klien, dan merancang test case untuk semua feature yang ada pada sistem. Sebuah use case dapat menginclude 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 hubungan generalisasi antar use case menunjukkan bahwa use case yang satu merupakan spesialisasi dari yang lain.
2.8.2 Class Diagram Class adalah sebuah spesi kasi yang jika diinstansiasi akan menghasilkan sebuah 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 hubungan 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 abstrak 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 menggambarkan 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 subsistem) secara eksak, tetapi lebih menggambarkan proses-proses dan jalur-jalur aktivitas 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 menggambarkan behaviour pada kondisi tertentu. Untuk mengilustrasikan proses-proses paralel (fork dan join ) digunakan titik sinkronisasi yang dapat berupa titik, garis horizontal 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 (waktu) 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 lainnya. 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 mende nisikan 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 memiliki peranan yang sangat strategis. Pendidikan berkontribusi dalam mengembangkan sumber daya manusia (SDM) yang bermutu, dengan indikator berkualiti kasi 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 mementingkan 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, dapat 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 waktu. 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 informasi. 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 waktu 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 selukbeluk 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 dengan 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 e sien. 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 perkembangan 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 pada 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 masingmasing tabelnya memiliki eld tersendiri. Ke-9 tabel itu antara lain: 1. Tabel admin Tabel ini digunakan untuk menyimpan username dan password yang digunakan 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 pro leskul Tabel ini digunakan untuk menyimpan informasi visimisi, sejarah sekolah, struktur organisasi, dan sambutan dari kepala sekolah. Field- led yang dimiliki :
41 Tabel 3.7: Tabel pro leskul
8. Tabel pro le_skul Tabel yang digunakan untuk menyimpan pro l sekolah. Field- led yang dimiliki sebagai berikut : Tabel 3.8: Tabel pro le_skul
9. Tabel pro le_skul_2 Tabel ini digunakan untuk menyimpan informasi mengenai prestasi, program, dan kerjasama antar lembaga. Filed- lednya sebagai berikut :
42 Tabel 3.9: Tabel pro le_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 pembuatan 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 mengorganisasikan 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 administrator, 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 halaman 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, pro l sekolah, dan struktur organisasi pada menu pro le 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 Pro le Sekolah Halaman ini digunakan untuk menambah pro le sekolah. Seperti program sekolah, kerjasama antar lembaga, dan prestasi.
Gambar 3.9: Halaman Tambah Pro le Sekolah 3. Tambah Guru Diisi jika ada tambahan guru, baik guru bantu (honorer ) maupun guru pindahan 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, penambahan 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 penambahan 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 pro le sekolah, gallery, membaca 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, mengelola gallery, dan mengelola account seperti mengubah nama, username, dan password. 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, menggambarkan bahwa seorang administrator wajib melakukan otenti kasi 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 otenti kasi terlebih dahulu dan mengakhirinya 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 administrator 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 administrator 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 dengan 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, memodi kasi dan mendistribusikan framework CodeIgniter beserta dokumentasi untuk banyak tujuan. Framework CodeIgniter berjalan pada PHP versi 4.3.2 atau yang lebih terbaru, 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 Direktori 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 con g : tempat menyimpan semua le kon gurasi 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 manipulation 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 scaffolding .
• Folder user_guide berisi userguide/manual penggunaan CI. Framework CodeIgniter juga menyediakan libray dan helper untuk mempermudah 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 sederhana. 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 system/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, memuat le helper kita menggunakan fungsi seperti dibawah ini
$this->load->helper('nama_helper'); Penulisan nama Helper tidak menyertakan ekstensi php dari le helper tersebut. 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', 'nama_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/con g 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 tersebut 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 Tanggal. 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 berhubungan dengan direktori. Untuk memuat helper ini kita dapat menggunakan perintah 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 berhubungan dengan pengunduhan data. Untuk memuat helper ini kita dapat menggunakan 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 berhubungan 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, symbolic_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. In ector 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('in ector'); Fungsi yang tersedia pada helper in ector : 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 bekerja dengan le path pada server. Untuk memuat helper ini kita dapat menggunakan 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(), alternator(), alternator(), reduce_double_slashes(), repeater(), trim_slashes(), reduce_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(), highlight_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(), current_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 dengan 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 dinamis. Kalender dapat dibuat menggunakan template. Dan memperbolehkan pengontrolan setiap aspek dari design tersebut. Dan user juga dapat melakukan passing data pada kalender. 3. Con g Class Con g Class menyediakan cara untuk melakukan pengambilan kon gurasi preferensi. Preferensi kon gurasi dapat berasal dari le con g pada direktori system/application/con g/ atau le yang dibuat oleh user. Con g 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 dengan menggunakan kode seperti dibawah ini.
$this->load->database(); Atau juga dapat menambahkan database di bagian libraries pada le autoload.php pada direktori system/application/con g.
73 5. Email Class Email Class digunakan dalam keperluan yang berhubungan dengan email seperti 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/con g. 6. Encryption Class Encryption Class digunakan dalam keperluan yang berhubungan dengan enkripsi data. CodeIgniter juga menyediakan enkripsi 2 arah. Dan mendukung metode enkripsi yang lain seperti MCrypt, SHA, Chipper. Untuk menginisialisasi 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/con g. 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 transfer 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, membuat thumbnail gambar, memotong gambar, merotasi gambar, efek watermarking. 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. Untuk mengirimkan hasil ke web browser. Output class juga dapat digunakan dalam proses caching halaman web jika user menggunakan tur tersebut. Output 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_pro ler(), cache(). 13. Pagination Class. Pagination class biasa digunakan untuk proses paging. Pada CodeIgniter pagination 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 Menginisialisasi 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 mengirim 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 mengidenti kasikan 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 untuk 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(), format_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 con g :
$this->load->con g(' 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 dengan visitor. Bagaimana CodeIgniter mengetahui controller mana yang dipanggil saat kita mengakses alamat root http://localhost/codeigniter (sebenarnya kita mengakses: http://localhost/codeigniter/index.php/controller_default)? Hal ini, kita de nisikan di dalam le routes.php dalam folder system/application/con g. 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 terstruktur 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 didalam 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 Controler 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 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. 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 menggunakan framework CodeIgniter bekerja didalam folder system. Didalam folder system terdapat beberapa folder lain, yang akan sering kita akses adalah folder application 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
- pro le_guru - pro le_sekolah
- prestasi
- 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
- pro le_guru
- pro le_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
- pro l_skul
- pro le_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 digunakan 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 digunakan 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 selanjutnya controller akan memanggil view pada folder guest dengan nama hal_utama dan pesan. Seperti telah di jelaskan sebelumnya le hal_utama merupakan le utama 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 dahulu, 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 dilakukan 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 kembali 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 kesalahan. 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 berbeda, yang membedakan administrator dengan anggota adalah menu yang ditampilkan. Menu pada halaman administrator lebih banyak dibandingkan pada halaman anggota (member ). Ketika administrator mengklik menu pro le sekolah, maka proses yang terjadi adalah memanggil controller admin dengan function pro le_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 kembali 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 pro le_skul. Halaman pro le sekolah digambarkan pada gambar berikut ini :
Gambar 3.26: Halaman Pro le 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 pro le_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 model, karena query yang dilakukan tidaklah terlalu banyak. Kemudian controller akan memanggil view untuk menampilkan hasil dari proses yaitu dengan menggunakan view pro le_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 memanggil 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 data yang terdapat pada database. Kemudian dari model akan mengirim data kembali ke controller untuk melakukan proses selanjutnya. Selanjutnya controller akan menampilkan data tersebut ke user dengan memanggil view pro le_skul.
95 Pada menu pro le sekolah, administrator dapat menambah data, yaitu dengan mengklik 'Tambah Data'. Data yang dapat di tambah pada menu pro le 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 proses yang terjadi adalah memanggil controller admin dengan function tambah_pro le_skul. Controller ini akan memanggil model madmin dengan function tambah_pro le_skul,
96 ambil_program_semua, ambil_kerjasama_semua, dan ambil_prestasi_semua. Func-
tion tambah_pro le_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 pro le_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 member.
Bab 4 PENUTUP 4.1 Kesimpulan Setelah menyelesaikan proses pembuatan website sekolah SMA Negeri 1 Ciomas dengan menggunakn Framework PHP CodeIgniter, maka penulis mengambil kesimpulan 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/kriteriaisi-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,
(CodeIgniter)",
"Sekapur
Sirih
Tentang
Framework
CI
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 Pro l Sekolah
101
• Halaman Struktur Organisasi
102
• Halaman Pro le 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
