LAPORAN PRAKTIKUM 1

PENGEMBANGAN APLIKASI WEB

Disusun oleh:
Wiwid Widiastuti
18330068

PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS TEKNIK
UNIVERSITAS JANABADRA
YOGYAKARTA
2019
 DAFTAR ISI

DAFTAR ISI .................................................................................................................... II

PENDAHULUAN .............................................................................................................1

1. PERSIAPAN........................................................................................................................ 1
a. Perangkat Keras ............................................................................................................. 1
b. Perangkat Lunak ............................................................................................................ 1

2. DASAR TEORI ................................................................................................................... 1

3. TUJUAN PRAKTIKUM........................................................................................................ 4

PELAKSANAAN PRAKTIKUM ....................................................................................5

TUGAS ............................................................................................................................ 12
PENUTUP ...................................................................................................................... 13

1. KESIMPULAN ..................................................................................................................13

DAFTAR PUSTAKA .................................................................................................... 14

ii
 PENDAHULUAN

1. Persiapan
a. Perangkat Keras

Komputer atau Laptop

b. Perangkat Lunak

Sublime Text

2. Dasar Teori
a. Pengenalan Framework

Pengertian Framework secara umum adalah sebuah susunan atau

rangkaian kerja yang tetap dan dibuat sedemikian rupa yang kemudian
dapat digunakan kembali dalam sebuah aktifitas kerja yang lain tapi
tetap dalam satu area kerja dengan rangkaian kerja yang sebelumnya.
Namun untuk pengertian framework web adalah kumpulan sebuah
maupun banyak modul-modul dalam bentuk class library yang dapat
kita gunakan lagi untuk membentuk sebuah aplikasi web yang lebih
besar dengan memanfaatkan modul-modul class library tersebut.
b. Pengertian Framework Codeigniter
Framework CodeIgniter merupakan salah satu framework PHP
yang menggunakan konsep arsitektur MVC atau Model-View-Controller.
MVC adalah sebuah software yang memisahkan antara aplikasi logika
dan presentasi pada halaman web. Menariknya, skrip PHP, query
MySQL, Javascript dan CSS bisa saling terpisah. Sehingga tidak
membutuhkan resource besar untuk mengeksekusinya. Sehingga hal ini
akan menyebabkan halaman web akan mengandung kode yang sedikit
karena sudah terjadi pemisahan antara tampilan dan pemrograman.
Dalam konsep MVC kode program dapat dibagi menjadi tiga
kategori, yaitu :
1. Model merupakan struktur data. Secara spesifik class model akan
mengandung fungsi kode yang membantu dalam segala proses yang

1
 berhubungan dengan database seperti memasukkan, mengedit,
mendapatkan dan menghapus data dalam sebuah database.
2. View merupakan informasi yang disampaikan ke pengguna. Sebuah
view biasanya berupa halaman web, tetapi dalam CodeIgniter,
sebuah view juga bisa berupa sebuah fragmen halaman seperti
header dan footer. View juga bisa berupa halaman RSS atau jenis
halaman web yang lain.
3. Controller merupakan sebuah perantara antara Model dan View
dan semua sumber yang dibutuhkan untuk memproses permintaan
HTTP dan dalam membuat halaman web.
CodeIgniter adalah sebuah framework PHP yang dapat membantu
mempercepat dalam pengembangan aplikasi web berbasis PHP
dibandingkan jika menulis semua kode program dari awal. CodeIgniter
menyediakan banyak library untuk mengerjakan tugas-tugas yang
umumnya ada pada sebuah aplikasi berbasis web. Selain itu struktur
dan susunan logika dari CodeIgniter membuat aplikasi yang dibuat
menjadi semakin teratur dan rapi. Dengan demikian, programmer bisa
fokus pada fitur-fitur apa yang dibutuhkan oleh aplikasi yang dibuat
dengan membuat kode program seminimal mungkin.
Terdapat beberapa keunggulan framework CodeIgniter dalam proses
pembuatan suatu aplikasi dibandingkan dengan menggunakan PHP
biasa, diantaranya :
1. CodeIgniter adalah open source (free). CodeIgniter berlisensi
Apache/BSDStyle open source yang memperbolehkan penggunaan
dari framework ini sesuai dengan keinginan Anda.
2. CodeIgniter sangat ringan jika dijalankan pada semua platform.
Sistem utama dari CodeIgniter hanya memerlukan sedikit ruang
pada server untuk membentuk sebuah class library. Class library
tambahan hanya dipakai ketika diperlukan.
3. CodeIgniter menggunakan M-V-C. Model-View-Controller
mempermudah perbedaan antara tampilan dan program. Sehingga

2
 mempermudah programmer dalam mengembangkan web lebih
lanjut.
4. CodeIgniter menciptakan URL yang friendly. URL yang diciptakan
oleh CodeIgniter sangat rapi dan friendly untuk search engine yang
ada.
5. CodeIgniter dikemas dalam sebuah framework yang lengkap.
CodeIgniter dikemas dalam kumpulan class dalam sebuah library
yang cukup lengkap yang dapat menunjang proses pembuatan web,
seperti mengakses database, mengirim email, validasi form data,
pembuatan session, memanipulasi gambar, dan lain sebagainya.
6. Fungsi pada CodeIgniter dapat ditambahkan. Fungsi-fungsi pada
sistem CodeIgniter sangat mudah ditambahkan dengan bantuan
library dan helper.
7. CodeIgniter mempunyai dokumen (user guide) yang lengkap.
CodeIgniter mempunyai dokumentasi yang sangat rapi dan jelas.
Sehingga dengan adanya dokumentasi ini akan banyak membantu
para programmer yang ingin mempelajari CodeIgniter.

