UNIVERSITAS GUNADARMA

PRAKTIKUM PEMROGRAMAN WEB

MANUAL BOOK

“Website Informasi”

Nama : Ridho Nastainullah

NPM : 59414295
Fakultas : Teknologi Industri
Jurusan : Teknik Informatika
PJ : Albertus V

Ditulis Guna Melengkapi Sebagian Syarat

Praktikum Pemrograman Web Jenjang S1

UNIVERSITAS GUNADARMA

2018
1. Pengenalan CodeIgniter

CodeIgniter adalah aplikasi open source yang berupa framework dengan model MVC (Model,
View, Controller) untuk membangun website dinamis dengan menggunakan PHP. CodeIgniter
memudahkan developer untuk membuat aplikasi web dengan cepat dan mudah dibandingkan
dengan membuatnya dari awal. CodeIgniter dirilis pertama kali pada 28 Februari 2006. Versi
terakhir adalah 3.1.2 dapat dilihat di website resminya.

Framework secara sederhana dapat diartikan kumpulan dari fungsi-fungsi/prosedur-prosedur

dan class-class untuk tujuan tertentu yang sudah siap digunakan sehingga bisa lebih mempermudah
dan mempercepat pekerjaan seorang pemrograman, tanpa harus membuat fungsi atau class dari
awal.
Ada beberapa alasan mengapa menggunakan Framework:
 Mempercepat dan mempermudah pembangunan sebuah aplikasi web.
 Relatif memudahkan dalam proses maintenance karena sudah ada pola tertentu dalam sebuah
framework (dengan syarat programmer mengikuti pola standar yang ada)
 Umumnya framework menyediakan fasilitas-fasilitas yang umum dipakai sehingga kita tidak
