Web Development

Frameworks ,Libraries
,Tools and Platforms
Lubak M.
[email protected]

AUWC- Web Technologies ,2022 1

What are frameworks?

• Frameworks are large bodies of pre-written code to which you add your own
code in order to solve a problem.
• You make use of a framework by calling its methods, inheritance, and supplying
callbacks, listeners, or other implementations of the patterns.
• A framework will often dictate the structure of an application.
• Some frameworks even supply so much code that you have to do very little to
write your application.
• This can be good or bad, depending on how easy it is to use. Frameworks are
the substance of programming.
• You build on top of a good one, your program is solid and fast and comes
together beautifully. You build on top of a bad one, your life is miserable,
brutish, and short.
AUWC- Web Technologies ,2022 2
Contd..

AUWC- Web Technologies ,2022 3

Why Use A Framework?

• Frameworks make it easier to reuse the code for common HTTP

operations.
• They structure the projects in a way so that the other developers with the
knowledge of the framework can easily maintain and build the
application.

AUWC- Web Technologies ,2022 4

 Web Development

• Web development is the work involved in developing a website or web

application for the internet, it mainly covers the non-design markup aspects
of building websites.
• The professionals divide it into three categories:
1. Front end web development
2. Back end web development
3. Full-stack web development
• While front-end web development deals with the visual aspect of a website,
what users see its look and feel, back-end web development is concerned
with the connection to the server, databases, etc.
• And full stack web development is a combination of both the frontend and
backend types of web development.
AUWC- Web Technologies ,2022 5
Web Development Platforms

FRONT END
• HTML5
• CSS--Framework !!!
• Java script --Framework!!!
BACKEND
• PHP -- Framework !!!
• Python--Framework !!!
• Java -- Framework !!!

AUWC- Web Technologies ,2022 6

JavaScript Frameworks

AUWC- Web Technologies ,2022 7

JavaScript
• JavaScript is a multi-paradigm language that supports event-driven,
functional, object-oriented, and prototype-based programming styles.
• JavaScript was initially used only for the client-side but, in more recent
times, it has also been used as a server-side programming language
• Full stack developer (UI, Business logic plus back end )
crypto currency
blockchain

https://hackr.io/blog/best-javascript-frameworks

AUWC- Web Technologies ,2022 8

What is a JavaScript Framework and What Does it Do?
• A web development framework is an abstraction in which software
providing generic functionality can be selectively changed by additional
user-written code.
• A JavaScript framework is an application framework written in JavaScript,
where programmers can manipulate the functions and use them for their
convenience.
• Frameworks are more adaptable for web design, and hence most website
developers take to them.
• Frameworks make working with JavaScript easier and smoother, offering
such possibilities as making applications device responsive.

AUWC- Web Technologies ,2022 9

https://hackr.io/blog/best-javascript-frameworks
Top Java script Frameworks

AUWC- Web Technologies ,2022 10

Top Java script Frameworks

AUWC- Web Technologies ,2022 11

Top Java script Frameworks

AUWC- Web Technologies ,2022 12

Top Java script Frameworks

AUWC- Web Technologies ,2022 13

Top Java script Frameworks

5)Ember. js.
Some
more… 6)Meteor.
7)Mithril.
8)Polymer.
9)Aurelia
10)Backbone

AUWC- Web Technologies ,2022 14

Java script Libraries
1) jQuery
2) AJAX ---some what older !
3) JSON
4) Data-Driven Documents (D3) or D3.js

AUWC- Web Technologies ,2022 15

Structured Vs Semi-structured Vs Unstructured Data
• Structured eg –DBMS
• Semi –structured data eg-XML, JSON
https://k21academy.com/microsoft-azure/dp-900/structured-data-vs-unstru
ctured-data-vs-semi-structured-data/

Unstructured

AUWC- Web Technologies ,2022 16

XML

<xml>
<bank_customer>
<acctno> cbe12011 </acctno>
<fname> abebe </fname >
<mname>kebede</mname>
<lname> ayele</lname>
<balance> 120,000</balance>
</bank_customer>
</xml>

AUWC- Web Technologies ,2022 17

CSS Frameworks

AUWC- Web Technologies ,2022 18

