159.339159.339

Quick Tour of the Web Technologies: The BIG picture

LECTURE

A bird’s eye view of the different web technologies that we shall

explore and study.

159.339Client-Server

Client

Web browser

OS

requests an Internet resource byspecifying a URL and providing input via HTTP encoded strings

HTML supports Javascript, DOM, CSS, HTML Events

• Usually we want to open an HTML file from some website, but we can also open a program alternatively.

159.339Client-Server

Client

Web browser

osWeb

server

os

Server

Internet

requests an Internet resource byspecifying a URL and providing input via HTTP encoded strings

Network Core

159.339Client-Server

Client

Web browser

osWeb

server

os

Server

Internet

Server-side program works out the necessary business logic and dynamically builds an HTML response.

159.339Client-Server

Client

Web browser

Web server

Server

Internet

Server-side program sends back output asHTML using HTTP as transport mechanism

159.339Client-Server

Client

Web browser

Web server

Server

Internet

Client-side program (Internet Explorer,Firefox) displays the HTML output

• HTML text• Graphics• Streaming video/audio• XML

159.339Our own webserver

Client

Web browser

Web server HTML

Server

MySQL

Operating System

PHP

Internet

My codes

• Our codes might be embedded into an HTML, or vice-versa. It may generate an HTML on its own as well.

159.339Xitami Webserver• free, fast and open source professional web server, written in

ANSI C

• Server supports HTTP/1.0, FTP, CGI/1.1, SSI protocols

• Security: basic authentication per directory, FTP access rights per user and per directory

• Deployment: installs ready-to-run, portable to Windows, OS/2, Unix, OpenVMS, fully portable web sites and web applications;

• Performance: internal multithreading engine, fast even on slower systems

Documentation: http://legacy.imatix.com/html/xitami/

• Configuration: editable config files, or through a web-based administration interface (WBA)

159.339Simple CGI Demonstration

Let’s have a look at a very simple program (CGI) running in the server side

CGI - The executable file generated out of a C program.

Step 1. Run your webserver.Step 2. Using a browser, request for the HTML file containing our program from the server.

Warning! You should specify the port number used by your webserver!

159.339HTTP Protocol

159.339HTTP and TCP/IP

Client

Web browser

Web server

HTML

Server

MySQL

Operating System

PHP

Internet

My codes

HTTP

TCP/IP

• Webserver supports HTTP.

• HTTP compliancy is implemented using TCP/IP components.

159.339Network Core

Client

Web browser

Web server

HTML

Server

MySQL

Operating System

PHP

Internet

My codes

HTTP

TCP/IP

What’s in the network core?

159.339Validating HTML

Client

Web browser

http://www.w3.org/QA/Tools/

We want to write HTML pages + CSS files that are interoperable across many platforms (OS + web browser combination)

Web server

Server

How to validate your HTML and CSS files?

159.339Editor

phpDesigner Personal Edition

• a free editor for your web-development. 

• rapid fast and full-featured PHP editor and PHP IDE with built-in HTML, CSS and JavaScript editors and FTP/SFTP!

Link: http://www.mpsoftware.dk/

What editor can we use to assist us in writing PHP, Javascript, HTML, CSS files, etc.?

159.339PuTTY

Using a simple tool called PuTTY, examine the HTTP protocol in action when a web client interacts with your webserver (Xitami, running in your own machine).

PuTTY is a free implementation of Telnet and SSH for Windows and Unix platforms, along with an xterm terminal emulator. It is written and maintained primarily by Simon Tatham.

Is your server running properly? What was the server’s response?

Which port number is open? netstat -anop TCP

What is the IP address of your machine? Ipconfig /all

http://surf11.com/entry/176/command-to-show-open-tcp-ports-windows

159.339What’s next?

We shall be looking at all the details of prominent internet programming languages and technology but we shall study how to write HTML and CSS documents first.

Next meeting, I shall provide a good background on the nuts and bolts of the internet so that you may have knowledge of the essential protocols that will be interacting with our web server.

159.339Servlets

Servlets run inside a Web Container - the component of the web server that runs and interacts with servlets

CLIENT

159.339Servlets

Servlets run inside a Web Container - the component of the web server that runs and interacts with servlets

Servlet is running on the server listening for requestsWhen a request comes in, a new thread is generated by the web container.

HTML, WML, XML

CLIENT

159.339NetBeans

• Servlets go into a specific directory structure.

• NetBeans will create that for you.

• Compile, load, deploy your servlets.

Link: http://netbeans.org/downloads/

159.339JSP

– Have different members of your team work on the HTML layout and do the Java programming

JSP encourages you to:

– Separate the (Java) code that creates the content from the (HTML) code that presents it

159.339JSP vs. Competing tech.

• JSP vs PHP– Much richer language for the dynamic part– Better tool support– More resource efficient

• JSP vs pure servlets– More convenient to create HTML– Can use standard tools– Divide and conquer

• JSP vs client-side Javascript– You control the server, not the client

• JSP vs .NET– Open standards: Portable to multiple servers and operating systems

• JSP vs static HTML– Obvious!