Index of /PJJ/Teknologi-Web/Bulan1

Teknologi WEB
Materi Bulan 1
Bagian I

Kholid Fathoni, S.Kom., M.T.

Penilaian





UTS : 25%
UAS : 35%
Tugas : 40%

WEB ?


Suatu ruang informasi di mana sumbersumber daya yang berguna diidentifikasi
oleh pengenal global yang disebut Uniform

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/imagesForCS/HowItWorks2.gif
dengan memberikan dokumen
yang diminta, dalam format
HTML

WEB 1.0


Web 1.0 secara umum dikembangkan
untuk pengaksesan informasi dan
memiliki sifat yang sedikit interaktif
 Sifat web 1.0 adalah read
Sumber : www.ilmukomputer.com

WEB 2.0




Menurut Tim O’Reilly, Web 2.0 dapat didefinisikan
sebagai berikut:
“Web 2.0 adalah revolusi bisnis di industri komputer
yang disebabkan oleh penggunaan internet sebagai
platform, dan merupakan suatu percobaan untuk
memahami berbagai aturan untuk mencapai
keberhasilan pada platform baru tersebut. Salah
satu aturan terutama adalah: Membangun aplikasi
yang
mengeksploitasi
efek
jaringan
untuk
mendapatkan lebih banyak lagi pengguna aplikasi
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 partisipasi
Inovasi dalam perakitan sistem serta situs disusun dengan
menyatukan fitur dari pengembang yang terdistribusi dan
independen (semacam model pengembangan "open source")
Model bisnis yang ringan, yang dikembangkan dengan
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 presentasi
Falksonomi (metoda penandaan content dimana
dengan konsep ini dimunculkan kata-kata yang
berkaitan dengan content tersebut).
XML
Teknik Aplikasi Internet
HTML dan XHTML (eXtensible HyperText Markup

Language).
Weblog-publishing tools
Wiki atau forum software,dll

AJAX..?




Asynchronous JavaScript and XMLHTTP, atau
disingkat AJaX, adalah suatu teknik pemrograman
berbasis web untuk menciptakan aplikasi web yang
interaktif
Tujuannya adalah untuk memindahkan sebagian
besar interaksi pada komputer web surfer,
melakukan pertukaran data dengan server di
belakang layar, sehingga halaman web tidak harus
dibaca ulang secara keseluruhan setiap kali
seorang pengguna melakukan perubahan.

The Web as Platform





Platform di sini adalah tempat suatu aplikasi dijalankan.
Contoh platform yang terkenal adalah Windows, di mana ada
aplikasi-aplikasi seperti Microsoft Office dan Adobe Photoshop.
Menggunakan Internet sebagai platform berarti aplikasi-aplikasi
tersebut dijalankan langsung di atas Internet dan bukan di atas
satu sistem operasi tertentu. Contohnya adalah Google yang
bisa diakses dari sistem operasi mana pun. Contoh lainnya
adalah Flickr yang juga bisa diakses dari sistem operasi mana
pun.
Kelebihannya jelas, aplikasi-aplikasi Web 2.0 ini tidak lagi
dibatasi sistem operasi seperti pada Windows. Dan kita bahkan
tidak perlu menginstall apapun untuk menggunakan aplikasiaplikasi ini

Perbedaan







Yang menjadi kunci perbedaan dalam Web 2.0 dan Web 1.0
adalah keterbatasan pada Web 1.0 yang mengharuskan
pengguna internet untuk datang ke dalam website tersebut
dan melihat satu persatu konten di dalamnya.
Sedangkan Web 2.0 memungkinkan pengguna internet dapat
melihat konten suatu website tanpa harus berkunjung ke
alamat situs yang bersangkutan.
Kemampuan web 2.0 dalam melakukan aktivitas drag and
drop, auto complete, chat, voice dapat dilakukan layaknya
aplikasi desktop.

Contoh aplikasi WEB 2.0

WEB 3.0






Konsep ini dapat diandaikan sebuah website
sebagai sebuah intelektualitas buatan
(Artificial Intelegence)
Aplikasi – aplikasi online dalam website
dapat saling berinteraksi
Kemampuan interaksi ini dimulai dengan
adanya web service

WEB Service..?





Adalah aplikasi yang dapat diakses oleh

aplikasi yang lain.
Menyimpan data dalam bentuk XML.
Dapat diakses oleh multi platform.

Teknologi WEB 3.0


SOAP




(Simple Object Access Protocol) adalah standar untuk
bertukar pesan-pesan berbasis XML melalui jaringan
komputer atau sebuah jalan untuk program yang berjalan
pada suatu sistem operasi (OS) untuk berkomunikasi
dengan program pada OS yang sama maupun berbeda
dengan menggunakan HTTP dan XML sebagai
mekanisme untuk pertukaran data.

REST


