Membuat Aplikasi Computer Based Test dengan PHP, MySQLi dan Bootstrap. Agus Hariyanto CV. LOKOMEDIA

Transkripsi

1 Membuat Aplikasi Computer Based Test dengan PHP, MySQLi dan Bootstrap Agus Hariyanto CV. LOKOMEDIA

2 Membuat Aplikasi Computer Based Test dengan PHP, MySQLi dan Bootstrap Perpustakaan Nasional : Katalog Dalam Terbitan (KDT) Penulis : Agus Hariyanto Membuat Aplikasi Computer Based Test dengan PHP, MySQLi dan Bootstrap - Cet. I. - Yogyakarta : Penerbit Lokomedia, halaman; 14 x 21 cm ISBN : Penerbit Lokomedia, Cetakan Pertama : Maret 2017 Editor : Lukmanul Hakim Cover : Subkhan Anshori Layout : Lukmanul Hakim Diterbitkan pertama kali oleh : CV. LOKOMEDIA Jl. Jambon, Perum. Pesona Alam Hijau 2 Kav. B-4, Kricak Yogyakarta redaksi@bukulokomedia.com website : Copyright Lokomedia, 2017 Hak Cipta dilindungi oleh Undang-Undang Dilarang memperbanyak, mencetak ataupun menerbitkan sebagian maupun seluruh isi buku ini tanpa izin tertulis dari penerbit. ii

3 UCAPAN TERIMAKASIH Semoga Allah SWT akan membalas kamu dengan kebaikan yang banyak dan semoga Allah SWT akan membalas kamu dengan balasan yang terbaik. Banyak pihak yang sudah terlibat dalam penulisan buku ini baik secara langsung maupun tidak langsung. Meski tidak bisa kami sebutkan satu per satu, tetapi kepada semuanya kami mengucapkan terima kasih atas sampainya buku ini di tangan Anda. Ketika buku ini berada di tangan Anda, tentunya buku ini masih jauh dari kata sempurna dan masih dibutuhkan dari kami untuk menambah pengetahuan agar pada edisi-edisi yang akan datang dapat seperti yang pembaca harapkan dan inginkan. Untuk itu, izinkan penulis untuk mengucapkan Syukron wa Jazakallahu khairon kepada: Kedua Orang tua, yaitu Ibunda ku tersayang (Alm. Rusminah) dan juga Ayahanda yang sudah membimbing dan memberikan kesempatan untuk menjadi bagian dari kehidupan. Istriku satu-satunya; Setyawati Dwi Susanti terima kasih white coffenya. Buah dari Hatiku Yang Pertama; Yusuf Achsanul Azzam dan yang kedua Aisha Amira Ramadhani. Dan Terima Kasih juga atas dukungannya untuk : 1. Komunitas Blogger Pacitan. 2. POSDAYA Pacitan, Maju Terus. 3. KAHMI Pacitan, Yakin Usaha Sampai. 4. KNPI Kabupaten Pacitan, Yang Muda Yang Berkarya. 5. Dan Semua Pihak Yang tidak bisa saya sebutkan satu per satu. iii

4 Halaman ini Sengaja Dikosongkan iv

