Cover

MODUL
DASAR PEMROGRAMAN WEB

RIDUAN SYAHRI, M.KOM

FERRY PUTRAWANSYAH, M.PD
FEBRIANSYAH, M.KOM
 Kata Penghantar

Segala puji bagi Allah, Tuhan Yang Maha Esa atas rahmat dan karunia-Nya,
sehingga penulis dapat menyelesaikan buku ajar. Tak lupa juga mengucapkan
salawat serta salam semoga senantiasa tercurahkan kepada Nabi Besar
Muhammad SAW, karena berkat beliau, kita mampu keluar dari kegelapan menuju
jalan yang lebih terang.

Kami ucapkan juga rasa terima kasih kami kepada pihak-pihak yang mendukung
lancarnya buku ajar ini mulai dari proses penulisan hingga proses cetak, yaitu
orang tua kami, rekan-rekan kami, penerbit, dan masih banyak lagi yang tidak bisa
kami sebutkan satu per satu.

Adapun, buku ajar kami yang berjudul ‘Dasar Pemrograman Web’ ini telah selesai
kami buat secara semaksimal dan sebaik mungkin agar menjadi manfaat bagi
pembaca yang membutuhkan informasi dan pengetahuan mengenai bagaimana
sistem membangun suatu sistem.

Dalam buku ini, tertulis bagaimana cara membangun website menggunakan

framework codeigniter dan juga bagaimana materi yang disajikan yang relevan
dengan mata kuliah mengenai dasar pemrograman web yang menjadi alternatif
pegangan bagi mahasiswa dan dosen yang menempuh studi tersebut.

Kami sadar, masih banyak luput dan kekeliruan yang tentu saja jauh dari
sempurna tentang buku ini. Oleh sebab itu, kami mohon agar pembaca memberi
kritik dan juga saran terhadap karya buku ajar ini agar kami dapat terus
meningkatkan kualitas buku.

Demikian buku ajar ini kami buat, dengan harapan agar pembaca dapat
memahami informasi dan juga mendapatkan wawasan mengenai bidang sistem
informasi manajemen serta dapat bermanfaat bagi masyarakat dalam arti luas.
Terima kasih.

Pagar Alam, 09 Maret 2023

ii | D a s a r P e m r o g r a m a n W e b
 Daftar Isi

Cover ............................................................................................................................................. i
Kata Penghantar ........................................................................................................................... ii
Daftar Isi ...................................................................................................................................... iii
BAB I PENDAHULUAN .................................................................................................................1
Jenis-Jenis Website ................................................................................................................2
Website Statis ...................................................................................................................2
Website Dinamis ...............................................................................................................2
Website Interaktif ...............................................................................................................3
Bahasa Pemrograman Web ....................................................................................................3
Aplikasi Pemrograman Web ....................................................................................................4
XAMPP .............................................................................................................................4
Visual Studio Code ..........................................................................................................15
Framework CodeIgniter .........................................................................................................23
Apa Itu Framework ..........................................................................................................23
Kegunaan dan Fungsi Framework ...................................................................................23
Perbedaan Framework dan Library .................................................................................25
Jenis-Jenis Framework ....................................................................................................26
BAB II DATABASE .....................................................................................................................32
Apa Itu Database ..................................................................................................................32
Komponen Database ............................................................................................................33
1. Data ............................................................................................................................33
2. Hardware ....................................................................................................................34
3. Sistem Operasi ...........................................................................................................34
4. Database Management System (DBMS) .....................................................................34
5. Database Access Language ........................................................................................35
Fungsi Database ...................................................................................................................35
1. Mempercepat dan Mempermudah Identifikasi Data.....................................................35
2. Mengontrol Data Secara Terpusat...............................................................................35
3. Menghindari Duplikasi Data ........................................................................................35
4. Menyimpan Data dengan Lebih Aman ........................................................................35
5. Menghemat Biaya .......................................................................................................36

iii | D a s a r P e m r o g r a m a n W e b
 6. Dapat Diakses Multi-User............................................................................................36
Jenis-Jenis Database ............................................................................................................36
1. Operational Database ..................................................................................................37
2. Relational Database ....................................................................................................38
3. NoSQL ........................................................................................................................39
4. Distributed Database ...................................................................................................41
5. Database Warehouse ..................................................................................................42
6. End-User Database .....................................................................................................43
7. Cloud Database ...........................................................................................................44
Membangun Database ..........................................................................................................44
1. Mengaktifkan XAMPP .................................................................................................44
2. Akses Localhost ..........................................................................................................45
3. Membuat Database .....................................................................................................46
4. Membuat Table ...........................................................................................................47
5. Insert Table .................................................................................................................48
BAB III CODEIGNITER ...............................................................................................................52
Apa Itu Codeigniter ...............................................................................................................52
Kelebihan CodeIgniter ...........................................................................................................52
1. Mudah Dipelajari .........................................................................................................53
2. Konfigurasi Sederhana ................................................................................................53
3. Ringan .........................................................................................................................53
4. Arsitektur Rapi .............................................................................................................53
5. Mudah Diintegrasikan ..................................................................................................54
6. Migrasi Database Mudah .............................................................................................54
7. Keamanan yang Baik ..................................................................................................54
Cara Kerja Codeigniter ..........................................................................................................54
Struktur Folder Codeigniter ...................................................................................................55
1. Application ...................................................................................................................56
2. System ........................................................................................................................57
3. User_Guide .................................................................................................................58
Struktur URL .........................................................................................................................58
Cara Instal Codeigniter..........................................................................................................58
Langkah 1: Download CodeIgniter ...................................................................................59
Langkah 2: Ekstrak CodeIgniter.......................................................................................59

iv | D a s a r P e m r o g r a m a n W e b
BAB IV Membuat website dengan Codeigniter ............................................................................61
Membuat Custom Tampilan Awal ..........................................................................................61
Menghapus Index..................................................................................................................64
Koneksi ke database .............................................................................................................65
Read .....................................................................................................................................67
Tugas ....................................................................................................................................71
Input ......................................................................................................................................71
Tugas ....................................................................................................................................74
Update ..................................................................................................................................74
Tugas ....................................................................................................................................78
Delete ...................................................................................................................................78
Tugas ....................................................................................................................................80

v|Dasar Pemrograman Web

 Dasar Pemrograman Web

BAB I PENDAHULUAN

Pemrograman web berasal dari istilah pemrograman dan web. Sebelum

memasuki definisi pemrograman web, alangkah baiknya kita memahami
kedua istilah tersebut terlebih dahulu. Pemrograman merupakan proses
pembentukan instruksi atau perintah tertulis untuk sebuah program
komputer; mulai dari proses menulis, menguji, memperbaiki, dan
memelihara instruksi-instruksi tersebut. Program komputer yang
dimaksud di antaranya: Microsoft Word, Microsoft Excel, Paint, dan lain
sebagainya. Sedangkan web merupakan media informasi, atau halaman
yang dapat diakses dengan bantuan jaringan internet menggunakan
perangkat lunak browser. Web ini sendiri mencakup informasi dalam
bentuk tulisan, gambar, grafik, video, audio, bahkan animasi. Maka dapat
disimpulkan bahwa pengertian pemrograman web ialah proses
pembuatan instruksi-instruksi untuk menciptakan program/aplikasi
berbasis internet yang dapat diakses melalui browser. Contoh dari
pemrograman web itu sendiri yakni: gmail, facebook, tumblr, dll. Dapat
dikatakan bahwa pemrograman web berkaitan dengan pembuatan situs,
namun levelnya berada di atas sekedar menyusun kode-kode HTML
sederhana. Pemrograman web mencakup perencanaan, konseptualisasi,
pemodelan pengiriman media elektronik melalui internet. Bahkan
pemrograman web yang baik mencakup pembuatan panel kontrol yang
efektif sehingga pemilik situs web dapat memilki kontrol terhadap situsnya,
terkait konten, aplikasi, dan aspek pendukung lainnya.

Untuk mengenal pemrograman web lebih dalam, kita perlu memahami

jenis-jenis website.

1|Dasar Pemrograman Web

 Gambar 1. 1. Web Statis and dinamis
Jenis-Jenis Website
Berikut ini merupakan jenis-jenis website berdasarkan bentuknya.
Website Statis
Website statis merupakan halaman web yang jarang atau bahkan tidak
diperbaharui oleh pemilik situs dalam kurun waktu tertentu. Dapat
dikatakan, konten yang berada pada website statis akan tetap sama sejak
website tersebut dibuat. Contoh dari web statis seperti: profil perusahaan.
Dalam laman ini tidak ada interaksi antara pengelola web dengan
pengguna web. Oleh karena itu, jika memang dibutuhkan perubahan pada
laman web ini, pengelola website akan menghubungi web designer atau
web programmer.

Website Dinamis
Sedangkan konten pada website dinamis dapat diperbaharui dalam kurun
waktu tertentu. Dalam website dinamis, pengelola atau pemilik website
menyediakan ruang interaksi antara pengelola dan pengguna website,
bisa dalam bentuk kolom komentar, tombol reaksi, dan tombol share.
Sehingga, laman pada website dapat diperbaharui baik oleh pemilik
website maupun oleh pengguna website. Contoh platform website dinamis

2|Dasar Pemrograman Web

ini diantaranya, Blogger, Tumblr, dan website-website berita. Meskipun
platform tersebut sebenarnya juga bisa digunakan untuk membuat
website statis.

Website Interaktif
Website interaktif juga merupakan website yang lamannya dapat
diperbaharui, baik oleh pengelola website atau oleh pengguna website.
Hal yang membedakannya dengan website dinamis ialah intensitas
pembaharuan laman, yang mana website interaktif sangat sering
mengalami pembaharuan. Hal ini juga diakibatkan oleh tingginya
intensitas penggunaan website, sehingga interaksi yang terjadi dalam
website semakin tinggi. Contoh website interaktif diantaranya: Facebook,
Youtube, Twitter, Shopee, dan masih banyak lagi.

Bahasa Pemrograman Web

Pemrograman web kini menjadi salah satu cabang besar dalam
dunia programming. Oleh karenanya, kini ada banyak sekali bahasa
pemrograman yang bisa digunakan untuk membuat atau
mengembangkan sebuah website. Bahasa pemrograman ialah kata-kata
yang berperan sebagai instruksi yang dimengerti oleh komputer. Bahasa
pemrograman merupakan ilmu yang wajib dikuasai oleh web designer
untuk membuat sebuah website atau aplikasi.

Berikut ini merupakan beberapa contoh bahasa pemrograman yang lazim

digunakan dalam pemrograman web:

HTML: HTML merupakan dasar pembuatan setiap website. Untuk

membentuk sebuah website, HTML berperan dalam pembentukan
struktur halaman website.

CSS: CSS merupakan kunci yang membedakan sebuah website dengan

website yang lain, karena CSS berfungsi untuk membuat tampilan laman
menjad lebih menarik.

3|Dasar Pemrograman Web

PHP: PHP merupakan server side scripting yang digunakan untuk
memprogram dan mengembangkan sebuah situs, biasanya digunakan
bersama HTML. PHP dirancang untuk pembuatan website dinamis.

JAVA SCRIPT: Java script berguna bagi kalian yang membutuhkan fitur
interaksi pada website kalian, sehingga website dapat secara aktif menjadi
media interaktif.

Bahasa pemrograman yang juga populer digunakan dalam

dunia programming yaitu PYTHON, JAVA, C, RUBY, dan PERL.

Aplikasi Pemrograman Web

Baik buruknya sebuah website tentu dipengaruhi oleh software/aplikasi
pembentuknya.Sehingga kita harus memilih aplikasi yang akan kita
gunakan dalam membuat website sesuai dengan keinginan dan
kebutuhan kita.

Aplikasi/Software yang dapat digunakan antara lain:

XAMPP

Gambar 1. 2. XAMPP
Singkatnya, XAMPP adalah software gratisan berisi puluhan komponen.
Mulai dari web server, modul bahasa pemrograman, sampai aplikasi

4|Dasar Pemrograman Web

