eighth (web 1.0)

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”
• Sifat dari web 2.0 adalah read write
Perbedaan 1.0 ke 2.0
• move from personal websites to blogs and blog site aggregation,
• from publishing to participation,
• from web content as the outcome of large up-front investment to an ongoing and interactive process,
• and from content management systems to links based on tagging (folksonomy)
Web 2.0 Map
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
Terminologi
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).
• Menggunakan XML
• Teknik Aplikasi Internet
• HTML dan XHTML (eXtensible HyperText Markup Language).
• Weblog-publishing tools
• Wiki atau forum software
Web 2.0 supporting technologies
• Web services
• XML APIs
• AJAX (asynchronous JavaScript and XML)
• Microformats
• OpenSearch vs SRU/SRW

olksonomy / Tagging
• Folksonomi merupakan hasil pengategorian oleh pengguna.
• Secara demokratis pengguna menerapkan tag sesuai dengan kecocokan mereka terhadap isi materi.
• Folksonomi mengatasi kerumitan konsep kategori yang terstruktur formal dan bertingkat yang disebut taksonomi.
• Kelemahan folksonomi misalnya tidak luput dari derau (noise), bisa terjadi ada banyak tag/label yang kosakatanya salah, tidak semua user tag/label tersebut cocok

Authorship
Tagging
Extensions
Signaling
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
Portal vs Mashup
iGoogle
Web mashup application
• Web Mashup = API [1] + API [2] + … API [N]
• Creative social coding and programming
• Sharing, reusing, remixing and recycling electronic materials
• End user customization and tailoring
• Offer new ways to explore design spaces and to rapidly create innovative prototypes

seventh (XML dan Aplikasinya)

XML dan aplikasinya
What Is Markup?
• Information added to a text to make its structure comprehensible
• Pre-computer markup (punctuational and presentational)
– Word divisions
– Copy-editor and typesetters marks
• Any kind of codes added to a document
– Typesetting (presentational markup)
• TeX, Scribe, PostScript,
– Declarative markup
• HTML (sometimes)
• XML
XML (eXtensible Markup Language)
• 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.
XML (2) - Keuntungan
• Keunggulan dan keuntungan dari XML adalah:
– Ekstensibilitas dan reusable
– Memungkinkan pemrograman yang lebih baik:
• Dapat memperlihatkan hubungan antar data.
• XML dapat diprogram dan sudah banyak software pengolah XML.
– Memisahkan data dan presentasi.
• Data disimpan dalam XML sedangkan untuk presentasi (tampilan) dibuat dengan menggunakan XSLT.
– Pencarian data cepat karena XML merupakan data dalam format yang terstruktur.
• Hal ini dapat dilakukan dengan menggunakan XPath dan XQuery berdasarkan suatu elemen tertentu.
– Bersifat plain text dan platform independent.
– Terstruktur dan standard
XML (3) – Pertukaran data
Perbedaan antara XML dan HTML
• HTML merupakan tag untuk memformat tampilan (menitik-beratkan pada unsur presentasi)
– Standar dan baku
• XML merupakan tag untuk menkontrol data dan tidak memperhatikan tampilan (menitik-beratkan pada unsur representasi / penyajian dan penyimpanan data)

Tampilan XML di browser
error
• Jika terdapat suatu kesalahan di dalam dokumen XML, maka web browser akan menyediakan suatu pesan bantuan yang memberitahukan di mana error tersebut terjadi dan menampilkan potongan kode yang salah.
Aturan XML
• Dokumen XML digunakan untuk mendeskripsikan dokumen itu sendiri dengan sintaks yang sederhana.

Aturan XML
Semua tag xml harus memiliki tag penutup.
• Pada HTML beberapa elemen tidak harus berpasangan. Contoh berikut ini diperbolehkan dalam penulisan HTML:

paragraph pertama

paragraph kedua
• Hal demikian tidak berlaku pada XML. Kita harus menulis pula tag penutup untuk setiap tag yang kita buat.
• Penulisannya harus seperti ini:

paragraph pertama

paragraph kedua

• Tag tunggal hanya diperbolehkan untuk elemen kosong.
• Contoh penulisannya sebagai berikut:




Aturan XML
XML Declaration:
• Setiap membuat dokumen XML diawali dengan heading standard XML. Formatnya adalah sebagai berikut:

