You are on page 1of 63

PRAKTIKUM PEMROGRAMAN WEB PHP

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 lainlain. 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 ( chubee12002@yahoo.com )

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP

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> Item nomer 1 Item nomer 2 Item nomer 3

Hasil dari kode di atas adalah:

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. 2. 3. Item nomer 1 Item nomerr 2 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.

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

) )

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP


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

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> HANI ATUN MUMTAHANAH, S.Kom ( hunnybeat03@gmail.com ) L. ANANG SETIYO, S.Kom ( TOMY DWI DAYANTO H., S.Kom ( ) )

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP


.. . </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.
HANI ATUN MUMTAHANAH, S.Kom ( hunnybeat03@gmail.com ) L. ANANG SETIYO, S.Kom ( TOMY DWI DAYANTO H., S.Kom ( ) )

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP

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
HANI ATUN MUMTAHANAH, S.Kom ( hunnybeat03@gmail.com ) L. ANANG SETIYO, S.Kom ( TOMY DWI DAYANTO H., S.Kom (

) )

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP

2. Buatlah 1 folder dengan nama dataweb_<nim>_<kelas> difolder 3. Buatlah yang 1 sudah file dibuat di langkah 1, contoh nama dibuat di dataweb_09999_6A dokumen difolder yang dengan sudah datadoc_<nim>_<kelas>

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> HANI ATUN MUMTAHANAH, S.Kom ( hunnybeat03@gmail.com ) L. ANANG SETIYO, S.Kom ( TOMY DWI DAYANTO H., S.Kom ( ) )

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP

Tulislah kode html tersebut diatas dengan program editor, kemudian Simpan kedalam direktori data anda dengan nama file heading.html Jalankan browser dan buka file heading.html Capture hasil ditampilan browser

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>

Tulislah kode html tersebut diatas dengan program editor, kemudian Simpan kedalam direktori data anda dengan nama file paragraf.html Jalankan browser dan buka file paragraf.html Capture hasil ditampilan browser
<html> <head> <title>preformatted text</title> </head>

4. Preformatted Text dalam HTML :

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

) )

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP


<body> <pre>

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

Tulislah kode html tersebut diatas dengan program editor, kemudian Simpan kedalam direktori data anda dengan nama file pre.html Jalankan browserdan buka file pre.html Capture hasil ditampilan browser

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 banyak menambah masalah pada remaja adalah narkoba, seks, alkohol dan merokok. jangan sekali-kali mencoba jika tidak ingin membuat masalah baru</blockquote> </body> </html>

Tulislah kode html tersebut diatas dengan program editor, kemudian Simpan kedalam direktori data anda dengan nama file blockquote.html Jalankan di browser dan buka file blockquote.html Capture hasil ditampilan browser

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

) )

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP

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>

Tulislah kode html tersebut diatas dengan program editor, kemudian Simpan kedalam direktori data anda dengan nama file linebreak.html Jalankan browserdan buka file linebreak.html Capture hasil ditampilan browser

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>

Tulislah kode html tersebut diatas dengan program editor, kemudian Simpan kedalam direktori data anda dengan nama file font.html Jalankan browserdan buka file font.html Capture hasil ditampilan browser

8. Jenis font dalam HTML :


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

) )

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP


<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>

10

Tulislah kode html tersebut diatas dengan program editor, kemudian Simpan kedalam direktori data anda dengan nama file fontface.html Jalankan browserdan buka file fontface.html Capture hasil ditampilan browser

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>

Tulislah kode html tersebut diatas dengan program editor, kemudian Simpan kedalam direktori data anda dengan nama file fontcolor.html Jalankan browserdan buka file fontcolor.html Capture hasil ditampilan browser

10. Link dalam HTML :


<html> <head> <title>link</title> </head> <body> <a name="atas">pemain-pemain club zamaliq</a> <blockquote> HANI ATUN MUMTAHANAH, S.Kom ( hunnybeat03@gmail.com ) L. ANANG SETIYO, S.Kom ( TOMY DWI DAYANTO H., S.Kom ( ) )

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP


<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>

11

Tulislah kode html tersebut diatas dengan program editor, kemudian Simpan kedalam direktori data anda dengan nama file link.html Jalankan browserdan buka file link.html Capture hasil ditampilan browser

11. Link tujuan dalam HTML :


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

