Teknologi WEB. Materi Bulan 1 Bagian I. Kholid Fathoni, S.Kom., M.T.

Teknologi WEB

Materi Bulan 1 Bagian I

Penilaian



UTS : 25%



UAS : 35%



Tugas : 40%

WEB ?



Suatu ruang informasi di mana

sumber-sumber daya yang berguna diidentifikasi

oleh pengenal global yang disebut Uniform

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

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”

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

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

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

WEB Service..?



Adalah aplikasi yang dapat diakses oleh

aplikasi yang lain.



Menyimpan data dalam bentuk XML.

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

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

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 Bagian II

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 modul-modul 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 Design Template 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

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 Bertanggung jawab terhadap website, pemimpin projek, kontak

personal terhadap projek, membuat jadwal pengerjaan dll

o

2. Content Specialist

o Membuat/mengedit content, reporter, interviewer, dll.



_{3. Technical Lead/Web Developer}

o CMS Administrator

o Database Administrator o 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

Tools CMS



Web browser (IE, Mozila Firefox)



Web Server (Apache)



Database Server (MySQL)



Script Engine (PHP)



Script Editor (Dreamweaver)



Software Upload (WS FTP Pro)

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)

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 WordPress >27 juta

(2010)



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

di-download sebanyak 23.211.650 lebih, 120

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

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

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,

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

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

XML

Outline



Pendahuluan



Perbedaan antara XML dan HTML



Syntax XML



XML Parser

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

_HTML

 Extensible set of tags  Content orientated  Standard Data

infrastructure

 Allows multiple output

forms

 Fixed set of tags

 Presentation oriented  No data validation

capabilities

Penulisan elemen XML

 Penulisan elemen XML di mulai dengan start tag, dan akhiri

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 dan nilai

dipisah dengan tanda =.



Example:

Penulisan elemen XML lanjt.

 A basic XML document is an XML element that can,

but might not, include nested XML elements.

 Contoh:

<books>

<book isbn=“123”>

<title> Second Chance </title>

<author> Matthew Dunn </author>

</book>

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,

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> Hull _Purdue BOOKS 123 555 California Su title author title author article book year 1995 ref loc=“library”

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.