Web Programming 8

Deskripsi:

Membahas mengenai pengenalan Web Programming dan perintah dasar membuat Web

dengan imemakai perintah HTML. Pertemuan ini juga membahas mengenai perintah

Tag-tag HTML yang biasa digunakan dalam web

Tujuan Pembelajaran:

Setelah melakukan bagian ini mahasiswa mampu:

1. konsep dasar pemrograman Web

2. memahami konsep dasar HTML

3. imemakai perintah HTML dalam pemrograman

A. Dasar-Dasar Website

1. Internet

Internet merupakan “kependekan dari kata “internetwork”, yang berarti rangkaian

komputer yang terhubung menjadi beberapa rangkaian jaringan”. Sistem komputer

terhubung secara global dan imemakai TCP/IP sebagai protocol. Secara umum internet

dapat diartikan sebagai pertukaran informasi dan komunikasi. Semua informasi bisa

didapatkan dengan mudah dan bebas di internet tanpa ada batasan.

Ada beberapa istilah yang sering digunakan apabila anda bekerja dengan internet

diantaranya yaitu:

1. World Wide Web (WWW)

WWW merupakan kumpulan web server diseluruh dunia yang dapat menyediakan data

dan informasi untuk dapat digunakan secara massal.

2. Website

Website atau situs web merupakan sebuah alamat tertentu di WWW yang menyediakan

informasi tertentu. Untuk membuka sebuah situs web, anda dapat imemakai

browser.

3. Web Pages (Halaman Web)

Web pages atau halaman web merupakan bagian dari situs web, apabila situs web

diumpamakan merupakan sebuah buku, maka halaman web merupakan lembaran-

lembaran kertas penyusun buku ini .

4. Home Page (Halaman Muka)

Homepage merupakan halaman muka dari sebuah situs web, atau ibarat cover muka

sebuah buku. Homepage biasanya berupa outline dari isi situs web yang bersangkutan.

5. Browser

Browser adalah aplikasi yang digunakan untuk berselancar didunia internet. Browser

dapat memandu pengguna internet untuk berpindah antar situs web dengan mudah.

6. URL (Universal Resource Locator)

URL merupakan suatu alamat yang menunjukkan sebuah halaman tertentu internet.

Contoh URL adalah: http://www.google.com

7. HTTP (Hypertext Transfer Protocol)

HTTP adalah bagian dari sebuah URL yang mengidentifikasikan lokasi web, dan

digunakan dalam protokol HTML.

8. DNS (Domain Name System)

DNS merupakan sistem database terdistribusi yang tidak banyak dipengaruhi oleh

bertambanhnya database. DNS menjamin informasi host terbaru akan disebarkan ke

jaringan bila diperlukan.

9. TCP/IP (Transmission Control Protocol / Internet Protocol)

TCP/IP (Transmission Control Protocol/Internet Protocol) merupakan metode-metode

yang digunakan untuk menghubungi server. TCP/IP merupakan bahasa standarisasi

untuk internet.

10. IP (Internet Protocol)

IP (Internet Protocol) merupakan protokol yang digunakan dalam internet, secara

teknis bermakna suatu bentuk pengisian dan pengalamatan data-data dan informasi

yang akan dikirim melalui internet.

11. Hyperlink

Hyperlink atau disebut link saja merupakan sebuah fasilitas yang sangat berperan

mempopulerkan pengguna internet, karena mampu mereferensikan sebuah teks atau

gambar ke alamat lain di internet.

12. Web Browser

imemakai web browser mudah, yang diperlukan hanyalah Anda harus memiliki

alamat web yang akan dibuka. Alamat ini biasa disebut dengan Uniform Resource

Locator (URL). Di dalam sistem operasi Windows Anda juga terdapat program web

browser sertaan, yaitu Internet Explorer. Namun demikian diluar terdapat banyak

program alternative web browser yang sebagian besar bersifat gratis, seperti Netscape,

Firefox, Opera, Avant Browser, dan seterusnya.

2. Perangkat Lunak Web Server

Web Server adalah sebuah perangkat lunak server yang berfungsi menerima

permintaan HTTP atau HTTPS dari Client yang dikenal dengan web browser dan

mengirimkan kembali hasilnya dalam bentuk halaman-halaman web yang umumnya

berbentuk dokumen HTML. Server web yang terkenal diantaranya adalah:

a. Apache, web server antar platform

1) XAMPP

2) PHPTriad; discontinued

3) Apache2Triad

b. Internet Information Service (IIS), hanya dapat berjalan di sistem operasi MS

Windows

B. Struktur Navigasi

Struktur Navigasi adalah “Susunan menu atau hirarki dari suatu situs yang

menggambarkan isi dari setiap halaman dan link atau navigasi tiap halaman pada suatu situs

web”. Struktur Navigasi dapat dikatakan sebagai penggambar dari hubungan atau rantai

kerja dari seluruh elemen yang akan digunakan dalam aplikasi.

Struktur Navigasi dapat digolongkan menurut kebutuhan akan objek, kemudahan

pemakaian, keinteraktifitasannya, dan kemudahan membuatnya yang berpengaruh

terhadap waktu pembuatan suatu situs web. Dalam penggambarannya Struktur Navigasi

terbagi kedalam 4 Struktur yang berbeda yaitu: Linier, Non Linier, Hierarchical (Hirarki) dan

Composit (Campuran).

Ada 4 macam bentuk dasar dari peta navigasi yang biasa digunakan dalam proses

pembuatan aplikasi web, yaitu:

1. Struktur Navigasi Linier

Struktur navigasi linier hanya mempunyai satu rangkaian cerita yang berurut, yang

menampilkan satu demi satu tampilan layar secara berurut menurut urutannya. Tampilan

yang dapat ditampilkan pada sruktur jenis ini adalah satu halaman sebelumnya atau satu

halaman sesudahnya, tidak dapat dua halaman sebelumnya atau dua halaman sesudahnya.

Contoh :

2. Struktur Navigasi Hirarki

Struktur navigasi hirarki biasa disebut struktur bercabang, merupakan suatu

struktur yang mengandalkan percabangan untuk menampilkan data berdasarkan kriteria

tertentu. Tampilan pada menu pertama akan disebut sebagai Master Page (halaman utama

pertama), halaman utama ini mempunyai halaman percabangan yang disebut Slave

Page (halaman pendukung). Jika salah satu halaman pendukung dipilih atau diaktifkan,

maka tampilan ini akan bernama Master Page (halaman utama kedua), dan seterusnya.

Pada struktur navigasi ini tidak diperkenankan adanya tampilan secara linier.

Contoh :

3. Struktur Navigasi Non-Linier

Struktur navigasi non-linier atau struktur tidak berurut merupakan pengembangan

dari struktur navigasi linier. Pada struktur ini diperkenankan membuat navigasi

bercabang. Percabangan yang dibuat pada struktur nonlinier ini berbeda dengan

percabangan pada struktur hirarki, karena pada percabangan nonlinier ini walaupun

terdapat percabangan, tetapi tiap-tiap tampilan mempunyai kedudukan yang sama yaitu

tidak ada Master Page dan Slave Page.

Contoh :

4. Struktur Navigasi Campuran

Struktur navigasi campuran merupakan gabungan dari ketiga struktur sebelumnya

yaitu linier, non-linier dan hirarki. Struktur navigasi ini juga biasa disebut dengan struktur

navigasi bebas. Struktur navigasi ini banyak digunakan dalam pembuatan website karena

struktur ini dapat digunakan dalam pembuatan website sehingga dapat memberikan ke-

interaksian yang lebih tinggi.

Contoh :

C. Pengertian HTML (Hypertext Markup Language)

Hypertext Markup Language (HTML) adalah sebuah bahasa untuk menampilkan

konten di web. HTML sendiri adalah bahasa pemrograman yang bebas, artinya tidak dimiliki

oleh siapapun, pengembangannya dilakukan oleh banyak orang di banyak Negara dan bias

dikatakan sebagai sebuah bahasa yang dikembangkan bersama-sama secara global.

Sebuah dokumen HTML sendiri adalah dokumen teks yang dapat diedit oleh editor

teks apapun. Dokumen HTML punya beberapa elemen yang dikelilingi oleh tag-teks yang

dimulai dengan symbol < dan berakhir dengan sebuah symbol >.

Editor teks yang digunakan oleh penyusun adalah imemakai Notepad dan XAMPP

Versi 1.8.1 untuk web servernya dengan bahasa pemrograman PHP Versi 5.

D. Struktur Dasar HTML

Elemen HTML dimulai dengan tag awal, yang diikuti dengan isi elemen dan tag akhir.

Tag berakhir termasuksimbol / diikuti oleh tipe elemen, misalnya </HEAD>. Sebuah elemen

HTML dapat bersarang di dalam elemen lainnya. Sebuah dokumen HTML standar terlihat

seperti ini :

Keterangan :

1. Tag HTML secara default dimulai dari <HTML> dan diakhiri dengan </HTML>.

2. Tag <HEAD> … </HEAD> merupakan tag kepala sebelum badan. Tag kepala ini akan

terlebih dulu dieksekusi sebelum tag badan. Di dalam tag ini berisi tag <META> dan

<TITLE>. Tag <META> merupakan informasi atau header suatu dokumen HTML. Atribut

yang dimiliki oleh tag ini antara lain:

a. HTTP_EQUIV, atribut ini berfungsi untuk menampilkan dokumen HTML secara

otomatis dalam jangka waktu tertentu.

b. CONTENT, atribut ini berisi informasi tentang isi document HTML yang akan

dipanggil.

c. NAME, atribut ini merupakan identifikasi dari meta itu sendiri. Tag <META> dalam

suatu document HTML boleh ada maupun tidak.

3. Tag <TITLE> … </TITLE> adalah tag judul. Sebaiknya setiap halaman web memiliki judul,

dan judul ini dituliskan di dalam <TITLE> … </TITLE>. Judul ini akan muncul dalam

titlebar dari browser.

4. Tag <BODY> … </BODY> adalah tag berisi content dari suatu halaman web.

Contoh penggunaan script HTML

Buat lembar baru pada Notepad, kemudian ketikkan perintah di bawah ini. Simpan dengan

nama Contoh01.php

Kemudian simpan file di atas di dalam folder c:\XAMPP\htdocs\ buat folder baru untuk

menyimpan file di dalam folder htdocs. Simpan file dengan nama contoh01.html. Pembuatan

nama file pada saat penyimpanan harus diakhiri dengan extention “.html”

Cara penyimpanan dengan Notepad, perhatikan cara berikut :

Judul Web

Perintah dibuat di antara

Pastikan memilih

All Files pada

Save as Type

Sertakan

extension .html

pada nama

filenya contoh :

contoh01.html

Untuk melihat hasil dari file di atas dapat imemakai browser Mozilla, google

chrome, internet explorer atau jenis browser lain. Ketikkan pada address bar

“Localhost\Nama Folder Penyimpanan\”, kemudian pilih file contoh01.html

Sebelum di ketikkan alamat file ini , pastikan anda telah menjalankan Module Apache

pada Xampp Control Panel.

Lihat gambar di bawah ini :

Hasilnya :

Ketikkan localhost

kemudian nama folder

penyimpanan file

Klik di contoh01.html

Klik Tombol start pada

service Xampp Control

Panel

Kode-kode dalam HTML biasanya disebut TAG. Tag adalah sesuatu yang digunakan

untuk menandai elemen-elemen dalam suatu dokumen HTML. Tag dalam HTML terdiri

dari tanda lebih kecil ( < ), tanda lebih besar ( > ), dan garismiring ( / ). Biasanya Tag

dituliskan secara berpasangan, misanya <h1> dan </h1>. Tag yang tidak imemakai garis

miring ( / ) adalah Tag pembuka atau awal elemen. Sedangkan yang Tag yang mengandung

garis miring ( / ) adalah penutup elemen atau akhir elemen. Namun, ada juga Tag yang dalam

pemakaiannya tidak berpasangan, diantaranya adalah :

a. Tag untuk ganti paragraph yaitu <p>

b. Tag untuk ganti baris atau line break yaitu <br>