5 KATA PENGANTAR Buku ini adalah buku kedua setelah buku saya yang pertama berjudul Membuat Web Profil Sekolah + PPDB Online yang diterbitkan oleh bukulokomedia. Berdasarkan evaluasi penulisan buku yang terdahulu, metode penulisan buku kedua ini disusun lebih detail dimana banyak masukan yang masuk ke maupun blog penulis. Menanggapi masukan dari pembaca maka penulisan buku kedua ini kami bahas dari dasar-dasar PHP, dasar dasar My SQLi sampai pada pembahasan penggunaan Excell Parser dan Bootstrap. Dalam penulisan buku kedua ini, penulis berusaha membahasnya lebih detail dari level novice to expert sehingga semua pembaca baik dari kalangan Programmer maupun non programmer atau bahkan yang belum pernah belajar Coding pun mampu membuat aplikasi Computer Based Test ini. Selain itu juga bagi pembaca yang tidak ingin susah payah membuat aplikasi CBT, kami juga sudah menyiapkan CD source Code Aplikasi yang siap pakai. Sehingga bagi kalangan proffesional bisa memanfaatkan aplikasi yang tersedia dalam bentuk CD dalam Buku ini. Bagi para pengguna aplikasi juga akan kami bahas bagaimana cara menggunakan aplikasi Computer Based Test ini. Kami sediakan berbagai macam variasi model Computer Based Test yang ada. Aplikasi ini sangat variatif dan bisa digunakan oleh Guru, Guru Privat, Lembaga Swasta, Instansi pemerintah dan profesi profesi lain yang melaksanakan sistem Ujian / Test dalam melakukan sebuah evaluasi. Selain itu, bagi para pembaca yang mengalami kendala, bisa mengirimkan masalah yang dihadapi ke penulis yang kemudian akan kami bantu dengan memberikan Technical Assistant kepada pembaca melalui saluran berbagi saluran media yaitu : agus_pacitan@yahoo.co.id Website : Blog : WA : Akhir kata, penulis berharap agar buku ini bermanfaat untuk perkembangan dunia teknologi pendidikan khususnya dan ilmu pengetahuan pada umumnya. v

6 Penulis berharap dari buku ini membawa banyak manfaat bagi para pembaca dan bisa berbagi ilmu dengan sesama untuk mewujudkan cita cita masyarakat adil makmur yang diridhloi Allah SWT. Pacitan, 17 Agustus Agus Hariyanto vi

7 DAFTAR ISI BAB 1. Gambaran Umum Computer Based Test (CBT) Apa itu Computer Based Test (CBT)? Independent Offline Computer Based Test Offline Computer Based Test Online Computer Based Test Bagaimana Computer Based Test Diterapkan? Bagaimana Membangun Aplikasi CBT?...8 BAB 2. Mengenal PHP Lebih Dekat Apa itu PHP? Mengapa Menggunakan PHP? Software Apa Saja yang Digunakan dalam PHP? Instalasi Server Lokal dan Database MySQLi Bagaimana Cara Menginstal dan Menjalankan XAMPP? Menguji Instalasi XAMPP Membuat Aplikasi Pertama Menggunakan PHP Mengenal htdocs Sebagai Folder Home Server Lokal Membuat dan Menjalankan File PHP Aturan Dasar Penulisan Kode PHP...29 BAB 3. Fondasi Dasar Pemrograman PHP Variabel Aturan Penulisan Variabel Memberi Nilai pada Variabel...38 vii

8 Tipe Data pada Variabel Metode Passing (Meneruskan Data) pada Variabel Struktur Logika Kondisi Struktur Kondisi If Struktur Kondisi If - Else Struktur Kondisi If - Elseif - Else Struktur Logika Switch Perbedaan Struktur Logika If dan Switch Struktur Logika Perulangan (Looping) Struktur Perulangan for Struktur Perulangan foreach Struktur Perulangan while...58 BAB 4. Pengolahan Database MySQLi dengan phpmyadmin Sekilas Tentang Database dan Database MySQL Migrasi MySQL ke MySQLi Membuat Database dan Tabel di MySQL Distribusi Data MySQL dengan phpmyadmin Export Database Import Data ke Database...76 BAB 5. Teknik Dasar Pembuatan Aplikasi Computer Based Test Menghubungkan PHP dengan Database MySQL Proses Input Data ke Database MySQL Menampilkan Data dari Database MySQL Mengubah dan Menyimpan Hasil Perubahan Data Menghapus Data dengan PHP...97 viii

9 5.6. Penerapan CRUD (Membuat Aplikasi Mini Test) Mengenal.htaccess dan Fungsinya Membuat Modul Pendukung Aplikasi Mini Test Membuat Modul Tampil Jawaban Membuat Modul Halaman dan Modul Selesai Test Modul Aksi Simpan Data dan Pengalihan Halaman BAB 6. Mengembangkan Modul -Modul Aplikasi CBT Menambahkan Hak Akses User dengan Login Membuat Menu & Modul untuk Level Administrator Modul Menu Utama Modul Sub Menu Modul Kategori Test Modul User Administrator Membuat Modul untuk Level Penguji / Guru Modul User Penguji Modul Pertanyaan Modul Hasil Test Membuat Modul untuk Level Peserta Tes Modul User Peserta Tes Modul Daftar Test Modul Test Modul Import Data dari Excel ke MySQL Menambahkan Text Editor pada Form Pertanyaan BAB 7. Responsive Web Design dengan Bootstrap Download dan Mengenal Struktur File Bootstrap ix