pembuat database. Canggih banget kan? XAMPP adalah software web
server lokal untuk membangun website, aplikasi, hingga database secara
offline. Lho, kok offline? Sebagian orang cenderung membuat website
secara offline di komputer. Tujuannya, untuk memastikan semuanya
berjalan lancar. Baru kemudian mengupload website, aplikasi, atau
database itu ke server. XAMPP adalah software gratisan dan open source,
serta dapat diinstall di berbagai platform, seperti Windows, Linux, maupun
OS X.

Oh ya, XAMPP adalah sebuah web server full package atau standalone,
yang mana dapat berdiri sendiri. Alasannya, di dalam aplikasi XAMPP
terdapat puluhan paket modul, bahasa pemrograman, hingga komponen
lain. Hal ini akan dibahas lebih lengkap di bagian fitur-fitur XAMPP.

Berkat adanya XAMPP, Anda tidak perlu menginstall terlalu banyak modul
atau komponen terpisah di komputer. Sehingga secara signifikan, proses
merancang, menulis, hingga testing website dapat berlangsung lebih
mudah.

Bicara komponen, kepanjangan XAMPP terdiri dari singkatan lima

komponen utama, yaitu:

X – Cross Platform. X adalah kepanjangan XAMPP yang artinya Cross.

Hal itu sebagai penanda bahwa XAMPP adalah aplikasi Cross Platform
yang kompatibel dengan berbagai jenis OS.

A – Apache. Apache adalah web server default yang dipakai

XAMPP. Web server adalah software untuk mengatur proses transfer
data antara website dan pengunjung. Selain itu, Apache juga bertugas
sebagai distributor untuk fitur atau komponen-komponen lain.

M – MariaDB. MariaDB adalah software DBMS default milik

XAMPP. DBMS adalah software untuk mengelola database beserta data

5|Dasar Pemrograman Web

di dalamnya. MariaDB menggantikan software DBMS sebelumnya,
MySQL sejak XAMPP versi 5.5.30 dan 5.6.14.

P – PHP. PHP adalah bahasa pemrograman untuk membangun website

atau web app dari sisi back end.

P – Perl. Kepanjangan XAMPP yang terakhir yaitu Perl. Perl

adalah contoh bahasa pemrograman untuk keperluan yang lebih
kompleks. Misalnya pembuatan aplikasi GUI, pemrograman jaringan, dan
banyak lagi.

Nah, itu tadi penjelasan tentang apa itu XAMPP dan kepanjangan
XAMPP. Di poin berikutnya, Anda akan belajar sejarah XAMPP beserta
orang-orang hebat di balik web server yang satu ini. Yuk simak!

Sejarah XAMPP dari Awal hingga Sekarang

Sejarah XAMPP bermula di tahun 2002. Kala itu, dua orang developer
bernama Kai ‘Oswald’ Seidler dan Kay Vogelgesang berencana
mempromosikan Apache Web Server agar digunakan lebih banyak orang.
Alasannya pada masa itu, Apache dianggap sebagai web server yang sulit
diinstall di komputer. Apalagi jika developer ingin menghubungkan
Apache dengan modul lain seperti MariaDB, PHP, dan Perl. Maka
prosesnya akan jauh lebih sulit lagi. Makanya, mereka membangun
sebuah proyek non-profit bernama Apache Friends. Dari Apache Friends
ini, keduanya berhasil menciptakan software bernama XAMPP. Nah, versi
pertamanya sendiri rilis tanggal 4 September 2002. Seiring berjalannya
waktu, XAMPP berkembang dari yang tadinya sebatas web server
Apache, menjadi sebuah software komplit berisi puluhan jenis modul dan
komponen. Tentu saja hal ini berkat dukungan kontributor, baik internal
maupun komunitas luar. Hingga kini, XAMPP selalu konsisten merilis versi
baru demi kenyamanan pengguna. Dengan versi teranyar XAMPP 8.1.6,

6|Dasar Pemrograman Web

yang meluncur tanggal 16 Mei 2022 lalu. Setelah paham apa itu XAMPP
dan sejarah XAMPP, sekarang waktunya Anda mengenal fungsi XAMPP.

Kegunaan XAMPP

Layaknya software web server pada umumnya, XAMPP memiliki

beberapa kegunaan utama, seperti:

1. Mengelola Database MySQL dengan phpMyAdmin

MySQL adalah salah satu software database relasional yang masih

populer. Meski posisinya di XAMPP telah digantikan oleh MariaDB, tapi
sebenarnya Anda masih bisa membuat database di MySQL lewat
bantuan phpMyAdmin. hpMyAdmin adalah aplikasi berbasis web untuk
mengelola database MySQL. Di XAMPP, Anda bisa membuat,
mengedit, menghapus database, sampai membuat user
administrator di phpMyAdmin tanpa perlu koneksi internet sama sekali.
Jangan khawatir, tampilan phpMyAdmin di sini sama persis dengan
versi onlinenya di layanan hosting. Jadi Anda yang belum punya
hosting, atau baru berniat belajar tentang database bisa mencobanya
terlebih dahulu di software XAMPP ini.

2. Menjalankan Script PHP, Laravel, dan CodeIgniter

Fungsi XAMPP berikutnya adalah untuk menjalankan script yang ditulis

menggunakan bahasa pemrograman PHP. PHP banyak dipakai untuk
membangun website, khususnya di sisi backend untuk menangani
logika dan proses transfer data website. XAMPP bisa menjalankan
semua script PHP dengan lancar Baik itu script PHP murni alias native,
ataupun script yang berasal dari framework PHP, seperti Laravel atau
CodeIgniter. Memang, Anda tetap bisa menjalankan script PHP secara
offline tanpa XAMPP. Namun Anda perlu ingat bahwa hampir semua
website butuh database. Makanya Anda perlu menginstall XAMPP

7|Dasar Pemrograman Web

 untuk membuat database, lalu membuat koneksi database PHP ke
MySQL. Sama seperti poin sebelumnya, kami sangat
merekomendasikan XAMPP untuk Anda yang ingin belajar membuat
website dengan PHP. Kebetulan, kami pernah membuat
panduan membuat website di Localhost XAMPP untuk Anda
praktikkan.

3. Menginstall WordPress secara Offline

Fungsi XAMPP yang tak kalah penting lainnya adalah untuk menginstall
WordPress. Anda tidak salah baca, karena WordPress memang bisa
dijalankan di komputer tanpa koneksi internet lewat bantuan XAMPP.
Install WordPress secara offline ini punya beberapa manfaat. Selain
untuk keperluan belajar, ia juga membantu Anda dalam membuat plugin
atau tema custom, membuat staging WordPress, sampai melakukan
debugging atau maintenance website. Intinya dengan XAMPP, Anda
bisa mengotak-atik WordPress sepuasnya tanpa perlu khawatir website
yang asli jadi error atau tidak dapat diakses. Penasaran ingin mencoba?
Tenang, Anda bisa mempraktikkan panduan cara instal WordPress di
XAMPP dari kami.

Anda sudah paham apa itu XAMPP, kegunaan, dan fungsi XAMPP yang
utama kan? Setelah ini, Anda akan kami ajak mengenal fitur-fitur
XAMPP secara mendalam. Yuk ke poin berikutnya!

XAMPP Control Panel

8|Dasar Pemrograman Web

 Gambar 1. 3. Control Panel

XAMPP Control Panel adalah sebuah manajemen tools untuk mengelola

fitur-fitur XAMPP di atas. Dengan Control Panel, Anda bisa menjalankan,
menjeda, dan menonaktifkan satu atau beberapa komponen XAMPP
sekaligus.XAMPP Control Panel punya beberapa fungsi untuk tujuan yang
lebih spesifik, seperti:

Config – Mengkonfigurasi aplikasi XAMPP secara keseluruhan.

Netstat – Menampilkan semua proses atau komponen yang sedang aktif.

Shell – Membuka terminal Shell untuk konfigurasi lebih lanjut.

Explore – Membuka folder instalasi XAMPP di komputer.

Services – Menampilkan semua proses yang aktif di belakang layar.

Help – Mengarahkan Anda ke forum bantuan dan komunitas XAMPP.

Quit – Keluar dari aplikasi XAMPP.

Untuk mendownload xampp silahlkan download di link berikut;

https://www.apachefriends.org/download.html

9|Dasar Pemrograman Web

Di modul ini versi XAMPP yang digunakan adalah 3.2.3. dengan versi php
5.6.40, demi kelancarang dalam mengikuti modul ini silahkan download
dan instal sesuai dengan versi yang sesuai.

Instalasi XAMPP
Berikut Langkah-langkah dalam mengnstal aplikasi xampp Jika sudah
mendownload / file XAMPP sudah ada maka Langkah selanjutnya
adalah;
1. Double klik pada aplikasi XAMPP yang sudah di download;

Gambar 1. 4. Warning Instalasi

Jika tampil pemberitahuan diatas klik ok untuk melanjutkan
2. Selanjutnya akan tampil halaman awal wizard, kemudian klik netx
untuk melanjutkan;

Gambar 1. 5. Setup XAMPP

10 | D a s a r P e m r o g r a m a n W e b
 3. Selanjutnya kita memilih komponen yang ingin diinstall, komponen
tambahan yang penting adalah MySQl/MariaDB dan phpMyAdmin,
untuk komponen lainnya bisa di uncheck (tetapi perbedaan ukuran
file tidak seberapa).

Gambar 1. 6. Select Components

4. Langkah selanjutnya pilih direktori/tempat penyimpanan dimana
XAMPP akan kita install, usahakan lokasinya tidak satu drive
dengan operating sistem, hal ini untuk mengantisipasi jika terjadi
hal-hal yang tidak diinginkan pada OS kita, selanjutnya klik next.

Gambar 1. 7. Instalation Folder

11 | D a s a r P e m r o g r a m a n W e b
 5. Selanjutnya terdapat tawaran untuk mempelajari lebih lanjut tentang