Aturan XML
• Tag XML adalah case sensitive (membedakan antara huruf besar dan kecil).
• Contoh berikut adalah contoh yang salah:

AASE
Antonius

Aturan XML
• Semua tag XML harus tersarang dengan benar dan tidak terbalik-balik.
• Contoh:

This text is bold and italic - wrong

This text is bold and italic - right
Aturan XML
• Semua dokumen XML harus memiliki elemen root. Elemen root adalah elemen teratas/tertinggi yang harus memiliki tag penutup.
• Contoh:


.....


• Dalam contoh di atas elemen adalah elemen root.
Aturan XML
• Nilai atribut harus diapit dalam tanda petik ganda (double quote) atau petik tunggal (single quote).
• Contoh:


Tove


Aturan XML
• Dalam XML karakter spasi akan dibaca sebagai karakter spasi.
• Dalam HTML jika ada lebih dari satu karakter spasi, karakter spasi tersebut dihilangkan sehingga menjadi 1 spasi saja, Contoh:
• “Hello my name is Tove” akan menjadi “Hello my name is Tove”.
• Namun dalam XML karakter spasi tetap dibaca sebagai karakter spasi.
Aturan XML
• Komentar adalah kalimat/baris yang tidak dieksekusi oleh compiler, browser atau parser. Penulisan komentar di XML menggunakan tanda
• Dalam XML, karakter ‘<’ dan ‘>’ adalah illegal..
– jika jumlah < 1000 maka
• Legal:
– jika jumlah < 1000 maka
Entity with References

• XML Documents may contain:
– Elements
– Attributes
– Comments
– Entities
– Processing instructions
– Character data (CData)
– XML text and whitespace
– DTD
Node dalam XML
Sebuah dokumen XML terdiri dari bagian bagian yang disebut
dengan node.
• Root node: yaitu node yang melingkupi keseluruhan dokumen. Dalam satu dokumen XML hanya ada satu root node. Node-node yang lainnya berada di dalam root node.
• Element node: yaitu bagian dari dokumen XML yang ditandai dengan tag pembuka dan tag penutup, atau bisa juga sebuah tag tunggal elemen kosong seperti .
• Attribute node: berupa elemen tambahan dari elemen utama.
• Text node: adalah text yang merupakan isi dari sebuah elemen, ditulis diantara tag pembuka dan tag penutup.
• Comment node: adalah baris yang tidak dieksekusi oleh parser.
Node dalam XML
• Processing Instruction node: adalah perintah pengolahan dalam dokumen XML. Node ini ditandai dengan karakter .
– Tapi perlu diingat bahwa header standard XML bukanlah processing instruction node.
– Header standard bukanlah bagian dari hirarki pohon dokumen XML.
• Namespace Node: node ini mewakili deklarasi namespace.
Tipe XML
• Well Formed XML: jika mengikuti spesifikasi / aturan XML namun tidak memiliki DTD / XML Schema
• Valid XML: jika mengikuti spesifikasi / aturan XML dan memiliki & sesuai dengan DTD / XML Schema.
• Invalid XML: jika tidak mengikuti aturan XML & tidak memiliki DTD.
Memformat XML
• Terdapat 2 cara untuk memformat data XML untuk menampilkannya pada web browser, yaitu dengan menggunakan:
1. CSS (Cascading Style Sheets)
2. XSL (eXstensible Stylesheet Language)

sixth (web database)