What is CSS ?
• CSS is used to control the style of a web document in a simple and easy way.
• CSS is the acronym for "Cascading Style Sheet".
• Cascading Style Sheets, fondly referred to as CSS, is a simple design language
intended to simplify the process of making web pages presentable.
• Some of the key advantages of CSS include:
 Easier to maintain and update.
 Greater consistency in design.
 More formatting options.
 Lightweight code.
 Faster download times.
 Search engine optimization benefits.
 Ease of presenting different styles to different viewers.
 Greater accessibility.

AUWC- Web Technologies ,2022 19

Why use CSS frameworks?

Speeds up your development

Enables cross-browser functionality

Enforces good web design habits

Gives you clean and symmetrical layouts

They make your styling workflow productive, clean, and maintainable

AUWC- Web Technologies ,2022 20

Most Popular CSS Frameworks
1)Bootstrap CSS
2)Foundation CSS
3)Tailwind CSS
4)Materialize CSS
5) Bulma CSS
6)Semantic UI
7)Pure CSS
8)UI Kit
9)Milligram
10)Tachyons
AUWC- Web Technologies ,2022 21
Bootstrap
• Bootstrap is the world’s best CSS framework with large community
support.
• This framework is built in HTML, SASS, and JavaScript.
• Currently, Bootstrap 4.5.0 is the latest version with more responsiveness
with utility classes and new components.
• It is directed at the responsive, mobile-first front end development which
makes it usable for any device and developer-friendly.
• Bootstrap supports all modern browsers.
• The best advantage of bootstrap is, this framework has great JavaScript
components with custom files or CDN.

AUWC- Web Technologies ,2022 22

Foundation
• Is an advanced frontend CSS framework, built-in HTML, CSS, SASS, and
javascript.
• This framework has a sass compiler with a faster way to design a website.
• Foundation has its own CLI to install in your pc/Laptop using specific
commands and you can easily watch.
• Similar same file structure like bootstrap Bulma and materialize CSS.
• This is a mobile-first approach CSS framework with fully responsive with
components.

AUWC- Web Technologies ,2022 23

Foundation contd..
• Plenty of forums are available for supports and help to fix any type of
issue quickly.
• Mostly this framework is used for large web applications, to make an
amazing website with a starter template and to design an awesome
website with an attractive user-interface.
• It is semantic, readable, flexible, and completely customizable.
• Foundation has comprehensive documentation and video tutorials on an
official ZURB Foundation website.

AUWC- Web Technologies ,2022 24

Tailwind
• Tailwind CSS is a highly customizable, low-level utility first CSS framework
that gives you all of the building blocks you need to build bespoke
designs without any annoying opinionated styles you have to fight to
override.
• Unlike other CSS frameworks (Bootstrap or Materialize CSS) it doesn’t
come with predefined components.
• Instead, it operates on a lower level and offers you a set of CSS helper
classes.
• By using these classes you can rapidly create custom design easily.
• Tailwind CSS lets you create your own unique design.

AUWC- Web Technologies ,2022 25

Bulma
• Bulma is a responsive modern CSS framework.
• This framework is built-in HTML, SASS CSS prospector, and CSS flexbox.
• Bulma gives lots of options to customize with your requirements using sass
files, web packs, and variables.
• Bulma is created in pure CSS., which means while using the framework all
you need is one .css file and no .js.
• This framework has some highly advanced features which help you to
make your website more attractive and less code’s.
• You can use the utility’s functions to create dark and light color patterns. It
has the same grids as bootstrap.
• Bulma allows you to add SASS Modularity. It is compatible with both Font
Awesome 4 and Font Awesome 5 thanks to the .icon element.
AUWC- Web Technologies ,2022 26
Materialize
Material Design Lite is a UI component library created with CSS, HTML,
and JavaScript.
It lets you add a Material Design look and feel to your websites.
Besides, It doesn’t rely on any JavaScript frameworks and aims to
optimize for cross-device use, gracefully degrade in older browsers, and
offer an experience that is immediately accessible.
You can use the components to construct attractive, consistent, and
functional web pages and web apps.
Pages developed with MDL will be able to support all the modern web
design principles like browser portability, graceful degradation, and
device independence.

AUWC- Web Technologies ,2022 27

PHP Frameworks

AUWC- Web Technologies ,2022 28