Bitnami yang merupakan installer untuk CMS populer yang dapat
langsung diinstall ke XAMPP (url ref:
https://bitnami.com/stack/xampp). Untuk mudahnya hilangkan
centangan dan klik next untuk melanjutkan.

Gambar 1. 8. Learn Bitnami for XAMPP

6. Proses instalasi mulai dijalankan, XAMPP akan mengekstrak file
yang diperlukan dan melakukan konfigurasi seperlunya, proses ini
akan memakan waktu cukup lama hingga beberapa menit.

Gambar 1. 9. Installing Process

12 | D a s a r P e m r o g r a m a n W e b
 7. Proses instalasi selesai, XAMPP siap untuk digunakan, jika ingin
langsung menjalankan XAMPP Control Panel, centang pilihan ‘Do
you want to start the control panel now?‘, selanjutnya klik finish
untuk menutup jendela instalasi.

Gambar 1. 10. Completing the XAMPP instalation

Langkah diatas adalah cara untuk melakukan instalasi aplikasi
XAMPP, perlu di ingat beberapa catatan;
1. Pastikan operating sistem sebelum melakukan instalasi, jika OS
32 bit maka instal XAMPP versi 32 bit, dan jika OS 64 bit maka
instal XAMPP versi 64 bit
2. Pastikan kapasitas ram mencukupi untuk kelancaran
operasional
Cara Menggunakan XAMPP
Setelah berhasil meng install xampp di windows, selanjutnya kita bahas
cara menjalankannya.
Jika saat proses install sobat mencentang pilihan “Do you want to start
the control panel now?” maka secara otomatis XAMPP Control Panel
akan terbuka, jika tidak, dapat dijalankan melalui menu START > All
Programs > XAMPP > XAMPP Control Panel.

13 | D a s a r P e m r o g r a m a n W e b
Jika sobat menggunakan versi portable, dapat dilakukan dengan
membuka folder instalasi kemudian dobel-klik file xampp-control.exe.
Selanjutnya, setelah XAMPP control panel terbuka, jalankan module
Apache dan MySQL dengan mengklik tombol start yang ada di
sebelahnya. Jika tidak ada masalah maka akan muncul warna hijau
pada module ini.

Gambar 1. 11. XAMPP Control Pannel

Selanjutnya kita tes apakah software PHP dapat berjalan dengan baik.
Buka browser dan ketikkan alamat http://localhost, jika berjalan dengan
baik, maka akan muncul tampilan seperti gambar dibawah ini.

14 | D a s a r P e m r o g r a m a n W e b
 Gambar 1. 12. Localhost

Visual Studio Code

Software code editor adalah hal yang merupakan kebutuhan wajib bagi
setiap orang yang sedang mengembangkan aplikasi. Namun, tidak semua
code editor memiliki fitur yang lengkap. Sehingga, Anda tidak cukup
menginstall satu software saja. Visual Code Studio adalah salah satu
software code editor yang kami rekomendasikan karena fitur-fiturnya yang
lengkap.
Code editor yang satu ini sangat banyak penggunanya di kalangan para
programmer dan mulai populer belakangan ini. Fitur-fitur apa saja yang
ada pada Visual Code Studio? Dalam artikel ini, kita akan mengulas
software pemrograman yang satu ini hingga tuntas. Simak penjelasan
lengkapnya, ya.
Apa aitu Visual Studio Code

Gambar 1. 13. Visual Studio Code

Visual Code Studio merupakan software code editor yang bisa Anda
gunakan pada perangkat dengan OS MacOs, Linux, maupun Windows.
Code editor yang satu ini pengembangnya adalah salah satu perusahaan
teknologi terkemuka di dunia, Microsoft. Sebagai software code editor

15 | D a s a r P e m r o g r a m a n W e b
yang handal, Visual Code sangat ringan saat Anda menggunakannya.
Software ini bisa Anda gunakan untuk mengedit kode dari banyak macam
bahasa pemrograman, mulai dari JavaScript, TypeScript, hingga Node.js.
Tidak hanya itu, Visual Code Studio juga mendukung bahasa
pemrograman lain seperti PHP, Python, Java, dan .NET. Hal ini karena
Visual Code Studio memiliki ekosistem yang luas dan extension yang
banyak. Tak heran kalau software code editor yang satu ini merupakan
yang paling populer di kalangan developer. Terbukti penggunanya
mencapai 71% menurut survey dari Stack Overflow, jumlah ini adalah
yang terbanyak bila kita bandingkan dengan code editor lainnya.
Fitur
Software visual code studio memiliki beberapa fitur menarik. Apa saja kira-
kira fitur tersebut dan kegunaannya bagi pengguna? Berikut ini penjelasan
lengkapnya.
1. Basic Editing
Sebagai code editor, fungsi utama dari Visual Code Studio adalah untuk
menuliskan kode-kode atau coding. Software ini memenuhi semua
kebutuhan Anda, mulai dari fitur Column Selection, Multiple Selection,
hingga Keyboard Shortcuts yang dimilikinya. Dalam code editor ini juga
terdapat fitur Auto Save dan Hot Exit yang berfungsi menyimpan file
secara otomatis. Dengan menggunakannya, Anda tak perlu khawatir
lupa menyimpan file dan kehilangan semua progress ketika terjadi
sesuatu yang tidak diinginkan, misalnya laptop error atau aplikasi tidak
merespon.
2. IntelliSense
Fitur Visual Code Studio yang satu ini akan membantu para developer
untuk coding lebih cepat. IntelliSense bekerja dengan cara memberi
saran keseluruhan kata berdasarkan perintah yang ada ketik, sistem ini
mirip dengan Autocomplete. Sebenarnya, IntelliSense hanya tersedia
untuk bahasa pemrograman yang umum dan populer seperti

16 | D a s a r P e m r o g r a m a n W e b
 JavaScript, TypeScript, JSON, HTML, dan CSS. Namun, Anda
bisa menambahkan bahasa pemrograman lain dengan mengunduh
fiturnya pada Extension Marketplace yang tersedia.
3. Debugging
Fitur visual code studio lainnya adalah debugging. Fitur yang satu ini
berfungsi untuk membantu Anda dalam mengeksekusi, mengedit, dan
mengcompile sebuah kode secara berulang-ulang atau biasanya
disebut looping. Visual code studio mendukung fitur debugging untuk
platform Node.js secara default. Namun, tidak perlu khawatir karena
Anda tetap bisa melakukan debugging untuk bahasa pemrograman lain
dengan mengunduh extensionnya melalui extension marketplace.
4. Extension Marketplace
Extension Markeptplace adalah fitur unggulan dari visual code studio
yang tidak terdapat di software code editor yang lain. Fitur ini
memungkinkan Anda untuk menginstal berbagai tools pendukung dari
bahasa pemrograman yang Anda gunakan. Tidak hanya itu, Anda juga
bisa menambahkan bahasa pemrograman tambahan. Hal ini tentu saja
membuat proses software development lebih mudah dan efisien. Selain
itu, Anda tak perlu menginstal banyak code editor jika ingin
menggunakan bahasa pemrograman lainnya.
5. Github Integration
Fitur lainnya dari Visual Code Studio adalah Github Integration. Github
adalah platform untuk memanajemen proyek pemrograman terbesar di
dunia. Banyak developer yang menggunakan platform ini untuk saling
berkolaborasi. Dengan menggunakan code editor yang satu ini, Anda
tidak perlu berganti software jika ingin menggunakan Github. Visual
Code sudah terintegrasi dengan Github, sehingga Anda hanya perlu
menginstall tools Issues dan Github Pull Request saja untuk mulai
menggunakannya.

17 | D a s a r P e m r o g r a m a n W e b
Keunggulan Visual Studio Code
Sebagai software code editor paling populer saat ini, Visual Code memiliki
banyak keunggulan. Keunggulan inilah yang menjadi alasan banyak
developer mengandalkannya untuk membangun software. Apa saja yang
menjadi keunggulan Visual Code Studio? Simak penjelasan lengkapnya
berikut ini, ya.
1. Performa yang cepat
Visual Code Studio bisa Anda gunakan di berbagai perangkat, karena
aplikasi ini sangat ringan dan sederhana. Bahkan, ketika Anda
menginstal banyak extension di dalamnya, Visual Code Studio tetap
bisa memiliki performa optimal. Aplikasi yang satu ini sudah teroptimasi
sedemikian rupa agar banyaknya pekerjaan atau extension yang
tersimpan di dalamnya, tidak akan terlalu berpengaruh pada
kinerjanya.
2. Bisa digunakan secara gratis
Code editor ini dikembangkan secara open-source. Karena itu, Anda
tidak perlu membayar untuk menggunakannya, cocok bagi yang masih
baru belajar pemrograman dan masih menghemat biaya. Selain itu,
karena dikembangkan secara open-source semua orang jadi bisa
berkontribusi untuk pengembangan Visual Code. Aplikasi yang satu ini
pun jadi bisa terus berkembang dengan berbagai extension baru dan
bug yang sudah terminimalisir.
3. Multi Platform
Walaupun pengembangnya adalah Microsoft, tapi Visual Code Studio
mendukung penggunaan di berbagai platform. Mulai dari MacOS,
Linux, hingga Windows. Hal ini tentu membuat proses pengembangan
software jadi lebih efisien, karena Anda bisa bekerja melalui perangkat
apapun tanpa kendala.
4. Mendukung banyak Bahasa pemrograman
Visual Studio mendukung penggunaan berbagai bahasa pemrograman.
Ia juga memiliki banyak teknologi terbaik untuk memfasilitasi proses

18 | D a s a r P e m r o g r a m a n W e b
 pengembangan software di dalamnya. Salah satu contohnya adalah
Electron yang berguna untuk Node.js dan JavaScript, serta Monaco
Cloud Editor yang mendukung HTML, .NET, Roslyn, dan lain-lain.
5. Fitur Lengkap
Visual Code Studio memiliki banyak fitur yang membuatnya unggul
dibandingkan aplikasi code editor yang lain. Salah satu fitur paling
menonjol adalah Extension Marketplace yang sudah kita bahas
sebelumnya. Extension ini mendukung pengguna untuk mengunduh
fitur-fitur tambahan secara bebas.
Instalasi Visual Studio Code
Tahapan Instalasi Visual Studio Code
1. Download Visual Studio Code di link berikut
https://code.visualstudio.com/Download
2. Setelah selesai di donwload,double klik file instalasi visual studio
code nya
3. Kemudian pilih “I accept the agrement”,lalu klik next.

Gambar 1. 14. Setup Agreement

4. lalu,pilih lokasi untuk menyimpan instalasi visual studio code
nya,untuk ini biarkan default saja. Kemudian klik next.

19 | D a s a r P e m r o g r a m a n W e b
 Gambar 1. 15. Memilih Folder
5. kemudian akan muncul “select start menu folder” langsung klik next
saja.

Gambar 1. 16. Select Start menu Folder

6. lalu,pada bagian “select additional task” ceklis saja semua nya,lalu
klik next.

20 | D a s a r P e m r o g r a m a n W e b
 Gambar 1. 17. Select Aditional Task
7. lalu klik install untuk memulai instalasi visual studio code nya.

Gambar 1. 18. Ready To Install

8. tunggu sampai proses instalasi nya selesai.

21 | D a s a r P e m r o g r a m a n W e b
 Gambar 1. 19. Installing Process
9. kemudian klik finish,dan visual studio code pun siap digunakan

Gambar 1. 20. Finish

Sampai sini proses instalasi aplikasi sudah selesai dan siap digunakan,
sama halnya seperti xampp aplikasi visuak studio code juga perlu
memperhatikan bit sistem operasi yang ada di computer/laptop kita demi
menjamin kelancaran penggunaan applikasi.

22 | D a s a r P e m r o g r a m a n W e b
Framework CodeIgniter
Apa Itu Framework
Framework adalah struktur yang tersusun dari serangkaian kode generik
dan berfungsi untuk mengembangkan sistem dan aplikasi. Kerangka
kerja ini berperan sebagai template atau model yang menyediakan
fungsi cerdas dan elemen struktur standar untuk memudahkan
pekerjaan developer.
Karena menjadi semacam “fondasi” dalam mengerjakan proyek,
framework membantu developer agar tidak perlu memulai proses
development dari nol. Ada berbagai komponen siap pakai dan solusi
yang mudah disesuaikan dalam framework untuk menyederhanakan
proses pengembangan.
Selain itu, framework juga rutin diuji, dioptimalkan, dan diupdate oleh
programmer berpengalaman sehingga biasanya cukup aman dan
efisien. Satu framework bisa digunakan dalam beberapa proyek
berbeda, sehingga bisa dibilang framework adalah ‘fasilitator’ di dunia
pemrograman.
Solusi pemrograman yang mencakup source code, compiler, library,
abstract class, API, dan elemen lainnya ini memberikan dukungan yang
diperlukan untuk pemrograman software umum. Baik untuk web
development, mobile development, atau data science, framework bisa
memfasilitasi semua.
Kegunaan dan Fungsi Framework
Fungsi utama framework adalah untuk memudahkan proses
pengembangan software atau aplikasi. Dengan menyediakan struktur
dasar yang memudahkan proses pemrograman sistem, framework
sangat membantu dalam hal waktu dan keamanan.
Kemudian seperti yang dibahas tadi, karena dikembangkan oleh
programmer berpengalaman dan punya banyak komunitas aktif,

23 | D a s a r P e m r o g r a m a n W e b
framework yang umumnya bersifat open-source biasanya sering
menjalani pengujian dan pengoptimalan secara teratur.

Oleh karena itu, proses pelaporan dan perbaikan bisa dilakukan segera
kalau ada kerusakan atau bug yang ditemukan. Framework juga punya
konsistensi tinggi karena merupakan coding yang diuji secara ekstensif
dan sudah terbukti berhasil.
Cara kerja framework memungkinkan developer untuk lebih fokus pada
target utama proyek tanpa perlu cemas dengan elemen dasar
strukturnya. Tanpa harus memulai proses dari nol, programmer bisa
menghemat waktu dan uang di samping mengurangi risiko error.
Proses eksekusinya didasarkan pada penggunaan ulang rangkaian kode
generik yang bisa diimplementasikan sebagai struktur dasar proyek.
Desain ini harus sesuai dengan bahasa dan sifat framework yang
dimaksud.
Sebagian besar framework memiliki forum dan dokumentasi ekstensif
yang bisa membantu para programmer mempelajari pengetahuan baru
dan mengatasi masalah.
Intinya, beberapa kegunaan utama framework yang membuatnya
banyak dimanfaatkan dalam pemrograman adalah:
• Mengoptimalkan waktu pengembangan
• Menentukan dan menstandarkan langkah-langkah pemrograman
• Keamanan yang lebih ketat
• Menghindari kode duplikat
• Mengurangi terjadinya bug
• Meningkatkan konsistensi dalam proses pengembangan dan
dalam aplikasi yang dibuat
• Meminimalkan kemungkinan error dalam kode

24 | D a s a r P e m r o g r a m a n W e b
 • Memungkinkan developer untuk fokus pada elemen desain
tertentu
• Memudahkan dan mempersingkat proses belajar tim developer
• Menghemat biaya
Perbedaan Framework dan Library
Framework pada dasarnya terdiri dari elemen kode yang memandu
proses pengembangan aplikasi dan mengoptimalkannya. Karena itu,
framework terkadang disalahartikan sebagai library. Namun keduanya
adalah konsep berbeda yang juga punya tujuan berbeda.
Framework menentukan struktur yang Anda gunakan untuk
mengembangkan software. Jadi, sejak awal kode Anda harus mengikuti
standar yang sudah ditetapkan oleh framework.
Di sisi lain, library adalah resource yang bisa Anda gunakan selama
proses pengembangan, menyediakan elemen untuk menyelesaikan satu
tahap pengembangan atau mengoptimalkannya.
Hal ini terkait dengan konsep Inversion of Control (IoC), di mana ketika
suatu library digunakan, kode akan membuat permintaan ke library
tersebut. Artinya, kontrol sepenuhnya ada pada kode, lalu library
menanggapi fungsi yang diminta.
Nah, kebalikannya berlaku pada framework. Coding tidak lagi
mengontrol proses, melainkan framework karena berperan untuk
“memanggil” kode yang akan merespons persyaratan yang ditetapkan
framework.
Contoh praktisnya seperti ini: misalnya Anda menggunakan fungsi curl,
yang merupakan libary PHP. Saat Anda menggunakan salah satu fungsi
curl, kode PHP memanggil fungsi tertentu dalam library yang dimaksud.
Di sini, kode PHP “memanggil” fungsi curl di library.

25 | D a s a r P e m r o g r a m a n W e b
Sekarang, misalnya Anda menggunakan framework PHP seperti Laravel.
Relasi kontrol tersebut akan dibalik, karena frameworklah yang
“memanggil” kode yang tertulis di dalamnya.
Penting untuk diingat bahwa dalam sebuah framework mungkin ada satu
atau lebih library. Bagaimanapun, library merupakan salah satu fitur
canggih yang ada dalam framework.
Jenis-Jenis Framework
Menggunakan framework pemrograman memang memberikan banyak
keuntungan. Namun, terkadang sulit untuk mencari tahu framework yang
paling cocok untuk proyek Anda. Salah memilih framework justru akan
membuang-buang waktu dan menimbulkan masalah.
Nah, oleh karena itu, Anda perlu memahami dulu jenis-jenis framework
yang ada. Biasanya framework dibagi berdasarkan aplikasi dan mode
implementasinya (front-end, back-end, dan JavaScript).
Di bawah ini kami akan menjelaskan beberapa framework pemrograman
terpopuler saat ini, yang dibagi berdasarkan aplikasinya.
Framework untuk Aplikasi Web
Framework untuk aplikasi web membantu proses pengembangan sistem
online, seperti website, API, aplikasi, dan resource lain yang tersedia di
internet.
Angular
Angular adalah framework JavaScript front-end open source yang
menyediakan beberapa tool dan solusi untuk mempercepat web
development dan menggabungkan template.
Karena memungkinkan integrasi yang luas, Angular cocok untuk website
atau aplikasi yang memerlukan fleksibilitas dalam hal kustomisasi.
Framework ini dikembangkan dan dikelola oleh tim khusus di Google.

26 | D a s a r P e m r o g r a m a n W e b
Beberapa contoh website dan aplikasi yang menggunakan framework
Angularjs adalah Netflix, PayPal, UpWork, dan Nike.

Django

Django adalah framework open source populer yang ditulis dan

difokuskan pada bahasa pemrograman Python. Tujuannya yaitu untuk
memungkinkan proses pengembangan aplikasi web yang cepat,
sederhana, dan terukur.
Dengan elemen struktural yang ada di Django, Anda bisa melakukan
semua proses yang perlu dilakukan secara pragmatis dengan aman.
Framework ini paling banyak digunakan oleh perusahaan startup dan
teknologi dalam proyek interaktif yang memiliki banyak resource visual,
misalnya game. Beberapa website dan sistem canggih yang
dikembangkan dengan bantuan Django adalah Spotify, Instagram,
YouTube, dan Pinterest.

Laravel
Laravel merupakan framework back-end yang didasarkan pada PHP,
dan cukup populer karena syntax yang ekspresif dan canggih. Selain
populer, Laravel juga fleksibel dan mudah digunakan.
Dimaksudkan untuk menghadirkan fungsi yang canggih namun
sederhana, resource Laravel memungkinkan proses web development
yang agile dan terintegrasi. Laravel juga memiliki tool untuk
menggabungkan beberapa template.
Framework Laravel memiliki komunitas yang besar dan aktif, serta
digunakan oleh banyak website terkenal seperti BBC, 9gag, Pfizer,
Barchart, MyRank, dan World Walking.

27 | D a s a r P e m r o g r a m a n W e b
Codeigniter

Gambar 1. 21. CodeIgniter

CodeIgniter adalah sebuah framework yang dikembangkan pada tahun
2006 oleh Rick Ellis. CodeIgniter berfungsi untuk web dan application
development yang hadir dalam bentuk platform open-source. Framework
ini diciptakan untuk para developer yang hendak membangun situs web
maupun aplikasi menggunakan bahasa pemrograman PHP.
Kehadiran CodeIgniter ini bertujuan agar para developer dapat
mengembangkan proyek mereka dengan jauh lebih cepat dan mudah.
Sebab, menurut developer CodeIgniter, kinerja seorang developer
terkadang menjadi lebih lama karena mereka harus menulis kodenya
sendiri dari awal.
Melalui CodeIgniter ini, mereka menyediakan built-in-library di mana
terdapat ratusan template dan solusi untuk pekerjaan yang sering kali
dikerjakan oleh para developer. Selain itu, CodeIgniter juga
menyediakan user interface (UI) dan struktur yang sederhana serta logis
untuk mengakses built-in-library.
Fitur CodeIgniter

28 | D a s a r P e m r o g r a m a n W e b
CodeIgniter terkenal sebagai framework populer pilihan developer
karena kinerja dan fitur-fiturnya yang lengkap dan mampu
mempermudah tugas seorang developer. Berikut fitur-fitur tersebut.
1. MVC
Fitur ini merupakan fitur favorit yang membuat CodeIgniter menjadi
framework unggulan para developer. Model-View-Controller (MVC)
ini merupakan praktik standar industri saat bekerja dengan aplikasi
web yang berfungsi untuk memisahkan data, logika, dan
presentasi dalam aplikasi.
2. Built-in-library
Fitur ini membuat pengguna bisa menemukan berbagai solusi yang
seputar coding, hingga buku, tutorial, dan petunjuk penggunaan
seputar CodeIgniter. Dengan kata lain, para developer yang
menggunakan framework CodeIgniter memiliki kumpulan
dokumentasi yang lengkap mengenai cara kerja sistem aplikasi
ciptaannya serta info lain seputar development PHP.
Adapun tutorial atau petunjuk ini biasanya berupa masalah serupa
yang pernah dialami orang lain dan mampu diselesaikan, kemudian
dibuat solusinya untuk pengguna lain dalam fitur built-in-library.
3. Extremely light weight
Saat ini, pengguna cenderung menyukai aplikasi yang dapat
memuat data dengan cepat. Framework pun menyuguhkan itu
dengan menyajikan waktu kurang dari satu detik untuk memuat
setelah instalasi.
Menjawab kebutuhan itu, CodeIgniter dapat dimuat oleh device
dalam waktu kurang dari 50 milisekon sehingga lebih cepat
dibandingkan framework lain.
4. Source code yang kecil
Source code yang kecil dapat menyederhanakan penerapan dan
pembaruan sistem aplikasi. CodeIgniter memiliki source code yang

29 | D a s a r P e m r o g r a m a n W e b
 hanya mendekati 2 MB sehingga memudahkan pengguna untuk
menguasai CodeIgniter dan sistem kerjanya.
Manfaat CodeIgniter
Selain performa dan fitur-fitur, CodeIgniter menyajikan beragam manfaat
yang menguntungkan penggunanya, seperti:
• Bisa melacak bug secara otomatis.
• Pengguna dibebaskan untuk mengatur desain dan sistem
CodeIgniter sesuai kebutuhan.
• Jaminan keamanan situs web pengguna .
• Memungkinkan pengguna untuk melakukan migrasi data dari satu
server ke server lain .
• Meningkatkan peringkat SEO web dengan mudah. .
Tak hanya itu, CodeIgniter juga memiliki sejumlah keunggulan, seperti
ringan karena seluruh framework ini memiliki library dan resources yang
ringan, cepat, minim konfigurasi, banyak support dan komunitas, serta
maintenance-nya mudah.
CodeIgniter memiliki alur kerja, yaitu:
• Index.php, berfungsi sebagai file pertama dalam program yang
akan dibaca oleh program.
• The Router, yang akan memeriksa HTTP request untuk
menentukan hal apa yang harus dilakukan oleh program.
• Cache file, apabila dalam program sudah terdapat “cache file”,
maka file akan langsung dikirim ke browser. File cache inilah yang
dapat membuat sebuah website dapat dibuka lebih cepat.
• Security, sebelum file controller di-load keseluruhan, HTTP
request dan data yang di-submit oleh user akan disaring terlebih
dahulu melalui fasilitas security yang dimiliki oleh CodeIgniter.
• Controller, akan membuka file model, core libraries, helper, dan
semua resources yang dibutuhkan dalam program tersebut.

30 | D a s a r P e m r o g r a m a n W e b
LATIHAN:

31 | D a s a r P e m r o g r a m a n W e b
BAB II DATABASE

Tahukah Anda? Website yang Anda akses, artikel yang sedang Anda
baca, hingga ebook yang bisa Anda download di internet, semuanya
tersimpan dalam sebuah tempat penyimpanan bernama database.
Database adalah tempat semua data dapat tersimpan dengan sistem
yang efektif dan efisien, sehingga Anda bisa mengakses data tersebut
dengan mudah.
Nah, sebenarnya apa sih yang dimaksud dengan database?
Di modul ini, kami akan mengulas pengertian, fungsi, hingga jenis-jenis
database. Yuk, masuk ke pembahasannya.
Apa Itu Database
Database adalah kumpulan data yang disimpan dengan sistem tertentu,
dan saling berhubungan, sehingga dapat dikelola dengan mudah.
Database penting untuk mengatur data yang jumlahnya banyak, dan
selalu bertambah. Sebagai contoh, program website, aplikasi, dan
lainnya.
Katakanlah Anda sedang membangun website toko online. Tentunya
Anda akan memiliki banyak data, seperti gambar produk, deskripsi
produk, informasi harga, dan lainnya.
Tanpa database, data tersebut hanya akan tersimpan di komputer Anda,
dan tidak bisa diakses oleh konsumen. Atau, konsumen harus
mengakses data dari komputer Anda dulu secara langsung. Selain
berbahaya, aksesnya juga akan berat, bukan?
Nah, dengan database, data website Anda dapat disimpan dalam satu
server. Berapapun jumlahnya, bisa disesuaikan dengan kemampuan
server tersebut.

32 | D a s a r P e m r o g r a m a n W e b
Dengan begitu, data mampu diolah bersamaan sehingga aktivitas
browsing untuk melihat produk, memasukkan produk ke keranjang
belanja hingga tahap pembayaran bisa berjalan dengan sistem yang
baik.
Kenapa hal itu bisa terjadi? Karena sistem penyimpanan database
mampu mengelola data dengan baik. Anda bisa mengatur file sesuai
dengan klasifikasinya, misalnya teks, gambar dan lainnya.
Jadi, ketika membutuhkan suatu data, Anda bisa mendapatkannya
dengan cepat dan tepat.
Komponen Database
Umumnya, sebuah database akan memiliki lima komponen berikut ini:
1. Data
Data adalah file-file yang berisi informasi, baik teks, log, gambar,
dan lainnya. Di dalam database, data akan disimpan dengan
struktur tertentu, sehingga mudah dikenali.

Gambar 2. 1. Database

33 | D a s a r P e m r o g r a m a n W e b
 contoh struktur data dalam database Biasanya, struktur tersebut
terdiri dari:
• Field – Satuan informasi yang rinci, seperti nama produk,
harga, stok, dan lainnya.
• Record – Kumpulan dari field, yang membentuk satu informasi
unik. Seperti, harga dari suatu produk.
• Table – Kumpulan dari record, isi dari sebuah file.
• Database – Kumpulan dari tabel atau file.
2. Hardware
Hardware adalah perangkat keras yang digunakan untuk
menyimpan dan mengelola data.
Kalau untuk penyimpanan secara lokal atau di jaringan tertentu,
hardware yang digunakan adalah komputer, disk, memori, dan
lainnya. Sedangkan, untuk penyimpanan data online seperti
website, server hosting-lah yang digunakan.
3. Sistem Operasi
Sistem operasi bertanggung jawab atas semua sistem yang ada di
komputer atau server. Pilihlah sistem operasi yang mendukung
sistem database yang akan Anda bangun. Bisa menggunakan
Windows atau Linux.
4. Database Management System (DBMS)
DBMS adalah aplikasi pengelolaan database. Dengan DBMS, Anda
bisa lebih mudah ketika menginput dan mengupdate data.
Saat ini ada beragam pilihan aplikasi database yang bisa Anda
gunakan. Sebagai contoh kalau Anda ingin mengelola database
pada website, Anda bisa menggunakan MySQL.

34 | D a s a r P e m r o g r a m a n W e b
5. Database Access Language
Database Access Language adalah bahasa yang digunakan untuk
menulis perintah, seperti mengakses, menambah, memperbarui,
dan menghapus data di dalam database.
Fungsi Database
Terdapat tujuh fungsi database yang perlu Anda ketahui, yaitu:
1. Mempercepat dan Mempermudah Identifikasi Data
Dengan database, Anda bisa membuat sebuah sistem yang dapat
mengelompokkan data dan menyimpannya secara terstruktur.
Jadi, ketika ada permintaan akses sebuah data, informasinya bisa
diberikan dengan cepat sesuai kategori yang sudah ditentukan
sebelumnya.
2. Mengontrol Data Secara Terpusat
Tanpa database, data akan terpencar di berbagai penyimpanan
secara lokal sesuai dengan pihak yang memiliki data tersebut.
Dengan adanya database, semua data bisa dikumpulkan dalam
satu tempat, misalnya di server hosting. Jadi, Anda pun bisa
mengelola berbagai data dari pusat secara lebih efisien.
3. Menghindari Duplikasi Data
Setiap data yang tersimpan dalam database dapat diatur agar
terhindar dari data ganda.
Sistem database dapat dirancang untuk mengidentifikasi data yang
sama, sehingga dapat memberikan warning atau notifikasi ke
pengelola database. Misalnya, dengan menerapkan sistem kata
kunci atau primary key.
4. Menyimpan Data dengan Lebih Aman
Mengumpulkan data ke dalam satu database, artinya fokus
perlindungan keamanannya menjadi lebih baik.

35 | D a s a r P e m r o g r a m a n W e b
 Jika data masih tersebar di beberapa perangkat, maka setiap
perangkat perlu diamankan. Tapi kalau sudah terpusat di database,
Anda cukup mengamankan server dengan perlindungan berlapis.
5. Menghemat Biaya
Dengan database, Anda tidak memerlukan banyak tempat untuk
menyimpan data. Cukup satu server untuk berbagai kebutuhan
data. Secara biaya tentu jauh lebih murah dibanding menyediakan
beberapa tempat penyimpanan sendiri.
6. Dapat Diakses Multi-User
Jika data disimpan secara offline di perangkat berbeda, untuk
mengakses sebuah file tentu harus menghubungi pemiliknya dulu.
Bagaimana kalau Anda memerlukan data bersamaan dari berbagai
perangkat? Sangat tidak praktis, bukan?
Database menyimpan semua data dalam satu sistem. Maka,
siapapun bisa mengaksesnya dengan mudah, asalkan memiliki hak
akses. Mulai dari programmer, database administrator, hingga
pengunjung pada umumnya.
Jenis-Jenis Database
Inilah beberapa jenis database dengan contoh tools-nya:

36 | D a s a r P e m r o g r a m a n W e b
1. Operational Database

Gambar 2. 2. Operational Database

Operational database atau database OLTP (On Line Transaction
Processing) adalah jenis database yang dapat mengelola data dinamis
secara real-time.
Jadi, Anda bisa mengakses dan memodifikasi database secara langsung
dari perangkat keras Anda. Database jenis ini sering digunakan karena
dapat mengelola database berbasis SQL maupun NoSQL.
Selain itu, operational database juga dapat dikolaborasikan dengan
distributed database. Sehingga bisa meningkatkan performa database,
seperti skalabilitas data, ketersediaan data, hingga fault tolerance. Jadi,
sistem tetap berjalan meski terdapat komponen yang rusak.
Contoh Operational Database: Microsoft SQL Server, AWS Dynamo,
Apache Cassandra, dan MongoDB.

37 | D a s a r P e m r o g r a m a n W e b
2. Relational Database

Gambar 2. 3. Relational Database

Jenis database ini paling sering digunakan. Dinamakan relational,
karena data disimpan dalam beberapa tabel yang saling terkait atau
berhubungan (membentuk relasi).
• Relational database juga memiliki empat sifat yang dikenal
sebagai ACID, yaitu:
• Atomicity – Memastikan data sukses dioperasikan atau tidak sama
sekali. Jadi, jika satu data gagal dioperasikan, maka semua data
juga akan gagal.
• Consistency – Data dapat dikembalikan dalam keadaan
sebelumnya, jika proses data gagal.
• Isolation – Data yang sedang diproses akan terisolasi dari proses-
proses lainnya.
• Durability – Memastikan data tersimpan di dalam sistem dan tetap
aman, bahkan dalam keadaan restart system.
Dengan sifat seperti ini, pemeliharaan data dapat dilakukan dengan
mudah dan aman.

38 | D a s a r P e m r o g r a m a n W e b
Untuk penyimpanan database jenis ini, Anda memerlukan RDBMS atau
Relational Database Management System. Biasanya, RDBMS ini
menggunakan bahasa SQL atau Structured Query Language.
SQL adalah bahasa pemrograman yang paling umum digunakan untuk
membaca, membuat, memperbarui, dan menghapus data.
Contoh Relational Database: MySQL, PostgreSQL, MongoDB, MariaDB,
Oracle Database, IBM DB2, SAP HANA, MemSQL, Interbase, dan
Firebird.
3. NoSQL

Gambar 2. 4. NoSQL
NoSQL atau Not Only SQL adalah database non-relational. Artinya, data
yang dapat tersimpan bukan hanya berbentuk tabel, melainkan juga data
tipe lainnya.
Database ini biasa digunakan oleh website atau aplikasi yang
membutuhkan pemakaian fleksibel, seperti Google dan Facebook. Salah
satu contoh database jenis ini adalah MongoDB.

39 | D a s a r P e m r o g r a m a n W e b
Fleksibilitas itulah yang menjadikan NoSQL sebagai database yang
dapat ditingkatkan skalanya dan mengikuti perkembangan kebutuhan
data.
Jenis dan Contoh NoSQL Database:
• Key-Value Database -Menyimpan setiap data sebagai kunci yang
memiliki nilai. Database ini memiliki skalabilitas tinggi dan dapat
menangani volume lalu lintas data yang masif. Biasa digunakan
untuk web app, game online, dan keranjang belanja online.
Contoh: Amazon DynamoDB dan Redis.
• Document-Oriented Database – Menyimpan dan mengelola data
sebagai dokumen, biasa digunakan untuk aplikasi seluler dengan
kebutuhan akses ulang data yang cepat. Contoh: MongoDB,
Amazon DocumentDB, Apache CouchDB.
• Graph Database – Menyimpan data yang didominasi gambar atau
grafik, seperti pada media sosial. Contoh: Datastax Enterprise
Graph dan Neo4J.
• Wide-Column Database – Menyimpan data dalam kelompok kolom
besar, bukan dalam baris dan kolom (relational database). Wide-
Column dapat menangani petabyte data, sehingga cocok untuk
mendukung aplikasi real-time big data. Contoh: BigTable, Apache
Cassandra, dan Scylla.

40 | D a s a r P e m r o g r a m a n W e b
4. Distributed Database

Gambar 2. 5. Distributed Database

Sesuai namanya, distributed database merupakan sistem penyimpanan
yang terdistribusi. Artinya, data disimpan dalam beberapa komputer di
tempat yang sama dan dihubungkan melalui jaringan.
Misalnya, data di satu perusahaan dapat tetap terhubung dan
terorganisir dengan baik, walaupun data tersebar di beberapa komputer.
Sistem ini menguntungkan pengguna, karena dapat memproses data
yang berbeda oleh beberapa perangkat sekaligus.
Jika ingin memperluas sistem database, Anda hanya perlu
menambahkan perangkat baru dan menghubungkannya ke sistem.
Karena penyimpanan data terdistribusi, jika satu server gagal
memproses data, maka tidak akan mempengaruhi keseluruhan data.
Contoh Distributed Database: Apache Ignite, Apache Cassandra,
Apache HBase, Couchbase Server, Amazon SimpleDB, Clusterpoint,
dan Foundation DB.

41 | D a s a r P e m r o g r a m a n W e b
5. Database Warehouse

Gambar 2. 6. Database Werehouse

Database warehouse adalah sistem database yang sering kali
digunakan untuk pelaporan dan analisis data. Biasanya, bidang business
intelligence menggunakan database ini sebagai pusat data sebelum
diolah.
Hal itu karena database warehouse dapat menyimpan data dari sumber
yang berbeda-beda dan dapat diupload dari sistem operasi. Itu mengapa
dinamakan warehouse atau “gudang”.
Contoh Database Warehouse: Microsoft Access (Office), Oracle.

42 | D a s a r P e m r o g r a m a n W e b
6. End-User Database

Gambar 2. 7. End-User Database

End-User Database artinya semua data dapat diakses, dikelola, dan
dikembangkan oleh pengguna. Nah, pengguna akhir yang berhubungan
langsung dengan database inilah yang disebut end-user database.
Data yang sudah berinteraksi dengan end-user biasanya data siap
pakai. Artinya, data bisa dibaca oleh manusia, sudah bukan berupa data
pemrograman lagi. Misalnya, spreadsheet, dokumen, dan lainnya.
Contoh End-User Database: SQLite

43 | D a s a r P e m r o g r a m a n W e b
7. Cloud Database

Gambar 2. 8. Cloud Database

Cloud database merupakan sistem yang menyimpan data secara virtual,
bukan disimpan dalam server fisik.
Karena tidak membutuhkan server fisik, maka data yang disimpan pun
dapat dikembangkan atau ditingkatkan skalanya. Selain itu,
pemeliharaannya pun tidak serumit server fisik, karena database dapat
dijalankan melalui cloud computing platform.

Membangun Database
1. Mengaktifkan XAMPP
Jika XAMPP sudah terinstall, bukalah aplikasi tersebut untuk
melanjutkan cara membuat database dengan MySQL. Anda akan
melihat lima module yang terinstall, yaitu: Apache, MySQL, FileZilla,
Mercury dan Tomcat.
Biasanya, untuk membuat sebuah website, Anda hanya perlu
menjalankan dua module saja, Apache sebagai web server dan
MySQL untuk database.

44 | D a s a r P e m r o g r a m a n W e b
 Gambar 2. 9. Start XAMPP
2. Akses Localhost
Cara buat database MySQL bisa Anda lanjutkan dengan
mengakses phpMyAdmin melalui dua cara. Pertama, melalui
dashboard localhost. Caranya, ketik localhost pada kolom
pencarian browser, lalu tekan Enter. Kemudian, pilih phpMyAdmin
seperti yang ditunjukkan pada gambar berikut ini:

Gambar 2. 10. Localhost

Kedua, langsung mengakses localhost/phpMyadmin pada kolom
pencarian web browser. Jangan lupa tekan Enter. Maka akan
muncul tampilan phpMyAdmin seperti ini:

45 | D a s a r P e m r o g r a m a n W e b
 Gambar 2. 11. Phpmyadmin
Pada halaman inilah, Anda dapat melakukan pengelolaan database
untuk website Anda. Misalnya, membuat database, mengedit,
menghapus, bahkan melakukan query data.
3. Membuat Database
Cara membuat database MySQL di localhost/phpMyAdmin sudah
memasuki bagian inti. Di dashboard localhost/phpMyAdmin,
silahkan klik New untuk membuat database baru.

Gambar 2. 12. New Database

46 | D a s a r P e m r o g r a m a n W e b
 Masukkan nama database pada kolom yang tersedia. Pada tutorial
ini, kami menggunakan database_baru sebagai nama database
yang akan dibuat. Jika sudah diberi nama, klik Create.

Gambar 2. 13. Databases

Nantinya, database baru yang Anda buat akan tampil di bagian kiri
halaman phpMyAdmin. Sekarang, Anda sudah bisa menambahkan
tabel sebagai tempat penyimpanan data pada database baru.
4. Membuat Table
Cara membuat database dengan MySQL masih berlanjut. Kali ini,
mari membuat tabel dengan empat kolom untuk data pengguna
dengan nama tabel users. Kemudian, klik tombol Go.

Gambar 2. 14. Create table

Di bagian ini, Anda harus memasukkan nama kolom dan tipe
datanya. Untuk tabel users, kami membuat kolom id, name, email,
dan address. Jika sudah terisi seperti gambar di bawah ini, klik
tombol Save.

47 | D a s a r P e m r o g r a m a n W e b
 Gambar 2. 15. Insert Column
Sekarang, Anda sudah memiliki database dengan tabel users yang
siap dipakai dan dihubungkan dengan website Anda.

Gambar 2. 16. Table

Jika tabel sudah dibuat, mari lanjutkan dengan cara buat database
MySQL langkah berikutnya!
5. Insert Table
Setelah membuat tabel baru, sekarang waktunya menginputkan
data di tabel users tersebut. Caranya mudah, kok. Ikuti langkah-
langkah berikut:
Pertama, klik menu Insert pada toolbar bagian atas. Kemudian,
isilah data sesuai dengan field id, name, email, dan Address. Jika
sudah, klik tombol Go.

48 | D a s a r P e m r o g r a m a n W e b
 Gambar 2. 17. Insert Field
Anda bisa kembali ke tabel users untuk mengecek apakah input
data sudah berhasil. Kurang lebih tampilannya akan seperti ini.

Gambar 2. 18. tampilan table

49 | D a s a r P e m r o g r a m a n W e b
LATIHAN
1. Buatlah database dengan nama database “DB_Perpustakaan”
2. Table dengan ketentuan sebagai berikut;
a. Table Petugas (tbl_Petugas)
No Kolom Tipe Keterangan
1 id_petugas int(11) Primary Key, Auto
Increment
2 nama_petugas varchar(50) Not Null
3 jabatan_petugas varchar(50) Not Null
4 no_telp_petugas char(13) –
5 alamat_petugas varchar(100) –
b. Tabel Anggota
No Kolom Tipe Keterangan
1 id_anggota int(11) Primary Key, Auto Increment
2 kode_anggota char(9) Unik, Not Null
3 nama_anggota varchar(100) Not Null
4 jk_anggota char(1) Not Null
5 jurusan_anggota char(2) Not Null
6 no_telp_anggota char(13) –
7 alamat_anggota varchar(100) –

c. Tabel Buku
No Kolom Tipe Keterangan
1 id_buku int(11) Primary Key, Auto
Increment
2 kode_buku char(5) Unik, Not Null
3 judul_buku varchar(50) Not Null
4 penulis_buku varchar(50) Not Null
5 penerbit_buku varchar(50) –
6 tahun_penerbit char(4) –
7 stok int(11) –

d. Tabel Rak
No Kolom Tipe Keterangan
1 id_rak int(11) Primary Key, Auto
Increment
2 nama_rak varchar(50) Not Null
3 lokasi_rak varchar(50) Not Null
4 id_buku int(11) Foreign Key

e. Tabel Peminjaman
No Kolom Tipe Keterangan

50 | D a s a r P e m r o g r a m a n W e b
 1 id_peminjaman int(11) Primary Key, Auto
Increment
2 tanggal_pinjam date Not Null
3 tanggal_kembali date Not Null
4 id_buku int(11) Not Null
5 id_anggota int(11) Not Null
6 id_petugas int(11) Not Null

f. Tabel Pengembalian
No Kolom Tipe Keterangan
1 id_pengembalian int(11) Primary Key, Auto Increment
2 tanggal_pengembalian date Not Null
3 denda int(11) –
4 id_buku int(11) Not Null
5 id_anggota int(11) Not Null
6 id_petugas int(11) Not Null

51 | D a s a r P e m r o g r a m a n W e b
BAB III CODEIGNITER

Apa Itu Codeigniter

Gambar 3. 1. CodeIgniter
CodeIgniter adalah sebuah framework PHP ringan yang bisa digunakan
secara gratis dan bersifat open-source. Framework PHP ini cukup efektif
untuk mengembangkan website atau aplikasi dengan mudah.
Sebagai sebuah framework, CodeIgniter memiliki kelebihan dalam hal
library dan package yang cukup lengkap. Artinya, Anda akan dimudahkan
ketika merancang sebuah website. Tak perlu coding semuanya dari awal,
cukup menggunakan library yang disediakan.
Selain itu, karena bersifat open source, Anda bisa mengembangkan
framework ini sesuai dengan kebutuhan. Hal ini juga yang membuat
semakin banyak developer yang menggunakan CodeIgniter.
Kelebihan CodeIgniter
Berikut adalah alasan mengapa belajar CodeIgniter cukup penting untuk
dapat mengembangkan website dengan baik:

52 | D a s a r P e m r o g r a m a n W e b
1. Mudah Dipelajari
CodeIgniter adalah framework yang cukup mudah dipelajari, bahkan
untuk pemula sekalipun. Itu karena aturan penulisan pada framework ini
cukup sederhana.
Konsep coding pada CodeIgniter memungkinkan penggunanya untuk
menulis kode dengan efektif. Artinya, Anda dapat membuat sebuah kode
yang dapat digunakan berkali-kali pada website yang dibangun.
2. Konfigurasi Sederhana
Konfigurasi awal pada CodeIgniter juga sangat sederhana. Anda hanya
perlu mengubah beberapa kode untuk dapat menggunakan berbagai
library bawaan CodeIgniter. Dengan begitu, Anda akan lebih cepat
membuat website dengan pengetahuan tentang CodeIgniter.
3. Ringan
CodeIgniter adalah sebuah framework PHP yang ringan dengan ukuran
file hanya 900KB. Tentunya, hal ini akan memudahkan Anda ketika
mendownload dan menggunakannya untuk membangun website.
4. Arsitektur Rapi
Aturan kode pada CodeIgniter sangat rapi dan terstruktur. Itu karena
CodeIgniter menggunakan konsep MVC (Model View Controller) untuk
arsitekturnya. Berikut penjelasan dari MVC:
• Model: Bagian yang bertanggung jawab untuk mengelola database.
• View: Bagian yang bertugas untuk menangani tampilan website
untuk pengguna.
• Controller: Bagian yang bertugas untuk mengatur alur proses pada
website. Bagian ini yang menghubungkan antara View dan Model.
Dengan menggunakan MVC, kode yang dibuat akan lebih mudah dibaca.
Selain itu, website juga lebih mudah untuk dikembangkan. Itu karena
setiap bagian kode akan dipisah sesuai dengan tugasnya.

53 | D a s a r P e m r o g r a m a n W e b
5. Mudah Diintegrasikan
CodeIgniter mudah diintegrasikan dengan framework atau library lain.
Bahkan, Anda tak perlu melakukan konfigurasi rumit untuk melakukannya.
Hal ini dimungkinkan berkat adanya folder untuk menyimpan library.
Apa keuntungannya? Ketika membuat website dengan CodeIgniter,
pengelolaan library lebih mudah untuk pengembangan website dan
kinerjanya pun bisa ditingkatkan. Salah satunya, dengan menghapus
library yang sudah tidak dipakai.
6. Migrasi Database Mudah
CodeIgniter dikenal sebagai framework yang membuat migrasi database
menjadi mudah. Jadi ketika menguasai framework ini, Anda bisa
melakukan pekerjaan dengan lebih cepat. Katakanlah Anda
menggunakan MySQL sebagai database dan ingin berpindah ke
PostgreSQL, hanya dengan mengatur beberapa kode saja, migrasi sudah
bisa dilakukan.
7. Keamanan yang Baik
Anda tentu tidak mau kan membangun website yang lemah
keamanannya? Nah, dengan CodeIgniter, Anda tak perlu khawatir lagi. Itu
karena CodeIgniter memiliki fitur enkripsi untuk melindungi data-data
penting. Meskipun Anda perlu melakukan perlindungan keamanan lain,
dengan enkripsi setidaknya data penting tidak dapat dibaca oleh hacker.

Cara Kerja Codeigniter

Cara kerja CodeIgniter cukup sederhana seperti yang ditampilkan di
gambar berikut ketika pengunjung mengakses website melalui browser:

54 | D a s a r P e m r o g r a m a n W e b
 Gambar 3. 2. Cara Kerja Codeigniter

1. Setiap ada request pada website, maka akan diarahkan ke

halaman index.php.
2. Routing akan menentukan alur request dari pengguna. Jika
halaman yang diminta ada pada caching, maka routing akan
melakukan langkah 3.
3. Jika routing mengarahkan ke caching, maka halaman yang
ditampilkan adalah halaman yang telah disimpan ke dalam cache
sebelumnya.
4. Jika routing mengarahkan ke security, maka seluruh data dari
pengguna akan difilter untuk meningkatkan keamanan sebelum
diarahkan ke controller.
5. Controller akan memanggil model, library, helper, dan tools lainnya
yang diperlukan bagi halaman website yang diminta.
6. View akan ditampilkan sesuai dengan permintaan pengguna.
Dengan begitu, pengguna dapat melihat halaman website yang
sesuai dengan yang diinginkan.
7. Halaman website akan disimpan ke dalam cache. Tujuannya untuk
meningkatkan performa website karena request pengguna tidak
perlu diarahkan ke controller lagi.

Struktur Folder Codeigniter

CodeIgniter adalah framework PHP yang dikenal dengan banyak folder
dengan fungsi yang berbeda. Oleh karena itu, penting untuk mengetahui
fungsi setiap folder agar Anda lebih mudah dalam mengembangkan
website sesuai kebutuhan.

55 | D a s a r P e m r o g r a m a n W e b
 Gambar 3. 3. Struktur Folder Codeigniter

CodeIgniter memiliki tiga folder utama,

yaitu application, system, user_guide. Berikut penjelasannya:

1. Application

Folder application merupakan folder yang paling sering digunakan dalam

pengembangan website. Folder ini berfungsi untuk menambahkan kode,

56 | D a s a r P e m r o g r a m a n W e b
baik untuk front end atau back end. Apa saja yang ada di folder
Application?

• Cache: Folder yang berisi berisi halaman website yang telah

disimpan ke dalam cache.
• Config: Folder yang berisi seluruh konfigurasi website, mulai dari
database, url, dan pengaturan library.
• Controllers: Folder tempat menyimpan coding yang mengatur
proses pada website.
• Core: Folder yagn menyimpan konfigurasi tambahan pada
website.
• Helpers: Folder sebagai pusat fungsi atau perintah tambahan
pada website Anda.
• Hooks: Folder untuk melakukan perubahan pada sistem sehingga
modifikasi framework bisa lebih mudah.
• Language: Folder pengaturan bahasa pada CodeIgniter.
• Libraries: Folder untuk menyimpan semua library CodeIgniter.
• Logs: Folder untuk menampilkan log (catatan) perubahan coding
yang dilakukan.
• Models: Folder sebagai media berkomunikasi dengan database
yang berisi file tentang perintah manipulasi database.
• Third_Party: Folder untuk menyimpan berbagai plugin yang
diperlukan untuk pengembangan website.
• Views: Folder untuk membangun tampilan website yang berisi file-
file HTML yang dibuat oleh front end developer.

2. System

System adalah folder utama untuk membangun framework CodeIgniter.

Jangan lakukan perubahan kode pada folder ini karena akan merubah
fungsi pada CodeIgniter.

• Core: Folder utama sebagai tempat semua proses pada

CodeIgniter.
• Database: Folder yang menyimpan driver database yang telah
dikonfigurasi dan terkait dengan folder Models di
dalam Application.

57 | D a s a r P e m r o g r a m a n W e b
 • Fonts: Folder berisi font yang digunakan untuk pengembangan
website.
• Helpers: Folder untuk membaca konfigurasi helper pada
folder Helpers di Application seperti cookies, URL, dan jenis
helper lainnya.
• Language: Folder pengaturan bahasa di CodeIgniter.
• Libraries: Folder yang berisi library yang sudah terkonfigurasi
dengan sistem CodeIgniter.

3. User_Guide

Folder user guide adalah folder tambahan yang berisi dokumentasi resmi
CodeIgniter. Untuk melihat dokumentasi CodeIgniter, cukup tambahkan
link /user_guide/ pada URL website Anda.

Struktur URL
CodeIgniter memiliki struktur URL yang cukup rapi, yaitu [base-
url]/index.php/[class]/[function]

Sebagai contoh jika Anda memiliki URL localhost/belajar-

codeigniter/index.php/user/add, maka penjelasannya sebagai berikut:

• Base-url: localhost/belajar-codeigniter/
• Class: user
• Function: add

Bahkan, Anda bisa juga melakukan konfigurasi tambahan untuk

membuat URL yang lebih sederhana. Kami akan menjelaskannya di
bagian pengaturan CodeIgniter.

Cara Instal Codeigniter

Setelah belajar berbagai informasi dasar tentang CodeIgniter, sekarang
saatnya Anda mencoba melakukan instalasi framework PHP tersebut.
Ada dua cara untuk menginstall CodeIgniter: melakukan instalasi
Codeingniter di hosting dan instalasi secara lokal pada komputer atau
laptop.

58 | D a s a r P e m r o g r a m a n W e b
Pada panduan kali ini, kita akan mencoba menginstall di lokal. Jadi Anda
perlu mendownload Xampp sebagai web server yang akan digunakan.
Apa saja langkah instalasi CodeIgniter?
Langkah 1: Download CodeIgniter
Pastikan instalasi web server sudah berhasil dengan baik. Lalu, download
CodeIgniter melalui halaman resminya.
Langkah 2: Ekstrak CodeIgniter
Setelah download berhasil, lakukan ekstrak CodeIgniter. Namun,
sebelum itu, Anda perlu memindahkan file CodeIgniter ke folder web
server agar dapat terbaca. Caranya, Anda bisa memindahkan file
CodeIgniter ke dalam folder htdocs.

Gambar 3. 4. Hasil Download Codeigniter

Kemudian, ekstrak file CodeIgniter dan ubah nama foldernya agar lebih
mudah diingat. Sebagai contoh, belajar-codeigniter.

Gambar 3. 5. Ekstraksi Codeigniter

59 | D a s a r P e m r o g r a m a n W e b
Selanjutnya, Anda bisa membuka localhost/belajar-codeigniter pada
web browser. Jika berhasil, Anda akan melihat halaman seperti di
bawah:

Gambar 3. 6. Tampilan awal codeigniter

Proses instalasi CodeIgniter sudah berhasil. Selanjutnya, mari mencoba

membuat website dengan framework ini.

60 | D a s a r P e m r o g r a m a n W e b
BAB IV Membuat website dengan Codeigniter

Langkah awal dalam membuat website kita perlu melakukan konfigurasi

terlebih dahulu Adapun tahapan konfigurasi adalah sebagai berikut;
Membuat Custom Tampilan Awal
Untuk membuat custom tampilan awal website, Anda bisa membuat file
bernama Homepage.php di dalam folder application/controllers.
Pastikan Anda menggunakan huruf kapital di awal file supaya file dapat
terbaca oleh CodeIgniter.

File ini nantinya akan menjadi controller untuk halaman awal Anda.
Setelah membuat file tersebut, pastikan strukturnya seperti ini:

Setelah berhasil membuat file, Anda bisa menambahkan kode:

<?php class Homepage extends CI_Controller { public function index() { $this->load-
>view(‘home’); } }

61 | D a s a r P e m r o g r a m a n W e b
 <?php
class Homepage extends CI_Controler {
public function index() {
$this->load->view(‘home’);
}
}
?>
Penjelasan kode di atas adalah sebagai berikut:

Langkah pertama adalah membuat class Homepage yang diatur oleh

extends supaya dapat menggunakan fitur Codeigniter yang
menghubungkan anatara model dan view.

Kemudian membuat sebuah function yang di beri nama index didalam

kelas Homepage. Index adalah tampilan yang akan tampil pada saat
sebuah class dipanggil. Dengan mengggunakan index class yang di
panggil tidak harus menyertakan nama function.

Selanjutnya di dalam function index memanggil data yang ada didalam

folder view yang Bernama home (home.php) mengggunakan perintah
$this->load->view().

Selanjutnya, Anda bisa membuat view untuk mengatur tampilan. Anda

bisa membuat file bernama home.php pada folder application/views.
Berikut contohnya:

62 | D a s a r P e m r o g r a m a n W e b
 Gambar 3. 7. Membuat File Home

Kemudian masukan kode berikut kedalam file home.php;

<!DOCTYPE html>
<html>
<head>
<title>Halaman Awal dengan CodeIgniter</title>
</head>
<body>
<h1>Selamat datang. Ini Halaman Awal</h1>

63 | D a s a r P e m r o g r a m a n W e b
Jangan lupa untuk untuk membuka file routes.php yang ada di dalam
folder application/config, Setelah itu, cari kode $route[‘default_controller’]
dan ganti isinya menjadi homepage. Dengan begitu, kodenya akan
menjadi seperti ini:

$route['default_controller'] = 'homepage';

Nah, Anda bisa coba akses link website Anda dan pastikan tampilannya
menjadi seperti ini.

Gambar 4. 1 Halaman Awal

Menghapus Index
Untuk membuat struktur URL website menjadi lebih sederhana, Anda
perlu menghapus index.php. Jadi, URL Anda berubah dari
localhost/belajar-codeigniter/index.php/class/function menjadi:
localhost/belajar-codeigniter/class/function
Langkah yang harus Anda lakukan adalah membuat file bernama
.htaccess pada root folder CodeIgniter.
• Membuat htaccess di CodeIgniter
• Setelah itu, tambahkan kode di bawah pada file .htaccess yang
baru saja Anda buat.

64 | D a s a r P e m r o g r a m a n W e b
 RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]

