Teknologi WEB

Teknologi WE
Materi Bulan 1
Bagian I
Kholid Fathoni, S.Kom., M.T.
Penilaian



UTS : 25%
UAS : 35%
Tugas : 40%
WEB ?

Suatu ruang informasi di mana
sumber daya yang berguna diid
oleh pengenal global yang disebu
Resource Identifier (URI).
Cara Kerja Web

Sebuah halaman Web diakses
dengan
cara
menuliskan
URLnya atau mengikuti link
yang
menuju
kepadanya,
menggunakan browser Web
 URL
menunjukkan
lokasi
dokumen yang dikelola oleh
sebuah server Web
 URL diubah menjadi alamat IP
server Web ybs
 Browser
kemudian
mengirimkan request http ke
server Web
 Server Web akan menjawab http://www.positive-change.co.uk
dengan memberikan dokumen
yang diminta, dalam format
HTML
WEB 1.0
Web 1.0 secara umum dikem
untuk pengaksesan informa
memiliki sifat yang sedikit inter
 Sifat web 1.0 adalah read

Sumber : www.ilmukomputer.com
WEB 2.0


Menurut Tim O’Reilly, Web 2.0 dapat d
sebagai berikut:
“Web 2.0 adalah revolusi bisnis di indust
yang disebabkan oleh penggunaan inter
platform, dan merupakan suatu percob
memahami berbagai aturan untuk
keberhasilan pada platform baru terse
satu aturan terutama adalah: Membang
yang
mengeksploitasi
efek
jaring
mendapatkan lebih banyak lagi penggu
tersebut”
Sifat dari web 2.0 adalah read write
Karakter WEB 2.0







