Advanced Web Programming Fundamentals of Web Programming

Fundamentals of Web Programming

The Internet

sometimes called simply "the Net," is a worldwide system of computer networks - a

network of networks.

It was conceived by the Advanced Research Projects Agency (ARPA) of the U.S.
government in 1969 and was first known as the ARPANet. The original aim was to
create a network that would allow users of a research computer at one university to
"talk to" research computers at other universities. A side benefit of ARPANet's design
was that, because messages could be routed or rerouted in more than one direction, the
network could continue to function even if parts of it were destroyed in the event of a
military attack or other disaster.

HTTP (Hypertext Transfer Protocol)

Hypertext Transfer Protocol (HTTP) is the main access protocol of the World Wide
Web. Web services also use HTTP to allow software systems to communicate in order
to share and exchange business logic and data.

HTTP is the protocol to exchange or transfer hypertext. Hypertext is structured text

that uses logical links (hyperlinks) between nodes containing text.

The client submits an HTTP request message to the server. The server, which provides
resources such as Web pages and other content, or performs other functions on behalf
of the client, returns a response message to the client. The response contains
completion status information about the request and may also contain requested
content in its message body.

World Wide Web - www - (web)

World Wide Web is: all the resources and users on the Internet that are using the
Hypertext Transfer Protocol (HTTP).
Your Web browser is an HTTP client, sending requests to server machines. When the
browser user enters file requests by either "opening" a Web file (typing in a Uniform
Resource Locator or URL) or clicking on a hypertext link, the browser builds an HTTP
request and sends it to the Internet Protocol address (IP address) indicated by the URL.

A Web server

It is a program that uses HTTP (Hypertext Transfer Protocol) to serve the files that
form Web pages to users, in response to their requests, which are forwarded by their

College of Comp. & IT – Hadhramout Univ. 1 Mr. Khaled Abdulaziz Bawazir

Advanced Web Programming Fundamentals of Web Programming

computers' HTTP clients. Dedicated computers and appliances may be referred to as

Web servers as well.

All computers that host Web sites must have Web server programs. Leading Web
servers include Apache (the most widely-installed Web server), Microsoft's Internet
Information Service (IIS), Google Web Server (GWS).

URL
It is the abbreviation of Uniform Resource Locator.
It is the global address of documents and other resources on the World Wide Web. For
example, www.webopedia.com is a URL.
Parts of a URL
The first part of the URL is called a protocol identifier and it indicates what protocol to
use, and the second part is called a resource name and it specifies the IP address or
the domain name where the resource is located.

Ports
Any server machine makes its services available to the Internet using numbered ports,
one for each service that is available on the server. For example, if a server machine is
running a Web server and an FTP server, the Web server would typically be available
on port 80, and the FTP server would be available on port 21. Clients connect to a
service at a specific IP address and on a specific port.

Each of the most well-known services is available at a well-known port number. Here
are some common port numbers:

• echo 7
• daytime 13
• qotd 17 (Quote of the Day)
• ftp 21
• telnet 23
• smtp 25 (Simple Mail Transfer, meaning e-mail)
• time 37
• nameserver 53
• nicname 43 (Who Is)
• gopher 70
• finger 79
• HTTP (www) 80

College of Comp. & IT – Hadhramout Univ. 2 Mr. Khaled Abdulaziz Bawazir

Advanced Web Programming Fundamentals of Web Programming

If the server machine accepts connections on a port from the outside world, and if
a firewall is not protecting the port, you can connect to the port from anywhere on the
Internet and use the service. Note that there is nothing that forces, for example, a Web
server to be on port 80. If you were to set up your own machine and load Web server
software on it, you could put the Web server on port 918, or any other unused port, if
you wanted to. Then, if your machine were known as xxx.yyy.com, someone on the
Internet could connect to your server with the URL http://xxx.yyy.com:918. The
":918" explicitly specifies the port number, and would have to be included for someone
to reach your server. When no port is specified, the browser simply assumes that the
server is using the well-known port 80.

Domain Names
Used in URLs to identify particular Web pages. For example, in the URL:
http://www.pcwebopedia.com/index.html, the domain name ispcwebopedia.com.
Every domain name has a suffix that indicates which top level domain (TLD) it
belongs to. There are only a limited number of such domains. For example:
• gov - Government agencies
• edu - Educational institutions
• org - Organizations (nonprofit)
• mil - Military
• com - commercial business
• net - Network organizations
• ca – Canada

