MODUL WEB PROGRAMMING II

Oleh:

Fabriyan Fandi Dwi Imaniawan

 MODUL WEB PROGRAMMING 2 – FABRIYAN FANDI DWI IMANIAWAN

PERSIAPAN
1. Install XAMPP
2. Install Text Editor
3. Install Codeigniter

Install XAMPP
XAMPP tersedia secara gratis di internet. Ada beberapa pilihan versi XAMPP dari
yang lama hingga yang terbaru di situs resminya. Agar tidak bingung silahkan
ikuti langkah-langkah mendownload XAMPP di bawah ini:
1. Buka situs https://www.apachefriends.org/download.html
2. Pilih sesuai dengan sistem operasi yang Kanca IT gunakan. Di situs tersebut
tersedia 3 sistem operasi yang mendukung XAMPP diantaranya windows,
linux dan OS X
3. Dalam hal ini komputer kita menggunakan sistem operasi Windows, maka
akan dipilih versi XAMPP for windows versi 7.4.10 atau yang paling terbaru.
Namun, jika ingin download XAMPP versi yang lama maka bisa klik link “More
Downloads“, maka akan muncul daftar XAMPP versi sebelumnya sesuai
dengan sistem operasi yang dipilih.
 MODUL WEB PROGRAMMING 2 – FABRIYAN FANDI DWI IMANIAWAN

4. Selanjutnya klik tombol “Download (64bit)“, maka proses download akan

berjalan. Ukuran dari file XAMPP sendiri sekitar 156Mb. Tunggu hingga proses
download selesai.
5. Jika proses download selesai, silahkan menuju lokasi file hasil download
installer XAMPP. Biasanya file akan masuk ke dalam folder Download ->
Program, jika menggunakan Internet Download Manager (IDM). Proses
instalasi XAMPP tidak membutuhkan settingan khusus.
6. Double klik atau klik dua kali pada file installer XAMPP yang telah didownload

7. Jika muncul peringatan seperti di bawah ini, silahkan klik OK saja.

8. Selanjutnya klik Next

 MODUL WEB PROGRAMMING 2 – FABRIYAN FANDI DWI IMANIAWAN

9. Pastikan terceklist semua, lalu Next

10. Pilih folder instalasi XAMPP. Saya sarankan pilih default saja yaitu di
C:/xampp, namun kalau Kanca IT ingin menyimpannya di partisi lain juga
tidak masalah. Lalu Klik Next
 MODUL WEB PROGRAMMING 2 – FABRIYAN FANDI DWI IMANIAWAN

11. Pilih bahasa English saja, lalu Klik Next

12. Hilangkan ceklis pada Learn More About Bitnami for XAMPP, lalu Klik Next
 MODUL WEB PROGRAMMING 2 – FABRIYAN FANDI DWI IMANIAWAN

13. Klik Next lagi

14. Tunggu hingga proses install XAMPP selesai

 MODUL WEB PROGRAMMING 2 – FABRIYAN FANDI DWI IMANIAWAN

15. Lalu klik Finish, maka nanti XAMPP control panel akan dijalankan secara
otomatis

16. Jika berhasil akan muncul tampilan seperti ini.

 MODUL WEB PROGRAMMING 2 – FABRIYAN FANDI DWI IMANIAWAN

Install Text Editor Visual Studio Code

Untuk membuat sebuah website, dibutuhkan sebuah teks editor. Salah satunya
Visual Studio Code (VSCode). Aplikasi VSCode dapat didownload secara gratis
di situs resminya. Cara instal VSCode silahkan ikuti tutorial berikut:
1. Buka situs https://code.visualstudio.com/
 MODUL WEB PROGRAMMING 2 – FABRIYAN FANDI DWI IMANIAWAN

2. Klik tombol “Download for Windows” untuk download otomatis VSCode. Jika

ingin memilih installer untuk sistem operasi lain baik 64 bit atau 32 bit

silahkan klik di link “Other Platform” atau “Insiders Edition”

3. Tunggu hingga proses download selesai. Ukuran file installer VSCode

