TEKNOLOGI WEB

TEKNOLOGI WEB

Jumat, 14 Mei 2010

Pengantar Teknologi Web 8


Web 2.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 1.0 design elements
• Static pages instead of dynamic user-generated content.
• The use of framesets.
• Proprietary HTML extensions such as the and tags introduced during the first browser war.
• Online guestbooks.
• GIF buttons, typically 88x31 pixels in size promoting web browsers and other products.
• HTML forms sent via email. A user would fill in a form, and upon clicking submit their email client would
attempt to send an email containing the form's details.
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)
1.0 – 2.0



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 examples
• RSS delivery of content
• Blogs – Web logs + comments
• Wikis – content created in community
• Instant Messaging, SMS,
• Voice over IP – Skype
• Podcasting
Vlogs
Web 2.0 supporting technologies
• Web services
• XML APIs
• AJAX (asynchronous JavaScript and XML)
• Microformats
• OpenSearch vs SRU/SRW

Web 2.0 media
• Rich media – beyond text
• Music and audio
– Well experienced: File swapping, p2p, iPod, MP3
• Video
– Recreational and academic: youtube.com, myspace.com/video, yahoo! Video, bittorrent
• Opportunities to remix. Usually recreational, but explore ways to tap this interest with an academic slant.
Library 2.0
• First mentioned by Michael Casey
• Web 2.0 + Library = Library 2.0
• New book lists through RSS
• Wikis
– Intranets for staff documentation
– Collaborative resources for library users
• Enriched library catalogs
• User participation in library resources
– User tagging in catalog
– Reviews
– Ratings

Sites as Application: Email Application



Microsoft Office Web Client



Participation: Books



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



THE 1% RULE


Fitur Web 2.0

• Search
– The ease of finding information through keyword search.
• Links
– Ad-hoc guides to other relevant information.
• Authoring
– The ability to create constantly updating content over a platform that is shifted from being the creation of a
few to being constantly updated, interlinked work. In wikis, the content is iterative in the sense that users
undo and redo each other's work. In blogs, content is cumulative in that posts and comments of individuals are
accumulated over time.
• Tags
– Categorization of content by creating tags: simple, one-word user-determined descriptions to facilitate
searching and avoid rigid, pre-made categories.
• Extensions
– Powerful algorithms that leverage the Web as an application platform as well as a document server.
• Signals
– The use of RSS technology to rapidly notify users of content changes.

Search


>

Link




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
SecondLife



Facebook Example


Google Calendar Example



Benefits of Library 2.0
Delivery Mechanisms (“network as platform”):
– Global outreach: maximise impact of and engagement with ideas
– Outsourced services: allowing organisations to focus on their strengths and small institutions to engage on
more equal terms
– Exploits infrastructure: the standards (e,g. RSS) & services (Google, Amazon, ..) now in place
User Benefits:
– User can create content
– Can comment on other’s content
– Users no longer passive consumers of content
Web Mashup
• A web application that combines data from more than one source into a single integrated tool. Its a web
page that provides a new service using its own data and data from other sources. It must access third
party data and process that data to add value. [Wikipedia]
• A web application that takes information from one or more sources and presents it in a new way or with a
unique layout. It is a web site that combines content data from more tha one source to create a new user
experience. [About.com]
• A new service, that combines functionality or content from existing sources.
These existing sources can be Web Services, RSS feeds or just other Websites. [Blog the Web]
Mashup
• Content from a variety of sources mashed together to produce a brand new dataset
• What you are o?ering is a new service that produces richer datasets
• Concerns about privacy, the protection of intellectual property, and the ethics of sharing and borrowing
informaDon from online sourcesWeb Mashup architectures
• A web application that combines data from more than one source into a single integrated tool. Its a web
page that provides a new service using its own data and data from other sources. It must access third party
data and process that data to add value. [Wikipedia]
• A web application that takes information from one or more sources and presents it in a new way or with a
unique layout. It is a web site that combines content data from more tha one source to create a new user
experience. [About.com]
• A new service, that combines functionality or content from existing sources.
These existing sources can be Web Services, RSS feeds or just other Websites. [Blog the Web]
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
• O?er new ways to explore design spaces and to rapidly create innovative prototypes


Pengantar Teknologi Web 5

.
Server-side Technologies

Server side technologies
• Hardware:
– Server
• Software:
– Web server
– Server side Programming Tools
– Utility Programming Tools
– Database Server




Web Server vs Web Application
• Web Application:
– Menggunakan bahasa Pemprograman(misal ASP, PHP, Java, .Net, Perl atau .NET)
• Web Server:
– Melayani permintaan client dan meneruskan ke aplikasi yang sesuai selanjutnya diproses oleh aplikasi yang sesuai (misal IIS, Apache, thttpd dll.)
• Web Application tidak bisa jalan tanpa Web Server
• Web Server bisa bekerja tanpa Web Application (Tapi hanya bisa melayani web dengan content statis)



Web Server
• Web Server: apache, xitami, PWS, IIS
• Biasanya diinstall bersama dengan PHP dan MySQL => ApacheTriad
– Aplikasi free, ukuran cukup besar
– Tidak perlu konfigurasi
• Hanya perlu user & password apache dan MySQL
• Bisa diinstall di Linux (XAMPP) dan Windows (WAMPP)