What is DNS?

DNS stands for Domain Name System. When someone types in your domain name,
(www.example.com), your browser will ask the Domain Name System to find the IP
that hosts your site. When you register your domain name, your IP address should be
put in a DNS along with your domain name. Without doing it your domain name will
not be functioning properly.

Internet Service Provider (ISP)

Your computer connects to the Internet through a system of computers at your Internet
Service Provider (ISP). It connects to other networks of computers to provide you with
access to the Internet. The ISP provides a bridge between your computer and all the
other computers in the world, which are all a part of the Internet. These standardized
methods for transferring data or documents over a network are known as protocols.

College of Comp. & IT – Hadhramout Univ. 3 Mr. Khaled Abdulaziz Bawazir

Advanced Web Programming Fundamentals of Web Programming

The ISP uses the TCP/IP (Transmission Control Protocol and the Internet
Protocol) to make computer-to-computer connections possible and transmit data
between them. When successfully connected to an ISP, you are assigned an IP
address, which is a unique address given to your computer or network and allows it to
be found while on the Internet.

Protocols

• HTTP (Hypertext Transfer Protocol)

• Protocol for accessing World Wide Web documents
• FTP (File Transfer Protocol)
• Protocol for transferring files from one computer to another
• Telnet
• Protocol that allows users to logon to a remote computer

The Web Components

On the simplest level, the Web physically consists of the following components:

• Your personal computer: This is the PC at which you sit to see the web.
• A Web browser: A software installed on your PC which helps you to browse
the Web.
• An Internet connection: This is provided by an ISP and connects you to the
internet to reach to any Website.
• A Web server: This is the computer on which a website is hosted.
• Routers & Switches: They are the combination of software and hardware who
take your request and pass to appropriate Web server.

The Web is known as a client-server system. Your computer is the client and the
remote computers that store electronic files are the servers.

College of Comp. & IT – Hadhramout Univ. 4 Mr. Khaled Abdulaziz Bawazir

Advanced Web Programming Fundamentals of Web Programming

How the Web Works

1. A user enters a URL into a browser (for example, google.com). This request is
passed to a domain name server.
2. The domain name server returns an IP address for the server that hosts the
Website.
3. The browser requests the page from the Web server using the IP address
specified by the domain name server.
4. The Web server returns the page to the IP address specified by the browser
requesting the page.
5. The page may also contain links to other files on the same server, such as
images, which the browser will also request.
6. The browser collects all the information and displays to your computer in the
form of Web page.

Static Web Pages

Static Web pages display the exact same information whenever anyone visits it. Static
Web pages do not have to be simple plain text. They can feature detailed multimedia
design and even videos. However, every visitor to that page will be greeted by the
exact same text, multimedia design or video every time he visits the page until you
alter that page's source code.

Advantages of static websites

▪ Quick to develop.
▪ Cheap to develop.
▪ Cheap to host.
Disadvantages of static websites
▪ Requires web development expertise to update site.
▪ Site not as useful for the user.

Dynamic Web Pages

Dynamic Web pages are capable of producing different content for different visitors
from the same source code file. The website can display different content based on
what operating system or browser the visitor is using, whether she is using a PC or a
mobile device, or even the source that referred the visitor. A dynamic Web page is not
necessarily better than a static Web page. The two simply serve different purposes.

College of Comp. & IT – Hadhramout Univ. 5 Mr. Khaled Abdulaziz Bawazir

Advanced Web Programming Fundamentals of Web Programming

Advantages of dynamic websites

▪ Much more functional website.
▪ Much easier to update.
▪ New content brings people back to the site and helps in the search engines.
▪ Can work as a system to allow staff or users to collaborate.
Disadvantages of dynamic websites
▪ Slower / more expensive to develop.
▪ Hosting costs a little more.

Scripts
A script or scripting language is a set of instructions, is a computer language with a
series of commands within a file that is capable of being executed without being
compiled. For Web pages they are instructions either to the Web browser (client-side
scripting) or to the server (server-side scripting). These are explained more below.
Scripts provide change to a Web page. Think of some Web pages you have visited.
Any page which changes each time you visit it (or during a visit) probably uses
scripting.

