review pemrograman web 1 · zkumpulan dari aturan‐aturan (protokol) komunikasi yang digunakan...
TRANSCRIPT
Review Pemrograman Web I
Pemrograman Web IIGanjil 2010 ‐ 2011
18 September 2010 Tim Dosen Pemrograman Web II 2010 ‐ 2011 Teknik Informatika UNPAS
2
Intro
Mata kuliah : Pemrograman Web 2
SKS : 3
Jenis : Mata kuliah wajib
Pertemuan : 14 pertemuan kelas
Periode : Ganjil 2010 – 2011
Dosen : Sandra Islama Putra, S.Si
Erik, ST.
Candra Utama, ST.
18 September 2010 Tim Dosen Pemrograman Web II 2010 ‐ 2011 Teknik Informatika UNPAS
3
Aturan Perkuliahan
Kehadiran minimal : 60%
Sudah termasuk sakit, izin.
Komponen penilaian :
Tugas + Quiz : 20%
UTS : 25%
UAS : 30%
Praktikum : 25%
Kehadiran : 10%
18 September 2010 Tim Dosen Pemrograman Web II 2010 ‐ 2011 Teknik Informatika UNPAS
4
Silabus Perkuliahan
Web Dinamis
Server Side Scripting (PHP)
PHP + MySQL
XML
AJAX
Rilis web
INTERNET
18 September 2010 Tim Dosen Pemrograman Web II 2010 ‐ 2011 Teknik Informatika UNPAS
6
Pengenalan Internet
Apa itu internet ?
Dua atau lebih komputer yang berhubungan menggunakan
jaringan komputer di dunia (world-wide) yang saling
berkomunikasi, berinteraksi, dan bertukar informasi.
Menggunakan standarisasi protokol TCP/IP
Transmission Control Protocol (TCP) and the Internet Protocol (IP)
Kumpulan dari aturan‐aturan (protokol) komunikasi yang digunakan pada
jaringan komputer.
18 September 2010 Tim Dosen Pemrograman Web II 2010 ‐ 2011 Teknik Informatika UNPAS
7
Pemanfaatan Internet
File sharing
Web
Chating
VoIP
Teleconference
Remoting (akses jarak jauh)
Dll.
Hypertext Transfer Protocol
18 September 2010 Tim Dosen Pemrograman Web II 2010 ‐ 2011 Teknik Informatika UNPAS
9
World Wide Web (www)
Layanan internet yang didapatkan oleh pemakai komputer
yang terhubung ke internet.
Suatu standarisasi agar dapat berkomunikasi antara satu
dengan yang lain.
Sistem terdistribusi (Client & Server) dalam skala besar.
Menggunakan protokol HTTP.
18 September 2010 Tim Dosen Pemrograman Web II 2010 ‐ 2011 Teknik Informatika UNPAS
10
Hypertext Transfer Protocol
Protokol yang dipergunakan untuk mentransfer dokumen
dalamWord Wide Web (http://)
HTTP request dikirimkan dari browser pengguna ke server
HTTP dan kemudian hasilnya adalah sebuah halaman web
yang ditampilkan pada browser.
18 September 2010 Tim Dosen Pemrograman Web II 2010 ‐ 2011 Teknik Informatika UNPAS
11
Hypertext Transfer Protocol Secure
HTTPS, adalah kombinasi dari HTTP dengan protokol SSL/TLS
untuk menjalin koneksi yang terenkripsi (aman) dan
mengindentifikasi keaslian server.
Koneksi HTTPS biasanya digunakan untuk transaksi
pembayaran pada website, atau transaksi sensitif suatu
sistem informasi di perusahaan.
SSL/TLS
Adalah protokol kriptografi, yang menyediakan keamanan untuk
komunikasi melalui jaringan komputer seperti internet.
18 September 2010 Tim Dosen Pemrograman Web II 2010 ‐ 2011 Teknik Informatika UNPAS
12
File Transfer Protocol (FTP)
FTP adalah standar protokol jaringan yang digunakan untuk
pertukaran dan manipulasi file melalui protokol TCP/IP,
seperti Internet.
Biasanya digunakan untuk mengirim file dari client ke server,
atau men‐download file dari server ke client.
18 September 2010 Tim Dosen Pemrograman Web II 2010 ‐ 2011 Teknik Informatika UNPAS
13
Uniform Resource Locator (URL)
Alamat dari sebuah resource yang dapat diakses diInternet.
URL secara umum terdiri dari :Jenis Protokol
Alamat IP / nama domain
Nama file
Contoh :http://www.sandhikagalih. net/index.php
protokol alamat domain file
18 September 2010 Tim Dosen Pemrograman Web II 2010 ‐ 2011 Teknik Informatika UNPAS
14
Domain Name System (DNS)
Versi teks dari IP Address.
Setiap nama domain memiliki IP Address yang unik yang
terasosiasi dengannya.
Untuk mempermudah pengguna untuk mengakses suatu
resource di Internet.
Contoh :
http://www.google.co.id http://64.233.181.105
18 September 2010 Tim Dosen Pemrograman Web II 2010 ‐ 2011 Teknik Informatika UNPAS
15
Top Level Domain
.com → commercial
.edu→ educational
.gov→ government
.mil →military
.net → networking
.org → nonprofit organization
.biz → bussines
.info →multi purposes
.co → corporate
.ac → academic
.co.id
.web.id regional
.ac.id
18 September 2010 Tim Dosen Pemrograman Web II 2010 ‐ 2011 Teknik Informatika UNPAS
16
Second Level Domain (Sub Domain)
teknik.unpas.ac.idteknik adalah sub domain dari unpas.ac.id
mail.yahoo.commail adalah sub domain dari yahoo.com
18 September 2010 Tim Dosen Pemrograman Web II 2010 ‐ 2011 Teknik Informatika UNPAS
17
Web Programming
Client Side Scripting
HTML
Javascript
CSS
Server Side Scripting
PHP
ASP
JSP
18 September 2010 Tim Dosen Pemrograman Web II 2010 ‐ 2011 Teknik Informatika UNPAS
18
Web Application
Web Statis
Dibentuk menggunakan client side scripting (HTML, CSS,
Javascript). Update dilakukan secara manual dan
melakukan perubahan terhadap script halaman tersebut.
Web Dinamis
Dibentuk menggunakan aplikasi tambahan (server side
scripting & database) sehingga data dapat diupdate tanpa
harus mengubah script, hanya mengubah data di database.
HTML
HyperText Markup Language
18 September 2010 Tim Dosen Pemrograman Web II 2010 ‐ 2011 Teknik Informatika UNPAS
20
HTML
HTML?
Sebuah bahasa markup yang digunakan untuk membuat sebuah
halaman web dan menampilkan berbagai informasi di dalam
sebuah browser.
HTML berupa kode ‐ kode tag yang menginstruksikan browser
untuk menghasilkan tampilan sesuai dengan yang diinginkan.
HTML saat ini merupakan standar Internet yang didefinisikan dan
dikendalikan penggunaannya oleh World Wide Web Consortium
(W3C).
18 September 2010 Tim Dosen Pemrograman Web II 2010 ‐ 2011 Teknik Informatika UNPAS
21
• Document Information
<html></html>
• Document Header
<head></head>
• Document Body
<body></body>
Struktur HTML
18 September 2010 Tim Dosen Pemrograman Web II 2010 ‐ 2011 Teknik Informatika UNPAS
22
Struktur Standar Dokumen HTML
<html>
<head>
............
</head>
<body>
....... Tuliskan tag html lain di sini ........
</body>
</html>
18 September 2010 Tim Dosen Pemrograman Web II 2010 ‐ 2011 Teknik Informatika UNPAS
23
<body bgcolor = “blue”>tag attribute attribute value
element
Tag, Atribut, Elemen
18 September 2010 Tim Dosen Pemrograman Web II 2010 ‐ 2011 Teknik Informatika UNPAS
24
Penulisan Tag
Tag pembuka< >
Tag penutup</ >
Contoh : <p>Ini paragraf</p>
Single Tag< />
Contoh : <br />, <hr />, <input />, <img />
18 September 2010 Tim Dosen Pemrograman Web II 2010 ‐ 2011 Teknik Informatika UNPAS
25
Untuk memuat gambar ke dalam halaman web.
contoh :<img src=“logo-unpas.jpg” />
Tag image memiliki beberapa attribute antara lain :
• src→ lokasi gambar yang akan ditampilkan
• width→ ukuran lebar gambar
• height→ ukuran tinggi gambar
• alt→ deskripsi tentang gambar
• title→ judul gambar
Image Tag
18 September 2010 Tim Dosen Pemrograman Web II 2010 ‐ 2011 Teknik Informatika UNPAS
26
Dipergunakan untuk menghubungkan (linking) text dan image ke
halaman lain atau bagian tertentu dari halaman yang sama dalam
satu website atau website yang lain.
cth :
• Link ke halaman website lain
<a href=“http://sandhikagalih.net”>website</a>
• Link ke file lain dalam satu website
<a href=“halaman2.html”>Halaman 2</a>
Anchor / Hyperlink Tag
18 September 2010 Tim Dosen Pemrograman Web II 2010 ‐ 2011 Teknik Informatika UNPAS
27
Tabel
Digunakan untuk menyajikan data dalam bentuk kolom dan baris, tujuannya agar informasi
dapat ditampilkan secara lebih terstruktur dan tabular.
row
column cell
table
18 September 2010 Tim Dosen Pemrograman Web II 2010 ‐ 2011 Teknik Informatika UNPAS
28
Elemen pada Tabel
Elemen Penjelasan
<table> … </table> Mendefinisikan sebuah tabel dalam dokumen HTML.
Atribut : border, cellpadding, cellspacing
<th> … </th> Membuat judul kolom
<tr> … </tr> Mendefinisikan baris dalam tabel.
Atribut : align (left, center, right), valign (top, middle,
bottom)
<td> … </td> Mendefinisikan kolom tabel.
Atribut : align (left, center, right), valign (top, middle,
bottom), colspan, rowspan.
18 September 2010 Tim Dosen Pemrograman Web II 2010 ‐ 2011 Teknik Informatika UNPAS
29
Colspan & Rowspan
ColspanMenggabungkan beberapa cell (column) dalam satu baris.
RowspanMenggabungkan beberapa cell (row) dalam satu kolom.
18 September 2010 Tim Dosen Pemrograman Web II 2010 ‐ 2011 Teknik Informatika UNPAS
30
Contoh
18 September 2010 Tim Dosen Pemrograman Web II 2010 ‐ 2011 Teknik Informatika UNPAS
31
Cellspacing & Cellpadding
CellspacingJarak antara satu cell dengan cell yang lain.
CellpaddingJarak antara tepi cell dengan isi cell.
18 September 2010 Tim Dosen Pemrograman Web II 2010 ‐ 2011 Teknik Informatika UNPAS
32
Div Tag
Digunakan untuk membungkus tag‐tag lain agar memiliki perilaku
yang sama.
<div style:”color:red”>
<h3>Pemrograman Web</h3>
<p>ini adalah kuliah pemrograman web</p>
</div>
18 September 2010 Tim Dosen Pemrograman Web II 2010 ‐ 2011 Teknik Informatika UNPAS
33
Div Tag
Digunakan sebagai sistem blok untuk membuat lapisan layout
pada halaman.
<div id=”header”> ...
</div><div id=”content”>
...</div><div id=”footer”>
...</div>
18 September 2010 Tim Dosen Pemrograman Web II 2010 ‐ 2011 Teknik Informatika UNPAS
34
HTML Form
Elemen HTML yang digunakan untuk menerima bermacam‐macammasukan (input) dari pengguna web.
Contoh :
18 September 2010 Tim Dosen Pemrograman Web II 2010 ‐ 2011 Teknik Informatika UNPAS
35
Form Tag
Sebuah tag yang membungkus elemen‐elemen input di
dalamnya dan berfungsi mengirim data input ke server.
<form>.elemen input.
</form>
18 September 2010 Tim Dosen Pemrograman Web II 2010 ‐ 2011 Teknik Informatika UNPAS
36
Atribut Form
Atribut Form :Action : Lokasi script yang memproses data dari form.
Enctype : Mendefinsikan cara encoding data sebelum dikirimkan. Biasanya digunakan jika ingin meng‐upload file.
Method : Metode pengiriman data.GET : Data dikirimkan bersama URL.POST : Data dikirimkan terpisah dari URL.
<form action="proses.php" method="post">...
</form>
18 September 2010 Tim Dosen Pemrograman Web II 2010 ‐ 2011 Teknik Informatika UNPAS
37
Elemen Input Form
Macam�macam komponen input :Textfield
Password
Checkbox
Radio button
Listbox
Combobox
Text Area
File
18 September 2010 Tim Dosen Pemrograman Web II 2010 ‐ 2011 Teknik Informatika UNPAS
38
Elemen Input : Text Field
Digunakan untuk memasukan huruf, angka, karakter, dll ke dalam sebuahform.
Contoh tag :
Contoh hasil :
18 September 2010 Tim Dosen Pemrograman Web II 2010 ‐ 2011 Teknik Informatika UNPAS
39
Elemen Input : Password
Digunakan untuk menyembunyikan karakter masukan.
Contoh tag :
Contoh hasil :
18 September 2010 Tim Dosen Pemrograman Web II 2010 ‐ 2011 Teknik Informatika UNPAS
40
Elemen Input : Combo box
Digunakan untuk melakukan satu pemilihan diantara 2 atau lebih data menggunakan drop‐down.
Contoh tag :
Contoh hasil :
18 September 2010 Tim Dosen Pemrograman Web II 2010 ‐ 2011 Teknik Informatika UNPAS
41
Elemen Input : File
Digunakan untuk memilih atau membuka file.
Contoh tag :
Contoh hasil :
Tipe Encoding dari form harus ditentukan
<form method=‘POST’ enctype=‘multipart/form-data’>
18 September 2010 Tim Dosen Pemrograman Web II 2010 ‐ 2011 Teknik Informatika UNPAS
42
Elemen Tombol : Submit
Tombol yang berfungsi secara otomatis mengirim data yang di‐input‐kandi dalam form ke halaman ‘action’.
Contoh tag :
Contoh hasil :
TERIMA KASIH
Untuk lebih jelas mengenai materi HTML silahkan buka kembali slide kuliah Pemrograman Web I