PHP Frameworks
• A PHP framework is a platform to create PHP web applications.
• PHP frameworks provide code libraries for commonly used functions,
cutting down on the amount of original code you need to write.
• There are many good reasons for using PHP frameworks as opposed to
coding from scratch.
1)Faster Development
• Because PHP frameworks have built-in libraries and tools, the time required for
development is less. For example, the CakePHP framework has the Bake command-
line tool which can quickly create any skeleton code that you need in your
application.
2)Less Code to Write :
• Using functions that are built-in to the framework means that you don’t need to
write so much original code.
AUWC- Web Technologies ,2022 29
Contd..
3)Libraries for Common Tasks:
• Many tasks that developers will need to do within web apps are common
ones.
• Examples are form validation, data sanitization, and CRUD operations
(Create, Read, Update, and Delete).
• Rather than having to write your own functions for these tasks, you can
simply use the ones that are part of the framework.
4)Follow Good Coding Practices
• PHP frameworks usually follow coding best practices.
• For example, they divide code neatly into a number of directories
according to function.
AUWC- Web Technologies ,2022 30
5) More Secure Than Writing Your Own Apps
• There are many PHP security threats including cross-site scripting,
SQL injection attacks, and cross-site request forgery.
• Unless you take the right steps to secure your code,
your PHP web apps will be vulnerable.
• Using a PHP framework is not a substitute for writing secure code, but it
minimizes the chance of hacker exploits.
• Good frameworks have data sanitization built-in and defenses against the
common threats mentioned above.

AUWC- Web Technologies ,2022 31

6)Better Teamwork
• Projects with multiple developers can go wrong if there isn’t clarity on:
Documentation
Design decisions
Code standards
• Using a framework sets clear ground rules for your project.
• Even if another developer isn’t familiar with the framework, they should be
able to quickly learn the ropes and work collaboratively.

AUWC- Web Technologies ,2022 32

7)Easier to Maintain
• PHP Frameworks encourage refactoring of code and promote DRY
development (Don’t Repeat Yourself).
• The resulting leaner codebase needs less maintenance.
• You also don’t have to worry about maintaining the core framework, as
that’s done for you by the developers.

AUWC- Web Technologies ,2022 33

Contd..
• The first thing you need to know before using a PHP framework is PHP
itself! If you don’t have a good command of the language, you will struggle
to pick up a framework. Most frameworks run with PHP version 7.2 or later.
• Next, you should have built some PHP applications of your own, so you
have a clear understanding of what’s required on the frontend and
backend.
• Knowing object-oriented PHP is also a must, as most modern PHP
frameworks are object-oriented
• Since many web apps connect to a database, you should know about
databases and SQL syntax. Each PHP framework has its own list of
supported databases.

AUWC- Web Technologies ,2022 34

Contd..
• Understanding an Object-Relational Mapping (ORM) model is useful. ORM
is a method of accessing database data using object-oriented syntax
instead of using SQL.
• Many PHP frameworks have their own ORM built-in. For example, Laravel
uses the Eloquent ORM. Others use an open source ORM like Doctrine.
• Understanding how web servers like Apache and Nginx work is helpful. You
may need to configure files on the server for your app to work optimally.
• You will probably do much of your development locally, so you need to
know about localhost, too.
• Another option is to create and test your app in a virtual environment
using Vagrant and VirtualBox.

AUWC- Web Technologies ,2022 35

Model View Controller architecture
• PHP frameworks typically follow the Model View Controller (MVC) design
pattern.
• This concept separates the manipulation of data from its presentation.

AUWC- Web Technologies ,2022 36

Model View Controller architecture
• The Model stores the business logic and application data.
• It passes data to the View, the presentation layer.
• The User interacts with the View and can input instructions via the
Controller.
• The Controller gives these commands to the Model, and the cycle
continues.
• In a nutshell, the Model is about data, the View is about appearance and the
Controller is about behavior.

AUWC- Web Technologies ,2022 37

• An analogy of the MVC pattern is ordering a cocktail at a bar.
• The User is the patron who arrives at the bar (the View) in need of
refreshment.
• The User gives their drink order to the bartender (the Controller).
• The Controller makes up the order from the Model – the recipe, ingredients,
and equipment. Depending on the cocktail, they might use any of the
following items, or others:
Alcohol
Fruit juice
Ice
Lemon etc.
• The finished cocktail is placed on the bar for the User to enjoy.
• Should the User want another drink, they must speak to the Controller first.
They are not permitted to access the Model and mix their own drink.
AUWC- Web Technologies ,2022 38
In PHP application terms, the MVC could correspond to the following:
Model: a database
View: a HTML page or pages
Controller: functions to access and update the database