File konfigurasi Web Server
• httpd.conf
• srm.conf
• access.conf
• Juga perlu setting:
– Virtual Host

Httpd.conf
• ServerType – berdiri sendiri / manual inetd.
• ServerRoot – directory konfigurasi.
• PidFile – nomor proses ID
• ResourceConfig / AccessConfig
• TimeOut – batas waktu time out.
• KeepAlive – simultan koneksi dari satu IP.
• MaxKeepAliveRequest – max. keep alive.
• KeepAliveTimeOut

Httpd.conf
• MinSpareServers & MaxSpareServers – jumlah server untuk server farm.
• StartServers – server di jalankan.
• MaxClients – jmlh koneksi simultan di server.
• MaxRequestsPerChild
• BindAddress – IP yang di tempelkan.
• Port – port yang di dengar Apache.
• User & Group – owner dari Apache Web.
• ServerAdmin – e-mail admin Web server.

httpd.conf
• ServerName – nama server.
• ErrorLog
• LogLevel – level emerg, alert, crit, errors.
• CustomLog – catat akses client & virtual host.
• ServerSignature – dikirim saat file tidak ada.
• UserCanonicalName
• HostnameLookups – catat hostname akses.

srm.conf
• DocumentRoot – directory root HTML.
• UserDir – public_html, http://server/~user.
• DirectoryIndex – index file.
• FancyIndexing
• AccessFileName - .htaccess
• Alias – alias directory khusus, cgi-bin
• DefaultType – Default tipe dokumen

access.conf

Options FollowSymLinks
AllowOverride None


Options Indexes FollowSymLinks
AllowOverride None
Allow from all


Virtual Host – IP based

DocumentRoot /path/to/document
ServerName www.vhost1.com


Virtual Host – name based
NameVirtualHost 192.168.0.128

DocumentRoot /path/to/document1
ServerName www.vhost1.com


DocumentRoot /path/to/document2
ServerName www.vhost2.com


Susunan directory
• bin à file-file program
• build
• cgi-bin à script cgi
• conf à tempat konfigurasi
• error à error message
• htdocs à dokumen yang akan dipublish
• icons à gambar-gambar kecil
• include
• lib
• logs
• man à manual pages
• manual à dokumentasi
• modules à module

Server side programming
• Bahasa: PHP, ASP classic, ColdFusion, ASP.NET, JSP / JSF, Ruby on Rails
• PHP: PHP Hypertext Preprocessors
• Gratis dari www.php.net
• Mirip dengan bhs Java dan C
• Bhs scripting yg paling populer
• Rasmus Lerdorf, Andi Gutmans, Zeev Suraski

How PHP works?
• User mengetikkan suatu alamat:
– http://www.example.com/login.php
• Dilakukan DNS – Routing
• Diterima oleh web server (mis: Apache)
• Karena merupakan script PHP, maka isi script PHP diparsing dan diproses oleh interpreter php, dan dikembalikan dalam bentuk teks HTML
• Teks HTML dikembalikan ke user dan ditampilkan di browser

Why is PHP used?
1. Easy to Use
Code is embedded into HTML. The PHP code is enclosed in special start and end tags that allow you to jump into and out of "PHP mode".


Example



echo "Hi, I'm a PHP script!";
?>




Why is PHP used?
2. Cross Platform
Runs on almost any Web server on several operating systems.
One of the strongest features is the wide range of supported databases
Web Servers: Apache, Microsoft IIS, Caudium, Netscape Enterprise Server

Operating Systems: UNIX (HP-UX,OpenBSD,Solaris,Linux), Mac OSX, Windows NT/98/2000/XP/2003

Supported Databases: Adabas D, dBase,Empress, FilePro (read-only), Hyperwave,IBM DB2, Informix, Ingres, InterBase, FrontBase, mSQL, Direct MS-SQL, MySQL, ODBC, Oracle (OCI7 and OCI8), Ovrimos, PostgreSQL, SQLite, Solid, Sybase, Velocis,Unix dbm

Why is PHP used?
3. Cost Benefits
PHP is free. Open source code means that the entire PHP community will contribute towards bug fixes. There are several add-on technologies (libraries) for PHP that are also free.







PHP Script




Komentar
• Tanda //,digunakan untuk komentar satu baris
• Tanda /* dan */, digunakan untuk mengawali dan mengakhiri komentar
• Tanda #, digunakan untuk komentar satu baris

Tipe data
• Tipe Skalar:
– boolean
– integer
– floating-point number (float)
– string
• Tipe Compound:
– array
– object
• Tipe Special:
– NULL
• Tipe Boolean:
– TRUE / FALSE
Tipe Data Numerik
• Numerik Bulat
• Desimal (base-10)
• Oktal (base-8, diawali 0 [nol])
• Hexadesimal (base-16, diawali 0x [nol x])
• Lebar 32 bit

Tipe Data Float
• Angka Desimal
• Lebar 64 bit
• Maksimum ~1.8e308
• Presisi 14