perlu membangun dari awal (misalnya validasi, ORM, pagination, multiple database,
scaffolding, pengaturan session, error handling, dll
 Lebih bebas dalam pengembangan jika dibandingkan CMS

Model, View, Controller merupakan suatu konsep yang cukup populer dalam pembangunan
aplikasi web, berawal pada bahasa pemrograman Small Talk, MVC memisahkan pengembangan
aplikasi berdasarkan komponen utama yang membangun sebuah aplikasi seperti manipulasi data,
user interface, dan bagian yang menjadi kontrol aplikasi.
Terdapat 3 jenis komponen yang membangun suatu MVC pattern dalam suatu aplikasi yaitu :
a. View, merupakan bagian yang menangani presentation logic. Pada suatu aplikasi web bagian
ini biasanya berupa file template HTML, yang diatur oleh controller. View berfungsi untuk
menerima dan merepresentasikan data kepada user. Bagian ini tidak memiliki akses langsung
terhadap bagian model.
b. Model, biasanya berhubungan langsung dengan database untuk memanipulasi data (insert,
update, delete, search), menangani validasi dari bagian controller, namun tidak dapat
berhubungan langsung dengan bagian view.
c. Controller, merupakan bagian yang mengatur hubungan antara bagian model dan bagian
view, controller berfungsi untuk menerima request dan data dari user kemudian menentukan
apa yang akan diproses oleh aplikasi.

Dengan menggunakan prinsip MVC suatu aplikasi dapat dikembangkan sesuai dengan
kemampuan developernya, yaitu programmer yang menangani bagian model dan controller,
sedangkan designer yang menangani bagian view, sehingga penggunaan arsitektur MVC dapat
meningkatkan maintanability dan organisasi kode. Walaupun demikian dibutuhkan komunikasi
yang baik antara programmer dan designer dalam menangani variabel-variabel yang akan
ditampilkan.
Ada beberapa kelebihan CodeIgniter (CI) dibandingkan dengan Framework PHP lain:
 Performa sangat cepat : salah satu alasan tidak menggunakan framework adalah karena
eksekusinya yang lebih lambat daripada PHP from the scracth, tapi Codeigniter sangat cepat
bahkan mungkin bisa dibilang codeigniter merupakan framework yang paling cepat dibanding
framework yang lain.
 Konfigurasi yang sangat minim (nearly zero configuration) : tentu saja untuk menyesuaikan
dengan database dan keleluasaan routing tetap diizinkan melakukan konfigurasi dengan
mengubah beberapa file konfigurasi seperti database.php atau autoload.php, namun untuk
menggunakan codeigniter dengan setting standard, anda hanya perlu merubah sedikit saja file
pada folder config.
 Banyak komunitas: dengan banyaknya komunitas CI ini, memudahkan kita untuk
berinteraksi dengan yang lain, baik itu bertanya atau teknologi terbaru.
 Dokumentasi yang sangat lengkap : Setiap paket instalasi codeigniter sudah disertai user
guide yang sangat bagus dan lengkap untuk dijadikan permulaan, bahasanya pun mudah
dipahami.

2. Hypertext Markup Language (HTML)

HyperText Markup Language (HTML) adalah sebuah bahasa markup yang digunakan untuk
membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah browser
Internet. Disebut Markup Language karena berisi tanda-tanda tertentu yang dipergunakan untuk
menentukan tampilan suatu teks dan tingkatan dari teks yang akan ditampilkan sesuai dengan
fungsinya. Misalnya teks mana yang akan dijadikan sebagai header (judul), subheader (sub judul),
dimana suatu gambar akan ditampilkan, jenis format apa yang akan digunakan pada suatu
kumpulan teks tertentu. Dengan menggunakan system hypertext dalam membaca suatu dokumen
tidak harus secara sequensial (perbaris atau perhalaman), tetapi dapat juga langsung menuju ke
suatu topic yang diinginkan. Sesuai dengan link-link yang telah tersedia disetiap halaman
dokumen.
Syntax HTML :
3. CSS

Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang digunakan untuk mengatur
tampilan suatu dokumen yang ditulis dalam bahasa markup. Penggunaan yang paling umum dari
CSS adalah untuk memformat halaman web yang ditulis dengan HTML dan XHTML. Walaupun
demikian, bahasanya sendiri dapat dipergunakan untuk semua jenis dokumen XML. Spesifikasi
CSS diatur oleh World Wide Web Consortium (W3C).
Format penulisan CSS adalah selector { property: value } dimana selector menunjukkan
bagian mana yang hendak diatur / diformat, property untuk menunjukkan, bagian (properti) dari
selector yang hendak diatur, sedangkan value adalah nilai dari pengaturannya.

4. PHP (Hypertext PreProcessor)

PHP (Hypertext PreProcessor) merupakan bahasa pemrograman website yang interpretasinya

lebih kepada gratisan biasanya berjalan pada sistem operasi linux (PHP juga bisa dijalankan
dengan hosting windows). PHP adalah pilihan alternatif, seperti halnya ASP, PHP juga
digabungkan dengan HTML jadi sebelum sebuah halaman website ditampilkan, web server akan
memanggil modul dan skrip PHP untuk melakukan proses penampilan datanya.
5. Installasi CodeIgniter
Untuk dapat menggunakan CodeIgneter maka harus mendownload terlebih dahulu Master
CodeIgneter resminya di http://www.codeigniter.com/download.php. Setelah berhasil, kemudian
ekstrak file tersebut dan copy ke folder xampp/htdocs.

Setelah itu, membuka folder CI tersebut di browser dengan cara ketikan folder yang ada di
htdocs tapi sebelumnya tambahkan localhost/ lalu tambahkan nama folder master CodeIgneter
tersebut maka akan ada tampilan seperti berikut ini.

Pada folder CodeIgniter terdapat beberapa folder seperti :

a. Application
Berisi kode-kode yang kita buat nantinya akan disimpan didalam folder yang sesuai. Model
disimpan di folder models, Controller di folder controller dan View di folder views. Folder-
folder yang terdapat di dalam direktori application adalah :
 Cache untuk meyimpan caching dari website
 Models untuk menyimpan model yang kita buat.
 Controller untuk menyimpan controller.
 Views untuk menyimpan view tampilan website.
 Config untuk menyimpan konfigurasi website yang akan kita buat. Mulai dari
konfigurasi dasat, basis data, routing dan lain-lain.
 Error berisi file-file yang akan ditampilkan jika ada error pada script yang kita buat
 Libraries untuk menyimpan pustaka yang kita tambahkan atau pustaka buatan kita
sendiri.
 Hooks untuk meyimpan hook yang kita buat
b. System
 libraries, berisi pustaka-pustaka yang disediakan untuk digunakan untuk pembuatan
website.
 helpers, berisi helper.
 database, berisi class-class yang akan digunakan untuk bekerja dengan basis data,
termasuk didalamnya driver-driver untuk beberapa server basis data yang didukung oleh
CodeIgniter.
 fonts, digunakan untuk menyimpan font yang nanti akan kita gunakan di dalam website.
 language, digunakan untuk menyimpan file-file dukungan bahasa.

c. User Guide
Digunakan sebagai petunjuk penggunaan.

6. Penjelasan Web
Project web ini dibuat dengan menggunakan CodeIgniter sebagai framework, bahasa
pemrograman HTML untuk membuat tampilan di web browser, CSS untuk mengatur tampilan
halaman web dan php sebagai sistemnya.
Website ini berisi informasi mengenai objek wisata yang bisa di kunjungi di waktu liburan
karena pemandangannya yang indah. Website ini dibuat agar mengetahui secara lengkap informasi
mengenai objek wisata pantai yang ada dari mulai sejarah, lokasi dan lain - lain.
Website ini menampilkan foto objek wisata, informasi objek wisata, dan lokasi dengan
menggunakan google maps.
Dalam pembuatan website ini, pertama harus membuat rancangan tampilan awal terlebih
dahulu untuk website ini, setelah itu membuat struktur database, lalu mulai melakukan pembuatan
program dengan menggunakan editor Sublime Text 3. Setelah proses pembuatan program selesai
dilakukan proses pengujian program dengan menggunakan browser. Selanjutnya mengisi database
yang sesuai dengan informasi yang dibutuhkan. Apabila telah selesai maka website siap untuk di
hosting ke web browser.
6.1 Rancangan Halaman Web
Berikut adalah tampilan yang dirancang untuk bagian halaman utama website.

Header

Banner

Footer

6.2 Pengkodingan
Setelah semua data terkumpul, tahap selanjutnya adalah memulai ke tahap pengkodingan.
Bahasa pemrograman yang digunakan yaitu HTML untuk membuat tampilan pada web browser,
CSS untuk mengatur tampilan yang sudah dibuat HTML, dan juga PHP menggunakan framework
Code Igniter.
Potongan Listing dan Penjelasannya :
Kode program diatas digunakan untuk tampilan awal halaman login dari admin.

6.3 Database
Website ini bersifat dinamis dan dapat diatur oleh admin yang memiliki hak untuk mengelola
suatu data yang ada di website sehingga informasi yang sudah di posting bisa diolah kembali
dengan cara kita masuk atau login sebagai admin. Website ini menggunakan database MySQL
hanya untuk penyimpanan data. Database yang dibuat yaitu dengan nama “db” dengan 23 table.
Untuk usernamenya “shauminada” dan password “Duapuluh_6”.
6.4 Tampilan Web Objek Wisata Pantai Carita
6.4.1 Halaman Artikel
6.4.1.1 Halaman Deskripsi
6.4.2 Halaman Admin
6.4.2.1 Halaman Login

6.4.2.2 Halaman Data Admin