AUWC- Web Technologies ,2022 39

Here are some of the best PHP frameworks in use
today
1.Laravel
2.Symfony
3.CodeIgniter
4.Zend Framework / Laminas Project
5.Yii (Framework)
6.CakePHP
7.Slim
8.Phalcon
9.FuelPHP
10.Fat-Free Framework or PHPXie
AUWC- Web Technologies ,2022 40
1)Laravel
• Laravel is an open-source web application framework which released in June
2011.
• It is developed by Taylor Otwell.Laravel is very popular because it handles
complex web applications more securely and faster than other frameworks.
• Laravel makes lots of common tasks of web projects much easier, such as
authentication, session, routing, and caching, etc.
• The main goal of Laravel is to make web development easy and best for the
developers without sacrificing application functionality.
• It provides powerful tools which are necessary for large and robust
application.
• An inversion of control container, tightly integrated unit testing support,
and expression migration system provides the tools that help to build any
application with which we are tasked.
AUWC- Web Technologies ,2022 41
Advantage of Laravel Framework
Laravel follows the MVC design pattern. It offers the following benefits that are
given below:
Laravel makes web application scalable and more secure than other
frameworks.
It includes interfaces and namespace, which helps to organize and manage
resources.
Laravel reuse the components from the other frameworks in web application
development that saves the time of developer to design the web application.
Website designed in Laravel is easy, secure, and protects from several web
attacks.
It supports automation testing, which saves lots of time.
Laravel uses its own template engine called Blade and ORM called Eloquent.

AUWC- Web Technologies ,2022 42

CodeIgniter
• CodeIgniter is an application development framework with small footprints
which makes it much faster than other frameworks.
• It was released on February 28, 2006, by EllisLab.
• It minimizes the size of code needed for a given task and provides easy
solutions to the complex coding problems.
• CodeIgniter is not totally based on the MVC framework.
• It is one of the oldest frameworks with faster and high performance.
• We can develop projects much faster than a scratch, as it provides a large
set of libraries, simple interface, and logical structure to access these
libraries.
• It can be easily installed, and it requires minimal user configuration.

AUWC- Web Technologies ,2022 43

Advantage of CodeIgniter Framework
• CodeIgniter is an open-source and lightweight framework.
• CodeIgniter is faster with database tasks than compared to other
frameworks.
• It is easy to install and well documented, so it is good for PHP beginners.
• It offers built-in security tools.
• CodeIgniter provides exceptional performance.
• CodeIgniter offers some features that help to protect web application with
security threats such as SQL injection, remote code execution, and cross-
site scripting attack.

AUWC- Web Technologies ,2022 44

Symfony
• Symfony is another popular framework which was introduced on October 22, 2005, by
Fabian Potencier.
• It is released under MIT license. It is a set of PHP components to create websites and
web application.
• Symfony framework is a perfect choice among frameworks to develop large-scale
enterprise projects.
• Symfony is an open-source framework of PHP which is sponsored by SensioLabs.
• This framework is designed for developers who create a full-featured web application.
• Lots of open source projects like Drupal, Composer, and phpBB use Symfony
components.
• Symfony integrates with PHP Unit and independent library.
• Symfony framework is flexible and handles enterprise application with billions of
connections. It is used to build micro-sites.
AUWC- Web Technologies ,2022 45
Advantage of Symfony Framework

Symfony is a flexible and powerful framework.

As Symfony is an open-source framework, it allows us to develop without

any constraint.

It prevents from web attacks and SQL injection.

Symfony framework provides code reusability and easy maintenance.

It maintains complete, clearly written, well-structured, and up-to-date

documentation.

AUWC- Web Technologies ,2022 46

Zend Framework
• Zend is an open-source, web application framework, which is developed on
March 3, 2006.
• It is a collection of 60+ packages which is available on GitHub and can be
installed via composer.
• Zend is pure object-oriented, which is developed on the basis of the MVC
design pattern.
• Zend was developed in agile methodology that helps to deliver a high-quality
application to the enterprise client.
• IBM, Google Microsoft, and Adobe are the partners of Zend.
• There are many features comes with Zend Framework version 2 such as drag
and drop editor with front-end technology support (HTML, JavaScript, CSS),
cryptographic coding tool, PHP Unit testing tool, instant online debugging,
and a connected database wizard.
AUWC- Web Technologies ,2022 47
Advantage of Zend Framework
1.Zend is highly customizable framework. Performance of Zend Framework
version 3 is four times higher than its previous version.
2.We can easily test the framework because PHPUnit is integrated with Zend.
3.Zend has a large community base, and it is well-documented.
4.We can delete modules and components which has no use in the
application.
5.We can use the components of our own choice.
6.It supports multiple databases, such as MySQL, PostgreSQL, Microsoft SQL,
and Oracle.