10 7.2. Template Dasar dan Menu Navigasi HTML Layout Dasar dan Grid Beberapa Fitur Unggulan Bootstrap Form Responsive Button dan Icon Menangani Tabel Tipografi Tab BAB 8. Integrasi Aplikasi CBT dengan Bootstrap Export HTML Bootstrap Menjadi PHP Bootstrap Export Sub HTML Menjadi Sub PHP Export Form HTML Menjadi Form PHP Bootstrap Memanggil Modul Sub PHP dari Halaman Utama Membuat Menu Navigasi pada PHP Bootstrap BAB 9. Cara Menggunakan Aplikasi CBT Instalasi Aplikasi CBT Menjalankan Aplikasi Computer Based Test Login Sebagai Administrator Login Sebagai Penguji Menambah, Mengubah dan Menghapus Soal Melihat Jawaban Hasil Test/Ujian Peserta Login Sebagai Peserta Tes Memilih Kategori Test Menjawab Soal-Soal Test Me-review Jawaban Test x

11 BAB I Gambaran Umum Computer Based Test (CBT)

12 BAB 1 Gambaran Umum Computer Based Test (CBT) 1.1 Apa itu Computer Based Test (CBT) Tes Berbasis Komputer (Computer Based Test, CBT) merupakan tes yang diselenggarakan dengan menggunakan komputer sebagai media utama dalam melakukan kegiatan tes/ujian. Karakteristik dari tes ini sama dengan tes konvensional, yaitu menggunakan satu perangakat tes untuk beberapa peserta dengan panjang tes yang sama (fixed test length). Perbedaan Computer Based Test dan Convensional Test terletak pada teknik penyampaian (delivery) butir soal yang tidak lagi menggunakan kertas (paperless), baik untuk naskah soal maupun lembar jawaban. Sistem skoring atau koreksi langsung dilakukan oleh komputer. Computer Based Test (CBT) merupakan inovasi baru di era digital teknologi. Dengan teknologi pendidikan yang efektif, CBT mampu menyajikan sistem evaluasi/ujian jarak jauh yang dikelola oleh server lokal maupun di-integrasikan dengan server online. Server Lokal yang diletakkan pada suatu Lab akan menangani sejumlah perangkat komputer Client yang akan digunakan oleh siswa untuk menjawab pertanyaan secara Offline dalam jaringan maupun online. Secara umum, pelaksanaan CBT dilakukan dalam waktu bersamaan. Sehingga dibutuhkan software dan hardware yang mendukung, istilah dalam teknologi informasi yaitu client-server, dimana komputer peserta tes (client) terhubung dengan sistem tes berbasis komputer melalui komputer server. Dalam hal ini, jumlah PC client sejumlah peserta Test dalam satu kali gelombang Test. Untuk lebih jelasnya, dalam pelaksanaan ujian / CBT dapat dikategorikan menjadi 3 model Tes Berbasis Komputer, yaitu: Independent Offline Computer Based Test Kegiatan ujian atau test yang dilaksanakan secara offline / tanpa jaringan internet. Akan tetapi Tes dilaksanakan menggunakan Komputer yang sudah di install 2 Membuat Aplikasi Computer Based Test (CBT)

