Modul Praktikum Pemrograman Web 1 Sampai 6

PRAKTIKUM PEMROGRAMAN WEB - PHP 1

Praktikum 1

HTML

1.1. TUJUAN

a) Mengenal, memahami dan menguasai dasar-dasar HTML

b) Mengenal dan memahami script HTML

c) Mengenal dan memahami setiap objek sebagai dasar pembuatan interface

pada halaman browser

d) Mampu membuat halaman web

1.2. MATERI

1.2.1. Struktur Dasar HTML

Hypertext Markup Language (HTML) adalah bahasa yang digunakan untuk

menulis halaman web. Ciri utama dokumen HTML adalah adanya tag dan elemen.

Elemen dalam dokumen HTML dikategorikan menjadi dua yaitu elemen <HEAD> yang

berfungsi memberikan informasi tentang dokumen tersebut dan elemen <BODY> yang

menentukan bagaimana isi suatu dokumen ditampilkan oleh browser, seperti

paragraf, list(daftar), tabel dan lain-lain. Sedangkan tag dinyatakan dengan tanda lebih

kecil “ < “ (tag awal ) dan tanda lebih besar “ > “ (tag akhir). Dalam penggunaannya

sebagian besar kode HTML tersebut harus terletak di antara tag kontainer. Yaitu

diawali dengan <namatag> dan diakhiri dengan </namatag> (terdapat tanda "/").

Dokumen HTML mempunyai tiga buah tag utama yang membentuk struktur

dari dokumen HTML yaitu HTML,HEAD dan BODY. Tag HTML berfungsi untuk

menyatakan suatu dokumen HTML, tag HEAD berfungsi untuk memberikan informasi

tentang dokumen HTML dan tag BODY berfungsi untuk menyimpan informasi atau

data yang akan ditampilkan dalam dokumen HTML.

HANI ATUN MUMTAHANAH, S.Kom ( hunnybeat03 @ gmail .com ) L. ANANG SETIYO, S.Kom ( …………………………………. )TOMMY DWI DAYANTO H, S.Kom ( [email protected] )

mailto:[email protected]


PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP 2

1.2.2. LISTS

Terdapat lima tipe list yang dapat digunakan, yaitu :

Unordered Lists <UL> :

Untuk membuat daftar item dengan tanda bullet. List entries didefinisikan dengan tag

<li>.

Contoh :

<ul><li> item nomer 1<li> item nomer 2<li> item nomer 3</ul>

Hasil dari kode di atas adalah: Item nomer 1 Item nomer 2 Item nomer 3

Ordered Lists <OL> :

Juga digunakan untuk membuat daftar item, dengan tiap item dapat menggunakan

angka arab atau romawi. List entries juga didefinisikan dengan <LI> tag.

Contoh :

<ol type=i><li> item nomer 1<li> item nomer 2<li> item nomer 3</ol>

Hasil dari kode di atas adalah :

1. Item nomer 12. Item nomerr 23. Item nomerr 3

Definition Lists: <DL>

Contoh :

<dl><dt> item pertama.<dd> penjelasan tentang item pertama.<dt> item kedua.<dd> penjelasan tentang item kedua</dl>

Hasil dari kode di atas adalah :

Item pertama.Penjelasan tentang item pertama.Item kedua.Penjelasan tentang item kedua

HANI ATUN MUMTAHANAH, S.Kom ( hunnybeat03 @ gmail .com )L. ANANG SETIYO, S.Kom ( )TOMY DWI DAYANTO H., S.Kom ( )



1.2.3. IMAGES:

Digunakan untuk menampilkan image atau animasi gif pada halaman web Anda.

Atribut : alt, align=(center, left, right), hspave, vspace, border, width & height

Contoh :

<img src="logo.gif" alt="ini adalah logo halaman pembuka" width=”200” height=”100”><img src="logo.gif" hspace=”10” vspace=”5” align=”right” border=”2”>

1.2.4. PARAGRAPH

Tag yang digunakan untuk membuat paragraf dalam suatu halaman web adalah

dengan tag <P> . atribut : align=(Center,left,right,justify)

Contoh

<p align=”center”>ini adalah paragraf</p>

1.2.5. TABEL

Dalam pembuatan homepage, tabel memiliki fungsi yang tidak kalah penting dengan

tagtag HTML lainnya. Pertama tabel berfungsi untuk menampilkan informasi secara

terstruktur, ringkas dan mudah dibaca, kedua berfungsi untuk mengatur tampilan

homepage agar lebih menarik. Tag utama untuk tabel yaitu <TABLE> </TABLE> dan

untuk membuat judul tabel tagnya table header <TH></TH> lalu untuk membuat data

tabel atau isi tabel menggunakan tag table Data <TD></TD> dan untuk membuat baris

adalah memakai tag Table Rows <TR> </TR>

1.2.6. FORM

Form biasanya digunakan untuk mengumpulkan informasi dari user, sehingga

memungkinkan suatu web server untuk menerima informasi dari pemakai melalui

sejumlah elemen yang disebut kontrol. Kontrol ini bisa berupa suatu textbox,

checkbox, radio button, push button, list menu dan lainnya. Standart penulisan form :

<form method=”post/get” action=url”>...</form>

Atribut method memiliki dua nilai post dan get. Metode get mengirimkan data pada

server dengan cara meletakan data pada bagian akhir URL yang ditunjuk. Metode post

mengirimkan datanya secara terpisah. Jika data masukan banyak, lebih disarankan




untuk menggunakan metode post. Atribut action berisi URL dari program yang

dipanggil oleh form tersebut.

Textbox

Textbox merupakan salah satu jenis kontrol untuk memasukan data. HTML

menyediakan tag <input> dengan atribut type=”text” untuk membuat kotak input.

Atribut lain yaitu name untuk memberi nama input, atribut Value untuk memberi nilai

suatu input dan atribut size untuk menentukan batas terpanjang sebuah masukan.

Dalam textbox kita juga dapat menyembunyikan masukan yang ditulis user dengan

memberi nilai type=”password”. Masukan akan menjadi karakter “*”.

Checkbox

Checkbox digunakan untuk memberi beberapa pilihan kepada user. Dengan checkbox

user dapat memilih salah satu, lebih dari satu pilihan atau tidak sama sekali memilih.

Radio

Pada type Radio, maka user memilih salah satu pilihan yang tersedia, sehingga user

tidak bisa memilih kurang atau lebih dari satu pilihan. Atribut Checked memberi tanda

bahwa pilihan tersebut sedang diaktifkan.

Submit dan Reset

Setiap form harus memiliki minimal tombol submit dan reset. Untuk membuatnya

digunakan atribut type=”submit” dan type=”reset”. Tombol submit digunakan ketika

user mengisi formulir dan ingin mengirimkan ke server. Sedangkan reset digunakan

ketika user ingin menghapus semua masukan yang ditulis.




1.3. TUGAS PENDAHULUAN

1. Apa HTML itu?? Jelaskan!!

2. Apa yang dimaksud dengan

a. Web Statis

b. Web Dinamis

c. Web interaktif

Jelaskan !!

3. Buatlah halaman web dengan script HTML (min 4 halaman), yang

mencakup:

a. Form

b. List

c. Table

d. Textbox

e. Radio

f. Paragraf

g. Submit dan Reset

(satu halaman menjadi HOME/Beranda)

1.4. TUGAS PRAKTIKUM

1. Buatlah 1 folder dengan nama P1_<nim>_<kelas> , contoh 09999_6A

2. Buatlah 1 folder dengan nama dataweb_<nim>_<kelas> difolder yang sudah

dibuat di langkah 1, contoh dataweb_09999_6A

3. Buatlah 1 file dokumen dengan nama datadoc_<nim>_<kelas> difolder yang

sudah dibuat di langkah 1, contoh datadoc_09999_6A.doc




1. Contoh HTML sederhana :

<html><head><title>struktur dokumen html </title></head><body>Hello,saya baru belajar bikin web lhooo…</body></html>

Tulislah kode html tersebut diatas dengan program editor, kemudian

Simpan kedalam direktori data anda dengan nama file awal.html

Jalankan di browser dan buka file awal.html

Capture hasil ditampilan browser

2. Heading dalam HTML :

<html><head><title> ::heading dokumen html:: </title></head><body><h1>heading tingkat 1 </h1><h2>heading tingkat 2 </h2><h3>heading tingkat 3 </h3><h4>heading tingkat 4 </h4><h5>heading tingkat 5 </h5><h6>heading tingkat 6 </h6></body></html>


Simpan kedalam direktori data anda dengan nama file heading.html

Jalankan browser dan buka file heading.html


3. Paragraf dalam HTML :

<html><head><title>paragraf</title></head><body><p align="right">HTTP adalah suatu protokol yang menentukan aturan yang perlu diikuti oleh web browser dalam meminta atau mengambil suatu dokumen dan oleh web server dalam menyediakan dokumen yang diminta web browser.<p align="center">




Internet berasal dari kata interconnection networking yang mempunyai arti hubungan berbagai komputer dan berbagai tipe komputer yang embentuk sistem jaringan dan mencakup seluruh dunia (jaringan global) dengan melalui jalur telekomunikasi seperti telepon, wireless dan lainnya.<p align="left">Web Browser yang bertindak sebagai client memungkinkan anda untuk menginterpretasikan dan melihat informsi pada Web, sedang web server yang bertindak sebagai server memungkinkan anda untuk menerima informasi yang diminta browser</P></body></html>


Simpan kedalam direktori data anda dengan nama file paragraf.html

Jalankan browser dan buka file paragraf.html


4. Preformatted Text dalam HTML :

<html><head><title>preformatted text</title></head><body><pre>Munafik==============================Munafik adalah perbuatan yang tercela yang bisa merugikan diri sendiridan orang lain.Ciri-ciri orang munafik adalah :- bila berbicara selalu berbohong- bila dipercaya maka akan berhianat- suka mengadu bomba.- dll.</pre></body></html>


Simpan kedalam direktori data anda dengan nama file pre.html

Jalankan browserdan buka file pre.html


5. BLOCKQUOTE dalam HTML :

<html><head><title>blockquote</title></head>




<body><h3>sesuatu yang tidak perlu dicoba</h3><blockquote>sesuatu yang kelihatan mengasyikkan tapi sebenarnya lebih banyakmenambah masalah pada remaja adalah narkoba, seks, alkohol danmerokok. jangan sekali-kali mencoba jika tidak ingin membuatmasalah baru</blockquote></body></html>


Simpan kedalam direktori data anda dengan nama file blockquote.html

Jalankan di browser dan buka file blockquote.html


6. Line Break dalam HTML :

