PEMROGRAMAN BERBASIS WEB Bab I Cara kerja WEB Cara kerja dari WEB bisa dilihat dari fungsinya.yaitu sebagai berikut: Web browser Fungsi dari web browser adalah menerjemahkan kode (script) HTML yang biasanya ditambahkan JavaScript menjadi sebuah informasi yang sudah tertata dan menarik secara visual. Contoh web browser :internet explorer, opera, google chrome,Mozilla Firefox dll Web server Adalah aplikasi yang berguna untuk menrima permintaan informasi dari pengguna melalui web browser dan mengirimkan kembali infromasi yang diminta melalui HTTP (Hiper Text Transfr Protocol). Contoh : apache
Gambar 1.1: Diagram kerja WEB
Keterangan gambar 1.1: Untuk menjalankan WEB dari sebuah server cukup dengan memanggil alamat web tersebut.Lalu browser akan memunculkan halaman web yang dimaksud sesuai dengan alamat yang diberikan. Proses yg terjadi : 1. web browser (client) meminta kepada web server 2. web server akan membaca file index (misal : index.html, index.php dll) 3. file index tersebut diterjemahkan oleh mesin penerjemah (misal PHP) 4. mesin penerjemah mengirimkan kembali hasil terjemahan ke web browser 5. web browser akan menerjemahkan kode HTML menjadi Halaman WEB
BAB II Mengenal HTML HTML (Hyper Text Markup Language) adalah suatu bahasa pemrograman yg dikenali oleh web browser untuk menampilkan informasi dengan lebih baik menarik dibandingkan dengan tulisan teks biasa (plain text). A. Dari Cara Pemrosesan HTML dibagi menjadi 2 yaitu : HTML Statis Prosesnya yaitu script HTML dikirimkan ke client dan dijalankan pada client tanpa ada pengolahan data. Kelemahan : Hasil Tampilan Kurang Bagus Kelebihan : Tidak perlu server untuk pengolahan datanya.
HTML Dinamis Prosesnya yaitu script Pemrograman dijalankan di server kemudian hasil pengolahan data dirimkan ke client yang berupa script HTML yang dibuat secara “on the fly creation” oleh server untuk dijalankan pada client. Kelebihan : Halaman web menjadi lebih interaktif dan real time Kekurangan : bila banyak permintaan yg masuk ke server maka akan terjadi overload.karena setiap permintaan akan menjalankan sendiri-sendiri program CGI (Common Gateway Interface). Catatan: CGI merupakan standar interface antara server dan suatu aplikasi Sedangkan program CGI adalah program yang dapat melakukan proses sesuai permintaan server untuk menghasilkan suatu dokumen yang hasil dokumen tersebut dalam bentuk HTML (on the fly creation)
B. Tag Yang sering digunakan Digunakan untuk menandai sebuah komentar suatu kode (script) dengan tanda ini maka browser tidak akan menerjemahkan. Contoh : <!- - latihan html -- > <! – tag i untuk italic atau cetak miring-- > <i> coba nulis </i> Hasil tampilan di browser : coba nulis
2. Tag <a> Singkatan dari anchor, tag ini digunakan untuk membuat sebuah tautan (link) antar web. Contoh : <a href=http://www.yahoo.com>”Link ke yahoo</a> Hasil tampilan di browser : Link ke yahoo
3. Tag <b> Digunakan untuk teks cetak tebal Contoh : <b>teks ini dicetak tebal</b> Hasil tampilan di browser : teks ini dicetak tebal
4. Tag <big> Digunakan untuk membuat sebuah tulisan agar nampak lebih besar. Hal ini berbeda dengan cetak tebal (bold).Perhatikan kode tersebur . Contoh: <html> <head> <title>test menggunakan tag b dan big </title> </head> <body> <b> ini menggunakan bold </b> <br> <big>ini menggunakan big</big> </body> </html>
Hasil tampilan di browser : Ini menggunakan bold Ini menggunakan big
5. Tag <body> Merupakan bagian dari struktur html yang digunakan untuk menandai badan (body) suatu dokumen HTML. penggunaannya dapat dilihat pada rangkaian contoh diatas.
6. Tag <br> Digunakan untuk mengakhiri suatu baris tulisan, lalu pindah ke baris berikutnya atau dibawahnya. Contoh : <b> ini menggunakan bold </b> <big>ini menggunakan big</big> Hasil tampilan di browser : Ini menggunakan bold Ini menggunakan big Bandingkan dengan beerikut : <br> Ini menggunakan bold Ini menggunakan big
7. Tag <button> Digunakan untuk membuat tombol di web browser. Contoh : <button type=”button”>klik di tombol ini</button> Hasil tampilan di browser : klik di tombol ini
8. Tag <caption> Digunakan untuk membuat judul sebuah tabel. Penggunaan tag ini biasanya bersamaan dengan deklarasi tabel. Contoh : <table border=”1”> <caption>judul Table</caption> <tr> <th>bulan</th> <th>saldo</th> </tr> <td>January</td> <td>Rp. 1.000.000,-</td> <td>Pebruary</td> <td>Rp. 2.000.000,-</td> </table>
9. Tag <center> Digunakan untuk menengahkan suatu teks halaman
11. Tag <font> Digunakan untuk memformat bentuk font, warna, ukuran dari sebuah teks.(tersedia font size : 1 s/d 7) Contoh : <font size=”3” color =“black”>tulisan warna merah dengan ukuran 3</font> <br> <font size=”7” color =“green”>tulisan warna hijau dengan ukuran 7</font> <br> <font face=”stencil” color =“blue”>tulisan warna biru dengan jenis font stencil</font> <br> Hasil tampilan di browser : Tulisan warna merah dengan ukuran 3 Tulisan warna hijau dengan ukuran 7 Tulisan warna biru dengan font stencil
12. Tag <form> Adalah Tag yang digunakan oleh pengguna untuk memasukkan data.Tag ini biasanya dibantu oleh beberapa komponen lain, seperti : input, button, option dll Contoh : <form action=”filePHPrujukan.php” method=”get”> Nama Anda:<input type=”text” name=”VarNama”/> <br> Alamat:<input type=”text” name=”VarAlamat”/><br> <input type=”submit” value=simpan></form> Hasil tampilan di browser : Nama Anda : Alamat: Simpan
13. Tag <frame> dan <frameset> Tag Digunakan untuk menampilkan halaman web lain dalam sebuah halaman web yang dibuat.Halaman dapat dibuat terpisah dengan menampilkan halaman web yang berbeda-beda. Contoh : <html> <frameset cols=”25%,50%,25%”> <frame src=http://www.detik.com/”/> <frame src=http://www.google.com/”/> <frame src=http://www.jawapos.com/”/> </frameset> </html>
14. Tag <head> Tag Digunakan untuk menampung elemen-elemen header dari sebuah halaman. contoh: <html> <head> <title>test menggunakan tag b dan big </title> </head> <body> <b> ini menggunakan bold </b> <br> <big>ini menggunakan big</big> </body> </html>
15. Tag <h1>sampai dengan <h6> Digunakan untuk mendifinisikan tulisan di header. Contoh : <HTML> <HEAD><TITLE>Text Style using Heading</TITLE></HEAD> <BODY> <H1 >MENGGUNAKAN HEADING 1</H1> <H2 >MENGGUNAKAN HEADING 2</H2> <H3 >MENGGUNAKAN HEADING 3</H3> <H4 ALIGN=RIGHT>MENGGUNAKAN HEADING 4 RIGHT</H4> <H5 >MENGGUNAKAN HEADING 5</H5> <H6 ALIGN=CENTER>MENGGUNAKAN HEADING 6 dan CENTER</H6> </BODY> </HTML>
16. Tag <hr> Digunakan untuk membuat garis horisontal Contoh : <p>diatas garis</P> <hr/> <p>dibawah garis</P>
17. Tag <html> Digunakan untuk memberitahu browser kode yg dituliskan merupakan dokumen html. Contoh : <HTML> <HEAD><TITLE>contoh dokumen HTML</TITLE></HEAD> <BODY> <H4 ALIGN=RIGHT>MENGGUNAKAN HEADING 4 RIGHT</H4> </BODY> </HTML>
18. Tag <i> Digunakan untuk membuat cetak miring Contoh : <i>huruf miring</i> Hasil : huruf miring
19. Tag <img> Digunakan untuk menampilkan gambar dari server Contoh : <img src=”kupu.jpeg” alt=”kupu-kupu”/>
20. tag<input> Digunakan untuk berinteraksi dengan pengguna dalam memasukkan data ke server. input mempunyai banyak tipe, yaitu :button, checkbox, file, hidden, image, password, radio, reset, submit, dan text. Contoh : <form action=”filePHPrujukan.php” method=”get”> Nama Anda:<input type=”text” name=”VarNama”/> <br> Alamat:<input type=”text” name=”VarAlamat”/><br> <input type=”submit” value=”simpan”/></form>
21.Tag <li> Digunakan untuk menampilkan simbol data berurut, seperti simbol bullet dan nomor.untuk urutan bernomor diawali dengan tag <ol>, sedangkan simbol bullet diawali tag<ul> Contoh: <html> <ol> <li>satu</> <li>dua</> <li>tiga</> </ol> <ul> <li>gula</> <li>garam</> <li>susu</> </ul> </html>
22. tag <link> Digunakan untuk mendifinisikan hubungan antara halaman web yang akan dibuat dengan data atau aturan dari luar. Tag ini biasanya digunakan pada saat web menggunakan file css. Contoh : <head> <link rel=”stylesheet” type=”text/css href=”coba.css”/> </head>
23.tag <ol> Digunakan untuk urutan data bernomor atau numerik, juga alfabet. Contoh : <ol> <li>satu</> <li>dua</> <li>tiga</> </ol>
24.tag <option> Digunakan untuk mendifinisikan suatu elemen yg bisa dipilih dalam suatu daftar pilihan. Contoh : <html> <select> <option> jakarta</option> <option> bandung</option> <option> semarang</option> <option> Yogyakarta</option> </select> </html>
25. tag <p> Digunakan untuk mendifinisikan suatu paragraf. <p>diatas garis</p> <hr/>