Anda di halaman 1dari 43

ReviewPemrograman

WebI

PemrogramanWebII
Ganjil2010 2011

Candra Utama

Digitally signed by Candra Utama


Reason: I am the author of this document
Location: Bandung, West Java. Indonesia
Date: 2010.09.18 20:32:55 +07'00'

Intro
z

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.

18September2010

TimDosenPemrogramanWebII2010 2011
TeknikInformatikaUNPAS

AturanPerkuliahan
z

Kehadiran minimal : 60%


z

Sudah termasuk sakit, izin.

Komponen penilaian :
z

Tugas + Quiz

: 20%

UTS

: 25%

UAS

: 30%

Praktikum

: 25%

Kehadiran

: 10%

18September2010

TimDosenPemrogramanWebII2010 2011
TeknikInformatikaUNPAS

SilabusPerkuliahan
z

Web Dinamis

Server Side Scripting (PHP)

PHP + MySQL

XML

AJAX

Rilis web

18September2010

TimDosenPemrogramanWebII2010 2011
TeknikInformatikaUNPAS

INTERNET

PengenalanInternet
z

Apa itu internet ?


z

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


z

TransmissionControlProtocol(TCP)andtheInternetProtocol (IP)

Kumpulandariaturanaturan(protokol)komunikasiyangdigunakanpada
jaringankomputer.

18September2010

TimDosenPemrogramanWebII2010 2011
TeknikInformatikaUNPAS

PemanfaatanInternet
z

Filesharing

Web

Email

Chating

VoIP

Teleconference

Remoting(aksesjarakjauh)

Dll.

18September2010

TimDosenPemrogramanWebII2010 2011
TeknikInformatikaUNPAS

HypertextTransfer
Protocol

WorldWideWeb(www)
z

Layanan internetyangdidapatkan oleh pemakai komputer


yangterhubung ke internet.

Suatu standarisasi agardapat berkomunikasi antara satu


dengan yanglain.

Sistem terdistribusi (Client &Server)dalam skala besar.

Menggunakan protokol HTTP.

18September2010

TimDosenPemrogramanWebII2010 2011
TeknikInformatikaUNPAS

HypertextTransferProtocol
z

Protokol yangdipergunakan untuk mentransfer dokumen