kurang lebih 61MB.

4. Jika sudah selesai silahkan double klik pada file installer VSCode untuk

memulai instalasi.

5. Ceklis pada “I accept the agreement”, lalu klik Next

6. Lalu pilih folder instalasi dan klik Next

 MODUL WEB PROGRAMMING 2 – FABRIYAN FANDI DWI IMANIAWAN

7. Pilih secara default untuk menambahkan aplikasi VSCode di start menu.

Lalu Klik Next

 MODUL WEB PROGRAMMING 2 – FABRIYAN FANDI DWI IMANIAWAN

8. Ceklist pada “create a desktop icon” agar nanti aplikasi VSCode juga

muncul di desktop icon. Lalu klik Next

 MODUL WEB PROGRAMMING 2 – FABRIYAN FANDI DWI IMANIAWAN

9. Kemudian klik Install. Tunggu hingga proses instalasi selesai

 MODUL WEB PROGRAMMING 2 – FABRIYAN FANDI DWI IMANIAWAN

10. Klik Finish, maka aplikasi VSCode otomatis terbuka.

 MODUL WEB PROGRAMMING 2 – FABRIYAN FANDI DWI IMANIAWAN

11. Tambahkan extension Visual Studio Code berikut:

• Live Server = Untuk menampilkan di browser secara live menggunakan

server bawaan Visual Studio Code. Cara penggunannya cukup klik

kanan lalu pilih Open With Live Server

• Auto Rename Tag = Untuk mengotomatiskan perubahan nama tag.

Tidak perlu merubah semua tag. Cukup tag pembuka diubah, maka tag

penutup akan ikut berubah

• One Dark Pro = Tema yang digunakan lebih daari 7 juta penguna Visual

Studio Code di dunia. Keunggulan dari tema ini adalah warnanya enak

di pandang mata walaupun berlama-lama.

• PHP IntelliSense = Menampilkan autocomplete untuk perintah PHP

secara lengkap
 MODUL WEB PROGRAMMING 2 – FABRIYAN FANDI DWI IMANIAWAN

Install Codeigniter
Codeigniter adalah Framework PHP yang dapat didownload secara gratis di
situs codeiginiter.com. Framework Codeigniter saat ini sudah sampai di versi
4. Namun dalam modul ini, kita akan menggunakan Codeigniter versi 3 terlebih
dahulu. Bagaimana cara install codeigniter di komputer kita?

1. Buka situs codeigniter.com

2. Klik menu Download lalu klik tombol Download untuk Codeigniter 3

 MODUL WEB PROGRAMMING 2 – FABRIYAN FANDI DWI IMANIAWAN

3. Tunggu sampai file codeigniter 3 berhasil di download . Ukuran file sekitar

2,6 MB.
4. Jika sudah selesai download, pindahkan file tersebut (bcit-ci-CodeIgniter-
3.1.11-0-gb73eb19.zip) di dalam folder htdocs.

5. Ekstrak file tersebut (bisa gunakan WinRAR, jika belum ada silahkan
download di https://www.win-rar.com/ ). Caranya, klik kanan pada file lalu
pilih “Extract to….”

6. Jika berhasil, maka akan muncul folder baru di folder htdocs

 MODUL WEB PROGRAMMING 2 – FABRIYAN FANDI DWI IMANIAWAN

7. Buka folder tersebut, ubahlah nama folder di dalam folder tsb menjadi
belajar3b

8. Lalu pindahkan folder belajar3b ke dalam folder htdocs

 MODUL WEB PROGRAMMING 2 – FABRIYAN FANDI DWI IMANIAWAN

9. Hapus folder yang sudah tidak terpakai di htdocs

10. Jika sudah, jalankan XAMPP untuk modul Apache dan MySQL nya.
 MODUL WEB PROGRAMMING 2 – FABRIYAN FANDI DWI IMANIAWAN

11. Lalu buka browser (Dalam hal ini kita menggunakan Google Chrome) dan
ketikkan localhost/belajar3b, maka halaman default dari framework
codeigniter akan tampil: