Andino Maseleno - Modul Web Programming

1,978 views
1,831 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,978
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
71
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Andino Maseleno - Modul Web Programming

  1. 1. WEB PROGRAMMING HTML, CSS, PHP DAN MySQL DISUSUN OLEH Andino MaselenoFAKULTAS TEKNIK JURUSAN TEKNIK ELEKTRO UNIVERSITAS GADJAH MADA 2007
  2. 2. Web Programming HTML, CSS, PHP dan MySQL H T M L (HyperText Markup Language) HTML ( HyperText Markup Language ) merupakan suatu format data yang digunakanuntuk membuat dokumen yang dapat dibaca dari suatu platform komputer ke platform komputeryang lain tanpa melakukan perubahan apapun, format data ini dapat menampilkan halaman webdengan menggunakan program khusus untuk aplikasi internet yang disebut web browser. Dalammenuliskan HTML, yang diperlukan hanyalah sebuah text editor yang baik, seperti menggunakanNotePad (Windows) atau text editor vi (Linux). Dalam penulisannya, HTML terdiri dari tanda-tanda (tag) yang berpasangan yang dimulaidengan simbol <tag> dan diakhiri dengan </tag> dan penulisannya bersifat non-case-sensitive, namun demikian dalam penulisannya harus konsisten antara penggunaan huruf besardan huruf kecil. Berikut ini adalah contoh penulisan HTML yang sederhana : <html> <head> <title>Judul pada title bar web browser</title> </head> <body>Bagian ini merupakan isi dokumen HTML </body> </html>• Heading Tag heading biasanya berfungsi untuk memformat Heading (judul / sub judul) dokumenHTML, format penulisannya adalah sebagai berikut : 2Andino Maseleno
  3. 3. Web Programming HTML, CSS, PHP dan MySQL <html> <head><title>Latihan Heading</title> </head> <body> <H1>Heading 1</H1> <H2>Heading 2</H2> <H3>Heading 3</H3> <H4>Heading 4</H4> <H5>Heading 5</H5> <H6>Heading 6</H6> </body> </html>• Paragraf Untuk memformat paragraf digunakan <P>, sedangkan untuk menentukan posisi tulisandapat digunakan atribut ALIGN dan diikuti dengan posisi yang diinginkan. Selain itu ada juga tag <BR> untuk pindah baris, <HR> untuk membuat garis horisontaldan tag <PRE> untuk menampilkan teks sama dengan yang dituliskan dalam dokumen HTML. 3Andino Maseleno
  4. 4. Web Programming HTML, CSS, PHP dan MySQLContoh : <html> <head><title>Latihan Heading</title></head> <body> <p align="left">Tulisan ini rata kiri dokumen </p> <p align="center">Tulisan ini berada di tengah dokumen</p> <p align="right">Tulisan ini rata kanan dokumen</p> <br>Saya sudah<br> ganti baris</p> <pre><----------> | u u | | v | <----------> </pre> </body> </html>• Font Untuk mengatur jenis, warna dan ukuran suatu font, digunakan tag <FONT> yangmemiliki beberapa atribut seperti <FACE> dan <COLOR> dan <SIZE>. Atribut <FACE> digunakan untuk menentukan jenis huruf yang akan digunakan, misalnyauntuk jenis huruf Comic Sans MS, maka dituliskan <FONT FACE="Comic Sans MS">. 4Andino Maseleno
  5. 5. Web Programming HTML, CSS, PHP dan MySQLContoh : <html> <head><title>Latihan Font</title></head> <body><p> <font face=Courier New, Courier, COLOR=#FF0000 SIZE=1> Ini menggunakan Font Courier New warna MERAH dan ukurannya 1 </font></p><p> <font face=Courier New, Courier, COLOR=#0066FF SIZE=3>Ini menggunakan Font Courier New warna BIRU dan ukurannya 3 </font> </p> </body> </html> Atribut <COLOR> digunakan untuk menentukan warna font dengan diikuti nama warna,misalnya warna merah dengan <FONT COLOR="#FF0000">. Atribut <SIZE> digunakan untuk menentukan ukuran font dengan diikuti ukuran yangdiinginkan, misalnya dengan <FONT SIZE="3">.• Warna Dokumen HTML menyediakan atribut untuk mengatur warna dasar (background) dari halaman web,atribut tersebut diletakkan pada tag <BODY> agar efeknya dapat dilihat di seluruh dokumen. 5Andino Maseleno
  6. 6. Web Programming HTML, CSS, PHP dan MySQL Atribut Fungsi BGCOLOR Menentukan warna background halaman web Menentukan gambar/image yang akan dipasang sebagai background BACKGROUND halaman web TEXT Menentukan warna teks normal LINK Menentukan warna teks yang berfungsi sebagai link ALINK Menentukan warna teks link ketika diklik VLINK Menentukan warna teks link setelah diklik• Link Link pada halaman web berfungsi untuk menghubungkan antara satu halaman denganhalaman lain. Untuk link ini HTML menyediakan tag <A> (Anchor) diikuti dengan atribut HREFuntuk menghubungkan dengan halaman lainnya dan NAME untuk memberikan nama pada tulisandalam dokumen HTML untuk mempermudah navigasi.Contoh pembuatan link : <html> <head><title>Latihan Link</title> </head> <body> <a name="top">Bagian ini ditandai dengan TOP</a><p> <a href="font.html">Link ke file font.html</a><p> <a href="#top">Link ke tempat yang ditandai</a> </body> </html> 6Andino Maseleno
  7. 7. Web Programming HTML, CSS, PHP dan MySQL• List (Daftar) HTML menyediakan tag untuk membuat list (daftar), misalnya jika ingin membuat daftarbarang seperti : meja, kursi atau komputer. Jenis list dalam HTML dibagi menjadi :1. Ordered List Merupakan daftar yang pada setiap bagiannya disertai dengan penomoran, diawali dengan tag <OL> dan setiap item dalam list selalu diawali dengan <LI>, jenis list yang dipakai tergantung dengan TYPE yang dituliskan dalam tag <OL>. misalnya : A = a, b, c I = i, ii, iii2. Unordered List Pada setiap item dalam list ditandai dengan pemakaian bullet, yang diawali dengan tag <UL> dan setiap item dalam list dimulai dengan tag <LI> dan juga memiliki beberapa jenis TYPE (circle, disk, square dan standard). 7Andino Maseleno
  8. 8. Web Programming HTML, CSS, PHP dan MySQL Contoh penggunaan list : <html> <head> <title>Latihan List</title> </head> <body> DI bawah ini menggunakan ORDERED LIST : <ol type=a> <li>Apel <li>Mangga <li>Semangka </ol> Di bawah ini menggunakan UNORDERED LIST : <ul type=square> <li>Apel <li>Mangga <li>Semangka </ul> </body> </html>3. Menu List 8Andino Maseleno
  9. 9. Web Programming HTML, CSS, PHP dan MySQL List dapat dibuat dalam beberapa tipe yang didukung oleh HTML dan web browser, perbedaannya utamanya terletak pada identifikasi HTML. Pada kebanyakan browser akan menampilkan <MENU> yang mirip dengan tipe unordered list. Sama seperti list sebelumnya, menu list menyediakan line breaks di awal dan di akhir menu container. Yang membedakan pada list ini, setiap elemen dari list merupakan link ke halaman web lain. <HTML> <HEAD><TITLE>Contoh Menu Listing</TITLE></HEAD> <BODY> <MENU> <LH><EM>Planet-planet dalam Sistem Tata Surya :</EM><BR> <LI><A HREF="mercury.htm">Mercury</A> <LI><A HREF="venus.htm"> Venus </A> <LI><A HREF="earth.htm"> Earth </A> <LI><A HREF="mars.htm"> Mars </A> <LI><A HREF="jupiter.htm"> Jupiter </A> <LI><A HREF="saturn.htm"> Saturn </A> <LI><A HREF="uranus.htm"> Uranus </A> <LI><A HREF="neptune.htm"> Neptune </A> <LI><A HREF="pluto.htm"> Pluto </A> </MENU> </BODY> </HTML>4. Definition List Sering disebut sebagai glossary list, yang menyediakan format penulisan seperti metode penulisan dalam kamus, berupa identifiable term dan indented definition paragraph. Format 9Andino Maseleno
  10. 10. Web Programming HTML, CSS, PHP dan MySQL list seperti ini biasanya digunakan untuk menampilkan hasil pencarian terhadap data yang disertai dengan deskripsinya, seperti katalog buku. HTML> <HEAD><TITLE>Definition List Example</TITLE></HEAD> <BODY> <DL> <DT>Mercury <DD>The smallest of the planets and the one nearest the sun, having a sidereal period of revolution about the sun of 88.0 days at a mean distance of 58.3 million kilometers. <DT>Venus <DD>The second planet from the sun, having an average radius of 6,052 kilometers (3,760 miles), a mass 0.815 times that of Earth. <DT>Earth <DD>The third planet from the sun, having a sidereal period of revolution about the sun of 365.26 days at a mean distance of approximately 149 million kilometers. </DL> </BODY> </HTML>• Menampilkan Gambar Pada situs web, dapat juga ditampilkan gambar. HTML menyediakan fasilitas untuk menampilkan gambar pada halaman web dengan tag <IMG>. 10Andino Maseleno
  11. 11. Web Programming HTML, CSS, PHP dan MySQL Penulisan tag ini diikuti dengan bermacam-macam atribut seperti : - SRC, untuk menentukan lokasi gambar yang akan ditampilkan - ALT, sebagai teks pengganti apabila ada browser yang tidak mendukung grafik - BORDER, untuk memberikan border di sekeliling gambar - HSPACE dan VSPACE, untuk menentukan jarak spasi dengan obyek di sekitar gambar secara horisontal ataupun vertika Contoh program : <html> <head> <title>Latihan Menampilkan Gambar</title> </head> <body> <img src="creative.JPG" align="left hspace=20 vspace=1"><p></p> </body> </html>• Membuat Tabel Penggunaan tabel dapat mempermudah dalam mendesain halaman web, untuk membuat tabel, HTML menyediakan tag <TABLE> yang memiliki beberapa atribut yaitu : - BORDER, untuk menentukan ukuran garis tabel - HEIGHT, menentukan lebar tabel - WEIGHT, menentukan tinggi tabel - BGCOLOR, menentukan background tabel - BACKGROUND, menentukan gambar untuk background tabel Untuk membuat baris, setelah tag <TABLE> dapat digunakan tag <TR>, sedangkan untuk membuat kolom digunakan tag <TD>. Sebagian besar atribut dalam tag <TABLE> dapat digunakan dalam tag <TR> maupun tag <TD>. 11Andino Maseleno
  12. 12. Web Programming HTML, CSS, PHP dan MySQL Untuk menggabungkan baris dan kolom (merge), digunakan atribut COLSPAN untuk menggabungkan beberapa kolom menjadi satu dan ROWSPAN untuk menggabungkan beberapa baris menjadi satu. CELLPADDING, digunakan untuk mengatur spasi antara border dengan tulisan, sedangkan CELLSPACING digunakan untuk mengatur spasi antar dua buah sel. Contoh : <html> <head> <title>Latihan Membuat Tabel</title></head> <body> <table border="2" cellspacing="3" cellpadding="2" width="100%"> <tr> <td bgcolor="#0033FF" colspan="2" align="center">Kelas</td> <td bgcolor="#FF0000" align="center" rowspan="2">Ket</td> </tr> <tr> <td align="center">1</td> <td align="center">2</td> </tr> </table> </body> </html>• Form Input 12Andino Maseleno
  13. 13. Web Programming HTML, CSS, PHP dan MySQL Tag <form> dan <input> digunakan bersama-sama untuk meminta masukan dari user untuk kemudian dikirim ke server. Tag <form> membuat kerangkanya sedangkan tag <input> menyediakan elemen antarmuka dengan user. Pada situs yang menyediakan buku tamu bagi pengunjungnya. Digunakan formulir yang dibuat dengan menggunakan elemen <form> dan <input>. Standar penulisannya adalah : <Form method =”POST/GET” ACTION=”URL_Address”> … … </Form> Form Text Box Text box merupakan salah satu jenis kontrol untuk memasukkan data. HTML menyediakan tag <INPUT> dengan atribut TYPE=”text” untuk membuat kotak input. Jika TYPE merupakan jenis dari input yang diberikan, maka atribut VALUE digunakan untuk memberi nilai suatu input, dan atribut SIZE untuk menentukan batas terpanjang sebuah masukan. Nilai VALUE juga menjadi tulisan yang tampak pada browser. 13Andino Maseleno
  14. 14. Web Programming HTML, CSS, PHP dan MySQL <html> <head><title>Form Input dengan Text Box </title></head> <body><h1> <p>Rancangan Buku Tamu</p></h1> <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="jakarta" 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> 14 </html>Andino Maseleno
  15. 15. Web Programming HTML, CSS, PHP dan MySQL Form Check Box Selain atribut TYPE bernilai text dan password, anda bisa memberi nilai atribut TYPE dengan checkbox yang digunakan untuk memberi user pilihan. Dengan menggunakan checkbox, user bisa memilih salah satu pilihan, lebih dari satu pilihan, atau tidak memilih semua pilihan. <html> <head><title>Form Input dengan Check Box</title></head> <body> <p><h1>Pilih yang anda suka</h1></p><p>Daftar Jurusan</p><p> <input Type="checkbox" Name="C1">checked>Teknik Elektro<br> <input Type="checkbox" Name="C2">checked>Pertanian<br> <input Type="checkbox" Name="C3">checked>Kedokteran<br> <input Type="checkbox" Name="C1">checked>Teknik Informatika<br> </p> </body> Form Radio Button Jika atribut TYPE =”checkbox” diganti dengan TYPE=”radio”, maka user harus memilih salah satu pilihan yang tersedia. User tidak bisa memilih kurang atau lebih dari satu pilihan. Atribut checked memberi tanda bahwa pilihan tersebut sedang diaktifkan. 15Andino Maseleno
  16. 16. Web Programming HTML, CSS, PHP dan MySQL <html> <head><title>Form Input dengan Radio Button</title></head> <body> <p>Pilih salah satu </p> <p>Usia anda :</p> <p> <input type="radio" value="V1" checked name="R1">15 Tahun<br> <input type="radio" value="V2" name="R1">15-19 Tahun<br> <input type="radio" value="V3" name="R1">19-25 Tahun<br> <input type="radio" value="V4" name="R1">25-35 Tahun<br> <input type="radio" value="V5" name="R1">35 Tahun<br> </p> </body> </html> Form Text Area Merupakan form untuk membentuk area yang dapat digunakan nuntuk menuliskan sekumpulan teks dan nantinya dapat dijadikan sebagai input pada halaman web. 16Andino Maseleno
  17. 17. <html> <head><title>Membuat Text Area</title></head> Web Programming <body> HTML, CSS, PHP dan MySQL <p>Ketik pesan anda dalam kotak di bawah ini : <br> <textarea name=comments rows=8 cols=50></textarea> </body> </html> Form Submit dan Reset Setiap form harus memiliki minimal tombol submit atau tombol reset. Lebih baik jika keduanya digunakan bersama. Kedua tombol diatas dibuat dengan menggunakan atribut TYPE=”submit” dan TYPE =”reset”. Tombol submit digunakan ketika user telah selesai mengisi formulir dan ingin mengirimkan ke server, sedangkan tombol reset digunakan ketika user ingin menghapus semua masukan yang telah ditulis. <html> <head><title>Buku Tamu</title></head> <body> <h2> <p align="center"> Buku Tamu </p> </h2> <form method="post" action="thanks.html"> <table border="0" cellpadding="2" width="100%"> <tr> <td width="8%">Nama</td> <td width="4%">:</td> <td width="88%"><input type="text" name="nama" size="20"></td> </tr> <tr> <td width="8%">Asal</td> <td width="4%">:</td> <td width="88%"><input type="text" name="asal" size="20"></td> </tr> 17Andino Maseleno
  18. 18. Web Programming HTML, CSS, PHP dan MySQL Bersambung.. Sambungan.. <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">Penilaian</td> <td width="4%" valign="top">:</td> <td width="88%"> <input type="radio" value="V1" checked name="R1">Bagus<br> <input type="radio" value="V2" name="R1">Bagus sekali<br> <input type="radio" value="V3" name="R1">Biasa saja<br> </td> </tr> </table> <p><input type="submit" value="kirim" name="B1"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="reset" value="Batal" name="B2"></P> </form> </body> </html> 18Andino Maseleno
  19. 19. Web Programming HTML, CSS, PHP dan MySQL Tag <FORM> dan <INPUT> digunakan bersama-sama untuk meminta masukan dari user yang kemudian dikirim ke server. Tag <FORM> akan membuat kerangkanya, sedangkan tag <INPUT> akan menyediakan elemen antarmuka dengan user. Atribut METHOD memiliki dua nilai, yaitu POST dan GET. Metode GET mengirimkan data pada sever dengan cara meletakkan data pada bagian akhir URL (Uniform Resource Locator) yang ditunjuk. Pada metode POST akan mengirimkan datanya secara terpisah. Sedangkan atribut ACTION akan berisi URL dari program yang dipanggil oleh form tersebut. <html> <head><title>Halaman Terima Kasih</title></head> <body> <h2><p align="center">TERIMA KASIH ...</h2> </body> </html> Dari form Buku Tamu, maka akan dipanggil form thanks.html, yang merupakan hasil aksi dari form Buku Tamu <form method="post" action="thanks.html">.• Membuat Fieldset Merupakan fungsi untuk membuat sebuah form yang terbagi menjadi beberapa bagian. <html> <head> <title>Fieldset</title> </head> <body> <h2><p align="center">Membuat Field Set</p></h2> <form method="post" action="thanks.html"> <fieldset> 19Andino Maseleno <legend>Formulir Informasi</legend>
  20. 20. Web Programming HTML, CSS, PHP dan MySQL Bersambung.. Sambungan... <table> <tr><td> <label for=name>Nama :</label> </td> <td> <input type=text name=name ID=name> </td> </tr> <tr><td> <label for=email>E-mail :</label> </td> <td> <input type=text name=email ID=email> </td> </tr> <tr><td> <label for=addr>Pesan :</label> </td> <td> <textarea name=address ID=addr rows=4 cols=40></textarea> </td> </tr> 20 </table>Andino Maseleno </fieldset>
  21. 21. Web Programming HTML, CSS, PHP dan MySQLBersambung..Sambungan.. <fieldset> <legend>Informasi Kartu Kredit</legend><p> <label> <input type=radio name=card value=visa>Visa </label> <label> <input type=radio name=card value=mc>Master Card </label><br> <label>Nomor Kartu &nbsp;&nbsp;&nbsp;:<input type=text name=number> </label><br> <label> Batas Pemakaian : <input type=text name=number> </label> </p> </fieldset> <p align="center"> <input type=submit value="Kirim">&nbsp;&nbsp;&nbsp;&nbsp; <input type=reset value="Hapus saja"> </p> </form> </body> </html> 21Andino Maseleno
  22. 22. Web Programming HTML, CSS, PHP dan MySQL• Membuat Frame Frame dalam HTML berfungsi untuk membuat beberapa windows yang independen dalam sebuah tampilan halaman web, sehingga pada setiap windows dapat dilakukan pengaturan atau perubahan tanpa mempengaruhi windows yang lain. <HTML> <HEAD> </HEAD> <FRAMESET ROWS="25%,50%,25%"> <FRAME SRC="header.html"> <FRAMESET COLS="25%,75%"> <FRAME SRC="radiobutton.html"> <FRAME SRC="thanks.html"> </FRAMESET> <FRAME SRC="footer.html"> </FRAMESET> <NOFRAMES> Browser anda tidak dapat menampilkan frame. </NOFRAMES> </HTML> Fungsi frame hampir menyerupai tabel dalam HTML, frame memiliki kelebihan dalam mengorganisasi data dan mengorganisasi browser dalam menampilkan window karena frame berfungsi untuk menampilkan window yang lebih independen, dan setiap window dapat berisi file HTML lain sebagai isinya. Atau dengan kata lain, sebuah frame lebih menyerupai mini browser. 22Andino Maseleno
  23. 23. Web Programming HTML, CSS, PHP dan MySQL Membuat Target Hyperlink Dalam frameset, suatu dokumen dapat dibuka pada suatu frame tertentu tanpa menutup frame yang ada saat ini, atau dengan kata lain suatu dokumen dapat diarahkan untuk terbuka pada frame tertentu. Atribut untuk mengarahkan dokumen tersebut adalah atribut TARGET, sedangkan lokasi frame yang dituju dibuat dengan menggunakan atribut NAME. <FRAMESET COLS="25%,75%"> <FRAME SRC="framelink.html"> <FRAME name="isi"> </FRAMESET> Dari program ini, sebuah frameset akan terbagi menjadi 2 kolom frame, yaitu kolom frame yang berisi file framelink.html dan kolom frame yang dinamai "isi". 23Andino Maseleno
  24. 24. Web Programming HTML, CSS, PHP dan MySQL <HTML> <HEAD> </HEAD> <FRAMESET ROWS="20%,80%"> <FRAME SRC="header.html"> <FRAMESET COLS="25%,75%"> <FRAME SRC="framelink.html"> <FRAME NAME="isi"> </FRAMESET> <FRAME SRC="footer.html"> </FRAMESET> <NOFRAMES> Browser anda tidak dapat menampilkan frame. </NOFRAMES> </HTML> Dari program di atas akan memberikan nama (atribut NAME) "isi" pada suatu frame, kemudian untuk menampilkan suatu dokumen web ke frame "isi" digunakan atribut TARGET, misalkan pada file framelink.html buat sebuah link yang hasil dari link tersebut nantinya akan ditampilkan pada frame "isi". 24Andino Maseleno
  25. 25. Web Programming HTML, CSS, PHP dan MySQL <HTML> <HEAD><TITLE>File Framelink</TITLE></HEAD> <body> <a href="radiobutton.html" target="isi"> Klik di sini untuk menampilkan radio button</a><p> <a href="checkbox.html" target="isi"> Klik di sini untuk menampilkan checkbox</a> <a href="thanks.html" target="isi"> Klik di sini untuk menampilkan penutup</a> </body> </HTML> Program di atas akan menghasilkan dokumen framelink.html, pada dokumen ini berisi link yang targetnya akan ditampilkan pada frame "isi". 25Andino Maseleno
  26. 26. Web Programming HTML, CSS, PHP dan MySQL C S S (Cascading Style Sheet)Pengenalan CSS• CSS ( Cascading Style Sheet ) adalah kumpulan format (style) yang digunakan untuk mengatur tampilan atau isi halaman web, style ini dapat digunakan untuk mendefinisikan teks, jenis huruf, ukuran dan warna tertentu pada sebuah halaman web.• Elemen dasar CSS secara umum dibagi menjadi : 1. Selector, adalah tag/elemen normal pada HTML, yaitu tag yang akan didefinisikan. 2. Deklarasi, adalah satu atau beberapa perintah/nilai dari CSS yang menunjukkan type/bentuk yang diaplikasikan pada selector, yang terdiri dari : a. Properti (property) b. Nilai properti (value) selector { property: value } Antara properti dan nilai dipisahkan dengan titik dua ( : ) seperti contoh di bawah ini : body {color: black} Jika nilai terdiri dari beberapa kata, digunakan beberapa tanda kutip ganda ( “ ) : p {font-family: “times new roman”} Jika terdapat lebih dari satu properti, maka dipisahkan dengan dengan titik koma ( ; ) : p {text-align: center; color: red}• Penggunaan Kelas Kelas digunakan untuk mendefiniskan suatu style, bentuk pendefinisian kelas : 26Andino Maseleno
  27. 27. Web Programming HTML, CSS, PHP dan MySQL .nama_kelas { property: value } Cara memberi nama kelas : • Dapat mengandung huruf, angka, atau karakter garis bawah. • Karakter pertama harus huruf atau karakter garis bawah. • Tidak boleh mengandung spasi. Contoh : <html> <head> <title>Penggunaan Class</title> <style type="text/css"> .kapital { text-transform: uppercase } .garis_bawah { text-decoration: underline } </style> </head> <body> <p class="kapital">Huruf Kapital</p> <span class="garis_bawah">Garis Bawah</span> </body> </html>Metode Penulisan CSS Dalam CSS, format umum penulisan tag CSS adalah : <STYLE type=”text/css”> … definisi style … </STYLE> 27Andino Maseleno
  28. 28. Web Programming HTML, CSS, PHP dan MySQLDalam meletakkan informasi style (CSS) ke dalam dokumen HTML, dapat digunakan tiga cara, yaitu:a. Inline Style Inline style merupakan CSS style yang disisipkan pada elemen web tertentu dalam sebuah dokumen. Contoh : ...... <p style="font-family: verdana; color: blue"> Paragraph ini berwarna biru </p>b. Internal Style Internal style merupakan CSS style yang disisipkan langsung pada header dokumen HTML (diantara tag <head> ... </head>). Contoh : <html> <head> <title>Internal CSS Style</title> <style type="text/css"> table { font-family: verdana; font-size:10px } </style> </head> <body> ...... </body> 28 </html>Andino Maseleno
  29. 29. Web Programming HTML, CSS, PHP dan MySQLc. Eksternal Style Eksternal style merupakan CSS Style yang disimpan terpisah dengan dokumen HTML. Contoh : eksternal.css ( file CSS ) /* Dokumen CSS */ hr { color: sienna } p { font-family: verdana; color: blue } table { font-family: verdana; font-size: 10pt } .judul { font-family: verdana; font-size: 14pt } eksternal.html ( File HTML yang memanggil file CSS ) <html> <head> <title>Eksternal CSS</title> <link rel="stylesheet" type="text/css" href="eksternal.css"> </head> <body> ...... </body> </html> 29Andino Maseleno
  30. 30. Web Programming HTML, CSS, PHP dan MySQLModel Pemformatan pada CSSa. Font Properties Font properties digunakan untuk merubah jenis huruf, ketebalan, ukuran dan style pada text. Property Keterangan Nilai font-family Menentukan jenis huruf Jenis huruf standar (Arial, Verdana, Times New Roman) font-size Menentukan ukuran font xx-small x-small small medium large x-large xx-large smaller larger length font-style Mengatur teks agar dimiringkan atau tidak normal italic font-weight Menebalkan atau menipiskan teks normal bold bolder lighter 100 200 300 400 30Andino Maseleno
  31. 31. Web Programming HTML, CSS, PHP dan MySQL 500 600 700 800 900Contoh : <html> <head> <title>Latihan CSS 1 – Font Properties</title> <style type="text/css"> .judul { font-family: verdana; font-size: 20pt; font-style: italic; font-weight: bold } .paragraf { font-family: verdana; font-size: 10pt } </style> </head> <body> <div align="center" class="judul">PEMBUKAAN</div> <p align="justify" class="paragraf"> Era globalisasi pada Milenium III memberikan ciri-ciri sebagai tantangan yang harus dihadapi yaitu; 1) Perdagangan bebas antar negara. 2) Persaingan SDM yang semakin ketat, bukan saja bersaing sesama SDM domestik, melainkan juga bersaing menghadapi SDM yang yang datang dari negara lain. 3) Era tanpa batas <i>(borderless 31 country)</i> menghadapkan kita pada pergaulan internasional lintasAndino Maseleno budaya <i>(cross culture) </i>,menjadikan hanya SDM yang profesional dan berkualitas internasional saja yang akan memenangkan persaingan untuk karir kerja yang bermartabat.
  32. 32. Web Programming HTML, CSS, PHP dan MySQL </p> </body> </html>b. Text properties Text properties digunakan untuk mengontrol segala bentuk dari text, seperti merubah warna text, menambah atau mengurangi spasi diantara karakter pada teks, mengatur peletekkan text, mendekorasi text, indent text pada baris awal dan lain-lain. Property Keterangan Nilai color Untuk mengatur warna teks nama warna Kode RGB letter-spacing Menambah atau mengurangi spasi diantara normal karakter pada teks length text-align Mengatur peletekkan teks left right center justify text-decoration Mendekorasi teks None underline overline line-through 32Andino Maseleno
  33. 33. Web Programming HTML, CSS, PHP dan MySQL blink text-indent Membuat indent teks pada baris awal lengthBersambung…Sambungan.. Property Keterangan Nilai text-transform Untuk melakukan konversi terhadap teks none capitalize uppercase lowercase Contoh : <html> <head> <title>Latihan CSS 2 – Text Properties</title> <style type="text/css"> .judul { font-family: verdana; font-size: 20pt; font-style: italic; font-weight:bold; color:#000099; letter-spacing: 5px; text-align: center; text-decoration: underline } .paragraf { font-family: verdana; font-size: 10pt; text-indent: 30px} </style> 33Andino Maseleno </head> <body> <div class="judul">PEMBUKAAN</div>
  34. 34. Web Programming HTML, CSS, PHP dan MySQLBersambung..Sambungan.. <p align="justify" class="paragraf"> Era globalisasi pada Milenium III memberikan ciri-ciri sebagai tantangan yang harus dihadapi yaitu; 1) Perdagangan bebas antar negara. 2) Persaingan SDM yang semakin ketat, bukan saja bersaing sesama SDM domestik, melainkan juga bersaing menghadapi SDM yang datang dari negara lain. 3) Era tanpa batas <i>(borderless country)</i> menghadapkan kita pada pergaulan internasional lintas budaya <i>(cross culture) </i>,menjadikan hanya SDM yang profesional dan berkualitas internasional saja yang akan memenangkan persaingan untuk karir kerja yang bermartabat. </p> </body> </html>c. Background Properties Background properties digunakan untuk mengontrol warna latar belakang dari sebuah elemen, set sebuah gambar menjadi latar belakang, mengulang gambar latar belakang secara vertikal atau horizontal, dan memposisikan gambar latar belakang dalam sebuah halaman. 34Andino Maseleno
  35. 35. Web Programming HTML, CSS, PHP dan MySQL Property Keterangan Nilai background-color Mengatur warna latar belakang nama warna kode RGB Transparent background-image Menset sebuah gambar menjadi latar url(nama_file_gambar) belakang background-repeat Mengatur bagaimana gambar repeat background diulang repeat-x repeat-y no-repeat background-position Mengatur posisi gambar latar top left belakang dalam sebuah halaman web top center top right center left center center center right bottom left bottom center bottom right x-% y-% x-pos y-posContoh : <html> 35Andino Maseleno <head> <title>Latihan CSS 3 – Background Properties</title>
  36. 36. Web Programming HTML, CSS, PHP dan MySQLBersambung..Sambungan.. <style type="text/css"> .judul { font-family: verdana; font-size: 20pt; font-style: italic; font-weight:bold; color:#000099; background-color: #FFFF99 } .paragraf { font-family: verdana; font-size: 10pt; text-indent: 30px } body {background-image: url(bk.gif)} </style> </head> <body> <div align="center" class="judul">PEMBUKAAN</div> <p align="justify" class="paragraf"> Era globalisasi pada Milenium III memberikan ciri-ciri sebagai tantangan yang harus dihadapi yaitu; 1) Perdagangan bebas antar negara. 2) Persaingan SDM yang semakin ketat, bukan saja bersaing sesama SDM domestik, melainkan juga bersaing menghadapi SDM yang yang datang dari negara lain. 3) Era tanpa batas <i>(borderless country)</i> menghadapkan kita pada pergaulan internasional lintas budaya <i>(cross culture) </i>,menjadikan hanya SDM yang profesional dan berkualitas internasional saja yang akan memenangkan persaingan untuk karir kerja yang bermartabat. </p> </body> 36Andino Maseleno </html>
  37. 37. Web Programming HTML, CSS, PHP dan MySQLd. Margin Properties Margin Properties digunakan untuk mendefinisikan margin disekitar elemen spasi, sehingga dimungkinkan untuk menggunakan nilai negatif untuk saling melengkapi isi nilai. Property Keterangan Nilai margin-bottom Mengatur margin bawah sebuah elemen Length ( % ) margin-left Mengatur margin kiri sebuah elemen Length ( % ) margin-right Mengatur margin kanan sebuah elemen Length ( % ) margin-top Mengatur margin atas sebuah elemen Length ( % )Contoh : <html> <head> <title>Latihan CSS 4 – Margin Properties</title> <style type="text/css"> .judul { font-family: verdana; font-size: 20pt; font-style: italic; font-weight:bold; color:#000099; } .paragraf { font-family: verdana; font-size: 10pt; text-indent: 30px } 37Andino Maseleno
  38. 38. Web Programming HTML, CSS, PHP dan MySQLBersambung..Sambungan.. body { margin-top: 3cm; margin-right: 3cm; margin-bottom: 3cm; margin-left: 3cm } </style> </head> <body> <div align="center" class="judul">PEMBUKAAN</div> <p align="justify" class="paragraf"> Era globalisasi pada Milenium III memberikan ciri-ciri sebagai tantangan yang harus dihadapi yaitu; 1) Perdagangan bebas antar negara. 2) Persaingan SDM yang semakin ketat, bukan saja bersaing sesama SDM domestik, melainkan juga bersaing menghadapi SDM yang datang dari negara lain. 3) Era tanpa batas <i>(borderless country)</i> menghadapkan kita pada pergaulan internasional lintas budaya <i>(cross culture) </i>,menjadikan hanya SDM yang profesional dan berkualitas internasional saja yang akan memenangkan persaingan untuk karir kerja yang bermartabat. </p> </body> </html> 38Andino Maseleno
  39. 39. Web Programming HTML, CSS, PHP dan MySQLe. Border Properties Border properties digunakan untuk menspesifikasikan style, warna, dan lebar pada sebuah elemen border. Property Keterangan Nilai border-style Mengatur style border Hidden Dotted Dashed solid double groove ridge inset outset border-color Mengatur warna border Color border-width Mengatur ketebalan border Thin medium thick length border-bottom-color Mengatur warna border pada sisi bawah border-color 39Andino Maseleno
  40. 40. Web Programming HTML, CSS, PHP dan MySQL border-bottom-style Mengatur style border pada sisi bawah border-style border-bottom-width Mengaturan ketebalan border pada sisi border-width bawahBersambung..Sambungan.. Property Keterangan Nilai border-left-color Mengatur warna border pada sisi kiri border-color border-left-style Mengatur style border pada sisi kiri border-style border-left-width Mengatur ketebalan border pada sisi kiri border-width border-right-color Mengatur warna border pada sisi kanan border-color border-right-style Mengatur style border pada sisi kanan border-style border-right-width Mengatur ketebalan style pada sisi kanan border-width border-top-color Mengatur warna border pada sisi atas border-color border-top-style Mengatur style border pada sisi atas border-style border-top-width Mengatur ketebalan border pada sisi atas border-widthContoh : <html> <head> <title>CSS Border</title> <style type="text/css"> table {font-family: verdana; font-size: 10pt} 40 .garis1Andino Maseleno { border-bottom: solid 1px red; border-top: solid 1px red;
  41. 41. Web Programming HTML, CSS, PHP dan MySQLBersambung…Sambungan.. background-color:#FFFF99 } .garis2 { border-bottom: solid 1px red} </style> </head> <body> <table bordercolor="#000000" width="350" cellpadding="3" cellspacing="0" border="0"> <tr> <th width="40%" class="garis1">Tipe Layanan</th> <th width="30%" class="garis1">Bandwidth</th> <th width="30%" class="garis1">Rp/Bulan</th> </tr> <tr> <td class="garis2">Emas</td> <td align="center" class="garis2">512 Kbps</td> <td align="center" class="garis2">11.500.000</td> </tr> <tr> <td class="garis2">Perunggu</td> 41 <td align="center" class="garis2">128 Kbps</td>Andino Maseleno <td align="center" class="garis2">5.000.000</td> </tr>
  42. 42. Web Programming HTML, CSS, PHP dan MySQLBersambung..Sambungan.. <tr> <td class="garis2">Tembaga</td> <td align="center" class="garis2">64 kbps</td> <td align="center" class="garis2">3.500.000</td> </tr> <tr> <td class="garis2">Tembaga</td> <td align="center" class="garis2">64 kbps</td> <td align="center" class="garis2">3.500.000</td> </tr> </table> </font> </body> </html> 42Andino Maseleno
  43. 43. Web Programming HTML, CSS, PHP dan MySQLf. Padding Properties Padding Properties digunakan untuk mengatur spasi antara border dengan elemennya dan elemen dengan isi. Nilai negatif tidak diperbolehkan. Property Keterangan Nilai padding-bottom Mengatur jarak spasi dari sisi bawah Length ( % ) padding-left Mengatur jarak spasi dari sisi kiri Length ( % ) padding-right Mengatur jarak spasi dari sisi kanan Length ( % ) padding-top Mengatur jarak spasi dari sisi atas Length ( % )Contoh : <html> <head> <title>CSS Padding</title> <style type="text/css"> .garis { font-family: verdana; font-size: 10pt; padding-top: 3px; padding-right: 5px; padding-bottom: 3px; padding-left: 5px } 43 </style>Andino Maseleno </head>
  44. 44. Web Programming HTML, CSS, PHP dan MySQLBersambung..Sambungan.. <body> <table border="1" bordercolor="#000000" width="350" cellspacing="0"> <tr> <th width="40%" class="garis">Tipe Layanan</th> <th width="30%" class="garis">Bandwidth</th> <th width="30%" class="garis">Rp/Bulan</th> </tr> <tr> <td class="garis">Emas</td> <td align="center" class="garis">512 Kbps</td> <td align="center" class="garis">11.500.000</td> </tr> <tr> <td class="garis">Perunggu</td> <td align="center" class="garis">128 Kbps</td> <td align="center" class="garis">5.000.000</td> </tr> <tr> <td class="garis">Tembaga</td> <td align="center" class="garis">64 kbps</td> <td align="center" class="garis">3.500.000</td> 44 </tr>Andino Maseleno </table> </font> </body>
  45. 45. Web Programming HTML, CSS, PHP dan MySQL P H P (PHP: Hypertext Preprocessor) PHP (PHP: Hypertext Preprocessor) adalah bahasa pemrograman yang ditempel diHTML. Tujuan bahasa ini adalah membolehkan pengelola web untuk menulis halamandinamis secara cepat. Fasilitas PHP yang pasti adalah integrasinya dengan mesin database yang membuathalaman web dengan dukungan database dengan mudah. Mesin database yang didukung : - Oracle - Generic ODBC - Dbase - Sybase - Adabas - Unix DBM - mSQL - FilePro - PostGreSQL - MySQL - Velocis - Solid - Database dengan Interface ODBC Selain kemudahan penulisan dan akses database, PHP juga menyediakan fasilitas-fasilitasseperti :1. Autentifikasi HTTP. Fasilitas ini memungkinkan kita untuk mengirimkan pesan "Authentification Required" dariserver pada browser klien yang akan menampilkan Window untuk memasukkan user name danpassword. 45Andino Maseleno
  46. 46. Web Programming HTML, CSS, PHP dan MySQL2. Upload File PHP juga mendukung fasilitas upload yang mudah dimana PHP dapat menerima formupload dan menciptakan file temporary di server, dan selanjutnya terserah programmer untukmemutuskan apakah file temporary tadi akan dihapus atau dicopy ke lokasi yang diinginkan.4. HTTP Cookie PHP juga mendukung Cookies, yaitu mekanisme untuk menyimpan data dalam remotebrowser dan mengidentifikasi apa yang dikembalikan user.5. Penanganan Kesalahan Semua ekspresi PHP, jika terdapat kesalahan penulisan akan mengembalikan pesankesalahan (error) jika dipanggil.Script Pertama Script PHP adalah sebuah blok, yang diawali dengan <?php dan diakhiri dengan?>. Contoh paling sederhana adalah script berikut : <?php print(“Script PHP pertama… !”); ?> <?php adalah perintah untuk memulai PHP. Beberapa server memang diset untukmemperbolehkan penggunaan perintah <? tanpa tambahan kata "php". Perintah berikutnya adalah print ("Script PHP pertama… !"); Perhatikanperintah, Bentuk perintahnya adalah menggunakan kurung buka dan kurung tutup,kemudian diakhiri dengan tanda titik koma ( ; ). Apa yang berada di antara kurung akanditampilkan di layar browser. Tanda petik harus digunakan kalau apa yang inginditampilkan berupa "string", bukan variabel. Misalnya tulisan di atas. Di sini perlu 46Andino Maseleno
  47. 47. Web Programming HTML, CSS, PHP dan MySQLdiperhatikan bahwa setiap baris perintah dalam script PHP harus diakhiri dengan tanda titikkoma. Perintah terakhir pada script di atas adalah ?>. Ini adalah perintah yang selaludigunakan untuk menutup blok kode PHP anda. Kemudian masukkan blok script di atas kedalam file html sehingga keseluruhan file akan berbentuk sebagai berikut : <HTML> <HEAD></HEAD> <BODY> <?php print ("Script PHP pertama… !"); ?> </BODY> </HTML> Kemudian simpan file tersebut dengan ekstension php, dan jalankan file andamenggunakan dengan menggunakan web browser. <html> <head><title>Ambil tanggal hari ini</title> </head> <body> <?php printf("Tanggal hari ini : %s ", Date("d F Y")); ?> <p>Kita mulai belajar PHP </body> </html> 47Andino Maseleno
  48. 48. Web Programming HTML, CSS, PHP dan MySQL Dalam penulisannya, kita dapat menambah komentar dalam script PHP kita tanpamempengaruhi proses yang dikerjakan. Komentar dalam PHP dapat diawali dengan tanda // yangharus mengawali setiap baris. Jadi karakter apapun yang anda tulis setelah tanda // akan diabaikandan dianggap sekedar komentar. Syaratnya harus berada pada baris yang sama. Komentar juga dapat diberikan di antara tanda /* dan */ tanpa harus berada padabaris yang sama <html> <body> Teks di sini adalah teks HTML biasa. Anda dapat menulis apapun di sini. Namun setelah ini anda mulai masuk ke blok script PHP.<p> <?php /* Sekarang akan menampilkan perintah "phpinfo()". Perintah ini akan memberikan hasil berupa konfigurasi PHP yang anda gunakan. Informasi ini akan bermanfaat saat anda melakukan troubleshooting.*/ phpinfo(); ?> </body> </html>Variabel dan Penggunaannya Variabel adalah sebuah tempat di memori untuk menyimpan data yang nilainya dapatberubah-ubah Variabel diawali oleh kata tertentu dengan aturan penulisan sebagai berikut : 1. Variabel dimulai dengan tanda dolar ($). 2. Harus dimulai dengan huruf atau underscore ( _ ). 3. Tidak boleh menggunakan tanda baca. 4. Tidak boleh mengandung spasi. 48Andino Maseleno
  49. 49. Web Programming HTML, CSS, PHP dan MySQL 5. Case sensitive atau membedakan huruf besar dan huruf kecil dibedakan. Benar Salah $variabel $var!abel $pilih $-pilih $si2006 $2006si $bulan_1 $bulan 1Contoh penggunaan variabel dalam script PHP adalah sebagai berikut : <?php $keadaan = "saya bingung tentang PHP"; print ("Sebelum membaca modul ini, $keadaan"); print ("<p>"); Pada kode di atas, diberi nama variabel dengan nama "$keadaan". Kemudian variabel itudiisi dengan kata "saya bingung tentang PHP" dan menampilkan hasilnya menggunakanperintah print. Di sini perlu anda perhatikan bahwa saat melakukan perintah print, variabeltidak diapit oleh tanda petik maupun koma di atas. Kemudian berikutnya isi variabel $keadaan diubah dengan memasukkan kata"saya jadi tambah bingung", dan kembali variabel tersebut ditampilkan denganperintah print.Tipe DataTipe data dasar pada PHP ada 3 macam, yaitu :a. integer : menyatakan tipe data bilangan bulat dengan angkauan antara –2 milyar hingga +2 milyar. 49Andino Maseleno
  50. 50. Web Programming HTML, CSS, PHP dan MySQLb. double : menyatakan tipe data bilangan real atau bilangan yang mempunyai bagian pecahan.c. string : menyatakan tipe data teks (karakter yang tidak menyatakan bilangan). Tipe Data Contoh Keterangan Integer $jumlah = 10; Bilangan bulat $nilai = -5; Double $skor = 90.00; Bilangan real $bunga = 12.50; String $kota = “Bandar Lampung”; Karakter, kalimat $motto = “Nyaman”; <html> <head> <title>Menghitung LuasSegitiga</title> </head> <body> Menghitung Luas Segitiga<p> <? $alas = 10; $tinggi = 8; $luas = $alas*$tinggi/2; ?> 50 Panjang ALasAndino Maseleno :<?=$alas?><br> Tinggi : <?=$tinggi?><br> Luas Segitiga : <?=$luas?><br>
  51. 51. Web Programming HTML, CSS, PHP dan MySQLOperator Aritmatika Operator digunakan untuk memanipulasi nilai suatu variabel. Variabel yang nilainyadimodifikasi oleh operator disebut operand. Contoh penggunaan operator misalnya 13 – 3. Nilai 13 dan 3 merupakan operand dantanda “–“ disebut operator. Operator Operasi + Penambahan _ Pengurangan * Perkalian / Pembagian % Sisa Pembagian ++ Penambahan dengan 1 -- Pengurangan dengan 1Script berikut memberikan gambaran tentang penggunaan operator aritmatika : <html> <head> <title>Operator Aritmatika</title> 51 </head>Andino Maseleno <body> <?php
  52. 52. Web Programming HTML, CSS, PHP dan MySQLBersambung..Sambungan.. printf("6 - 1 = %d <br>", 6-1); print("<br>Perkalian :<br>n"); printf("6 * 2 = %d <br>", 6*1); printf("6 * 2.5 = %d <br>", 6*2.5); print("<br>Pembagian :<br>"); print("6 / 4 = "); print(6/4); print("<br>"); print("6 / 4.0 = "); print(6/4.0); print("<br>"); print("6 % 5 = "); print(6%5); print("<br>"); print("6 % 4 = "); print(6%4); print("<br>"); print("6 % 3 = "); print(6%3); print("<br>"); ?> Operator + + dan – – dikenakan pada variabel. Kedua operator ini dapat berkedudukansebagai awalan atau akhiran. <html> <head> 52 <title>Contoh operasi dengan ++ dan --</title>Andino Maseleno </head> <body> <?php
  53. 53. Web Programming HTML, CSS, PHP dan MySQLBersambung..Sambungan.. print("x = $x <br>"); print(2 + $x++); print("<br>"); print("x = $x <p>"); print("Efek ++ sebagai awalan :<br>"); $x = 77; print("x = $x <br>"); print(2 + ++$x); print("<br>"); print("x = $x <p>"); print("Contoh operasi dengan menggunakan -- :<br>"); $x = 77; print("x = $x <br>"); $x--; print("x = $x"); ?> </body> </html> 53Andino Maseleno
  54. 54. Web Programming HTML, CSS, PHP dan MySQLMenerima Input dari Form Dalam form selalu ada value yang nantinya akan dijadikan sebagai variabel oleh PHP.Variabel inilah yang akan diproses oleh PHP, tergantung pada pengunaan program PHP tersebut. <html> <head> <title>Form Input Satu</title> </head>Bersambung..Sambungan.. <body> <form method=post action="input1.php"> Nama : <input type="text" name="nama"><br> Alamat : <input type="text" name="alamat"><p> Jenis Kelamin :<br> <input type="radio" name="jenkel" value="pria">Pria<br> <input type="radio" name="jenkel" value="wanita">Wanita<p> Hobi :<br> <input type="checkbox" name="hobi" value="makan">Makan<br> <input type="checkbox" name="hobi" value="tidur">Tidur<br> <input type="checkbox" name="hobi" value="lain">Lain-lain<p> <input type="submit" value="Kirim"> <input type="reset" value="Ulangi"> </form> <p><hr><br><h4>Hasil Pengisian Form :</h4><p> <?php if(isset($nama)){ echo("Nama anda : $nama<br>"); 54 echo("Alamat : $alamat<br>");Andino Maseleno echo("Jenis Kelamin : $jenkel<br>"); echo("Hobi : $hobi<br>"); }
  55. 55. Web Programming HTML, CSS, PHP dan MySQL Dari program ini, name yang terdapat di dalam form secara otomatis diubah oleh PHP kedalam variabel-variabel, sehingga memudahkan dalam mengidentifikasi data yang dikirim olehform. Sedangkan untuk fungsi dari function isset()adalah untuk mengecek apakah variabelyang tekirim sudah memiliki nilai. Jika variabel tersebut telah terkirim, maka PHP akanmengeksekusi program yang terdapat di antara { dan }. Dengan menggunakan PHP, juga bisa dikirimakn suatu nilai yang ditangani oleh formulirdan kemudian nilai dikirim ke skrip yang lain, sebagai contoh : <HTML> <HEAD> <TITLE>Latihan Input Data</TITLE> </HEAD> <FORM ACTION=salam.php METHOD=get> Tuliskan Nama Anda : <INPUT TYPE=TEXT NAME=nama_pemakai><P> <INPUT TYPE=SUBMIT Value="Kirim"> </FORM> </BODY> </HTML> 55Andino Maseleno
  56. 56. Web Programming HTML, CSS, PHP dan MySQL Selanjutnya simpan skrip di atas dengan tetap menggunakan ekstensi .php, kemudian buatjuga skrip berikut, dan simpan sebagai salam.php : <HTML> <HEAD> <TITLE>Latihan Menampilkan Variabel</TITLE> </HEAD> <BODY>Bersambung..Sambungan.. <?php print("Selamat mencoba, <B>$nama_pemakai</B>"); ?> </BODY> </HTML> Dari penggunaan form input sebelumnya, cobalah untuk merubah METHOD yangdigunakan dalam pengiriman form, coba dengan menggunakan METHOD POST atau GET,kemudian lihat perbedaannya, terutama pada bagian combo address dari browser.Pernyataan Berkondisi Dalam PHP, dapat digunakan untuk mendukung pengambilan keputusan yang melibatkanpemilihan lebih dari satu alternatif, seperti pada contoh sederhana berikut : <HTML> <HEAD> <TITLE>Latihan Menentukan Pernyataan Berkondisi</TITLE> </HEAD> Hari ini, <?php 56 $nama_hari = date("D");Andino Maseleno if ($nama_hari == "Wed") print(" adalah hari <b>Rabu"); else
  57. 57. Web Programming HTML, CSS, PHP dan MySQLPernyataan Perulangan (Loop) Untuk melakukan proses pengulangan , dapat menggunakan pernyataan for. <HTML> <HEAD> <TITLE>Pengulangan dengan for</TITLE> </HEAD> <BODY> Penulisan dimulai dari angka terkecil dengan ukuran yang sesuai :<p> <?php for($i = 1; $i <= 7; $i = $i + 1) print("<FONT SIZE=$i> $i </FONT><BR>"); print("Selesai ..."); ?> </BODY> </HTML> 57Andino Maseleno
  58. 58. Web Programming HTML, CSS, PHP dan MySQLPERNYATAAN KONTROL Pernyataan kontrol yang digunakan dalam PHP dapat digunakan untuk melakukan prosespengambilan keputusan (if dan switch) serta pengulangan suatu proses (while, do-while, for).Pernyataan if Bentuk ini berupa : if (ekspresi) pernyataanPada bentuk ini, berlaku aturan sebagai berikut : - Bagian pernyataan akan dijalankan hanya jika bagian ekspresi bernilai benar. - Nilai selain nol atau kososng dianggap sebagai nilai benar. - Dalam PHP, konstanta TRUE menyatakan benar dan FALSE menyatakan salah. <HTML> <HEAD> <TITLE>Contoh Pernyataan if</TITLE> </HEAD> <BODY> <FORM> Besar Pembelian : <INPUT TYPE=TEXT NAME=total_beli><BR><BR> <INPUT TYPE=SUBMIT VALUE="Hitung Besar Diskon"> </FORM><hr><br> <?php if (isset($total_beli)) { $total_beli = intval($total_beli); $diskon = 0; if ($total_beli >= 100000) 58Andino Maseleno $diskon = intval(0.1 * $total_beli); printf("Besarnya Diskon = %d <BR>n", $diskon); printf("Harga yang harus dibayarkan = %d <BR>n",
  59. 59. Web Programming HTML, CSS, PHP dan MySQLPernyataan if - else Pernyataan if yang melibatkan bagian else, digunakan untuk menjalankan suatu tindakantertentu bila kondisi bernilai benar dan menjalankan tindakan yang lain bila kondisi bernilai salah,bentuk pernyataan ini adalah sebagai berikut : if (ekspresi) if (ekspresi) pernyataan_1 { atau else pernyataan_1 }pada bentuk ini : - bagian pernyataan_1 dijalankan jika ekspresi bernilai benar - bagian pernyataan_2 dijalankan jika ekspresi bernilai salah <HTML> <HEAD> <TITLE>Contoh Pernyataan if - else</TITLE> </HEAD> <BODY> <FORM> 59 Besar Pembelian :Andino Maseleno <INPUT TYPE=TEXT NAME=total_beli><BR><BR> <INPUT TYPE=SUBMIT VALUE="Hitung Besar Diskon"> </FORM><hr><br>
  60. 60. Web Programming HTML, CSS, PHP dan MySQLBersambung..Sambungan.. $total_beli = intval($total_beli); if ($total_beli >= 100000) $diskon = intval (0.1 * $total_beli); else $diskon = 0; printf("Besarnya Diskon = %d <BR>n", $diskon); printf("Harga yang harus dibayarkan = %d <BR>n", $total_beli - $diskon); } ?> </BODY> </HTML>Pernyataan if – elseif Pernyataan if – elseif digunakan untuk melakukan pengambilan keputusan yangmelibatkan banyak alternatif. 60Andino Maseleno
  61. 61. Web Programming HTML, CSS, PHP dan MySQL <HTML> <HEAD> <TITLE>Menentukan Nama Hari dengan if - elseif</TITLE> </HEAD>Hari ini adalah hari <b> <?php $nama_hari = date("l"); if ($nama_hari == "Sunday") print("Minggu");Bersambung..Sambungan.. elseif ($nama_hari == "Monday") print("Senin"); elseif ($nama_hari == "Tuesday") print("Selasa"); elseif ($nama_hari == "Wednesday") print("Rabu"); elseif ($nama_hari == "Thursday") print("Kamis"); elseif ($nama_hari == "Friday") print("Jumat"); else print("Sabtu"); ?> </BODY> </HTML> 61Andino Maseleno
  62. 62. Web Programming HTML, CSS, PHP dan MySQL Pada skrip di atas, pernyataan if-elseif digunakan untuk menentukan nama hari sekarang,yang diperoleh dari penanggalan sistem, baru kemudian dari nama hari yang diperoleh digantinilainya ke dalam bahasa Indonesia.Pernyataan switch Secara umum pernyataan switch digunakan bila melibatkan banyak alternatif seperti padapernyataan if-elseif, dengan pernyataan sebagai berikut : switch (ekspresi) { case ekspresi_case_1 : pernyataan_1; break; case ekspresi_case_2 : . . . default pernyataan_n; } <HTML> <HEAD> <TITLE>Menentukan Nama Hari dengan Switch</TITLE> </HEAD> Hari ini adalah hari <b> <?php $nama_hari = date("l"); switch ($nama_hari) { 62Andino Maseleno "Sunday" : case print("Minggu"); break;
  63. 63. Web Programming HTML, CSS, PHP dan MySQLBersambung..Sambungan.. break; case "Wednesday" : print("Rabu"); break; case "Thursday" : print("Kamis"); break; case "Friday" : print("Jumat"); break; default : print("Sabtu"); } ?> </BODY> </HTML> 63Andino Maseleno
  64. 64. Web Programming HTML, CSS, PHP dan MySQL Database mySQL Database sangatlah penting dalam pembuatan software, karena memungkinkanpengolahan dan penyimpanan data yang terorganisasi secara optimal. Situs-situs web yangmenyimpan dan menampilkan informasi dalam jumlah besar memerlukan database supayainformasi yang ada dapat diolah, disimpan dan terorganisasi dengan baik. MySQL merupakan Relational Database Management System (RDBMS) yangdikembangkan oleh sebuah perusahaan pengembangan perangkat lunak dan konsultandatabase bernama MySQL AB yang bertempat di Swedia. MySQL didistribusikan secaragratis di bawah lisensi GPL (General Public License), dimana setiap orang bebasmenggunakan MySQL, namun tidak boleh dijadikan produk turunan yang bersifat closedsource atau komersial. Suatu sistem relational database menyimpan data pada tabel berbeda dan tidakmeletakkannya pada satu tabel saja. Hal ini meningkatkan kecepatan dan fleksibilitas.Tabel-tabel tersebut dihubungkan dengan suatu relasi yang didefiniskan sehingga dapatmengkombinasikan data dari beberapa tabel pada suatu saat. MySQL menggunakan 64Andino Maseleno
  65. 65. Web Programming HTML, CSS, PHP dan MySQLstandar SQL (Structures Query Language), yaitu bahasa standar yang paling banyakdigunakan untuk mengakses database. Sebagai database server yang memiliki konsep database modern, MySQL memilikibanyak sekali keistimewaan. Berikut ini beberapa keistimewaan yang dimiliki MySQL :a. Portability MySQL dapat berjalan stabil pada berbagai sistem operasi di antaranya adalah Windows, Linux, FreeBSD, Mac OS X Server, Solaris, Amiga, HP-UX dan masih banyak lagi.b. Open Source MySQL didistribusikan secara open source di bawah lisensi GPL sehingga dapat digunakan secara gratis.c. Multiuser MySQL dapat digunakan oleh beberapa user dalam waktu yang bersamaan tanpa mengalami masalah atau konflik. Hal ini memungkinkan MySQL dapat diakses client secara bersamaan.d. Performace Tuning MySQL memiliki kecepatan yang menakjubkan dalam menangani query sederhana, dengan kata lain dapat memproses lebih banyak query per satuan waktu.e. Column Types MySQL memiliki tipe kolom yang sangat kompleks, seperti signed/unsigned integer, float, double, char, varchar, text, blob, date, time, datetime, timestamp, year, set serta enum.f. Command dan Functions MySQL memiliki operator dan fungsi secara penuh yang mendukung perintah SELECT dan WHERE dalam query.g. Security MySQL memiliki beberapa lapisan sekuritas seperti level subnetmask, nama host, dan izin akses user dengan sistem perizinan yang mendetail serta password terenkripsi.h. Scalability dan Limits 65Andino Maseleno
  66. 66. Web Programming HTML, CSS, PHP dan MySQL MySQL mampu menangani basis data dalam skala besar, dengan jumlah records lebih dari 50 juta dan 60 ribu tabel serta 5 milyar baris. Selain itu, batas indeks yang dapat ditampung mencapai 32 indeks pada tiap tabelnya.i. Connectivity MySQL dapat melakukan koneksi dengan client menggunakan protokol TCP/IP, Unix socket (Unix), atau Named Piped (NT).j. Client dan Tools MySQL melengkapi dengan berbagai tool yang dapat digunakan untuk administrasi database, dan pada setiap tool yang ada disertakan petunjuk online.k. Struktur Tabel MySQL memiliki struktur tabel yang lebih fleksibel dalam menangani ALTER TABLE dibandingkan DBMS lainnya semacam PostgreSQL ataupun Oracle.Tipe Kolom pada mySQLa. Tipe Numerik Tipe Kolom Penggunaan Memori Range Data TINYINT 1 byte 0 − 255 SMALLINT 2 byte 0 − 65535 MEDIUMINT 3 byte 0 − 16777215 INT, INTEGER 4 byte 0 − 4294967295 BIGINT 8 byte 0 − 18446744073709551615 4 byte jika 0 <= p <= 24, FLOAT(p) 8 byte jika 25 <= p <= 53 FLOAT 4 byte 1.175494351E-38 − 66Andino Maseleno
  67. 67. Web Programming HTML, CSS, PHP dan MySQL 3.402823466E+38. DOUBLE 2.2250738585072014E-308 − [PRECISION], item 8 byte 1.7976931348623157E+308 REAL M+2 bytes jika D > 0, DECIMAL(M,D), M+1 bytes jika D = 0 NUMERIC(M,D) (D+2, jika M < D)b. Tipe Tanggal dan Waktu Tipe Kolom Penggunaan Memori Range Data DATE 3 byte 1000-01-01 − 9999-12-31 DATETIME 8 byte 1000-01-01 00:00:00 − 9999-12-31 23:59:59 TIMESTAMP 4 byte 1970-01-01 00:00:00 − 2037-01-01 00:00:00 TIME 3 byte -838:59:59 − 838:59:59 YEAR 1 byte 1901 − 2155c. Tipe Data String Tipe Kolom Penggunaan Memori Range Data CHAR(M) M byte, 0 <= M <= 255 0 − 255 karakter 67Andino Maseleno
  68. 68. Web Programming HTML, CSS, PHP dan MySQL L+1 byte, dimana L <= M dan VARCHAR(M) 0 − 255 karakter 0 <= M <= 255 TINYBLOB, TINYTEXT L+1 byte, dimana L < 2^8 0 − 255 karakter BLOB, TEXT L+2 byte, dimana L < 2^16 0 − 65,535 karakter MEDIUMBLOB, L+3 byte, dimana L < 2^24 0 − 16,777,215 karakter MEDIUMTEXT LONGBLOB, LONGTEXT L+4 byte, dimana L < 2^32 0 − 4GB karakter Integrasi PHP & mySQLAplikasi Sistem Informasi Sederhana Menggunakan PHP dan mySQL Untuk membuat aplikasi sistem informasi sedehana dapat dilakukan dengan langkah-langkah berikut :1. Membuat tes koneksi ke server database mySQL <?php $koneksi_oke = mysql_connect (“localhost”,””,””); //username dan password dikosongin aja ya.. If ($koneksi_oke) { echo (“Koneksi ke database mySQL <b>SUKSES..!</b>”); } 68 elseAndino Maseleno { echo (“Koneksi ke database mySQL <b>GAGAL..!</b>”); }
  69. 69. Web Programming HTML, CSS, PHP dan MySQL Kemudian skrip ini disimpan dengan nama koneksi.php. Skrip ini nantinya akanditampilkan pada web browser.2. Membuat database Setelah koneksi ke database mySQL berhasil, dilanjutkan dengan membuat database denganmenuliskan skrip berikut : <?php include (“koneksi.php”); $buat_db = mysql_create_db (“latihan”); if ($buat_db) { echo (“<br><br>Database dengan nama <b>latihan</b> SUKSES dibuat”); } else { echo (“<br><br>Database dengan nama <b>latihan</b> GAGAL dibuat”); } ?> 69Andino Maseleno
  70. 70. Web Programming HTML, CSS, PHP dan MySQL Skrip di atas disimpan dengan nama buat_database.php.3. Untuk membuat tabel, dapat diketikkan perintah berikut : 70Andino Maseleno
  71. 71. Web Programming HTML, CSS, PHP dan MySQL <? include (“koneksi.php”); $pilih_db = mysql_select_db (“latihan”) or die (“Database latihan tidak dtemukan”); $buat_tabel = “CREATE TABLE anggota (no int (10) AUTO_INCREMENT KEY, nama char (50), email char (50))”; $tabel = mysql_db_query (“latihan”, $buat_tabel); if ($tabel) { echo (“<br><br>Tabel dengan nama <b>anggota</b> SUKSES dibuat”); } else { echo (“<br><br>Tabel dengan nama <b>anggota</b> GAGAL dibuat”); } ?> Simpan file di atas dengan nama buat_tabel.php.4. Membuat form input data anggota 71Andino Maseleno
  72. 72. Web Programming HTML, CSS, PHP dan MySQL Setelah tabel selesai dibuat, maka mulai dapat disi dengan data, maka buatlah form untuk pengisian data sebagai berikut : <html> <head> <title>Form Input</title> </head> <body> <b>Pendaftaran Anggota Baru :</b><p> <form method=post action=”input_anggota.php”> Nama : <input type=text name=nama size=20><br> E-mail : <input type=text name=email size=20><p> <input type=submit name=submit value=”Daftar”> <input type=reset name=reset value=”Batal”> </body> </html> 72Andino Maseleno
  73. 73. Web Programming HTML, CSS, PHP dan MySQL Simpan form di atas dengan nama form_input.php. Setelah form pengisian data ini, buat jugafile dengan skrip di bawah ini dan simpan dengan nama input_anggota.php : <?php mysql_connect (“localhost”,””,””); mysql_select_db (“latihan”) or die (“Database tidak ada”); $perintah = “INSERT INTO anggota (nama,email) values (‘$nama’,’$email’)”; $isi_data = mysql_query ($perintah); if (isset ($isi_data)) { echo (“Selamat ! Anda telah terdaftar, data anda :<p>”); echo (“Nama : <b>$nama</b><br>”); echo (“E-mail : <b>$email</b><p>”); echo (“<form method=post action=”tampil_anggota.php>”); echo (“<input type=submit name=submit value=”Lihat Data”></form>”); echo (“<form method=post action=”form_input.php>”); echo (“<input type=submit name=submit value=”Daftar Lagi”></form>”); } else { Echo (“Pendaftaran GAGAL…!”); } ?> Dari kedua file ini, setelah penginputan data pada form_input.php, maka dapat dilanjutkan dengan memproses data hasil input pada input_anggota.php. pada bagian ini data yang di-inputkan tadi akan disimpan ke dalam tabel dan kemudian ditampilkan kembali ke penguna. 73Andino Maseleno

×