<html><head><title>linebreak</title></head><body><p>ada beberapa jalur alternative menuju ugm , yaitu :<br>melalui jakal<br> melalui jalan selokan<br> melalui Colombo <br>dll</body></html>


Simpan kedalam direktori data anda dengan nama file linebreak.html

Jalankan browserdan buka file linebreak.html


7. Ukuran font dalam HTML :

<html><head><title>ukuran font</title></head><body><font size=1>ukuran font 1</font><br><font size=2>ukuran font 2</font><br><font size=3>ukuran font 3</font><br><font size=4>ukuran font 4</font><br><font size=5>ukuran font 5</font><br><font size=6>ukuran font 6</font><br><font size=7>ukuran font 7</font><br></body></html>





Simpan kedalam direktori data anda dengan nama file font.html

Jalankan browserdan buka file font.html


8. Jenis font dalam HTML :

<html><head><title>jenis font</title></head><body><font size=5><font face = "arial">arial , contoh ac milan <p><font face = "verdana">verdana , contoh persebaya <p><font face = "tahoma">tahoma , contoh indonesia <p></body></html>


Simpan kedalam direktori data anda dengan nama file fontface.html

Jalankan browserdan buka file fontface.html


9. Warna font dalam HTML :

<html><head><title>warna font</title></head><body><font size=5><font color= "red">yogyakarta <p><font color = "#ff0000">kota budaya <p><font color = "#00ff00">kota pariwisata dan pendidikan<p></body></html>


Simpan kedalam direktori data anda dengan nama file fontcolor.html

Jalankan browserdan buka file fontcolor.html


10. Link dalam HTML :

<html><head><title>link</title></head>




<body><a name="atas">pemain-pemain club zamaliq</a><blockquote><p>Ikrimach,<a href="#info">info lengkap</a><p>Ale<p>marwan<p>mamato<p>sidqi<p><a href="link2.html">kalo mau tahu lagi klik disini</a></blockquote><p><a name="info">ikrimach</a><blockquote><p>bernama lengkap francessco totti ikrimach<br>ilcapitano de roma<br>pemain terbaik sepanjang masa</blockquote><p><a href="#atas">kembali ke atas</a></body></html>


Simpan kedalam direktori data anda dengan nama file link.html

Jalankan browserdan buka file link.html


11. Link tujuan dalam HTML :

<html><head><title>link tujuan</title></head><body><p align="center"> maaf, hanya sedikit<br>zaki<br>sa’ed<br>sa’ad<br><a href="link.html">kembali</a></body></html>


Simpan kedalam direktori data anda dengan nama file link2.html

Jalankan browserdan buka file link2.html


12. Membuat Tabel

<html><head><title>:: Tabel ::</title>




</head><body><table border=1 align="center" cellpadding=0 cellspacing=0><tr><th>No.</th><th>Nama </th><th>Alamat</th><th>No. Telpon</th></tr><tr><td>1</td><td>ikrimach</td><td> </td><td> </td></tr><tr><td>2</td><td>Ale</td><td> </td><td> </td></tr><tr><td>3</td><td>Bentaos</td><td> </td><td> </td></tr></table></body></html>


Simpan kedalam direktori data anda dengan nama file table.html

Jalankan browserdan buka file table.html


13. Membuat Tabel Kompleks

<html><head><title>:: Tabel yang kompleks ::</title></head><body><table width="750" border="1" cellspacing="1" cellpadding="1"align="center"><tr><td colspan="8"><div align="center">Fakultas</div></td></tr><tr><td colspan="3"><div align="center">Mipa</div></td><td colspan="2">




<div align="center"> Ekonomi</div></td><td colspan="3"><div align="center"> Pertanian </div></td></tr><tr><td width="78" height="22"><div align="center">Matamatika</div></td><td width="75" height="22"><div align="center">IPA</div></td><td width="80" height="22"><div align="center">ilmu Komputer</div></td><td width="98" height="22"><div align="center">Ekonomi</div></td><td width="92" height="22"><div align="center">Manajemen</div></td><td width="83" height="22"><div align="center">ilmu tanah</div></td><td width="99" height="22"><div align="center">ilmu hama</div></td><td width="102" height="22"><div align="center">pasca panen</div></td></tr></table></body></html>


Simpan kedalam direktori data anda dengan nama file tablekompleks.html

Jalankan browserdan buka file tablekompleks.html


14. Membuat Form Input dengan Text box

<html><head><title>form input dengan text box</title></head><body><p>rancangan awal buku tamu </p><table border="0" cellpadding="0" cellspacing="2"><tr><td width="11%">nama</td><td width="3%">:</td><td width="86%"><input type="text" name="nama" size="20"></td></tr>




<tr><td width="11%">alamat</td><td width="3%">:</td><td width="86%"><input type="text" value="Bondowoso"name="alamat" size="20"></td></tr><tr><td width="11%">sekolah</td><td width="3%">:</td><td width="86%"><input type="text" name="sekolah" size="20"></td></tr></table></body></html>


Simpan kedalam direktori data anda dengan nama file form.html

Jalankan browserdan buka file form.html


15. Membuat Form Input dengan Check box

<html><head><title>form input dengan check box</title></head><body><p>pilih yang pasti segar </p><p>daftar menu minuman</p><p><input type="checkbox" name="c1" checked>jus tomat<br><input type="checkbox" name="c2">es jeruk<br><input type="checkbox" name="c3">es teh<br><input type="checkbox" name="c4">soda gembira</p></body></html>


Simpan kedalam direktori data anda dengan nama file check.html

Jalankan browserdan buka file check.html


16. Membuat Form Input dengan Radio box

<html><head><title>form input dengan radio box</title></head><body>




<p>pilih salah satu </p><p>usia anda</p><p><input type="radio" value="v1" checked name="r1">< 15 tahun<br><input type="radio" value="v2" name="r1">15-19 tahun<br><input type="radio" value="v3" name="r1">19-25 tahun<br><input type="radio" value="v4" name="r1">25-35 tahun<br><input type="radio" value="v5" name="r1"> > 35 tahun<br></p></body></html>


Simpan kedalam direktori data anda dengan nama file radio.html

Jalankan browserdan buka file radio.html


17. Membuat Formulir Buku Tamu

<html><head><title>buku tamu</title></head><body><h3><p align="center">buku tamu</p></h3><form method="post" action="thanks.html"><table border="0" cellpadding="2" width="100%"><tr><td width="8%">nama</td><td width="4%">:</td><td width="88%"><input type="text" name="nama" size="20"></td></tr><tr><td width="8%">asal</td><td width="4%">:</td><td width="88%"><input type="text" name="asal" size="20"></td></tr><tr><td width="8%">email</td><td width="4%">:</td><td width="88%"><input type="text" name="email" size="20"></td></tr><tr><td width="8%" valign="top">homepageku</td><td width="4%" valign="top">:</td><td width="88%"><input type="radio" value="v1" checked=”checked” name="r1">bagus sekali<br><input type="radio" value="v2" name="r1">bagus<br><input type="radio" value="v3" name="r1">biasa saja<p> </td></tr></table><p><input type="submit" value="kirim" name="b1"><input type="reset" value="batal" name="b2"></p></form></body></html>





Simpan kedalam direktori data anda dengan nama file book.html

Jalankan browserdan buka file book.html


18. Membuat Frame

<html><head><title>contoh frame</title></head><frameset rows=2”0%,*”><frame name=header src=”header.html”><frameset cols=”35%,*”><frame name=”kiri” src=”kiri.html”><frame name=”utama” src=”kanan.html”></frameset></frameset></html>


Simpan kedalam direktori data anda dengan nama file praktik18.html

Pada frame tersebut memerlukan 3 file yaitu header.html, kiri.html dan

kanan.html maka buatlah file tersebut sebelum dijalankan.

Misalnya :

Header.html<html><head><title>:::header:::</title></head><body bgcolor="#CCECCA"><font face="Georgia" size="4"><i><font size="+2"color="#33842F">Selamat Datang</font><font size="+2"><b><fontcolor="#009999">di</font> </b></font></i></font><b><fontface="Georgia" size="+4" color="#25611F"><strong>www.gembus.com</strong> </font> <font face="Georgia"size="+4"></font></b></body></html>kiri.html<html><head><title>::kiri::</title></head><body bgcolor="#ccecca"><p align="center"><font face="verdana" size="2"><ahref="profil.html" target="utama">profil</a><br><a href="album.html" target="utama">album</a><br><a href="buku.html" target="utama">buku tamu</a><br><a href="forum.html" target="utama">forum</a> <br>




<a href="link.html" target="utama">link</a></font></p></body></html>kanan.html<html><head></head><body></body></html>profil.html<html><head></head><body bgcolor="#ffffff" text="#000000"><p><font face="verdana" size="2">profil :<br>portal web ini adalah hasil karya anak-anak yang suka gembus</font></p></body></html>

buatlah atau tulis kode file-file tersebut diatas pada editor

Jalankan browserdan buka file frame.html


Selamat mengerjakan........Semoga Berhasil




Praktikum 2

TIPE DATA VARIABEL & FUNGSI

2.1. TUJUAN

a) Mengenal, memahami dan menguasai dasar-dasar PHP

b) Mengenal dan memahami script PHP

c) Mengenal dan memahami penggunaan Tipe Data, Variabel dan Fungsi dengan

script PHP

d) Mampu menjalankan halaman browser dengan serverside PHP

e) Mampu membuat halaman web dengan PHP

2.2. MATERI

2.2.1. Struktur Dasar PHP

PHP adalah salah satu bahasa Server-side yang didesain khusus untuk aplikasi web. PHP dapat disisipkan diantara bahasa HTML dan karena bahasa Server side, maka bahasa PHP akan dieksekusi di server, sehingga yang dikirimkan ke browser adalah “hasil jadi” dalam bentuk HTML, dan kode PHP anda tidak akan terlihat.

Diawal Januari 2001, PHP telah dipakai lebih dari 5 juta domain diseluruh dunia, dan akan terus bertambah karena kemudahan aplikasi PHP ini dibandingkan dengan bahasa Server side yang lain. Anda dapat melihat angka sesungguhnya di http://www.php.net/usage.php.

PHP termasuk dalam Open Source Product. Jadi anda dapat merubah source code dan mendistribusikannya secara bebas. PHP juga diedarkan secara gratis. Anda bisa mendapatkannya secara gratis. PHP juga dapat berjalan diberbagai web server semisal IIS, Apache. PWS, dll.

Langkah untuk menjalankan dokumen php pada server apache :1. Simpan dokument.php di folder apache/htdocs/2. Jalankan web server apache.3. Pada browser address ketikkan URL dokument.php contoh :http://localhost/dokument.php