c. Tag untuk garis datar yaitu <hr>

d. Tag list item yaitu <li>

Untuk tag yang tidak berpasangan diatas, sebaiknya tetap ditulis imemakai

pasangannya. Hal ini dilakukan untuk mengantisipasi standar rekomendasi HTML

kedepannya. Penulisan untuk semua Tag bebas, maksudnya kita bisa imemakai huruf

besar, huruf kecil, bahkan dicampur ( tidak case sensitive ). Tapi untuk mengantisipasi

standar penulisan Tag, sebaiknya kita imemakai huruf kecil semua.

Jenis – jenis tag dalam HTML :

Contoh script penggunaan Tag HTML

Buat lembar baru pada Notepad, kemudian ketikkan perintah di bawah ini. Simpan dengan

nama Contoh02.html

Simpan dengan nama contoh02.html

Hasil Tampilan

E. Pembuatan Tabel imemakai HTML

Tabel penting peranannya dalam halaman Web, selain untuk menampilkan teks atau

gambar dalam format lajur dan kolom bias juga imemakai tabel untuk membantu me-

layout tampilan halaman.

Tabel merupakan sebuah kotak yang terdiri atas baris/row dan kolom.column. Untuk

membuat tabel, anda imemakai tag <table> dan menutupnya dengan tag </table>. Anda

bisa juga menambahkan atribut lain di tag <table> pembuka. Misalnya menentukan warna,

border, dan sebagainya.

Di dalam tag <table> ada beberapa tag lain yang perlu dipahami, yaitu :

a. Tag <tr>

Artinya tag untuk menuliskan baris biasa di tabel. TR singkatan dari Table Row.

b. Tag <td>

Artinya tag untuk menuliskan kotak di dalam baris, makanya tag <td> ada di dalam tag

<tr>. TD singkatan dari Table Data.

c. Tag <th>

Artinya tag untuk menuliskan kotak biasa seperti <td>, namun untuk header tabel. TH

singkatan dari Table Header.

Menggabungkan sel

Sel-sel tabel secara normal memiliki lebar dan tinggi yang sama. Jika kita ingin membuat

sebuah sel memiliki lebar atau tinggi yang berbeda dari sel-sel lainnya, maka satu-satunya

cara yang bisa kita lakukan adalah dengan menggabungkan beberapa sel menjadi satu. Cara

ini disebut merge atau penggabungan sel.

Untuk menggabungkan sel-sel tabel ini diperlukan atribut rowspan atau colspan. Atribut

rowspan digunakan untuk menggabungkan sel-sel tabel pada kolom yang sama. Atribut

colspan untuk menggabungkan sel-sel tabel pada baris yang sama. Berikut contoh

penggabungan kedua jenis :

1. Secara Vertikal (Rowspan)

Tabel dengan kode HTML dibawah ini sel-sel kolom pertama akan digabung:

Setelah digabung maka kondisi kode HTML menjadi seperti berikut:

2. Secara Horisontal (Colspan)

Tabel dengan kode HTML dibawah ini sel-sel baris pertama akan digabung:

Setelah digabung maka kondisi kode HTML menjadi seperti berikut:

Contoh script pembuatan tabel

Buat lembar baru pada Notepad, kemudian ketikkan perintah di bawah ini. Simpan dengan

nama Contoh03.html

Jika dilihat di browser, maka terlihat sebagai berikut :

Penggunaan Cellpadding dan cellspacing

Buat lembar baru pada Notepad, kemudian ketikkan perintah di bawah ini. Simpan dengan

nama tabelcell.html

Hasil di browser :

Penggunaan Rowspan dan colspan

Buat lembar baru pada Notepad, kemudian ketikkan perintah di bawah ini. Simpan dengan

nama tabelspan.html

Hasil di browser :

Tugas 01:

1. Buatlah script html sehingga menghasilkan tampilan berikut ini :

2. Buat script HTML untuk bentuk tampilan di bawah ini :

MINGGU KE 2

Pengenalan PHP, Variabel, Konstanta, Tipe Data, Komentar dan Operator

Deskripsi:

Pertemuan ini membahas mengenai pemrograman dengan PHP (PHP Hypertext

Prepocessor) dan perbedaaannya dengan penggunaan HTML. Pertemuan ini juga membahas

mengenai penggunaan variabel, konstanta, tipe data, komentar dan operator dalam

pemrograman.

Tujuan Pembelajaran:

Setelah melakukan bagian ini mahasiswa mampu:

1. Memahami konsep dasar PHP

2. Memahami memahami perbedaan HTML dan PHP

3. Memahami dan imemakai variabel, konstanta, tipe data, dan komentar dalam PHP

4. Memahami dan imemakai perintah operator dalam PHP

A. Pengertian PHP (PHP Hypertext Preprocessor)

PHP atau PHP Hypertext Prepocessor adalah sebuah bahasa script berbasis server

(server-side) yang mampu mem-parsing kode php dari kode web dengan ekstensi .php,

sehingga menghasilkan tampilan website yang dinamis di sisi client (browser). Dengan PHP,

anda bisa menjadikan halaman HTML menjadi lebih powerful dan bisa dipakai sebagai

aplikasi lengkap, misalnya untuk beragam aplikasi cloud computing.

PHP adalah bahasa script yang sangat cocok untuk pengembangan web dan dapat

dimasukkan ke dalam HTML. PHP awalnya dikembangkan oleh seorang programmer

bernama Rasmus Lerdrof pada tahun 1995, namun semenjak itu selalu dikembangkan oleh

kelompokindependen yang disebut Group PHP dan Kelompok ini juga yang mendefinisikan

standar de facto untuk PHP karena tidak ada spesifikasi formal. Saat ini pengembangannya

dipimpin oleh duo maut, Andi Gutmans dan Zeev Suraski.

Yang menyebabkan PHP banyak dipakai oleh banyak orang adalah karena PHP adalah

perangkat lunak bebas (Open Source) yang dirilis di bawah lisensi PHP. Artinya untuk

imemakai bahasa pemrograman ini gratis, bebas, dan tidak terbuka.

B. Memasukkan Kode PHP

Tidak seperti halaman HTML biasa, kode PHP tidak akan diberikan oleh server secara

langsung ketika ada permintaan dari client (browser), namun melalui pemrosesan dari sisi

server, makanya PHP disebut skrip server-side.

Kode PHP dimasukkan ke dalam kode HTML dengan cara menyelipkannya di dalam

kode HTML. Untuk membedakan kode PHP dengan kode HTML, di depan kode PHP ini

diberi tag pembuka dan diakhir kode PHP diberi tag penutup.

Dengan adanya kode PHP, sebuah halaman web bisa melakukan banyak hal yang

dinamis, seperti mengakses database, membuat gambar, membaca dan menulis file, dan

sebagainya. Hasil akhir pengolahan kode PHP akan dikembalikan lagi dalam bentuk kode

HTML untuk ditampilkan di browser. Ada 4 jenis tag yang bisa digunakan untuk

memasukkan kode PHP.

Jenis Tag Tag Pembuka Tag Penutup

Tag Standar < ? php ? >

Tag Pendek < ? ? >

Tag ASP < % % >

Tag Script <script language = “php”> </script>

Yang dapat langsung diterapkan disemua platform adalah tag standard dan tag script.

Di dalam modul ini bahasa pemrograman yang digunakan adalah PHP Versi 5 sehingga jenis

tag yang harus digunakan adalah tag standar. Untuk tag lainnya perlu penyetingan di server

oleh administrator server.

Contoh Script PHP

Buka file baru di Notepad. Kemudian ketikkan script seperti di bawah ini :

Simpan file dengan nama contoh04.php

Untuk melihat hasilnya buka browser masuk ke dalam localhost dan folder penyimpanan.

Pilih file contoh04.php maka akan tampil hasilnya :

Contoh04.php merupakan contoh script php yang berdiri sendiri tanpa ada tambahan script

yang lain. Perintah echo merupakan perintah yang digunakan untuk mencetak. Script PHP

bisa juga digabung dalam tag HTML.

Perbedaan HTML dengan PHP

• HTML dapat diakses langsung tanpa melalui akses server saat ada permintaan dari

client(browser)

• PHP harus di akses melalui server saat ada permintaan dari client(browser)

Dari 2 gambar di atas dapatkah anda melihat perbedaannya, tanpa melihat extension nama

filenya?

Ya, untuk file dengan extension html, kita dapat melihat hasilnya langsung di browser, tanpa

harus menjalankan akses server. Namun, untuk file dengan extension php, kita harus

menjalankannya melalui akses server, yaitu localhost, dan penyimpanan filenya pun,

disimpan pada htdocs yang ada di folder xampp

C. Variabel

Variabel merupakan sebuah istilah yang menyatakan sebuah tempat yang

menampung nilai-nilai tertentu di mana nilai di dalamnya bisa diubah-ubah. Variable

penting karena tanpa adanya variable tidak bisa menyimpan nilai tertentu untuk diolah.

Variabel ditandai dengan adanya tanda dolar ($) yang kemudian bisa diikuti dengan

angka, huruf, dan underscore. Namun variable tidak bisa mengandung spasi. Berikut ini

contoh pendefinisian variable. Untuk mendefinisikan variable, hanya perlu menuliskannya

maka otomatis variable dikenali oleh PHP.

$nama

$no_telp

$_pekerjaan

Variable merupakan tempat untuk menyimpan data dalam tipe tertentu, variable bisa

berupa null (belum ada isinya), angka, string, objek, array, Boolean, dan isinya bisa diubah-

ubah nantinya.

Contoh05.php:

Hasil :

D. Tipe Data

Berbeda dengan bahasa pemrograman lain, variable di PHP lebih fleksibel. Kita tidak

perlu mendefinisikan jenisnya ketika mendefinisikan pertama kali. Ada 6 Tipe data dasar

yang dapat diakomodasi di PHP, seperti terlihat di tabel.

Tipe Contoh Penjelasan

Integer 134 Semua angka bukan pecahan

Double 5.1234 Nilai pecahan

String “asep” Kumpulan karakter

Boolean False Salah satu nilai True atau False

Object Sebuah instance dari class

Array Larik

Untuk mengetahui tipe data sebuah variable, kita bisa imemakai perintah

gettype, misalnya :

Print gettype ($nama_variabel);

Anda juga bisa mengubah jenis variable tertentu dengan perintah :

(jenis_variabel) $nama_variabel;

Misalnya untuk mengubah variable menjadi string, kita dapat imemakai perintah:

$var_string = (string) $angka;

Contoh06.php:

Hasil Tampilan :

E. Konstanta

Selain variable, sebuah program umumnya juga memungkinkan adanya konstanta.

Konstanta fungsinya sama seperti variable namun nilainya statis/konstan dan tidak bisa

berubah. Cara untuk mendefinisikan konstanta adalah :

Define (“NAMA_KONSTANTA”, nilai_konstanta);

Setelah didefinisikan, kita dapat langsung imemakai nya dengan mengetikkan

nama konstanta ini . Nama konstanta umumnya diketik imemakai huruf besar.

F. Komentar

Program merupakan kegiatan menuliskan bahasa yang dipahami oleh mesin.

Walaupun bahasa yang digunakan adalah bahasa tingkat tinggi, namun tent masih tidak

semudah dipahami oleh bahasa biasa. Untuk itu kita bisa imemakai komentar. Berikut

ini contoh pembuatan komentar di php.

//komentar satu baris

#ini juga komentar satu baris

/*komentar

Banyak baris

Kode di sini tidak

Dieksekus oleh parser */

Contoh script konstanta & komentar.

Contoh07.php

Deklarasi komentar

Deklarasi konstanta

Hasil :

G. Operator

Sebuah bahasa pemrograman juga wajib untuk mampu mengolah nilai operand

(variable atau konstanta yang dioperasikan) imemakai operator, seperti menjumlah,

membagi, dan sebagainya.

Operator merupakan symbol yang berfungsi untuk melakukan aksi / operasi tertentu

terhadap nilai operand yang pada umumnya dari hasil operasi ini menghasilkan nilai