13 aplikasi CBT sebagai media untuk melakukan aktivitas menjawab pertanyaan. Model seperti ini biasanya digunakan untuk latihan mengerjakan soal oleh guru yang diberikan kepada siswanya. Model test independent ini dalam melakukan aktivitas pendistribusian data (pertanyaan dan jawaban) bisa menggunakan media penyimpanan eksternal seperti Flash disc atau sebagai alatnya. Dikarenakan proses pendistribusian data tidak melewati server, maka yang diperlukan dalam melakukan model test ini adalah sebuah Aplikasi CBT yang memiliki kemampuan Export dan Import Data (pembuatan aplikasi dengan kemampuan ini dibahas pada Bab 5 dalam buku ini). Untuk lebih jelasnya terkait dengan Independent Offline Computer Based Test ini, silahkan lihat pada gambar 1.1. Gambar 1.1 Alur Offline Independent CBT Offline Computer Based Test Kegiatan ujian atau test yang dilaksanakan secara offline atau tanpa jaringan internet, tetapi terkontrol dalam satu jaringan server lokal. Yang membedakannya dengan Independent Offline Computer Based Test adalah pada pendistribusian Bab I. Gambaran Umum Computer Based Test (CBT) 3

14 data (pertanyaan dan jawaban) antara peserta tes dan penguji. Penguji dapat secara langsung membuat aplikasi tes berupa pertanyaan melaui komputernya dan kemudian juga bisa melihat hasil tes yang dilakukan oleh peserta tes. Begitu juga peserta tes dapat secara langsung mengakses pertanyaan yang disediakan oleh penguji kemudian mengerjakannya. Hasilnya bisa dilihat langsung oleh penguji tanpa harus export data dari komputer peserta tes. Untuk lebih jelasnya terkait dengan Offline Computer Based Test ini, silahkan lihat pada gambar 1.2. Gambar 1.2 Offline Computer Based Test Dari gambar 1.2 dapat kita lihat bahwa semua komputer terhubung dalam satu jaringan server lokal. Di Server lokal inilah pusat data disimpan dan diolah oleh aplikasi CBT yang ada pada masing-masing client komputer, baik itu komputer peserta tes maupun komputer penguji. Untuk membedakan apakah yang mengakses data itu adalah penguji atau peserta tes terletak pada saat login ke dalam aplikasi. Antara penguji dan peserta dibedakan dengan hak akses user oleh Aplikasi Offline Computer Based Test. Untuk pembahasan dari pemisahan hak akses user ini dapat dilihat pada pembahasan Bab 4. 4 Membuat Aplikasi Computer Based Test (CBT)

15 1.1.3 Online Computer Based Test. Perbedaannya dari Offline Computer Based Test terletak pada metode pengolahan datanya. Jika offline diolah di server lokal, sedangkan jika Online Computer Based Test diolah secara online. Untuk lebih jelasnya, silahkan lihat gambar 1.3. Gambar 1.3 Online Computer Based Test Sama halnya dengan Offline Computer Based Test. Aplikasi dan pusat Data tidak ter-install pada setiap device user peserta maupun penguji, tetapi pusat dan pengolahan data terletak di servernya. Jika offline dikelola di server lokal, sedangkan jika online terletak pada server online yang ter-koneksi melalui jaringan internet. Dengan keunggulan koneksi internet, maka Online Computer Based Test ini dapat dilakukan dengan berbagai macam device seperti Komputer, Laptop, Smartphone dan berbagai jenis gadget yang ada. Untuk lebih jelasnya dan bagaimana cara membangun aplikasi Online Computer Based Test ini akan dibahas pada Bab 7. Bab I. Gambaran Umum Computer Based Test (CBT) 5

16 1.2 Bagaimana Computer Based Test diterapkan Sebelum kita tahu lebih jauh terkait bagaimana membangun aplikasi CBT, ada baiknya kita tahu logika dan alur pelaksanaan Ujian / Tes yang dilakukan secara konvensional. Kenapa begitu...? Ya, karena aplikasi yang dibangun nanti harus mampu menterjemahkan kondisi nyata pelaksanaan test yang sesungguhnya di lapangan, sehingga aplikasi yang dibangun dapat berfungsi dengan baik. Sekarang perhatikan diagram test yang dilaksanakan secara konvensional dengan menggunakan kertas sebagai medianya. Lihat gambar 1.4. Gambar 1.4 Paper Based Test / Test Konvensional Gambar 1.4 menunjukkan konsep dasar bagaimana sebuah test dilaksanakan. Dari konsep dasar inilah kemudian Aplikasi CBT dibangun dengan konsep utama mengganti peran kertas sebagai lembar soal dan lembar jawaban di ubah menjadi berbasis komputer atau tidak menggunakan kertas (Paperless Test). Ok guys.. Intinya aplikasi yang akan dibuat nanti mampu mengubah kejadian nyata saat test konvensional itu ke dalam script-script PHP untuk membentuk sebuah sistem Aplikasi CBT. Dengan demikian dapat disimpulkan bahwa konsep dasar dari Computer Based Test meliputi : 6 Membuat Aplikasi Computer Based Test (CBT)