Aturan penulisan script php :



http://localhost/dokument.php

http://www.php.net/usage.php


1. Script php diawali tag “ <? “ dan diakhiri dengan tag “ ?>”.- contoh penulisan kode php :a. <?Script php?>b. <?php script php?>c. <script language = “php”>script php</script>

2. Penulisan tag php dengan html<? // nama file phpinhtml.php ?><html><head><title>Script PHP dalam tag html</title></head><body><?echo "halo saya lagi belajar PHP";?></body></html>

3. Penulisan script php tanpa html<?echo "halo saya lagi belajar PHP";?>

4. Menulis tag html dengan php<?echo"<html><head><title>Script PHP dalam tag html</title></head><body>Tag HTML berada di dalam script PHP</body></html>";?>

5. Menulis komentar<?// ini contoh komentar# ini juga komentar/* untuk menulis komentar lebih dari satu baris menggunakanmetode penulisan seperti ini */?>

6. Setiap statement php diakhiri dengan tanda ( ;) petik koma.<?Echo “hallo ini phpku loh “;Echo “ ini statement yang lain”;?>

2.2.2. Type Data Dan Variable




Type data adalah jenis data yang akan ditampung oleh suatu variable. Sedangkan variable merupakan tempat untuk menampung data atau nilai.Dalam php terdapat tipe data dasar yaitu:

Integer, untuk data yang berisi angka. Data tersebut dapat digunakan untuk operasi matematika.

String, untuk data yang berisi karakter, tipe data ini tidak digunakan untuk operasi matematika.

Array, untuk data yang berkelompok. Array memiliki nama variable yang sama. Definisi lain dari array adalah kumpulan variable yang memiliki tipe data yang sama.

Float/ double, untuk data yang berupa pecahan desimal. Untuk menangani operasi matematika dengan nilai pecahan.

Objek, digunakan dengan statement fuction.

Aturan untuk pendeklarasian variable :1. Suatu variable dinyatakan dengan tanda dollar ( $ ) dan diikuti nama variable.2. Nama variable tidak boleh diawali dengan angka, harus dengan karakter,

setelahnya dapat diikuti dengan angka/underscore ( garis bawah).3. Penamaan bersifat case sensitive atau variable membendakan huruf kecil dan

besar.4. Deklarasi variable selalu diikuti dengan pemberian ( assignment) nilai dari

variable tersebut. Jika sebuah variable belum memiliki nilai tidak perlu dideklarasikan terlebih dahulu.

Contoh pendeklarasian variable yang benar :<?$umur=25;$_umur=”25 tahun”;$_1001_malam=”cerita”;?>

contoh yang salah :<?Nama = tejo //tidak diawali $ dan diakhir statement tanpa titik koma (;)$1000=5; //pendeklarasian variable diawali angka?>

KonstantaKonstanta adalah variabel yang nilai tetap. PHP telah mendefinisikan beberapa konstanta seperti E_ERROR, E_WARNING, PHP_VERSION dan sebagainya. Cara membuat konstanta, standar penulisan konstanta :Define (“nama_konstanta”,”nilai_konstanta”);Contoh :<html><head></head><body><?define(“kampus”,”Universitas Teknologi Yogyakarta”);echo kampus;?>




</body>

ArrayArray merupakan kumpulan variable yang memiliki index berbentuk numeric atau string.Seperti bahasa pemrograman yang lain, php juga menggunakan indeks berupa data numeric yang biasanya dimulai dari angka nol.Membuat dan mengakses arrayUntuk membuat array hampir sama dengan membuat variable yang lain. Namun disini kita harus memberikan indeks. Sebagai contoh :Bentuk 1<?// membuat array($mobil[0] = “Toyota supra”;$mobil[1] = “Nissan skyline”;$mobil[2] = “Honda S2000”;$mobil[3] = “audi TT”;$mobil[4] = “mazda RX-8”;for(a=4;a<=0;a--){echo “nama mobil : <b> $mobil[a] </b>”;}?>

Bentuk 2<?// membuat array ($motor=array(“karisma”,”shogun”,”blitz”,”Jupiter”);while(b=4;b<=0){echo “motor : <b> $motor[b] </b>”;b--;}?>

Function ( fungsi)fungsi merupakan kumpulan perintah yang dibuat atau didefinisikan sekali namun dapat diakses atau digunakan berulang kali. Fungsi memiliki atau dapat menerima variable input dan menghasilkan output dari hasil operasinya. Untuk pendeklarasikan nama fungsi tidak boleh menggunakan fungsi bawaan atau built – in php yang telah ada.

Membuat fungsi<?//pendeklarasian fungsifunction <nama fungsi>(argumen){statements / proses;}?>





1. Apakah PHP itu ? jelaskan !2. Komponen apasajakah yang diperlukan untuk menjalankan PHP ? Sebutkan

dan Jelaskan3. Jelaskan tentang Tipe Data, Variabel dan Fungsi dalam PHP4. Buatlah sebuah halaman browser, yang menerapkan penggunaan Tipe Data,

Variabel dan Fungsi dalam PHP 5. Buat link untuk soal nomor 4 dari aplikasi yang anda buat pada Tugas

Pendahuluan Modul I


Pendahuluan :1) Buatlah 1 folder dengan nama P2_<nim>_<kelas> , contoh 09999_6A2) Buatlah 1 folder dengan nama dataweb_<nim>_<kelas> difolder yang sudah

dibuat di langkah 1, contoh dataweb_09999_6A3) Buatlah 1 file dokumen dengan nama datadoc_<nim>_<kelas> difolder yang

sudah dibuat di langkah 1, contoh datadoc_09999_6A.doc4) Tulislah kode PHP diabwah ini dengan program editor, kemudian5) Simpan kedalam direktori data anda sesuai dengan nama file php nya6) Jalankan browser dan buka file php tersebut7) Capture hasil ditampilan browser* Pastikan web server telah berjalan dengan baik!

1. contohphp1.php<html><head><title> variabel dalam php </title></head><body><?$variabel=10;echo ("nilai variabel = $variabel<br>"); //variabel bertipe integer$variabel=2+3.5;echo ("nilai variabel = $variabel<br>"); //variabel bertipe double$variabel="selamat datang di php";echo ("nilai variabel = $variabel<br>"); //variabel bertipe string/* deklarasi variabel */$tanggal = date ("d f y");$judul = “selamat belajar php”;$garis = “========================”;$nama = " sutarman,s.kom " ;/*script pengenalan variabel*//*memanggil variabel tanggal*/print("$tanggal<br>\n");/* memanggil variabel nama */echo $judul.”<br>”;echo $garis.”<br>”;echo $nama .”selamat datang !….".”<br>”.$garis;?></body></html>

2. contohphp2.php<?




$bilangan1 = 10;$bilangan2 = 4;echo "bilangan pertama = $bilangan1";echo "<br>"; // untuk membuat baris baruecho "bilangan kedua = $bilangan2";echo "<br>";echo"--------------------------";echo "<br>";// operasi penambahan$hasil = $bilangan1 + $bilangan2;echo "hasil penambahan = $hasil";echo "<br>";// operasi pengurangan$hasil = $bilangan1 - $bilangan2;echo "hasil pengurangan = $hasil";echo "<br>";// operasi perkalian$hasil = $bilangan1 * $bilangan2;echo "hasil perkalian = $hasil";echo "<br>";// operasi pembagian$hasil = $bilangan1 / $bilangan2;echo "hasil pembagian = $hasil";echo "<br>";// operasi modulus ( sisa bagi )$hasil = $bilangan1 % $bilangan2;echo "hasil sisa bagi = $hasil";echo "<br>";?>

3. contohphp3.php<?$kata1 = "saya sedang belajar";$kata2 = "Pemrograman PHP";// mencetak kataecho "$kata1 $kata2";echo "<br>";// menggabungkan kata dengan cara yang salah$gabung = $kata1 + $kata2;echo "<br>";echo "\$gabung = $gabung";// menggabungkan kata dengan cara yang benar$kata1 = $kata1." ".$kata2;// atau bisa juga seperti ini//$kata1 = $kata1."&nbsp".$kata2;//atau dapat digunakan cara//$kata1.=$kata2;echo "<br>";echo "\$kata1 = $kata1";?>

4. contohphp4.php<?define("phi","3.14");$jari2 = 7;$luas = phi * $jari2 * $jari2;echo "jari - jari = $jari2 cm";echo " <br />";echo "luas = $luas cm2";?>

6. contoharray.php




<?//array asli$namapenjahat = array("aling","apau","leeyau","yenste");//menampilkan array asliecho "ini adalah nama penjahat kelas teri <br/>";while (list($key,$value)=each($namapenjahat)){echo "$key : $value <br/>";}//menambah arrayarray_push($namapenjahat,"jerry","toms","kamu");//menampilkan array hasil penambahanecho "ini adalah nama penjahat tambahannya <br/>";while (list($key,$value)=each($namapenjahat)){echo "$key : $value <br/>";}//array binatang$binatangku = array("kambing","sapi","rusa","ayam");//menggabungkan array$fusion = array_merge ($namapenjahat , $binatangku);echo "dan ini adalah fusion array namapenjahat & namabinatang <br/>";while (list($key,$value)=each($fusion)){echo "$key : $value <br/>";}?>

7. contohfungsi.php<?//membuat fungsi hitung kreditfunction hitung ($angsuran,$bunga,$harga){$cicilan=($harga/$angsuran)+(($harga*$bunga)/100);echo " anda membeli barang dengan harga <b>Rp.$harga,-</b> <br/>";echo " dengan kredit sebanyak <b>$angsuran kali</b> dan bunga <b> $bunga% </b><br/>";echo " maka anda diwajibkan membayar <b>Rp.$cicilan,- </b>setiap bulan<br/><hr/>";}//menggunakan fungsi hitung$angsuran=12;$bunga=10;$harga=22500000;echo "<h2>selamat</h2>";hitung ($angsuran,$bunga,$harga);?>





Praktikum 3

STATEMENT KONDISI, STATEMEN PERULANGAN & OPERATOR

3.1. TUJUAN

1. Mengenal dan memahami penggunaan Statemen Kondisi if, if..else, dan Switch dengan script PHP

2. Mengenal dan memahami penggunaan Statemen Perulangan for, while dan do-while dengan script PHP

3. Mengenal dan memahami penggunaan Operator dengan script PHP4. Mampu membuat halaman web dengan menggunakan Statemen Kondisi,

Statemen Perulangan dan Operator

3.2. MATERI

