1 of 31

Chapter 1: Web Application Basics

  • Web system
  • HTTP
  • Domain names
  • HTML
  • Web application
  • Dynamic client and dynamic server

2 of 31

Basic Web System

3 of 31

Fundamental of web system

  • User enter the required document (web pages) and the host of where it can be found
  • The browser sends a request with special format
  • The request is handled by web server.
  • The web server receive the request, locates the document on its local file system and sends it back to the browser.

​

​

​

​

​

​

4 of 31

Document Identification - URL

  • The full identifier for referencing and obtaining the document is called a Uniform Resource Locator
  • It consists of 4 elements
    1. The protocol
    2. Host machine name
    3. Optional port number
    4. Document name/location
  • Example:

http://www.utusan.com.my/index.html

http://www.utusan.com.my:80/index.html

​

5 of 31

HTTP

  • The network protocol of the Web which specifies how a browser should format and send request to a web and vice versa
  • A request line format has 3 parts, separated by spaces:
    1. A method name
    2. The local path of the requested resource
    3. The version of HTTP being used

​

A typical request line is

GET /path/to/file/index.html HTTP/1.0

6 of 31

HTTP

  • The initial response line format, called the status line, also has three parts separated by spaces:
    1. The HTTP version
    2. A response status code that gives the result of the request
    3. An English reason phrase describing the status code

Typical status lines are:

HTTP/1.0 200 OK

or

HTTP/1.0 404 Not found

7 of 31

URL- Domain Names

  • A domain name is simply the textual name used to lookup a numeric internet address.
  • When a client requests a URL, the request must be resolved into a numeric IP address. For example:
  • This process is done with a DNS (domain name server).
  • A DNS is a network computer that the client has access to and that has a known IP address
  • Network infrastructure software on the client has access to and that has a known IP address
  • Network infrastructure software on the client knows how to request the IP address from a DNS
  • DNS is normally controlled by ISP

8 of 31

What is this?

9 of 31

Fundamental of HTML

  • What is an HTML File?
    • HTML stands for Hyper Text Markup Language
    • An HTML file is a text file containing small markup tags
    • The markup tags tell the Web browser how to display the page
    • An HTML file must have an htm or html file extension
    • An HTML file can be created using a simple text editor

​

10 of 31

Do you want to try it?

  • If you are running Windows, start Notepad.
  • Type in the following text:

​

​

​

​

  • Save the file as "mypage.htm". 
  • Start your Internet browser. Select "Open" (or "Open Page") in the File menu of your browser. A dialog box will appear. Select "Browse" (or "Choose File") and locate the HTML file you just created - "mypage.htm" - select it and click "Open". Now you should see an address in the dialog box, for example "C:\MyDocuments\mypage.htm". Click OK, and the browser will display the page.

11 of 31

HTML elements

  • This is an HTML element:

​

​

  • The HTML element starts with a start tag: <b>�The content of the HTML element is: This text is bold
  • The HTML element ends with an end tag: </b>
  • The purpose of the <b> tag is to define an HTML element that should be displayed as bold.

12 of 31

Tag Attributes

  • Tags can have attributes. Attributes provide additional information to an HTML element.
  • The following tag defines an HTML table: <table>
  • With an added border attribute, you can tell the browser that the table should have no borders: <table border="0">
  • Attributes always come in name/value pairs like this: name="value".
  • Attributes are always specified in the start tag of an HTML element.

13 of 31

The Anchor Tag and the Href Attribute

  • HTML uses the <a> (anchor) tag to create a link to another document.
  • An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc.
  • The syntax of creating an anchor:

​

  • The <a> tag is used to create an anchor to link from, the href attribute is used to address the document to link to, and the words between the open and close of the anchor tag will be displayed as a hyperlink.
  • This anchor defines a link to W3Schools: 

14 of 31

HTML Forms and Input

  • HTML Forms are used to select different kinds of user input.
  • Examples
    • Text fields�This example demonstrates how to create text fields on an HTML page. A user can write text in a text field.
    • Password fields�This example demonstrates how to create a password field on an HTML page.

15 of 31

Examples: text fields

16 of 31

Example: password fields

17 of 31

Forms

  • A form is an area that can contain form elements.
  • Form elements are elements that allow the user to enter information (like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a form.
  • A form is defined with the <form> tag.

18 of 31

Form: Input

  • The most used form tag is the <input> tag. The type of input is specified with the type attribute. The most commonly used input types are explained below.
  • Text Fields
    • Text fields are used when you want the user to type letters, numbers, etc. in a form.

19 of 31

Form: Radio Buttons

  • Radio Buttons are used when you want the user to select one of a limited number of choices.

20 of 31

Form: Checkboxes

  • Checkboxes are used when you want the user to select one or more options of a limited number of choices.

21 of 31

Form: Action Attribute and the Submit Button

  • When the user clicks on the "Submit" button, the content of the form is sent to another file. The form's action attribute defines the name of the file to send the content to. The file defined in the action attribute usually does something with the received input.

22 of 31

Web applications

  • An application server that uses a Web server for user input—allows business logic to be affected via Web browsers

​

23 of 31

Dynamic Client

24 of 31

Dynamic Client

25 of 31

Dynamic Server

26 of 31

Dynamic Server

  • Explanation from previous example

​

27 of 31

Dynamic Server

28 of 31

Dynamic Content

29 of 31

Data Storage

  • Data storage can be divided into two:DBMS and File
  • Example of DBMS are: Sybase, mSQL, MySQL,Oracle, PorstgresSQL, dBase, SQLite,

MS-SQL

  • Physical database must be located at the data root of DBMS
  • The common steps of manipulation data from a DBMS
    1. Open a connection to the DBMS
    2. Specify the required database
    3. Issues queries, access query results and perform non-SQL operation
    4. Close the connection.

30 of 31

HTTP communication – Main Focus

​

​

​

​

​

​

​

​

​

​

We will focusing Apache as Web server, PHP as the parser and MySQL as data storage

31 of 31

Chapter 1: Review

  • Web systems are hypertext document systems that are relatively new to the computing world.
  • The fundamental elements of a Web system are the client browser, the network, and a Web server.
  • A Web application is a Web system that delivers business logic.
  • HTTP is the primary protocol for communication between clients and servers.
  • Web pages are documents that are requested by the client and delivered by the Web server.