Representational State Transfer atau transfer keadaan
representasi, adalah suatu gaya arsitektur perangkat lunak
untuk pendistibusian sistem hipermedia seperti WWW.

Teknologi WEB 3.0 (lanjutan)


WSDL (Web Service Description Language)



format XML yang diterbitkan untuk menerangkan
webservice.
WSDL mendefinisikan:






pesan-pesan (baik yang abstrak dan kongkrit) yang dikirim ke dan
menuju web service
koleksi-koleksi digital dari pesan-pesan (port type, antarmuka)
Bagaimana port type yang ditentukan dijadikan wire protokol
di mana servis ditempatkan.

WDDX



Web Distributed Data eXchange.
Mekanisme pertukaran data dari lingkungan yang
berbeda

Contoh WEB 3.0

Bagian II

Content Management System








Apa itu CMS ?
Mengapa Perlu CMS ?
Content and Design
Bagan CMS Basic
Keuntungan CMS
Fasilitas Dasar CMS
Penggunaan Joomla sebagai salah satu CMS

Apa itu CMS ?
CMS

adalah software yang digunakan untuk
membuat, mengubah dan mempublikasikan content
ke dalam sebuah website.
Fasilitas yang umumnya terdapat dalam CMS sangat
banyak, terutama yang berkaitan dengan publikasi isi
website, pengaturan halaman, pengubahan isi,
pencarian dan lain-lain.
Sebuah CMS, dapat
berbentuk program yang
sederhana, atau dapat juga merupakan suatu
program kompleks yang terdiri dari berbagai modulmodul sesuai dengan fasilitas yang terdapat
didalamnya


Mengapa perlu CMS ?






Karena para pengelola atau pemilik website yang
tidak mahir dalam menggunakan kode HTML
dapat melakukan pembuatan, pengubahan dan
publikasi content terhadap website-nya sendiri.
CMS menyediakan framework manajemen proses
yang dibutuhkan dalam pengembangan website
yang menghendaki pengelolaan yang sering /
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 pengelolaan
website
Content yang dikehendaki dapat dipublikasikan tanpa
pengeditan oleh orang lain
Menghemat biaya untuk mempekerjakan web specialist
Notifikasi otomatis kepada pemilik website jika ada
content yang sudah kadaluarsa
Memungkinkan kerjasama yang baik antar pengelola
suatu website.
Mengurangi kompleksitas dalam pengelolaan informasi
ke website.

CMS





CMS yang banyak dipakai saat ini adalah website CMS
(WCMS).
WCMS adalah perangkat lunak yang berfungsi untuk
membangun dan memelihara/updating web,yang dirancang
sedemikan rupa sehingga pemeliharaan dan proses
pambuatan web lebih mudah, efektif, dan efesien.

kebanyakan WCMS yang banyak beredar pada
internet saat ini menggunakan :




Bahasa Pemrograman PHP
Web Server Apache, dan
Database MySQL

Jenis-Jenis WCMS






WCMS Portal:
Adalah sebuah CMS yang mempunyai banyak layanan,
seperti layanan berita, mailing list, email dan lain sebagainya.
Misalnya : Joomla, Mambo, phpnuke, postnuke dsb.
WCMS E-Commere
Adalah sebuah website CMS yang bertujuan agar dapat
melakukan proses transaksi online. Misalnya : OsCommerce,
phpShop dsb.
WCMS
E-Learning
Adalah website CMS yang bertujuan untuk keperluan proses
belajar mengajar jarak jauh. Misalnya : aTutor, Moodle dan
lainnya.

Jenis WCMS (cont’d)




WCMS Forum
Adalah website CMS yang menyediakan media
untuk proses diskusi secara online, Misalnya :
phpBB, MiniBB dan lainnya.
WCMS Gallery
Adalah website CMS yang menydiakan wadah
untuk menampilkan gallery foto. Misalnya : Galery,
Copermine dan lainnya.

Manfaat CMS


Managenent Data
Ini merupakan fungsi utama dari CMS. Semua
data/informasi baik telah ditampilkan ataupun belum
dapat diorganisasikan dan disimpan secara baik.
Suatu waktu data/informasi tadi dapat dipergunakan
kembali sesuai dengan kebutuhan.

Selain itu juga CMS juga mendukung berbagai
macam format data, seperti XHL, HTML, PDF, dll.
Untuk menggunakan CMS bisanya pengetahuan
tentang bahasa pemrograman tidaklah terlalu
dihutuhkan, karana semua proses berjalan dengan
otomatis (WYSIWYG).

Manfaat CMS (cont’d)