Operator merupakan suatu simbol yang dipakai untuk memanipulasi data, seperti perkalian,penjumlahan, pengurangan, pembagian.

3.2.1. STRUKTUR KENDALI ( Statement )Struktur Kendali atau Statement merupakan elemen yang sangat penting dalam tiap bahasa pemrograman, karena dengan kendali alur kita dapat mengontrol jalannya eksekusi program.Struktur Kendali dalam PHP dilakukan dengan 4 pernyataan :

1. if (statements)2. if (statements) else (statements)3. if (statements) elseif (statements)4. switch case

If (Statements)operator if akan memeriksa sebuah kondisi atau lebih, jika pernyataan memenuhi atau benar maka akan menjalankan perintah yang dinyatakan.




Sintak :<?If (kondisi ) {Dilakukan sesuatu, jika kondisi terpenuhi;}?>

If (Statements) Else (Statements)Operator ini digunakan jika pengecekkan kondisi lebih dari satu ( bertingkat ). Logikanya jika kondisi pertama tidak terpenuhi maka dilakukan action atau perintah 2 selanjutnya.

Sintak :<?If (kondisi ) {Dilakukan sesuatu, jika kondisi terpenuhi;}else {lakukan sesuatu;}?>

If (Statement ) Elseif (Statement)Untuk operator if bertingkat atau memiliki banyak kondisi menggunakan elseif. Logikanya jika kondisi pertama tidak terpenuhi maka dilakukan pengecekan kondisi kedua dan seterusnya.




Sintak :<?If (kondisi 1){Dilakukan sesuatu jika kondisi 1 bernar;}else if (kondisi 2){dilakukan sesuatu jika kondisi 2 benar;}else {lakukan sesuatu;}?>

Switch Case ( Memilih Kondisi )Operator switch case mempunyai struktur kerja yang sama dengan operator if…else. Perbedaan hanya penulisan sintak.

Sintak :<?$variableswitch ( $variable){case (kondisi 1) : perintah jika benar; break;case (kondisi 2) : perintah jika benar; break;case (kondisi 3) : perintah jika benar; break;case (kondisi 4) : perintah jika benar; break;default : perintah; break;} ?>

3.2.2. PERULANGAN ( Looping)Perulangan digunakan untuk menjalankan beberapa perintah secara berulang dengan counter (jumlah) yang telah ditentukan. Seperti pemrograman yang lain, Pada php ada beberapa macan metode perulangan :

1. for2. while3. do….while




ForPerulangan menggunakan operator for akan bernilai benar jika kondisi masih terpenuhi dan kemudian melakukan perulangan perintah seebanyak counter yang ada.

Sintak :<?For($nilai_awal;kondisi;$nilai_awal++){Perintah;}?>

WhilePerulangan while mempunyai struktur logika hampir sama dengan operator for. Hanya penulisan script berbeda dan penulisan counter pada while dilakukan diakhir perintah ini dilakukan agar tidak terjadi looping forever (tanpa batas).

sintak :<?$nilai_awalwhile(kondisi){jalankan sesuatu;$nilai_awal++;}?>




Do….WhileOperator do…while mempunyai struktur yang berbeda dengan operator perulangan yang lain. Adapun perbedaannya operator ini tidak melakukan pengecekan kondisi pada awalnya, atau akan melakukan perintah terlebih dahulu lalu melakukan pengecekan kondisi setelah perintah dijalankan, jadi operator ini akan melakukan perulangan minimal sekali apapun kondisinya.

sintak<?$nilai_awal;do {lakukan sesuatu;$nilai_awal++;}while(kondisi);?>

3.2.3. OPERATOR ARITMETIKA DALAM PHPOperator aritmatika adalah operator yang digunakan untuk melakukan fungsi matematika.

Operator aritmatika dalam PHP :

Operator Operasi Penggunaan

Operator Increment/DecrementPre/Post increment dan decrement masing-masing adalah penambahan dan pengurangan satu. Apabila operator diletakan sebelum variabel , misal ++$i atau –I maka nilai $i akan ditambahkan atau dikurangkan 1 sebelum keseluruhan operasi




dalam ekspresi dikerjakan dan sebaliknya apabila operator diletakan setelah variabel, misal $i++ atau $i-- maka nilai $i akan ditambah atau dikurangi 1 setelah operasi dalam ekspresi dikerjakan.

Operator Operasi Penggunaan++ Pre/Post Increment ++$a atau $a++ -- Pre/Post Decrement --$b atau $b--

Operator StringHanya ada satu operator string, yaitu operator concatenation ( . ).<?php$a=”Hallo”;$b= $a . “Selamat Datang di PHP”;//$b berisikan “Hallo Selamat datang di PHP”?>

Operator BitwiseOperator bitwise dapat digunakan untuk membuat bit tertentu dari suatu integer menjadi 1 atau 0.

Operator Perbandingan

Contoh Nama Hasil$a > $b Lebih dari True jika $a lebih besar dari $b

$a <= $b Kurang dari atau sama dengan True jika $a lebih kecil dari $b atau $a sama dengan $b

< Kurang dari True jika $a lebih kecil dari $b$a >= $b Lebih besar atau sama dengan True jika $a lebih besar dari $b atau $a sama

dengan $b$a == $b Sama dengan True jika $a sama dengan $b$a != $b Tidak sama dengan True jika $a tidak sama dengan $b




Operator TernaryMenggunakan tanda”?” operator ini akan melakukan evaluasi ekspresi kemudian berdasarkan hasil evaluasi ini bila bernilai benar (tidak sama dengan 0 atau tidak sama dengan null) maka statement benar dikerjakan dan jika salah statement salah akan dikerjakan. Operator ternary merupakan model penyederhanaan dari bentuk if .. else yang setiap blok dari if dan else hanya satu perintah. Sehingga model ini cocok untuk melakukan proses pengisian suatu hasil pengujian.

Memiliki bentuk :

Contoh :<?$umur=5;$balita=($umur<=5) ? "Termasuk balita : “sudah tidak balita lagi”;echo “Umurnya = $umur “$balita;?>

Operator Logika

3.2.4. PENGOLAHAN INPUT DATA MENGGUNAKAN FORM

Salah satu ciri interaksi yang dapat digunakan adalah melalui form web, pengunjung situs dapat mengirimkan data melalui masukan form web tersebut kemudian memperoleh respon halaman tertentu sesuai masukan yang diberikan. Inilah yang disebut orang sebagai situs dinamis.

Pada pembuatan form ini yang perlu diperhatikan adalah tag <FORM> dengan atribut action dan method. Atribut action nilainya berisi nama file yang akan diakses ( proses) dan pada atribut method mempunyai macam pilihan nilai yaitu GET dan POST. Jika method GET digunakan maka isian pada form akan dikirimkan kepada server sebagai satu kesatuan dengan string URLnya dan jika menggunakan method POST maka form isian akan dikirimkan kepada server secara terpisah dari string URL. Kelemahan dari penggunakan method GET adalah data yang digunakan sebagai parameter tertampilkan, ini menjadi kelemahan jika data parameter sebenarnya


(Ekspresi) ? (jika benar) : (jika salah);



tersembunyi, selain itu method GET tidak dapat digunakan untuk mengirimkan data ke server dalam jumlah yang besar.

Kemudian untuk elemen HTML yang berhubungan dengan Form (bentuk kontrol form), Satu hal yang perlu ingat adalah name (nama) kontrol form tersebut karena nama dijadikan sebagai nama variabel pada masing-masing elemen. (Lihat pada pembahasan FORM).


1. Kumpulkan dalam bentuk Hardcopy dan ditulis dengan rapi serta menyertakan nama dan nim

2. Soal :a) Apakah Operator Aritmatika pada PHP itu ? sebutkan dan jelaskan

dengan contoh !





Pendahuluan :1) Buatlah 1 folder dengan nama P3_<nim>_<kelas> , contoh 09999_6A2) Buatlah 1 folder dengan nama dataweb_<nim>_<kelas> difolder yang sudah

dibuat di langkah 1, contoh dataweb_09999_6A3) Buatlah 1 file dokumen dengan nama datadoc_<nim>_<kelas> difolder yang

sudah dibuat di langkah 1, contoh datadoc_09999_6A.doc4) Tulislah kode PHP diabwah ini dengan program editor, kemudian5) Simpan kedalam direktori data anda sesuai dengan nama file php nya6) Jalankan browser dan buka file php tersebut7) Capture hasil ditampilan browser

* Pastikan web server telah berjalan dengan baik!

1. operator.php<?php$kata1 = "saya sedang belajar";$kata2 = "Pemrograman PHP";//operator stringecho "$kata1 $kata2";echo "<br/>";// menggabungkan kata dengan cara yang salah$gabung = $kata1 + $kata2;echo "<br/>";echo "\$gabung = $gabung";// menggabungkan kata dengan cara yang benar$kata1 = $kata1." ".$kata2;// atau bisa juga seperti ini//$kata1 = $kata1."&nbsp".$kata2;//atau dapat digunakan cara//$kata1.=$kata2;echo "<br/>";echo "\$kata1 = $kata1 <br/>";//operator aritmatika$bil_a = 10;$bil_b = 5;echo " bil_a awal =<b> $bil_a</b><br/>";echo "bil_b awal =<b> $bil_b</b><br/>";$bil_a = $bil_a + $bil_b;$bil_b = ++$bil_b;echo "\$bil_a = \$bil_a + \$bil_b <br/>";echo "\$bil_b = ++\$bil_b <br/>";echo " bil_a =<b> $bil_a</b><br/>";echo "bil_b =<b> $bil_b</b><br/>";?>