Web Database
Database
• Kumpulan data
• Tersimpan dalam suatu tempat
• Dapat digunakan secara bersama
Database
• tersimpan dalam bentuk file
• tersimpan dalam database server
• diakses secara bersama melalui jaringan komputer
Database
Dalam sistem informasi, penerapan database tidak hanya ditinjau dari sisi ketersediaan data
Database Management System
sistem basisdata yang mamiliki kemampuan menajemen untuk menjamin ketersediaan, keamanan, reliabilitas, konsistensi dan validitas data
Database Management System
Menggunakan metode relasi yang didasarkan pada teori himpunan matematika
Database Management System
Web Database
• Tempat penyimpanan (repositories) database atau informasi yang secara dinamis berinteraksi dengan halaman Web
• Sebuah metode untuk menyimpan content WWW, dalam format terstruktur atau usable, yang terhubung baik secara statis maupundinamis dengan database lain
• Membantu komunikasi antara Web server dan Database.dan memungkinkan pemakai menerbitkan atau mengumpulkan informasi dari manapun
Tujuan
• Menyediakan jalan / cara remote access ke database server melalui browser
• Menggabungkan web server (http) dan database server
• Menggunakan semua metodologi web design standard untuk menyediakan kemudahan pemakaian, front end GUI ke database
Yg menggunakan web db
• E-Commerce
• Resource libraries
• Catalogs
• Directories (Yellow Pages)
• Online Shopping
• Online Auctions
• Training Courses
• Survey
• Financial Analysis
3-tier arsitektur
• Adanya penambahan tier antara database server dan client
• Tier ketiga (middle) dapat digunakan untuk menjalankan business rules dan melakukan pemrosesan
• Beban pada DBMS server dapat berkurang, sehingga transaksi pada DBMS Server dapat lebih efisien
• Aplikasi pemroses akan digeser ke lapisan middle, yang memungkinkan thin clients
3 tier
• Application Server (middle tier) dapat berada pada mesin yang berbeda dengan DBMS Server
• Banyak vendor yang menawarkan 3-Tier environtments:
– J2EE Application Server (untuk EJB) + RDBMS
– COM+ dan MTS + RDBMS
– .NET Remoting + RDBMS
– Web Services
• Dimungkinkan untuk menggabungkan antara application servers dan database server
Using DBMS
• Many pages access a DBMS for the data they display
• Use PHP to display the data
• Use DBMS to do the heavy work
PHP & MySQL
• Open Source SQL database management system
• relational database
• mampu menyimpan data dalam skala yang sangat besar
• dikembangkan, didistribusikan dan disuport oleh MySQL AB
• menggunakan Structured Query Language (SQL) sebagai bahasa standardnya - SQL:2003
Main Features of MySQL
• Fully multi-threaded using kernel threads.
• Works on many different platforms.
• Many column types
• Very fast joins using an optimized one-sweep multi-join
• Full operator and function support in the SELECT and WHERE parts of queries.
• You can mix tables from different databases in the same query.
• A privilege and password system that is very flexible and secure.
• Handles large databases.
• Tested with a broad range of different compilers. (C/C++)
• No memory leaks.
• Full support for several different character sets.
What’s New?


MySQL Architecture
Other Advanced SQL
• Stored Procedures (5.0) & Triggers (5.1)
– Put some app logic into db
• Transactions
– Multiple queries as an atomic operation
– Use “commit;” to save, or “rollback;” to cancel
– Can affect performance significantly
• Foreign Keys
– DB enforces constraints on “joinable” columns
• Optimization tools
– Benchmarking – Benchmark(1000000, 1+1)
– EXPLAIN - optimizations, indices, etc. in use
– Add indices to your tables appropriately
PHP & MySQL
• membuka koneksi (connection) dengan database server
• memilih dan membuka database yang diinginkan
• mengirim perintah untuk mengakses (membaca, menulis, mengubah, atau menghapus) data
• membaca hasil akses yang telah dilakukan
• mengakhiri koneksi dengan database server
PHP & MySQL
membuka koneksi (connection) MySQL menggunakan PHP
PHP & MySQL
memilih dan membuka database yang diinginkan
PHP & MySQL
membaca hasil akses yang telah dilakukan
PHP & MySQL
mengakhiri koneksi dengan database server

fiveth

Pengantar Teknologi Web 4
JavaScript

Client-side programming

• recall: HTML is good for developing static pages

– can specify text/image layout, presentation, links, …

– Web page looks the same each time it is accessed

– in order to develop interactive/reactive pages, must integrate programming

Scripts vs. programs

• a scripting language is a simple, interpreted programming language

– scripts are embedded as plain text, interpreted by application

– simpler execution model: don't need compiler or development environment

– saves bandwidth: source code is downloaded, not compiled executable

– platform-independence: code interpreted by any script-enabled browser

– but: slower than compiled code, not as powerful/full-featured

Common scripting tasks

• adding dynamic features to Web pages

– validation of form data

– image rollovers

– time-sensitive or random page elements

– handling cookies

• defining programs with Web interfaces

– utilize buttons, text boxes, clickable images, prompts, frames

JavaScript

• JavaScript code can be embedded in a Web page using SCRIPT tags

– the output of JavaScript code is displayed as if directly entered in HTML

Mencetak di halaman Web

Hasil

Contoh Alert

Hasil

“Dynamic” Client Side

Hasil

JavaScript data types & variables

