Modul Pemograman Web 1
Transcript of Modul Pemograman Web 1
Modul Pemrograman Web I
1
1. Pengenalan HTML
a. World Wide Web
Internet merupakan jaringan global yang menghubungkan suatu network dengan
network lainya di seluruh dunia, TCP/IP menjadi protocol penghubung antara
jaringan-jaringan yang beragam di seluruh dunia untuk dapat berkomunikasi.
World Wide Web (WWW) merupakan bagian dari internet yang paling cepat
berkembang dan paling populer.
WWW bekerja merdasarkan pada tiga mekanisme berikut:
Protocol standard aturan yang di gunakan untuk berkomunikasi pada
komputer networking, Hypertext Transfer Protocol (HTTP) adalah protocol
untuk WWW.
Address WWW memiliki aturan penamaan alamat web yaitu URL(Uniform
Resource Locator) yang di gunakan sebagai standard alamat internet.
HTML digunakan untuk membuat document yang bisa di akses melalui web.
b. Pengenalan HTML
Hypertext Markup Language merupkan standard bahasa yang digunakan untuk
menampilkan document web, yang bisa anda lakukan dengan HTML yaitu :
Mengontrol tampilan dari web page dan contentnya.
Mempublikasikan document secara online sehingga bisa di akses dari seluruh
dunia.
Membuat online form yang bisa di gunakan untuk menangani pendaftaran,
transaksi secara online.
Menambahkan object-object seperti image, audi, video dan juga java applet
dalam document HTML.
Modul Pemrograman Web I
2
c. Browser dan Editor
1) Browser
Browser merupakan software yang di install di mesin client yang berfungsi untuk
menterjemahkan tag-tag HTML menjadi halaman web.
Browser yang sering di gunakan biasanya Internet Explorer, Mozilla Firefox,
Google Chrome, Opera, Safari, Netscape Navigator dan masih banyak yang
lainya.
2) Editor
Program yang di gunakan untuk membuat document HTML, ada banyak HTML
editor yang bisa anda gunakan diantaranya: Notepad, Notepad++, Netbeans,
Ms.FrontPage, dan Adobe Dreamweaver.
Untuk yang sering kita gunakan Notepad atau Notepad++.
d. Tag HTML dan Penulisan HTML
HTML (HyperText Mark up Language) merupakan suatu metoda untuk
mengimplementasikan konsep hypertext dalam suatu naskah atau dokumen. HTML
sendiri bukan tergolong pada suatu bahasa pemrograman karena sifatnya yang
hanya memberikan tanda (marking up) pada suatu naskah teks dan bukan sebagai
program, penulisan tag HTML tidak case sensitive.
Penulisan Tag HTML terlihat gambar dibawah ini :
Modul Pemrograman Web I
3
Ok, langsung saja kita buka editor notepad atau notepad++ dan ketikkan code HTML
dibawah ini.
Setelah kalian ketik simpan dengan nama contoh_001.html atau contoh_001.htm lalu
kalian file tersebut kalian klik dua kali untuk melihat hasil dari code tersebut.
Output dari code diatas adalah seperti berikut :
Contoh Kedua
Pengaturan paragraph
Kami Sedang Belajar HTML
Modul Pemrograman Web I
4
Contoh Ketiga
Penggunaan break <br>
Contoh Keempat
Penggunaan Horizontal Rule <HR>
Modul Pemrograman Web I
5
Latihan Pertama :
Gabungkan code contoh 2 s/d 4 sehingga dapat menampilkan seperti gambar
dibawah ini :
Modul Pemrograman Web I
6
e. Mewarnai latar / Memberi warna background, memberi warna font dan mengatur
besar-kecilnya font.
Contoh Kelima
Penggunaan bgcolor
Untuk value bgcolor bisa menggunakan dengan warna langsung seperti
Red, Green, Blue, Yellow, Brown, Grey dan lain sebagainya.
Dan bisa juga dengan Hexa decimal.
Warna Dengan Text Hexadecimal color
Putih / White #FFFFFF
Hitam / Black #000000
Merah / Red #FF0000
Hijau / Green #00FF00
Biru / Blue #0000FF
Kuning / Yellow #FFFF00
Jingga / Pink #FF00FF
Abu-abu / Grey #C0C0C0
Modul Pemrograman Web I
7
Contoh Keenam
Pewarnaan font / text
Contoh Ketujuh
Penggunaan Heading
Modul Pemrograman Web I
8
Contoh Kedelapan
Pengaturan ukuran Font
Modul Pemrograman Web I
9
Latihan & Tugas
Buatlah Laman Web tentang data pribadi anda, dengan menggabungkan Tag-tag
HTML dari Contoh Kelima sampai dengan contoh kedelapan. Jangan lupa diberikan
warna untuk latarnya.
f. Pembuatan Bullet Numbering.
Contoh Kesembilan
Modul Pemrograman Web I
10
Penggunaan list
g. Pemakaian gambar.
Modul Pemrograman Web I
11
Untuk menggunakan file gambar yang akan kita sisipkan didalam Tag HTML, langkah
awal adalah copy kan file gambar tersebut dalam satu direktori atau folder project
web anda. Dan mesti anda ketahui, penggunaan gambar disini sangat case sensitive
dalam pemanggilan file gambar yang akan kita buat.
Tag HTML-nya seperti berikut <IMG SRC=”NAMA FILE GAMBAR”>
Nah perlu dipahami juga ektension file gambar tersebut apakah .jpg .png .bmp .gif
misalkan kita mempunyai gambar bernama “TeknikInformatika” dengan ektension
gambarnya .jpg maka, tag HTML adalah seperti berikut
<IMG SRC=”TeknikInformatika.jpg”>
Langsung saja kita coba
Contoh Kesepuluh
Penggunaan file gambar
Perlu kalian perhatikan disini kita menggunakan file gambar dengan nama “apple.jpg”
Bagaimana jika file gambar berada didalam suatu folder atau direktori lain.??
Silahkan kalian perhatikan dan fahami pada code contoh kesebelas.
Contoh Kesebelas
Modul Pemrograman Web I
12
Penggunaan file gambar dengan beda direktori.
Kalian lihat disini ada 2 folder yaitu folder HTML dan folder IMAGES, nah file gambar
“apple.jpg” berada dalam folder IMAGES maka untuk code / Tag HTMLnya seperti
berikut :
Catatan : Untuk file HTML ada pada folder HTML dan file gambar ada pada folder
IMAGES.
Latihan & Tugas
Buatlah Laman Web tentang data pribadi anda, dengan menggabungkan Tag-tag
HTML dari Contoh Pertama sampai dengan Contoh Kesebelas.
h. Pembuatan Hyperlink
Modul Pemrograman Web I
13
Contoh Keduabelas
Hyperlink
Hyperlink sebuah code Tag HTML untuk menghubungkan file yang satu dengan yang
lain. Untuk kasus disini kita belum mengisikan file yang ingin kita hubungkan.
Karena <a href = ”#” > masih tertuju ke # jadi belum bias menghubungkan dan
menampilkan ya ada.
Untuk itu lebih kalian coba isikan Tag <a href= “ ”> dengan file yang sudah kalian
buat dari contoh pertama hingga contoh kesebelas.
i. Pembuatan Table
Modul Pemrograman Web I
14
Contoh Ketigabelas
Table
j. Pembuatan Form
Modul Pemrograman Web I
15
Bentuk HTML digunakan untuk melewatkan data ke server.
Suatu bentuk dapat berisi elemen input seperti bidang teks, checkbox, radio button,
tombol submit dan banyak lagi. Formulir juga dapat berisi daftar pilih, textarea,
fieldset, legenda, dan elemen label.
Tag <form> digunakan untuk membuat bentuk HTML seperti berikut :
Langsung saja kalian coba code Tag HTML dibawah ini :
Contoh Keempat Belas
Contoh Kelima Belas
Modul Pemrograman Web I
16
Contoh Keenam Belas
Modul Pemrograman Web I
17
Latihan & Tugas
Buatlah Laman Web tentang data pribadi anda, dengan menggabungkan Tag-tag
HTML dari Contoh-contoh yang pernah kalian praktikkan, jangan lupa untuk
membuat menu register dan semua file harus bias terhubung satu dengan yang lain.
Modul Pemrograman Web I
18
2. CSS (CASCADING STYLE SHEET)
Cascading Style Sheet (CSS) merupakan salah satu bahasa pemrograman web untuk
mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan
seragam.
Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat
mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style
lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file). Pada umumnya
CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML
dan XHTML.
CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna
tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar
paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS
adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan
adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format
yang berbeda.
( sumber : http://id.wikipedia.org/wiki/Cascading_Style_Sheets ).
Contoh aturan penulisan syntax CSS
Syntaxis CSS dibagi dalam 3 bagian, yaitu : selector {property : value}
Dimana : selector : tag HTML yang akan didefinisikan (body, H1, Link , dll).
property : atribut yang akan diubah.
h1 { color: green; }
selector
property
value
Modul Pemrograman Web I
19
Penulisan CSS dibagi 3 penempatan :
o Inline Style Sheet
o Embbeded Style Sheet
o External Style Sheet
Inline Style Sheet
CSS didefinisikan langsung pada tag HTML yang bersangkutan. Cara penulisannya cukup
dengan menambahkan atribut style="..." dalam tag HTML tersebut. Style hanya akan berlaku
pada tag yang bersangkutan, dan tidak akan mempengaruhi tag HTML yang lain.
Contoh penulisan CSS dengan metode Inline Style Sheet :
Output pada browser :
Modul Pemrograman Web I
20
Embbeded Style Sheet
CSS didefinisikan terlebih dahulu dalam tag <style> ... </style> di atas tag <body>. Pada
pendefinisian ini disebutkan atribut-atribut CSS yang akan digunakan untuk tag-tag HTML,
yang selanjutnya dapat digunakan oleh tag HTML yang bersangkutan.
Contoh penggunaan CSS dengan metode Embedded Style Sheet :
Output pada browser :
Nah, sudah faham kan untuk penulisan CSS dengan Inline dan Embedded Style Sheet, jika
sudah mari sekarang kita lanjut ke penulisan CSS dengan External Style Sheet.
Modul Pemrograman Web I
21
External Style Sheet.
Untuk penggunaan External Style Sheet kita mesti membuat 2 buah file, yang pertama kita
membuat file berekstensi .html atau .htm, lalu yang kedua file berekstentsi .css nah, silahkan
langsung mencobanya.
Kami menggunakan disini file HTML bernama 003_css.html dengan code program seperti
dibawah ini :
Dan untuk file kedua kami beri nama 003_css.css dengan code program seperti dibawah ini :
Modul Pemrograman Web I
22
Penjelasan :
Jika kita lihat pada code HTML <link rel="stylesheet" type="text/css" href="003_css.css" />,
nah maksudnya adalah file CSS yang kita punya di-link dengan menggunakan tag tersebut
sehingga code HTML bisa menampilkan syntax CSS yang kita punya yang akan ditampilkan
pada browser.
Output pada browser :
Tugas :
Buatlah biodata anda dengan menggunakan tiga (3) kriteria penulisan CSS diatas.
Modul Pemrograman Web I
23
Hyperlink dengan CSS.
Contoh code program HTML hyperlink dengan CSS, untuk code HTMLnya seperti berikut :
Dan untuk CSS nya seperti berikut :
Output pada browser :
Modul Pemrograman Web I
24
Penjelasan :
Kita lihat code program,
a : link = link awal dengan warna orange dan untuk garis bawah teks masih ada.
a : visited = jika cursor dan di klik akan berwarna biru
a : hover = jika cursor disorot ke link yang kita sorot maka akan berwarna merah dan garis
bawah pada teks akan hilang, sebab terdapat selector text-decoration dan value none.
a : active = jika link tersebut diklik dan halaman web berada pada link tersebut.
Tugas.
Gabungkan file yang pernah kalian buat pada pembahasan HTML tentang Hyperlink, dan
untuk href=”” isikan sesuai dengan nama atau file yang pernah kalian buat.
Modul Pemrograman Web I
25
Memperindah dan Mempercantik Table.
Langsung saja lihat dan praktikkan code HTML dibawah ini :
Dan Syntax CSS dibawah ini :
Seperti biasa kita gunakan External Style Sheet, sebab dalam proses editing jika ada error
code akan lebih mudah untuk mencari error code-nya dan kalian tidak perlu membaca satu
persatu code di HTML-nya.
Output pada browser :
Modul Pemrograman Web I
26
Penggunaan ID dan Class pada CSS.
Selain menetapkan satu gaya untuk elemen HTML, CSS memungkinkan anda untuk
menentukan penyeleksi anda sendiri yang disebut "ID" dan "CLASS".
1. Id Selector
Pemilih id digunakan untuk menentukan gaya untuk elemen tunggal yang unik.
Selector ID menggunakan atribut ID elemen HTML, dan didefinisikan dengan "#".
Aturan style dibawah ini akan diterapkan ke elemen dengan ID = "contoh1" :
2. Class Selector
Pemilih kelas digunakan untuk menentukan gaya untuk sekelompok elemen. Berbeda
dengan pemilih id, pemilih kelas yang paling sering digunakan pada beberapa
elemen. Hal ini memungkinkan Anda untuk menetapkan gaya tertentu untuk banyak
elemen HTML dengan kelas yang sama. Pemilih kelas menggunakan atribut class
HTML, dan didefinisikan dengan "." Pada contoh di bawah ini, semua elemen HTML
dengan class = "pusat" akan menjadi pusat-blok :
Modul Pemrograman Web I
27
Anda juga dapat menentukan bahwa hanya elemen HTML khusus, harus dipengaruhi
oleh class. Pada contoh di bawah ini, semua elemen p dengan class = "pusat" akan
menjadi pusat-blok :
3. Pengenalan Javascript
A. Sejarah JavaScript
JavaScript pertama kali diperkenalkan oleh Netscape pada tahun 1995. Pada awalnya
bahasa yang sekarang disebut JavaScript ini dulunya dinamai “LiveScript”” yang berfungsi
sebagai bahasa sederhana untuk browser Netscape Navigator 2 yang sangat populer pada
saat itu. Kemudian sejalan dengan sedang giatnya kerjasama antara Netscape dan Sun
(pengembang bahasa pemrograman “Java”) pada masa itu, maka Netscape memberikan
nama “JavaScript” kepada bahasa tersebut pada tanggal 4 desember 1995.
Pada saat yang bersamaan Microsoft sendiri mencoba untuk mengadaptasikan
teknologi ini yang mereka sebut sebagai “Jscript” di browser milik mereka yaitu Internet
Explorer 3. JavaScript sendiri merupakan modifikasi dari bahasa pemrograman C++ dengan
pola penulisan yang lebih sederhana dari bahasa pemrograman C++.
B. Pengertian JavaScript
JavaScript adalah bahasa pemrograman berbasis prototipe yang berjalan disisi klien.
Jika kita berbicara dalam konteks web, sederhananya, kita dapat memahami JavaScript
sebagai bahasa pemrograman yang berjalan khusus untuk di browser atau halaman web
agar halaman web menjadi lebih hidup. Kalau dilihat dari suku katanya terdiri dari dua suku
Modul Pemrograman Web I
28
kata, yaitu Java dan Script. Java adalah Bahasa pemrograman berorientasi objek,
sedangkan Script adalah serangkaian instruksi program.
Secara fungsional, JavaScript digunakan untuk menyediakan akses script pada objek
yang dibenamkan (embedded). Contoh sederhana dari penggunaan JavaScript adalah
membuka halaman pop up, fungsi validasi pada form sebelum data dikirimkan ke server,
merubah image kursor ketika melewati objek tertentu, dan lain lain.
C. Yang Harus Diperhatikan Dalam Penulisan JavaScript
Yang harus diperhatikan dalam pengelolaan pemrograman JavaScript, diantaranya
JavaScript adalah “case sensitive”, yang artinya JavaScript membedakan huruf besar dan
huruf kecil. Jika Anda pernah belajar bahasa pemrograman seperti Turbo C atau C++, maka
sama seperti bahasa pemrograman tersebut, dimana huruf T tidak sama dengan huruf t.
Dalam bahasa pemrograman JavaScript juga, sebagai contoh fungsi perintah var tidak
boleh ditulis Var dan juga tidak boleh ditulis VAR (huruf besar semua), yang benar adalah
var (huruf kecil semua). Perintah lain adalah new Date tidak boleh ditulis new date (huruf
kecil semua), dsb.
D. Kelebihan JavaScript
JavaScript bekerja pada sisi browser. maksudnya begini : untuk menampilkan halaman
web, user menuliskan alamat web di address bar url. setelah itu, browser “mengambil” file
html ( dengan file JavaScript yang melekat padanya jika memang ada ) ke server yang
beralamat di URL yang diketikan oleh user. Selesai file diambil, file ditampilkan pada
browser. Nah, setelah file JavaScript berada pada browser, barulah script JavaScript
tersebut bekerja.
Modul Pemrograman Web I
29
Efek dari Javascript yang bekerja pada sisi browser ini, Javascript dapat merespon
perintah user dengan cepat, dan membuat halaman web menjadi lebih responsif. JavaScript
melakukan apa yang tidak bisa dilakukan oleh HTML, PHP, dan CSS : menangani hal – hal
yang membutuhkan respons cepat terhadap aksi dari user.
Contoh : fungsi validasi pada form. ketika anda mengisi sebuah form yang divalidasi
menggunakan JavaScript, anda mengetikkan data lalu mengetik submit, sebelum data
dikirimkan ke server, data akan “dicek” terlebih dahulu pada browser menggunakan fungsi
JavaScript yang ada pada halaman web. sehingga, jika memang data yang anda isikan tidak
valid, daripada membuang-buang waktu dengan mengirimkan data ke server baru di validasi
di server dan lalu server mengirimkan respons balik mengenai ketidak validan input data
anda, lebih baik cek validasi data form dilakukan secara lokal di browser menggunakan
fungsi JavaScript.
E. Lebih Cepat dan Lebih Hemat
Implementasi terpopuler saat ini dari pemrograman JavaScript adalah teknik AJAX.
(Asynchronous JavaScript and XMLHTTP ). teknik ini sering digunakan oleh aplikasi
berbasis web seperti Facebook, Yahoo Gmail, Google Reader, dan lain lain. Teknik yang
membuat pertukaran data antara server dan browser terjadi di belakang layar sehingga
interaksi antara user dan aplikasi web semakin responsif. Post tersendiri untuk membahas
hal ini akan kita siapkan.
Modul Pemrograman Web I
30
Contoh Tag HTML dengan Javascript
Contoh Pertama
javascript_001.html
Penjelasan :
Jika kita klik tombol Klik Disini maka akan muncul popup dengan nama “Kok di Klik seeh”.
Mengapa sebab kita mempunyai perintah javascript onclick dengan value alert dan menu isi
Kok di Klik seeh.
Contoh Kedua
javascript_002.html
Modul Pemrograman Web I
31
Penjelasan :
Jika cursor mouse kita arahkan ke tombol Hijau maka secara otomatis background berubah
warna menjadi warna hijau, dan saat cursor mouse tidak kearah tombol hijau maka secara
default background bewarna putih. Mengapa karena kita memiliki perintah javascript
onmouseover dan onmouseout dengan value sesuai bgColor.