17 1. Membuat User dengan Hak Akses Penguji yang memiliki hak untuk Membuat Soal dan bisa melihat hasil berupa jawaban dari masing-masing peserta tes. 2. Membuat user dengan Hak Akses Peserta Test yang memiliki batasan hanya bisa menjawab pertanyaan dari soal yang telah disediakan oleh User dengan Hak Akses Penguji. 3. Dikarenakan Penguji peserta tidak hanya satu dalam pelaksanaan Sebuah Ujian dalam Instansi atau Lembaga, maka diperlukan Administrator sebagai User yang memiliki Hak Akses untuk Mengatur Kedua User tersebut, yaitu Penguji dan Peserta. Untuk menjelaskan konsep dari Aplikasi CBT, silahkan lihat gambar 1.5. Gambar 1.5 Alur Pelaksanaan Computer Based Test Dari Gambar 1.5 dapat kita lihat jika Penguji, Peserta Tes dan Administrator Mengakses Sistem CBT yang kemudian dipisahkan Hak Akses-nya oleh sistem, sehingga dapat dikenali apakah User mempunyai hak akses sebagai Penguji, Peserta Test ataukah sebagai Administrator. Untuk lebih jelasnya bagiamana mengatur pembagian hak akses user ini akan dibahas pada Bab 6. Bab I. Gambaran Umum Computer Based Test (CBT) 7

18 1.3 Bagaimana Membangun Aplikasi CBT Jika pada pembahasan sebelumnya para pembaca sudah memahami konsep dari CBT, sekarang kita lanjutkan pada pembahasan bagaimana konsep tersebut kemudian diterjemahkan menjadi sebuah Aplikasi? Apa saja yang diperlukan untuk membangun CBT? Untuk membangun CBT, ada beberapa software yang perlu dipersiapkan terlebih dahulu. Beberapa software ini bisa memakai yang berbayar maupun menggunakan open source. Silahkan disesuaikan dengan aplikasi yang sudah ada di komputer Anda, kita bisa menggunakan software apa saja yang penting memiliki fungsi dan karakteristik yang sama. Beberapa software yang perlu dipersiapkan diantaranya adalah: 1. Server Lokal 2. Database MySQL 3. Text Editor (bisa menggunakan Notepad++ atau Dreamweaver). Pada dasarnya, komponen utama yang digunakan untuk membangun Aplikasi CBT ini adalah PHP sebagai bahasa pemrograman dan MySQL sebagai media penyimpanan datanya. Sedangkan untuk menjalankannya diperlukan sebuah layanan server lokal (localhost) yang terintegrasi di Apache. Intinya minimal dibutuhkan dua buah open source, yaitu XAMPP (paket open source yang berisi Apache, PHP, MySQL) dan PHP Editor untuk membangun Aplikasi CBT ini. Dengan Apache dan PHP Editor saja, sebenarnya sudah bisa membangun Aplikasi CBT, hanya saja kemudian dibutuhkan CSS, HTML, Bootstrap untuk mempercantik tampilan serta AJAX, jquery, Javascript dan plugin-plugin lainnya untuk memperkuat fitur-fitur dari sebuah aplikasi. Oleh karena itu, penulis mencoba untuk membahas Aplikasi CBT ini di mulai dari PHP murni sampai pada penggunaan Plugin tambahan agar nantinya pembaca bisa mengikuti dan mengembangkan sendiri tahap demi tahap proses developing aplikasi CBT ini. Dengan ketiga aplikasi tersebut, aplikasi minimal yang harus sudah ada di komputer Anda. Untuk No 1 dan 2 yaitu server local (localhost) dan database MySQL Sudah tersedia dalam satu paket yaitu aplikasi XAMPP yang bisa Anda temukan dalam CD Software buku ini. Untuk text editor-nya, kita bisa menggunakan Notepad yang merupakan aplikasi bawaan Windows atau bisa menggunakan Text Editor yang berbayar seperti Adobe Dreamweaver. Silahkan menggunakan aplikasi apa saja yang Anda 8 Membuat Aplikasi Computer Based Test (CBT)