• JavaScript has only three primitive data types

strings : "foo" 'howdy do' "I said 'hi'." ""

numbers : 12 3.14159 1.5E6

booleans : true false

JavaScript Math routines

Aritmatika

Operator kontrol

Persamaan

User-defined functions

• function definitions are similar to C++/Java, except:

– no return type for the function (since variables are loosely typed)

– no types for parameters (since variables are loosely typed)

– by-value parameter passing only (parameter gets copy of argument)

Function example

JavaScript Strings

• a class defines a new type (formally, Abstract Data Type)

– encapsulates data (properties) and operations on that data (methods)

• a String encapsulates a sequence of characters, enclosed in quotes

properties include

• length : stores the number of characters in the string

methods include

• charAt(index) : returns the character stored at the given index

• (as in C++/Java, indices start at 0)

• substring(start, end) : returns the part of the string between the start

• (inclusive) and end (exclusive) indices

• toUpperCase() : returns copy of string with letters uppercase

• toLowerCase() : returns copy of string with letters lowercase

to create a string, assign using new or just make a direct assignment (new is implicit)

word = new String("foo"); word = "foo";

properties/methods are called exactly as in C++/Java

• word.length word.charAt(0)

String example: palindromes

Date class

• String & Array are the most commonly used classes in JavaScript

– other, special purpose classes & objects also exist

• the Date class can be used to access the date and time

– to create a Date object, use new & supply year/month/day/… as desired

• today = new Date(); // sets to current date & time

• newYear = new Date(2002,0,1); //sets to Jan 1, 2002 12:00AM

– methods include:

• newYear.getYear() can access individual components of a date

• newYear.getMonth()

• newYear.getDay()

• newYear.getHours()

• newYear.getMinutes()

• newYear.getSeconds()

• newYear.getMilliseconds()

fourth

Pengantar Teknologi Web 3
Teknologi Web Client
• Web browser
• HTML / XML / XHTML
• Javascript / VBScript
• CSS
• Flash player
• Java Applet
• ActiveX / Plugin: program yg terintegrasi dgn browser
• Helper: program yg terinstall di client
Pengembangan sisi client
• Local environment (prosesor, browser, memory, vga, dll)
• Tidak ada kontrol oleh web developer
• Memberikan saran kepada user
– Cth: resolusi 1024 x 768
• Memberi pilihan kepada user
– Cth: javascript harus aktif
• Client / user profiling
Pengembangan sisi client
Pilihan client
Pertimbangan Client
• Kebutuhan dan keinginan user berbeda satu dengan yang lain.
• Pengaruh gender, umur, pendidikan, hobi, pengalaman, latarbelakang, budaya, dll.
• User memiliki tujuan, tugas web developer adalah membantu user mencapai tujuannya (download program, akses jadwal, mencetak daftar harga, dll)
Pertimbangan jaringan
• Bandwidth
– Modem = 56KBps; T1 = 1.5MBps
• Latency: waktu yang diperlukan sebuah paket data untuk menempuh jarak yang menghubungkan dua buah sistem
• Utilization, lalu lintas data pada suatu jaringan.
Web Browser
• MS Internet Explorer (Windows)
• Netscape Navigator/Communicator (Windows & Linux)
• Mozila Firefox (Windows & Linux)
• Opera (Windows & Linux)
• Konqueror (Linux)
• lynx, berbasis teks (Linux)
HTML
• Hypertext Markup Language
• Text based
• Menggunakan tag (tanda) <>
• Tujuannya: untuk tampilan di halaman web
• Bahasanya baku
• Ekstensi : .html , .htm
HTML tag


Judul Halaman






Tags vs. elements
• HTML specifies a set of tags that identify structure and content type
– tags are enclosed in < >

• specifies an image

– most tags come in pairs, marking a beginning and ending

• and enclose the title of a page
HTML
Aligning text
• can specify how elements should be aligned (default is left-justified)
– utilize STYLE attribute of tag


• to justify more than one element as a group, use DIV tags
– ell elements enclosed in DIV are formatted similarly


Text styles
• can specify styles for fonts

– … specify bold
– … specify italics
– … specify typewriter-like (fixed-width) font

– … increase the size of the font
– … decrease the size of the font

– _… specify a subscript
– ^… a superscript

–

…

for paragraphs
–
… for inline text


• Note: if elements are nested, the order of opening/closing is important! (LIFO)
Font
Lists