2. finput.php<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>contoh form input</title><style type="text/css">body {background-color: #FFFF99;}.style1 {




color: #FFFFFF;font-weight: bold;}</style></head><body><h1 align="center">www.akoo.com</h1><p align="center">Selamat Datang :</p><form action="lihattamu.php" method="post" name="finputtamu"target="_self" id="finputtamu"><div align="center"><table width="350" border="0" cellpadding="0" cellspacing="0"><tr><td width="100" bgcolor="#666666"><div align="right"><span class="style1">Nama</span></div></td><td bgcolor="#9999CC"><input name="txtnama" type="text" id="txtnama" size="25"maxlength="25" /></td></tr><tr><td width="100" bgcolor="#666666"><div align="right"><span class="style1">Email</span></div></td><td bgcolor="#9999CC"><input name="txtemail" type="text" id="txtemail" size="35" maxlength="50" /></td></tr><tr><td width="100" valign="top" bgcolor="#666666"><div align="right"><span class="style1">Pesan</span></div></td><td bgcolor="#9999CC"><textarea name="txtpesan" cols="30" rows="10" wrap="PHYSICAL"id="txtpesan"> </textarea></td></tr><tr><td valign="top" bgcolor="#666666"></td><td bgcolor="#9999CC"><input name="btnkirim" type="submit" id="btnkirim" value="kirim" /><input name="btnulang" type="reset" id="btnulang" value="ulang"/></td></tr></table></div></form></body></html>

3. lihattamu.php<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>>:lihat tamu :<</title><style type="text/css">body {background-color: #FFFFCC;}</style></head><body>




<h1 align="center">www.akoo.com</h1><table width="200" border="0" align="center" cellpadding="0" cellspacing="0" ><tr><td align="center" bgcolor="#FF9900"><strong>DAFTAR TAMU</strong></td></tr><tr><td align="center" bgcolor="#9999FF"><?phpecho "<b> Selamat datang <br/><font size = +4>$txtnama </font></b><br/>";echo "email anda : <b> $txtemail</b> <br/>";echo "komentar : <br/>";echo "<b> $txtpesan</b>";?></td></tr><tr><td align="center" bgcolor="#FF9900"><a href="finput.php"target="_self">kembali</a></td></tr></table><hr align="center" width="500" size="10" /></body></html>

4. Buat halaman form dengan nama file login.php

parameters :form :- method : post;- action : if.php- textfield 1 : <input name="txtid" type="text" id="txtid" />- textfield 2 : <input name="txtpws" type="password" id="txtpws" />- button login : <input name="btnlogin" type="submit" id="btnlogin" value="login" />- button reset : <input name="btnReset" type="reset" id="btnReset" value="Reset" />

5. if.php<?$idvalid = "tejo";$pwsvalid = "surti";if($txtid==$idvalid && $txtpws == $pwsvalid){echo "selamat datang <b>$txtid</b>";}?>

6. ifelse.php<?$idvalid = "tejo";$pwsvalid = "surti";if($txtid==$idvalid && $txtpws == $pwsvalid){echo "selamat datang <b>$txtid</b><br/> password $txtpws benar";}




else{echo "maaf account anda tidak terdaftar, harap coba lagi";}?>

7. ifelseif.php<?$idvalid = "tejo";$pwsvalid = "surti";if($txtid==$idvalid && $txtpws == $pwsvalid){echo "selamat datang <b>$txtid</b><br/> password $txtpws benar";}else if($txtid==$idvalid && $txtpws <> $pwsvalid){echo "maaf id <b>$txtid</b> benar tapi password <b>$txtpws</b> salah,harap coba lagi";}else{echo "maaf account anda tidak terdaftar, harap coba lagi";}?>

8. for.php<?echo "Tanggal Lahir: <br/>";echo " <SELECT name=tanggal><OPTION VALUE=0 SELECTED >Tanggal ";//Bentuk pilihan tanggal 1 sampai dengan 31for($i = 1; $i < 32; $i++)echo "<OPTION VALUE=$i >$i";echo "</OPTION></SELECT>";?>

9. while.php<?echo "Tanggal Lahir: <br/>";echo " <SELECT name=tanggal><OPTION VALUE=0 SELECTED >Tanggal ";//Bentuk pilihan tanggal 1 sampai dengan 31$i=1;while($i < 32){echo "<OPTION VALUE=$i >$i";$i++;}echo "</OPTION></SELECT>";?>

10. dowhile.php<?echo "Tanggal Lahir: <br/>";echo " <SELECT name=tanggal><OPTION VALUE=0 SELECTED >Tanggal ";//Bentuk pilihan tanggal 1 sampai dengan 31$i=1;do{echo "<OPTION VALUE=$i >$i";$i++;}while($i < 32);echo "</OPTION></SELECT>";?>





Praktikum 4

KONEKSI PHP-MYSQL DAN DATABASE

4.1. TUJUAN

5. Mengenal dan memahami penggunaan Statemen Kondisi if, if..else, dan Switch dengan script PHP

6. Mengenal dan memahami penggunaan Statemen Perulangan for, while dan do-while dengan script PHP

7. Mengenal dan memahami penggunaan Operator dengan script PHP8. Mampu membuat halaman web dengan menggunakan Statemen Kondisi,

Statemen Perulangan dan Operator

4.2. MATERI

4.2.1. Database Mysql

Merupakan sebuah system manajemen database relasi (relational databade management system). Bersifat open source dapat didownload secara bebas, mysql memiliki kinerja, kecepatan, proses, dan ketangguhan yang tidak kalah dengan database yang lain. Ex : oracle, Sybase, unity, dll.

Pada awalnya mysql hanya berjalan diatas platform system operasi linux. Hampir semua distro linux telah memasukkan mysql sebagai database standarnya., namun saat ini mysql dapat pula berjalan diatas system operasi lainnya, ex : Ms. Windows, Solaris, FreeBSD, mac OSX, dsb.

Pada tahun 2003 mysql AB meneliti menggunakan jejak pendapat pada situsnya bahwa 12.598 responden didapat 5.824 ( 46,2% ) diantaranya menggunakan linux sebagai platform system operasinya dan database mysql. Mengapa mysql ?

1. Kecepatan, dalam hal kecepatan proses mysql memiliki kemampuan diatas rata – rata dari pada database lain.

2. Mudah digunakan, perintah dan return pada mysql maupun instalasi relative mudah.

3. Open source, siapapun dapat mengembangkan mysql.




4. Kapabilitas, mysql dapat digunakan untuk mengelola database dengan jumlah 50 juta record. 60000 table, dengan jumlah baris 5 milyar baris, 32 buah index per table, sedang setiap index terdiri hingga 16 kolom kriteria.

5. Replikasi data, dapat dibuat mirror server dari server induk sehingga kerja system terbantu.

6. Konektifitas dan keamanan, mysql menggunakan system keamanan dan ijin akses tingkat lanjut, dapat mengencripsikan data password user.

7. Lintas platform system operasi, dapat dijalankan diberbagai system operasi.

4.2.2. Query

Untuk mengakses database digunakan query sebagai perintahnya.1. Menampilkan database yang ada pada mysql.

Mysql>show database; 2. Membuat database

mysql>create database <nama database>;3. Menggunakan database

mysql>use <nama Db>;4. Melihat table pada database

mysql>show tables;5. Membuat table baru

mysql>create table <nama table> (<nama kolom><tipe data>);

4.2.3. Jenis Kolom (Tipe Data Pada Mysql)

1. Numeric : tinyint, smallint, mediumint, int, bigint, float, double, decimal.2. Karakter : char, varchar.3. Enum : enum, set.4. Blob : tinyblob, blob, mediumblob, longblob, tinytext, mediumtext, text, longtext.5. Tanggal dan Waktu : date, datetime, time, timestamp, year.

4.2.4. Mengenal Fungsi-fungsi MySQL

Untuk koneksi PHP ke database MySQL dilakukan dengan menggunakan fungsi-fungsi mysql_connect(), mysql_pconnect(), mysql_select_db(). mysql_connect() mysql_connect () digunakan untuk melakukan koneksi ke server database MySQL. Format penulisan :mysql_connect(nama_host, nama_user, password); Jika parameter nama host tidak dideklarasikan, otomatis akan berisi localhost.

Koneksi ke database akan secara otomatis terputus pada saat script program selesai dieksekusi seluruhnya, kecuali diberikan perintah fungsi mysql_close(). Fungsi




mysql_connect() akan menghasilkan nilai true jika koneksi berhasil dilakukan dan nilai false jika gagal.

mysql_pconnect()Fungsi mysql_pconnect() juga digunakan untuk membangun akses ke database, sama dengan fungsi mysql_connect(). Sedikit perbedaannya adalah jika menggunakan fungsi mysql_pconnect(), koneksi tidak akan terputus meskipumn program telah selesai dieksekusi.

mysql_create_db()Fungsi mysql_create_db() digunakan untuk membuat sebuah database. Biasanya untuk sebuah aplikasi digunakan sebuah database. Sebuah database akan berisi beberapa tabel.Format penulisan :mysql_create_db(“nm_database”);

Fungsi mysql_select_db()Fungsi ini berguna untuk memilih atau mengaktifkan database, seperti dalam program klien mysql pakai USE . format penulisannya:mysql_select_db(database,pengenal_hub)Dalam hal ini database adalah nama database yang digunakan, sedang pengenal_hub adalah pengenal yang diperoleh dari pemanggilan fungsi mysql_connect().

mysql_query()PHP tidak menyediakan fungsi khusus untuk membuat tabel dengan field-fieldnya, sehingga untuk membuat tabel data tetap menggunakan sintaks dari program database MySQL yang digunakan, kemudian sintaks dioperasikan menggunakan fungsi mysql_query(). Sehingga fungsi mysql_query() adalah menjalankan perintah query yang terdapat di MySQL.

mysql_db_query()fungsi ini berfungsi untuk menjalankan suatu permintaan terhadap suatu database format penulisan :mysql_db_query(database,permintaan,pengenal_hub) dalam hal ini pengenal_hub menyatakan pengenal yang didapat dari fungsi mysql_connect(), sedangkan adalah nama database yang dipergunakan dan permintaan adalah perintah SQL.

Pada aplikasi web database diperlukan mekanisme akses database dengan pemrograman php. Dalam hal ini ada beberapa langkah untuk mengkoneksikan halaman web dengan database mysql. Antara lain :

1. Buat file koneksi.php yang merupakan mekanisme akses databasenya.2. Aktifkan mysql database3. Jalankan file koneksi.php untuk memastikan database mysql terkoneksi

dengan php.






2. Soal :a) Apakah Database itu ?b) Jelaskan mengenai Database MySQL ( Kelebihan, kekurangan, sejarah

dan kemampuannya ) !


Pendahuluan :1. Buatlah 1 folder dengan nama P4_<nim>_<kelas> , contoh 09999_6A2. Buatlah 1 folder dengan nama dataweb_<nim>_<kelas> difolder yang sudah

dibuat di langkah 1, contoh dataweb_09999_6A3. Buatlah 1 file dokumen dengan nama datadoc_<nim>_<kelas> difolder yang

sudah dibuat di langkah 1, contoh datadoc_09999_6A.doc4. Tulislah kode PHP diabwah ini dengan program editor, kemudian5. Simpan kedalam direktori data anda sesuai dengan nama file php nya6. Jalankan browser dan buka file php tersebut7. Capture hasil ditampilan browser


1. Buatlah database dengan nama “praktikumdb” *tanpda tanda petik

2. Aktifkan / masuk di database yang dibuat dan masukkan query dibawah ini