Tulislah kode html tersebut diatas dengan program editor, kemudian Simpan kedalam direktori data anda dengan nama file link2.html Jalankan browserdan buka file link2.html Capture hasil ditampilan browser

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

) )

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP

12

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>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>2</td> <td>Ale</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>3</td> <td>Bentaos</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table> </body> </html>

Tulislah kode html tersebut diatas dengan program editor, kemudian Simpan kedalam direktori data anda dengan nama file table.html Jalankan browserdan buka file table.html Capture hasil ditampilan browser

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> HANI ATUN MUMTAHANAH, S.Kom ( hunnybeat03@gmail.com ) L. ANANG SETIYO, S.Kom ( TOMY DWI DAYANTO H., S.Kom (

) )

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP


<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>

13

Tulislah kode html tersebut diatas dengan program editor, kemudian Simpan kedalam direktori data anda dengan nama file tablekompleks.html Jalankan browserdan buka file tablekompleks.html Capture hasil ditampilan browser

14. Membuat Form Input dengan Text box


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

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP

14

<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>

Tulislah kode html tersebut diatas dengan program editor, kemudian Simpan kedalam direktori data anda dengan nama file form.html Jalankan browserdan buka file form.html Capture hasil ditampilan browser

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>

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

) )

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP

15

Tulislah kode html tersebut diatas dengan program editor, kemudian Simpan kedalam direktori data anda dengan nama file check.html Jalankan browserdan buka file check.html Capture hasil ditampilan browser

16. Membuat Form Input dengan Radio box


<html> <head> <title>form input dengan radio </head> <body> <p>pilih salah satu </p> <p>usia anda</p> <p> <input type="radio" value="v1" <input type="radio" value="v2" <input type="radio" value="v3" <input type="radio" value="v4" <input type="radio" value="v5" </p> </body> </html> box</title>

checked name="r1">< 15 tahun<br> name="r1">15-19 tahun<br> name="r1">19-25 tahun<br> name="r1">25-35 tahun<br> name="r1"> > 35 tahun<br>

Tulislah kode html tersebut diatas dengan program editor, kemudian Simpan kedalam direktori data anda dengan nama file radio.html Jalankan browserdan buka file radio.html Capture hasil ditampilan browser

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> HANI ATUN MUMTAHANAH, S.Kom ( hunnybeat03@gmail.com ) L. ANANG SETIYO, S.Kom ( TOMY DWI DAYANTO H., S.Kom ( ) )

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP

16

<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>&nbsp;</td> </tr> </table> <p><input type="submit" value="kirim" name="b1"> <input type="reset" value="batal" name="b2"></p> </form> </body> </html>

Tulislah kode html tersebut diatas dengan program editor, kemudian Simpan kedalam direktori data anda dengan nama file book.html Jalankan browserdan buka file book.html Capture hasil ditampilan browser

18. Membuat Frame


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

Tulislah kode html tersebut diatas dengan program editor, kemudian Simpan kedalam direktori data anda dengan nama file praktik18.html

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

) )

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP

17

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><font color="#009999">di</font> </b></font></i></font><b><font face="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"><a href="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 Capture hasil ditampilan browser
) )

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

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP

18

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
HANI ATUN MUMTAHANAH, S.Kom ( hunnybeat03@gmail.com ) L. ANANG SETIYO, S.Kom ( TOMY DWI DAYANTO H., S.Kom ( ) )

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP

19

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 : 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>

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

) )

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP


</html>

20

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 menggunakan metode 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.
HANI ATUN MUMTAHANAH, S.Kom ( hunnybeat03@gmail.com ) L. ANANG SETIYO, S.Kom ( TOMY DWI DAYANTO H., S.Kom ( ) )

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP

21

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 ?>

Konstanta Konstanta 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>

Array Array 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 array Untuk 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;

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

) )

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP


for(a=4;a<=0;a--) { echo nama mobil : <b> $mobil[a] </b>; } ?>

22

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 fungsi function <nama fungsi>(argumen){ statements / proses; } ?>

