Web Information System

A web information system uses (1) the web browser to deliver services, (2) the web server to process requests, and (3) the Internet to communicate between clients and servers. Such a system is built on top of other software systems: web browser, web server, and database systems. A web developer needs the following programming skills to build a web information system:

  • client-side: HTML, CSS, JavaScript
  • server-side: PHP (or other scripting languages)
  • database: SQL

And of course, system design skill is important at a higher level.

Client-Side

A web application uses web browsers for its presentation; this is different from desktop and mobile applications. As such, the power of web browsers actually limits the capability of web applications. Traditionally, this limitation hinders the development of web applications. Web browsers were considered to be slow (IE was dominating the web browser market), not interactive, lacks of graphics (that’s why Flash exists), having no persistent storage, and not compatible with each other. However, time has changed. Over the recent years, some major changes on browsers enable the flourishing of web applications.

  • The major players (IE, Firefox, Chrome, Safari, Opera, and W3C) stopped fighting with each other and began to agree on the common standards (HTML5 and CSS3).
  • Web browsers adopt more powerful features, especially on interactions and graphics.
  • Web browsers are much faster, which makes the advanced features practical.

At the current stage, the major browser technologies are HTML (HyperText Markup Language), CSS (Cascading Style Sheet), and Javascript. In contrast, some other technologies are gradually out of fashion: Java Applets, Abobe Flash.

HTML, CSS and JavaScript work together to present a web page.

  • HTML marks up the semantics of the contents, for example, headers, tables, lists, images, sections, etc.
  • CSS handles the presentation of a page. It defines the styles of HTML components, such as fonts, font sizes, colors, alignment, positioning, etc.
  • JavaScript handles the interactions between the user, the web page, and the web server. For example, when a user clicks on a page, JavaScript may tell the browser to change the web page, or notice the server about the change.

As an example, Google Maps is a web mapping application which allows users to use web browsers to navigate a map. At the presentation level, Google divides the whole map into small squared images, and uses HTML and CSS to lay out and combine the small images together to reconstruct the map. Then, when a user drags or clicks on the map, JavaScript handles the action and changes the map accordingly; in the meantime, JavaScript may communicate with the server to retrieve some new information.

Server-Side

When a user issues a request from the web browser (such as requesting a web page via a URL), the request is delivered through the Internet and then handled by a specific web server. The web server will send a response (such as a web page) back to the web browser according to the request. Finally, the web browser processes the response (displays the web page). The communication between the browser and the server usually uses the Hypertext Transfer Protocol (HTTP); this is automatically handled by the Internet infrastructure.

If the requests are for static files (such as html or image files), the server will directly deliver the content. Otherwise, web developers need write programs to dynamically generate web contents based on the requests. This is where server-side programming is needed. There are many server-side scripting languages: ASP, PHP, Python, Perl, etc.

A dynamic webpage (such as a .php file) often has two parts: a HTML skeleton, and some code generating the dynamic contents. The code will usually analyze the request parameters, retrieve some data from the database, and generate dynamic HTML contents which are embedded into the HTML skeleton.

Database

Most major web applications these days maintain big databases. Data often lies in the heart of web services; but oftentimes, the data processing capability is also the bottleneck of the system. It’s important to have databases that are both big and efficient.

Relational database management systems (RDBMS) are still the first choice on data storage for most web applications. MySQL and PostgreSQL are two major open source RDBMS. The major advantage of RDBMS is that they provide a standard querying language SQL. Using SQL, the programmers only need specify what they want from the data; the database system will automatically find the most efficient way to get the result. This significantly reduces the development burden for programmers.

Web Application Framework

Developing web applications costs time and money. However, web applications do share many common functionalities and issues. For example,

  • client-side: browser compatibility, AJAX
  • server-side: user registration, content management

Over the years, many open-source web application frameworks have been created to help developers to quickly deploy a web application. These frameworks provide modularized libraries to handle common issues of almost all web applications. Finding a suitable framework (or combining several frameworks) is often the starting point of web application development.

References

Web application
Web application framework
Content management system

Comments

comments