baru. Sementara operand adalah nilai yang dilibatkan dalam operasi oleh operator.

1. Jenis-Jenis Operator

a) Operator Aritmatika

Operator ini digunakan untuk melakukan perhitungan matematika, sebagian berikut:

Operator Nama Contoh Hasil

+ Penambahan 1+4 5

- Pengurangan 1-4 -3

/ Pembagian ¼ 0.25

* Perkalian 1*4 4

% Sisa Pembagian 5%2 1

++ Inkremen X=5; X++ X=6

- Dekremen X=5; X- X=4

Contoh script :

Operatoraritmatika.php

Hasil :

b) Operator Perbandingan

Operator perbandingan digunakan untuk menghasilkan 2 nilai yang hasil akhirnya

adalah nilai Boolean true dan false. Operator ini sangat berguna dalam pemrograman

karena bisa menentukan arah pemrograman. Operator perbandingan di PHP adalah :

Operator Nama Contoh Hasil

= = Sama dengan 6 = = 6 False

!= Tidak sama dengan 3!=3 False

> Lebih besar 1>5 False

>= Lebih besar atau sama dengan 3>=4 False

< Lebih kecil 2<4 True

<= Lebih kecil atau sams dengan 5<=4 False

Opertorperbandingan.php

Hasil :

c) Operator Logika

Operator untuk menyusun kalimat ekspresi/ungkapan logika. Hasil operasi ini akan

didapatkan nilai satu jika benar dan nol jika salah.

Operator Fungsi

AND atau && Operasi logika AND

OR atau || Operasi logika OR

XOR Operasi logika eksklusife OR

! Ingkaran/negasi

Operatorlogika.php

Hasilnya :

d) Operator String

Dalam PHP juga tersedia operator string, yaitu digunakan untuk operasi

penggabungan teks. Adapun symbol yang digunakan yaitu berupa karakter titik (.)

Operatorstring.php

Hasilnya :

Tugas 02 :

1. Buat script php untuk tampilan di bawah ini. Tentukan variablenya :

2. Buat script imemakai bahasa pemrograman PHP untuk menghitung volume Kubus

imemakai fungsi operator aritmatika dan operator string dengan ketentuan sebagai

berikut :

Panjang sisi kubus = 15cm

Hitung volume balok dengan rumus = sisi x sisi x sisi

Buat variable teks1 yang berisi = “Belajar Menghitung” dan teks2 yang berisi = “Volume

Kubus”. Buat perintah untuk menggabungkan nilai dari variable teks1 dan teks2

imemakai operator string.

Outputnya sebagai berikut :

MINGGU KE 3

Pengenalan Form, Percabangan, dan Perulangan

Deskripsi:

Pertemuan ini membahas mengenai pembuatan form dalam web serta metode pengiriman

nilai pada form. Dibahas juga mengenai perintah percabangan (IF dan Switch case) serta

perintah perulangan (looping)

Tujuan Pembelajaran:

Setelah melakukan bagian ini mahasiswa mampu:

1. memahami dan imemakai Form

2. memahami dan imemakai perintah percabangan dalam PHP

3. memahami dan imemakai perintah Perulangan dalam PHP

A. Komponen Form

Sebuah website dinamis seringkali memerlukan interaksi antara browser client dan

server bisa berupa pemasukan data teks, angka, atau upload file untuk diproses oleh server.

Untuk mewadahi suatu data yang dikirimkan oleh browser client, dibutuhkan adanya FORM

HTML. Penggunaan form misalnya untuk pendaftaran keanggotaan, pemasukan kode kartu

kredit, login user, transaksi perbelanjaan, dan upload file.

Dalam FORM HTML terdapat beberapa komponen yang bisa digunakan, antara lain :

1) Form

2) Text Box

Text box : untuk menginput data string ataupun angka.

3) Text Area

< INPUT TYPE=TEXT NAME=”nama_variabel” VALUE=”value”>

Text area : untuk menginput string ataupun angka yang terdiri atas banyak baris.

4) Radio buton

Radio buton : untuk memilih satu pernyataan dari beberapa pernyataan yang disediakan.

5) Combo Box

Combo box untuk menampilkan daftar data.

6) Check Box

Check box untuk memilih satu atau lebih pernyataan dari beberapa pernyataan yang

disediakan.

7) Submit

Submit untuk mengirimkan semua variable data pada komponen-komponen form yang

ada.

8) Reset

Reset untuk membatalkan semua penginputan yang telah dituliskan.

B. Pengolahan Data Dari Form

Form di HTML dikenal dengan adanya tag <FORM> dan ditutup dengan tag </FORM>.

Di dalam tag pembuka <FORM> diikuti dengan atribut action dan method. Action

menjelaskan ke h alaman yang digunakan untuk memproses input, sementara method

digunakan untuk mengatur cara mem-parsing konten

<input type=”radio” name=”nama_variabel” value=” ”>Isi_Radio

<option>Combo1</option>

<option>Combo2</option></select>

Web menerima input dari user atau pengunjung imemakai metode GET dan

POST. GET akan mengirimkan data bersama dengan URL, sedangkan POST akan

mengirimkannya secara terpisah. User mengirimkan data input dengan mengisi teks atau

pilihan pada attibut form html.

Proses Form imemakai Metode GET.

File metodeget.php

Hasilnya :

Buat file untuk memproses variable yang diberikan oleh file metodeget.php, beri nama

filenya : metodegetproses.php

Hasilnya :

Proses Form imemakai metode : POST

Untuk membuat inputan, dan beri nama file : metodepost.php

Hasilnya :

Buat file untuk memproses variable yang diberikan oleh file metodepost.php beri nama

filenya : metodepostproses.php

Karena imemakai

metode GET, data dikirmkan

bersama dengan URL

Hasilnya :

CONTOH Penggunaan Form :

Form input :

Form Output :

Karena imemakai

metode POST, data

tidak dikirimkan

bersama dengan URL

Script forminputmahasiswa.php

Script tampilmahasiswa.php

Contoh Pembuatan Form dengan Input, Proses, dan Output Dalam Satu File

Untuk membuat form input dan halaman untuk menampilkan dalam satu file, kita

bisa imemakai statement :

If (!Empty (nama_variabel))

Artinya jika variable yang dicari tidak kosong (alias ada) maka baru ditampilkan,

sementara jika tidak ada maka tidak akan ditampilkan.

Yang perlu diketahui adalah digunakannya alamat action :

$_server [‘php_self’]

Artinya alamat action akan mengacu ke halaman itu sendiri dan bukan di halaman

yang lain. Dengan demikian, jika form di submit, maka halaman yang dipanggil tetap

halaman yang sama.

Contoh formdatadiri.php

Hasil :

Inputkan datanya :

KLIK Tombol Tampil, maka akan tampil kiriman datanya.

C. Pernyataan Seleksi

Sebagian besar bahasa pemrograman mengandung pernyataan seleksi. Pada

dasarnya pernyataan seleksi adalah suatu mekanisme yang menjelaskan apakah pernyataan

akan dikerjakan atau tidak, hal ini tergantung kondisi yang dirumuskan. Dalam bahasa

pemrograman PHP pernyataan seleksi diterapkan dengan imemakai statement IF dan

Switch Case.

1. Statement IF

a. If Tunggal

Statement IF merupakan statement yang penting dan pasti terdapat di semua bahasa

pemrograman. Statement ini berguna untuk membuat percabangan berdasarkan kondisi

tertentu yang harus dipenuhi.

Bentuk umun Statement IF adalah sebagai berikut :

Prinsip kerjanya adalah perintah di atas akan dikerjakan apabila kondisi bernilai

TRUE atau benar, sedangkan jika kondisi salah / FALSE maka statement di atas tidak akan

dikerjakan

b. Pernyataan IF dan Else

Pernyataan ELSE merupakan bagian dari pernyataan if. Else digunakan untuk

memberikan alternative perintah apabila kondisi bernilai salah / FALSE.

Bentuk umum :

Contoh : contohpercanganifelse.php

Hasilnya :

c. Pernyataan IF Majemuk

Jika pernyataan else memberikan alternative pilihan kedua, maka untuk pernyataan

ElseIf dapat digunakan untuk meumuskan banyak alternative pilihan (lebih dari dua

pilihan).

Bentuk umum :

if ( kondisi_1 )

{

Statement_1;

}

elseif ( kondis_2)

{

Statement_2;

}

elseif ( kondisi_3)

{

Statement_3;

}

else

{

Statement_n;

}

Contoh : contohpercabanganifmajemuk.php

Hasilnya :

2. Statement Switch

Statement untuk pengatur alur program berikutnya adalah switch. Salah satu

keuntungan switch adalah ada bisa langsung mengevaluasi satu statement dan

memerintahkan aksi dalam jumlah yang lebih banyak.

Bentuk umum :

Switch ( nilai_ekspresi ){

Case nilai_1 : statement_1; break;

Case nilai_2 : statement_2; brea;

Default: statement_n;}

Contoh :

Hasil:

D. Perulangan (Looping)

Perulangan / looping (kadang juga disebut iterasi) adalah sebuah instruksi program

yang memerintahkan suatu tugas diulang – ulang berdasarkan kondisi tertentu.

1. Perulangan FOR

Merupakan bentuk perulangan yang sangat sederhana, dengan imemakai fungsi ini,

anda dapat melakukan pengulangan data sampai melampaui batas yang diinginkan.

2. Perulangan WHILE

Pada bentuk perulangan ini, pernyataan akan terus dikerjakan apabila masih belum

mencapai batas perulangan.

3. Perulangan DO – WHILE

pernyataan akan dikerjakan terlebih dahulu sebelum melakukan pengecekan batas

perulangan. Apabila masih belum mencapai batas perulangan maka pengulangan akan

terus dilakukan.

4. Pernyataan foreach -

perulangan yang dilakukan untuk blok kode dari setiap elemen yang ada di array.

Contoh :

1. Perulangan FOR = contohfor.php

2. Perulangan FOR dalam FORM = contohfor_form.php

3. Perulangan WHILE = contohwhile.php

4. Perulangan DO – WHILE= contohdowhile.php

5. Perulangan Foreach = contoforeach.php

Tugas 03 :

1. Buat script program untuk membuat form input dengan data sbb :

Buat script program untuk memanggil data dari form input dengan bentuk sbb :

2. Buatlah script sehingga mendapatkan tampilan sebagai berikut :

Tampilan Input

Tampilan Output

Ketentuan Soal :

 Jika Nilai 1 dan 2 = 0 maka tidak ada hasil perhitungan

 Jika Nilai 1 dan 2 terisi nilai maka

 Jika memilih perhitungan rumus Segitiga (1/2*(nilai 1*nilai2))

 Jika memilih perhitungan rumus Persegi Panjang (nilai 1*nilai2)

MINGGU KE 4

Javascript dan CSS

Deskripsi:

Membahas mengenai javascript dan CSS, sintaks penulisan, serta penggunaannya dalam

pemrograman web.

Tujuan Pembelajaran:

Setelah melakukan bagian ini mahasiswa mampu:

1. Memahami sintaks Javascript dan imemakai Javascript

2. memahami sintaks CSS dan imemakai CSS

A. JavaScript

Javascript adalah bahasa script yang populer di internet dan dapat bekerja di sebagian

besar penjelajah web browser seperti Internet Explorer (IE), Mozilla Firefox, Netscape,

opera dan web browser lainnya. Kode javascript biasa dituliskan dalam bentuk fungsi

(Function) yang ditaruh di bagian dalam tag <head> yang dibuka dengan tag <script

language =” javascript”>

Isi dari script javascript sama dengan konsep yang sudah dipelajari dalam materi PHP,

yakni ada deklarasi variabel, penggunaan operator, percabangan, looping, dan fungsi. Di

dalam java script juga sebuah komponen Alert yang digunakan untuk menampilkan kotak

pesan pada browser ketika fungsinya di jalankan.

Untuk berlatih deklarasi script pada javascript, salin contoh-contoh berikut ini pada

editor anda. Dan jalankan pada browser, amati tampilannya.

Latihan Javacsript :

1. Menuliskan teks = contohjs1.html