All log on systems, some menus, almost all photograph slideshows and many other
pages use scripts. Google uses scripts to fill in your search term for you, to place
advertisements, to find the thing you are searching for and so on. Amazon uses
scripting to list products and record what you have bought.

1. Client-side
The client is the system on which the Web browser is running. JavaScript is the main
client-side scripting language for the Web. Client-side scripts are interpreted by the
browser. The process with client-side scripting is:
• The user requests a Web page from the server.
• The server finds the page and sends it to the user.
• The page is displayed on the browser with any scripts running during or after
display.

So client-side scripting is used to make Web pages change after they arrive at the
browser. It is useful for making pages a bit more interesting and user-friendly. It can
also provide useful gadgets such as calculators, clocks etc. but on the whole is used for
appearance and interaction.
Client-side scripts rely on the user's computer. If that computer is slow they may run
slowly. They may not run at all if the browser does not understand the scripting

College of Comp. & IT – Hadhramout Univ. 6 Mr. Khaled Abdulaziz Bawazir

Advanced Web Programming Fundamentals of Web Programming

language. As they have to run on the user's system the code which makes up the script
is there in the HTML for the user to look at (and copy or change).

HTML

HTML is short for "Hypertext markup language". HTML is used to structure the layout
of a web page, by using a wide range of tags and attributes - HTML is called a markup
language. Tags in HTML consists of "<" and ">". What is in between these two angle
brackets is the tag type. HTML is relatively easy to learn, as the codes are pretty
straight forward and self-evident. In HTML there are always an opening tag <> and a
closing tag </>. In between this you can write text, other types of codes or even other
HTML tags if you like. All content between the start and end tag is called element
content.

CSS

CSS is short for "Cascading Style Sheets". CSS is used to style and display the layout
of your HTML web pages. You can almost describe CSS as being your site decorator.
CSS consist of more than 100 different declarations and styles, which make it possible
for you to change the font, font size, colors, background colors or pictures, margins,
heights, widths, lines etc. of your HTML layout. CSS basically makes it possible for
you to easily create colorful and beautiful looking websites.
CSS is for page layout while HTML is for page structuring.

JavaScript

JavaScript is a client side scripting language which is written directly on your HTML
pages. Javascript is used to make your web pages interactive and dynamic (your page
content can be changed according to input from your visitors). You can as an example
with Javascript create pop up messages, a personal visitor greeting, an online
calculator, a hit counter, user warnings and much more.

2. Server-side
The server is where the Web page and other content lives. The server sends pages to
the user/client on request. The process is:

• The user requests a Web page from the server.

• The script in the page is interpreted by the server creating or changing the page
content to suit the user and the occasion and/or passing data around.
• The page in its final form is sent to the user and then cannot be changed using
server-side scripting.

College of Comp. & IT – Hadhramout Univ. 7 Mr. Khaled Abdulaziz Bawazir

Advanced Web Programming Fundamentals of Web Programming

The use of HTML forms or clever links allow data to be sent to the server and
processed. The results may come back as a second Web page.

PHP

PHP stands for "Hypertext Preprocessor". PHP is much like Javascript in terms of
syntax - So if you already know Javascript you will have no problem learning PHP.
The biggest difference between PHP and Javascript is that PHP is a server side
language. This means that all processing of data will be done on the server which then
returns the data as HTML to the website. PHP is one of most brilliant web
programming languages available. Especially combined with MySQL it can become
extremely powerful.

ASP.NET
ASP.NET is an open-source server-side web application framework designed for web
development to produce dynamic web pages developed by Microsoft to allow
programmers to build dynamic web sites, web applications and web services.

ASP.NET is a paid Microsoft provided web application framework whereas PHP is

server-side scripting language which is open source. ASP.NET is better suited for large
and medium-sized organization whereas PHP is better equipped to server start-up and
small sized organizations.

College of Comp. & IT – Hadhramout Univ. 8 Mr. Khaled Abdulaziz Bawazir

Advanced Web Programming Fundamentals of Web Programming

Server side scripting

It is a method of designing websites so that the process or user request is run on the
originating server. Server-side scripting programs are written for a special run-time
environment that automate the execution of tasks that could alternatively be executed
one-by-one by a human operator. Server side scripts provide an interface to the user
and are used to limit access to proprietary data and help keep control of the
script source code.