2.3. TUGAS PENDAHULUAN 1. Apakah PHP itu ? jelaskan ! 2. Komponen apasajakah yang diperlukan untuk menjalankan PHP ? Sebutkan dan Jelaskan 3. Jelaskan tentang Tipe Data, Variabel dan Fungsi dalam PHP 4. 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 2.4. TUGAS PRAKTIKUM Pendahuluan : 1) Buatlah 1 folder dengan nama P2_<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
HANI ATUN MUMTAHANAH, S.Kom ( hunnybeat03@gmail.com ) L. ANANG SETIYO, S.Kom ( TOMY DWI DAYANTO H., S.Kom ( ) )

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP

23

Buatlah 1 file dokumen dengan nama datadoc_<nim>_<kelas> difolder yang sudah dibuat di langkah 1, contoh datadoc_09999_6A.doc 4) Tulislah kode PHP diabwah ini dengan program editor, kemudian 5) Simpan kedalam direktori data anda sesuai dengan nama file php nya 6) Jalankan browser dan buka file php tersebut 7) 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>

3)

2. contohphp2.php
<? $bilangan1 = 10; $bilangan2 = 4; echo "bilangan pertama = $bilangan1"; echo "<br>"; // untuk membuat baris baru echo "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>";

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

) )

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP


// 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>"; ?>

24

3. contohphp3.php
<? $kata1 = "saya sedang belajar"; $kata2 = "Pemrograman PHP"; // mencetak kata echo "$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 asli echo "ini adalah nama penjahat kelas teri <br/>"; while (list($key,$value)=each($namapenjahat)) { echo "$key : $value <br/>"; } //menambah array array_push($namapenjahat,"jerry","toms","kamu"); //menampilkan array hasil penambahan echo "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

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

) )

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP

25

$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 kredit function 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); ?>

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

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
HANI ATUN MUMTAHANAH, S.Kom ( hunnybeat03@gmail.com ) L. ANANG SETIYO, S.Kom ( TOMY DWI DAYANTO H., S.Kom (

) )

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP

26

2. Mengenal dan memahami penggunaan Statemen Perulangan for, while dan do-while dengan script PHP 3. Mengenal dan memahami penggunaan Operator dengan script PHP 4. 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.
HANI ATUN MUMTAHANAH, S.Kom ( hunnybeat03@gmail.com ) L. ANANG SETIYO, S.Kom ( TOMY DWI DAYANTO H., S.Kom (

) )

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP

27

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; } ?>

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

) )

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP

28

Switch Case ( Memilih Kondisi ) Operator switch case mempunyai struktur kerja yang sama dengan operator ifelse. Perbedaan hanya penulisan sintak. Sintak :
<? $variable switch ( $variable){ case (kondisi 1) : perintah case (kondisi 2) : perintah case (kondisi 3) : perintah case (kondisi 4) : perintah default : perintah; break; } ?>

jika jika jika jika

benar; benar; benar; benar;

break; break; break; 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. for 2. while 3. do.while

For Perulangan 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; } ?>

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

) )

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP

29

Perulangan 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_awal while(kondisi){ jalankan sesuatu; $nilai_awal++; } ?>

Do.While Operator dowhile 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.

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

) )

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP

30

sintak

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

3.2.3. OPERATOR ARITMETIKA DALAM PHP Operator aritmatika adalah operator yang melakukan fungsi matematika. Operator aritmatika dalam PHP : Operator Operasi Penggunaan

digunakan

untuk

Operator Increment/Decrement Pre/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.
Operato r ++ -Operasi Pre/Post Increment Pre/Post Decrement Penggunaan ++$a atau $a++ --$b atau $b--

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

Operator Bitwise Operator bitwise dapat digunakan untuk membuat bit tertentu dari suatu integer menjadi 1 atau 0.
HANI ATUN MUMTAHANAH, S.Kom ( hunnybeat03@gmail.com ) L. ANANG SETIYO, S.Kom ( TOMY DWI DAYANTO H., S.Kom ( ) )

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP

31

Operator Perbandingan
Conto h $a > $b $a <= $b < $a >= $b $a == $b $a != $b Nama Lebih dari Kurang dari atau sama dengan Kurang dari Lebih besar atau sama dengan Sama dengan Tidak sama dengan Hasil True jika $a lebih besar dari $b True jika $a lebih kecil dari $b atau $a sama dengan $b True jika $a lebih kecil dari $b True jika $a lebih besar dari $b atau $a sama dengan $b True jika $a sama dengan $b True jika $a tidak sama dengan $b

Operator Ternary Menggunakan 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 :
(Ekspresi) ? (jika benar) : (jika salah);