Web sebagai platform
Data sebagai pengendali utama
Efek jaringan diciptakan oleh arsitektur partisipas
Inovasi dalam perakitan sistem serta situs dis
menyatukan fitur dari pengembang yang terd
independen (semacam model pengembangan "o
Model bisnis yang ringan, yang dikembang
gabungan isi dan layanan
Mudah untuk digunakan dan diadopsi oleh user
Teknologi yang dipakai adalah AJAX
Teknik yang digunakan







Cascade style to untuk bahan isi dan pre
Falksonomi (metoda penandaan conte
dengan konsep ini dimunculkan kata
berkaitan dengan content tersebut).
XML
Teknik Aplikasi Internet
HTML dan XHTML (eXtensible HyperT
Language).
Weblog-publishing tools
Wiki atau forum software,dll
AJAX..?


Asynchronous JavaScript and XMLH
disingkat AJaX, adalah suatu teknik pe
berbasis web untuk menciptakan aplikas
interaktif
Tujuannya adalah untuk memindahkan
besar interaksi pada komputer w
melakukan pertukaran data dengan
belakang layar, sehingga halaman web
dibaca ulang secara keseluruhan
seorang pengguna melakukan perubahan
The Web as Platform



Platform di sini adalah tempat suatu aplikasi dijalan
Contoh platform yang terkenal adalah Windows, di
aplikasi-aplikasi seperti Microsoft Office dan Adobe
Menggunakan Internet sebagai platform berarti apli
tersebut dijalankan langsung di atas Internet dan bu
satu sistem operasi tertentu. Contohnya adalah Go
bisa diakses dari sistem operasi mana pun. Contoh
adalah Flickr yang juga bisa diakses dari sistem op
pun.
Kelebihannya jelas, aplikasi-aplikasi Web 2.0 ini tid
dibatasi sistem operasi seperti pada Windows. Dan
tidak perlu menginstall apapun untuk menggunakan
aplikasi ini
Perbedaan



Yang menjadi kunci perbedaan dalam Web 2.0
adalah keterbatasan pada Web 1.0 yang m
pengguna internet untuk datang ke dalam web
dan melihat satu persatu konten di dalamnya.
Sedangkan Web 2.0 memungkinkan pengguna
melihat konten suatu website tanpa harus b
alamat situs yang bersangkutan.
Kemampuan web 2.0 dalam melakukan aktivi
drop, auto complete, chat, voice dapat dilaku
aplikasi desktop.
Contoh aplikasi WEB 2.0
WEB 3.0



Konsep ini dapat diandaikan sebuah
sebagai sebuah intelektualitas buata
(Artificial Intelegence)
Aplikasi – aplikasi online dalam web
dapat saling berinteraksi
Kemampuan interaksi ini dimulai de
adanya web service
WEB Service..?



Adalah aplikasi yang dapat diakses
aplikasi yang lain.
Menyimpan data dalam bentuk XML
Dapat diakses oleh multi platform.
Teknologi WEB 3.0

SOAP


(Simple Object Access Protocol) adalah s
bertukar pesan-pesan berbasis XML me
komputer atau sebuah jalan untuk program
pada suatu sistem operasi (OS) untuk b
dengan program pada OS yang sama mau
dengan menggunakan HTTP dan X
mekanisme untuk pertukaran data.
REST

Representational State Transfer atau tran
representasi, adalah suatu gaya arsitektur pe
untuk pendistibusian sistem hipermedia sepe
Teknologi WEB 3.0 (lanjutan)

WSDL (Web Service Description La


format XML yang diterbitkan untuk me
webservice.
WSDL mendefinisikan:




pesan-pesan (baik yang abstrak dan kongkrit) yang
menuju web service
koleksi-koleksi digital dari pesan-pesan (port type, a
Bagaimana port type yang ditentukan dijadikan wire
di mana servis ditempatkan.
WDDX


Web Distributed Data eXchange.
Mekanisme pertukaran data dari lingku
berbeda
Contoh WEB 3.0
Bagian II
Content Management Sy







Apa itu CMS ?
Mengapa Perlu CMS ?
Content and Design
Bagan CMS Basic
Keuntungan CMS
Fasilitas Dasar CMS
Penggunaan Joomla sebagai salah
Apa itu CMS ?
CMS
adalah software yang diguna
membuat, mengubah dan mempublikasi
ke dalam sebuah website.
Fasilitas yang umumnya terdapat dalam C
banyak, terutama yang berkaitan dengan
website, pengaturan halaman, pengu
pencarian dan lain-lain.
Sebuah CMS, dapat
berbentuk pro
sederhana, atau dapat juga merupa
program kompleks yang terdiri dari berb
modul sesuai dengan fasilitas yan
didalamnya

Mengapa perlu CMS ?

Karena para pengelola atau pemilik we
tidak mahir dalam menggunakan ko
dapat melakukan pembuatan, pengub
publikasi content terhadap website-nya

CMS menyediakan framework manajem
yang dibutuhkan dalam pengembanga
yang menghendaki pengelolaan yan
dalam frekuensi yang tinggi.

Content dan Design
Content
Providers
CMS
Design
Template
CMS Basic
Web CMS
Keuntungan CMS
Konsistensi
design website dapat dijaga
Tidak diperlukan keahlian khusus untuk
website
Content yang dikehendaki dapat dipublika
pengeditan oleh orang lain
Menghemat biaya untuk mempekerjakan we
Notifikasi otomatis kepada pemilik webs
content yang sudah kadaluarsa
Memungkinkan kerjasama yang baik anta
suatu website.
Mengurangi kompleksitas dalam pengelola
ke website.
CMS



CMS yang banyak dipakai saat ini adalah w
(WCMS).
WCMS adalah perangkat lunak yang ber
membangun dan memelihara/updating web,ya
sedemikan rupa sehingga pemeliharaan
pambuatan web lebih mudah, efektif, dan efesien
kebanyakan WCMS yang banyak ber
internet saat ini menggunakan :



Bahasa Pemrograman PHP
Web Server Apache, dan
Database MySQL
Jenis-Jenis WCMS



WCMS Portal:
Adalah sebuah CMS yang mempunyai ban
seperti layanan berita, mailing list, email dan lain
Misalnya : Joomla, Mambo, phpnuke, postnuke d
WCMS E-Commere
Adalah sebuah website CMS yang bertujuan
melakukan proses transaksi online. Misalnya : O
phpShop dsb.
WCMS
Adalah website CMS yang bertujuan untuk kep
belajar mengajar jarak jauh. Misalnya : aTutor
lainnya.
Jenis WCMS (cont’d)


WCMS Forum
Adalah website CMS yang menyedia
untuk proses diskusi secara online,
phpBB, MiniBB dan lainnya.
WCMS Gallery
Adalah website CMS yang menydiak
untuk menampilkan gallery foto. Misalny
Copermine dan lainnya.
Manfaat CMS

Managenent Data
Ini merupakan fungsi utama dari CM
data/informasi baik telah ditampilkan atau
dapat diorganisasikan dan disimpan s
Suatu waktu data/informasi tadi dapat dip
kembali sesuai dengan kebutuhan.
Selain itu juga CMS juga mendukun
macam format data, seperti XHL, HTML
Untuk menggunakan CMS bisanya pe
tentang bahasa pemrograman tidak
dihutuhkan, karana semua proses berja
otomatis (WYSIWYG).
Manfaat CMS (cont’d)

Mengatur Siklus Hidup Website
Banyak CMS memberikan fasilitas kepada para peng
mengelola bagian atau isi mana saja yang akan ditam
atau isi yang dimaksud terlebih dahulu di-review olah
kevaliditasannya terjamin.

Mendukung
Web
Templating
dan
Setiap halaman yang dihasilkan berasal dari templ
terlebih dahulu disediakan oleh CMS. Selain dapat men
dari tampilan secara kesulurahan, para, para website
dapat juga berkonsestensi dari tampilan secara
melaksanakan tudasnya menyediakan website. Na
beberapa website bisanya telah ditetapkan sedemikian
tidak dapat diubah begitu saja. Hal ini dilakukan unt
standarisasi kepada seluruh bagian dari website.
Manfaat CMS (cont’d)

Personalisasi Website
Sebuah isi/informasi ditempatkan kedalam CMS, isi tersebut da
sesuai dengan keinginan dan kebutuhan dari penggunanya. Te
dengan kelebihan CMS yang dapat memisahkan antara desain
yanmenyebabkan proses personlisasi berjalan dengan mudah.

indikasi
Seidikasi memberikan kemungkinan kepada sebuah website u
isinya kepada website-website yang lain. Format data yang did
variatif, mulai dari rss, rdf, xml, hingga "backed scripting", sema
personalisai, sindkikasi juga dapat dilakukan dengan mudah ka
desain telah dibuat terpisah.
Akuntabilitas
Oleh karena CMS mendukung alur kerja dan hak akses yang je
penggunanya, data/informasi yang disimpan dapat dipertanggu
dengnan baik. Setiap penulis ataupun editor memiliki tugas ma
dengan hak akses yang berbeda-beda pula.

Kolaborasi di CMS

1. Department/Division Project Ma
o
o
2. Content Specialist
o

Bertanggung jawab terhadap website, pemimpin p
personal terhadap projek, membuat jadwal penger
Membuat/mengedit content, reporter, interviewer, dll.
3. Technical Lead/Web Developer
o
o
o
CMS Administrator
Database Administrator
Web Developer / Designer
Kolaborasi di CMS

Server/CMS Administrator


Database Administrator


Bertanggung jawab dalam install dan konfigurasi CMS (term
patch/update, membuat account pengguna CMS dan hak-h
memantau performance server dan CMS.
Mengelola dan membuat account pengguna database, bac
memantau performace server.
Web Developer / Designer

Mengelola scripting program CMS, menambah module, me
template baru.
Tools CMS







Web browser (IE, Mozila Firefox)
Web Server (Apache)
Database Server (MySQL)
Script Engine (PHP)
Script Editor (Dreamweaver)
Software Upload (WS FTP Pro)
CMS Script (Joomla Server)
Wordpress
Pengenalan Wordpress

WordPress merupakan salah satu bentuk pro
site dinamis yg merupakan CMS (content ma
system) keuntungannya al:





Mudah mengubah isi
Menambahkan halaman
memungkinkan interaksi timbal balik antara pemilik
pembaca
WP mempunyai halaman tetap (page, relatif tidak
diubah/ditambahi isi halaman tsb) dan halaman din
ditambahi isi, mirip isi koran/buku harian yang setia
ditambah dg berita baru (page)
dll
WP : Market Share terbesar

Per September 2010 yang lalu W
dilaporkan memiliki pasar 55,3 % d
platform blog yang ada. Angka i
jauh dari Joomla yang hanya 10,8
6,3 %, vBulletin 6,2 %, dan Blogg
Patut kita cermati angka yang dipe
Blogger yang sangat kecil padaha
blog ini dimiliki oleh Google.
Pengguna
(2010)

WordPress >2
Dari 27 juta ini, 13,9 juta merupakan
blogger yang menggunakan WordP
sebanyak 13,8 juta CMS WordPress
terinstal. Selain itu setiap harinya te
350.000 artikel diterbitkan dan 400.0
komentar ditampilkan. Per Novembe
yang lalu WordPress 3.0 yang suda
download sebanyak 23.211.650 leb
ribu lebih plugins, dan 1.285 lebih th
WP : Tersedia dalam 120 bah

Meskipun pada dasarnya berbahas
WordPress telah berkembang
mencapai 120 bahasa di dunia.
untuk kita lihat selain bahasa Ing
paling banyak yaitu 66%, Spany
Portugis 6,5%, ternyata Indonesia m
posisi kelima dengan angka blog
3,5%. Itu artinya sangat banyak ju
Indonesia menggunakan WordPre
blog.
Menu admin WP


Dashboard: menampilkan informasi singkat p
WP
Write:



Write post: untuk menuliskan posting/berita baru
Write Page: untuk menuliskan/menambahkan hala
Manage:







Post: untuk meng-edit post
Page: untuk meng-edit page
Upload: berisi daftar file yg telah di upload
Categories: utk menambahkan dan mengubah kate
berita pada post
Files : mengubah file-file sistem wp (hati-hati jika ti
memahami benar tentang bahasa pemrograman p
Import: memindahkan isi dari program web yang la
Export: memindahkan isi web WP ke web dengan
Menu admin WP (cont’d)

Comments (mrpkn bentuk interaksi da
pembaca ke tulisan kita di web, dg ijin
pembatasan tertentu pembaca web da
memberikan komentar thp tulisan kita,
kitapun dpt melakukan tanggapan, dis
interaksi timbal balik terjadi, tidak hany


Comments: menemukan, mengubah kome
mungkin tidak sesuai dg batasan yg kita b
Awating Moderation: jika komentar di bata
persetujuan, maka diperlukan fasilitas ini u
menerima/publish atau tidak kometar dr pe
Menu admin WP (cont’d 2)

Bloroll: managemen link, diperlukan un
mengubah, menambah link dari web k
web-web yg lain:




Manage Blogroll
Add Link
Import Links
PrsentationMengubah tampilan web



Themes: memilih tampilan yg sudah terse
Widgets: mengubah letak/posisi menu pad
Theme Editor: mengubah file theme (hati-h
diperlukan pemahaman script/kode pembu
Menu admin WP (cont’d 3)


Plugins: fasilitas tambahan yg dpt
ditambahkan/diinstall sbg modul pel
web
Users: untuk mengelola pengguna W
dg WP memungkinakan digunakan
oleh beberapa users yang masing-m
dapat diatur kebolehannya
mengelola/menulis
Menu admin WP (cont’d 4)

Option: Berisi berbagai hal pengatur




General: berisi info umum ttg web, info
ketentuan dpt diubah sesuai kebutuhan
aturan yg ada
Writing: aturan dan tata cara penulisan
Reading: pengaturan keterbacaan web
dll
Halaman Admin WP
Bagian III
XML
Outline





Pendahuluan
Perbedaan antara XML dan HTML
Syntax XML
XML Parser
Tantangan
Apa XML itu?

XML kependekan dari eXtensible Markup Language, dik
mulai tahun 1996 dan mendapatkan pengakuan dari W3
Februari 1998.



Teknologi XML adalah teknologi keturunan dari SGML (S
Generalized Markup Language, ISO 8879) yang dikemb
tahun 1980-an.
XML adalah suatu bahasa Markup, yaitu bahasa yang b
kode berupa tanda-tanda tertentu dengan aturan tertent
memformat dokumen teks dengan tag sendiri agar dapa


It ought to be called the eXtensible Meta Language since it is a lan
create other languages ?
Contoh yang mirip : bahasa HTML, RTF, Wordstar
XML adalah language untuk mengidentifikasi dan menan
terstruktur.
Perbedaan XML dan HTML
XML




Extensible set of tags
Content orientated
Standard Data
infrastructure
Allows multiple output
forms
HTM




Fixed set of
Presentatio
No data val
capabilities
Single pres
Penulisan elemen XML






Penulisan elemen XML di mulai dengan start tag, d
dengan end tag dan data diantaranya.
Contoh:
<director> Stepen Chow </director>
Contoh elemen lain dengan nilai yang sama:
<actor> Stepen Chow </actor>
Tag-tag XML case-sensitive:
<CITY> <City> <city>
Nilai XML yang kosong dapat di ringkas, contoh:
<married> </married> dapat disingkat menjadi
<married/>
Penulisan elemen XML lanjt.


Suatu atribut pasangan antara nama
dipisah dengan tanda =.
Example:
<Kota ZIP=“64134”> Nganjuk </K
Penulisan elemen XML lanjt.


A basic XML document is an XML elemen
but might not, include nested XML eleme
Contoh:
<books>
<book isbn=“123”>
<title> Second Chance </title>
<author> Matthew Dunn </author>
</book>
</books>
Penulisan elemen XML lanjt.

Aturan penulisan:




All elements must have an end tag.
All elements must be cleanly nested (o
elements are not allowed).
All attribute values must be enclosed in
marks.
Each document must have a unique fir
the root node.
XML Data Model
<BOOKS>
<book id=“123”
loc=“library”>
<author>Hull</author>
<title>California</title>
<year> 1995 </year>
</book>
<article id=“555”
ref=“123”>
<author>Su</author>
<title> Purdue</title>
</article>
</BOOKS>
BO
book
loc=“library”
ref
123
author
year
title
Hull
1995
California
XML Parser


Untuk memproses dokumen XML dibutuhkan XML pars
program yang mampu melakukan decompose dokume
individual elemen. Ada dua kategori utama dari XM
Document Object Model (DOM) dan Simple API for XML
DOM adalah language neutral API untuk mengakses da
dokumen yang bercabang-cabang (tree base) seperti d
dan XML, DOM parser bekerja pada memory. Sedangk
adalah parser event base yang hanya digunakan u
dokumen XML. SAX bekerja dari registrasi event. S
bekerja lebih sederhana dibandingkan dengan DO
memiliki beberapa kekurangan yakni :


Ketika dokumen XML dibaca maka tidak ada represen
memory.
SAX parser tidak mampu melakukan modifikasi dokumen X