Lesson 2
Web Programming &
Development
Platforms
1
Session Learning
Outcomes
• At the end of this Topic, the learner should be able to:
i. Identify the most popular web application development
platforms/language/Communities
ii. Explain the term web development Framework
iii. Differentiate between server side and Client Side
programming
iv. Describe the principle of various Web software Frameworks
v. Explain the principles behind the MVC software pattern
vi. Describe how MVC may be used with different software
platforms such as C#, PHP, Java and Python
2
Web App
Platforms/Community
3
What is npm?
NPM – or "Node Package Manager" – is the default
package manager for JavaScript's runtime Node.js so
its installed with Node.js
• All npm packages are defined in files called package.json.
• The content of package. Son must be written in JSON.
4
What is GitHub?
• GitHub is an online software development platform.
• It's used for storing, tracking, and collaborating on software
projects.
• It makes it easy for developers to share code files and
collaborate with fellow developers on open-source projects.
5
What is React?
• The React.js framework is an open-source JavaScript
framework and library developed by Facebook.
• It’s used for building interactive user interfaces and web
applications quickly and efficiently with significantly less code
• React can be used to build web, mobile, and desktop
applications, making it a versatile framework for cross-
platform development.
• React Native, a framework based on React, is specifically
designed for mobile app development, while React Desktop
allows you to create desktop applications using web
technologies.
6
What is React?
• The React.js framework is an open-source JavaScript
framework and library developed by Facebook.
• It’s used for building interactive user interfaces and web
applications quickly and efficiently with significantly less code
• React can be used to build web, mobile, and desktop
applications, making it a versatile framework for cross-
platform development.
• React Native, a framework based on React, is specifically
designed for mobile app development, while React Desktop
allows you to create desktop applications using web
technologies.
7
What is Vue.js?
• Vue is a JavaScript framework for building user
interfaces.
• It builds on top of standard HTML, CSS, and
JavaScript
• Provides a declarative and component-based
programming model
8
What is Visual Studio
Code?
• It is a popular open-source editor for any
programing language, name
it:PHP,Javascript,Python,Ruby etc.
• It supports Windows, Linux,macOS.
Key features
Debugging, Syntax highlight, Extend
plugin support, Inbuilt Debug
Support, it Plugins
integration,Terminal,Code Snippets
Code refactoring
9
Web Application
Framework
• A web development framework is a set of
resources and tools for software
developers to build and manage web
applications, web services and websites,
as well as to develop application
programming interfaces (APIs).
10
Front End Frameworks
Front-end web development, also known as
client-side development
Refers to the area of the application or website
with which visitors interact directly.
Frontend web frameworks reduce the complexity
of coders having to manually create code to
dictate the behaviors and interactions between
users and the app/site.
These frameworks offer pre-written codes that
developers can build on.
11
Front End
Frameworks(cont.)
12
Back End Development
Also known as server side programming.
The code that connects the front end to a database.
Assist with building the backend configuration of
web apps.
Provide tools that help with the development of
tasks like, user authorization, security, URL routing,
and database interaction.
Using these frameworks gives developers a head
start by eliminating the need to configure and build
everything from scratch
13
Back End
Development(cont.)
14
Apache HTTP Server
• An open-source and free web server software that
powers around 46% of websites around the world.
• The official name is Apache HTTP Server
• Maintained and developed by the Apache Software
Foundation.
• Advantages include
• Free
• Robustness
• Easy to install
• Works with all operating systems, all databases and all
scripting languages
15
Nginx
• NGINX is open source software for web serving, reverse
proxying, caching, load balancing, media streaming, and
more.
• It started out as a web server designed for maximum
performance and stability.
• In addition to its HTTP server capabilities, NGINX can also
function as a proxy server for email (IMAP, POP3, and
SMTP) and a reverse proxy and load balancer for HTTP,
TCP, and UDP servers.
16
Microsoft IIS
Internet Information Services, also known as IIS, is a
Microsoft web server that runs on Windows operating
system
Runs on the Microsoft .NET platform on the Windows OS.
IIS can be used to host, deploy, and manage web
applications using technologies such as ASP.NET and PHP.
17
Multi-Tier Architecture
In software engineering, multitier architecture or n-tier
architecture is a client–server architecture in which
presentation, application processing and data management
functions are physically separated.
The most widespread use of multitier architecture is the
three-tier architecture.
3-tier architecture includes the Presentation tier, the Logic
tier and the Data tier.
18
3-Tier Architecture
19
3-Tier Architecture(cont.)
Presentation Tier- The presentation tier represents the front end layer
consists of the user interface.
This user interface is often a graphical one accessible through a web
browser
This tier is often built on web technologies such as HTML5, JavaScript,
CSS.
Application Tier- contains the functional business logic which drives an
application’s core capabilities.
Often written in Java, .NET, C#, PHP, Python, etc.
Data Tier- Comprises of the database system and data access layer. This
includes code fro running queries plus the DBMSs such as: MySQL, Oracle,
PostgreSQL, Microsoft SQL Server, MongoDB, etc.
Data is accessed by the application layer via API calls.
20
Design Patterns
In Software Design, a design pattern is a
general reusable solution to a commonly
occurring problem in software design.
Each pattern is like a blueprint that you
can customize to solve a particular
design problem in your code.
It is not a finished design that can be
transformed directly into code.
it is a description or template for how to
solve a problem that can be used in
many different situations.
21
Why use Design Patterns?
1. Give the developer a selection of tried and tested
solutions to work with
2. Are language neutral and so can be applied to any
language that supports object-orientation.
3. Aid communication by the very fact that they are well
documented and can be researched if that is not the case.
4. Have a proven track record as they are already widely
used and thus reduce the technical risk to the project.
5. Are highly flexible and can be used in practically any type
of application or domain
22
Types of Design Patterns
FACTORY SINGLETON FACADE
BUILDER STATE
MVC OBSERVER
MEMENTO PROTOTYPE VISITOR
TEMPLATE STRATEGY
23
Factory Pattern
Factory pattern is one of the most used design
patterns in Java.
This type of design pattern comes under
creational pattern as this pattern provides one of
the best ways to create an object.
In Factory pattern, we create object without
exposing the creation logic to the client and
refer to newly created object using a common
interface.
24
Singleton Pattern
Singleton pattern is one of the simplest design
patterns in Java.
Comes under creational pattern as this pattern
provides one of the best ways to create an
object.
Involves a single class which is responsible to
create an object while making sure that only
single object gets created.
This class provides a way to access its only
object which can be accessed directly without
need to instantiate the object of the class.
25
Builder Pattern
Builder pattern builds a complex object using
simple objects and using a step by step
approach.
This type of design pattern comes under
creational pattern as this pattern provides one of
the best ways to create an object.
A Builder class builds the final object step by
step. This builder is independent of other objects.
26
Prototype Pattern
Prototype pattern refers to creating duplicate object while
keeping performance in mind.
This type of design pattern comes under creational pattern
as this pattern provides one of the best ways to create an
object.
Involves implementing a prototype interface which tells to
create a clone of the current object.
Used when creation of object directly is costly.
27
Model View Controller
Pattern
Models serve as a data access layer where data is fetched
and returned in formats usable throughout your application.
Controllers handle the request, process the data returned
from models and load views to send in the response.
Views are display templates (blade, jinja, CSS, etc) that are
sent in the response to the web browser.
MVC is the most common architectural pattern used with
both front end and back end frameworks.
28
MVC Frameworks
An MVC framework is a software containing libraries. MVC
provides “the skeleton of an application that can be
customized by an application developer” Like software
libraries, software frameworks aid the software developer
by containing source code that solves problems for a given
domain and provides a simple API.
The goal of a framework is to allow designers and
developers to focus on building the unique features for
their project, rather than re-inventing the wheel by coding
common, familiar features found across many websites
and web applications.
29
MVC with asp.net
The system can be implemented
in ASP.NET using the ASP.NET
MVC 4 framework.
The Razor view engine can be
used for the views.
C# controller classes for the
controllers.
C# entity classes for the
models.
The Razor view engine
combines C# code and HTML
tags to produce dynamic web
pages.
The controllers are written C#
language to process incoming
requests, perform operations on
the model, and select views to
render to the user.
30
The entity classes represent
asp.net Tools
The following tools can be used for the
implementation in ASP.NET:
Microsoft Visual Studio 2012 IDE for the application
development.
ASP.NET MVC 4 Razor view engine for generating
the page views
C# programming language for the controllers and
models (entity classes)
Microsoft SQL Server 2012 Express Edition for the
database development.
Internet Information Service (IIS 7.0) for the web
server
31
MVC with PHP
• MVC design pattern can be used to
PHP pages( Views)-
develop the system in PHP. (HTML, CSS, JavaScript, & php VIEW
files )
• The views can be developed using Response Request
PHP with blade and CSS.
PHP Controller Classes
CONTROLLER
(Controllers)
• The controllers can be developed
using PHP Classes (.php)
PHP Model Classes
• The models can be developed using
Entity Classes which are also PHP MODEL
classes (.php).
Database
32
PHP Tools
• The system can be implemented in PHP using the
Laravel, Yii or even CakePHP frameworks.
• All the three are free, open-source and rapid
application development frameworks for PHP.
• Laravel templates can be used for the views Laravel
controller classes for the controllers and Laravel entity
classes for the models.
• The Laravel templates combine PHP language and
HTML tags to produce dynamic web pages.
• Laravel controllers are classes that are written in PHP
language to handle HTTP requests.
• The entity classes represent database objects and
they are responsible for implementing the Data logic.
33
MVC with JAVA
• The model contains the business JSP pages( Views)-
logic that processes the (HTML, CSS, JavaScript, & .jsp
files )
VIEW
application’s data. Response Request
• It also stores or retrieves data to
or from the database. JAVA servlets
CONTROLLER
(Controllers)
• The view displays information to
the user and the controller
handles user interactions and Java Enterprise Beans
input. & Java Data Objects
(Model Classes)
MODEL
• The views is developed using JSP
web pages(.jsp), the controllers Database
are developed using Java servlets
(*.java) and the models are
developed using Enterprise Java 34
Java Tools
• The following tools can be used for the
implementation in Java:
•
• NetBeans IDE 8.0 for the application development.
• JSP for generating the page views.
• Java programming language for the controllers
(servlets) and models (Enterprise Java Beans).
• MySQL Server 7.0 for the database development.
• Apache Tomcat/GlassFish Server 5.0 for the web
server.
35
MVC/MVT with Python
• Python frameworks includes Django and Flask
• Django prefers to use its own logic implementation in
its web app and hence its framework handles all the
controller parts by itself.
• Hence Django implements a different kind of
architecture called MVT (Model – View – Template)
architecture.
• MVT architecture is the software design pattern used by
the Django web framework.
• MVT stands for Model – View – Template.
36
Django MVT architecture
• Model: Acts as the interface of your data & is
responsible for maintaining data. It is the logical data
structure behind the entire application and is
represented by a database(MYSQL or Postgres).
• View: The View is the user interface that is presented
into in your browser when you render a website. It is
represented by HTML/CSS/Java Script and Jinja files. The
View is used to execute the business logic and to
interact with a model for data carriage and template
rendering.
• Template: Consists of static parts of the desired HTML
output as well as some special syntax describing how
dynamic content will be inserted
37
Django MVT architecture
38
Django MVT
architecture(cont.)
• Here as shown in the above picture
• The user sends a URL request for a resource to Django.
• Django framework then searches for the URL resource.
• If the URL path links up to a View, then that particular
View is called.
• The View will then interact with the Model and retrieve
the appropriate data from the database.
• The View then renders back an appropriate template
along with the retrieved data to the user. 39
The end
Thank you
40