Contoh :
<?

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

) )

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP


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

32

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 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).

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

) )

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP

33

3.3. TUGAS PENDAHULUAN 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 !

3.4. TUGAS PRAKTIKUM Pendahuluan : 1) Buatlah 1 folder dengan nama P3_<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
HANI ATUN MUMTAHANAH, S.Kom ( hunnybeat03@gmail.com ) L. ANANG SETIYO, S.Kom ( TOMY DWI DAYANTO H., S.Kom ( ) )

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP

34

3) Buatlah 1 file dokumen dengan nama datadoc_<nim>_<kelas> difolder yang sudah dibuat di langkah 1, contoh datadoc_09999_6A.doc 4) Tulislah kode PHP diabwah ini dengan program editor, kemudian 5) Simpan kedalam direktori data anda sesuai dengan nama file php nya 6) Jalankan browser dan buka file php tersebut 7) Capture hasil ditampilan browser * Pastikan web server telah berjalan dengan baik! 1. operator.php
<?php $kata1 = "saya sedang belajar"; $kata2 = "Pemrograman PHP"; //operator string echo "$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 :

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

) )

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP


</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>

35

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>&gt;:lihat tamu :&lt;</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>

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

) )

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP


<td align="center" bgcolor="#9999FF"> <?php echo "<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>

36

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
<?

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

) )

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP

37

$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 31 for($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>"; ?>

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


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

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP

38

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 PHP 8. 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.
HANI ATUN MUMTAHANAH, S.Kom ( hunnybeat03@gmail.com ) L. ANANG SETIYO, S.Kom ( TOMY DWI DAYANTO H., S.Kom (

) )

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP

39

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. 2. Membuat database
Mysql>show database; mysql>create database <nama database>;

3. Menggunakan database 4. Melihat table pada database


mysql>show tables; mysql>use <nama Db>;

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.
HANI ATUN MUMTAHANAH, S.Kom ( hunnybeat03@gmail.com ) L. ANANG SETIYO, S.Kom ( TOMY DWI DAYANTO H., S.Kom ( ) )

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP

40

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 database. Biasanya untuk sebuah aplikasi digunakan database. Sebuah database akan berisi beberapa tabel. Format penulisan :
mysql_create_db(nm_database);

sebuah sebuah

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 database 3. Jalankan file koneksi.php untuk memastikan database mysql terkoneksi dengan php.
HANI ATUN MUMTAHANAH, S.Kom ( hunnybeat03@gmail.com ) L. ANANG SETIYO, S.Kom ( TOMY DWI DAYANTO H., S.Kom ( ) )

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP

41

4.3. TUGAS PENDAHULUAN 1. Kumpulkan dalam bentuk Hardcopy dan ditulis dengan rapi serta menyertakan nama dan nim 2. Soal : a) Apakah Database itu ? b) Jelaskan mengenai Database MySQL ( Kelebihan, kekurangan, sejarah dan kemampuannya ) !

4.4. TUGAS PRAKTIKUM Pendahuluan : 1. Buatlah 1 folder dengan nama P4_<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 4. Tulislah kode PHP diabwah ini dengan program editor, kemudian 5. Simpan kedalam direktori data anda sesuai dengan nama file php nya 6. Jalankan browser dan buka file php tersebut 7. Capture hasil ditampilan browser * Pastikan web server telah berjalan dengan baik! 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, HANI ATUN MUMTAHANAH, S.Kom ( hunnybeat03@gmail.com ) L. ANANG SETIYO, S.Kom ( TOMY DWI DAYANTO H., S.Kom (

) )

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP


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 ;

42

