modul praktikum web programming...
TRANSCRIPT
MODUL PRAKTIKUM
WEB PROGRAMMING 1
Disusun Oleh Tim Penyusun Modul Manajemen Informatika
Akademik Manajemen Informatika dan Komputer Bina Sarana Informatika
Jakarta 2013
Web Programming 1
AMIK Bina Sarana Informatika
2
BAB I
KONSEP DASAR WEB
1.1. Konsep Dasar Pemrograman Web
1. World Wide Web (WWW/Web)
World Wide Web (WWW/Web) “Suatu ruang informasi di mana sumber-
sumber daya yang berguna diidentifikasi oleh pengenal global yang disebut Uniform
Resource Identifier (URI)” Web Agents: Orang atau perangkat lunak yang
mengambil peran di dalam ruang informasi (Web)
a. User Agent; user
b. Software Agent; Servers, proxies, spiders, browsers, dan multimedia
players.
2. Uniform Resource Identifier (URI)
Uniform Resource Identifier (URI) Terdiri atas string karakter yang
digunakan untuk identifikasi atau memberi nama suatu resource (sumberdaya) di
internet. Identifikasi tersebut memungkinkan interaksi dengan representasi dari
resouce melalui network (jaringan) dengan menggunakan protokol tertentu.
Web Programming 1
AMIK Bina Sarana Informatika
3
3. Hypertext Transfer Protocol (HTTP)
Protokol yang dipergunakan untuk melakukan transfer dokumen dalam World
Wide Web (WWW). Protokol ini adalah protokol ringan, tidak berstatus dan generik
yang dapat dipergunakan berbagai macam tipe dokumen.
Pengembangan HTTP dikoordinasi oleh World Wide Web Consortium (W3C)
dan grup bekerja Internet Engineering Task Force (IETF), bekerja dalam publikasi
satu seri RFC, yang paling terkenal RFC 2616, yang menjelaskan HTTP/1,1, versti
HTTP yang umum digunakan sekarang ini. HTTP adalah sebuah atandar
request/response antara sebuah client dan sebuah server.
Sebuah Client HTTP seperti web browser, biasanya memulai permintaan
dengan membuat hubungan TCP/IP ke sebuah port tertentu di host (biasanya port 80).
Web Programming 1
AMIK Bina Sarana Informatika
4
Sebuah server HTTP yang mendengarkan di port tersebut menunggu client mengirim
kode permintaan (request), seperti "GET / HTTP/1.1" (yang akan meminta halaman
yang sudah ditentukan), diikuti dengan pesan MIME yang memiliki beberapa
informasi header code yang menjelaskan aspek dari permintaan tersebut, diikut
dengan body dari data tertentu. Begitu menerima kode permintaan (dan pesan, bila
ada), server mengirim kembali kode jawaban, seperti " HTTP/1.1 200 OK ", dan
sebuah pesan yang diminta, atau sebuah pesan error atau pesan lainnya.
4. 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
1.2. Struktur Navigasi
Navigasi termasuk struktur terpenting dalam pembuatan suatu aplikasi
multimedia dan gambarnya harus sudah ada pada tahap perancangan. Peta navigasi
merupakan rancangan hubungan dan rantai kerja dari beberapa area yang berbeda dan
Web Programming 1
AMIK Bina Sarana Informatika
5
dapat membantu mengorganisasikan seluruh elemen aplikasi multimedia dengan
pemberian perintah dan pesan. Peta navigasi juga memberikan kemudahan dalam
menganalisa keinteraktifan seluruh objek dalam aplikasi multimedia dan bagaimana
pengaruh keinteraktifannya terhadap pengguna.
Ada 4 macam bentuk dasar dari peta navigasi yang biasa digunakan dalam
proses pembuatan aplikasi multimedia, 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.
Gambar 1.1. Struktur Navigasi Linier
Contoh :
Web Programming 1
AMIK Bina Sarana Informatika
6
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 tersebut akan bernama Master Page (halaman
utama kedua), dan seterusnya. Pada struktur navigasi ini tidak diperkenankan adanya
tampilan secara linier.
Gambar 1.2. Struktur Navigasi Hirarki
Contoh :
Web Programming 1
AMIK Bina Sarana Informatika
7
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.
Gambar 1.3. Struktur Navigasi Non-Linier
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
Web Programming 1
AMIK Bina Sarana Informatika
8
pembuatan website karena struktur ini dapat digunakan dalam pembuatan website
sehingga dapat memberikan ke-interaksian yang lebih tinggi.
Gambar 1.4. Struktur Navigasi Campuran
Contoh :
Web Programming 1
AMIK Bina Sarana Informatika
9
BAB II
PENGENALAN HTML
2.1 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 software PHP Coder dan
XAMPP Versi 1.8.1 untuk web servernya dengan bahasa pemrograman PHP Versi 5.
Gambar II.1. Tampilan Awal PHP Coder
Web Programming 1
AMIK Bina Sarana Informatika
10
2.2. 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.
Web Programming 1
AMIK Bina Sarana Informatika
11
3. Tag <TITLE> … </TITLE> adalah tag judul. Sebaiknya setiap halaman web
memiliki judul, dan judul tersebut 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 PHP Coder, 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.php. Pembuatan nama file pada saat penyimpanan harus diakhiri dengan
extention “.php”
Untuk melihat hasil dari file di atas dapat menggunakan browser Mozilla,
google chrome, internet explorer atau jenis browser lain. Ketikkan pada address bar
“Localhost\Nama Folder Penyimpanan\”, kemudian pilih file contoh01.php
Lihat gambar di bawah ini :
Judul Web
Perintah dibuat di antara <body> dan <body>
Web Programming 1
AMIK Bina Sarana Informatika
12
Hasilnya :
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 menggunakan 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>
Ketikkan localhost kemudian nama folder penyimpanan file
Klik di contoh01.php
Web Programming 1
AMIK Bina Sarana Informatika
13
d. Tag list item yaitu <li>
Untuk tag yang tidak berpasangan diatas, sebaiknya tetap ditulis
menggunakan pasangannya. Hal ini dilakukan untuk mengantisipasi standar
rekomendasi HTML kedepannya. Penulisan untuk semua Tag bebas, maksudnya kita
bisa menggunakan huruf besar, huruf kecil, bahkan dicampur ( tidak case sensitive ).
Tapi untuk mengantisipasi standar penulisan Tag, sebaiknya kita menggunakan huruf
kecil semua.
Jenis – jenis tag dalam HTML :
Web Programming 1
AMIK Bina Sarana Informatika
14
Web Programming 1
AMIK Bina Sarana Informatika
15
Contoh script penggunaan Tag HTML
Buat lembar baru pada PHP Coder, kemudian ketikkan perintah di bawah ini. Simpan
dengan nama Contoh02.php
Web Programming 1
AMIK Bina Sarana Informatika
16
Simpan dengan nama contoh02.php
Hasil Tampilan
2.3. Pembuatan Tabel Menggunakan HTML
Tabel penting peranannya dalam halaman Web, selain untuk menampilkan
teks atau gambar dalam format lajur dan kolom bias juga menggunakan tabel untuk
membantu me-layout tampilan halaman.
Tabel merupakan sebuah kotak yang terdiri atas baris/row dan kolom.column.
Untuk membuat tabel, anda menggunakan 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 :
Web Programming 1
AMIK Bina Sarana Informatika
17
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.
Contoh script pembuatan tabel
Buat lembar baru pada PHP Coder, kemudian ketikkan perintah di bawah ini. Simpan
dengan nama Contoh03.php
Web Programming 1
AMIK Bina Sarana Informatika
18
Jika dilihat di browser, maka terlihat sebagai berikut :
Latihan :
Buat script HTML untuk bentuk tampilan di bawah ini :
Web Programming 1
AMIK Bina Sarana Informatika
19
Web Programming 1
AMIK Bina Sarana Informatika
20
BAB III
PENGENALAN PHP
3.1. Pengertian PHP (PHP Hypertext Preprocessor)
PHP atau PHP Hypertext Prepocessor adalah sebuah bahasa pemrograman
web 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 menggunakan bahasa pemrograman ini gratis, bebas, dan tidak terbuka.
Web Programming 1
AMIK Bina Sarana Informatika
21
3.2. 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 tersebut 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>
Tabel III.1 Jenis-jenis Tag PHP
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 PHP Coder. Kemudian ketikkan script seperti di bawah ini :
Web Programming 1
AMIK Bina Sarana Informatika
22
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.
Web Programming 1
AMIK Bina Sarana Informatika
23
BAB IV
DASAR-DASAR PHP
4.1. 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.
Web Programming 1
AMIK Bina Sarana Informatika
24
Contoh05.php:
Hasil :
4.2. Tipe Data
Berbeda dengan bahasa pemrograman lain, variable di PHP lebih fleksibel.
Kita tidak perlu mendefinisikan jenisnya ketika mendefinisikan pertama kali. Ada 6
variabel dasar yang dapat diakomodasi di PHP, seperti terlihat di tabel.
Web Programming 1
AMIK Bina Sarana Informatika
25
Tabel IV.1. Jenis-jenis tipe data
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 menggunakan 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 menggunakan perintah:
$var_string = (string) $angka;
Contoh06.php:
Web Programming 1
AMIK Bina Sarana Informatika
26
Hasil Tampilan :
Latihan
Buat script php untuk tampilan di bawah ini. Tentukan variablenya :
4.3. 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 menggunakannya dengan
mengetikkan nama konstanta tersebut. Nama konstanta umumnya diketik
menggunakan huruf besar.
Web Programming 1
AMIK Bina Sarana Informatika
27
4.4. 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 menggunakan
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
Web Programming 1
AMIK Bina Sarana Informatika
28
Hasil :
Web Programming 1
AMIK Bina Sarana Informatika
29
BAB V
OPERATOR
5.1. Mengenal Operator
Sebuah bahasa pemrograman juga wajib untuk mampu mengolah nilai
operand (variable atau konstanta yang dioperasikan) menggunakan 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 tersebut
menghasilkan nilai baru. Sementara operand adalah nilai yang dilibatkan dalam
operasi oleh operator.
5.2. Jenis-Jenis Operator
1. Operator Assignment
Operator yang digunakan untuk mengalokasikan nilai tertentu. Operator
assignment adalah tanda sama dengan (=). Contoh penggunaannya :
$pekerjaan = “Penulis”;
Berikut adalah jenis operator assignment di PHP :
Operator Contoh Artinya = X=Y X=Y
+= X+=Y X=X+Y -= X-=Y X=X-Y *= X*=Y X=X*Y /= X/=Y X=X/Y .= X.=Y X=X.Y
Web Programming 1
AMIK Bina Sarana Informatika
30
%= X%=Y X=X%Y
2. Operator Aritmatika
Operator ini digunakan untuk melakukan perhitungan matematika, sebagain
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
3. 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
Web Programming 1
AMIK Bina Sarana Informatika
31
Contoh Script PHP Operator Aritmatika
Contoh08.php
Hasil :
Web Programming 1
AMIK Bina Sarana Informatika
32
BAB VI
PERCABANGAN
6.1. Statement IF
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.
Contoh Script Statement IF
Contoh09.php
Hasil :
Web Programming 1
AMIK Bina Sarana Informatika
33
Contoh10.php
Hasil:
6.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.
Web Programming 1
AMIK Bina Sarana Informatika
34
Contoh Script Statement Switch
Contoh11.php
Hasil:
Web Programming 1
AMIK Bina Sarana Informatika
35
BAB VII
PENGULANGAN
7.1. Pengertian Pengulangan
Proses pengulangan merupakan proses standard dalam untuk menjadi seorang
programmer, karena dari beberapa proses algoritma proses pengulangan sebagai tolak
ukur apakah seseorang bisa menjadi programmer yang handal. Proses pengulangan
juga dominan dalam logika program, hamper semua program aplikasi yang penting
terdapat proses pengulangan.
7.2. Jenis – Jenis Pengulangan
1. For
Pengulangan yang jumlah pencacah yang sudah pasti atau sudah di
ketahui.
Bentuk Umum :
For (nilai awal ; batas pengulangan ; operator increament/decreament)
Web Programming 1
AMIK Bina Sarana Informatika
36
Contoh12.php :
Hasil :
2. While
Perulangan yang melakukan pengecekan syarat di awal blok perulangan.
Selama syarat bernilai benar, perulangan akan terus berlanjut dan
sebaliknya jika syarat bernilai salah perulangan akan dihentikan
Bentuk Umum :
Nilai awal while (batas pengulangan) { pernyataan ; operator increament/decrement ; }
Web Programming 1
AMIK Bina Sarana Informatika
37
Contoh13.php
Hasil :
Web Programming 1
AMIK Bina Sarana Informatika
38
3. Do While
Kebalikan dari for dan while karena do…while melakukan pengecekan
terhadap syarat di akhir blok perulangan.
Contoh14.php :
Hasil :
Web Programming 1
AMIK Bina Sarana Informatika
39
BAB VIII
ARRAY
8.1. Pengertian Array
Sekumpulan data atau dapat juga di artikan pemetaan antara key dan value.
Kumpulan data tersebut dinamakan elemen array. Elemen array tersusun secara
index, elemen pertama ber-index 0, elemen kedua berindex 1 dan seterusnya.
Bentuk umum :
8.2.
8.2. Membuat Array
Sebuah bahsa pemrograman umumnya memiliki variable berjenis array. Array
(dalam bahasa Indonesia kerap ditejermahkan sabagai larik) merupakan variable yang
di dalamnya mengandung nilai-nilai lainnya.
Contoh Script Pembuatan Array Contoh15.php
Array (elemen array)
Web Programming 1
AMIK Bina Sarana Informatika
40
Hasil :
Contoh16.php
Hasil :
Web Programming 1
AMIK Bina Sarana Informatika
41
Latihan Pembuatan Array :
1. Buatlah program array dengan menampilkan urutan mahasiswa seperti ini :
adel, sausan, triaszada,fifi,umay, ifur, fitria
2. Tampilkan nama mahasiswa urutan ke-1, ke-7 dan ke- 3
Web Programming 1
AMIK Bina Sarana Informatika
42
BAB IX
FUNGSI
9.1. Pengertian Fungsi
Fungsi merupakan modul program yang terdiri dari instruksi-instruksi untuk
tujuan tertentu. Dengan fuungsi pemakai dapat membagi program besar menjadi kecil
sehingga memudahkan dalam modifikasi.
Bentuk Umum :
Function nama fungsi (variabel1,variabel2,…)
{ statement ; }
Contoh :
<html> <body> <? Function test() //pembuatan fungsi { Echo" Ini adalah dasar dari sebuah Fungsi"; } Test(); //Pemanggilan nama fungsi ?> </body> </html>
Hasil :
Deklarasi fungsi
Web Programming 1
AMIK Bina Sarana Informatika
43
Latihan :
1. Buatlah program dengan menggunakan fungsi dengan tampilan sebagai
berikut :
2. Buat fungsi untuk mencetak judul & garis.
Web Programming 1
AMIK Bina Sarana Informatika
44
BAB X
FORM
10.1. Form Dengan Input Dan Pemrosesan Terpisah
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 halama yang digunakan untuk memproses input,
sementara method digunakan untuk mengatur cara mem-parsing konten. Ada 2
method yang biasa digunakan :
• GET : Variabel akan bisa dilihat URL
• POST : Variabel akan disembunyikan dan tidak terlihat di URL, lebih
secure dan cocok untuk memparsing informasi yang penting, seperti
password.
Selain itu anda harus juga mengerti sintaks pembuatan form, yang terpenting
adalah atribut “name” di masing-masing objek form. Atribut name ini penting karena
nantinya digunakan untuk memanggil variable di form lainnya.
Web Programming 1
AMIK Bina Sarana Informatika
45
Contoh Script Pembuatan Form Dengan Input dan Pemrosesan Terpisah
Contoh17.php
Web Programming 1
AMIK Bina Sarana Informatika
46
Hasil :
Script di atas mengandung action = tampil09.php yang menjelaskan bahwa
kode yang diisikan nantinya akan diproses di form tampil09.php. script di atas
menggunakan layout tabel agar tampilan form terlihat rapi.
Untuk memproses kita perlu membuat scrip tampil09.php yang harus
diperhatikan adalah nama objek – objek form yang akan digunakan untuk mengambil
nilai variable. Cara mengambilnya adalah dengan menggunakan sintaks
$_POST[‘nama_variabel’].” Misalnya untuk mengambil variable yang diisikan di
kotak dengan name =”nama”, maka digunakan sintaks $_POST[‘nama’].”.
Web Programming 1
AMIK Bina Sarana Informatika
47
Scipt Tampil Data
Tampil17.php
Hasil :
10.2. Form Dengan Input Dan Pemrosesan Terpadu
Pada contoh di atas, kita bisa melihat contoh pengolahan form dari PHP di
halaman yang terpisah. Tapi kita juga bisa membuat halaman pengolahan yang
terletak satu halaman dengan form.
Web Programming 1
AMIK Bina Sarana Informatika
48
Untuk membuat form input dan halaman untuk menampilkan secara terpadu,
kita bisa menggunakan 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 Script Pembuatan Form Dengan Input dan Pemrosesan Terpadu
Contoh18.php
Web Programming 1
AMIK Bina Sarana Informatika
49
Hasil :
Web Programming 1
AMIK Bina Sarana Informatika
50
10.3. 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 :
a. Form
b. Text Box
Text box : untuk menginput data string ataupun angka.
c. Text Area
Text area : untuk menginput string ataupun angka yang terdiri atas banyak baris.
d. Radio buton
Radio buton : untuk memilih satu pernyataan dari beberapa pernyataan yang
disediakan.
<FORM ACTION=action METHOD=method ENCTYPE=media type> </FORM>
< INPUT TYPE=TEXT NAME=name SIZE= size VALUE=value>
<textarea rows=”2” cols=”25” name=”nama_variabel”>
<input type=”radio” value=value checked name=”nama_ variabel”>
Web Programming 1
AMIK Bina Sarana Informatika
51
e. Combo Box
Combo box untuk menampilkan daftar data.
f. Check Box
Check box untuk memilih satu atau lebih pernyataan dari beberapa pernyataan
yang disediakan.
g. Submit
Submit untuk mengirimkan semua variable data pada komponen-komponen form
yang ada.
h. Reset
Reset untuk membatalkan semua penginputan yang telah dituliskan.
Latihan Pembuatan dan Pemanggilan Form :
1. Buat script program untuk membuat form input dengan data sbb :
<select size=”1” name=”nama_variabel”> <option>Combo1</option> <option>Combo2</option>
<input type=”checkbox” name=”nama_variabel” value=” ON” checked>
<input type=”submit” name=”submit” value=”submit”>
<input type=”reset” name=”reset” value=”reset”>
Web Programming 1
AMIK Bina Sarana Informatika
52
2. Buat script program untuk memanggil data dari form input dengan bentuk sbb :
Jawaban :
1. Input_data_pegawai.php
Web Programming 1
AMIK Bina Sarana Informatika
53
2. Lihat_data_pegawai.php
Web Programming 1
AMIK Bina Sarana Informatika
54
Latihan 1 :
Tampilan Input
Tampilan Output
Ketentuan Soal :
Jika STUDIO 1 maka bintang tamu “Opick” Jika STUDIO 2 maka bintang tamu “Raihan”
Jika Jenis kelas VIP maka harga 500000 Selain itu kelas FESTIVAL maka harga 250000 Hitung Total Harga Jika klik Back to Home akan kembali ke halaman 1
Web Programming 1
AMIK Bina Sarana Informatika
Latihan 2 :
Tampilan Input
Tampilan Output
Ketentuan Soal : Jenis Cat : MOWILEX maka Harga = 20000DANAPAINT maka Harga = 30000CATYLAC maka Harga = 40000
Total Harga = Harga * Jumlah Beli Diskon: Jika Jumlah Beli >= 5 maka diskon 5% dari Total HargaJika Jumlah Beli >= 10 maka diskon 10% dari Total HargaSelain itu diskon=0
Total Bayar = Total Harga Jika di Klik Kembali maka akan tampil Form cat.php
Web Programming 1
Bina Sarana Informatika
55
MOWILEX maka Harga = 20000 DANAPAINT maka Harga = 30000 CATYLAC maka Harga = 40000 Total Harga = Harga * Jumlah Beli
Jika Jumlah Beli >= 5 maka diskon 5% dari Total Harga Jika Jumlah Beli >= 10 maka diskon 10% dari Total Harga
Total Bayar = Total Harga - Diskon Jika di Klik Kembali maka akan tampil Form cat.php
Web Programming 1
AMIK Bina Sarana Informatika
56
BAB XI
PEMBUATAN DATABASE MySQL
11.1. Database
MySQL adalah sebuah software database. Database merupakan sebuah tempat
penyimpanan data yang jenisnya beraneka ragam.
MySQL merupakan tipe data relasional yang artinya MySQL menyimpan
datanya dalam bentuk tabel-tabel yang saling berhubungan.
Keuntungan menyimpan data di database adalah kemudahannya dalam
penyimpanan dan menampilkan data karena dalam bentuk tabel. Untuk melakukan
pengolahan terhadap tabel, kita dapat menggunakan perintah SQL.
11.2. Mengenal MySQL
Salah satu fitur unggulan PHP adalah kemudahannya untuk diintegarasikan
dengan database. Di PHP, sangat mudah mengoneksikan diri dengan database.
Database paling lazim yang digunakan untuk dipadukan dengan PHP adalah MySQL.
PHP dan MySQL ibarat roti dan selai, saling melengkapi. PHP tanpa MySQL
tidak akan powerful karena tidak bisa digunakan untuk menyimpan data dalam
jumlah banyak.
Keuntungan menggunakan database MySQL :
1. Gratis dan Open Source
Web Programming 1
AMIK Bina Sarana Informatika
57
2. Ada versi komersialnya juga, digunakan jika ingin memberikan dukungan
teknis
3. Biaya yang harus dikeluarkan jauh lebih murah dibandingkan merek lainnya
4. Tersedia di banyak platform
5. Menggunakan standar penulisan SQL ANSI
11.3. Hubungan PHP Dengan MySQL
PHP-MySql adalah suatu fungsi yang menjembatani antara php sebagai
programming web server dan mysql sebagai database, sehingga data-data yang
terdapat pada database mysql dapat ditampilkan pada browser.
Fungsi-fungsi dalam mysql diantaranya adalah :
1. MYSQL-CONNECT()
Menghubungkan ke server mysql. Fungsi ini merupakan fungsi awal yang
akan dijalankan sebelum melakukan fungsi-fungsi lain.
Bentuk umum penulisan :
2. MYSQL_CREATE_DB()
Fungsi yang sangat jarang di gunakan karena pada umumnya setiap
programmer web, lebih cenderung dalam membuat database pada console
atau phpmyadmin pada browser. Fungsi ini untuk membuat database baru.
Bentuk umum penulisan :
3. MYSQL_SELECT_DB()
Fungsi ini untuk mengaktifkan database yang telah tersedia pada mysql
server.
Mysql_connect(host,user,password)
Mysql_create_db(nama_database)
Web Programming 1
AMIK Bina Sarana Informatika
58
Bentuk umum penulisan :
4. MYSQL_QUERY()
Fungsi ini untuk memasukkan perintah-perintah SQL.
Bentuk umum penulisan :
5. MYSQL_NUM_ROWS()
Fungsi ini untuk mengetahui berapa jumlah record terkini. Fungsi ini berguna
apabila akan membuat tabel yang bercorak.
Bentuk umum penulisan :
6. MYSQL_FETCH_ROW()
Fungsi ini untuk mengambil data per record atau per baris dalam suatu tabel,
berdasarkan sistem urutan nomor index field.
Bentuk umum penulisan :
7. MYSQL_FETCH_ARRAY()
Fungsi ini memiliki fungsi yang sama dengan mysql_fetch_row() yaitu
mengambil data per record. Yang membedakan adalah jika
mysql_fetch_row() mengambil data berdasarkan nomor urut index sedangkan
fungsi ini adalah nama fieldnya.
Bentuk umum penulisan :
Mysql_select_db(nama_database)
Mysql_query(perintah-perintah SQL) ;
Mysql_num_rows(variabel) ;
Mysql_fetch_rows(variabel) ;
Mysql_fetch_rows(variabel) ;
Web Programming 1
AMIK Bina Sarana Informatika
59
11.4. Membuat Database MySQL Menggunakan PHPMyAdmin
Untuk mengakses database MySQL digunakan software MySQL Client. Ada
banyak MySQL Client, dari mulai yang berbasis command line, aplikasi GUI hingga
berbasis web.
PHPMyAdmin adalah MySQL Client yang berupa aplikasi web dan
umumnya tersedia di server PHP seperti XAMPP maupun server komersial lainnya.
Berikut ini cara mengakses PHPMyAdmin :
1. Buka browser kemudian ketikkan alamat URL : http://localhost/phpmyadmin.
halaman ini bisa diakses menggunakan webserver local.
Halaman Awal PHPMyAdmin 2. Untuk membuat database baru. Klik tab database. Kemudian ketikkan nama
database di kolom “Create Database”. Nama database :dbberita
Web Programming 1
AMIK Bina Sarana Informatika
60
3. Setelah membuat database, langkah berikutnya adalah pembuatan tabel. Buat
tabel dengan nama tabel “buku_tamu” di kolom Create Table dan number
of columns : 4. Jika sudah diinput, klik tombol GO
Klik tab database
Ketik nama database, klik tombol Create
Web Programming 1
AMIK Bina Sarana Informatika
61
4. Isikan data untuk struktur tabel buku_tamu sebagai berikut :
Name Type Length/Value Keterangan Id Int Primary key, auto increment Nama Varchar 25 Email Varchar 30 Pesan Text
Tipe-tipe data yang sering digunakan adalah :
a. INT untuk menyatakan data berupa angka
b. VARCHAR untuk menyatakan data berupa karakter atau string ( batasnya
sampai 255 karakter)
c. DATE untuk menyatakan data berupa tanggal
d. TIME untuk menyatakan data berupa waktu
e. TEXT untuk menyatakan data berupa karakter dalam jumlah yang banyak
(lebuh dari 255 karakter) misalnya untuk isi berita dan pesan
f. CHAR untuk menyatakan data berupa string yang tetap
Web Programming 1
AMIK Bina Sarana Informatika
62
BAB XII
DREAMWEAVER CS5
12.1. Keuntungan Menggunakan Dreamweaver CS5
Dreamweaver CS5 adalah software yang luar biasa untuk membuat website.
Dengan menggunakan Dreamweaver CS5, kita dapat membuat hamper dari semua
tipe halaman web. Selain itu, proses penggunaannya pun mudah dan cepat, bahkan
bisa menghasilkan tampilan halaman web yang canggih. Selain itu, Dreamweaver
CS5 juga dilengkapi dengan toolbar Browser Navigation semacam tool seperti yang
ada pada browser yang terdiri dari back, forward, stop, home, address, dan live view
option.
12.2. Mengenal Document Window
Document window adalah halaman utama Dreamweaver CS5 yang digunakan
untuk memasukkan teks dan gambar, serta skrip-skrip tertentu. Sebelum memasuki
halaman ini, kita harus memilih 2 pilihansebelum bekerja dengan Dreamweaver CS5.
Dua pilihan itu seperti berikut :
1. Open a Recent Item : digunakan untuk bekerja dengan dokumen yang telah
ada.
2. Create New : digunakan untuk bekerja dari awal, yakni dengan membuat
dokumen baru.
Web Programming 1
AMIK Bina Sarana Informatika
63
Gambar Tampilan Awal Halaman Dreamweaver CS5