• there are 3 different types of list elements

–

…

specifies an ordered list (using numbers or letters to label each list item)
•

identifies each list item

• can set type of ordering, start index


–

…

specifies unordered list (using a bullet for each)
•

identifies each list item


–

…

specifies a definition list
•

identifies each term
•

identifies its definition
Tabel 1 baris 2 kolom
Tabel 2 baris 2 kolom
URL
Hyperlinks
• perhaps the most important HTML element is the hyperlink, or ANCHOR

– …

• where URL is the Web address of the page to be displayed when the user clicks on the link

• if the page is accessed over the Web, must start with http://

• if not there, the browser will assume it is the name of a local file


– …

• causes the page to be loaded in a new window

Hyperlinks - anchor
• for long documents, you can even have links to other locations in that document

– …

• where ident is a variable for identifying this location



– …

• will then jump to that location within the file


– …

• can jump into the middle of another file just as easily

Images
• can include images using IMG
– by default, browsers can display GIF and JPEG files
– other image formats may require plug-in applications for display

•


• again, if file is to be accessed over the Web, must start with http:// (if not, will assume local file)
Frames
• frames provide the ability to split the screen into independent pages
– must define a FRAMESET that specifies the layout of the pages
– actual pages to be displayed must be in separate files
Frame controversy
• frames are probably the most controversial HTML feature
– some people love them, some people hate them


• 2 reasonable uses for frames
– as a navigational aid:
• can divide the screen into a static menu frame and the main frame for navigating a site
• e.g., www.creighton.edu/~davereed

– as a means of separating program input from output:
• can divide the screen into a static man input form frame and the main frame for displaying output
• e.g., www.creighton.edu/~davereed/csc551/JavaScript/story.html

Menu frame
• to create a menu, need to be able to direct links to the main frame
– name the frames in the FRAMESET
– specify the frame name as TARGET in the link
– specify _top as target to return to top level of browser
Content vs. presentation
• most HTML tags define content type, independent of presentation
– exceptions?


• style sheets associate presentation formats with HTML elements
– CSS1: developed in 1996 by W3C
– CSS2: released in 1998, but not fully supported by browsers

– HTML style sheets are known as Cascading Style Sheets, since can be defined at three different levels
• inline style sheets apply to the content of a single HTML element
• document style sheets apply to the whole BODY of a document
• external style sheets can be linked and applied to numerous documents

lower-level style sheets can override higher-level style sheets

Inline style sheets
• Using the style attribute, can specify presentation style for a single HTML element

– within tag, list sequence of property:value pairs

font-family:Courier,monospace
font-style:italic
font-weight:bold
font-size:12pt font-size:large font-size:larger

color:red color:#000080
background-color:white

text-decoration:underline
text-decoration:none
text-align:left text-align:center
text-align:right text-align:justify
vertical-align:top vertical-align:middle
vertical-align:bottom

text-indent:5em text-indent:0.2in
Inline style sheets (cont.)
• more style properties & values

margin-left:0.1in margin-right:5%
margin:3em
padding-top:0.1in padding-bottom:5%
padding:3em

border-width:thin border-width:thick
border-width:5
border-color:red
border-style:dashed border-style:dotted
border-style:double border-style:none

whitespace:pre

list-style-type:square
list-style-type:decimal
list-style-type:lower-alpha
list-style-type:upper-roman
Document style sheets
• inline style sheets apply to individual elements in the page
– can lead to inconsistencies as similar elements are formatted differently
• e.g., might like for all H1 elements to be centered

– inline definitions mix content & presentation
•  violates the general philosophy of HTML
Document style sheets
• document style sheets ensure that similar elements are formatted similarly
– can even define subclasses of elements and specify formatting

p.indented defines subclass of paragraphs
• inherits all defaults of

• adds new features

to specify this newly defined class, place class="ID" attribute in tag


• note how "clean" the BODY is

External style sheets
• modularity is key to the development and reuse of software
– design/implement/test useful routines and classes
– package and make available for reuse

– saves in development cost & time
– central libraries make it possible to make a single change and propogate
Modularity & style sheets
• ideally, the developer(s) of a Web site would place all formatting options in an external style sheet

• all Web pages link to that same style sheet for a uniform look

– simplifies Web pages since only need to specify structure/content tags

Web rules of thumb
• HTML provides for lots of neat features,
but just because you can add a feature doesn't mean you should!
– don't add features that distract from the content of the page

 use color & fonts sparingly and be careful how elements fit together