INSERT INTO anggota (id, nama, alamat, email, telp, gender) VALUES (1, 'Joko', 'Jln. Apasaja no 2', 'xxx123@xxx.com', '0237-412123', 1), (2, 'Herman', 'Jln. Kabeta No 10. Madiun', 'xxx@xxxx.com', '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 database sendiri $hostname="localhost"; // sesuaikan $username="root"; // sesuaikan $password=""; //sesuaikan if (!$dbh=mysql_connect($hostname,$username,$password)) { echo mysql_error(); exit; }else { // select default database mysql_select_db($database, $dbh); echo "<h1><b>selamat anda sukses mengakses database</b></h1><br/><hr/>"; }

?>

4. lihat_anggota.php
<?php include("koneksi.php"); echo "<table border=1 align=center cellpadding=0 cellspacing=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"; HANI ATUN MUMTAHANAH, S.Kom ( hunnybeat03@gmail.com ) L. ANANG SETIYO, S.Kom ( TOMY DWI DAYANTO H., S.Kom ( ) )

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP


$qry = mysql_query($sql); while ( $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></tr>"); } echo "</table>"; ?>

43

5. lihat_forum.php
<?php include("koneksi.php"); echo "<table border=1 align=center cellpadding=0 cellspacing=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=verdana size=3>$i.</td>"); echo ("<td><font face=verdana size=3>$a[nama]</td>"); echo ("<td><font face=verdana size=3>$a[pesan]</td></tr>"); } echo "</table>"; ?>

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

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

) )

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP

44

Praktikum 5

QUERY PADA MySQL


5.1. TUJUAN 1. 2. 3. 4. Mampu Mampu Mampu Mampu mengedit data menghapus data menampilkan isi table 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.
HANI ATUN MUMTAHANAH, S.Kom ( hunnybeat03@gmail.com ) L. ANANG SETIYO, S.Kom ( TOMY DWI DAYANTO H., S.Kom ( ) )

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP

45

(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;

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

) )

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP

46

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 anggota
select 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 Record Untuk memodifikasi (merubah) isi record tertentu adalah dengan menggunakan perintah sebagai berikut:
update namatabel where kriteria; set kolom1=nilaibaru1, kolom2=nilaibaru2

Contoh: Merubah e-mail dari anggota yang supri@yahoo.com dalam tabel anggota.

bernomor

12

menjadi

update anggota set email=supri@yahoo.com where id=12;

5.3. TUGAS PENDAHULUAN 1. 2. Kumpulkan dalam bentuk Hardcopy dan ditulis dengan rapi serta menyertakan nama dan nim 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!

5.4. TUGAS PRAKTIKUM Pendahuluan : 1. Buatlah 1 folder dengan nama P5_<nim>_<kelas> , contoh 09999_6A

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

) )

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP

47

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 4. Tulislah kode PHP diabwah ini dengan program editor, kemudian 5. Simpan kedalam direktori data anda sesuai dengan nama file php nya 6. Jalankan browser dan buka file php tersebut 7. Capture hasil ditampilan browser * Pastikan web server telah berjalan dengan baik! 1. Buatlah database dengan nama praktikumdb *tanda 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', 'xxx123@xxx.com', '0237-412123', 1), (2, 'Herman', 'Jln. Kabeta No 10. Madiun', 'xxx@xxxx.com', '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 database sendiri $hostname="localhost"; // sesuaikan $username="root"; // sesuaikan $password=""; //sesuaikan if (!$dbh=mysql_connect($hostname,$username,$password)) { echo mysql_error();

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

) )

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP


exit; }else { // select default database mysql_select_db($database, $dbh); echo "<h1><b>selamat anda sukses mengakses database</b></h1><br/><hr/>"; } ?>

48

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 anggota while ( $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"

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

) )

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP


target="_self">Input anggota</a></td> </tr> <tr> <td height="18" align="center" valign="top"><a href="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>

49

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 EDIT DATABASE</th> </tr> <tr> <th class="content" scope="row"><div align="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"><div align="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"><div

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

) )

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP


align="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"><div align="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"><div align="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"><div align="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">Input anggota</a></td> </tr> <tr> <td height="18" align="center" valign="top"><a href="lihatdb.php" target="_self">Lihat anggota</a></td> </tr> <tr> <td height="147" valign="top"></td>

50

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

) )

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP


</tr> <tr bgcolor="#CCCCCC"> <td height="19" colspan="2" valign="top"></td> </tr> </table> </body> </html>

51

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 DELETE DATABASE</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"><div

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

) )

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP


align="right">Nama</div></th> <td> <? if ($hasil){ echo "<font color=\"red\"><b>$a[nama]</b></font>"; } ?> </td></tr> <tr> <th class="content" scope="row"><div align="right">Alamat</div></th> <td> <?if ($hasil){ echo "<font color=\"red\"><b>$a[alamat]</b></font>"; } ?> </td> </tr> <tr> <th class="content" scope="row"><div align="right">Email</div></th> <td><? if ($hasil){ echo "<font color=\"red\"><b>$a[email]</b></font>"; } ?> </tr><tr> <th class="content" scope="row"><div align="right">Telp</div></th> <td> <? if ($hasil){ echo "<font color=\"red\"><b>$a[teelp]</b></font>"; } ?> </tr><tr> <td scope="row"><div align="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"><a href="input_anggota.php" target="_self">Input anggota</a></td> </tr> <tr> <td height="18" align="center" valign="top"><a href="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>