Mengatur Siklus Hidup Website
Banyak CMS memberikan fasilitas kepada para penggunanya untuk
mengelola bagian atau isi mana saja yang akan ditampilkan, bagian
atau isi yang dimaksud terlebih dahulu di-review olah editor sehingga
kevaliditasannya terjamin.
Mendukung
Web
Templating
dan
Standarisasi
Setiap halaman yang dihasilkan berasal dari template yang telah
terlebih dahulu disediakan oleh CMS. Selain dapat menjaga konsistensi
dari tampilan secara kesulurahan, para, para website penulis editor
dapat juga berkonsestensi dari tampilan secara penuh dalam
melaksanakan tudasnya menyediakan website. Namun ada juga
beberapa website bisanya telah ditetapkan sedemikian rupa sehingga
tidak dapat diubah begitu saja. Hal ini dilakukan untuk memberikan
standarisasi kepada seluruh bagian dari website.

Manfaat CMS (cont’d)






Personalisasi Website
Sebuah isi/informasi ditempatkan kedalam CMS, isi tersebut dapat ditampilkan
sesuai dengan keinginan dan kebutuhan dari penggunanya. Terlebih lagi
dengan kelebihan CMS yang dapat memisahkan antara desain dan isi
yanmenyebabkan proses personlisasi berjalan dengan mudah.
indikasi
Seidikasi memberikan kemungkinan kepada sebuah website untuk membagi
isinya kepada website-website yang lain. Format data yang didukung juga
variatif, mulai dari rss, rdf, xml, hingga "backed scripting", sema halnya dengan
personalisai, sindkikasi juga dapat dilakukan dengan mudah karena isi dan
desain telah dibuat terpisah.
Akuntabilitas
Oleh karena CMS mendukung alur kerja dan hak akses yang jelas kepada para
penggunanya, data/informasi yang disimpan dapat dipertanggungjawabkan
dengnan baik. Setiap penulis ataupun editor memiliki tugas maisng-masing
dengan hak akses yang berbeda-beda pula.

Kolaborasi di CMS


1. Department/Division Project Manager
o

o

2. Content Specialist
o



Bertanggung jawab terhadap website, pemimpin projek, kontak
personal terhadap projek, membuat jadwal pengerjaan dll

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


Bertanggung jawab dalam install dan konfigurasi CMS (termasuk module),
patch/update, membuat account pengguna CMS dan hak-hak-nya,
memantau performance server dan CMS.

Database Administrator


Mengelola dan membuat account pengguna database, backup data,
memantau performace server.

Web Developer / Designer


Mengelola scripting program CMS, menambah module, membuat design
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 program web
site dinamis yg merupakan CMS (content managemen
system) keuntungannya al:







Mudah mengubah isi
Menambahkan halaman
memungkinkan interaksi timbal balik antara pemilik web dg
pembaca
WP mempunyai halaman tetap (page, relatif tidak sering/banyak
diubah/ditambahi isi halaman tsb) dan halaman dinamis/sering
ditambahi isi, mirip isi koran/buku harian yang setiap hari/saat
ditambah dg berita baru (page)
dll

WP : Market Share terbesar


Per September 2010 yang lalu WordPress
dilaporkan memiliki pasar 55,3 % dari pasar
platform blog yang ada. Angka ini sangat
jauh dari Joomla yang hanya 10,8 %, Drupal
6,3 %, vBulletin 6,2 %, dan Blogger 2,7 %.
Patut kita cermati angka yang diperoleh oleh
Blogger yang sangat kecil padahal platform
blog ini dimiliki oleh Google.

Pengguna
(2010)


WordPress >27 juta

Dari 27 juta ini, 13,9 juta merupakan para
blogger yang menggunakan WordPress dan
sebanyak 13,8 juta CMS WordPress yang
terinstal. Selain itu setiap harinya terdapat
350.000 artikel diterbitkan dan 400.000
komentar ditampilkan. Per November 2010
yang lalu WordPress 3.0 yang sudah didownload sebanyak 23.211.650 lebih, 120
ribu lebih plugins, dan 1.285 lebih theme.

WP : Tersedia dalam 120 bahasa


Meskipun pada dasarnya berbahasa Inggris,
WordPress telah berkembang sampai
mencapai 120 bahasa di dunia. Menarik
untuk kita lihat selain bahasa Inggris yang
paling banyak yaitu 66%, Spanyol 8,8%,
Portugis 6,5%, ternyata Indonesia menempati
posisi kelima dengan angka blog sebanyak
3,5%. Itu artinya sangat banyak juga orang
Indonesia menggunakan WordPress untuk
blog.

Menu admin WP






Dashboard: menampilkan informasi singkat pengelolaan
WP
Write:



Write post: untuk menuliskan posting/berita baru
Write Page: untuk menuliskan/menambahkan halaman baru

Manage:








Post: untuk meng-edit post
Page: untuk meng-edit page
Upload: berisi daftar file yg telah di upload
Categories: utk menambahkan dan mengubah kategori/kelompok
berita pada post
Files : mengubah file-file sistem wp (hati-hati jika tidak
memahami benar tentang bahasa pemrograman php!)
Import: memindahkan isi dari program web yang lain
Export: memindahkan isi web WP ke web dengan program lain

