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

Transkripsi

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

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

3 WEB? Suatu ruang informasi di mana sumbersumber daya yang berguna diidentifikasi oleh pengenal global yang disebut Uniform Resource Identifier (URI).

4 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

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

6 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

7 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

8 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

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

10 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

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

12 Contoh aplikasi WEB 2.0

13 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

14 WEB Service..? Adalah aplikasi yang dapat diakses oleh aplikasi yang lain. Menyimpan data dalam bentuk XML. Dapat diakses oleh multi platform.

15 Teknologi WEB 3.0 SOAP REST (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. Representational State Transfer atau transfer keadaan representasi, adalah suatu gaya arsitektur perangkat lunak untuk pendistibusian sistem hipermedia seperti WWW.

16 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

17 Contoh WEB 3.0

18 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

19 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

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

21 Content dan Design Content Providers CMS Design Template

22 CMS Basic

23 Web CMS

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

25 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

26 Jenis-Jenis WCMS WCMS Portal: Adalah sebuah CMS yang mempunyai banyak layanan, seperti layanan berita, mailing list, 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.

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

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

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

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

31 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 o o CMS Administrator Database Administrator Web Developer / Designer

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

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

34 Wordpress

35 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

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

37 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 artikel diterbitkan dan komentar ditampilkan. Per November 2010 yang lalu WordPress 3.0 yang sudah didownload sebanyak lebih, 120 ribu lebih plugins, dan lebih theme.

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

39 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

40 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

41 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!)

42 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

43 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

44 Halaman Admin WP

45 Bagian III XML

46 Outline Pendahuluan Perbedaan antara XML dan HTML Syntax XML XML Parser Tantangan

47 Apa XML itu? XML kependekan dari extensible Markup Language, dikembangkan mulai tahun 1996 dan mendapatkan pengakuan dari W3C pada 10 Februari 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.

48 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

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

50 Penulisan elemen XML lanjt. Suatu atribut pasangan antara nama dan nilai dipisah dengan tanda =. Example: <Kota ZIP= > Nganjuk </Kota>

51 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> </books>

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

53 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> BOOKS book loc= library article ref author year author title Hull 1995 Su California title Purdue

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