Web Technologies

Lecture 5

ISM301
Tutor: Amina Fadila Shehu
 What is Web Technology?
• You have probably heard the term “web
development technologies” before, but did
you ever think about what it actually means?
• Since the computers can’t communicate with
each other the way people do, they require
codes instead.
• Web technologies are the markup languages
and multimedia packages computers use to
communicate
 Web Technologies
Web technologies include the following:
• Mark-up languages, such as HTML, CSS, XML, CGI, and HTTP
(Front-end or Client-side technologies)
• Programming languages and technologies that help create
applications for the web. Some of these are Perl, C#, Java,
Visual Basic, and .NET (Back-end or Server-side technologies)
• Web server and server technologies that enable request
handling, where different users have to share the same
resources and communicate with each other
• Databases, which are extremely important for data and
information storage on a computer network
• Business applications that are customized for specific
execution of tasks on a network
Popular web designing softwares

• Adobe Dreamweaver.
• Wix.
• WordPress.
• Weebly.
• Webflow.
• Bluefish.
• Visual Studio Code.
 Scripting Languages
• Some of the popular scripting languages are
given below:
– JavaScript
– VB Script
– PHP (Hypertext PreProcessor)
– ASP (Active Server Pages)
– JSP (Java Server Pages)
 JavaScript
• It is a client side scripting language used to make web pages interactive
• It was developed by Brendan Eich while he was working for Netscape
Communications Corporation
• It is implemented as an interpreted language
• It can be inserted inside HTML code or can be written as an external file
and then included inside HTML file
• The extension name javaScript file is .js
• It is a tool for validation of forms in the client side and also be used for
performing simple calculations and also for bringing animations to a
web page
• JavaScript is generally used for including animations on web pages,
loading new images, scripts or objects onto a web page, and creating
extremely receptive user interfaces.
 AJAX
• AJAX stands for Asynchronous JavaScript and XML.
• AJAX is not a programming language
• It is the technology used in JavaScript
• It allows update of the parts of a web page, without reloading
the whole page.
• It allows web pages to be updated by exchanging small
amounts of data between the client and the server behind the
scenes.
• Since Ajax relies more on JavaScript, if the browser is not
capable of handling JavaScript or user has turned off JavaScript
functionality in the browser, the Ajax application will not work
 VB Script
• It is a scripting language developed by Microsoft
Corporation based on the popular programming
language Visual Basic.
• It was developed to used either as a client side
scripting language for Microsoft IE or as a server side
scripting language with the Microsoft IIS.
• Browsers other than IE may not be able to correctly
interpret and display the VB script code. Therefore it
is less popular as a client side scripting tool.
• It is popular for server side scripting.
• VBScript as a part of ASP.NET in .NET framework
 PHP
• This stands for PHP Hypertext Processor.
• It is an open source general-purpose scripting language that is suited for
web development created in 2004.
• It is a HTML-embedded scripting language and is useful for creating
dynamic web pages.
• It is a server side scripting tool and its code is similar to Java, C and PERL.
• The web page files that contain PHP code have the extension .php
• PHP code is inserted inside HTML code and when the user request for
PHP web page, it is interpreted and executed on the web server.
• One of the strongest and most significant features in PHP is its support
for database programming.
• The most common database used with PHP is MySQL.
• Both server softwares are freely downloadable
• Using this language you can expand a web app very quickly. This
language has been used to create websites such as WordPress, Digg, and
Facebook.
 PHP Features
PHP is very popular language because of its simplicity and open source. There are some important features
of PHP given below:
• Performance: PHP script is executed much faster than those scripts which are written in other languages
such as JSP and ASP. PHP uses its own memory, so the server workload and loading time is automatically
reduced, which results in faster processing speed and better performance.
• Open Source: PHP source code and software are freely available on the web. You can develop all the
versions of PHP according to your requirement without paying any cost. All its components are free to
download and use.
• Familiarity with syntax: PHP has easily understandable syntax. Programmers are comfortable coding
with it.
• Embedded: PHP code can be easily embedded within HTML tags and script.
• Platform Independent: PHP is available for WINDOWS, MAC, LINUX & UNIX operating system. A PHP
application developed in one OS can be easily executed in other OS also.
• Database Support: PHP supports all the leading databases such as MySQL, SQLite, ODBC, etc.
• Error Reporting: PHP has predefined error reporting constants to generate an error notice or warning at
runtime. E.g., E_ERROR, E_WARNING, E_STRICT, E_PARSE.
• Web servers Support: PHP is compatible with almost all local servers used today like Apache, Netscape,
Microsoft IIS, etc.
• Security: PHP is a secure language to develop the website. It consists of multiple layers of security to
prevent threads and malicious attacks.
 PHP Example