Dengan kode tersebut, Anda tidak perlu menggunakan index.php lagi

ketika akan mengakses link website. Akses localhost/belajar-
codeigniter/Homepage untuk mencobanya.
Koneksi ke database
Sebagai informasi database yang kita gunakan adalah database
perpustakaan yang sudaah dibuat pada bab sebelumnya ya!

Dari database yang kita gunakan maka cara untu menghubungkanya ke

codeigniter adalah sebagai berikut

65 | D a s a r P e m r o g r a m a n W e b
Anda bisa membuka file pada application/config/autoload.php. Setelah
itu, Anda cari coding $autoload[‘libraries’] dan isi dengan database.
Dengan begitu, hasilnya akan seperti ini:

$db['default'] = array(
'dsn' => '',
'hostname' => 'localhost',
'username' => 'root',
'password' => '',
'database' => 'belajar-codeigniter',
'dbdriver' => 'mysqli',
'dbprefix' => '',
'pconnect' => FALSE,
'db_debug' => (ENVIRONMENT !== 'production'),
'cache_on' => FALSE,
'cachedir' => '',
'char_set' => 'utf8',
'dbcollat' => 'utf8_general_ci',
'swap_pre' => '',
'encrypt' => FALSE,
'compress' => FALSE,
'stricton' => FALSE,
'failover' => array(),
'save_queries' => TRUE
);