CREATE TABLE IF NOT EXISTS anggota ( id int(11) NOT NULL AUTO_INCREMENT, nama varchar(150) NOT NULL, alamat text, email varchar(150) DEFAULT NULL, telp varchar(150) DEFAULT NULL, gender int(1) DEFAULT NULL, PRIMARY KEY (id)) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

INSERT INTO anggota (id, nama, alamat, email, telp, gender) VALUES(1, 'Joko', 'Jln. Apasaja no 2', '[email protected]', '0237-412123', 1),(2, 'Herman', 'Jln. Kabeta No 10. Madiun', '[email protected]', '08677666612',2);




CREATE TABLE IF NOT EXISTS forum ( idf int(11) NOT NULL AUTO_INCREMENT, nama varchar(50) DEFAULT NULL, pesan text, PRIMARY KEY (idf)) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;

INSERT INTO forum (idf, nama, pesan) VALUES(1, 'Anang', 'Hanya mencoba saja, kalau bisa ya sudah.'),(2, 'Anonymous', 'Hai, apakabar semua'),(3, 'Herlin', 'Hei, pa kabar semua, baikkah semua ?');

Kemudian klik GO / execute (pd PHPMyAdmin)

3. koneksi.php<?php// buka koneksi ke database server$database="praktikumdb"; // sesuaikan dengan databasesendiri$hostname="localhost"; // sesuaikan$username="root"; // sesuaikan$password=""; //sesuaikanif (!$dbh=mysql_connect($hostname,$username,$password)){echo mysql_error();exit;}else {// select default databasemysql_select_db($database, $dbh);echo "<h1><b>selamat anda sukses mengaksesdatabase</b></h1><br/><hr/>";}?>

4. lihat_anggota.php<?phpinclude("koneksi.php");echo "<table border=1 align=center cellpadding=0cellspacing=0><tr><h3>ini adalah data anggota</h3></tr><tr><td>No.</td><td><div align=center>Nama</div></td><td>Alamat</td><td>E-Mail</td><td>telp</td></tr>";$sql="select * from anggota order by id";$qry = mysql_query($sql);while ( $a = mysql_fetch_array ( $qry ) ) {$i++;echo ("<tr><td><center><font face=verdanasize=3>$i.</td>");echo ("<td><font face=verdana size=3>$a[nama]</td>");echo ("<td><font face=verdana size=3>$a[alamat]</td>");echo ("<td><font face=verdana size=3>$a[email]</td>");echo ("<td><font face=verdana




size=3>$a[telp]</td></tr>");}echo "</table>";?>

5. lihat_forum.php<?phpinclude("koneksi.php");echo "<table border=1 align=center cellpadding=0cellspacing=0><tr><h3>ini adalah data forum</h3></tr><tr><td>No.</td><td><div align=center>Nama</div></td><td>pesan</td>";$sql="select * from forum order by idf";$qry = mysql_query($sql);while ( $a = mysql_fetch_array ( $qry ) ) {$i++;echo ("<tr><td><center><font face=verdanasize=3>$i.</td>");echo ("<td><font face=verdana size=3>$a[nama]</td>");echo ("<td><font face=verdanasize=3>$a[pesan]</td></tr>");}echo "</table>";?>





Praktikum 5

QUERY PADA MySQL

5.1. TUJUAN

1. Mampu mengedit data2. Mampu menghapus data3. Mampu menampilkan isi table4. Mampu memodifikasi record

5.2. MATERI

5.2.1. Edit Data

Pemeliharaan data pada tahap implementasi suatu website merupakan kewajiban dari pemiliknya. Hal ini diperlukan agar data dan informasi yang ada pada website selalu uptodate.

Untuk kebutuhan tersebut maka digunakan alat bantu yaitu fasilitas edit data. Contoh Algoritma edit data :(1) mencari data yang akan diedit.

Proses pencarian menggunakan perintah query yaitu : select <namafield> from <namatable> where <kondisi>; setelah query dijalankan akan memberikan feedback berupa recordset yang berisi data hasil query.

(2) melakukan pengeditan menggunakan halaman form edit. Data yang telah ditemukan kemudian ditampilkan pada element form. Dan dilakukan pengeditan data.

(3) setelah data diedit lalu dilakukan proses update dengan query update.(4) untuk menampilkan data terbaru dapat menggunakan halaman output.

5.2.2. Delete Data




Ada saat ketika suatu data atau informasi tidak lagi dibutuhkan. Untuk itu diperlukan sebuah mekanisme delete data yang mana akan menghapus record pada database.

Algoritma delete hampir sama dengan edit data, namun pada langkah ke 3 tidak melakukan pengeditan tapi melakukan proses delete yang dapat menggunakan perintah query delete from table.

Contoh algoritma delete data :(1) mencari data yang akan diedit.

Proses pencarian menggunakan perintah query yaitu : select <namafield> from <namatable> where <kondisi>; setelah query dijalankan akan memberikan feedback berupa recordset yang berisi data hasil query.

(2) untuk keamanan proses maka dapat ditambahkan halaman konfirmasi yang berfungsi untuk menampilkan data yang akan di delete.

(3) melakukan perintah delete dengan query delete form table.(4) untuk menampilkan data terbaru dapat menggunakan halaman output.

5.2.3. Menampilkan Isi Tabel

Isi tabel dapat ditampilkan dengan menggunakan perintah SELECT, cara penulisan perintah SELECT adalah:

select kolom from namatable;

Contoh: Untuk menampilkan kolom (field) nomor dan nama pada tabel anggota

select nomor, nama from anggota; Untuk menampilkan semua kolom(field) pada tabel anggota

select * from anggota; Untuk menampilkan semua kolom pada tabel anggota yang berada pada kota ‘Surabaya’

select * from anggota where kota=’Surabaya’; Untuk menampilkan semua kolom pada tabel anggota dengan urut nama

select * from anggota order by nama; Untuk menghitung jumlah record pada tabel anggota

select count(*) from anggota; Untuk menampilkan kota pada tabel anggota

select kota from anggota; Untuk menampilkan kota dengan tidak menampikan kota yang sama pada tabel

anggotaselect distinct kota from anggota;

Untuk menampilkan nama dan email yang mempunyai email di ‘yahoo.com’select nama,email from anggota where email like‘%yahoo.com’;




5.2.4. Memodifikasi RecordUntuk memodifikasi (merubah) isi record tertentu adalah dengan

menggunakan perintah sebagai berikut:

update namatabel set kolom1=nilaibaru1, kolom2=nilaibaru2 … where kriteria;

Contoh:Merubah e-mail dari anggota yang bernomor 12 menjadi ‘[email protected]’ dalam tabel anggota.

update anggota set email=’[email protected]’ where id=’12’;



2. Soal :a) Sebutkan perintah query yang didukung oleh Database MySQL dan

sertakan contohnya !b) Apakah dalam database MySQL bisa mendukung relasi 2 atau lebih

table ? jika bisa, jelaskan dan berikan contoh, jika tidak sebutkan alasanya!




sudah dibuat di langkah 1, contoh datadoc_09999_6A.doc4. Tulislah kode PHP diabwah ini dengan program editor, kemudian5. Simpan kedalam direktori data anda sesuai dengan nama file php nya6. Jalankan browser dan buka file php tersebut7. Capture hasil ditampilan browser

* Pastikan web server telah berjalan dengan baik!1. Buatlah database dengan nama “praktikumdb” *tanda tanda petik2. Aktifkan / masuk di database yang dibuat dan masukkan query dibawah ini

CREATE TABLE IF NOT EXISTS anggota ( id int(11) NOT NULL AUTO_INCREMENT, nama varchar(150) NOT NULL, alamat text,




email varchar(150) DEFAULT NULL, telp varchar(150) DEFAULT NULL, gender int(1) DEFAULT NULL, PRIMARY KEY (id)) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

INSERT INTO anggota (id, nama, alamat, email, telp, gender) VALUES(1, 'Joko', 'Jln. Apasaja no 2', '[email protected]', '0237-412123', 1),(2, 'Herman', 'Jln. Kabeta No 10. Madiun', '[email protected]', '08677666612',2);

CREATE TABLE IF NOT EXISTS forum ( idf int(11) NOT NULL AUTO_INCREMENT, nama varchar(50) DEFAULT NULL, pesan text, PRIMARY KEY (idf)) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;

INSERT INTO forum (idf, nama, pesan) VALUES(1, 'Anang', 'Hanya mencoba saja, kalau bisa ya sudah.'),(2, 'Anonymous', 'Hai, apakabar semua'),(3, 'Herlin', 'Hei, pa kabar semua, baikkah semua ?');

3. Kemudian klik GO / execute (pd PHPMyAdmin)

4. koneksi.php<?php// buka koneksi ke database server$database="praktikumdb"; // sesuaikan dengan databasesendiri$hostname="localhost"; // sesuaikan$username="root"; // sesuaikan$password=""; //sesuaikanif (!$dbh=mysql_connect($hostname,$username,$password)){echo mysql_error();exit;}else {// select default databasemysql_select_db($database, $dbh);echo "<h1><b>selamat anda sukses mengaksesdatabase</b></h1><br/><hr/>";}?>

5. edit_db.php<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>edit_db</title></head><body><table width="75%" border="0" align="center" cellpadding="0"cellspacing="0" bgcolor="#FFFFCC"><tr align="center" bgcolor="#CCCCCC"><td height="19" colspan="2" valign="top"><? include "koneksi1.php"; ?></td></tr><tr><td width="123" height="19" align="center" valign="top"bgcolor="#CCCCCC"><font color="#000000">Menu</font></strong></td><td width="458" rowspan="4" valign="top" bgcolor="#FFFFFF">




<?echo "<table border=0 align=center cellpadding=3 cellspacing=0 bgcolor=#ffffcc><tr><h3>pilih data anggota yang akan di edit atau dihapus</h3></tr><tr bgcolor=#cccccc><td>No.</td><td><div align=center>Nama</div></td><td>Alamat</td><td>E-Mail</td><td>telp</td><td>gender</td><td>order</td></tr>";//perintah query$sql="select nama from anggota order by id";$qry = mysql_query($sql);//menampilkan data tabel anggotawhile ( $a = mysql_fetch_array ( $qry ) ) {$i++;echo ("<tr><td><center><font face=verdana size=3>$i.</td>");echo ("<td><font face=verdana size=3>$a[nama]</td>");echo ("<td><font face=verdana size=3>$a[alamat]</td>");echo ("<td><font face=verdana size=3>$a[email]</td>");echo ("<td><font face=verdana size=3>$a[telp]</td>");if($a[gender]=='1'){$gender='male';}else{ $gender='female';}echo ("<td><font face=verdana size=3>$gender</td>");echo "<td><a href=\"paneleditdb.php?id=$a[Id]\">edit</a></td>";echo "<td><a href=\"paneldeldb.php?id=$a[Id]\">delete</a></td></tr>";}echo "</table>";mysql_close();?></td></tr><tr><td height="16" align="center" valign="top"><a href="input_anggota.php"target="_self">Inputanggota</a></td></tr><tr><td height="18" align="center" valign="top"><a href="lihatdb.php"target="_self">Lihatanggota</a></td></tr><tr><td height="147" valign="top"></td></tr><tr bgcolor="#CCCCCC"><td height="19" colspan="2" valign="top"></td></tr></table></body></html>