AUWC- Web Technologies ,2022 48

CakePHP
• CakePHP is a web development framework of PHP which was released on April 2005,
and it is licensed under the MIT License.
• It is based on MVC (Model View Controller) architecture and follows ORM techniques.
• CakePHP 3 is running on PHP 7.3 version.
• It has excellent speed, security, and reliability.
• CakePHP is an open-source framework, hence it is free to use.
• CakePHP offers several features, such as SQL injection prevention, Cross-Site Request
Forgery (CSRF) protection, Form tampering Validation, good documentation, and
cross-scripting platform (XSS) prevention.
• It has a set of conventions which guide while developing the application. Due to CRUD
(Create, Read, Update, and Delete) framework, it is one of the easiest frameworks to
learn.
• It powers BMW, Express, and Hyundai websites.

AUWC- Web Technologies ,2022 49

Java Frameworks

AUWC- Web Technologies ,2022 50

Java Frameworks
Spring
• Spring Framework is a powerful lightweight application development framework
used for Enterprise Java (JEE).The core features of the Spring Framework can be
used in developing any Java application. 
• It is described as a complete modular framework.
• This framework can be used for all layer implementations of a real-time
application.
• It can also be used for the development of a particular layer of a real-time
application unlike the other frameworks, but with Spring we can develop all
layers.
• Spring and all the modules including Spring MVC, Spring Core, Spring Security,
Spring ORM, etc are used in enterprise applications.

AUWC- Web Technologies ,2022 51

Hibernate
• Hibernate ORM is a stable object-relational mapping framework for Java.
• It makes better communication possible between the Java programming
language and relational database management systems (RDBMS).
• When you work with an object-oriented language like Java, you’ll
encounter a problem called Object-Relational Impedance Mismatch also
called Paradigm Mismatch.
• This is because OO languages and RDBMSs handle the data differently,
which can lead to severe mismatch problems.
• So, this Hibernate provides you with a framework that overcomes the
mismatch problems of Java.

AUWC- Web Technologies ,2022 52

Struts
• This is another enterprise-level framework, maintained by the Apache
Software Foundation (ASF).
• This fully-featured Java web application framework that allows the
developers to create an easy-to-maintain Java application.
• There are two versions. Struts 1 and Struts 2. Struts 2 is the combination
of webwork framework of OpenSymphony and Struts 1.
• But all the companies prefer using Struts 2 because it is the upgraded
version of Apache Struts.

AUWC- Web Technologies ,2022 53

Google Web Toolkit (GWT)
• Google Web Toolkit (GWT) is a completely free, open-source framework
that helps the developers to write client-side Java code and establish it as
JavaScript.
• A lot of Google products are written using GWT such as AdSense, Google
Wallet, and Blogger.
• Using GWT, developers can easily code complex browser applications
rapidly.
• It also allows you to develop and debug Ajax applications in Java.
• The awesome thing about GWT is that you can write complex browser-
based applications without being an expert in front-end technologies like
JavaScript optimization or responsive design.

AUWC- Web Technologies ,2022 54

Java Server Faces (JSF)
• Java Server Faces (JSF) is developed by Oracle for building user interfaces
for Java-based web applications.
• It’s an official standard of the Java Community Process (JCP) initiative.
• It’s a pretty stable framework. 
• This is a component-based UI framework.
• JSF is based on the MVC software design pattern and has an architecture
that totally defines a distinction between application logic and
representation

AUWC- Web Technologies ,2022 55

Grails
• Grails is a dynamic framework, coined by the Groovy JVM programming
language.
• It is an object-oriented language for the Java platform which intends to
enhance developer productivity.
• The syntax is compatible with Java, and it’s compiled to JVM (Java Virtual
Machine) bytecode.
• Grails works with Java technologies, including Java EE containers, Spring,
SiteMesh, Quartz, and Hibernate.

AUWC- Web Technologies ,2022 56

Python Frameworks

AUWC- Web Technologies ,2022 57

