A website or a web application can be developed by using web technologies like HTML, CSS, Javascript, BootStrap, jQuery, PHP, Servlets, .NET Framework etc…
Page Contents
Two categories of Web Development
The web technologies can be divided into backend and frontend technologies. The front end technologies are used to design (Frond End) of the web site where as back end technologies are used to develop the web site or web application.
The developers who deal with the front end technologies are known as Front End Developers. While Back End Developers exploit the back end technologies to develop the web application. The developers who are well versed with both front end and back end technologies are known as Full Stack Developers.
Let’s start learning with basics terminologies.
WWW: Affectionately called “The Web”.It is a collection of information stored on the networked computers over the world. Individual document pages on the World Wide Web are called web pages and are accessed with a software application running on the user’s computer, commonly called a web browser. Web pages may contain text, images, videos, and other multimedia components, as well as web navigation features consisting of hyperlinks.
The WWW was proposed in 1991 by Tim Berners-Lee at CERN.
WEB AND INTERNET
Web or Internet, both are not the same things. The Internet is a collection of computers or networking devices connecting together. Devices can communicate with each other. The Web is a collection of documents that are interconnected by hyper-links. These documents are accessed by web browsers and provided by web servers.
WEB TERMINOLOGIES
Client: Any computer on the network that requests services from another computer on the network.
Server: Any computer that receives requests from client computers, processes and sends the output.
Web Page: Any page that is hosted on the Internet.
Web Site: Collection of interlinked web pages that is hosted on the Internet.
Web Development: The process of creating, modifying web pages.
Web Browser: A program that receives information from the web. E.g. IE, Chrome, Mozilla etc
HOW DOES THE WEB WORK?
The web information is stored in the web pages. (In HTML Format). The web pages are stored in the computers called web servers. The computer reading the pages is called web clients with specific web browsers. ( IE, Netscape, Mozilla, Chrome, Safari, Opera etc.) The web server waits for the request from the web clients over the Internet.
WHAT IS HTML?
HTML is a language for describing web pages.
HTML stands for Hyper Text Markup Language
HTML is a markup language
A markup language is a set of markup tags
The tags describe document content
HTML documents contain HTML tags and plain text
HTML documents are also called web pages
HTML Tags
HTML markup tags are usually called HTML tags
HTML tags are keywords (tag names) surrounded by angle brackets like <html>
HTML tags normally come in pairs like <b> and </b>
The first tag in a pair is the start tag, the second tag is the end tag
The end tag is written like the start tag, with a forward slash before the tag name
Start and end tags are also called opening tags and closing tags
HTML Elements
“HTML tags” and “HTML elements” are often used to describe the same thing.
HTML Element:
<p>This is a paragraph.</p>
HTML Editors
HTML can be edited by using a professional HTML editor like:
Adobe Dreamweaver
Microsoft Expression Web
CoffeeCup HTML Editor
Notepad ++ / Notepad
WEB BROWSERS
The purpose of a web browser (such as Google Chrome, Internet Explorer, Firefox, Safari) is to read HTML documents and display them as web pages.
The browser does not display the HTML tags, but uses the tags to determine how the content of the HTML page is to be presented/displayed to the user
What is CSS:
It helps the web designers to apply style on HTML tags. You can add new looks to your old HTML documents. You can completely change the look of your website with only a few changes in CSS code.
CSS Syntax
A CSS rule set contains a selector and a declaration block.
CSS Selector: CSS selectors are used to select the content you want to style. Selectors are the part of CSS rule set. CSS selectors select HTML elements according to its id, class, type, attribute etc.
There are several different types of selectors in CSS.
CSS Element Selector
CSS Id Selector
CSS Class Selector
CSS Universal Selector
CSS Group Selector
How to add CSS
There are three ways to insert CSS in HTML documents.
Inline CSS
Internal CSS
External CSS
What is JAVASCRIPT?
JavaScript (js) is a light-weight object-oriented programming language which is used by several websites for scripting the webpages.
Although, JavaScript has no connectivity with Java programming language. The name was suggested and provided in the times when Java was gaining popularity in the market.
Features of JavaScript
All popular web browsers support JavaScript as they provide built-in execution environments.
JavaScript follows the syntax and structure of the C programming language.
It is a case-sensitive language.
JavaScript is supportable in several operating systems including, Windows, macOS, etc.
It provides good control to the users over the web browsers.
Javascript example is easy to code. JavaScript provides 3 places to put the JavaScript code: within body tag, within head tag and external JavaScript file.
LIST OF WEB TECHNOLOGIES USED IN WEB DEVELOPMENT
HTML: HTML stands for Hyper Text Markup Language. With HTML you can create your own Website.
CSS: CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on screen, paper, or in other media. CSS saves a lot of work. It can control the layout of multiple web pages all at once.
JavaScript: JavaScript is the programming language that control the behavior of web pages.
jQuery: jQuery is a lightweight and “write less, do more”, JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript on your website. Before you start studying jQuery, you should have a basic knowledge of HTML, CSS & JavaScript.
AJAX: AJAX stands for Asynchronous JavaScript And XML. AJAX is not a programming language. AJAX allows update parts of a web page, without reloading the whole page.
XML: XML stands for eXtensible Markup Language. XML was designed to store and transport data. XML was designed to be both human- and machine-readable. XML is a W3C Recommendation.
JSON: JSON stands for JavaScript Object Notation. JSON is a syntax for storing and exchanging data(same like XML). JSON is better than XML in all the ways.
Bootstrap: Bootstrap is the most popular front-end(HTML, CSS, and JavaScript) framework for developing responsive, mobile-first websites. Responsive web design is about creating web sites which automatically adjust themselves to look good on all devices, from small phones to large desktops.
PHP: PHP stands for Hypertext Preprocessor. PHP is a server scripting language, and a powerful tool for making dynamic and interactive Web pages. PHP is a widely-used, free, and efficient server- side scripting language.
ASP: ASP stands for Active Server Pages. ASP is a development framework for building web pages. ASP is a Microsoft’s first server side scripting language.
SQL: SQL stands for Structured Query Language.: SQL is a standard language for accessing and manipulating databases. ● SQL is an ANSI (American National Standards Institute) standard.
AngularJS: AngularJS is a JavaScript framework. AngularJS is perfect for Single Page Applications (SPAs). Before you study AngularJS, you should have a basic understanding of HTML, CSS & JavaScript.
Node.js: Node.js is an open source server framework. Node.js allows you to run JavaScript on the server. Node.js is free and runs on various platforms(Windows, Linux, Unix, Mac OS X, etc.)
BackboneJS: BackboneJS is a lightweight JavaScript library that allows to develop and structure client side applications that run in a web browser. It offers MVC framework which abstracts data into models, DOM (Document Object Model) into views and bind these two using events.
ExpressJS: Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications. It is an open source framework developed and maintained by the Node.js foundation.
KnockoutJS: KnockoutJS is basically a library written in JavaScript, based on MVVM pattern that helps developers in building rich and responsive websites. KnockoutJS library provides an easy and clean way to handle complex data-driven interfaces. It is independent of any other framework.
ReactJS: React is a front-end library developed by Facebook. It is used for handling the view layer for web and mobile apps. ReactJS allows us to create reusable UI components. It is currently one of the most popular JavaScript libraries and has a strong foundation and large community behind it.
AWS: AWS stands for Amazon Web Services. AWS is Amazon’s cloud web hosting platform that offers flexible, reliable, scalable, easy-to- use, and cost-effective solutions.
Firebase: Firebase is a backend platform for building Web, Android and IOS applications. It offers real time database, different APIs, multiple authentication types and hosting platform.
CakePHP: CakePHP is an open-source framework for PHP. It is intended to make developing, deploying and maintaining applications much easier. It is based on an MVC architecture that is both powerful and easy to grasp. It guarantee a strict but natural separation of business logic from data and presentation layers.
CodeIgnitor: CodeIgniter is a powerful PHP framework built for developers who need a simple and elegant toolkit to create full-featured web applications. It is an Open Source framework. It has a very rich set of functionality, which will increase the speed of website development work.
Laravel: Laravel is a powerful MVC PHP framework, designed for developers who need a simple and elegant toolkit to create full-featured web applications. It offers a robust set of tools and an application architecture that incorporates many of the best features of frameworks like CodeIgniter, Yii, ASP.NET MVC, Ruby on Rails, Sinatra, & others.
Zend: Zend is an open source PHP framework. It is pure object-oriented and built around the MVC design pattern. Zend framework contains collection of PHP packages which can be used to develop web applications and services.
Yii: The Yii framework is an open-source PHP framework for rapidly-developing, modern Web applications. It is built around the Model-View- Controller composite pattern. Yii provides secure and professional features to create robust projects rapidly.
Symfony: Symfony is an open-source PHP web application framework, designed for developers who need a simple and elegant toolkit to create full-featured web applications.
Magento: Magento is an open source E-commerce software, created by Varien Inc., which is useful for online business. It has a flexible modular architecture and is scalable with many control options that is helpful for users. Magento uses E-commerce platform which offers organizations ultimate E-commerce solutions and extensive support network.
WordPress: WordPress is an open source Content Management System (CMS), which allows the users to build dynamic websites and blog. WordPress is the most popular blogging system on the web and allows updating, customizing and managing the website from its back-end CMS and components.
Joomla: Joomla is an open source CMS, which is used to build websites and online applications. It is free and extendable which is separated into front- end templates and back-end templates (administrator). Joomla is developed using PHP, Object Oriented Programming, software design patterns and MySQL (used for storing the data).
Drupal: Drupal is a free and open source Content Management System (CMS) that allows organizing, managing and publishing your content. This reliable and secure CMS is built on PHP based environment and powers millions of applications and websites. WhiteHouse.gov, World Economic Forum, Stanford University, Examiner.com etc…
Java Servlet is a platform-independent, container-based Web component used to generate dynamic content in a Web page.
The following question will also be covered in the post:
Where do Servlets stand in the web architecture?
What is the difference between Web Application and Enterprise Application?
What is HTTP?
What is Server? Difference between Web Server and Application Server.
What is Servlet and what is the Servlet container?
Life Cycle of Servlet.
How container handles Servlet request and response?
Java is basically used to develop two types of applications: Standalone applications and Enterprise Applications.
Standalone applications: A standalone application is an application that runs locally on the device and doesn’t require anything else to be functional. All the logic is built into the app, so it doesn’t need an internet connection nor any other services installed.
Basically we can say that standalone applications don’t follow the client server architecture.
Standalone applications is further divided into two types: CUI applications and GUI applications.
UI Application is a standalone application, it will be designed in such a way to take input from users though command prompt and to provide output data to the user through the same command prompt, where command prompt is acting as an user interface and it is supporting characters data.
GUI Application is a standalone application, it will be designed in such a way to take input data from users through the collection of graphics components and to provide out data to the users through the same collection of graphics components, where the collection of graphics components is acting as an user interface and it is supporting graphics data.
To prepare standalone applications, java has provided some core libraries like java.lang, java.util, java.awt, javax.swing….
Enterprise application: If we design and execute any java application on the basis of client-server architecture or by distributing application logic over multiple machines then java application is called as enterprise applications.
There are two types of enterprise applications:
Web Applications and Distributed Applications.
Difference between Web Application and Distributed Application:
Web application is a client-server application, where the complete application logic will be distributed over server machine.
Distributed application is a client-server application, where the complete application logic will be distributed over both client and server machine.
In distributed applications, client may be a java program, an applet, a servlet, a JSP page, a framework application like struts, JSF, Spring application.
To prepare web application, we will use a set of technologies called as web technologies like CGI, Servlets, JSP….
To prepare distributed applications we will use a set of technique called as distributed technique. ex Socket programming, RMI, ejb, Web Services.
The main intention of web applications is to provide dynamic response from server machine.
The main intention of distributed application is to establish communication between local machine and remote machine in order to get remote services from remote machine to local machine.
Web applications are executed by both web servers and application servers. Distributed are executed by only application servers.
Web application is the collection of web components (Servlet, JSP) and which are executed by the web containers (Servlet Container, JSP Container).
Distributed application is the collection of distributed components like EJB components and which are executed by EJB container.
HTTP
It is the data communication protocol used to establish communication between client and server.
HTTP Requests
It is the request send by the computer to a web server that contains all sorts of potentially interesting information.
SERVER
Server is a device or a computer program that accepts and responds to the request made by other program, known as client. It is used to manage the network resources and for running the program or software that provides services.
There are two types of servers:
- Web Server
- Application Server
Web Server
A web server accepts and fulfills requests from clients for static content (i.e., HTML pages, files, images, and videos) from a website. Web servers handle HTTP requests and responses only.
An application serverexposes business logic to the clients, which generates dynamic content. It is a software framework that transforms data to provide the specialized functionality offered by a business, service, or application. Application servers enhance the interactive parts of a website that can appear differently depending on the context of the request.
Whati is Servlet?
A servlet is a Java technology that is managed by a container called a servlet engine. It generates dynamic content and interacts with the client through Request and Response. Servlet extends the functionality of a web server.
or
Java Servlet is a platform-independent, container-based Web component used to generate dynamic content in a Web page. It is one of the stable technologies to share server-side resources in client-server programming.
Though servlets can respond to many types of requests, they generally implement web containers for hosting any website on web server.
SERVLET CONTAINER
The client can request only static pages from web server. If a client required dynamic pages then server further forwards this request to container where the corresponding dynamic web page is generated on server side.
Container is a part of web server which interacts with the servlet for handling the dynamic
web pages from the client.
Examples of Servlet Container:
Apache Tomcat
Resin
Container Operations:
Communication Support
Lifecycle Management
Security
Object Pooling
Multithreading
JSP Support
LIFE CYCLE OF A SERVLET (SERVLET LIFE CYCLE):
The web container maintains the life cycle of a servlet instance. A Servlet is executed in 5 steps. Let’s see the life cycle of the servlet.
Servlet class is loaded.
Servlet instance is created.
init method is invoked.
service method is invoked.
destroy method is invoked.
1) Servlet class is loaded:
The classloader is responsible to load the servlet class. The servlet class is loaded when the first request for the servlet is received by the web container.
2) Servlet instance is created:
The web container creates the instance of a servlet after loading the servlet class. The servlet instance is created only once in the servlet life cycle.
3) init method is invoked:
The web container calls the init method only once after creating the servlet instance. The init method is used to initialize the servlet. It is the life cycle method of the javax.servlet.Servlet interface. Syntax of the init method is given below:
public void init(ServletConfig config) throws ServletException
4) service method is invoked:
The web container calls the service method each time when request for the servlet is received. If servlet is not initialized, it follows the first three steps as described above then calls the service method. If servlet is initialized, it calls the service method. Notice that servlet is initialized only once. The syntax of the service method of the Servlet interface is given below:
public void service(ServletRequest request, ServletResponse response)
throws ServletException, IOException
5) destroy method is invoked:
The web container calls the destroy method before removing the servlet instance from the service. It gives the servlet an opportunity to clean up any resource for example memory, thread etc. The syntax of the destroy method of the Servlet interface is given below:
public void destroy()
HOW CONTAINER HANDLES REQUEST AND RESPONSE?
As we have studied that web server understands only static pages. Container is a part of web server which understands static pages.
When a request is bypassed by the Web Server to the Container in order to generate the dynamic response, Container creates two objects, HttpServletRequest and HttpServletResponse for handling the request as well as response. The HTTP request is converted by container into a format which is acceptable by the servlets and associated to the HttpServletRequest object. This request goes to Servlet. Then response (dynamic content) is created by Servlet send back to the web server in HTTP form by the container through HttpServletResponse object.
JSP technology is used to create web application just like Servlet technology. It can be thought of as an extension to Servlet because it provides more functionality than servlet such as expression language, JSTL, etc.
JSP technology is used to create web application just like Servlet technology. It can be thought of as an extension to Servlet because it provides more functionality than servlet such as expression language, JSTL, etc.
Properties of JSP:
It stands for Java Server Pages.
It is a server side technology.
It is used for creating web application.
It is used to create dynamic web content.
In this JSP tags are used to insert JAVA code into HTML pages.
It is an advanced version of Servlet Technology.
It is a Web based technology helps us to create dynamic and platform independent web pages.
In this, Java code can be inserted in HTML/ XML pages or both.
JSP is first converted into servlet by JSP container before processing the client’s request.
Features of JSP
Coding in JSP is easy:- As it is just adding JAVA code to HTML/XML.
Reduction in the length of Code:- In JSP we use action tags, custom tags etc.
Connection to Database is easier:-It is easier to connect website to database and allows to read or write data easily to the database.
Make Interactive websites:- In this we can create dynamic web pages which helps user to interact in real time environment.
Portable, Powerful, flexible and easy to maintain:- as these are browser and server independent.
No Redeployment and No Re-Compilation :- It is dynamic, secure and platform independent so no need to re-compilation.
Extension to Servlet:- as it has all features of servlets, implicit objects and custom tags
JSP syntax
Syntax:-
<% java code %>
Advantages of JSP
The advantage of JSP is that the programming language used is JAVA, which is a dynamic language and easily portable to other operating systems.
It is very much convenient to modify the regular HTML. We can write the servlet code into the JSP.
It is only intended for simple inclusions which can use form data and make connections.
JSP can also include the database connections into it. It can contain all type of java objects.
It is very easy to maintain
Performance and scalability of JSP are very good because JSP allows embedding of dynamic elements in HTML pages.
As it is built on Java technology, hence it is platform independent and not depending on any operating systems.
Also, it includes the feature of multithreading of java into it.
We can also make use of exception handling of java into JSP.
It enables to separate presentation layer with the business logic layer in the web application.
It is easy for developers to show as well as process the information.
What is ASP.NET?
Before covering ASP.NET, it is pertinent to cover some basics terms related to this technology.
WHAT IS SOFTWARE FRAMEWORK vs. LIBRARY?
The possible answer to this question, if asked, will be “Framework is a collection of various libraries”. However, this definition is not entirely true.
Library: A library provides a set of predefined functions/ objects/ modules which your application code calls for specific functionality. Why do we need them? The reason is very simple i.e. code reuse, use the code which has already been written by other developers.
Framework: Framework, on the other hand has defined open or unimplemented functions or objects which the user writes to create a custom application. (C++/ Java users will understand this as it is much like implementing an abstract function).
COMPONENTS OF .NET FRAMEWORK 3.5
Some important component of .NET framework which are related to ASP.NET are discussed below:
Common Language Runtime or CLR
It performs memory management, exception handling, debugging, security checking, thread execution, code execution, code safety, verification, and compilation. The code that is directly managed by the CLR is called the managed code.
ASP.NET and ASP.NET Ajax
ASP.NET is the web development model and AJAX is an extension of ASP.NET for developing and implementing AJAX functionality. ASP.NET AJAX contains the components that allow the developer to update data on a website without a complete reload of the page.
ADO.NET
It is the technology used for working with data and databases. It provides access to data sources like SQL server, OLE DB, XML etc. The ADO.NET allows connection to data sources for retrieving, manipulating, and updating data.
The key development tool for building .NET or ASP.NET applications and front ends is Visual Studio. Visual Studio is an integrated development environment for writing, compiling, and debugging the code. It provides a complete set of development tools for building ASP.NET web applications, web services, desktop applications, and mobile applications.
ARCHITECTURE OF THE .NET FRAMEWORK
The architecture of the. Net framework is based on the following key components
Language: A variety of languages exists for .NET framework. They are VB.net and C#. These can be used to develop web applications.
Library: The .NET Framework includes a set of standard class libraries. The most common library used for web applications in .net is the Web library. The web library has all the necessary components used to develop.Net web-based applications.
Common Language Runtime: The Common Language Infrastructure or CLI is a platform. .Net programs are executed on this platform. The CLR is used for performing key activities. Activities include Exception handling and Garbage collection.
WHICH SERVER IS USED FOR ASP.NET?
Internet Information Server is a web server used for ASP. NET web pages. Like other server, it also works on client server architecture. Client requests for web page to the server, in response the web server handles the request.
ASP.NET
ASP.NET is a subset of .NET. . NET is used to create a variety of applications like mobile applications, web applications, desktop applications etc.
ASP.NETis a web application framework designed by Microsoft. It is used to create web applications and web services which are accessed by users using web browsers like Chrome, Netscape, and Firefox etc.
The other technologies can be used to build web applications:
PHP
Java
Ruby on Rails
CGI
Perl
Python
Advantages of Web Applications:
1. Web application need not to be installed on the computer unlike desktop application. Web applications just need to be installed on the web server.
2. Only a browser that understands HTML is required to access a web application.
3. A web application is run on several platforms.
4. Works on client and server architecture.
ASP.NET was released in 2002 as a successor to Classic ASP. ASP.NET pages have the extension .aspx and are normally written in C# (C sharp).
ASP.NET is a web application framework developed and marketed by Microsoft to allow programmers to build dynamic web sites. It allows you to use a full featured programming language such as C# or VB.NET to build web applications easily.
ASP.NET is used to produce interactive, data-driven web applications over the internet. It consists of a large number of controls such as text boxes, buttons, and labels for assembling, configuring, and manipulating code to create HTML pages. We will learn this standard controls later below in this post.
ASP.NET STANDARD CONTROLS
ASP.Net has the ability to add controls to a form such as textboxes and labels etc.
Let’s look at the some controls available for Web forms:
Label Control
The label control is used to display a text or a message to the user on the form. The label control is normally used along with other controls. Common examples is wherein a label is added along with the textbox control. The label gives an indication to the user on what is expected to fill up in the textbox.
Textbox
A text box is used for allowing a user to enter some text on the Web form application.
List box
A Listbox is used to showcase a list of items on the Web form.
RadioButton
A Radio button is used to showcase a list of items out of which the user can choose one.
Checkbox
A checkbox is used to provide a list of options in which the user can choose multiple choices.
Button
A button is used to allow the user to click on a button which would then start the processing of the form.
Dr. Sunny is an Assistant Professor in higher education. He has completed his Ph.D. He has a depth of knowledge in the research field and in higher education.
Hi