6. paneleditdb.php<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>paneleditdb</title></head><body><table width="667" border="0" align="center" cellpadding="0"cellspacing="0" bgcolor="#FFFFCC">




<tr align="center" bgcolor="#CCCCCC"><td height="19" colspan="2" valign="top"><? include "koneksi.php";$sql="select * from anggota where Id=$id";$hasil = mysql_query($sql) or die ("gagal operasi");$a = mysql_fetch_array ( $hasil );?></td> </tr> <tr><td width="123" height="19" align="center" valign="top"bgcolor="#CCCCCC"><font color="#000000">Menu</font></strong></td><td width="458" rowspan="4" valign="top" bgcolor="#FFFFFF"><form action="proseseditdb.php" method="post" name="form1"target="_self"><table width="100%" border="0" align="center" cellpadding="4"cellspacing="0"><tr bgcolor="#8B9AA1"><th colspan="2" class="navi" scope="row">PANEL EDITDATABASE</th></tr> <tr><th class="content" scope="row"><divalign="right">ID</div></th><td><? if ($hasil){echo "<input name=\"txtid\" type=\"text\" id=\"txtid\"value=\"$a[Id]\" size=\"15\" maxlength=\"15\">";}?></td> </tr> <tr><th class="content" scope="row"><divalign="right">Nama</div></th><td><? if ($hasil){echo "<input name=\"txtnama\" type=\"text\" id=\"txtnama\"value=\"$a[nama]\" size=\"35\" maxlength=\"35\">";}?></td> </tr> <tr> <th class="content" scope="row"><divalign="right">Alamat</div></th><td><?if ($hasil){echo "<textarea name=\"txtalamat\" cols=\"35\"id=\"txtalamat\">$a[alamat]</textarea>";}?></td> </tr> <tr> <th class="content" scope="row"><divalign="right">Email</div></th><td><? if ($hasil){echo "<input name=\"txtemail\" type=\"text\" id=\"txtemail\"value=\"$a[email]\" size=\"35\" maxlength=\"35\">";}?></tr> <tr> <th class="content" scope="row"><divalign="right">Telp</div></th><td><? if ($hasil){echo "<input name=\"txttelp\" type=\"text\" id=\"txttelp\"value=\"$a[telpon]\" size=\"35\" maxlength=\"35\">";}?></tr><tr><td scope="row"><divalign="right"><strong>Gender</strong></div></td><td><?if ($a[gender]=='1'){




echo " <input name=\"rbgender\" type=\"radio\" value=\"1\"checked> Laki - laki";echo "<input name=\"rbgender\" type=\"radio\"value=\"0\">Perempuan</td>";}else{echo " <input name=\"rbgender\" type=\"radio\" value=\"1\" >Laki - laki";echo "<input name=\"rbgender\" type=\"radio\" value=\"0\" checked>Perempuan</td>";}?></td></tr><tr><td scope="row"></td><td scope="row"> <input type="submit" name="Submit" id="Submit"value="update" /><input name="reset" type="reset" id="reset2" value="Reset" /><input name="batal" type=button id="batal" value="batal"onclick=javascript:window.location.href="edit_db.php" /></th></tr></table></form></td></tr><tr><td height="16" align="center" valign="top"><a href="input_anggota.php"target="_self">Inputanggota</a></td></tr><tr><td height="18" align="center" valign="top"><a href="lihatdb.php"target="_self">Lihatanggota</a></td></tr><tr><td height="147" valign="top"></td></tr><tr bgcolor="#CCCCCC"><td height="19" colspan="2" valign="top"></td></tr></table></body></html>

7. proseseditdb.php<?include("koneksi.php");if ($txtid<>""){$sql="update anggota set ‘nama’='$txtnama', alamat='$txtalamat',email='txtemail',gender='$rbgender' where id='$txtid'";$hasil = mysql_qeury($sql) or die ("gagal operasi");echo "<script language =\"javascript\" >window.location.href=\"edit_db.php\";</script>";}else{echo "<script language =\"javascript\" >self.history.back();</script>";}?>




8. paneldeldb.php<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>paneldelete_db</title></head><body><table width="667" border="0" align="center" cellpadding="0"cellspacing="0" bgcolor="#FFFFCC"><tr align="center" bgcolor="#CCCCCC"><td height="19" colspan="2" valign="top"><? include "koneksi.php";$sql="select * from anggota where Id=$id";$hasil = mysql_query($sql) or die ("gagal operasi");$a = mysql_fetch_array ( $hasil );?></td> </tr> <tr><td width="123" height="19" align="center" valign="top"bgcolor="#CCCCCC"><font color="#000000">Menu</font></strong></td><td width="458" rowspan="4" valign="top" bgcolor="#FFFFFF"><? echo "<form action=\"prosesdeldb.php?id=$a[Id]\" method=\"post\"name=\"form1\" target=\"_self\">";?><table width="100%" border="0" align="center" cellpadding="4"cellspacing="0"><tr bgcolor="#8B9AA1"><th colspan="2" class="navi" scope="row">KONFIRMASI DELETEDATABASE</th></tr><tr><th class="content" scope="row"><div align="right">ID</div></th><td><? if ($hasil){echo "<font color=\"red\"><b>$a[Id]</b></font>";}?></td> </tr><tr> <th class="content" scope="row"><divalign="right">Nama</div></th><td><? if ($hasil){echo "<font color=\"red\"><b>$a[nama]</b></font>";}?></td></tr> <tr> <th class="content" scope="row"><divalign="right">Alamat</div></th><td> <?if ($hasil){echo "<font color=\"red\"><b>$a[alamat]</b></font>";}?></td> </tr> <tr> <th class="content" scope="row"><divalign="right">Email</div></th><td><? if ($hasil){echo "<font color=\"red\"><b>$a[email]</b></font>";}?></tr><tr> <th class="content" scope="row"><divalign="right">Telp</div></th><td><? if ($hasil){echo "<font color=\"red\"><b>$a[teelp]</b></font>";}?></tr><tr> <td scope="row"><divalign="right"><strong>Gender</strong></div></td><td> <?




if ($b[gender]=='1'){echo "<font color=\"red\"><b>laki-laki</b></font>";}else{echo "<font color=\"red\"><b>perempuan</b></font>";}?> </td> </tr> <tr> <td scope="row"></td><td scope="row"> <input type="submit" name="Submit" id="Submit"value="hapus" /><input name="batal" type=button id="batal" value="batal"onclick=javascript:window.location.href="edit_db.php" /></th></tr></table></form></td> </tr> <tr> <td height="16" align="center" valign="top"><ahref="input_anggota.php" target="_self">Inputanggota</a></td></tr> <tr> <td height="18" align="center" valign="top"><ahref="lihatdb.php" target="_self">Lihat anggota</a></td></tr><tr><td height="147" valign="top"></td></tr><tr bgcolor="#CCCCCC"><td height="19" colspan="2" valign="top"></td></tr></table></body></html>

9. prosesdeldb.php<?include("koneksi.php");if ($id<>""){$sql="delete form anggota where Id='$id'";$hasil = mysql_query($sql) or die ("gagal operasi");echo " <script language =\"javascript\">window.location.href=\"edit_db.php\"; </script>";}else{echo "<script language =\"javascript\" >self.history.back();</script>";}?>

10. inputanggota.php<?include("koneksi.php");if ($submit){function exec_time(){$mtime = explode(" ",microtime());$msec = (double)$mtime[0];$sec = (double)$mtime[1];return $sec + $msec; }$start_exec = exec_time(); //mulai menghitung waktu eksekusiquery$sql="insert into anggota (nama,alamat,email,telp,gender)values('$txtnama','$txtalamat','$txtemail','$txttelp','$rgender')";$hasil = mysql_query($sql) or die ("insert user $txtnamaGAGAL, harap coba lagi");if ($hasil){echo "<center><H2>SELAMAT ANDA TELAH BERHASIL DIDAFTARDISITUS INI</h2></center>";}else{




echo "PROSES GAGAL HARAP ULANGI LAGI!";}$end_exec = exec_time();//mencatat wektu query diselesaikan$run_time=$end_exec - $start_exec;// menghitung waktu}?><form method=post action="inputanggota.php"><table width="278" border="0" align="center"cellpadding="0" cellspacing="0" bgcolor="#FFFFCC"><tr bgcolor="#00CCFF"><td colspan="2"><div align="left"><h3>Pendaftaran Anggota Baru </h3></div></td></tr><tr><td width="53" valign="top"><strong>Nama</strong></td><td width="209"><input name="txtnama" type="text"id="txtnama" size="15" maxlength="15"></td></tr><tr><td valign="top"><strong>Alamat</strong></td><td><textarea name="txtalamat" cols="35"id="txtalamat"></textarea></td></tr><tr><td height="23"valign="top"><strong>Email</strong></td><td><input name="txtemail" type="text" id="txtemail"size="30" maxlength="30"></td></tr><tr><td valign="top"><strong>Telp</strong></td><td><input name="txttelp" type="text" id="txttelp"size="20" maxlength="20"></td></tr><tr><td valign="top"><strong>Gender</strong></td><td><input name="rgender" type="radio" value="1"checked>Male<input name="rgender" type="radio" value="0">Female</td></tr><tr><td></td><td><input name="submit" type="submit" id="submit"value="Daftar"><input name="btnreset" type="reset" id="btnreset"value="Ulang"><a href="lihatanggota.php">Lihat Anggota</a> </td></tr><tr><td><strong>Server</strong></td><td><? echo $HTTP_SERVER_VARS["REMOTE_ADDR"]; //mendeteksi ip address user?> </td></tr></table></form><? if ($submit){echo "<center><b>Waktu exekusi query = $run_timedetik</b></center>";}?>

11. lihatanggota.php<?