66 | D a s a r P e m r o g r a m a n W e b
$autoload['libraries'] = array('database');

Setelah memanggil library database, Anda perlu mencari file yang ada di
dalam folder application/config/database.php. Setelah itu, Anda bisa
cari kode di bawah ini. Lalu, isikan username, password, dan database
Anda.

Setelah itu, Anda bisa mencoba mengakses localhost/belajar-

codeigniter/ dan pastikan tidak muncul error.

Read
Langkah pertama dalam membuat sebuah create adalah membuat
sebuah controller terlebih dahulu, silahkan membuat file baru pada
application/controller dengan nama Petugas.php

Gambar 4. 2. Membuat Controller

Jika sudah selesai maka Langkah selanjutnya adalah masukan kode
berikut kedalam file petugas.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Petugas extends CI_Controller {

public function __construct()

{
parent::__construct();

67 | D a s a r P e m r o g r a m a n W e b
 $this->load->model('Petugas_model', 'model');
$this->table = 'petugas';
}

public function index()

{
$data['petugas'] = $this->model->get_all_data($this->table);
$this->load->view('Read_Petugas',$data);
}
}

Penjelasan : pertama membuat sebuah class petugas yang nantinya akan

di extends oleh codeigniter, kemudian selanjutnya membuat sebuah
function index yang berfungsi sebagai function yang akan tampil pada saat
class dipanggil.
Langkah selanjutnya adalah membuat sebuah model yang berfungsi
untuk melakukan perintah query, langkahnya adalah silahkan buat file
baru pada models/ dengan nama file Petugas_model.php