c. Struktur Folder
Berikut akan struktur folder / direktori dari framework Code Igniter.

1. Application, berisi folder dan file yang terkait dengan aplikasi yang
akan dibuat. Kita akan banyak bekerja pada direktori application ini.
2. System, berisi file-file inti framework CodeIgniter. Kita tidak akan
mengubah apapun pada direktori system ini.

3
 3. User_guide, berisi file-file dokumentasi CI yang dapat diakses
melalui browser. Index.php, file konfigurasi awal CodeIgniter.

Aplikasi yang akan Anda bangun tentunya menggunakan JavaScript,

gambar dan CSS.Anda dapat buat direktori untuk masing-masing
sumberdaya tersebut pada root aplikasi (setingkat dengan file
index.php), berikut ini adalah isi dari folder Application:

Dari sekian banyak folder di dalam direktori application, kita akan lebih
banyak bekerja pada folder Models, Views, dan Controllers

3. Tujuan Praktikum
Setelah menyelesaikan praktikum, mahasiswa diharapkan mampu:
a. Memahami pengertian dan kegunaan framework
b. Dapat menggunakan framework CI

4
 PELAKSANAAN PRAKTIKUM

1. Instalasi Code Igniter

a. Siapkan Source Framework Code Igniter 3 dengan cara download
(biasanya tersedia dalam bentuk file terkompresi)
b. Pastikan di komputer kita telah terinstall software webserver (seperti
XAMPP/WAMPP/APPSERV).

c. Extract file CodeIgniter ke direktori root webserver xampp/htdocs,

kemudian ganti nama folder bcit-ci-CodeIgniter-3.1.10-0-gc576995
sesuai dengan nama project website kita, yaitu belajarci sehingga
seperti ini:

d. Untuk menguji apakah instalasi sudah benar dan membuktikan salah

satu keunggulan CI (hampir tidak ada konfigurasi awal), silahkan
akses direktori kerja Anda pada browser. Contoh:

5
 http://localhost/belajarci. Jika sukses maka akan tampil halaman
pembuka CodeIgniter seperti di bawah ini:

2. Mengombinasikan Framework CI dengan Framwork Bootstrap

a. Kombinasikan Framework CI dengan Framework Bootstrap.
1. Download Framework Bootstrap dan ubah tampilan welcome
page CI menjadi homepage dari template bootstrap yang anda
pakai.
2. Template bootstrap bisa dipilih untuk template Admin atau
Front-End
Hasil
1. Pertama download template bootstrap, pilih template yang kita inginkan.
Kemudian ganti nama filenya menjadi asset dan pindahkan file tersebut
kedalam file codeigniter kita yaitu file belajarci.

6
2. Selanjutnya buka file config.php yang berlokasi di folder
belajarci/application/config. Kemudian setting Base URL,
Base URL berfungsi untuk menentukan alamat atau URL yang akan
digunakan oleh web. Saat mengembangkan web, kita akan menggunakan
Base URL berikut :
http://localhost/belajarci
Ini adalah alamat yang bisa kita akses dari localhost.

3. Berikutnya kita harus meload sebuah helper ke memori secara otomatis

melalui autoload.php. Helper adalah fungsi – fungsi Codeigniter yang akan
membantu kita dalam berbagai hal, seperti: membuat form, mengakses
URL, dll. Salah satu helper yang kita butuhkan dalam pembuatan template
adalah helper url. Helper url berisi fungsi – fungsi untuk mengakses URL
seperti base_url(), site_url(), $this->uri, dll. Untuk mengatur autoload kita
perlu membuka file autoload.php yang terletak pada
belajarci/application/autoload. Cari script $autoload[‘helper’] =
array(); kemudian kita tambahkan url seperti pada gambar dibawah.

7
4. Selanjutnya kita copy file index.html yang ada pada bootstrap “asset”
kemudian kita rename menjadi “laman.php” kemudian paste kan pada
direktori belajarci/application/views seperti pada gambar dibawah ini.

5. Pada file Welcome.php yang terletak pada folder controllers ubah public
function index() menjadi “laman” seperti gambar dibawah

8
6. Kemudian coba mengakses localhost/belajarci pada browser

7. Agar web dapat tertampil sempurna kita perlu merubah beberapa alamat
folder css, img, js, scss, dan vendor pada file laman.php seperti pada
gambar dibawah.

9
10
8. Kemudian, cek kembali localhost/belajarci pada browser, dan hasilnya
sebagai berikut

11
12
 PENUTUP

1. Kesimpulan
Setelah melaksanakan kegiatan praktikum Pengembangan Aplikasi Web,
maka dapat diambil kesimpulan, bahwa mahasiswa harus mampu
menggunakan Framework Bootstrap yang dikombinasikan dengan
CodeIgniter dengan teliti, karena banyak file yang harus disesuaikan. Dan
dengan adanya Bootstrap maupun codeigneter sangat memudahkan
pekerjaan.

13
 DAFTAR PUSTAKA

https://indahnela2212.wordpress.com/2018/01/17/integrasi-bootstrap-
dengan-codeigniter-membuat-view-pada-ci-dan-cara-mendownload-
serta-menempelkan-bootstrap-pada-codeigniter-ci/, diakses pada
tanggal 11 Oktober 2019 pukul 15.00 WIB

https://www.petanikode.com/codeigniter-bootstrap/, diakses pada tanggal

11 Oktober 2019 pukul 15.00 WIB

Modul Praktikum 1 Pengembangan Aplikasi Web

14