include("koneksi.php");echo "<table border=1 align=center cellpadding=0cellspacing=0 bgcolor =#ffffcc><tr><h3>ini adalah data anggota</h3></tr><tr bgcolor=#00ccff><td>No.</td><td><div align=center>Nama</div></td><td>Alamat</td><td>E-Mail</td><td>telp</td><td>gender</td></tr>";//perintah query$sql="select * from anggota order by id";$qry = mysql_query($sql);//menampilkan data tabel anggotawhile ( $a = mysql_fetch_array ( $qry ) ) {$i++;echo ("<tr><td><center><font face=verdana size=3>$i.</td>");echo ("<td><font face=verdana size=3>$a[nama]</td>");echo ("<td><font face=verdana size=3>$a[alamat]</td>");echo ("<td><font face=verdana size=3>$a[email]</td>");echo ("<td><font face=verdana size=3>$a[telp]</td>");if($a[gender]=='1'){$gender='male';}else{ $gender='female';}echo ("<td><font face=verdana size=3>$gender</td></tr>");}echo "</table>";echo "<center><a href=\"inputanggota.php\">kembali keinput</a></center>";mysql_close();//menutup koneksi database mysql?>





Praktikum 6

JQUERY ( FRAMEWORK JAVASCRIPT )

6.1. TUJUAN

1. Mengenal JQUERY2. Mengenal Selector3. Mengenal Events

6.2. MATERI

6.2.1. Apa itu JQUERY

JQuery pertama dirilis pada tahun 2006 oleh John Resig. Dan kini jQuery telah digunakan oleh beberapa situs yang canggih nan terkenal seperti: Google, Facebook, Twitter, Youtube, Nokia dan masih banyak lagi.

JQuery sendiri adalah Javascript Library atau kumpulan kode/fungsi Javascript siap pakai, sehingga mempermudah kita untuk membuat kode Javascript. Atau dalam kesimpulannya jQuery menyederhanakan kode Javascript. Hal ini sesuai dengan slogannya “Write less, do more”.

6.2.2. Mengapa memilih JQUERY

Ada beberapa alasan mengapa lebih baik menggunakan jQuery daripada library lainnya, antara lain:

Kompatibel dengan hampir seluruh browser jQuery telah digunakan oleh website-website raksasa Kompatibel dengan seluruh versi CSS (dari CSS 1 sampai CSS 3) Dokumentasi dan tutorialnya lengkap, bisa langsung dilihat di

http://jquery.com Didukung oleh banyak komunitas




Disupport oleh plugin yang lengkap Filenya hanya satu dan ukurannya relatif kecil, sekitar 20kb Open source atau Free jQuery lebih diminati oleh para developer web saat ini

6.2.3. Kemampuan JQUERY

Berikut beberapa kemampuan yang dimiliki yang dapat membuat kita berdecak kagum:

o Mempermudah akses dan manipulasi elemen tertentu pada dokumen. o Mempermudah modifikasi/perubahan tampilan halaman web. o Mempersingkat Ajax (Asynchronous Javacsript and XML). o Memiliki API (Application Programming Interface). o Mampu merespon interaksi antara user dengan halaman web dengan lebih

cepat. o Menyediakan fasilitas untuk membuat animasi sekelas Flash dengan mudah.

6.2.4. Cara Kerja JQUERY

Cara kerja jQuery dapat dijabarkan sebagai berikut, masih menggunakan contoh diatas sebagai penjelasannya.

1. jQuery akan memastikan bahwa semua elemen atau elemen yang diinginkan sudah ditampilkan semua di halaman web, fungsi yang digunakan adalah:$(document).ready(function(){// baris kode jQuery akan dijalankan// apabila semua elemen sudah ditampilkan semua});

2. Setelah semua elemen ditampilkan, tahap berikutnya adalah memilih elemen berdasarkan class atau id yang telah didefinisikan. Dalam hal ini, jQuery menggunakan fungsi Selector.$("#foto")$(".sembunyi")$(".tampil")

3. Setelah elemen dipilih, tahap berikutnya adalah memberikan aksi/operasi terhadap elemen yang sudah dipilih. Misalnya tombol yang akan menyembunyikan dan memunculkan kembali gambar.$(".sembunyi").click(function(){$("#foto").hide("slow");)};




6.2.5. Selector

Selector berfungsi untuk memilih/mengambil elemen-elemen tertentu yang ingin dilakukan operasi terhadap elemen tersebut atau manipulas terhadap elemen-elemn tersebut. Adapun elemen-elemen dasar yang dapat dipilih oleh selector adalah sebagai berikut :

1. Nama Tag 2. Id 3. Class

Untuk mengetahui bagaimana cara selector dalam memilih elemen-elemen tersebut, akan disajika beberapa contoh sederhana pada bagian berikutnya.

o Selector Tag Cara menggunakan selector tag adalah dengan langsung menyebut nama tag elemennya.

o Selector Id Cara menggunakan Selector id adalah dengan menyertakan tanda kres (#) sebelum nama elemennya.

o Selector Class Cara menggunakan Selector class ini adalah dengan menyertakan tanda titik (.) sebelum nama elemennya. Latihan-latihan berikut untuk menjelaskan teori diatas.

6.2.6. Events

Sebelumnya kita telah belajar Selector yang mencari elemen-elemen apa saja yang akan dilakukan operasi terhadapnya, maka Event memutuskan kapan dilakukan operasi tersebut, misalnya elemen yang telah dipilih (Selectors) akan dilakukan operasi terhadapnya setelah diklik (click) atau setelah klik 2x (dblclik), setelah mouse berada diatas objek (hover), dan sebagainya.

Effects adalah sesuatu mengenai menampilkan dan menyembunyikan suatu elemen,menggerakan elemen, dan menganimasikan elemen tersebut.

A. Efek Fade() Efek fade digunakan untuk menghilangkan atau menampilkan elemen secara perlahan-lahan, biasanya digunakan untuk transisi/pergantian suatu objek dengan




objek yang lain, sehingga transisinya terlihat lebih halus. Ada 3jenis efek fade, yaitu fadeln,fadeOut,danfadeTo.

B. Efek slide() Efek slide digunakan untuk menghilangkan atau menampilkan elemen seperti membuka/menutup sesuatu. Ada tiga jenis slide, yaitu SlideUp, SlideDown, dan SlideToggle.





sudah dibuat di langkah 1, contoh datadoc_09999_6A.doc4. Tulislah kode PHP diabwah ini dengan program editor, kemudian5. Simpan kedalam direktori data anda sesuai dengan nama file php nya6. Copy file jquery dan letakkan di dataweb yang telah dibuat7. Jalankan browser dan buka file php tersebut8. Capture hasil ditampilan browser


1. trialjquery.php

<html> <head><script type="text/javascript" src="jquery-1.4.3.js"></script><script type="text/javascript"> $("document").ready(function(){ alert ("Selamat datang");});</script></head><body></body></html>

2. clickme.php

<html><head><script language="javascript" src="jquery-1.4.3.js" ></script><script language="javascript">$(document).ready(function(){




$("input").click(function(){alert("hello jquery!");});

});</script></head> <body> <input type="submit" value="click me"/> </body></html>

3. ganticss.php

<html><head><script type="text/javascript" src="jquery-1.4.3.js"></script> <script type="text/javascript">$("document").ready(function(){$("#p1").css("color","red");});</script><title>latihan 3</title></head><body><p id="p1">Ini isi paragraf 1 </p><p id="p2">Ini isi paragraf 2 </p></body></html>

4. ganticssclass.php

<html> <head><script type="text/javascript" src="jquery-1.4.3.js"></script><script type="text/javascript">$("document").ready(function(){$("#judul").addClass("merahkuning");$(".sub1").addClass("kuninghitam"); });</script><style type="text/css"> .merahkuning { color: red; font-weight: bold; background-color:yellow; padding:3px; }

.kuninghitam { color:yellow; background-color:black; } </style> </head> <body> <h1>Judul Buku Kuliah Pemrograman Web </h1>




<ol id="judul"> <li class="sub1">Pemrograman PHP</li> <li>Database mysql</li> <li class="sub1">Mempercantik web dengan jquery</li> </ol> </body> </html>

5. singleclicka.php

<html> <head> <script type="text/javascript" src="jquery-1.4.3.js"></script> <script type="text/javascript"> $("document").ready(function(){ $('a').click(function(){ alert("Selamat datang di website STMIK Cikarang") }); }); </script> </head> <body> <a href="www.stmik-cikarang.ac.id">Klik disini untuk menuju halaman web STMIK Cikarang</a> </body> </html>

6. doubleclicka.php

<html> <head> <script type="text/javascript" src="jquery-1.4.3.js"></script> <script type="text/javascript"> $("document").ready(function(){ $("div").dblclick(function(){ $(this).css({background:"red"}); }); }); </script> <style type="text/css"> div { background:yellow; width: 60px; height:60px; float:left; margin:10px; cursor:pointer; } </style> <title>Latihan double klik</title> </head> <body> <p>klik dua kali pada setiap kotak untuk mengubah warnya</p>




<div> </div> <div> </div> <div> </div> <div> </div></body></html>

7. efekfade.php

<html> <head> <script type="text/javascript" src="jquery-1.4.3.js"></script> <script type="text/javascript"> $("document").ready(function(){ $(".fadeout").click(function(){ $("#kotak").fadeOut("slow"); }); $(".fadein").click(function(){ $("#kotak").fadeIn("slow"); }); $(".fadeto3").click(function(){ $("#kotak").fadeTo("slow",0.3); }); }); </script><style type="text/css"> #kotak{width:250px; height:180px; background:yellow; border:2px solid black; } </style> <title>Efek FadeIn, FadeOut dan FadeTo</title> </head> <body> <div id="kotak"> </div><br/> <button class="fadeout">Fade Out</button> <button class="fadein">Fade In</button> <button class="fadeto3">Fade To 0.3</button> </body> </html>

8. effectslide.php

<html> <head> <script type="text/javascript" src="jquery-1.4.3.js"></script> <script type="text/javascript"> $("document").ready(function(){




$(".flip").click(function(){ $(".pesan").slideToggle("slow"); }); }); </script> <style type="text/css"> div.pesan { height:120px; display:none; } div.pesan, p.flip{ margin:0px; padding:0px; text-align:center;background:lightyellow;border:1px solid black; } </style> <title>efek slide</title> </head> <body> <div class="pesan"> Sukses bukanlah kunci kebahagiaan<br/> Kebahagiaanlah kunci kesuksesan<<p>Jika senantiasa melakukan segala sesuatu dengan penuh cinta, maka anda akan sukses</p></div><p class="flip"> Tampilkan/sembunyikan pesan</p> </body> </html>




Modul Praktikum Pemrograman Web 1 Sampai 6

Documents

Transcript of Modul Praktikum Pemrograman Web 1 Sampai 6