Python Web Development Frameworks

• Python is one of the most acceptable languages among web and

application developers because of its strong emphasis on efficiency and
readability.
• There are numerous outstanding Python web frameworks, each with their
own specialties and feature.
AUWC- Web Technologies ,2022 58
Contd..
• Frameworks automate the common implementation of common solutions
which gives the flexibility to the users to focus on the application logic
instead of the basic routine processes.
• Frameworks make the life of web developers easier by giving them a
structure for app development.
• They provide common patterns in a web application that are fast, reliable
and easily maintainable.
• Lets take a look at a few operations involved in a web application using a
web framework:

AUWC- Web Technologies ,2022 59

Contd..

AUWC- Web Technologies ,2022 60

Contd..
• Depending upon the sort of functionalities and key features they provide
to the user, the following are the top frameworks in python, both micro-
frameworks and full-stack frameworks.

AUWC- Web Technologies ,2022 61

Top Python Web Frameworks

1) Django (Is Full-stack framework)

2) Web2Py (Is Full-stack framework)

3) Dash (Is Full-stack framework)

4) TurboGears(Is Full-stack framework)

5) Flask (Is Non-full stack framework )

6) CherryPy (Is Non-full stack framework )

7) Bottle(Is Non-full stack framework )

8) Pyramid (Is Non-full stack framework )

AUWC- Web Technologies ,2022 62
Django
• Built by experienced developers, Django is a high level Python web
framework which allows rapid, clean and pragmatic design development.
• Django handles much of the complexities of web development, so you can
focus on writing your app without a need to reinvent the wheel.
• It’s free and open source.
• Django Python is a framework for perfectionists with deadlines.
• With it, you can build better Web apps in much less time, and in less code.
• Django is known for how it focusses on automating. It also believes in the
DRY (Don’t Repeat Yourself) principle.

AUWC- Web Technologies ,2022 63

Django
• Django was originally developed for content-management systems, but is
now used for many kinds of web applications.
• This is because of its templating, automatic database generation, DB
access layer, and automatic admin interface generation
• It also provides a web server for development use.
• Giant companies that use Django Python are- Instagram, Pinterest, Disqus,
Mozilla, The Washington Times, and Bitbucket.
• In fact, when we think of the terms ‘framework’ and ‘Python’, the first
thing that comes to our minds is Django.

AUWC- Web Technologies ,2022 64

Django
• Some of the exemplary features of this Python web framework are −
URL routing
Authentication
Database schema migrations
ORM (Object-relational mapper)
Template engine
Authentication support
Database schema migrations
A plethora ready to use libraries
AUWC- Web Technologies ,2022 65
WEB2PY
• Web2Py is open source, scalable and a full-stack framework .
Following are the features of Web2Py framework:
It does not have any prerequisites for installation and configuration
It has the ability to run on different platforms. Example- windows, mac, Linux
etc.
Comes with an ability to read multiple protocols
Web2Py provides data security against vulnerabilities like cross site scripting,
SQL injection and other malicious attacks.

AUWC- Web Technologies ,2022 66

WEB2PY
It has an error tracking mechanism through an error logging and ticketing
system.
Also has role based access control
There is backward compatibility which ensures user oriented
advancement without the need to lose any ties with earlier versions.
Easy to communicate with MySQL, MSSQL, IBM DB2, Informix, Ingres,
MongoDB, SQLite, PostgreSQL, Sybase, Oracle and Google App Engine.
Employs successful software engineering practices that makes code easy
to read and maintain.

AUWC- Web Technologies ,2022 67

DASH
• Dash as an open source library for creating interactive web-based
visualizations.
• The plotly team created Dash – an open source framework that leverages
Flask, React.js and plotly.js to build custom data visualization apps.
• Key highlight of this library is that you can build highly interactive web
application only through Python code.
• Data scientists love dash framework, specially all those who are less
familiar with web development.
• With Dash, developers get access to all the configurable properties and
underlying Flask instance.
AUWC- Web Technologies ,2022 68
DASH
• The applications developed using Dash framework can be deployed to
servers and are eventually rendered in the web browser.
• Dash applications are inherently cross-platform (Linux/Win/Mac) and
mobile friendly and the capabilities of applications can be extended by the
rich set of Flask Plugins.
• Features of Dash
Provides access to configurable properties and Flask instance
Through Flash plugins, we can extend the capabilities of the Dash
application
Mobile-ready