Server-side scripting tends to be used for allowing users to have individual accounts
and providing data from databases. It allows a level of privacy, personalization and
provision of information that is very powerful. E-commerce and social networking
sites all rely heavily on server-side scripting.

PHP and ASP.NET are the two main technologies for server-side scripting.

The script is interpreted by the server meaning that it will always work the same way.
Server-side scripts are never seen by the user (so they can't copy your code). They run
on the server and generate results which are sent to the user. Running all these scripts
puts a lot of load onto a server but none on the user's system.

The combination

A site such as Google, Amazon, Facebook use both types of scripting:

• Server-side handles logging in, personal information and preferences and

provides the specific data which the user wants (and allows new data to be
stored).
• Client-side makes the page interactive, displaying or sorting data in different
ways if the user asks for that by clicking on elements with event triggers.

Disadvantages of scripts

• In some situations, they may be slower than a compiled program.

• Requires the user to install an interpreter or separate program before the script
can be run.

Script services usually can do:

• Pulling information from database.

• Making simple calculate.
• Choosing which pieces of content to display on the page.

Usually scripts are hidden from users, this adds more layer of security for both data
and the source code.

College of Comp. & IT – Hadhramout Univ. 9 Mr. Khaled Abdulaziz Bawazir

Advanced Web Programming Fundamentals of Web Programming

Server side processing concerns:

1) Processing is done on the server which for high traffic site increases server load.
2) Processing data usually requires a page refresh on the browser. Because the
server must process the script, there's usually a page refresh required to display
new content.
3) Ajax and other client side bridges help enhance the usability of server side
scripting.

Active Server Pages (ASP):

It is a server-side technology addressing the growing need of dynamic and decision-

making oriented Web content. It is a "server-side" technology because it runs on the
server upon client's request for a Web page.

Historically, web sites were static: lacking information processing capability. A static
web site, for example, cannot process an order or other information from its visitors.
Thus static web sites are not very useful when it comes to processing information.

Because a static web site is just a collection of plain or HTML-formatted text, every
time the web site loads the exact same content is shown. A static website has to be
changed manually to add new content. It is not very efficient to manually update
content when it can be easily changed or updated automatically. Suppose we decided
to display current date on our web pages. Daily manually changing the date on all of
our web pages is not very efficient. Instead of manually editing the date, we could once
write an ASP script and the script will automatically output the current date on our
pages. It is much more efficient to write a script once for outputting the date and have
it executed as many times as needed than manually editing date on every single day.
A page containing script that produces changing content is known as a dynamic page.
With dynamic pages, for instance, we can allow visitors to login to access their
personal account information or have content generated instantaneously from a
database. ASP is one of the many solutions used to create web sites that are customized
to the user needs and that are interactive to the user.

College of Comp. & IT – Hadhramout Univ. 10 Mr. Khaled Abdulaziz Bawazir

Advanced Web Programming Fundamentals of Web Programming

Common Web Development Techniques:

1. AJAX (Asynchronous JavaScript And XML)

AJAX is not a programming language. AJAX just uses a combination of:

• A browser built-in XMLHttpRequest object (to request data from a web

server).
• JavaScript and HTML DOM (to display or use the data).

AJAX allows web pages to be updated asynchronously by exchanging data with a

web server behind the scenes. This means that it is possible to update parts of a web
page, without reloading the whole page.

2. jQuery

jQuery is a JavaScript Library. The purpose of jQuery is to make it much easier to

use JavaScript on your website. jQuery takes a lot of common tasks that require
many lines of JavaScript code to accomplish, and wraps them into methods that you
can call with a single line of code.

The jQuery library contains the following features:

• HTML/DOM manipulation.
• CSS manipulation.
• HTML event methods.
• Effects and animations.
• AJAX.
• Utilities.

3. Bootstrap

Bootstrap is a free front-end framework for faster and easier web development. It
includes HTML and CSS based design templates for typography, forms, buttons,
tables, navigation, modals, image carousels and many other, as well as optional
JavaScript plugins. Bootstrap also gives you the ability to easily create responsive
designs.
Responsive web design is about creating web sites which automatically adjust
themselves to look good on all devices, from small phones to large desktops.

College of Comp. & IT – Hadhramout Univ. 11 Mr. Khaled Abdulaziz Bawazir