Perancangan dan Implementasi Website Sekolah Menggunakan
PHP
Framework
CodeIgniter (Studi Kasus : SMP Pangudi Luhur
Salatiga)
Artikel Ilmiah
Diajukan kepada Fakultas Teknologi Informasi
Untuk memperoleh Gelar Sarjana Komputer
Oleh:
Andi Andreas Bornok Simaremare NIM: 672013195
Program Studi Teknik Informatika
Fakultas Teknologi Informasi
Universitas Kristen Satya Wacana
1. Pendahuluan
Keberadaan website sekolah merupakan suatu kebutuhan yang tidak dapat dihindari lagi seiring dengan perkembangan zaman. Adanya website sekolah merupakan suatu identitas baru bagi sekolah. Selain sebagai identitas sekolah, penggunaan website sekolah berperan sebagai sarana promosi sekolah serta sebagai media informasi dan komunikasi antara sekolah dengan siswa, sekolah dengan orang tua, sekolah dengan alumni, dan sekolah dengan masyarakat.
Sekolah merupakan salah satu tempat dimana siswa mendapatkan ilmu secara formal. Keberadaan sekolah yang semakin banyak tentunya membuat calon murid dan orang tua harus semakin selektif dalam menentukan tempat menimba ilmu agar sekolah yang dipilih merupakan tempat yang tepat. Informasi seperti profil, visi misi, akreditasi, ekstrakurikuler, fasilitas dan prestasi telah tersedia di website sekolah. Informasi ini dapat membantu calon murid dan orang tua dalam memilih sekolah.
Sekolah Menegah Pertama (SMP) Pangudi Luhur Salatiga yang beralamat di Jalan Diponegoro 90 Salatiga, merupakan salah satu sekolah menengah pertama yang diselenggarakan di bawah naungan Yayasan Pangudi Luhur yang berpusat di Semarang. Wawancara dipilih menjadi metode dalam pengumpulan data terkait penyebaran informasi sekolah. Wawancara dilakukan kepada salah satu guru yang berperan sebagai guru Teknologi Informasi dan Komunikasi. Hasil wawancara yang telah dilakukan menjelaskan bahwa saat ini penyebaran informasi seputar sekolah SMP Pangudi Luhur Salatiga hanya disampaikan dalam bentuk cetak. Sebelumnya sekolah telah mempunyai website sekolah, namun website tersebut telah lama mati sehingga penyebaran informasi sekolah kurang efektif. Informasi sekolah seperti pendampingan siswa dan kegiatan ekstrakurikuler akan lebih efektif jika dapat diakses oleh siswa dan orang tua melalui website sekolah karena informasi tersebut dapat dilihat kapan dan dimana saja.
Membangun sebuah website dapat dilakukan menggunakan berbagai metode. Salah satu metode yang dapat digunakan dalam membangun website yaitu menggunakan PHP Framework CodeIgniter. CodeIgniter adalah sebuah
framework untuk membangun aplikasi website berbasis PHP. CodeIgniter menyediakan banyak library sehingga memungkinkan pengembangan aplikasi dengan lebih cepat. Salah satu keunggulan CodeIgniter dibanding framework lain adalah kesederhanaan penggunaannya dan kecepatan eksekusinya. Keunggulan menggunakan CodeIgniter yaitu penyimpanan code akan lebih rapi dan terstruktur karena menggunakan metode Model View Controller [1]. Keungulan menggunakan metode Codeigniter juga dapat membantu sekolah untuk mengembangkan website sekolah karena code telah tertata dengan rapi.
pengembangan. Berdasarkan latar belakang yang ada dan keunggulan menggunakan metode Codeigniter maka dilakukan penelitian dan dijadikan sebagai tugas akhir dengan judul Perancang dan Implementasi Website Sekolah Menggunakan PHP Framework CodeIgniter (Studi Kasus : SMP Pangudi Luhur Salatiga).
2. Kajian Pustaka
Penelitian yang membahas pembuatan website sekolah telah dilakukan oleh beberapa peneliti. Penelitian berikut merupakan pembahasan singkat dari penelitian terdahulu yang dapat dijadikan kajian untuk membandingkan penelitian yang akan dilakukan. Kajian perbandingan ini dilakukan untuk melihat persamaan dan perbedaan dari penelitian terdahulu dengan penelitian yang akan dilakukan. Hasil dari perbandingan ini dapat dijadikan patokan untuk penelitian yang akan dilakukan sehingga dapat diketahui metode atau teknologi yang tepat untuk membuat website sekolah.
Penelitian sebelumnya berjudul Pembuatan Website Profil Sekolah Dasar Negri 03 Karangsari Jatiyoso. Penelitian ini membahas pembuatan website profil sekolah dasar. Penyampaian informasi di Sekolah Negri 03 Karangsari dilakukan secara konvensional yaitu bagi yang ingin mengetahui informasi harus datang langsung ke Sekolah Negri 03. Hal tersebut tentunya akan menyita banyak waktu. Berdasarkan masalah yang ada dibuat Website Profil Sekolah sebagai sarana promosi dan informasi menggunakan Incomedia Website X5. Tampilan utama website sekolah ini mempunyai 7 menu navigasi yaitu menu Home, Profil, Kesiswaan, Fasilitas, Staf Pengajar, Berita dan Prestasi. Hasil dari penelitian ini yaitu pihak sekolah dapat memberikan informasi dengan jangkauan yang lebih luas dan masyarakat umum maupun warga sekolah SD Negri 03 dapat mencari informasi sekolah secara online melalui alamat http://sd03karangsari.com [2].
Penelitian lainnya berjudul Perancangan Website Sekolah Menengah Pertama Negeri 262 Cakung Jakarta Timur Dengan Menggunakan PHP Dan MYSQL. Penelitian ini membahas perancangan website sekolah menengah pertama. Sekolah menengah pertama Negeri 262 Cakung Jakarta Timur telah berdiri sejak tahun 1990, sekolah mempunyai sarana dan prasarana yang memadai untuk menunjang kegiatan belajar mengajar serta telah berhasil mencetak lulusan yang berkualitas. Namun sekolah yang telah lama berdiri ini belum mempunyai website sekolah sebagai salah satu media informasi elektronik yang dapat membantu sekolah dalam media promosi yaitu sebagai sarana komunikasi dalam berbagai aktifitas masyarakat yang lebih luas, termasuk dalam bentuk forum atau kelompok diskusi. Berdasarkan hal tersebut dilakukan perancangan website sekolah menggunakan PHP dan MySQL. Tampilan utama website sekolah ini mempunyai 4 menu navigasi yaitu menu Home, Info Sekolah, Gallery, Download, dan Help Desk. Hasil dari penelitian ini yaitu masyarakat dapat dengan mudah memperoleh informasi berkaitan SMP Negri 262 Jakarta Timur secara online melalui alamat www.smpn262jakarta.sch.id [3].
terhadap penelitian yang akan dilakukan. Penelitian terdahulu menggunakan Incomedia Website X5, PHP dan MYSQL dalam membangun website sekolah. Penelitian yang akan dilakukan akan menggunakan website sekolah menggunakan Framework CodeIgniter. Penelitian ini diharapkan dapat memberikan kemudahan kepada pihak sekolah dalam menyampaikan informasi kepada orangtua maupun para murid dan membantu para guru dalam membagikan materi kepada para murid-murid sekolah.
Penelitian yang akan dilakukan ini menggunakan Codeigniter sebagai kerangka kerja. Aplikasi PHP dinamis dapat dibangun menggunakan CodeIgniter yang merupakan sebuah web application framework yang bersifat open source. Tujuan utama pengembangan Codeigniter adalah untuk membantu developer
untuk mengerjakan aplikasi lebih cepat daripada menulis semua code dari awal. Codeigniter menyediakan berbagai macam library yang dapat mempermudah dalam pengembangan aplikasi. CodeIgniter diperkenalkan kepada publik pada tanggal 28 februari 2006. CodeIgniter dibangun menggunakan konsep Model
-View-Controller development pattern dan merupakan salah satu framework
tercepat dibandingkan dengan framework lainnya. Menggunakan CodeIgniter sebagai framework memiliki kelebihan diantaranya sangat ringan, terstruktur, mudah dipelajari, dokumentasi lengkap dan dukungan yang luar biasa dari forum CodeIgniter. Fitur-fitur lainnya yang bermanfaat pada CodeIgniter antara lain:
Menggunakan Pattern Model View Controller (MVC).
Menggunakan pattern MVC ini, struktur kode yang dihasilkan menjadi lebih terstruktur dan memiliki standar yang jelas.
URL Friendly.
URL yang dihasilkan sangat url friendly karena penggunaan $_GET akan digantikan dengan URI.
Kemudahan.
Kemudahan dalam mempelajari, membuat library dan helper, memodifikasi serta mengintegrasikan library dan helper.
CodeIgniter memiliki keunggulan dibandingkan menggunakan framework diantaranya:
Kecepatan.
Berdasarkan hasil benchmark CodeIgniter merupakan salah satu
framework PHP tercepat yang ada saat ini.
Mudah dimodifikasi dan beradaptasi.
Sangat mudah memodifikasi behavior framework ini. Tidak membutuhkan
server requirement yang macam-macam serta mudah mengadopsi library
lainya.
Dokumentasi lengkap dan jelas.
CodeIgniter telah menyediakan sebuah panduan yang lengkap mengenai CodeIgniter.
Learning Curve Rendah.
pengembang. Jika sebuah framework sangat sulit dipelajari maka akan beresiko untuk memperlambat kinerja pengembang.
Salah satu kelebihan menggunakan CodeIgniter yaitu menggunakan pattern Model View Controller (MVC). MVC adalah sebuah teknik pemrograman yang memisahkan bisnis logic (alur pikir), data logic (penyimpanan data) dan
presentation logic (antarmuka aplikasi) atau secara sederhana adalah memisahkan antara desain, data dan proses. Adapun komponen komponen MVC antara lain: 1. Model
Model berhubungan dengan data dan interaksi ke database atau webservice. Model juga merepresentasikan struktur data dari aplikasi yang bisa berupa basis data maupun data lain, misalnya dalam bentuk file teks, file XML maupun
webservice. Biasanya di dalam model akan berisi class dan fungsi untuk mengambil, melakukan update dan menghapus data website. Sebuah aplikasi web biasanya menggunakan basis data dalam menyimpan data, maka pada bagian Model biasanya akan berhubungan dengan perintah-perintah query SQL.
2. View
View berhubungan dengan segala sesuatu yang akan ditampilkan ke end-user. Bisa berupa halaman website, css, javascript dan lain-lain. Variabel yang berisi data yang siap ditampilkan terdapat pada bagian view dan harus dihindari adanya logika atau pemrosesan data di view. View dapat dikatakan sebagai halaman website yang dibuat dengan menggunakan HTML dan bantuan CSS atau JavaScript. View hanya dikhususkan untuk menampilkan data-data hasil dari model dan controller serta tidak dapat melakukan koneksi ke basis data.
3. Controller
Controller bertindak sebagai penghubung data dan view. Class-class dan fungsi-fungsi yang terdapat di Controller bertugas memproses permintaan dari View ke dalam struktur data di dalam Model. Controller tidak boleh berisi kode untuk mengakses basis data karena tugas mengakses data telah diserahkan kepada model. Tugas Controller adalah menyediakan berbagai variabel yang akan ditampilkan di view, memanggil model untuk melakukan akses ke basis data, menyediakan penanganan kesalahan atau error, mengerjakan proses logika dari aplikasi serta melakukan validasi atau cek terhadap input [4].
3. Metode Penelitian
Gambar 1 menjelaskan tahapan-tahapan yang dilakukan dalam membangun website sekolah, yaitu :
sebagai guru Teknologi Informasi dan Komunikasi. Data yang didapatkan pada penelitian ini yaitu berupa konten atau menu yang akan ditampilkan pada website sekolah.
2. Tahap kedua adalah melakukan perancangan sistem yang dibangun dan disesuaikan dengan analisis kebutuhan. Perancangan sistem yang digunakan dalam tahapan ini adalah UML (Unified Modelling Language) yang terdiri dari
usecase diagram, sequence diagram, activity diagram dan class diagram. Tahapan perancangan yang lain yaitu perancangan user interface aplikasi web. 3. Tahap ketiga adalah pembuatan aplikasi. Pada tahap ini dilakukan pembuatan
aplikasi sesuai dengan perancangan sistem.
4. Tahap keempat yaitu implementasi dan pengujian aplikasi. Pada tahap ini dilakukan implementasi aplikasi yang telah dibangun, kemudian dilakukan pengujian untuk mengetahui apakah aplikasi telah sesuai dengan perancangan yang dilakukan dan apakah sudah tidak ditemukan kesalahan pada aplikasi yang sudah dibuat.
5. Tahap kelima adalah penulisan laporan hasil penelitian. Tahap ini dilakukan dokumentasi proses dari tahap awal sampai tahap akhir dalam bentuk tulisan.
Gambar 1 Tahapan Penelitian
Aplikasi website sekolah dirancang menggunakan UML (Unified Modelling Language), meliputi usecase diagram, sequence diagram, activity diagram dan
class diagram. UML adalah suatu bahasa yang digunakan untuk menentukan, memvisualisasikan, membangun, dan mendokumentasikan suatu sistem informasi. UML dikembangkan sebagai suatu alat untuk analisis dan desain berorientasi objek oleh Grady Booch, Jim Rumbaugh, dan Ivar Jacobson [5]. Sebuah usecase
merepresentasikan sebuah interaksi antara aktor dan sistem.
Perancangan sistem
Pembuatan aplikasi
Implementasi dan Pengujian Aplikasi
Penulisan Laporan Hasil Penelitian
Gambar 2 Usecase Diagram
Gambar 3 Activity Diagram Penerimaan Siswa Baru
Activity diagram merupakan model alur kerja sebuah proses bisnis dan urutan aktivitas dalam suatu proses. Activity diagram dapat memodelkan sebuah alur kerja dari satu aktifitas ke aktifitas lainnya atau dari satu aktifitas ke keadaan sesaat [6]. Gambar 3 merupakan activity diagram penerimaan siswa baru. Proses penerimaan siswa baru yaitu siswa mendaftar, melengkapi persyaratan ujian, mengikuti ujian seleksi dan melihat pengumuman. Nama siswa yang mendaftar ujian akan tertera pada pengumuman, apabila siswa dinyatakan lulus maka siswa diterima di sekolah.
Gambar 4 Sequence Diagram Tambah Pengumuman
Sequence diagram merupakan interaksi antar objek di dalam dan di sekitar sistem berupa message yang digambarkan terhadap waktu. Sequence diagram dapat digunakan untuk menggambarkan skenario atau rangkaian langkah-langkah yang dilakukan sebagai respons dari sebuah event untuk menghasilkan output
tertentu [6]. Gambar 4 menunjukkan sequence diagram saat admin melakukan aktifitas tambah pengumuman. Data pengumuman yang telah di input admin pada
user interface input data pengumuman akan dikelola oleh Controller. Data pengumuman entity berperan sebagai Model yang akan menghubungkan
Controller dengan database. Model akan menerima input data pengumuman dari
Controller dan akan melakukan proses simpan ke database. Data pengumuman yang telah tersimpan di database menunjukkan bahwa aktifitas pada bagian model telah selesai. Controller akan meneruskan tampilan ke user interface data pengumuman.
Class diagram menggambarkan struktur statis dari kelas dalam sistem dan menggambarkan atribut, operasi dan hubungan antara kelas. Class diagram membantu dalam memvisualisasikan struktur kelas-kelas dari suatu sistem. Class
arsitektur sistem yang dibuat [7]. Aplikasi yang dibuat memiliki class diagram seperti yang terlihat pada Gambar 5.
Gambar 5 Class Diagram Website Sekolah
Gambar 5 merupakan class diagram website sekolah yang menggambarkan sistem saat mengelola data guru, pengumuman dan upload file. Terdapat 3
Controller yang mengontrol proses pengelola data yaitu Controller guru,
Controller pengumuman dan Controller upload file. Class diagram pada gambar 6 juga memiliki 3 user interface yaitu user interface guru, user interface
pengumuman dan user interface upload file dan terdapat 3 entity yaitu entity guru,
entity pengumuman dan entityuploadfile.
Gambar 6 merupakan gambar design interface halaman utama. Halaman utama ini merupakan tampilan pertama pada saat user membuka website sekolah.
User dapat melihat logo sekolah, nama sekolah, slideshow, foto kepala sekolah, pengumuman serta user dapat memilih menu yang terdapat di navigasi bar. Menu
Gambar 7 Desain Arsitektur Diagram Website Sekolah
Gambar 7 merupakan desain arsitektur diagram website sekolah. Controller
bertugas sebagai perantara antara model dan view untuk menanggapi request dari
user. Model menggambarkan struktur dari database, yang bertujuan untuk memberikan data sesuai dengan request dari controller. View menggambarkan suatu informasi berupa tampilan kepada user, view akan menampilkan informasi yang telah di request oleh user kepada Controller dan model.
4. Hasil dan Pembahasan
Aplikasi web yang dibangun akan digunakan sekolah sebagai media promosi dan penyampaian informasi kepada masyarakat luas tentang SMP Pangudi Luhur Salatiga. Pembahasan ini akan dijelaskan mengenai tampilan UI (user interface) website sekolah serta fungsi Codeigniter yang dijalankan pada controller dan model.
Gambar 8 Tampilan Home
Kode Program 1 Fungsi Controller View Home
Kode program 1 merupakan controller untuk menampilkan slideshow, album terbaru, kepala sekolah, dan pengumuman pada halaman home website.
Controller ini akan mengatur bagaimana tampilan home akan diakses. Menggunakan Codeigniter, proses permintaan data yang akan ditampilkan di halaman home ditunjukkan seperti pada kode baris 3-6. Pengumuman merupakan salah satu konten yang akan ditampilkan di halaman home. Proses permintaan data pengumuman dijalankan pada kode baris 6 dimana data ditampung pada sebuah array bernama $data. $data akan melakukan request data pengumuman ke model yang bernama model_pengumuman. Model akan menanggapi sesuai dengan request controller dan proses akan kembali ke controller. Proses permintaan data pengumuman telah selesai maka akan dilanjutkan kode baris 7. Kode baris 7 merupakan proses pada codeigniter untuk menampilkan halaman home.
Kode Program 2 Fungsi Model View Pengumuman
Fungsi model view pengumuman untuk request data dari database. Kode baris 3 merupakan query SQL untuk mengambil data pada database. Query ini akan mengambil data dari tabel tbl_pengumuman dan data akan diurutkan secara
descending berdasarkan id_pengumuman.
Gambar 9 merupakan tampilan tambah pengumuman. Tampilan ini dapat diakses oleh aktor admin dan guru. Tombol pengumuman di sisi kiri halaman berfungsi untuk menampilkan form tambah pengumuman. Proses tambah pengumuman dilakukan dengan mengisi judul dan isi pengumuman yang telah tersedia pada form tambah pengumuman. Tombol simpan yang terdapat di bawah
3. return $this->db->query("SELECT * FROM tbl_pengumuman ORDER BY id_pengumuman DESC");
Gambar 9 Tampilan Tambah Pengumuman
Kode Program 3 Controller Tambah Pengumuman
Controller merupakan bagian yang menghubungkan antara View dan Model. Proses ini merupakan kelebihan menggunakan Codeigniter. Controller bertugas untuk menanggapi request dari user. Request dari user tidak langsung menuju ke
database tetapi akan diolah terlebih dahulu di Controller. Controller akan memanggil model yang sesuai dengan request dari user. Kode Program 3 merupakan kode Controller untuk menambahkan pengumuman. Controller ini akan menghubungkan input dari form tambah pengumuman ke dalam database. Baris 1 merupakan kode untuk mengambil input dari form tampilan tambah pengumuman dan ditampung di dalam variabel $data dalam bentuk array. Baris 3 merupakan kode untuk menambah pengumuman, proses tambah pengumuman akan memanggil model bernama model_pengumuan dan memiliki nama fungsi insert_pengumuman serta membawa parameter $data yang berasal dari baris kode 2. Kode ini merupakan kode untuk memanggil model yang akan menambah pengumuman. Baris 4 merupakan kode untuk menampilkan info berupa data sukses disimpan apabila pengumuman telah berhasil disimpan. Baris 5 merupakan
1. public function proses_insert(){ 2. $data = array
('judul_pengumuman' => $this->input->post
('Judul'),'penulis' => $this->input->post('Penulis'), 'tanggal'=> $this->input->post('Tanggal'),
'isi' => $this->input->Post('txtEditor'));
3. if($query->num_rows()>=0){$this->model_pengumuman-> insert_pengumuman($data);
4. $this -> session->set_flashdata('info','Data Sukses Di Simpan');}
kode untuk membuka halaman pengumuman, halaman ini akan menampilkan pengumuman yang telah ditambah. Proses ini merupakan response dari Controller
kepada user.
Kode Program 4 Kode Model Tambah Pengumuman
Model merupakan bagian untuk menyimpan data ke database. Model akan menjalankan query SQL sesuai request yang diterima dari Controller. Kode Program 4 merupakan kode model untuk menambah pengumuman. Model ini akan menyimpan pengumuman ke database. Baris 1 merupakan kode yang berisi nama model yaitu insert_pengumuman dan memiliki parameter $data. Baris 2 merupakan kode untuk menambah pengumuman ke dalam database.
5. Simpulan
Website sekolah merupakan sarana informasi yang tepat untuk siswa dan orang tua. Website sekolah menyediakan informasi seputar profil, alamat, dan kegiatan sekolah yang dapat memudahkan setiap orang untuk mencari informasi sekolah tanpa perlu datang ke sekolah. Penerapan Codeigniter dengan pemrograman PHP telah berjalan dengan baik serta memberikan kemudahan dalam pengerjaan website. Codeigniter telah menyediakan library yang dapat digunakan untuk mempercepat pengerjaan website yang dibangun. Menggunakan Codeigniter, kode program dalam membangun website telah tertata dengan rapi, hal ini dapat memudahkan proses pengembangan website apabila terdapat update
yang diinginkan oleh pihak sekolah. Website yang telah dibangun dapat membantu sekolah untuk menjadi media promosi sekolah kepada masyarakat. Materi pembelajaran yang telah dibagikan oleh guru dapat didownload para murid atau orang tua sekolah sehingga memudahkan proses pembelajaran. Profil sekolah seperti visi misi, sejarah, struktur organisasi, ekstakurikuler, data guru dan data siswa telah tersedia pada website sekolah yang beralamat di http://smppangudiluhursalatiga.pe.hu/.
Saran pengembangan yaitu website yang telah dibangun dapat responsive jika dibuka di berbagai perangkat seperti gadget dan tablet, serta dapat ditambahkan fitur pendaftaran siswa baru melalui website sekolah.
6. Daftar Pustaka
[1] Utama, Candra. Desember. CodeIgniter Framework: Rekayasa Web. Teknik Informatika UNPAS., hal. 3-5. 2011.
[2] Suyatno dan Irianto Tj Tri. 2013. Pembuatan Website Profil Sekolah Dasar Negri 03 Karangsari Jatiyoso. Indonesian Jurnal on Networking and Security:Vol 2 No 1.
[3] Wigati, Erni. Perancangan Website Sekolah Menengah Pertama Negri 262 Cakung Jakarta Timur Dengan Menggunakan PHP dan MySQL. [Skripsi]. Teknik Informatika, Universitas Gunadarma Jakarta ; hal 1-38. 2012. [4] Daqiqil Id, Ibnu. Framework Codeigniter. Pekanbaru: Kumpulan Tutorial
Komputer., hal.5-6. 2011.
[5] Setiawan Vindhy Agus. Analisis Dan Perancangan Sistem Informasi Simpan Pinjam Pada LKM Gerembeng Bali. [Skripsi]. Program Studi Teknik Informatika, Sekolah Tinggi Manajemen Informatika Dan Komputer AMIKOM Yogyakarta ; hal.8. 2011.
[6] Luthfi Hisyam Wahid dan Riasti Berliana Kusuma. Journal Speed - Sentra Penelitian Engineering dan Edukasi. Sistem Informasi Perawatan Dan Inventaris Laboratorium Pada SMK Negri 1 Rembang Berbasis Web; Vol 3 No 3. 201.1