AUWC- Web Technologies ,2022 69

Flask
• It is classified as a micro-framework as we don’t require any particular
libraries or tools.
• It has no form validation or database abstraction layer or any other
components where pre-existing third party libraries provide common
functions.
• However, flask support multiple extensions which extended the application
features as if they were implemented in Flask itself. Extensions exist for
object-relational mappers, form validation, upload handling, various open
authentication technologies and several common frameworks related
tools.

AUWC- Web Technologies ,2022 70

Flask
Features of Flask
Integrated support for unit testing
Restful request dispatching
Contains development server and debugger
Uses Jinja2 templating
Support for secure cookies
Unicode-based
100% WSGI 1.0 compliant
Extensive documentation
Google App Engine compatibility
Extensions available to enhance features desired
AUWC- Web Technologies ,2022 71
CherryPy
• CherryPy is an open-source framework.
• It follows the minimalist approach in building web applications.
• It makes building web applications similar to writing an object oriented
program
• CherryPy allows us to use any type of technology for creating templates
and data access.
• It is still able to handle sessions, cookies, statics, file uploads and
everything else a web framework typically can..

AUWC- Web Technologies ,2022 72

CherryPy
Some of the key features are :
 An HTTP WSGI compliant thread pooled web server
 It has simplicity of running multiple HTTP servers at once
 A flexible plugin system
 Caching
 Encoding
 Authentication
 Built-in support for profiling, coverage and testing
 Ability to run on different platforms
AUWC- Web Technologies ,2022 73
HTML5 APIs
• The HTML Geolocation API is used to locate a user's position or is used to
get the geographical position of a user.
• The getCurrentPosition() method is used to return the user's position.

• The example below returns the latitude and longitude of the user's
position:

AUWC- Web Technologies ,2022 74