dalam WordWideWeb(http://)

HTTPrequestdikirimkan dari browserpengguna ke server


HTTPdankemudianhasilnyaadalahsebuah halaman web
yangditampilkan pada browser.

18September2010

TimDosenPemrogramanWebII2010 2011
TeknikInformatikaUNPAS

10

HypertextTransferProtocolSecure
z

HTTPS,adalahkombinasidariHTTPdenganprotokolSSL/TLS
untukmenjalinkoneksiyangterenkripsi(aman)dan
mengindentifikasikeaslianserver.

KoneksiHTTPSbiasanyadigunakanuntuktransaksi
pembayaranpadawebsite,atautransaksisensitifsuatu
sisteminformasidiperusahaan.

SSL/TLS
Adalahprotokolkriptografi,yangmenyediakankeamananuntuk
komunikasimelaluijaringankomputersepertiinternet.
18September2010

TimDosenPemrogramanWebII2010 2011
TeknikInformatikaUNPAS

11

FileTransferProtocol(FTP)
z

FTPadalahstandarprotokoljaringanyangdigunakanuntuk
pertukarandanmanipulasifilemelaluiprotokolTCP/IP,
sepertiInternet.

Biasanyadigunakanuntukmengirimfiledariclientkeserver,
ataumendownloadfiledariserverkeclient.

18September2010

TimDosenPemrogramanWebII2010 2011
TeknikInformatikaUNPAS

12

UniformResourceLocator(URL)
z

Alamat dari sebuah resource yangdapat diakses di


Internet.
URLsecaraumumterdiridari:
z
z
z

Jenis Protokol
Alamat IP/nama domain
Nama file

Contoh:
z

http://www.sandhikagalih. net/index.php
protokol

18September2010

alamat domain

file

TimDosenPemrogramanWebII2010 2011
TeknikInformatikaUNPAS

13

DomainNameSystem(DNS)
z

VersiteksdariIPAddress.

Setiap nama domainmemiliki IPAddressyangunik yang


terasosiasi dengannya.

Untukmempermudahpenggunauntukmengakses suatu
resourcedi Internet.

Contoh:
z

http://www.google.co.idhttp://64.233.181.105

18September2010

TimDosenPemrogramanWebII2010 2011
TeknikInformatikaUNPAS

14

TopLevelDomain
z

.com commercial

.co corporate

.edu educational

.ac academic

.gov government

.mil military

.co.id

.web.idregional

.ac.id

.net networking

.org nonprofit
organization

.biz bussines

.info multipurposes

18September2010

TimDosenPemrogramanWebII2010 2011
TeknikInformatikaUNPAS

15

SecondLevelDomain(SubDomain)
z

teknik.unpas.ac.id
z

teknik adalahsubdomaindariunpas.ac.id

mail.yahoo.com
z

mail adalahsubdomaindariyahoo.com

18September2010

TimDosenPemrogramanWebII2010 2011
TeknikInformatikaUNPAS

16

WebProgramming
z

ClientSideScripting
z

HTML

Javascript

CSS

ServerSideScripting
z

PHP

ASP

JSP

18September2010

TimDosenPemrogramanWebII2010 2011
TeknikInformatikaUNPAS

17

WebApplication
z

WebStatis
z

Dibentuk menggunakan clientsidescripting (HTML,CSS,


Javascript).Update dilakukan secara manualdan
melakukan perubahan terhadap scripthalaman tersebut.

WebDinamis
z

Dibentuk menggunakan aplikasi tambahan (server side


scripting&database)sehingga datadapat diupdate tanpa
harus mengubah script,hanyamengubahdatadidatabase.

18September2010

TimDosenPemrogramanWebII2010 2011
TeknikInformatikaUNPAS

18

HTML
HyperTextMarkupLanguage

HTML
HTML?
z

Sebuah bahasa markupyangdigunakan untuk membuat sebuah


halaman webdan menampilkan berbagaiinformasididalam
sebuahbrowser.

HTMLberupa kode kode tagyangmenginstruksikan browser


untuk menghasilkan tampilan sesuai dengan yangdiinginkan.

HTMLsaat ini merupakan standar Internetyangdidefinisikan dan


dikendalikan penggunaannya oleh WorldWideWebConsortium
(W3C).

18September2010

TimDosenPemrogramanWebII2010 2011
TeknikInformatikaUNPAS

20

StrukturHTML
DocumentInformation
<html></html>
DocumentHeader
<head></head>
DocumentBody
<body></body>

18September2010

TimDosenPemrogramanWebII2010 2011
TeknikInformatikaUNPAS

21

StrukturStandarDokumenHTML
<html>
<head>
............
</head>
<body>
.......Tuliskantaghtmllaindisini........
</body>
</html>
18September2010

TimDosenPemrogramanWebII2010 2011
TeknikInformatikaUNPAS

22

Tag,Atribut,Elemen

<body bgcolor = blue>


tagattribute

attribute value

element

18September2010

TimDosenPemrogramanWebII2010 2011
TeknikInformatikaUNPAS

23

PenulisanTag
z

Tagpembuka
z

<>

Tagpenutup
z

</>
Contoh:<p>Iniparagraf</p>

SingleTag
z

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

18September2010

TimDosenPemrogramanWebII2010 2011
TeknikInformatikaUNPAS

24

ImageTag
Untuk memuat gambar ke dalam halaman web.
contoh:
<img src=logo-unpas.jpg />

Tagimagememiliki beberapa attributeantara lain:


src lokasi gambar yangakan ditampilkan
width ukuran lebar gambar
height ukuran tinggi gambar
alt deskripsi tentang gambar
title judul gambar
18September2010

TimDosenPemrogramanWebII2010 2011
TeknikInformatikaUNPAS

25

Anchor/HyperlinkTag
Dipergunakan untuk menghubungkan (linking)textdanimageke
halamanlainataubagiantertentudarihalaman yangsama dalam
satu websiteatau websiteyanglain.
cth :
Linkkehalamanwebsitelain
<a href=http://sandhikagalih.net>website</a>

Linkke filelaindalam satu website


<a href=halaman2.html>Halaman 2</a>
18September2010

TimDosenPemrogramanWebII2010 2011
TeknikInformatikaUNPAS

26

Tabel
z

Digunakan untuk menyajikan datadalam bentuk kolom dan baris,tujuannya agarinformasi


dapat ditampilkan secara lebih terstruktur dan tabular.

table
row

column
18September2010

cell
TimDosenPemrogramanWebII2010 2011
TeknikInformatikaUNPAS

27

ElemenpadaTabel
Elemen
<table> </table>

Penjelasan
Mendefinisikan sebuah tabel dalamdokumen 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>

Mendefinisikankolomtabel.
Atribut:align (left,center,right),valign (top,middle,
bottom),colspan,rowspan.

18September2010

TimDosenPemrogramanWebII2010 2011
TeknikInformatikaUNPAS

28

Colspan&Rowspan
z

Colspan
z

Menggabungkan beberapa cell(column)dalam satu baris.

Rowspan
z

Menggabungkan beberapa cell(row)dalam satu kolom.

18September2010

TimDosenPemrogramanWebII2010 2011
TeknikInformatikaUNPAS

29

Contoh

18September2010

TimDosenPemrogramanWebII2010 2011
TeknikInformatikaUNPAS

30

Cellspacing&Cellpadding
z

Cellspacing
z

Jarak antara satu celldengan cellyanglain.

Cellpadding
z

Jarak antara tepi celldengan isi cell.

18September2010

TimDosenPemrogramanWebII2010 2011
TeknikInformatikaUNPAS

31

DivTag
z

Digunakan untuk membungkus tagtaglainagarmemiliki perilaku


yangsama.
<div style:color:red>
<h3>Pemrograman Web</h3>
<p>ini adalah kuliah pemrograman web</p>
</div>

18September2010

TimDosenPemrogramanWebII2010 2011
TeknikInformatikaUNPAS

32

DivTag
z

Digunakan sebagai sistem blok untuk membuat lapisan layout


pada halaman.
<div id=header>
...
</div>
<div id=content>
...
</div>
<div id=footer>
...
</div>

18September2010

TimDosenPemrogramanWebII2010 2011
TeknikInformatikaUNPAS

33

HTMLForm
z

Elemen HTMLyangdigunakan untuk menerima bermacammacam


masukan (input)dari pengguna web.
z Contoh:

18September2010

TimDosenPemrogramanWebII2010 2011
TeknikInformatikaUNPAS

34

FormTag
z

Sebuah tagyangmembungkus elemenelemen inputdi


dalamnya dan berfungsi mengirim datainputke server.

<form>
.
elemen input
.
</form>

18September2010

TimDosenPemrogramanWebII2010 2011
TeknikInformatikaUNPAS

35

AtributForm
z

AtributForm:
z
z

Action:Lokasiscriptyangmemprosesdatadariform.
Enctype:Mendefinsikancaraencodingdatasebelumdikirimkan.
Biasanyadigunakanjikainginmenguploadfile.
Method:Metodepengirimandata.
z GET:DatadikirimkanbersamaURL.
z POST:DatadikirimkanterpisahdariURL.

<form action="proses.php" method="post">


...
</form>
18September2010

TimDosenPemrogramanWebII2010 2011
TeknikInformatikaUNPAS

36

ElemenInputForm
z

Macam macam komponen input:


z

Textfield

Password

Checkbox

Radio button

Listbox

Combobox

TextArea

File

18September2010

TimDosenPemrogramanWebII2010 2011
TeknikInformatikaUNPAS

37

ElemenInput:TextField
z

Digunakan untuk memasukan huruf,angka,karakter,dll ke dalam sebuah


form.
Contoh tag:

Contoh hasil :

18September2010

TimDosenPemrogramanWebII2010 2011
TeknikInformatikaUNPAS

38

ElemenInput:Password
z

Digunakan untuk menyembunyikan karakter masukan.


Contoh tag:

Contoh hasil :

18September2010

TimDosenPemrogramanWebII2010 2011
TeknikInformatikaUNPAS

39

ElemenInput:Combobox
z

Digunakan untuk melakukan satu pemilihan diantara 2atau lebih data


menggunakan dropdown.
Contoh tag:

Contoh hasil :

18September2010

TimDosenPemrogramanWebII2010 2011
TeknikInformatikaUNPAS

40

ElemenInput:File
z

Digunakanuntukmemilihataumembukafile.
Contoh tag:

TipeEncoding dariformharusditentukan
<form method=POST enctype=multipart/form-data>

Contoh hasil :

18September2010

TimDosenPemrogramanWebII2010 2011
TeknikInformatikaUNPAS

41

ElemenTombol:Submit
z

Tombol yangberfungsi secara otomatis mengirim datayangdiinputkan


di dalam formke halaman action.
Contoh tag:

Contoh hasil :

18September2010

TimDosenPemrogramanWebII2010 2011
TeknikInformatikaUNPAS

42

TERIMAKASIH
UntuklebihjelasmengenaimateriHTMLsilahkanbukakembali
slidekuliahPemrogramanWebI