Membangun Aplikasi dengan PHP, Codeigniter, dan Ajax fileUndang-Undang Nomor 28 Tahun 2014 ... 1.3 Instalasi Text Editor dan Setting Package ... Tahapan ujian dilakukan mulai dari

Membangun Aplikasi

dengan PHP, Codeigniter, dan Ajax

Sanksi Pelanggaran Pasal 113 Undang-Undang Nomor 28 Tahun 2014 tentang Hak Cipta

1. Setiap Orang yang dengan tanpa hak melakukan pelanggaran hak ekonomi sebagaimana dimaksud dalam Pasal 9 ayat (1) huruf i untuk Penggunaan Secara Komersial dipidana dengan pidana penjara paling lama 1 (satu) tahun dan/atau pidana denda paling banyak Rp100.000.000 (seratus juta rupiah).

2. Setiap Orang yang dengan tanpa hak dan/atau tanpa izin Pencipta atau pemegang Hak Cipta melakukan pelanggaran hak ekonomi Pencipta sebagaimana dimaksud dalam Pasal 9 ayat (1) huruf c, huruf d, huruf f, dan/atau huruf h untuk Penggunaan Secara Komersial dipidana dengan pidana penjara paling lama 3 (tiga) tahun dan/atau pidana denda paling banyak Rp500.000.000,00 (lima ratus juta rupiah).

3. Setiap Orang yang dengan tanpa hak dan/atau tanpa izin Pencipta atau pemegang Hak Cipta melakukan pelanggaran hak ekonomi Pencipta sebagaimana dimaksud dalam Pasal 9 ayat (1) huruf a, huruf b, huruf e, dan/atau huruf g untuk Penggunaan Secara Komersial dipidana dengan pidana penjara paling lama 4 (empat) tahun dan/atau pidana denda paling banyak Rp1.000.000.000,00 (satu miliar rupiah).

4. Setiap Orang yang memenuhi unsur sebagaimana dimaksud pada ayat (3) yang dilakukan dalam bentuk pembajakan, dipidana dengan pidana penjara paling lama 10 (sepuluh) tahun dan/atau pidana denda paling banyak Rp4.000.000.000,00 (empat miliar rupiah).

Membangun Aplikasi

dengan PHP, Codeigniter, dan Ajax

Sandi Febriyatna Ramadhan dan

Uus Rusmawan

PENERBIT PT ELEX MEDIA KOMPUTINDO

Membangun Aplikasi dengan PHP, Codeigniter, dan Ajax Sandi Febriyatna Ramadhan dan Uus Rusmawan 2018 PT Elex Media Komputindo, Jakarta Hak cipta dilindungi undang-undang Diterbitkan pertama kali oleh Penerbit PT Elex Media Komputindo Kelompok Gramedia, Anggota IKAPI, Jakarta 2018

[email protected]

718051736

ISBN 978-602-04-8600-0

Dilarang keras menerjemahkan, memfotokopi, atau memperbanyak sebagian atau seluruh isi buku ini tanpa izin tertulis dari penerbit.

Isi di luar tanggung jawab percetakan

Dicetak oleh Percetakan PT Gramedia, Jakarta

vii

Daftar Isi

Prakata ......................................................................................................... v

Daftar Isi .................................................................................................... vii

Bab 1. Persiapan Aplikasi ..................................................................... 1

1.1 Pemahaman Konsep Ujian Online ...................................... 1

1.2 Instalasi Web Server ............................................................. 2

1.3 Instalasi Text Editor dan Setting Package ........................... 4

1.4 Kebutuhan Library ............................................................... 8

1.5 Pengertian Metode MVC pada Codeigniter ..................... 10

1.6 Design Database ................................................................. 12

Bab 2. Aplikasi Panel Admin (Backend) ........................................... 19

2.1 Templating Aplikasi ........................................................... 19

2.2 Login dan Logout ............................................................... 31

2.3 Membuat Dashboard Aplikasi ........................................... 40

2.4 Membuat Form Admin...................................................... 44

2.5 Membuat Form Siswa ........................................................ 54

2.6 Membuat Form Mata Pelajaran ........................................ 71

2.7 Membuat Form Kelas ........................................................ 77

