Introduction to Web Programming Muhammad Arief D2856

Tata Tertib Absen dan Kehadiran wajib. Tugas/Projek harus dilakukan. Tidak menggunakan laptop dikelas tanpa seijin dosen. Setiap pertemuan akan ada kuis ( menit)

Focus HTML, CSS, XML JavaScript Internet, WWW Protocol JDBC Session tracking, cookies Design Pattern, Struts Framework Servlet / JSP  J2EE, J2SE  HADIR KULIAH !!!!

Bahan Tambahan

TIOBE Programming Community Index for August 2007 indication of the popularity of programming languages.

Java World

TOC Web Evolution Web Architecture Web Application Programming Language and Development Tools Design Pattern and Framework Summary

Internet History PastPresent Future

Internet History 1957 : Advanced Research Projects Agency (ARPA) : Dr. J.C.R. Licklider was chosen to head ARPA’s research in improving the military’s use of computer technology : ARPANET : Multiple network packet-switching technology experiment.

Internet History 1983 : TCP/IP had become the standard communication protocol : NSFNET from National Science Foundation : WWW introduced by Tim Berners- Lee 1991 : Commercial Internet Exchange / CIX, the first commercial Internet Providers : Mosaic, University of Illinois at Champaign-Urbana.

Who Uses The Internet ?  Institutions of all kinds - commercial, academic, and government  Professional communities of all kinds - especially research and development organizations  Business enterprises which specialize in providing or collecting information and marketing  General public via local access providers and gateways to commercial public carriers and other kinds of networks

Business and Internet Information distribution tools Advertising tools Marketing tools To offer Information To access Information To transfer Information

Internet as Advertisement and Marketing tools World Wide Web as interactive billboard to the world. as tool for finding businesses on the Internet. As a media to market their product File Transfer Protocol as an inexpensive method to get information to customer. as an effective customer support tool.

its ability to facilitate global sharing of information and resources. its potential to provide an efficient channel for advertising, marketing and even direct distribution of certain goods and information services. Popularity of WWW as a commercial medium

Web Based Application Evolution Static Web site: company profile, product, contact number etc. Dynamic Web site: supporting products query, personalization Web Services: new paradigm to web programming

Dynamic Web site Web pages that are based on data sent by the user –e.g. search robot results, confirmation of product purchase Web pages derived from frequently-changing data –e.g. weather forecast, news bulletin Web pages presenting database information or information from other server resources –e.g. current price and availability of items in a catalogue

Web Architecture: Two Tiers basic web architecture –A web client: display information content –web server: transfer information to the client. static web pages (documents) are transferred from information servers to browser clients world-wide depend on three key standards: HTML for encoding document content, URLs for naming remote information objects in a global namespace, and HTTP for staging the transfer. extensions that permit three-tiered architectures where content pages can be constructed dynamically and where programs as well as data can be transferred.

Web Architecture: Three Tiers Three Tiers

Web Architecture: Three Tiers Three Tiers

J2EE Technology Servlet: A Servlet is a program that runs on a web server. It acts as a middle layer between: –a request coming from a web browser or other HTTP client and – databases or applications on the HTTP server. JSP / Java Server Pages: It is a technology that allows mixing static HTML with dynamic content generated by servlets. EJB / Enterprise Java Bean: it is a component the provides reusable business logic functionality and/or a representation of a persistent business entity.

Servlets and JSP

Web Technology Database Server Application Server Web Server Firewall SSL HTTPS FTP Domain etc

Firewall A computer or computer software that prevents unauthorized access to private data (as on company LAN or intranet) by outside computer user (as of internet) Reduce possible accesses Examine all the traffics Discard/allow traffic based on certain rules

Firewall

What can a firewall protect against? Unauthenticated interactive logins from the “outside” world Block traffic from the outside to the inside and permit users on the inside to communicate freely with outside  Logging and auditing function

What can’t a firewall protect against? Attacks that don’t go through the firewall Traitors or idiots inside your network Stupidity Windows XP: Start  Control Panel  Network Connections  Right click the connection  Properties  Advance  Firewall

Secure Socket Layer cryptographic protocols that provide secure communications on the Internet for such things as web browsing, , Internet faxing, instant messaging and other data transfers. a low level encryption scheme used to encrypt transactions in higher-level protocols such as HTTP, FTP, Encryption of data in transit, Message integrity, Optional client authentication Proposed by Netscape Communication Corporation  TLS: Transaction Layer Security