2. Memformat teks dengan tag HTML = contohjs2.html

3. JavaScript yang diletakkan pada bagian HEAD = contohjs3.html

4. JavaScript yang diletakkan pada bagian BODY = contohjs4.html

5. Fungsi = contohjs5.html

6. Fungsi dengan argumen = contohjs6.html

7. Memunculkan tanggal lengkap = contohjs7.html

B. Cascading Style Sheets (CSS)

CSS = Cascading Style Sheets ( Bahasa lembar Gaya ). CSS merupakan bahasa yang

digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup /

markup language. Jika kita berbicara dalam konteks web, bisa di artikan secara bebas

sebagai : CSS merupakan bahasa yang digunakan untuk mengatur tampilan / desain suatu

halaman HTML.

Beberapa hal yang dapat dilakukan dengan CSS.

1. Perancangan desain text dapat dilakukan dengan mendefinisikan fonts (huruf) , colors

(warna), margins (ukuran), latar belakang (background), ukuran font (font sizes) dan

lain-lain. Elemen-elemen seperti colors (warna) , fonts (huruf), sizes (ukuran) dan

spacing (jarak) disebut juga “styles”.

2. Cascading Style Sheets juga bisa berarti meletakkan styles yang berbeda pada layers

(lapisan) yang berbeda.

Ada 3 cara untuk memasang CSS pada dokumen HTML yaitu:

1. External Style Sheet

Aturan CSS disimpan pada suatu file sehingga terpisah dari dokumen HTML. Kemudian

tambahkan kode pemanggilan file CSS dalam dokumen HTML. Akhiran file CSS adalah

.css

2. Internal Style Sheet

Aturan CSS ditulis pada bagian HEAD dokumen HTML imemakai tag <style>

3. Inline Style Sheet

Aturan CSS ditulis langsung pada tag HTML yang akan diatur tampilannya imemakai

atribut style:

SATUAN DALAM CSS

1. Statik

* in -- satuan inchi

* cm -- satuan centimeter

* mm -- satuan milimeter

* pt -- satuan point (1point = 1/72 inchi)

* pc -- satuan pica (1pica = 12 point)

* px -- satuan pixel (satu titik gambar terkecil dalam layar monitor)

2. Relatif

* % -- satuan persen

* em -- atau ems (1em = ukuran font yang tengah ada dalam elemen)

* ex -- 1ex = x-height suatu font (x-height biasanya setengah ukuran font)

1. MENULIS CSS

Sintaks penulisan CSS sebagai berikut:

Penjelasan:

Aturan CSS terdiri 2 bagian:

a) Selector

Biasanya berupa tag HTML, id, class

id imemakai tanda # didepan nama selector

class imemakai tanda titik didepan nama selector

contoh :

h1 { color : blue ; }  tag html h1

#teks { color :green; }  id

.warna { color : red; }  class

b) Declaration

Berisi aturan-aturan css yang terdiri dari properti dan nilainya yang dipisahkan oleh

tanda titik dua. Setiap aturan css harus diakhiri dengan tanda titik koma.

2. Selector ID dan Class pada CSS

Untuk selector id pada css ditandai dengan tanda #(pagar) contoh penulisan seperti berikut:

Penggunaanya dalam script HTML ::

Yang perlu di perhatikan jika imemakai selector id :

 Sebuah elemen HTML hanya boleh memiliki 1 id

 Setiap halaman hanya boleh memiliki 1 elemen dengan id ini

 Dapat di gunakan sebagai penanda halaman untuk link

 Digunakan juga untuk javascript

 Sebaiknya tidak digunakan untuk css ( lebih baik gunakan class)

Untuk selector class pada css ditandai dengan tanda .(titik) contoh penulisan seperti berikut:

Penggunaanya dalam script HTML :

3. Properti-properti CSS

Properti CSS jumlahnya sangat banyak, berikut beberapa diantaranya:

Pseduo-Class

Adalah sebuah kelas semu yang dimiliki oleh elemen HTML, yang membuat kita dapat

mendefinisikan style pada keadaan tertentu dari elemen ini . Pseduo-class terbagi

menjadi beberapa type, sebagai berikut :

1. Yang berhubungan dengan link

 : link

Style default pada sebuah link (a yang memiliki href)

 : hover

Style ketika kursor mouse berada diatas sebuah link / elemen

 : active

Style ketika sebuah link di klik (keadaan aktif)

 : visisted

Style ketika sebuah link sudah pernah di kunjungi sebelumnya (imemakai browser

yang sama)

2. Yang berhubungan dengan posisi elemen (ada pada css 3)

 : first-child

Memilih elemen pertama dari sebuah parent (elemen pembungkusnya )

 : last-child

Memilih elemen terakhir dari sebuah parent (elemen pembungkusnya )

 : nth-child(n)

Memilih elemen ke (n) dari sebuah parent (elemen pembungkusnya )

n bisa berarti urutan 1,2,3,….. atau pola (2n),(3n+2), atau ganjil dan genap, even &

odd

 : first-of-type

Memilih elemen pertama dari sebuah jenis / tipe tag

 : last-of-type

Memilih elemen terakhir dari sebuah jenis / tipe tag

4. PADDING, MARGIN DAN BORDER

Dalam CSS dikenal istilah ‘Box Model’. Perhatikan gambar berikut ini:

Padding : Menentukan jarak komponen body ke border atau Ukuran jarak bagian dalam

Border : Adalah garis tepi dari komponen

Margin : Adalah Ukuran jarak bagian luar atau ukuran jarak sesudah Border

CSS imemakai konsep ini dalam mengatur tag-tag HTML. Pada gambar, bayangkan area

‘Content’ misalnya adalah sebuah paragraph. Obyek paragraph ini akan dianggap CSS

memiliki area padding, border, dan margin disekitarnya. Keberadaan area-area ini berguna

untuk pengaturan tata letak. Misalnya ingin diatur agar 2 buah gambar yang terletak

berdampingan tidak terlalu rapat, maka kita dapat memperbesar lebar dari area margin agar

jarak antara gambar lebih lebar.

Padding

ditulis dengan CSS padding:5px 5px 5px 5px; urutan nilai angkanya adalah atas,

kanan, bawah dan kiri, atau Anda bisa imemakai

padding-left:5px; ini adalah untuk pengaturan padding bagian kiri

padding-right:5px;  ini adalah untuk pengaturan padding kanan

padding-top:5px;  untuk bagian atas dan

padding-bottom:5px;  untuk bagian bawah, Ingat satuan px(pixels) bisa kamu ganti

sesuai satuan yang lain yang sesuai

Border

Ditulis dengan CSS border:1px dotted #000000;  urutan penggunaanya adalah

ukran border, style border dan warna border, atau bisa imemakai

border-width:1px;  ini adalah ketebalan border

border-style:dotted;  ini adalah jenis bordernya bisa kamu ganti dengan dashed,

solid, double, groove, ridge, inset, outset dan lainya

border-color:#FFFFFF;  ini adalah warna dari border.. kamu bisa mengganti code

warnanya (www.colorschemer.com/online)

Margin

Ditulis dengan CSS margin:5px 5px 5px 5px;  urutanya atas, kanan, bawah dan kiri,

atau bisa menngunakan seperti padding diatas

margin-left:5px;

margin-right:5px;

margin-top:5px;

margin-bottom:5px;

keterangan lainya bisa mengikuti keterangan padding diatas

Latihan CSS :

- Salin script berikut ini, lalu simpan di folder modul_web1 dengan nama style_css.css

- Salin script berikut ini, lalu simpan di folder modul_web1 dengan nama latihan_css.html

- Hasil di web browser :

MINGGU KE 5

Membuat Template Web

Deskripsi:

Pada pembahasan materi kali ini kita akan membuat Design Web Responsive. Design Web

Responsive adalah sebuah metode atau pendekatan sistem web desain yang bertujuan

memberikan pengalaman berselancar yang optimal dalam berbagai perangkat, baik mobile

maupun komputer

Tujuan Pembelajaran:

Setelah melakukan bagian ini mahasiswa mampu:

1. Memahami dan imemakai HTML dalam membuat template web

2. Memahami dan imemakai CSS dalam membuat template web

Langkah-langkah yang perlu di gunakan dalam pembuatan web ini adalah :

1. Tentukan tema website

- Tema web perpustakaan

2. Membuat sketsa / blueprint / rancangan dari halaman web yang akan di buat

Seperti contoh berikut ini :

3. Web responsive berarti web yang tampilannya mengikuti ukuran layar gadget yang di

gunakan untuk akses web ini

– Buat folder di xampp/htdocs dengan nama : perpus

– Didalam folder perpus, siapkan 2 buah folder :

• images  untuk simpan gambar

• css  untuk simpan file css

– Buka editor, salin script css berikut : simpan di folder css dengan nama style.css

padding : 0;

margin : 0;

box-sizing : border-box;

}

body{

backgroud : #dedede;

font-family : 'Verdana',arial,sans-serif;

font-size : 15px;

}

margin-bottom : 20px;

line-height : 1.5em;

}

h3{

margin-bottom : 20px;

border-bottom : 1px solid #aaa;

}

text-decoration : none;

color : #333;

}

a:hover{

color : #666;

}

.container{

max-width : 1080px;

margin : 20px auto;

background : #fff;

overflow : hidden;

padding : 10px;

}

.header{

border : 1px solid #dedede;

padding : 10px;

margin : 10px;

background : #9E9AFB;

}

/* main */

.left{

width : 250px;

border : 1px solid #dedede;

padding : 10px;

margin : 10px;

float : left;

}

.left ul{

list-style-type : none;

}

.left ul li{

display : block;

}

.left ul li a{

display :block;

border-bottom : 1px solid #dedede;

margin-bottom : 10px;

padding : 10px 5px;

font-color : #D3D2ED;

}

.left ul li a:hover{

color:#461AF3;

}

.middle{

width : 500px;

border : 1px solid #dedede;

padding : 10px;

margin : 10px;

float : left;

}

.middle img{

max-width : 100%;

height : auto;

}

.middle a{

font-wight:bold;

}

.right{

width : 250px;

border : 1px solid #dedede;

padding : 10px;

margin : 10px;

float : left;

}

.right ul{

list-style-type : none;

}

.right ul li{

display : block;

}

.right ul li a{

display :block;

border-bottom : 1px solid #dedede;

margin-bottom : 10px;

padding : 10px 5px;

}

.right ul li a:hover{

color:#461AF3;

}

.footer{

clear : both;

border : 1px solid #dedede;

padding : 15px;

margin : 10px;

background : #9E9AFB;

}

@media screen and (max-width:959px){

#container{

width : 100%;

}

#left-column{

width : 70%;

}

#right-column{

width : 30%;

}

img{

width : 100%;

}

/*MEDIA QUERIES ( Responsive )

*******************************************/

@media screen and (max-width:1080px)