2.8 Membuat Form Pembuatan Ujian .................................... 84

Bab 3. Aplikasi Ujian (Frontend) ..................................................... 111

3.1 Templating Aplikasi ......................................................... 111

3.2 Login dan Logout ............................................................. 121

3.3 Proses Ujian dengan Ajax ................................................ 126

3.4 Membuat Perhitungan Mundur ...................................... 143

1

Bab 1

Persiapan Aplikasi

1.1 Pemahaman Konsep Ujian Online

Ujian online pada dasarnya sama seperti ujian konvensional yang sudah

diterapkan di dunia pendidikan, seperti sekolah atau lembaga kursus.

Tahapan ujian dilakukan mulai dari guru membuat soal, lalu membuat

jawaban, serta kunci jawabannya, setelah itu guru membagikan soal

tersebut kepada siswa sesuai dengan jadwal ujian dan kelas yang telah di

tentukan sebelumnya. Namun, yang membedakan antara ujian

konvensional dan ujian online adalah media yang digunakan dan aturan-

aturan pelaksanaan ujian. Media-media yang digunakan untuk

menerapkan ujian online, contohnya seperti komputer, internet/intranet,

dan aplikasi pendukung lainnya. Selain itu, aturan-aturan untuk

menerapkan ujian online adalah setiap komputer client harus terhubung

ke server, aplikasi pendukung ujian harus terinstal di semua komputer

client, dan masih banyak lagi aturan lain yang harus sesuai dengan

prosedur yang diterapkan. Intinya, setiap aplikasi ujian online memiliki

prosedur yang berbeda-beda.

2

Beberapa keunggulan penerapan konsep ujian online adalah sebagai berikut:

Mengurangi tingkat kecurangan ketika ujian berlangsung, seperti

mencontek. Dengan menggunakan ujian berbasis aplikasi, soal

bisa diacak sehingga urutan soal-soal dari masing-masing siswa

tidak sama.

Menghemat waktu guru untuk mengoreksi ujian karena dengan

adanya aplikasi ujian online, pengoreksian soal akan dilakukan

secara otomatis ketika ujian telah selesai dilaksanakan.

Mengurangi penggunaan kertas dan kesalahan penulisan pada

soal, terkadang banyak kesalahan pengetikan pada soal yang baru

diketahui ketika ujian telah berlangsung yang berakibat

pencetakan ulang soal-soal tersebut.

Ujian bisa dilakukan di luar sekolah karena berbasis online,

sehingga dapat diakses dari mana saja selama masih terhubung

dengan internet.

Beberapa kekurangan penerapan konsep ujian online adalah sebagai berikut:

Membutuhkan berbagai macam perangkat pendukung, seperti

komputer, internet/jaringan lokal, server, dan aplikasi ujian.

Jika terjadi listrik padam, ujian tidak dapat dilaksanakan.

1.2 Instalasi Web Server

Untuk melakukan pengujian aplikasi, langkah pertama yang harus

dilakukan adalah instalasi web server. Ada beberapa web server yang

dapat digunakan, antara lain:

• XAMPP Server (www.apachefriends.org)

• WAMP Server (www.wampserver.com)

• AMPPS Server (www.ampps.com)

Dalam buku ini, server yang digunakan adalah XAMPP.

3

Instalasi XAMPP Server

XAMPP Server adalah server yang paling populer di kalangan

programmer, selain fiturnya yang lengkap, XAMPP sangat mudah

digunakan. XAMPP Server versi terbaru sudah mendukung penggunaan

PHP7. Untuk mengunduh aplikasi XAMPP, silakan Anda masuk ke

website resmi XAMPP di (www.apachefriends.org), lalu masuk ke

halaman "download".

Gambar 1.1 Mengunduh XAMPP Server

Setelah proses pengunduhan selesai, Anda dapat menginstal XAMPP

Server langsung di komputer anda. Ketika proses instal berlangsung

Anda disarankan memilih installation folder pada folder C:\xampp,

walaupun sebenarnya Anda bisa memilih folder lain.

Gambar 1.2 Memilih Installation Folder XAMPP

4

Tunggu hingga proses instalasi selesai dan Anda sudah bisa

menggunakan XAMPP Server di komputer Anda.