Secure Hyper Text Transfer Protocol Web browsers typically use HTTP to communicate with web servers. is not a separate protocol, but refers to the combination of a normal HTTP interaction over an encrypted Secure Sockets Layer (SSL) URL  secure HTTP is to be used Transaction confidentiality, Authentication, Message integrity, non-repudiability of origin Proposed by CommerceNet

Secure System ?

File Transfer Protocol FTP : the tool for transferring files between computers on the Internet.

File Transfer Protocol

Domain Name URL : Uniform Resource Locator, the standard way to give the address of any resource on the Internet. World Wide WebDocument namego: government edu: education id: Indonesia nl: Netherland Company name http: Hypertext Transfer Protocol html: Hyper Text Markup Language Subdomain:

Web Application One stop shopping: Amazon.com Web portal: yahoo.com (entertaiments, finance, , collaborations, searching) B2B portal Banking: online Banking, online payment e-Commerce e-Education

How online Business Transaction works Group Discussion

Programming Language Web Design: HTML Style Sheet (css) XML, XSL, XSLT Language: Client side scripting: VBScript, Java Script Server side scripting: PHP, ASP, JSP Java (J2EE, J2SE): Servlets, JSP, EJB Visual Studio.NET

XML EXtensible Markup Language HTML menentukan tampilan data pada layar tags atau label yang dapat digunakan sudah pasti dan tidak dapat dirubah XML menggambarkan atau mendefinisikan data itu sendiri dapat membuat sendiri tags-nya sehingga dapat semakin meningkatkan fleksibilitas dan memperjelas maksud dari tags tersebut disimpan dalam bentuk text, menjadikan dokumen XML sebagai format yang sangat fleksibel untuk pertukaran informasi antar sistem

Example: XML File Jim John Reminder Send the letter to Jeff!

Persyaratan dokumen XML Dokumen harus well-formed: sesuai dengan sintaks tertentu Dokumen harus valid: well-formed dan sesuai dengan sebuah skema XML tertentu.

Example: XML Schema

Development Tools Content Authoring: Notepad MS Frontpage Macromedia Dreamweaver Programming (IDE): Java: eclipse, netbeans, JDeveloper.NET: Visual Studio.NET

Design Pattern Elements of Reusable Object-Oriented Software is a general repeatable solution to a commonly occurring problem in software design. is not a finished design that can be transformed directly into code. is a description or template for how to solve a problem that can be used in many different situations. can give us practically way to build good application as a “proven recipe” for how to designing program

Framework reusable design for a software system (or subsystem). expressed as a set of abstract classes and the way their instances collaborate for a specific type of software. object-oriented designs. include support programs, code libraries, a scripting language, or other software to help develop and glue together the different components of a software project. Framework simply accelerate web development by providing skeleton, unfortunately framework is not easy to learn for a new beginner  learning curve Framework = software components + design patterns

Examples Java Framework: Struts Hibernate Spring PHP Framework: Symfony Framework Zoop framework Zend Framework

Advantages Membantu mengembangkan aplikasi dengan konsep MVC (Model-View-Controller), karena memisahkan aplikasi web menjadi model bisnis, aplikasi server dan antarmuka. Memiliki banyak tools dan classes dengan tujuan untuk mempersingkat waktu pengembangan dari aplikasi web yang kompleks. Meng-otomatisasi fungsi-fungsi yang berlaku umum, sehingga pengembang dapat memfokuskan diri pada hal- hal yang spesifik dari aplikasi yang sedang dikembangkan. Tidak perlu melakukan ”reinvent the wheel”, setiap mengembangkan aplikasi web baru. Aplikasi yang dikembangkan akan memiliki coding yang konsisten, bugs lebih sedikit dan implementasi yang lebih felksibel. Setiap programmer dapat men-test dan men-debug kode program dengan mudah, meskipun program tersebut dikembangkan oleh orang lain. Meningkatkan integritas dari sistem tersebut.

Client-side Scripting Client-side scripting –Used for: Validation Interactivity Dynamic HTML Java applets Accessing browser –Browser-dependent Scripting language must be supported by browser or scripting host –Viewable on client Protecting source code difficult

Server-side Scripting Server-side scripting –Reside on server  more flexibility Database access –Usually generate custom response for client –Run exclusively on server  cross-platform issues not a concern –Not visible to client Only HTML + client-side scripts sent to client

Advantage Framework simply accelerate web development by providing skeleton, unfortunately framework is not easy to learn for a new beginner  learning curve facilitating software development, by allowing designers and programmers to spend more time on meeting software requirements rather than dealing with the more tedious low level details of providing a working system. allows the developers to spend more time concentrating on the business-specific problem at hand rather than on the plumbing code behind it. limit the choices during development, so it increases productivity, specifically in big and complex systems.