Konstanta
define(“USERNAME”,”Antonie”);
echo “User Name :”.USERNAME;
?>


Konversi String ke Angka
• Contoh:
– $a = 1 + “10.5”;
– $a = 1 + “-1.3e3”;
– $a = 1 + “bob-1.3e3”;
– $a = 1 + “bob3”;
– $a = 1 + “10 ayam kate”;
– $a = 1 + “10.2 ayam kate”;
– $a = “10.0 ayam” + 1;


Operator
• Arithmetic (+, -, *, /)
• Concatenation (.)
• Assigment(+=, -=, /=, *=, %=, .=)
• Comparison (==, !=, >, <, >=, <=)
• Logical (||, &&, !)















Custom Array
• Contoh pembuatan array dengan custom key
// This array is the same as ...
array(5 => 43, 32, 56, "b" => 12);
// ...this array
array(5 => 43, 6 => 32, 7 => 56, "b" => 12);
?>
• Size of array is not defined
• If you add a new element the maximum of the integer indices is taken, and the new key will be that maximum value + 1



Foreach (1)
$arr = array("one", "two", "three");
reset($arr);
while (list($key, $value) = each ($arr)) {
echo "Key: $key; Value: $value
\n";
}
foreach ($arr as $key => $value) {
echo "Key: $key; Value: $value
\n";
}
?>

Foreach (2)
$arr = array("one", "two", "three");
reset ($arr);
while (list(, $value) = each ($arr)) {
echo "Value: $value
\n";
}
foreach ($arr as $value) {
echo "Value: $value
\n";
}
?>


Contoh
$city[0]="Jogja";
$city[1]="Bandung";
$city[3]="Surabaya";
$strgabung = implode("-",$city);
echo "Stlh digabung: ".$strgabung."
";
$cityarray = explode("-",$strgabung);
foreach ($cityarray as $key=>$value){
echo "Array ke-".$key." = ".$value."
";
}
?>

NULL
• NULL menyatakan variabel yang tidak ada nilainya
• Sebuah variabel NULL, jika
– Dinyatakan sebagai NULL dengan opertor =
– Belum pernah diberikan suatu nilai literal
– Telah di unset()
• Untuk mengecek apakah variabel NULL atau tidak, dapat digunakan fungsi is_null()




Array global
• $_GET[“varname”]
• $_POST[“varname”]
• $_SESSION[“varname”]
• $_COOKIE[“varname”]
• $_REQUEST[“varname”]
• $_FILES[“varname”]

Session
• session_start() //dipaling atas
• session_register()
• session_unregister(
• if (session_is_registered())
• unset()
• session_destroy()

File upload
• If(copy(source, destination))

SERVER variable
• $_SERVER is an array containing information such as
– Headers
– Paths
– Script locations
• The entries in this array are created by the webserver. There is no guarantee that every webserver will provide any of these; servers may omit some, or provide others



SERVER variable
• $_SERVER is an array containing information such as
– Headers
– Paths
– Script locations
• The entries in this array are created by the webserver. There is no guarantee that every webserver will provide any of these; servers may omit some, or provide others
• 'argv'
– Array of arguments passed to the script. When the script is run on the command line, this gives C-style access to the command line parameters. When called via the GET method, this will contain the query string.
• 'argc'
– Contains the number of command line parameters passed to the script (if run on the command line).

SERVER variable
• 'REMOTE_ADDR'
– The IP address from which the user is viewing the current page.
• 'REMOTE_HOST'
– The Host name from which the user is viewing the current page. The reverse dns lookup is based off the REMOTE_ADDR of the user.
• 'REMOTE_PORT'
– The port being used on the user's machine to communicate with the web server.
• $_COOKIE
– An associative array of variables passed to the current script via HTTP cookies. Automatically global in any scope.
• $_POST
– An associative array of variables passed to the current script via the HTTP POST method.

Pengantar Teknologi Web 4

.
JavaScript
Antonius Rachmat C
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
• client-side programming
– programs are written in a separate programming language
e.g., JavaScript, JScript, VBScript
? programs are embedded in the HTML of a Web page, with tags to identify the program component
e.g.,
? the browser executes the program as it loads the page, integrating the dynamic output of the program with the static content of HTML
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
JavaScript: the first Web scripting language, developed by Netscape in 1995
• syntactic similarities to Java/C++, but simpler & more flexible
– (loose typing, dynamic variables, simple objects)
JScript: Microsoft version of JavaScript, introduced in 1996
• same core language, but some browser-specific differences
• fortunately, IE & Netscape can (mostly) handle both JavaScript & JScript
• JavaScript 1.5 & JScript 5.0 cores conform to ECMAScript standard
VBScript: client-side scripting version of Microsoft Visual Basic
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
• limitations of client-side scripting
– since script code is embedded in the page, viewable to the world
– for security reasons, scripts are limited in what they can do
e.g., can't access the client's hard drive
? since designed to run on any machine platform, scripts do not contain platform specific commands
? script languages are not full-featured
e.g., JavaScript objects are crude, not good for large project development



Mencetak di halaman Web






























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)



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



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