1.3 Instalasi Text Editor dan Setting Package

Untuk pembuatan aplikasi dengan bahasa pemrograman PHP, pada

dasarnya tidak membutuhkan editor khusus, seperti layaknya bahasa

pemrograman lainnya, bahkan notepad bawaan Microsoft saja sudah bisa

dijadikan sebagai editor pembuatan program PHP. Ada beberapa text

editor yang bisa Anda gunakan, diantaranya:

• Notepad++ (www.notepad-plus-plus.org)

• Sublime Text (www.sublimetext.com)

• IDE PHP Strom (www.jetbrains.com/phpstorm)

Anda bisa menggunakan editor apa saja sesuai selera Anda, karena pada

prinsipnya semua editor sama dan hanya berbeda di fitur serta

kenyamanan penulisan saja. Dalam buku ini, editor yang digunakan

adalah sublime text. Tunggu hingga proses instalasi selesai dan Anda

sudah bisa menggunakan XAMPP Server di komputer Anda.

Instalasi Sublime Text

Silakan masuk ke website resmi sublime text (www.sublimetext.com/3)

dan unduh aplikasinya.

Gambar 1.3 Mengunduh Sublime Text

5

Setelah selesai mengunduh, silakan instal aplikasi sublime text di

komputer Anda.

Setting Package Sublime Text

Package pada editor sublime digunakan untuk memudahkan dalam

penulisan, seperti snippet code untuk Codeigniter, pengambilan warna

dengan Hexadecimals, atau mengubah tema sublime editor, dan masih

banyak package lainnya. Untuk memulai setting package, silakan Anda

scan QR Code atau masuk ke link di bawah ini:

Gambar 1.4 Package Control Sublime Text

Jika sudah masuk ke dalam website package control, silakan copy skrip di

tab "Sublime Text 3" yang ada di website tersebut, lalu buka sublime text

Anda. Kemudian tekan tombol (CTRL + ~) maka akan muncul console

di editor sublime. Setelah muncul console, Anda cukup paste-kan

skripnya di console sublime lalu tekan enter.

6

Gambar 1.5 Script Package Control

Gambar 1.6 Console Sublime Text

Silakan restart sublime text setelah berhasil menginstal package, untuk

menambahkan package-package ke dalam sublime Anda cukup tekan

(CTRL+SHIFT+P) dan ketik "install". Selanjutnya, Anda tinggal memilih

"install package" pada opsi-opsi seperti gambar berikut.

7

Gambar 1.7 Install Package Sublime

Tekan enter, lalu tunggu beberapa saat sampai muncul dialog box

kembali, setelah itu pilih package yang diinginkan.

Gambar 1.8 Memilih Package

Setelah memilih package yang diinginkan, tekan enter dan tunggu

beberapa saat. Indikator instalasinya terdapat di pojok kiri bawah.

Gambar 1.9 Indikator Instalasi Package

Jika kata "Installing Package" sudah hilang maka instalasi package telah

berhasil. Untuk mengetahui list package yang tersedia di sublime text

editor, Anda dapat melihatnya di www. packagecontrol.io/browse.

8

1.4 Kebutuhan Library

Bootstrap CSS

Bootstrap adalah sebuah framework css yang dapat digunakan untuk

mempermudah membangun tampilan web. Bootstrap pertama kali

dikembangkan pada pertengahan 2010 di Twitter oleh Mark

Otto dan Jacob Thornton. Saat ini, Bootstrap dikembangkan secara open

source

jQuery & jQuery UI

dengan lisensi MIT. Untuk mengunduh Bootsrap, Anda bisa

masuk ke situs resminya di tautan www.getbootstrap.com.

JQuery adalah sebuah library dari Javascript di mana jQuery berperan

untuk menyederhanakan syntax Javascript sehingga lebih ringkas dan

mudah dipahami. Banyak fungsi dari jQuery yang sering digunakan

seperti document traversing, event handling, animating, dan AJAX

tentunya. Anda bisa mengunduh jQuery di situs resminya di

www.jquery.com.

AJAX

Asynchronous JavaScript And XMLHTTP, atau disingkat AJaX,

merupakan suatu teknik pemrograman berbasis web untuk