Menu admin WP (cont’d)


Comments (mrpkn bentuk interaksi dari
pembaca ke tulisan kita di web, dg ijin atau
pembatasan tertentu pembaca web dapat
memberikan komentar thp tulisan kita, dan
kitapun dpt melakukan tanggapan, disinilah
interaksi timbal balik terjadi, tidak hanya searah)



Comments: menemukan, mengubah komentar yg
mungkin tidak sesuai dg batasan yg kita berikan
Awating Moderation: jika komentar di batasi dg
persetujuan, maka diperlukan fasilitas ini utk
menerima/publish atau tidak kometar dr pembaca

Menu admin WP (cont’d 2)


Bloroll: managemen link, diperlukan untuk
mengubah, menambah link dari web kita ke
web-web yg lain:







Manage Blogroll
Add Link
Import Links

PrsentationMengubah tampilan web





Themes: memilih tampilan yg sudah tersedia
Widgets: mengubah letak/posisi menu pada web
Theme Editor: mengubah file theme (hati-hati,
diperlukan pemahaman script/kode pembuatan web!)

Menu admin WP (cont’d 3)




Plugins: fasilitas tambahan yg dpt
ditambahkan/diinstall sbg modul pelengkap
web
Users: untuk mengelola pengguna WP. Web
dg WP memungkinakan digunakan bersama
oleh beberapa users yang masing-maisng
dapat diatur kebolehannya
mengelola/menulis

Menu admin WP (cont’d 4)


Option: Berisi berbagai hal pengaturan web






General: berisi info umum ttg web, informasi dan
ketentuan dpt diubah sesuai kebutuhan dan
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, dikembangkan
mulai tahun 1996 dan mendapatkan pengakuan dari W3C pada 10
Februari 1998.








It ought to be called the eXtensible Meta Language since it is a language used to
create other languages ?

Teknologi XML adalah teknologi keturunan dari SGML (Standard
Generalized Markup Language, ISO 8879) yang dikembangkan pada
tahun 1980-an.
XML adalah suatu bahasa Markup, yaitu bahasa yang berisikan kodekode berupa tanda-tanda tertentu dengan aturan tertentu untuk
memformat dokumen teks dengan tag sendiri agar dapat dimengerti.


Contoh yang mirip : bahasa HTML, RTF, Wordstar

XML adalah language untuk mengidentifikasi dan menandai data
terstruktur.

Perbedaan XML dan HTML

XML





Extensible set of tags
Content orientated
Standard Data
infrastructure
Allows multiple output
forms






HTML
Fixed set of tags
Presentation oriented
No data validation
capabilities
Single presentation

Penulisan elemen XML








Penulisan elemen XML di mulai dengan start tag, dan akhiri
dengan end tag dan data diantaranya.
Contoh:
Stepen Chow
Contoh elemen lain dengan nilai yang sama:
Stepen Chow
Tag-tag XML case-sensitive:

Nilai XML yang kosong dapat di ringkas, contoh:
dapat disingkat menjadi


Penulisan elemen XML lanjt.



Suatu atribut pasangan antara nama dan nilai
dipisah dengan tanda =.
Example:
Nganjuk

Penulisan elemen XML lanjt.



A basic XML document is an XML element that can,
but might not, include nested XML elements.
Contoh:


Second Chance
Matthew Dunn



Penulisan elemen XML lanjt.


Aturan penulisan:





All elements must have an end tag.
All elements must be cleanly nested (overlapping
elements are not allowed).
All attribute values must be enclosed in quotation
marks.
Each document must have a unique first element,
the root node.

XML Data Model


Hull
California
1995


Su
Purdue



BOOKS

loc=“library”

book

ref

123

author

article

year

555

author

title

title
Hull

1995
California

Su

Purdue

XML Parser




Untuk memproses dokumen XML dibutuhkan XML parser yakni sebuah
program yang mampu melakukan decompose dokumen XML menjadi
individual elemen. Ada dua kategori utama dari XML parser yakni
Document Object Model (DOM) dan Simple API for XML (SAX).
DOM adalah language neutral API untuk mengakses dan memodifikasi
dokumen yang bercabang-cabang (tree base) seperti dokumen HTML
dan XML, DOM parser bekerja pada memory. Sedangkan SAX parser
adalah parser event base yang hanya digunakan untuk membaca
dokumen XML. SAX bekerja dari registrasi event. SAX sebenarnya
bekerja lebih sederhana dibandingkan dengan DOM hanya saja
memiliki beberapa kekurangan yakni :



Ketika dokumen XML dibaca maka tidak ada representasi dokumen di
memory.
SAX parser tidak mampu melakukan modifikasi dokumen XML.