52

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\" >

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

) )

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP


self.history.back(); </script>"; } ?>

53

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 eksekusi query $sql="insert into anggota (nama,alamat,email,telp,gender) values ('$txtnama','$txtalamat','$txtemail','$txttelp','$rgender')" ; $hasil = mysql_query($sql) or die ("insert user $txtnama GAGAL, harap coba lagi"); if ($hasil){ echo "<center><H2>SELAMAT ANDA TELAH BERHASIL DIDAFTAR DISITUS 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"

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

) )

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP


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_time detik</b></center>";} ?>

54

11. lihatanggota.php
<? include("koneksi.php"); echo "<table border=1 align=center cellpadding=0 cellspacing=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 anggota while ( $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 ke input</a></center>"; mysql_close();//menutup koneksi database mysql ?>

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

) )

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP

55

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

Praktikum 6

JQUERY ( FRAMEWORK JAVASCRIPT )


6.1. TUJUAN 1. Mengenal JQUERY 2. Mengenal Selector 3. Mengenal Events

6.2. MATERI 6.2.1. Apa itu JQUERY

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

) )

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP

56

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
HANI ATUN MUMTAHANAH, S.Kom ( hunnybeat03@gmail.com ) L. ANANG SETIYO, S.Kom ( TOMY DWI DAYANTO H., S.Kom ( ) )

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP

57

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 elemenelemen tersebut, akan disajika beberapa contoh sederhana pada bagian berikutnya.
HANI ATUN MUMTAHANAH, S.Kom ( hunnybeat03@gmail.com ) L. ANANG SETIYO, S.Kom ( TOMY DWI DAYANTO H., S.Kom ( ) )

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP

58

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. Latihanlatihan 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 menyembunyikan suatu elemen,menggerakan elemen, menganimasikan elemen tersebut. dan dan

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.

5.3. TUGAS PENDAHULUAN 5.4. TUGAS PRAKTIKUM Pendahuluan : 1. Buatlah 1 folder dengan nama P6_<nim>_<kelas> , contoh 09999_6A

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

) )

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP

59

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 4. Tulislah kode PHP diabwah ini dengan program editor, kemudian 5. Simpan kedalam direktori data anda sesuai dengan nama file php nya 6. Copy file jquery dan letakkan di dataweb yang telah dibuat 7. Jalankan browser dan buka file php tersebut 8. Capture hasil ditampilan browser * Pastikan web server telah berjalan dengan baik! 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> HANI ATUN MUMTAHANAH, S.Kom ( hunnybeat03@gmail.com ) L. ANANG SETIYO, S.Kom ( TOMY DWI DAYANTO H., S.Kom (

) )

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP


<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>

60

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> HANI ATUN MUMTAHANAH, S.Kom ( hunnybeat03@gmail.com ) L. ANANG SETIYO, S.Kom ( TOMY DWI DAYANTO H., S.Kom ( ) )

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP

61

<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>&nbsp;</div> <div>&nbsp;</div> <div>&nbsp;</div> <div>&nbsp;</div> </body> </html>

7. efekfade.php
<html> <head> <script type="text/javascript" src="jquery-1.4.3.js"></script> <script type="text/javascript"> HANI ATUN MUMTAHANAH, S.Kom ( hunnybeat03@gmail.com ) L. ANANG SETIYO, S.Kom ( TOMY DWI DAYANTO H., S.Kom ( ) )

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP


$("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">&nbsp;</div><br/> <button class="fadeout">Fade Out</button> <button class="fadein">Fade In</button> <button class="fadeto3">Fade To 0.3</button> </body> </html>

62

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> HANI ATUN MUMTAHANAH, S.Kom ( hunnybeat03@gmail.com ) L. ANANG SETIYO, S.Kom ( TOMY DWI DAYANTO H., S.Kom (

) )

PRAKTIKUM PEMROGRAMAN WEB DENGAN PHP

63

<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>

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

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

) )

You might also like