19 senangi saat melakukan programming, yang terpenting dari aplikasi text editor ini adalah bisa untuk membuat dan mengubah code-code yang akan dijalankan. Catatan: Dalam buku ini, untuk databasenya sudah tidak lagi menggunakan MySQL tetapi Menggunakan MySQLi (i kependekan dari improved) hal ini dikarenakan apabila suatu waktu server Anda meng-upgrade versi terbaru (php 5.5), API tersebut telah deprecated (tidak didukung lagi). Sebagai penggantinya, kita harus menggunakan API dari MySQLi yang disediakan untuk mengakses fungsionalitas MySQL 4.1 ke atas. Bagi Pembaca yang sudah terbiasa dengan MySQL nanti akan dibahas bagaimana menjalankan MySQL improved ini. Jika kita sudah menyiapkan software yang dibutuhkan untuk membangun CBT, selanjutnya adalah kemampuan apa saja yang harus dimiliki untuk membangun CBT ini, diantaranya adalah: 1. Instalasi Server Lokal 2. Pengolahan data melalui phpmyadmin 3. Membuat Koneksi ke Database MySQLi 4. Pengolahan Database MySQLi dengan PHP Ke-empat kemampuan diatas merupakan kemampuan minimal yang harus dimiliki untuk membuat aplikasi CBT ini. Untuk itu, penulis menyarankan bagi Anda yang masih awam dengan PHP dan database MySQLi agar lebih fokus dahulu dengan Bab 1,2 dan 3 terkait pembahasan mengenai PHP, Database MySQL. Jika sudah memahami kedua hal tersebut, silahkan lompati saja langsung ke Bab 4. Catatan: Evaluasi dari penulisan buku sebelumnya Membuat Web Profil Sekolah + PPDB Online, dimana banyak pembaca bukan hanya dari kalangan programmer atau yang sedang belajar pemrogaman PHP, melainkan pembaca dengan latar belakang Non Bidang Informasi Teknologi atau bahkan sama sekali belum mengenal apa itu pemrograman PHP. Karena tujuan penulisan buku ini adalah membangun Aplikasi Computer Based Bab I. Gambaran Umum Computer Based Test (CBT) 9

20 Test, dimana pembaca diharapkan bisa membangun sendiri aplikasi tersebut, maka penulis akan membahasnya lebih detail mulai dari dasar-dasar pemrograman PHP. Meskipun sudah banyak buku terbitan Lokomedia yang mengulas tentang hal ini, tetapi ternyata masih banyak pembaca setia buku-buku berkualitas dari Lokomedia yang tidak mengikuti dari awal. Menjadi sebuah konsekuensi tentunya untuk memenuhi tuntutan beberapa hal diatas, hal ini dimungkinkan jika pembahasan akan terasa membosankan bagi pembaca Lokomedia yang sudah lama mengikuti dari awal. Apalagi dari kalangan yang memang fokus pada pemrograman PHP. Akan tetapi resiko harus penulis ambil, karena penulis juga berharap semua yang tertarik dengan pemrogaman PHP dapat menguasai bahasa pemrograman PHP meski bukan dari Bidang Teknologi Informasi Teknologi (seperti halnya penulis, bukan dengan basic pendidikan IT melainkan dari Pendidikan Bahasa Inggris). Jika sudah memahami metode pengembangan aplikasi CBT ini, kemudian kita langsung aja bahas satu per satu. Apa saja yang perlu dipersiapkan dan bagaimana langkah-langkah membuat Aplikasi CBT. 10 Membuat Aplikasi Computer Based Test (CBT)