Generally, a PHP file contains HTML tags and some PHP scripting code. It is very easy to create
a simple PHP example. To do so, create a file and write HTML tags + PHP code and save this
file with .php extension.
Note: PHP statements ends with semicolon (;).
• All PHP codes go between the php tag. It starts with <?php and ends with ?>. The syntax
of PHP tag is given below:
<?php
//your code here
?>
Let's see a simple PHP example where we are writing some text using PHP echo command.
<!DOCTYPE>
<html>
<body>
<?php
echo "<h2>Hello First PHP</h2>";
?>
</body>
</html>

Output:
Hello First PHP
 ASP
• It is a server-side scripting environment that can be
used to create and run interactive web applications.
• It contains HTML and scripting languages (VBScript,
JavaScript).
• ASP files have the extension .asp
• These files are compiled using the Microsoft’s web
server software, IIS (Internet Information Server).
• It is executed only on Windows OS
 JSP
• Stands for JavaServer Pages
• JSP (Java Server Page) is basically a technology that helps software developers to implement
and develop dynamic web pages based on XML, HTML or other applicable document types.
• It is a server side scripting language that was developed by Sun Microsystems in 1999. It was
initially released in 1999 by Sun Microsystems. It is basically a type of Java service
component that is useful from the user interface perspective for Java-based applications. It has
full access to Java APIs and the enterprise’s databases.
• It is similar to PHP, but uses Java as programming language
• JSP files have the extension .jsp
• To run JSP, Apache Tomcat web server is required.
• It is an integral part of Java 2 Platform Enterprise Edition (J2EE)
• JSP allows Java to be embedded directly into a HTML page by using tags. The HTML content
and the Java content can also be placed in separate files. Any changes made to HTML content
is automatically compiled and loaded onto the servlet.
• Four different elements are used in constructing JSPs
– Scripting Elements
– Implicit Objects
– Directives
– Actions
 Lifecycle of JSP
• A Java Server Page life cycle is defined as the process started with its creation
which later translated to a servlet and afterward servlet lifecycle comes into play.
This is how the process goes on until its destruction.

The Following steps are involved in JSP life cycle:

• Translation of JSP page to Servlet
• Compilation of JSP page(Compilation of JSP into test.java)
• Classloading (test.java to test.class)
• Instantiation(Object of the generated Servlet is created)
• Initialization(jspInit() method is invoked by the container)
• Request processing(_jspService()is invoked by the container)
• JSP Cleanup (jspDestroy() method is invoked by the container)
 The Lifecycle of a JSP Page