{

.container{

width : 100%;

}

.left{

width : 25%;

background : #D6CCFE;

}

.middle{

width : 68%;

float : right;

}

.right{

clear : both;

padding : 1% 4%;

width : auto;

float : none;

background : #D6CCFE;

}

/* untuk ukuran layar 700px kebawah */

@media screen and (max-width: 780px)

{

.header,

.footer{

text-align : center;

}

.left {

width : auto;

float : none;

}

.middle {

width : auto;

float : none;

}

.right {

width : auto;

float : none;

}

Buatlah script untuk tampilan berikut : index.html simpan di dalam folder perpus

Tampilan diatas ini kodenya:

<!DOCTYPE html>

<head>

<title> Website Responsive</title>

</head>

<body>

<h1 align="center"> Selamat Datang DI Pepustakaan XYZ </h1>

</div>

<ul>

<li><a href="#">Login</a></li>

<li><a href="#">Daftar Buku</a></li>

</ul>

</div>

<h3 align="center">Berita</h3>

<p align="center"><strong><a href="#" >Membuat Design Web

Responsive</a></strong></p>

<p><a href="#">Baca Selengkapnya >> </a>

</div>

<h3 align="center">Buku Terpopuler</h3>

<p>

<ul>

<li><a href="#">Web Design</a></li>

<li><a href="#">Pemrograman</a></li>

<li><a href="#">Database</a></li>

</ul>

</p>

</div>

</a></p>

</div>

</body>

</html>

Penjelasan Source Code

merupakan syntax yang berfungsi untuk menampilkan web sesuai dengan layar.

merupakan External Style sheet yang digunakan untuk mengload file css .

Pada Struktur HTML berikut terdapat 3 class utama yaitu header , main dan footer .

Yaitu :

<div class="header">digunakan untuk bagian header</div>

<div class="left">Digunakan kolom bagian Kiri...</div>

<div class="middle">Digunakan kolom bagian tengah...</div>

<div class="right">Digunakan kolom bagian kanan...</div>

</div>

<div class="footer">Digunakan bagian footer...</div>

</div>

MINGGU KE 6

Pengenalan Codeigniter

Deskripsi:

Pada pertemuan ini akan dibahas tentang framework dan jenis-jenisnya, codeigniter,

pemasangan software yang dibutuhkan, cara memasang dan imemakai codeigniter,

struktur dari codeigniter, file konfigurasi codeigniter, kontroler standar, dan latihan

perkenalan.

Tujuan Pembelajaran:

Setelah melakukan bagian ini mahasiswa mampu:

1. Memahami konsep dasar Framework Codeigniter

2. memahamai kelebihan dari codeigniter

3. memahami cara instalasi codeigniter

A. Framework Web

Web Application Framework (WAF), atau sering disingkat web framework, adalah

Suatu kumpulan kode berupa pustaka (library) dan alat (tool) yang dipadukan sedemikian

rupa menjadi kerangka kerja (framework) guna memudahkan dan mempercepat proses

pengembangan aplikasi.

Framework web untuk PHP:

 Codeigniter

 Yii

 Slim framework

 Zend framework

 Laravel

 Symfony

 CakePHP

 Phalcon

 FuelPHP, dll

Sebagian besar dari framework di atas mengimplementasikan pola desain Model-

View-Controller (MVC), yang memisahkan bagian kode untuk penanganan proses bisnis

dengan bagian kode untuk keperluan presentasi (tampilan).

B. Codeigniter

Codeigniter adalah framework web utnuk bahasa pemrograman PHP, yang dibuat oleh

Rick Ellis pada tahun 2006, penemu dan pendiri EllisLab (www.ellislab.com). EllisLab

merupakan suatu tim kerja yang berdiri pada tahun 2002 yang bergerak di bidang

pembuatan software dan tool untuk para pengembang web. Sejak tahun 2014 sampai

sekarang , EllisLab telah menyerahkan hak kepemilikan codeigniter ke British columbia

Institue of Technology (BCIT) saat ini situs resmi codeigniter adalah www.codeigniter.com.

C. Instalasi Software

Software yang dibutuhkan pada pembelajaran kali ini yaitu Codeigniter versi 3.1.11

yang dapat didwonload pada link https://codeigniter.com atau dapat anda dapat download

pada link berikut:

https://drive.google.com/file/d/1Xb-w_qabJCcLKGt-WxXA0h04vOQccKcq/view?usp=sharing

1. Instalasi Codeigniter

a. Download Package codeigniter pada situ resminya yang sudah disebutkan di atas.

b. Setelah didownload, ektrak file codeigniter pada direktori C:\xampp\htdocs

c. lalu ubah folder Codeigniter menjadi sesuai keinginan kita. disini saya akan ubah

folder codeigniter ini menjadi belajar-codeigniter.

d. Setelah itu, sekarang coba akses folder ini melalui browser dengan mengetikkan

url http://localhost/belajar-codeigniter. jangan lupa menyalakan XAMPP terlebih

dahulu.

e. Jika sudah tampil halaman Welcome Codeigniter, itu artinya anda telah berhasil

melakukan instalasi codeigniter.

2. Struktur Folder Codeigniter

Di dalam folder codeigniter terdapat 3 folder utama yaitu Application, System, User

Guide. Folder application berguna sebagai tempat untuk mengembangkan aplikasi web

nanti, Folder system berisi library atau kumpulan fungsi-fungsi dasar Codeigniter

(CI), sedangkan User Guide berisi sebagai buku panduan atau dokumentasi dari codeigniter.

Pertama kali kita fokus pada folder application/config di dalam folder config ini

terdapat file-file konfigurasi utama dan pertama kali untuk memudahkan pembuatan dan

pengembangan semua file yang akan dibuat dan semua berawal dari file routes.php Apabila

kita buka file ini , maka kita akan menemukan default_controller yang telah terisi

dengan nama “welcome”, yang mana default_controller ini berfungsi ketika user tidak

melakukan atau memasukkan apapun pada URL browser, maka secara otomatis mencari

controller dengan nama “welcome”.

Controller Welcome itu sendiri bisa anda temukan pada folder

application/controllers. Pada file welcome_controller ini terdapat fungsi index

yang gunanya meload bagian view atau memanggil halaman views dengan nama

welcome_messages sebagai berikut.

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

class Welcome extends CI_Controller {

/**

* Index Page for this controller.

* Maps to the following URL

* http://example.com/index.php/welcome

* - or -

* http://example.com/index.php/welcome/index

* - or -

* Since this controller is set as the default controller in

* config/routes.php, it's displayed at http://example.com/

* So any other public methods not prefixed with an underscore will

* map to /index.php/welcome/<method_name>

* @see https://codeigniter.com/user_guide/general/urls.html

public function index()

{

$this->load->view('welcome_message');

}

Sekarang lihat pada bagian views yang terletak pada application/views. Pada folder

view ini terdapat file dengan nama welcome_message. Pada bagian inilah semua html

dan css akan diletakkan yang nantinya akan ditampilkan ke pengunjung.

<?php

defined('BASEPATH') or exit('No direct script access allowed');

<!DOCTYPE html>

<head>

<title>Welcome to CodeIgniter</title>

::selection {

background-color: #E13300;

color: white;

}

::-moz-selection {

background-color: #E13300;

color: white;

}

body {

background-color: #fff;

margin: 40px;

font: 13px/20px normal Helvetica, Arial, sans-serif;

color: #4F5155;

}

a {

color: #003399;

background-color: transparent;

font-weight: normal;

}

h1 {

color: #444;

background-color: transparent;

border-bottom: 1px solid #D0D0D0;

font-size: 19px;

font-weight: normal;

margin: 0 0 14px 0;

padding: 14px 15px 10px 15px;

}

code {

font-family: Consolas, Monaco, Courier New, Courier, monospace;

font-size: 12px;

background-color: #f9f9f9;

border: 1px solid #D0D0D0;

color: #002166;

display: block;

margin: 14px 0 14px 0;

padding: 12px 10px 12px 10px;

}

#body {

margin: 0 15px 0 15px;

}

p.footer {

text-align: right;

font-size: 11px;

border-top: 1px solid #D0D0D0;

line-height: 32px;

padding: 0 10px 0 10px;

margin: 20px 0 0 0;

}

#container {

margin: 10px;

border: 1px solid #D0D0D0;

box-shadow: 0 0 8px #D0D0D0;

}

</style>

</head>

<body>

<h1>Welcome to CodeIgniter!</h1>

<p>The page you are looking at is being generated dynamically by Code

Igniter.</p>

<p>If you would like to edit this page you'll find it located at:</p>

<code>application/views/welcome_message.php</code>

<p>The corresponding controller for this page is found at:</p>

<code>application/controllers/Welcome.php</code>

<p>If you are exploring CodeIgniter for the very first time, you shou

ld start by reading the <a href="user_guide/">User Guide</a>.</p>

</div>

<p class="footer">Page rendered in <strong>{elapsed_time}</strong> second

s. <?php echo (ENVIRONMENT === 'development') ? 'CodeIgniter Version <strong>' .

CI_VERSION . '</strong>' : '' ?></p>

</div>

</body>

</html>

Contoh menampilkan Biodata

Buatlah sebuah file diberi nama Contoh1.php disimpan dalam folder

Application/Controllers

Untuk melihat hasilnya silahkan ketik URL berikut localhost/belajar-

codeigniter/index.php/contoh1

MINGGU KE 7

Model View Controller

Deskripsi:

Pada pertemuan ini meliputi tentang pengertian, maksud dan konsep daripada MVC disertai

contoh penggunaan mulai dari controller saja, kemudian controller dengan view, dan contoh

imemakai controller, view, dan model. Pada pertemuan ini juga dijelaskan tentang

aturan dalam membuat MVC, menentukan controller standar default, menghilangkan

index.php, pembuatan file .htaccess dan bagaimana mekanisme pengiriman nilai antara

Model, view dan controller

Tujuan Pembelajaran:

Setelah melakukan bagian ini pembaca mampu:

1. Memahami konsep dan aturan penggunaan MVC

2. Menentukan controller standar (default)

3. memahami cara menghilangkan index.php

4. memahami dan imemakai script parsing data

A. Pengertian Model View Controller (MVC)

Pada pengertian codeigniter di atas tadi dijelaskan bahwa codeigniter imemakai

metode MVC. Apa itu MVC? kita juga harus mengetahui apa itu MVC sebelum masuk dan lebih

jauh dalam belajar codeigniter.

MVC adalah teknik atau konsep yang memisahkan komponen utama menjadi tiga

komponen yaitu model, view dan controller.

a. Model

Model adalah kelas yang merepresentasikan atau memodelkan tipe data yang akan

digunakan oleh aplikasi. Model juga dapat didefinisakn sebagai bagian penanganan

yang berhubungan dengan pengolahan atau manipulasi database. seperti misalnya

mengambil data dari database, menginput dan pengolahan database lainnya. semua

intruksi atau fungsi yang berhubung dengan pengolahan database di letakkan di dalam

model. Sebagai contoh, jika ingin membuat aplikasi untuk menghitung luas dan keliling

lingkaran, maka dapat memodelkan objek lingkaran sebagai kelas model.

Sebagai catatan, Semua model harus disimpan di dalam folder application\models

b. View

View merupakan bagian yang menangani halaman user interface atau halaman yang

muncul pada user(pada browser). tampilan dari user interface di kumpulkan pada

view untuk memisahkannya dengan controller dan model sehingga memudahkan web

designer dalam melakukan pengembangan tampilan halaman website.

c. Controller

Controller merupakan kumpulan intruksi aksi yang menghubungkan model dan view,

jadi user tidak akan berhubungan dengan model secara langsung, intinya data yang

tersimpan di database (model) di ambil oleh controller dan kemudian controller pula

yang menampilkan nya ke view. Jadi controller lah yang mengolah intruksi.

Dari penjelasan tentang model view dan controller di atas dapat disimpulkan bahwa

controller sebagai penghubung view dan model. misalnya pada aplikasi yang menampilkan

data dengan imemakai metode konsep mvc, controller memanggil intruksi pada model

yang mengambil data pada database, kemudian controller yang meneruskannya pada view

untuk ditampilkan. jadi jelas sudah dan sangat mudah dalam pengembangan aplikasi dengan

cara mvc ini karena web designer atau front-end developer tidak perlu lagi berhubungan

dengan controller, dia hanya perlu berhubungan dengan view untuk mendesign tampilann

aplikasi, karena back-end developer yang menangani bagian controller dan modelnya. Jadi

pembagian tugas pun menjadi mudah dan pengembangan aplikasi dapat dilakukan dengan

cepat dan terstruktur.

Bentuk umum model seperti berikut:

Class Nama_model extends CI_model {

// badan kelas

}

jika ingin memanggil konstruktor kelas CI_model dari konstruktor kelas model yang

didefinisikan, maka bentuk umumnya seperti berikut:

Class Nama_model extends CI_model {

//konstruktor kelas model

Function __construct( ) {

//memanggil konstruktor kelas CI_model

$parent: : __construct( );

//...

}

// ...

}

Contoh1 penggunaan hanya controller

Controller Latihan1 simpan dalam folder Application/controllers/

<?php

class Latihan1 extends CI_Controller

{

public function index()

{

echo "Selamat Datang.. selamat belajar Web Programming";

}

Untuk melihat hasilnya ketikkan url localhost/belajar-codeigniter/index.php/latihan1

Contoh2 imemakai Controller dan Model

Model Model_latihan1.php simpan di application\models\

<?php

class Model_latihan1 extends CI_Model

{

//membuat variable untuk menampung nilai

public $nilai1, $nilai2, $hasil;

//method penjumlahan

public function jumlah($nil1 = null, $nil2 = null)

{

$this->nilai1 = $nil1;

$this->nilai2 = $nil2;

$this->hasil = $this->nilai1 + $this->nilai2;

return $this->hasil;

}

Ubah controller Latihan1 yang sebelumnya sudah dibuat sehingga menjadi seperti berikut:

<?php

class Latihan1 extends CI_Controller

{

public function index()

{

echo "Selamat Datang.. selamat belajar Web Programming";

}

public function penjumlahan($n1, $n2)

{

$this->load->model('Model_latihan1');

$hasil = $this->Model_latihan1->jumlah($n1, $n2);

echo "Hasil Penjumlahan dari ". $n1 ." + ". $n2 ." = " .$hasil;

}

Untuk melihat hasilnya ketikkan url

localhost/belajar-codeigniter/index.php/latihan1/penjumlahan/2/6

Contoh3 imemakai Controller, View dan Model

View view-latihan1.php Simpan di application\views\

<html>

<head>

<title>Latihan 1</title>

</head>

<body>

Halo Kawan.. Yuk kita belajar web programming..!!!<br>

Nilai 1 = <?= $nilai1; ?>

Nilai 2 = <?= $nilai2; ?>

ini hasil dari pemodelan dengan methode penjumlahan yaitu <?=

$nilai1 . " + " . $nilai2 . " = " . $hasil; ?>

</body>

</html>

Ubah controller Latihan1 yang sebelumnya sudah dibuat sehingga menjadi seperti berikut:

<?php

class Latihan1 extends CI_Controller

{

public function index()

{

echo "Selamat Datang.. selamat belajar Web Programming";

//$this->load->view('view-latihan1');

}

public function penjumlahan($n1, $n2)

{

$this->load->model('Model_latihan1');

$data['nilai1'] = $n1;

$data['nilai2'] = $n2;

$data['hasil'] = $this->Model_latihan1->jumlah($n1, $n2);

$this->load->view('view-latihan1', $data);

}

Untuk melihat hasilnya ketikkan url

localhost/belajar-codeigniter/index.php/latihan1/penjumlahan/2/6

B. Menetukan Kontroler Standar (Default)

Controller standar (default) adalah controller yang akan dipanggil secara otomatis

ketika user tidak menyertakan nama controller di dalam URI.

Contoh penulisan URI:

http://localhost/belajar-codeigniter/index.php

pada contoh permintaan di atas, kita tidak menyertakan nama controller yang akan dipanggil

(segmen pertama). Permintaan ini akan memanggil controller standar yang sudah

didefinisikan oleh codeigniter.

Controller standar dapat ditentukan sendiri sesaui dengan keinginan, yaitu dengan cara

melakukan konfigurasi pada file routes.php yang terletak pada folder application\config\.

cari baris code berikut:

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

Ubah kata welcome dengan nama controller yang diinginkan untuk dijadikan controller

standar

C. Menghilangkan index.php pada codeigniter

Dalam rangka pengamanan web site, biasanya seorang web developer akan melakukan

berbagai trik untuk dapat mengamankan web miliknya. Ada yang dibuatkan sistem sandi

yang diubah secara berkala, ada yang imemakai sistem sandi dengan teknik kriptografi

yaitu mengenkrip sandi sedemikian rupa agar tidak mudah dipecahkan oleh pihak yang

tidak bertanggung jawab, ada juga yang imemakai trik kamuplase pengaksesan file, dan

lain lain. Berikut ini adalah salah satu trik untuk mengelabuhi pihak yang tidak bertanggung

jawab agar tidak mudah untuk melakukan pencurian atau penggunaan data yang merugikan

yaitu dengan cara menghilangkan index.php pada url codeigniter. cara nya buka config.php

yang terletak pada folder application/config/, kemudian cari pengaturan

$config[‘index_page] seperti di bawah ini.

$config['index_page'] = 'index.php';

Kemudian hapus index.php pada pengaturan sehingga menjadi

$config['index_page'] = '';

Setelah menghapus index, selanjutnya adalah membuat file .htaccess pada direktori

root codeigniter. Caranya buat file baru dengan nama .htaccess tanpa diberi extensi, karena

.htaccess merupakan file yang tidak berekstensi. Diawali dengan tanda titik ( . ).

File belajar-codeigniter/.htaccess

RewriteEngine On

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule ^(.*)$ index.php/$1 [L]

Simpan dan sekarang coba akses di web. Di sini untuk contoh dalam rangka mencoba

apakah sudah berhasil atau belum menghilangkan index pada codeigniter, kita akan coba

mengakses method penjumlahan yang sudah ada pada controller Latihan1.php tanpa

menyertakan kata index.php pada URL.

Jika biasanya untuk mengakses method dalam kontroler Latihan1 diatas harus dengan

mengetikkan

http://localhost/ belajar-codeigniter/index.php/latihan1/penjumlahan/4/6

maka sekarang tidak perlu, melainkan bisa langsung mengakses alamat url di atas

tanpa menyertakan kata index.php

http://localhost/ belajar-codeigniter/ latihan1/penjumlahan/4/6

berikut hasil dalam browser

D. Aturan merancang Model, View, dan Controller

1. Model

Secara umum perancangan model dapat dibuat imemakai aturan berikut:

a. Model harus memiliki atribut yang dapat mewakili element tertentu.

b. Model seharusnya berisi kode kode yang menangani proses bisnis untuk data

bersangkutan, misalnya untuk melakukan proses validasi data.

c. Model boleh berisi kode kode yang dugunakan untuk memanipulasi data,

misalnya untuk menambah baris data baru, mengubah baris data, dan

menghapus baris data pada sebuah tabel yang terdapat dalam database.

d. Model seharusnya tidak berisi kode kode yang berkaitan langsung dengan

permintaan yang dilakukan oleh user melalu URL (tidak berisi $_GET maupun

$_POST). Pekerjaan seperti ini seharusnya dilakukan oleh controller.

e. Model seharusnya tidak berisi kode kode yang berkaitan dengan presentasi

(tampilan) halaman web yang akan disajikan ke hadapan user. Pekerjaan

semacam ini seharusnya dilakukan oleh view.

2. View

Berikut ini aturan yang dapat digunakan untuk merancang view.

a. View harus berisi kode kode yang bersifat presentasional, biasanya berupa kode

HTML. View juga dapat berisi perintah perintah PHP sederhana yang masih

berkaitan dengan proses pembuatan tampilna, misalnya untuk menampilkan

data yang dihasilkan oleh model tertentu.

b. View seharusnya tidak berisi kode PHP yang melakukan akses data secara

langsung ke database. Pekerjaan semacam ini sebaiknya dilakukan oleh model.

c. View seharunsnya menghindari kode PHP yang mengakses secara langsung

permintaan dari user (tidak berisi $_GET maupun $_POST). Tugas ini sebaiknya

didelegasikan ke controller

3. Controller

Berikut ini aturan yang dapat digunakan untuk merancang controller.

a. Controller boleh mengakses $_GET, $_POST, dan variabel variabel PHP lainnya

yang berkaitan dengan permintaan user.

b. Controller boleh membuat objek (instance) dari kelas kelas model dan

mengarahkan ke view (jika model bersangkutan menghasilkan data yang perlu

ditampilkan ke user)

c. Controller seharusnya tidak berisi kode kode yang mengakses data secara

langsung dari database. Tugas seperti ini sebaiknya dilakukan oleh model. Dan

controller tinggal imemakai nya saja.

d. Controller seharusnya tidak berisi kode kode HTML yang diperlukan untuk

tujuan presentasi. Tugas ini sebaiknya dilakukan oleh view.

E. Parsing Data (mengirimkan nilai) dari controller Ke View

Untuk mengirimkan nilai dari controller ke view, anda dapat mengirimkannya dengan

imemakai bantuan array. Jadi data yang akan diparsing kita masukkan ke array.

Perhatikan contoh cara pengiriman nilai ke view codeigniter berikut ini.

Contoh5 mengirimkan nilai dari controller ke view

Buatlah sebuah view baru beri nama view-form-matakuliah.php kemudian simpan dalam

forlder Application/views/ dan ketik script berikut:

<html>

<head>

<title>Form Input Matakuliah</title>

</head>

<body>

<form action="<?= 'http://localhost/belajar-

codeigniter/matakuliah/cetak'; ?>" method="post">

<table>

<tr>

Form Input Data Mata Kuliah

</th>

</tr>

<tr>

<hr>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

<option value="">Pilih SKS</option>

</select>

</td>

</tr>

<tr>

</td>

</tr>

</table>

</form>

</center>

</body>

</html>

Script di atas akan membentuk sebuah tampilan form input data yang akan di submit

kemudian di proses ke sebuah controller. Untuk kita perlu membuat controller terlebih

dahulu beri nama Matakuliah.php kemudian simpan dalam folder

Application/controllers/ lalu ketiklah script berikut ini:

<?php

class Matakuliah extends CI_Controller

{

public function index()

{

$this->load->view('view-form-matakuliah');

}

public function cetak()

{

$data = [

'kode' => $this->input->post('kode'),

'nama' => $this->input->post('nama'),

'sks' => $this->input->post('sks')

];

$this->load->view('view-data-matakuliah', $data);

}

Dalam controller di atas, data yang diinput pada form input matakuliah di post kan dan di

masukan ke dalam variabel yang bertipe array yang diberi nama $data dan variable array

ini memiliki 3 komponen array yaitu kode, nama, sks. Kemudian nilai dari element-element

array tadi akan dikirimkan kembali ke view dengan perintah $this->load->view(‘view-

data-matakuliah’, $data). jadi kita perlu membuat sebuah view baru lagi beri nama view-

data-matakuliah.php kemudian simpan dalam folder Application/views/ dan ketiklah

script ini:

<html>

<head>

<title>Tampil Data Matakuliah</title>

</head>

<body>

<table>

<tr>

Tampil Data Mata Kuliah

</th>

</tr>

<tr>

<hr>

</td>

</tr>

<tr>

<td>

<?= $kode; ?>

</td>

</tr>

<tr>

<td>

<?= $nama; ?>

</td>

</tr>

<tr>

<td>

<?= $sks; ?>

</td>

</tr>

<tr>

<a href="<?= 'http://localhost/belajar-

codeigniter/matakuliah'; ?>">Kembali</a>

</td>

</tr>

</table>

</center>

</body>

</html>

MINGGU KE 9

Membuat Template Web Sederhana

Deskripsi:

Pertemuan ini berisi pembahasan dalam membuat template sederhana yang dinamis dengan

membagi satu file view index.php menjadi beberapa file view. Kemudian ada pembahasan

tentang pengaturan base_url dan konfigurasi yang berkaitan dengan url.

Tujuan Pembelajaran:

Setelah melakukan bagian ini pembaca mampu:

1. memahami dan membuat template web sederhana

2. memahami dan mengatur base_url()

A. Membuat Template Sederhana yang dinamis

Membuat dan menampilkan template sederhana, dibutuhkan pembuatan controller

dan view agar hasilnya bisa dilihat.

Buatlah sebuah kontroler yang akan digunakan untuk menampilkan view. Sebagai contoh,

buatlah kontroler Web.php lalu simpan di application/controllers/Web.php.

<?php

defined(‘BASEPATH’) or exit (‘no direct script access allowed’);

class Web extends CI_Controller{

function __construct(){

parent::__construct();

}

public function index(){

$data[‘judul’] = “Halaman Depan”;

$this->load->view(‘v_header’,$data);

$this->load->view(‘v_index’,$data);

$this->load->view(‘v_footer’,$data);

}

Kemudian buatlah 3 buah file view beri nama v_header.php, v_index.php, dan

v_footer.php lalu simpan dalam folder application/views/ kemudian ketik script berikut:

v_header.php

<!DOCTYPE html>

<html>

<head>

<title>Web Prog II | Merancang Template sederhana dengan

codeigniter</title>

?>assets/css/stylebuku.css”>

</head>

<body>

<h1>RentalBuku.net</h1>

<h3>Membuat Template Sederhana dengan CodeIgniter</h3>

</hgroup>

<nav>

<ul>

<li><a href=”<?php echo base_url().’index.php/web’

?>”>Home</a></li>

<li><a href=”<?php echo

base_url().’index.php/web/about’ ?>”>About</a></li>

</ul>

</nav>

</header>

v_index.php

<p align=’justify’>Pada pengertian codeigniter di atas

tadi di jelaskan bahwa codeigniter imemakai metode MVC. Apa itu

MVC? Kita juga harus mengetahui apa itu MVC sebelum masuk dan lebih

jauh dalam belajar codeigniter.</p>

<p>MVC adalah teknik atau konsep yang memisahkan komponen

utama menjadi tiga komponen yaitu model, view dan controller.</p>

<li>Model</li>

<p align=’justify’>Model adalah kelas yang merepresentasikan atau

memodelkan tipe data yang akan digunakan oleh aplikasi. Model juga

dapat didefinisakn sebagai bagian penanganan yang berhubungan dengan

pengolahan atau manipulasi database. Seperti misalnya mengambil data

dari database, menginput dan pengolahan database lainnya. Semua

intruksi atau fungsi yang berhubung dengan pengolahan database di

letakkan di dalam model. Sebagai contoh, jika ingin membuat aplikasi

untuk menghitung luas dan keliling lingkaran, maka dapat memodelkan

objek lingkaran sebagai kelas model.</p>

<p align=’justify’>Sebagai catatan, Semua model harus disimpan di

dalam folder application\models</p>

<p align=’justify’>View merupakan bagian yang menangani halaman user

interface atau halaman yang muncul pada user(pada browser). Tampilan

dari user interface di kumpulkan pada view untuk memisahkannya dengan

controller dan model sehingga memudahkan web designer dalam melakukan

pengembangan tampilan halaman website.</p>

<li>Controller</li>

<p align=’justify’>Controller merupakan kumpulan intruksi aksi yang

menghubungkan model dan view, jadi user tidak akan berhubungan dengan

model secara langsung, intinya data yang tersimpan di database (model)

di ambil oleh controller dan kemudian controller pula yang menampilkan

nya ke view. Jadi controller lah yang mengolah intruksi.</p>

<p align=’justify’>Dari penjelasan tentang model view dan controller

di atas dapat di simpulkan bahwa controller sebagai penghubung view

dan model. Misalnya pada aplikasi yang menampilkan data dengan

imemakai metode konsep mvc, controller memanggil intruksi pada

model yang mengambil data pada database, kemudian controller yang

meneruskannya pada view untuk di tampilkan. Jadi jelas sudah dan

sangat mudah dalam pengembangan aplikasi dengan cara mvc ini karena

web designer atau front-end developer tidak perlu lagi berhubungan

dengan controller, dia hanya perlu berhubungan dengan view untuk

mendesign tampilann aplikasi, karena back-end developer yang menangani

bagian controller dan modelnya. Jadi pembagian tugas pun menjadi mudah

dan pengembangan aplikasi dapat di lakukan dengan cepat dan

terstruktur.</p>

</section>

V_footer.php

<a href=”http://www.RentalBuku.com”>RentalBuku</a>

</footer>

</div>

</body>

</html>

Kemudian buatlah stylebuku.css untuk membuat tampilan lebih bagus dan simpan di dalam

folder root seperti berikut: belajar-codeigniter/assets/css/

body{

background: #eee;

color: #333;

font-family: sans-serif;

font-size:15px;

}

#wrapper{

background: #fff;

width: 1100px;

margin: 20px auto;

}

#wrapper header{

background: #232323;

padding: 20px;

}

#wrapper header hgroup{

float: left;

color: #fff;

}

#wrapper header nav{

float: right;

margin-top: 50px;

}

#wrapper header nav ul{

padding: 0;

margin: 0;

}

#wrapper header nav ul li{

float: left;

list-style: none;

}

#wrapper header nav ul li a{

padding: 15px;

color: #fff;

text-decoration: none;

}

.clear{

clear: both;

}

footer{

background: #232323;

padding: 20px;

}

footer a{

color: #fff;

text-decoration: none;

}

section{

padding: 20px;

}

Setelah membuat file-file di atas. sebelum di jalankan melalui browser, terlebih dahulu perlu

dilakukan seting base_url( ) untuk memudahkan dalam menghubungkan file view dengan

file css nya.

B. Seting base_url () pada codeigniter

Untuk melakukan seting base_url( ), dapat dilakukan melalui file config.php yang ada

di dalam application/config/config.php. buka file ini lalu cari baris sintak seperti

berikut:

$config['base_url'] = '';

Kemudian diubah menjadi

$config['base_url'] = 'http://localhost/belajar-codeigniter/';

pengaturan di atas mengikuti alamat path projek masing-masing. Kemudian dapat

diperhatikan pada contoh file v_index.php di bagian <head> bahwa untuk menghubungkan

dengan file css, dibutuhkan bantuan base_url( ). seperti berikut:

?>assets/css/stylebuku.css">

Hasil perintah di atas akan sama seperti ini

codeigniter/assets/css/stylebuku.css">

Hal ini di atas dikarenakan base_url( ) sudah terlebih dahulu di seting menjadi

“localhost/ belajar-codeigniter”. Ketika base_url( ) sudah diseting atau diubah dari bentuk

default menjadi seperti di atas, maka perlu juga dilakukan pengaktifan helper url. Hal ini

dapat dilakukan dengan cara menambahkan script load helper pada controller Web.php

yang sudah dibuat pada bagian construct.

<?php

defined('BASEPATH') or exit ('no direct script access allowed');

class Web extends CI_Controller{

function __construct(){

parent::__construct();

$this->load->helper('url');

}

public function index(){

$data['judul'] = "Halaman Depan";

$this->load->view('v_header',$data);

$this->load->view('v_index',$data);

$this->load->view('v_footer',$data);

}

Atau bisa juga melalu file autoload.php yang ada di dalam folder application/config/

kemudian cari baris sintak seperti di bawah

$autoload['helper'] = array();

Kemudian diubah dengan ditambahkan kata ‘url’ menjadi seperti di bawah

$autoload['helper'] = array('url');

Setelah selesai, bisa dilihat hasilnya dengan menjalankan kontroler Web.php

http://localhost/ belajar-codeigniter/web

hasilnya seperti gambar di bawah.

Demikian tampilan web sederhana sudah berhasil dibuat pada codeigniter. Template yang

dibuat di atas merupakan template dinamis. Maksudnya tampilan header dan footer tidak

akan berubah namun bagian konten bisa berubah-ubah.

Contoh untuk membuat halaman lainnya yaitu akan dibuat halam v_about.php. Yang

mana link untuk menuju halaman about sudah dibuat sebelumnya pada file v_header.php.

Link yang sudah dibuat yaitu Home diseting untuk menuju atau mengakses method index()

dan About diseting menuju atau mengakses methode about()

<li><a href="<?php echo

base_url().'index.php/web/about' ?>">About</a></li>

Sekarang buatlah file view lagi dan beri nama v_about.php dan simpan di

application/views/v_about.php

<li>Nama Depan : Imam</li>

<li>Nama Belakang : Nawawi</li>

</ul>

<br>

<h4>Alamat</h4>

<li> Jalan Ciledug Raya No. 168 Pesanggrahan</li>

</ul>

<h4>Tempat Lahir</h4>

<li>Cirebon</li>

</ul>

<h4>Olah Raga Favorit</h4>

<li>Bulutangkis</li>

<li>Catur</li>

100

</ul>

</section>

Kemudian tambahkan method baru yaitu method about() pada controller Web.php di

bawah method index()

public function about()

{

$data['judul'] = "Halaman About";

$this->load->view('v_header', $data);

$this->load->view('v_about', $data);

$this->load->view('v_footer', $data);

}

Selanjutnya jalankan kembali pada browser dan klik pada menu About atau bisa langsung

mengakses ke method about.

http://localhost/ belajar-codeigniter/web/about

101

MINGGU KE 10

Membuat Form Validasi

Deskripsi:

Pertemuan ini membahas tentang pembuatan validasi untuk memasukkan data ke dalam

database dengan imemakai library form_validasi.

Tujuan Pembelajaran:

Setelah melakukan bagian ini pembaca mampu:

1. memahami cara imemakai form validasi

2. memahami mekanisme validasi data dalam form

A. Form Validasi

Pada pertemuan ini mahasiswa diharapkan dapat memahami tentang validasi data dan

bagaimana membuat form validasi data pada codeigniter dalam penginputan data. Seperti

misalnya dalam menentukan form, apa saja yang wajib untuk diisi, form dengan format input

tertentu, membuat konfirmasi password dan lainnya.

Pembuatan form validasi pada codeigniter diperlukan adanya pemanggilan library

form_validation pada codeigniter.

Pada saat membuat dan menangani form, proses validasi data merupakan bagian yang

sangat penting untuk diperhatikan. Validasi data diperlukan untuk menjaga keabsahan dari

data yang dikirim oleh user ke dalam aplikasi

B. Mekanisme Validasi Data di dalam Form

1. Form ditampilkan ke halaman web

2. User mengisi data ke dalam form ini

3. Jika terdapat satu atau beberapa data yang salah, maka form akan ditampilkan ulang,

biasanya disertai dengan pesan kesalahan.

102

4. Proses ini akan diulang sampai semua data yang diminta di dalam form diisi dengan

benar.

Proses pemeriksaan data yang dikirim oleh user di dalam form dilakukan di dalam

kontroler, demikian juga dengan pembuatan aturan (rule) dari datanya.

C. Memuat Library Form_validation

Untuk mengimplementasikan proses validasi data, yang diperlukan adalah memuat

librari dari form_validation terlebih dahulu. Proses pemuatan library ini dapat

dilakukan di bagian konstruktor controller.

$this->load->library(‘form_validation’);

Atau bisa juga dilakukan melalui file autoload yang ada dalam folder

application/config/autoload.php

Buka file ini lalu cari baris sintak seperti berikut:

$autoload[‘libraries’] = array();

Kemudian diubah dengan ditambahkan kata form_validation seperti berikut:

$autoload[‘libraries’] = array(‘form_validation’);

Contoh pembuatan form validasi kali ini akan imemakai controller Matakuliah.php

yang sudah dibuat pada pertemuan sebelumnya. Buka controller Matakuliah.php kemudian

ubah menjadi seperti di bawah:

<?php

class Matakuliah extends CI_Controller

{

public function index()

{

$this->load->view('view-form-matakuliah');

}

public function cetak()

{

$this->form_validation->set_rules('kode', 'Kode Matakuliah',

'required|min_length[3]', [

103

'required' => 'Kode Matakuliah Harus diisi',

'min_lenght' => 'Kode terlalu pendek'

]);

$this->form_validation->set_rules('nama', 'Nama Matakuliah',

'required|min_length[3]', [

'required' => 'Nama Matakuliah Harus diisi',

'min_lenght' => 'Nama terlalu pendek'

]);

if ($this->form_validation->run() != true) {

$this->load->view('view-form-matakuliah');

} else {

$data = [

'kode' => $this->input->post('kode'),

'nama' => $this->input->post('nama'),

'sks' => $this->input->post('sks')

];

$this->load->view('view-data-matakuliah', $data);

}

Pada controller Matakuliah di atas terlihat membuat rules dari form validasi. Rule nya

berupa required dan min_length[3] yang artinya jika requiredm maka harus diisi.

Sedangkan min_length[3] maka minimal diisi 3 digit.

Buka file view view-form-matakuliah.php, dan ubah script dengan menambahkan script <?=

form_error(…….); ?> disetiap inputan yang sudah diberi aturan validasi seperti dibawah

104

Kondisi jika inputan tidak valid karena kosong

Kondisi jika inputan tidak valid karena terlalu pendek (minimal 3 karakter)

untuk selengkapnya tentang membuat form validation pada codeigniter anda dapat

membacanya pada user_guide yang sudah di sediakan oleh codeigniter pada project CI anda

Tugas Pertemuan 10

Untuk mengetahui sejauh mana pemahaman yang sudah anda dapat tentang materi dasar

MVC dari pertemuan 6 sampai pertemuan 10, maka di pertemuan ini dibuatlah sebuah studi

kasus yang harus anda selesaikan. Dengan konsep MVC yang sudah dijelaskan di pertemuan

6 s/d 10. Dari membuat tampilan input sampai menampilkan hasil submit dari tampilan

input ini . Berikut studi kasis yang harus anda selesaikan:

1. Ada sebuah toko sepatu yang ingin dibuatkan program untuk menghitung otomatis

dari transaksi penjualan sepatunya yang mana harga sepatu ditentukan berdasarkan

merk dari sepatu ini .

105

2. Buatlah tampilan form input transaksi di point 1 meliputi input nama pembeli

imemakai text, no hp imemakai text, merk sepatu berupa pilihan combo/select

berisi Nike, Adidas, Kickers, Eiger, Bucherri. Masing-masing memiliki harga sesuai

urutan yaitu 375000, 300000, 250000, 275000, 400000., ukuran sepatu berupa

combo/select juga berisi pilihan ukuran dari no 32 s/d nomor 44, serta jumlah beli

berupa text. Dan terakhir terdapat tombol submit untuk memproses inputan ini .

3. Buatlah sebuah controller dan model untuk memproses inputan form sehingga

hasilnya di tampilkan ke file view yang berisi hasil dari proses submit dari form input.

4. Pada tampilan hasil, buatlah link untuk kembali menuju file input form pada point 2

106

MINGGU KE 11

Membuat Program Create Read Update Delete (CRUD)

Deskripsi:

Pada pertemuan ini dibahas bagaimana membuat program database dengan imemakai

framework codeigniter, yaitu Create, Read, Update, Delete. Akan tetapi khusus pertemuan

ini materi terbatas hanya pada penyampaian perintah Create dan Read data. Untuk bahasan

perintah Update dan delete akan dibahas dipertemuan terpisah, yaitu pertemuan 12

Tujuan Pembelajaran:

Setelah melakukan bagian ini pembaca mampu:

1. memahami penggunaan database dalam pemrograman

2. membuat halaman web sederhana untuk menyimpan dan menampilkan data

A. Pembuatan Database

Buatlah sebuah database dengan nama Kampus dan buatlah tabel didalamnya dan beri

nama mahasiswa dengan struktur tabel sebagai berikut:

Isi tabel mahasiswa sebanyak 3 data

107

B. Membuat Koneksi Database Codeigniter dengan MySQL

Sebelum melakukan seting konfigurasi pada file database, terlebih dahulu harus

disiapkan databasenya. Untuk menghubungkan codeigniter dengan database buka file config

database codeigniter yang terletak di application/config/database.php kemudian cari

baris sintak seperti berikut:

Masukkan user dan nama database nya, untuk password jika tidak ada maka

dikosongkan saja, sehingga menjadi berikut

108

Daftarkan libraries database pada file autoload.php agar database yang kita punya bisa

digunakan.

C. Menampilkan Data Mahasiswa

Membuat Model untuk Proses CRUD

Seperti dijelaskan sebelumnya, pada konsep MVC, kita imemakai model untuk

imemakai data. Oleh karena itu kita akan membuat sebuah model dimana didalamnya

nanti akan ada fungsi-fungsi pemanggilan dan pengolahan data, seperti simpan, update, dan

hapus.

Buat sebuah file pada bagian model dengan nama ModelMahasiswa.php yang berisi

perintah berikut

Dengan model seperti di atas, untuk menampilkan data atau mengambil data dari

database kita bisa imemakai function tampilData().

Kemudian kita harus mengatur autoload model di application/config/autoload.php.

agar model-model yang sudah dibuat bisa digunakan dan di load secara otomatis. Jadi tidak

perlu lagi kita load dari controller. Buka file autoload.php dan cari sintaks berikut

Ubah menjadi berikut:

Selanjutnya kita membuat controller yang berisi parsing data yang kita ambil dari model

ke view. Beri nama controller dengan nama Mahasiswa.php yang berisi kode berikut:

109

Pada controller Mahasiswa.php ini kita memanggil view dengan nama data-

mahasiswa. Oleh karena itu untuk menampilkan data mahasiswa dalam halaman web kita

buat sebuah file view dengan nama data-mahasiswa.php, dengan script berikut:

<!DOCTYPE html>

<html>

<head>

<title>Membuat CRUD dengan CodeIgniter</title>

</head>

<body>

<h1>DATA MAHASISWA</h1>

</center>

<tr>

<th>Alamat</th>

<th>No.Telepon</th>

<th>Action</th>

</tr>

<?php

$no = 1;

foreach ($mahasiswa as $m) {

<tr>

<td><?php echo $m->alamat ?></td>

<td><?php echo $m->telepon ?></td>

110

<td>

<?php echo anchor('mahasiswa/edit/' . $m->nim, 'Edit'); ?>

<?php echo anchor('mahasiswa/hapus/' . $m->nim, 'Hapus'); ?>

</td>

</tr>

<?php } ?>

</table>

</body>

</html>

Hasil dapat dilihat dengan url localhost/belajar-codeigniter/mahasiswa

D. Menyimpan Data

Sebelumnya untuk menyimpan data, kita tambahkan terlebih dahulu fungsi simpan data

pada model ModelMahasiswa untuk melakukan penyimpanan

111

Untuk menyimpan data, kita akan membuat fungsi sesuai dengan pendeklarasian di file

view sebelumnya

Dari script view ini , kita akan membuat sebuah fungsi dengan nama tambah() di

controller Mahasiswa.php.

Selanjutnya kita akan membuat sebuah file pada bagian view dengan nama input-

mahasiswa.php. file ini berfungsi sebagai tempat untuk mengisi data melalui form dalam

web. Berikut script input-mahasiswa.php

<!DOCTYPE html>

<html>

<head>

<title>Membuat CRUD dengan CodeIgniter</title>

</head>

<body>

<h3>Tambah data baru</h3>

</center>

<form action="<?php echo base_url() . 'mahasiswa/tambah_aksi'; ?>"

method="post">

112

<tr>

</tr>

<tr>

</tr>

<tr>

<td>Alamat</td>

</tr>

<tr>

<td>No.Telepon</td>

</tr>

<tr>

</tr>

</table>

</form>

</body>

</html>

Ketika link Tampil data di klik akan menampilkan form inputan seperti yang kita buat

Kita kembali ke script view input-mahasiswa.php. pada script ini , data-data yang

kita input akan dikirim imemakai metode POST ke controller Mahasiswa dan fungsi

tambah_aksi.

Oleh karena itu kita akan membuat sebuah fungsi dengan nama tambah_aksi() pada

controller Mahasiswa.php. dimana fungsinya adalah menerima data yang dikirim oleh form

113

inputan, untuk selanjutnya akan disimpan di tabel mahasiswa. Berikut merupakan script

dari fungsi tambah_aksi()

Hasil:

114

MINGGU KE 12

Membuat Program Create Read Update Delete

Deskripsi:

Pada pertemuan ini meneruskan bahasan CRUD, jika dipertemuan sebelumnya telah dibahas

perintah menampilkan data dan menyimpan data, maka pertemuan ini membahas perintah

Update dan hapus data pada codeigniter

Tujuan Pembelajaran:

Setelah melakukan bagian ini pembaca mampu:

1. membuat halaman web sederhana untuk mengupdate data

2. membuat halaman web sederhana untuk menghapus data

A. Modifikasi ModelMahasiswa

Karena berhubungan dengan data, maka kita akan memodifikasi ModelMahasiswa.php

yang sebelumnya sudah memiliki fungsi tampil dan simpan data, dengan menambahkan

fungsi editData, updateMahasiswa dan hapusMahasiswa

B. Memperbaharui Data Mahasiswa

Kita kembali ke form view mahasiswa, terdapat 2 link di bagian aksi yaitu Edit dan

Hapus, dengan script beikut:

115

Dari script diatas kita bisa tahu bahwa saat link Edit diklik, maka dia akan mengarahkan

ke controller Mahasiswa dan fungsi edit, dengan mengirim nilai NIM sesuai dengan data yang

dipilih, begitupun dengan link Hapus, akan mengarahkan ke controller Mahasiswa dan

fungsi hapus, dengan mengirimkan nilai NIM sesuai dengan data yang dipilih. Oleh karena

itu kita akan membuat sebuah fungsi dengan nama edit di controller Mahasiswa.php

Fungsi edit() memiliki kegunaan untuk menyeleksi data berdasarkan NIM dan

menampilkannya ke view edit-mahasiswa.php. Jadi setelah ini kita akan membuat sebuah

file View untuk menampilkan data yang akan kita edit. Beri nama file ini dengan edit-

mahasiswa.php

<!DOCTYPE html>

<html>

<head>

<title>Membuat CRUD dengan CodeIgniter</title>

</head>

<body>

</center>

<?php foreach ($mahasiswa as $m) { ?>

<form action="<?php echo base_url() . 'mahasiswa/update'; ?>"

method="post">

<tr>

<td>

<input type="hidden" name="nim" value="<?php echo $m->nim

?>">

<input type="text" name="nama" value="<?php echo $m->nama

?>">

116

</td>

</tr>

<tr>

<td>Alamat</td>

<td><input type="text" name="alamat" value="<?php echo $m-

>alamat ?>"></td>

</tr>

<tr>

<td>No.Telepon</td>

<td><input type="text" name="telepon" value="<?php echo $m-

>telepon ?>"></td>

</tr>

<tr>

</tr>

</table>

</form>

<?php } ?>

</body>

</html>

Hasil:

Data-data ini akan dikirimkan ke fungsi update() pada controller Mahasiswa.php

dengan metode POST, jadi langkah selanjutnya kita akan membuat fungsi update() untuk

menampung data sekaligus menyimpan data yg terbaru

117

Pada script diatas saat proses update dilakukan maka akan diarahkan ke halaman index

pada controller mahasiswa (halaman tampil data)

C. Menghapus Data Mahasiswa

Kita kembali ke form view mahasiswa. Perhatikan script untuk hapus

118

Dari script ini kita akan membuat sebuah fungsi dengan nama hapus() pada

controller mahasiswa.php. berikut adalah scriptnya:

Script ini pada dasarnya sama seperti update, mengirimkan nilai NIM sebagai id

(kondisi) yang nantinya akan digunakan untuk menghapus data terpilih. Saat data terpilih

untuk dihapus, halaman akan berada di index (halaman data mahasiswa)

Web Programming 8

Diposting oleh kromx.blogspot.com

ARTICLE

Comments

ABOUT

ARCHIVE

FOLLOW US

TRANSLATE

VIEWER

SEARCH

Subscribe Us

Facebook

Privacy Policy for DARKWEBSITEXX.blogspot.com

Log Files

Google DoubleClick DART Cookie

Our Advertising Partners

Privacy Policies

Third Party Privacy Policies

Children's Information

Online Privacy Policy Only

Consent

Terms and Conditions

Cookies

License

Hyperlinking to our Content

iFrames

Content Liability

Reservation of Rights

Removal of links from our website

Disclaimer

Contact form

Web Programming 8

Diposting oleh kromx.blogspot.com

Anda mungkin menyukai postingan ini

ARTICLE

Comments

ABOUT

ARCHIVE

FOLLOW US

Social Plugin

TRANSLATE

VIEWER

SEARCH

Subscribe Us

Facebook

Privacy Policy for DARKWEBSITEXX.blogspot.com

Log Files

Google DoubleClick DART Cookie

Our Advertising Partners

Privacy Policies

Third Party Privacy Policies

Children's Information

Online Privacy Policy Only

Consent

Terms and Conditions

Cookies

License

Hyperlinking to our Content

iFrames

Content Liability

Reservation of Rights

Removal of links from our website

Disclaimer

Contact form