e.g, no purple text on a pink background, no weird fonts

 use images only where appropriate
e.g., bright background images can make text hard to read
e.g., the use of clickable images instead of buttons or links can slow access

 don't rely on window or font size for layout
e.g., font size may be adjusted by viewer, window constrained

 don’t be annoying
e.g., no pop-up windows, excessive advertising, silly music

 break large document into smaller or provide a menu (either internal or frame)

 stick to standard features and test using both IE and Netscape

 utilize style sheets to make changes easy & ensure consistency

trird

>

Pengantar Teknologi Web 2

Web Architectures & Technologies

WWW

• Software

• Kumpulan service Internet, yaitu web-web yang berada di layer aplikasi

• Ditemukan oleh Tim Berners-Lee dkk di CERN

• Didesain untuk membantu para ilmuwan di CERN untuk memperoleh informasi dari dokumen-dokumen di Internet

• Tujuannya: membuat software (browser) untuk menampilkan informasi tersebut

– Idenya: hyperlink

WWW

• The world wide web consortium (W3C) definition of the web: "The World Wide Web is the universe of network-accessible information, an embodiment of human knowledge"

• Provides information access in ways not previously possible

– Hyperlinked (Hypertext)

– Graphical user interface

– Pictorial and non-text information

– Information that changes rapidly

– Immediate access

– Anyone can author a web site

– Multi-user access to the same information (try that with a book)

– Easily searchable information

WWW Components

• Structural Components

– Clients/browsers – to dominant implementations

– Servers – run on sophisticated hardware

– Caches – many interesting implementations

– Internet – the global infrastructure which facilitates data transfer

• Semantic Components

– Hyper Text Transfer Protocol (HTTP)

– Hyper Text Markup Language (HTML)

• eXtensible Markup Language (XML)

– Uniform Resource Identifiers (URIs)

Web Server survey (netcraft)

Growth of World Wide Web

A brief history of the web

Web Architecture

• Layering Aspect

– “Separation of concerns”

– How many concurrent users are you serving?

– Shared needs among multiple applications? (e.g., security)

• Data Aspect

– What kind(s) of data are you delivering?

• Structured vs non structured

• On-demand vs. real-time

– What are the bandwidth requirements?

• Size & nature of data

• Again, audience concerns

Tiers…?

• A “tier” can be hardware, software, or logical. The last is the most sensible option from an architectural viewpoint.

• Therefore:

– A non-application-specific client (such as a web browser) is not a tier

– A database with no overlying data access layer is not really considered a tier either

N-tier web architectures

How to build a 2-tier web app…

Physical architecture

Conceptual architecture

the three roles

• the Model contains data that represents the problem

• the Controller responds to user actions by telling the Model how to change

• the View displays the current state of the Model to the user

how do we design it?

• the Model is a class that represents the actual problem being solved

– it has private fields, and provides accessor (getter and setter) methods

– the Model should always be a separate class

• if using a GUI

– the listeners collectively are the Controller

– the displayed components are the View

– the Controller and View are thus a little bit interdependent

Combining Controller and View

• Sometimes the Controller and View are combined, especially in small programs

• Combining the Controller and View is appropriate if they are very interdependent

• The Model should always be independent

• Never mix Model code with GUI code!

– why?

• ANSWER: you may be required to change the View

• if you keep View and Model separate, changing the View will be relatively simple

MVC

Contoh

MVC Separation

• Separating the presentation from the model

– Presentasi dan model memiliki fokus yang berbeda:

• presentasi ke tampilan, model ke data.

– Perbedaan ketergantungan:

• presentasi bergantung pada model tapi tidak sebaliknya.

– Sehingga dapat mengembangkan multiple presentation dengan model yang sama

• Separating the controller from the view

– Contoh: .NET Web application

– File: *.aspx dan *.aspx.vb

• Contoh: PHP Zend Framework, Code Igniter

Kelebihan & Kekurangan Aplikasi Web

Teknologi Aplikasi Web

Bagaimana web bekerja?

Web application

Planning A Web site

• Purpose

– Purpose and Goal

– Target Audience

– New Web Technologies

– Web site comparison

• Content

– Value-added contents

– Text

– Images

– Color Palette

second

Ringkasan ini tidak tersedia. Harap klik di sini untuk melihat postingan.