Review Pemrograman Web 1 · zKumpulan dari aturan‐aturan (protokol) komunikasi yang digunakan...

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.


3

Aturan Perkuliahan

Kehadiran minimal : 60%

Sudah termasuk sakit, izin.

Komponen penilaian :

Tugas + Quiz : 20%

UTS : 25%

UAS : 30%

Praktikum : 25%

Kehadiran : 10%


4

Silabus Perkuliahan

Web Dinamis

Server Side Scripting (PHP)

PHP + MySQL

XML

AJAX

Rilis web

INTERNET


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.


7

Pemanfaatan Internet

File sharing

Web

Email

Chating

VoIP

Teleconference

Remoting (akses jarak jauh)

Dll.

Hypertext Transfer Protocol


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.


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.


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.


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.


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


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


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


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


17

Web Programming

Client Side Scripting

HTML

Javascript

CSS

Server Side Scripting

PHP

ASP

JSP


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


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).


21

• Document Information

<html></html>

• Document Header

<head></head>

• Document Body

<body></body>

Struktur HTML


22

Struktur Standar Dokumen HTML

<html>

<head>

............

</head>

<body>

....... Tuliskan tag html lain di sini ........

</body>

</html>


23

<body bgcolor = “blue”>tag attribute attribute value

element

Tag, Atribut, Elemen


24

Penulisan Tag

Tag pembuka< >

Tag penutup</ >

Contoh : <p>Ini paragraf</p>

Single Tag< />

Contoh : <br />, <hr />, <input />, <img />


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


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


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


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.


29

Colspan & Rowspan

ColspanMenggabungkan beberapa cell (column) dalam satu baris.

RowspanMenggabungkan beberapa cell (row) dalam satu kolom.


30

Contoh


31

Cellspacing & Cellpadding

CellspacingJarak antara satu cell dengan cell yang lain.

CellpaddingJarak antara tepi cell dengan isi cell.


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>


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>


34

HTML Form

Elemen HTML yang digunakan untuk menerima bermacam‐macammasukan (input) dari pengguna web.

Contoh :


35

Form Tag

Sebuah tag yang membungkus elemen‐elemen input di

dalamnya dan berfungsi mengirim data input ke server.

<form>.elemen input.

</form>


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>


37

Elemen Input Form

Macam�macam komponen input :Textfield

Password

Checkbox

Radio button

Listbox

Combobox

Text Area

File


38

Elemen Input : Text Field

Digunakan untuk memasukan huruf, angka, karakter, dll ke dalam sebuahform.

Contoh tag :

Contoh hasil :


39

Elemen Input : Password

Digunakan untuk menyembunyikan karakter masukan.

Contoh tag :

Contoh hasil :


40

Elemen Input : Combo box

Digunakan untuk melakukan satu pemilihan diantara 2 atau lebih data menggunakan drop‐down.

Contoh tag :

Contoh hasil :


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’>


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

Review Pemrograman Web 1 · zKumpulan dari aturan‐aturan (protokol) komunikasi yang digunakan...

Documents

Transcript of Review Pemrograman Web 1 · zKumpulan dari aturan‐aturan (protokol) komunikasi yang digunakan...