Professional Documents
Culture Documents
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 )
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
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>
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> HANI ATUN MUMTAHANAH, S.Kom ( hunnybeat03@gmail.com ) L. ANANG SETIYO, S.Kom ( TOMY DWI DAYANTO H., S.Kom ( ) )
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 ( ) )
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 (
) )
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>
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
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
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>
HANI ATUN MUMTAHANAH, S.Kom ( hunnybeat03@gmail.com ) L. ANANG SETIYO, S.Kom ( TOMY DWI DAYANTO H., S.Kom (
) )
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
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 (
) )
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
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
) )
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
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
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
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 (
) )
12
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
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
<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
HANI ATUN MUMTAHANAH, S.Kom ( hunnybeat03@gmail.com ) L. ANANG SETIYO, S.Kom ( TOMY DWI DAYANTO H., S.Kom (
) )
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
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
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> </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
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 (
) )
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 (
18
Praktikum 2
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>
HANI ATUN MUMTAHANAH, S.Kom ( hunnybeat03@gmail.com ) L. ANANG SETIYO, S.Kom ( TOMY DWI DAYANTO H., S.Kom (
) )
20
<? 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 */ ?>
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 ( ) )
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; ?>
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 (
) )
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 ( ) )
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 (
) )
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." ".$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 (
) )
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); ?>
Praktikum 3
) )
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 (
) )
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 (
) )
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; } ?>
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 :
While
HANI ATUN MUMTAHANAH, S.Kom ( hunnybeat03@gmail.com ) L. ANANG SETIYO, S.Kom ( TOMY DWI DAYANTO H., S.Kom (
) )
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 (
) )
30
sintak
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 ( ) )
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 (
) )
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 (
) )
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 ( ) )
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." ".$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 (
) )
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>>: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>
HANI ATUN MUMTAHANAH, S.Kom ( hunnybeat03@gmail.com ) L. ANANG SETIYO, S.Kom ( TOMY DWI DAYANTO H., S.Kom (
) )
36
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 (
) )
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>"; ?>
38
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 (
) )
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>;
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 ( ) )
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 ( ) )
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 (
) )
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 ?');
?>
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 ( ) )
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>"; ?>
HANI ATUN MUMTAHANAH, S.Kom ( hunnybeat03@gmail.com ) L. ANANG SETIYO, S.Kom ( TOMY DWI DAYANTO H., S.Kom (
) )
44
Praktikum 5
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 ( ) )
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 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 (
) )
46
Untuk menampilkan semua kolom pada tabel anggota dengan urut nama
select * from anggota order by nama;
Untuk menampilkan kota dengan tidak menampikan kota yang sama pada tabel anggota
select distinct kota from anggota;
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
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 (
) )
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 ?');
HANI ATUN MUMTAHANAH, S.Kom ( hunnybeat03@gmail.com ) L. ANANG SETIYO, S.Kom ( TOMY DWI DAYANTO H., S.Kom (
) )
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 (
) )
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 (
) )
50
HANI ATUN MUMTAHANAH, S.Kom ( hunnybeat03@gmail.com ) L. ANANG SETIYO, S.Kom ( TOMY DWI DAYANTO H., S.Kom (
) )
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 (
) )
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 (
) )
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 (
) )
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 (
) )
55
Praktikum 6
HANI ATUN MUMTAHANAH, S.Kom ( hunnybeat03@gmail.com ) L. ANANG SETIYO, S.Kom ( TOMY DWI DAYANTO H., S.Kom (
) )
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 ( ) )
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 ( ) )
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 (
) )
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 (
) )
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 ( ) )
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> </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"> HANI ATUN MUMTAHANAH, S.Kom ( hunnybeat03@gmail.com ) L. ANANG SETIYO, S.Kom ( TOMY DWI DAYANTO H., S.Kom ( ) )
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 (
) )
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>
HANI ATUN MUMTAHANAH, S.Kom ( hunnybeat03@gmail.com ) L. ANANG SETIYO, S.Kom ( TOMY DWI DAYANTO H., S.Kom (
) )