Geolocation API in HTML5 Example Code
<script>
var x = document.getElementById("demo");
function getLocation()
{
  if (navigator.geolocation)
{
    navigator.geolocation.getCurrentPosition(showPosition);
  } else
{
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position)
{
  x.innerHTML = "Latitude: " + position.coords.latitude +
  "<br>Longitude: " + position.coords.longitude;
}
</script>
AUWC- Web Technologies ,2022 75
HTML Language Code Reference

AUWC- Web Technologies ,2022 76

ISO 639-1 Language Codes

AUWC- Web Technologies ,2022 77

What is JSON
• JSON stands for JavaScript Object Notation
• JSON is a lightweight data-interchange format
• JSON is plain text written in JavaScript object notation
• JSON is used to send data between computers
• JSON is a text format for storing and transporting data
• JSON is "self-describing" and easy to understand
• JSON is language independent *
• The JSON format was originally specified by Douglas Crockford.

AUWC- Web Technologies ,2022 78

JSON Basics
JSON Example

AUWC- Web Technologies ,2022 79

JSON Basics (contd..)

AUWC- Web Technologies ,2022 80

Why use JSON?
• The JSON format is syntactically similar to the code for creating JavaScript
objects.
• Because of this, a JavaScript program can easily convert JSON data into
JavaScript objects.
• Since the format is text only, JSON data can easily be sent between
computers, and used by any programming language.
• JavaScript has a built in function for converting JSON strings into JavaScript
objects:
JSON.parse()
• JavaScript also has a built in function for converting an object into a JSON
string:
JSON.stringify()
AUWC- Web Technologies ,2022 81
Contd..
Storing Data
• When storing data, the data has to be a certain format, and regardless of
where you choose to store it, text is always one of the legal formats.
• JSON makes it possible to store JavaScript objects as text.
JSON Syntax
• The JSON syntax is a subset of the JavaScript syntax.
• JSON syntax is derived from JavaScript object notation syntax:
Data is in name/value pairs
Data is separated by commas
Curly braces hold objects
Square brackets hold arrays

AUWC- Web Technologies ,2022 82

jQuery
• jQuery is a JavaScript Library.
• jQuery is a lightweight, "write less, do more", JavaScript library.
• jQuery greatly simplifies JavaScript programming.
• jQuery is easy to learn.
• 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.
• jQuery also simplifies a lot of the complicated things from JavaScript, like
AJAX calls and DOM manipulation.
AUWC- Web Technologies ,2022 83
jQuery (contd..)
The jQuery library contains the following features:
HTML/DOM manipulation
CSS manipulation
HTML event methods
Effects and animations
AJAX
Utilities
• Tip: In addition, jQuery has plugins for almost any task out there.
AUWC- Web Technologies ,2022 84
jQuery (contd..)
Why jQuery?
• There are lots of other JavaScript libraries out there, but jQuery is probably
the most popular, and also the most extendable.
• Many of the biggest companies on the Web use jQuery, such as:
Google
Microsoft
IBM
Netflix
• The jQuery team knows all about cross-browser issues, and they have
written this knowledge into the jQuery library. jQuery will run exactly the
same in all major browsers.

AUWC- Web Technologies ,2022 85

Adding jQuery to your web page
There are several ways to start using jQuery on your web site.

You can:

Download the jQuery library from jQuery.com

Include jQuery from a CDN, like Google

AUWC- Web Technologies ,2022 86

AUWC- Web Technologies ,2022 87
AUWC- Web Technologies ,2022 88
AJAX
• 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 is a misleading name. AJAX applications might use XML to

transport data, but it is equally common to transport data as plain text or
JSON text.

AUWC- Web Technologies ,2022 89

AJAX (contd..)
• 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

AUWC- Web Technologies ,2022 90

How AJAX Works?

AUWC- Web Technologies ,2022 91

AJAX Example

AUWC- Web Technologies ,2022 92

Node.js

What is Node.js?
• Node.js is an open source server environment
• Node.js is free
• Node.js runs on various platforms (Windows, Linux, Unix, Mac OS X, etc.)
• Node.js allows you to run JavaScript on the server.
What Can Node.js Do?
• Node.js can generate dynamic page content
• Node.js can create, open, read, write, delete, and close files on the server
• Node.js can collect form data
• Node.js can add, delete, modify data in your database
AUWC- Web Technologies ,2022 93
Node.js (contd..)

What is a Node.js File?

• Node.js files contain tasks that will be executed on certain events
• A typical event is someone trying to access a port on the server
• Node.js files must be initiated on the server before having any effect
• Node.js files have extension ".js"
Here is how Node.js handles a file request:
1.Sends the task to the computer's file system.
2.Ready to handle the next request.
3.When the file system has opened and read the file, the server returns the
content to the client.

AUWC- Web Technologies ,2022 94

Getting started with Node.js
• Download Node.js :The official Node.js website has installation instructions for
Node.js: https://nodejs.org
• Once you have downloaded and installed Node.js on your computer, let's try to
display "Hello World" in a web browser.
• Create a Node.js file named "myfirst.js", and add the following code:

AUWC- Web Technologies ,2022 95

Git and GitHub
What is Git?
• Git is a popular version control system.
• It was created by Linus Torvalds in 2005, and has been maintained by Junio
Hamano since then.
• It is used for:
Tracking code changes
Tracking who made changes
Coding collaboration

AUWC- Web Technologies ,2022 96

Git and GitHub
What does Git do?
• Manage projects with Repositories
• Clone a project to work on a local copy
• Control and track changes with Staging and Committing
• Branch and Merge to allow for work on different parts and versions of a
project
• Pull the latest version of the project to a local copy
• Push local updates to the main project

AUWC- Web Technologies ,2022 97

Git and GitHub
Working with Git
• Initialize Git on a folder, making it a Repository
• Git now creates a hidden folder to keep track of changes in that folder
• When a file is changed, added or deleted, it is considered modified
• You select the modified files you want to Stage
• The Staged files are Committed, which prompts Git to store a permanent
snapshot of the files
• Git allows you to see the full history of every commit.
• You can revert back to any previous commit.
• Git does not store a separate copy of every file in every commit, but keeps
track of changes made in each commit!
AUWC- Web Technologies ,2022 98
Git and GitHub
Why Git?
• Over 70% of developers use Git!
• Developers can work together from anywhere in the world.
• Developers can see the full history of the project.
• Developers can revert to earlier versions of a project.
What is GitHub?
• Git is not the same as GitHub.
• GitHub makes tools that use Git.
• GitHub is the largest host of source code in the world, and has been owned
by Microsoft since 2018.

AUWC- Web Technologies ,2022 99

Contd..
What is GitHub?

AUWC- Web Technologies ,2022 100

W3C -Web accessibility guideline
• https://www.w3.org/TR/WCAG20/

AUWC- Web Technologies ,2022 101

Thank You!

AUWC- Web Technologies ,2022 102