menciptakan aplikasi web yang interaktif. Tujuannya untuk

memindahkan proses pengiriman dan pengambilan data menjadi

di belakang layar (background process).

Penggunaan AJAX terbagi menjadi dua, yaitu dengan method

GET dan method POST. Untuk lebih jelasnya, silakan perhatikan

contoh penggunaan AJAX di gambar-gambar berikut:

9

• GET:

Gambar 1.10 Fungsi AJAX dengan method GET

• POST:

Gambar 1.11 Fungsi AJAX dengan method POST

jQuery UI

Sama seperti jQuery, akan tetapi jQuery UI dikhususkan untuk

tampilan User Interface agar lebih menarik dan mudah digunakan.

Namun karena jQuery UI dikembangkan dari library jQuery, jadi

untuk menggunakan jQuery UI, kita memerlukan library jQuery

untuk bisa memanfaatkan dan memakai berbagai fiturnya.

Beberapa fitur jQuery UI, yaitu sebagai berikut:

• Datepicker

• Sortable Element

• Widget Accordion

• Autocomplete

10

• Menu Navigasi

• Progress Bar

• Sortable

• Dan masih banyak lagi, silakan masuk ke situs resmi untuk

melihat fitur lainnya (www.jqueryui.com)

1.5 Pengertian Metode MVC pada Codeigniter

Secara singkat, MVC atau Model-View-Controller adalah sebuah metode

untuk membuat sebuah aplikasi dengan memisahkan data (Model) dari

tampilan (View) dan cara memproses data (Controller). Metode MVC

kebanyakan diimplementasikan oleh framework dalam aplikasi website.

Model:

Biasanya hanya berisi fungsi untuk pengelolaan basis data, seperti

CRUD atau kegiatan lain yang berhubungan langsung dengan

database.

View:

Untuk menampilkan data ke tampilan website, seperti hasil query

atau hanya sekedar menampilkan template.

Controller:

Merupakan sebuah jembatan antara Model dan View, biasanya

digunakan untuk memproses data setelah query dari Model,

setelah itu diproses oleh Controller di tampilan di View.

191

Tentang Penulis

Sandi Febriyatna Ramadhan saat ini bekerja sebagai CTO di PT

Pixelindo Media Nusantara, Jakarta Selatan. Meraih gelar S1 di

bidang Teknik Informatika (Pascasarjana Bina Insani-Bekasi),

Senior Programmer sekaligus pendiri dua startup bernama

Jetschool (aplikasi management sekolah) dan Klik Kursus

(aplikasi kursus online) yang berbasis di Jakarta. Pernah

menjadi narasumber pada beberapa seminar tentang

pemrograman PHP dan web design, serta menjadi freelancer

sejak kuliah sampai saat ini. Penulis dapat dihubungi melalui

email: [email protected]

Uus Rusmawan saat ini bekerja sebagai dosen pemrograman

VB.Net di Kampus STMIK Bina Insani Bekasi, BBPLK

Depnaker (Bekasi), Lulusan S2 bidang ilmu komputer

(Pascasarjana Nusa Mandiri Jakarta), direktur CV Inspirasi

Software, dan pernah menjadi trainer VB.Net di beberapa

perusahaan, antara lain PT ASKI (Astra Komponen Indonesia,

Cibinong), PT M2 Wisata Bekasi, PT ENKEI Indonesia

Cikarang, dan PT. MIKUNI Indonesia. Selain itu, beliau juga

pernah menjadi narasumber pada beberapa seminar tentang

kiat sukses membuat tugas akhir dan skripsi menggunakan VB 6 dan VB.Net. Beliau

telah menulis 11 buku pemrograman baik VB 6 maupun VB.Net, juga sebagai

founder website www.konsultasivb.com di mana dengan ketekunannya telah

mengunggah lebih dari 270 video tutorial di www.youtube.com. Penulis dapat

dihubungi melalui email: [email protected]

Catatan: Untuk melakukan pemesanan buku, hubungi Layanan Langsung PT Elex Media Komputindo: Gramedia Direct Jl. Palmerah Barat No. 29-37, Jakarta 10270 Telemarketing/CS: 021-53650110/111 ext: 3901/3902/3292/3427