• Translation of JSP page to Servlet :This is the first step of JSP
life cycle. This translation phase deals with Syntactic
correctness of JSP. Here test.jsp file is translated to test.java.
• Compilation of JSP Page- Here the generated java servlet file
(test.java) is compiled to a class file (test.class).
• Classloading (the classloader loads class file)- Servlet class
which has been loaded from JSP source is now loaded into
container.
• Instantiation (Object of the Generated Servlet is created).- Here
instance of the class is generated. The container manages one or
more instance by providing response to requests.
• Initialization ( the container invokes jspInit() method).
• Request processing ( the container invokes _jspService()
method). jspService() method is used to serve the raised
requests by JSP.It takes request and response object as
parameters.This method cannot be overridden.
• Destroy ( the container invokes jspDestroy() method

As depicted in the above diagram, JSP page is translated into Servlet by the help of
JSP translator. The JSP translator is a part of the web server which is responsible
for translating the JSP page into Servlet. After that, Servlet page is compiled by the
compiler and gets converted into the class file. Moreover, all the processes that
happen in Servlet are performed on JSP later like initialization, committing
response to the browser and destroy.
 Creating a simple JSP Page
To create the first JSP page, write some HTML code as given below, and save it by .jsp
extension. Put it in a folder and paste the folder in the web-apps directory in apache
tomcat to run the JSP page.
index.jsp Let's see the simple example of JSP where we are using the scriptlet tag to put
Java code in the JSP page. <html>
<body>
Hello World!<br/>
<%
out.println("Your IP address is " + request.getRemoteAddr());
%>
<p>Today's date: <%= (new java.util.Date()).toLocaleString()%></p>
</body>
It will print Hello World! Your IP address and date on the browser.
Follow the following steps to execute this JSP page:
• Start the server
• Put the JSP file in a folder and deploy on the server
• Visit the browser by the URL http://localhost:portno/contextRoot/jspfile, for example,
 Swift
• Swift is a general-purpose, multi paradigm,
compiled programming language developed
by Apple for iOS, iPadOS, macOS, watchOS,
tvOS, and Linux.
• Swift makes it easier to create and share
binary frameworks with others.
• It also includes features that make it easier to
design better APIs and reduce the amount of
common boilerplate code.
 Swift
• Key Features
– Module stability defines a new text-based module
interface file that describes the API of a binary
framework.
– Property wrappers introduce a general purpose syntax
for defining custom access patterns for property values.
– Opaque result types help hide implementation details
in APIs.
– 'Self' can now be used for classes and value types.
– Support for handling and updating diffs on collections
of appropriate types.
 Ruby
• This is a user-friendly language for beginners.
• It is used for the programming of mobile apps and websites.
• The name "Ruby" originated during a chat session between Matsumoto and
Keiju Ishitsuka. Two names were selected, "Coral" and "Ruby". Matsumoto
chose the later one as it was the birthstone of one of his colleagues.
• Created in 1993, Ruby is an open-source platform that is not only easy to
understand, but also to write.
• The thing that really sets this framework apart is the reusability of the code as
well as some other cool features that will help you get the job done in no time.
• For those who are interested in creating small business software or for those
who are into creative designing, Ruby is the perfect programming language.
• Popular websites written with Ruby include Basecamp, Ask.fm, GitHub, 500px,
and many others.
 Ruby
Requirement for Hello Ruby Program
• Download Ruby and install it.
• Create a file with .rb extension.
• Connect Ruby path to the file.
• Run the file.
Creating Hello Ruby Program
1) Use any text editor and create a hello.rb file. Write the
following code,
puts "Hello Ruby !"
2) Connect Ruby path to the above file. So we need to go the
directory of the file through our console
• 3) Run the following command.
• ruby hello.rb
 PERL
• Perl is a general-purpose programming language
originally developed for text manipulation and
now used for a wide range of tasks including web
development, system administration, network
programming, code generation and more.
• It's intended to be practical rather than beautiful
• Supports both procedural and OO programming.
• It has powerful built-in support for text
processing
 C#
• This is a multi-paradigm programming
language.
• It is a general-purpose language, used to build
up software for the Microsoft and Windows
platforms.
ColdFusion Markup Language (CFML)
• A server-side scripting language to create ColdFusion application pages (.cfm)
• It is a language created from XML
• Tag based
– All tags start with CF
• Intuitive and easy to learn
– if you know HTML
• Available on Windows, Unix and Linux
• Three editions
– Developer, Standard, Enterprise
• Web Servers
– Apache, IIS, Sun Web Server
• Databases
– Oracle, Sybase, Microsoft SQL, MySQL, IBM Informix
 ColdFusion Markup Language (CFML)
• Program code, written in CFML (the ColdFusion Markup Language) is interpreted and
executed on the Web server by the CF Server.
• The result of CF code is generally a DHTML document.
• CFML code is organized into templates. A single template is generally analagous to a single
static Web page.
• When a CFML template is requested by a client through the Web server, the template is
first processed by the ColdFusion Application Server
• Generally, the end result of a processed CFML template is a normal DHTML document. This document
may contain:
– HTML
– JavaScript
– VBScript
– CSS
– Embedded Java Applets
– Or any other client-side technologies
• During the execution phase, the ColdFusion server replaces any CFML-specific code with
the output of that code.
• This allows you to completely generate a dynamic HTML document with CFML instructions.
 ColdFusion Markup Language (CFML)
• In addition to being a full-featured programming language, the real power of
CFML lies in the ability to access other network resources, including:
– Databases!
– Directory Servers (LDAP)
– Mail Servers (using SMTP and POP)
– Other Web or FTP servers
– COM Objects
• Databases may be accessed through ODBC, OLE-DB, and native database
connections. Some common database platforms are:
– MS Access
– SQL Server
– Oracle
– DB2
– MySQL
• Interaction is generally accomplished with queries written in SQL, the
standard relational database query language.
Some CFML tags
A Basic CFML Example
 Sample CFML Code