Gambar 4. 3. Membuat Model

Jika sudah selesai membuat file seperti gambar diatas maka Langkah
selanjutnya adalah mengetikan kode program untuk model, kode
program adalah sebagai berikut;
<?php
class Petugas_model extends CI_Model

68 | D a s a r P e m r o g r a m a n W e b
{
public function insert_data($table, $data)
{
return $this->db->insert($table, $data);
}

public function get_all_data($table)

{
return $this->db->get($table);
}
}

Kemudian Langkah selanjutnya adalah membuat tampilan view, silahkan

buat file baru pada Views/ dengan judul Read_Petugas.php

Gambar 4. 4. Membuat View

Jika sudah selesai membuat file Read_Petugas.php maka Langkah
selanjutnya kita membuat code programnya seperti dibawah ini;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1">

69 | D a s a r P e m r o g r a m a n W e b
 <tr>
<th>Id Petugas</th>
<th>Nama Petugas</th>
<th>Jabatan Petugas</th>
<th>Nomor telepon Petugas</th>
<th>Alamat Petugas</th>
</tr>
<?php
foreach ($petugas->result() as $i => $petugas) {
?>
<tr>
<td><?= $petugas->id_petugas; ?></td>
<td><?= $petugas->nama_petugas; ?></td>
<td><?= $petugas->jabatan_petugas; ?></td>
<td><?= $petugas->no_telp_petugas; ?></td>
<td><?= $petugas->alamat_petugas; ?></td>
</tr>
<?php }?>
</body>
</html>