<cfquery name=“myQuery” datasource=“myDB”>
SELECT * FROM Events
</cfquery>

<table border=“1”>
<cfoutput query=“MyQuery”>
<tr>
<td>#MyQuery.Event#</td>
<td>#MyQuery.Date#</td>
</tr>
</cfoutput>
</table>
 A Database Query Example
<HTML>
<HEAD>
<TITLE>Employee List</TITLE>
</HEAD>
<BODY>
<H1>Employee List</H1>

<CFQUERY NAME="EmpList" DATASOURCE="CompanyInfo">

SELECT FirstName, LastName, Salary, Contract
FROM Employees
</CFQUERY>

<CFOUTPUT QUERY="EmpList">
#FirstName#, #LastName#, #Salary#, #Contract#<BR>
</CFOUTPUT>
</BODY>
</HTML>
 ColdFusion Markup Language (CFML)
• With a lower cost of maintenance and easier
learning curve than other languages, CFML
can help with rampant IT turnover and
retraining costs.
• A skilled developer in another language (ASP,
PHP) can apply most of their skills to
developing with CFML (DHTML, SQL).
 Databases
• A database is a structured set of data held in a
computer or server.
• Databases are where all your data is stored. It’s like a
bunch of filing cabinets with folders filled with files.
• Databases come mainly in two flavors:
SQL/RDBMS/Relational databases and NoSQL.
• SQL provides more structure which helps with making
sure all the data is correct and validated.
• NoSQL provides a lot of flexibility for building and
maintaining applications
 SQL/RDBMS/Relational databases
• Relational databases emerged in the 70’s to store data according to
a schema that allows data to be displayed as tables with rows and
columns.
• Think of a relational database as a collection of tables, each with a
schema that represents the fixed attributes and data types that the
items in the table will have.
• RDBMS all provide functionality for reading, creating, updating,
and deleting data, typically by means of Structured Query
Language (SQL) statements.
• The tables in a relational database have keys associated with them,
which are used to identify specific columns or rows of a table and
facilitate faster access to a particular table, row, or column of
interest.
 SQL/RDBMS/Relational databases
While there are many relational databases, over time these have become
the most popular:
• PostgreSQL - PostgreSQL, often simply Postgres, is an object-relational
database management system (ORDBMS) with an emphasis on
extensibility and standards compliance
• MySQL - is another popular open-sourced SQL database. MySQL is used
in Wordpress websites.
• Oracle - Oracle Database (commonly referred to as Oracle RDBMS or
simply as Oracle) is a multi-model database management system
produced and marketed by Oracle Corporation. It is an enterprise SQL
database.
• SQL Server - Microsoft SQL Server is an RDBMS, that supports a wide
variety of transaction processing, business intelligence and analytics
applications in corporate IT environments.
 SQL Server
• SQL Server is software (A Relational Database
Management System) developed by Microsoft.
It is also called MS SQL Server. It is
implemented from the specification of RDBMS.
• Microsoft SQL Server is a highly scalable
product that can be run on anything from a
single laptop, to a network of high-powered
cloud servers, and anything in between.
 Features of MS SQL Server
• MS SQL Server is implemented from the specification of
RDBMS.
• MS SQL Server is highly scalable.
• MS SQL Server is platform independent.
• MS SQL Server can be run on a single laptop or a network
of cloud servers.
• MS SQL Server is both a GUI and command based
software.
• MS SQL Server supports SQL (SEQUEL) language which is
an IBM product, non-procedural, common database and
case insensitive language.
 NoSQL/Non-relational databases

• NoSQL databases emerged as a popular alternative to relational databases as

web applications became increasingly complex. NoSQL/Non-relational
databases can take a variety of forms. However, the critical difference between
NoSQL and relational databases is that RDBMS schemas rigidly define how all
data inserted into the database must be typed and composed, whereas NoSQL
databases can be schema agnostic, allowing unstructured and semi-structured
data to be stored and manipulated.
Examples include:
• MongoDB - is an open-sourced NoSQL database and is currently the only
database supported by Meteor.
• Redis - is the most popular key-value store. It is lighting fast for retrieving data
but doesn’t allow for much depth in the data storage.
 ASSIGNMENT
• Type and run at least 2 of the code samples
for any two technologies. Write a detailed
report of what you have done with relevant
screenshots and also what you understand
from the tasks . The assignment will be due on
the 21st February 2023

Hint: you can use snipping tool for more precise

images in the assignment.