Jika sudah selesai maka Langkah selanjutnya adalah silahkan jalankan

kode program dengan cara mengakses localhost/perpustakaan

Gambar 4. 5. Hasil Read

70 | D a s a r P e m r o g r a m a n W e b
Tugas
Silahkan kalian buat juga perintah read untuk table rak, anggota, buku,
peminjaman, pengembalian.

Input
Langkah pertama dalam membuat input adalah membuat/ menambahkan
kode program (function) kedalam class petugas/controller petugas yang
nantinya akan di tambahkan kode sebagai berikut;
<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Petugas extends CI_Controller {

public function __construct()

{
parent::__construct();
$this->load->model('Petugas_model', 'model');
$this->table = 'petugas';
}

public function index()

{
$data['petugas'] = $this->model->get_all_data($this->table);
$this->load->view('Read_Petugas',$data);
}

public function input()

{
$this->load->view('Input_Petugas');
}

public function save()

{
if(isset($_POST['kirim']))
{
$nama = $this->input->post('nama');
$jabatan = $this->input->post('jabatan');
$no_hp = $this->input->post('no_hp');
$alamat = $this->input->post('alamat');

$data = [

71 | D a s a r P e m r o g r a m a n W e b
 'nama_petugas'=>$nama,
'jabatan_petugas'=>$jabatan,
'no_telp_petugas'=>$no_hp,
'alamat_petugas'=>$alamat,
];
$this->model->insert_data($this->table, $data);

redirect('petugas/');
}
}

Kode yang di tambahkan adalah kode yang berwarna hijau kode yang
berwarna abu-abu adalah kode awal.
Jika sudah selesai maka Langkah selanjutnya adalah membuat model,
namun jika di cek pada Petugas_model.php disana sudah ada function
yang berfungsi untuk menginputkan data ke table didalam database.
public function insert_data($table, $data)
{
return $this->db->insert($table, $data);
}

Langkah selanjutnya adalah membuat tampilan pada folder View, pada

folder view silahkan tambahkan file baru yang berjudul Input_Petugas.php
jika sudah selesai maka masukan / ketikkan kode berikut;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>Form Tambah Data User</h2>
<form method="post" action="<?= base_url('index.php/petugas/save'); ?>">
<table border="1">
<tr>
<td>Nama Petugas</td>
<td><input type="text" name="nama"></td>

72 | D a s a r P e m r o g r a m a n W e b
 </tr>
<tr>
<td>Jabatan Petugas</td>
<td><input type="text" name="jabatan"></td>
</tr>
<tr>
<td>Nomor Telpon Petugas</td>
<td><input type="text" name="no_hp"></td>
</tr>
<tr>
<td>Alamat Petugas</td>
<td><textarea type="text" name="alamat"> </textarea></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="kirim" value="Masukkan Data"></td>
</tr>
</table>
</form>
</body>
</html>

Penjelasan; kode html untuk lebih cepat bisa menggunakan kode ! (tanda
seru), silahkan ketikkan kode ! (tanda seru) pada visual studio code
kemudian klik enter, maka akan tampil kode default html. Kemudian
selanutnya ada kode <form action ……> </form> yang merupakan fungsi
untuk mengarahkan kemana data yang akan di inputkan di kirimkan,
kemudian agar tampilan terlihat lebih rapi maka form inputnya dimasukan
kedalam susunan table
Jika sudah selesai maka coba jalankan, coba inputkan isi kemudian klik
button “Masukan Data”, kemudian cek datanya sudah masuk ke tampilan
read atau belum, jika belum maka coba cek Kembali kode yang sudah di
ketikkan!

73 | D a s a r P e m r o g r a m a n W e b
 Gambar 4. 6. Form Input

Gambar 4. 7. Hasil Input

Pada tampilan read diatas sudah dilihat bahwa data yang di inputkan
sudah bertambah dari awalnya 1 data dan setelah di inputkan data yang
ada sudah bertambah menjadi 2 data. Sampai sini kita sudah berhasil
membuat read dan input, kita lanjutkan ke kode berikutnya!
Tugas
Silahkan kalian buat juga perintah Input untuk table rak, anggota, buku,
peminjaman, pengembalian.

Update
Langkah selanjutnya kita membuat perintah update atau rubah data, kode
program yang kita buat hampir sama dengan gabungan dari perintah input
dan view kemudian di tambahkan perintah update/rubah.
Langah pertama yang harus kita form untuk mengelink/mengarahkan dari
view ke controller form update dengan membawa sebuah variable

74 | D a s a r P e m r o g r a m a n W e b
misalnya id. Silahkan Buka file View/Read_Petugas.php kemudian
ketikkan kode program yang berwarna hijau!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1">
<tr>
<th>Id Petugas</th>
<th>Nama Petugas</th>
<th>Jabatan Petugas</th>
<th>Nomor telepon Petugas</th>
<th>Alamat Petugas</th>
<th> Action</th>
</tr>
<?php
foreach ($petugas->result() as $i => $petugas) {
?>
<tr>
<td><?= $petugas->id_petugas; ?></td>
<td><?= $petugas->nama_petugas; ?></td>
<td><?= $petugas->jabatan_petugas; ?></td>
<td><?= $petugas->no_telp_petugas; ?></td>
<td><?= $petugas->alamat_petugas; ?></td>
<td><a href="<?= base_url('index.php/Petugas/edit/'.$petugas->id_petugas); ?>">Ubah</a></td>

</tr>
<?php }?>
</body>
</html>

Jika sudah selesai maka coba cek tampilan sistem dengan mengakses
http://localhost/perpustakaan/index.php/petugas maka akan tampil tulisan
edit dan hapus yang sudah terlink ke controller petugas yang nantinya
akan memanggil function edit untuk mengedit/mengubah data;

75 | D a s a r P e m r o g r a m a n W e b
 Gambar 4. 8. Tampilan halaman petugas
Jika sudah selesai maka Langkah selanjutnya adalah kita membuat
controller yang akan memanggil form input dengan memanggil data
petugas sesuai dengan variable id yang dipanggil, silahkan masuk ke
Controller/Petugas.php kemudian tambahkan sebuah function baru
pada kode tersebut, Adapun kode yang di tambah adalah sebagai berikut;
public function edit($id)

{
$data['petugas'] = $this->model->get_data($this->table, ['id_petugas' => $id])->row();
$this->load->view('Update_Petugas', $data);
}

Kemudian langkah selanjutnya adalah buat function baru didalam

models/petugas_model.php function yang dibuat adalah function get
data yang merupakan fungsi untuk mengambil data yang ada di databse
sesuai dengan variable yang di ambil. Berikut kodenya;
public function get_data($table, $data)
{
return $this->db->get_where($table, $data);
}

Langkah selanjutnya adalah membuat form edit, silahkan buat file baru
di View/Update_Petugas.php kemudian ketikkan kode berikut ini;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

76 | D a s a r P e m r o g r a m a n W e b
</head>
<body>
<h2>Form Tambah Data User</h2>
<form method="post" action="<?= base_url('index.php/petugas/update'); ?>">
<input type="hidden" name="id" value="<?= $petugas->id_petugas; ?>">

<table border="1">
<tr>
<td>Nama Petugas</td>
<td><input type="text" name="nama" value="<?= $petugas->nama_petugas; ?>"></td>
</tr>
<tr>
<td>Jabatan Petugas</td>
<td><input type="text" name="jabatan" value="<?= $petugas->jabatan_petugas; ?>"></td>
</tr>
<tr>
<td>Nomor Telpon Petugas</td>
<td><input type="text" name="no_hp" value="<?= $petugas->no_telp_petugas; ?>"></td>
</tr>
<tr>
<td>Alamat Petugas</td>
<td><textarea type="text" name="alamat"><?= $petugas->alamat_petugas; ?></textarea></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="ubah" value="Ubah Data"></td>
</tr>
</table>
</form>
</body>
</html>

Jika sudah selesai maka coba jalankan, pertama masuk ke halaman

petugas http://localhost/perpustakaan/index.php/petugas/ kemudian klik
ubah, maka akan tampil halaman update petugas;

77 | D a s a r P e m r o g r a m a n W e b
 Gambar 4. 9. Form halaman petugas
Kemudian Langkah selanjutnya adalah ubah data yang ingin di ubah
kemudian klik ubah data.
Tugas
Silahkan kalian buat juga perintah Update untuk table rak, anggota,
buku, peminjaman, pengembalian.

Delete
Terakhir adalah kita membuat kode program delete data, langkkah
pertama adalah buat atau ubah atau tambahkan kode berikut kedalam
Read_Petugas.php;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1">
<tr>
<th>Id Petugas</th>
<th>Nama Petugas</th>

78 | D a s a r P e m r o g r a m a n W e b
 <th>Jabatan Petugas</th>
<th>Nomor telepon Petugas</th>
<th>Alamat Petugas</th>
<th colspan="2">Action</th>
</tr>
<?php
foreach ($petugas->result() as $i => $petugas) {
?>
<tr>
<td><?= $petugas->id_petugas; ?></td>
<td><?= $petugas->nama_petugas; ?></td>
<td><?= $petugas->jabatan_petugas; ?></td>
<td><?= $petugas->no_telp_petugas; ?></td>
<td><?= $petugas->alamat_petugas; ?></td>
<td><a href="<?= base_url('index.php/Petugas/edit/'.$petugas->id_petugas); ?>">Ubah</a></td>
<td><a href="<?= base_url('index.php/Petugas/delete/'.$petugas->id_petugas); ?>">Hapus</a></td>

</tr>
<?php }?>
</body>
</html>

Jika sudah selesai maka akan tampil hapus pada file read petugas
seperti pada gambar dibawah ini;

Gambar 4. 10. Tampilan read petugas

Langkah selanjutnya adalah menambahkan kode berikut ini kedalam file
Models/Model_petugas.php;
public function delete_data($table, $where)
{
return $this->db->delete($table, $where);
}

79 | D a s a r P e m r o g r a m a n W e b
Kemudian Langkah selanjutnya silahkan masukan kode berikut kedalam
file Controller/Petugas.php;
public function delete($id)
{
$delete = $this->model->delete_data($this->table, [id_petugas=>$id]);
if($delete)
redirect('petugas');
}

Jika sudah selesai coba kalian masuk kedalam halaman petugas

http://localhost/perpustakaan/index.php/petugas kemudian klik hapus
pada salah satu data, jika data terhapus / hilang maka kode
hapus/delete sudah berhasil.
Tugas
Silahkan kalian buat juga perintah delete untuk table rak, anggota, buku,
peminjaman, pengembalian.

80 | D a s a r P e m r o g r a m a n W e b
Daftar Pustaka

Abdulloh, Rohi. 2018. 7 in 1 Pemrograman Web untuk Pemula. Jakarta:

PT Elex Media Komputindo.
Riduan Syahri, Debi Gusmaliza, Risnaini Masdalipa. 2021. Sistem Pakar
Diagnosis Penyakit Ayam Broiler Berbasis Web. Jurnal
Pengembangan Sistem Informasi dan Informatika. Aptikom Wilayah
Sumsel.
Febriansyah, Siti Muntari. 2021. Aplikasi Pencarian Dan Pemesanan
Hotel di Kota Pagar Alam Berbasis Web. Jurnal Informatika dan
Teknologi. Universitas Hamzan Wadi
Ferry Putrawansyah. 2017. Aplikasi Computer Assisted Test (CAT) Pada
Penerimaan Mahasiswa Baru Sekolah Tinggi Teknologi Pagar Alam
(STTP). Jurnal Resti (Rekayasa Sistem dan Teknologi Informasi).
http://jurnal.iaii.or.id/index.php/RESTI/article/view/4
Nadiya Citra Dewi, Ferry Putrawansyah, Desi Puspita. 2021. mplementasi
Algoritma FP-Growth Pada E-Commerce Kopi Pagar Alam
Menggunakan Framework Codeigniter. Indonesian Jurnal Of
Computer Science.
http://3.8.6.95/ijcs/index.php/ijcs/article/view/3012/11

81 | D a s a r P e m r o g r a m a n W e b