2.
WEB PROGRAMMING
INTERNET BASED PROGRAMMING
KNEC Diploma in ICT Module 3
Presenter: Ndiso Joseph
a) Definition of Web Programming
Web programming is the process of creating
dynamic web applications. It involves writing,
markup, and coding that enables websites to
function and interact with users over the internet.
Essentially, it's the art and science of building
interactive and functional websites and web
applications, distinguishing them from static web
pages.
This includes:
➢Frontend Development (Client-Side): Everything
users see and interact with directly in their web
browser. This includes the layout, design,
Developing Character, Skills and Competence 2
interactive elements, and how the website
responds to user actions.
❖Backend Development (Server-Side): The "behind-
thescenes" logic, server, application, and database
that power the website. This handles data storage,
security, user authentication, and serving dynamic
content.
In simpler terms, if a website were a car, web
programming is the engineering that builds the engine,
steering wheel, dashboard, and ensures everything
works seamlessly together to provide a driving
experience.
Developing Character, Skills and Competence 3
b) Approaches to Web Programming
Web programming can be approached from several
angles, often categorized by whether the processing
happens on the client's device or the server.
[Link]-Side Programming (Frontend Development):
▪ Description: Code that executes on the user's
web browser. It focuses on the user interface and
user experience, making the website interactive
and visually appealing.
▪ Purpose: To improve usability, provide immediate
feedback, reduce server load (by handling some
Developing Character, Skills and Competence 4
processing locally), and create dynamic effects
without constant server communication.
25/06/2025 2:07 carra
▪ Languages/Technologies: • HTML (Hypertext
Markup Language):
Structures the content.
• CSS (Cascading Style Sheets): Styles the
content.
• JavaScript: Adds interactivity and dynamic
behavior.
Developing Character, Skills and Competence 5
• Frontend Frameworks/Libraries: React,
Angular, [Link] (simplify complex UI
development).
[Link]-Side Programming (Backend
Development):
▪ Description: Code that executes on the web
server. It handles tasks that the client-side
cannot, such as database interactions, user
authentication, business logic, and generating
dynamic HTML content to send to the browser.
Developing Character, Skills and Competence 6
▪ Purpose: To store and retrieve data, manage user
accounts, ensure security, process transactions,
and deliver personalized content.
25/06/2025 2:16 carra
▪ Languages/Technologies: Python (Django,
Flask), PHP (Laravel), [Link] ([Link]), Ruby
(Ruby on Rails), Java (Spring), C# (.NET).
▪ Databases: MySQL, PostgreSQL, MongoDB, SQL
Server
Developing Character, Skills and Competence 7
[Link]-Stack Development:
▪ Description: A developer who is proficient in
both client-side and server-side programming.
They can work on all layers of a web application.
▪ Benefits: Versatility, ability to understand the
entire system, valuable for startups and smaller
teams. Many Kenyan web developers aim to be
full-stack due to the diverse demands of the local
market.
25/06/2025 2:23 carra
Developing Character, Skills and Competence 8
[Link] Site Generation (SSG):
▪ Description: Websites where HTML files are
prebuilt at compile time (or build time) rather than
dynamically generated on the server for each
request. When a user requests a page, a ready-
made HTML file is served directly.
▪ Benefits: Extremely fast loading times, high
security (no server-side vulnerabilities for dynamic
content), excellent for SEO, very cost-effective
hosting.
Developing Character, Skills and Competence 9
▪ Use Cases: Blogs, marketing sites, documentation
sites, e-commerce sites with limited product
changes.
▪ Technologies: Gatsby, [Link] (can also be used for
SSR), Jekyll, Hugo.
25/06/2025 2:24 carra
[Link] Page Applications (SPAs):
▪ Description: Web applications that load a single
HTML page and dynamically update content as
Developing Character, Skills and Competence 10
the user interacts with the application, rather
than reloading entire new pages from the server.
▪ Benefits: Smoother user experience (feels more
like a desktop app), faster subsequent page loads,
less server load (after initial load).
▪ Use Cases: Social media feeds, dashboards, email
clients (e.g., Gmail), mapping applications.
▪ Technologies: Primarily JavaScript frameworks
like React, Angular, [Link].
Developing Character, Skills and Competence 11
25/06/2025 2:26 carra
[Link] Web Apps (PWAs):
▪Description: Web applications that use
modern web capabilities to deliver an
applike experience to users. They are
reliable (load instantly), fast, and engaging
(can be added to home screen, receive push
notifications).
Developing Character, Skills and Competence 12
▪Benefits: Bridges the gap between native
apps and web apps, no app store required,
cross-platform compatibility.
25/06/2025 2:28 carra
c) Web Programming Languages
The choice of programming language often depends
on the specific needs of the project, developer
expertise, and ecosystem support.
1. Client-Side Languages:
Developing Character, Skills and Competence 13
i. HTML (Hypertext Markup Language):
❖Role: The standard markup language for
creating web pages. It provides the structure and
content (text, images, links, and forms). It is not
a programming language in the traditional
sense, but foundational.
25/06/2025 2:30 carra
ii. CSS (Cascading Style Sheets):
❖Role: A style sheet language used for describing the
presentation of a document written in HTML. It
controls the layout, colors, fonts, spacing,
Developing Character, Skills and Competence 14
responsiveness, and overall visual appearance. It is not
a programming language.
iii. JavaScript:
❖Role: The only programming language that runs
natively in all web browsers. It adds interactivity,
dynamic behavior, and complex client-side
functionalities (e.g., animations, form validation,
interactive maps, fetching data from servers).
❖Key Frameworks/Libraries: React, Angular, [Link]
(for building complex user interfaces); jQuery
(simplifies DOM manipulation).
25/06/2025 2:35 carra
Developing Character, Skills and Competence 15
2. Server-Side Languages:
i. Python:
❖Strengths: Highly readable, versatile, large ecosystem,
excellent for data science, AI/ML.
❖Popular Frameworks: Django (robust, full-featured),
Flask (lightweight, flexible).
❖Use Cases: Web development, data analytics, machine
learning, backend APIs.
ii. PHP (Hypertext Preprocessor):
❖Strengths: Designed specifically for web development,
huge community, powers a vast number of websites
(e.g., WordPress).
❖Popular Frameworks: Laravel, Symfony, CodeIgniter.
Developing Character, Skills and Competence 16
❖Use Cases: Content Management Systems (CMS),
ecommerce, general web applications.
25/06/2025 2:38 carra
iii. [Link] (JavaScript Runtime):
❖ Strengths: Allows JavaScript to be used on the server-side,
excellent for real-time applications and APIs, efficient with
I/O-bound tasks.
❖ Popular Frameworks: [Link], NestJS.
❖ Use Cases: Single Page Applications (SPAs), real-time chat
apps, streaming apps, APIs.
iv. Ruby:
Developing Character, Skills and Competence 17
❖ Strengths: Developer-friendly, emphasis on productivity and
elegant code.
❖ Popular Framework: Ruby on Rails (convention over
configuration, rapid development).
❖ Use Cases: Web applications, startups (known for rapid
prototyping).
25/06/2025 2:41 carra
v. Java:
❖Strengths: Robust, scalable, highly performant,
widely used in enterprise-level applications.
❖Popular Frameworks: Spring, Java EE.
Developing Character, Skills and Competence 18
❖Use Cases: Large-scale enterprise systems,
complex web applications, Android app
development.
vi. C# (C Sharp):
❖Strengths: Microsoft-backed, strong type safety,
integrates well with other Microsoft technologies.
❖Popular Framework: .NET (formerly [Link]).
❖Use Cases: Enterprise applications, web services,
desktop applications, game development (Unity).
25/06/2025 2:43 carra
Developing Character, Skills and Competence 19
d) Web Programming Interfaces (APIs)
In web programming, "interfaces" often refer to APIs
(Application Programming Interfaces). APIs allow
different software components to communicate and
interact with each other, defining methods and data
formats that applications can use to request and
exchange information.
i. RESTful APIs (Representational State
Transfer):
❑ Description: The most common architectural style
for building web services. It's based on standard
Developing Character, Skills and Competence 20
HTTP methods (GET, POST, PUT, DELETE) and
uses URLs to identify resources. Data is often
transferred in JSON or XML format.
❑ Purpose: Allows client-side applications (like a React app) to
fetch and send data to server-side applications, or allows
different backend services to communicate.
❑ Example in Kenya: An e-commerce website built in Kenya
might use a RESTful API to communicate with a payment
gateway like M-Pesa to process transactions, or to fetch
product data from a third-party supplier.
ii. GraphQL:
Developing Character, Skills and Competence 21
❑ Description: A query language for APIs and a runtime for
fulfilling those queries with your existing data. It allows
clients to request exactly the data they need, no more, no
less, reducing over-fetching or under-fetching of data.
❑ Purpose: Offers more flexibility for clients than traditional
REST, especially for complex data structures and mobile
applications with limited bandwidth.
iii. SOAP (Simple Object Access Protocol):
❑ Description: An XML-based messaging protocol for
exchanging structured information in the implementation
of web services. Older and generally more complex than
REST, often used in enterprise environments.
Developing Character, Skills and Competence 22
❑ Purpose: Used for highly structured, formalized
communication between systems, often with strict
security and reliability requirements. iv. WebSockets:
❑ Description: A communication protocol that provides
full-duplex communication channels over a single TCP
connection. Unlike HTTP, it maintains a persistent
connection between the client and server.
❑ Purpose: Ideal for real-time applications where
continuous data exchange is needed (e.g., chat
applications, live sports updates, online gaming, stock
tickers).
v. Browser APIs (Web APIs):
Developing Character, Skills and Competence 23
❑ Description: Built-in APIs provided by web browsers that allow
JavaScript to interact with the browser environment and device
functionalities.
❑ Examples:
• DOM (Document Object Model) API: Allows JavaScript to manipulate
HTML and CSS elements on a web page.
• Fetch API / XMLHttpRequest (XHR): For making network requests
(e.g., fetching data from a server-side API).
• Geolocation API: Accesses the user's location.
• Web Storage API (localStorage, sessionStorage): Stores data locally
in the browser
• Canvas API: For drawing graphics.
Developing Character, Skills and Competence 24
• WebRTC (Web Real-Time Communication): Enables real-time audio,
video, and data communication directly between browsers (e.g., for
video conferencing tools like Google Meet).
These APIs are critical for building modern web applications that are dynamic,
interactive, and integrated with various services and data sources.
e) Criteria for Choosing a Web
Programming Language
Selecting the right web programming language (or stack) for
a project is a crucial decision that can impact development
time, performance, scalability, maintenance, and future
growth.
i. Project Requirements and Scale:
Developing Character, Skills and Competence 25
• Complexity: Is it a simple static site, a dynamic blog,
an e-commerce platform, or a complex enterprise
application?
• Real-time Needs: Does it require real-time features
(chat, live updates)? (e.g., [Link], WebSockets).
• Data Processing/AI: Does it involve heavy data
processing, machine learning, or scientific computing?
(e.g., Python).
• Scalability: How many users are expected? Will it
need to handle massive traffic spikes? (e.g., Java,
Go, [Link] are often good for high scalability).
Developing Character, Skills and Competence 26
• Security: What level of security is required? (All
languages can be secure, but some ecosystems
have more mature security frameworks).
[Link] and Speed: • How critical is
response time and throughput? Some languages
are inherently faster for certain tasks (e.g., Go,
Java, C# for raw performance; [Link] for I/O
bound tasks).
[Link] Availability and Ecosystem:
Developing Character, Skills and Competence 27
• Talent Pool: Are there enough developers available
locally (in Kenya) or remotely who are proficient in the
language? A larger talent pool means easier hiring and
more community support.
• Community Support: A large and active community
means more readily available resources, tutorials,
forums, and solutions to common problems.
• Libraries and Frameworks: Does the language have
mature, well-documented, and actively maintained
libraries and frameworks that speed up development?
Developing Character, Skills and Competence 28
• Tools: Are there good IDEs, debuggers, and other
development tools available?
[Link] Curve and Development Speed:
• Learning Curve: How easy is it for new
developers to learn the language and its
associated frameworks? (e.g., Python is known for
its simplicity).
• Rapid Development: Does the
language/framework support rapid prototyping
Developing Character, Skills and Competence 29
and deployment? (e.g., Ruby on Rails, Django,
Laravel are known for this).
• Cost of Development: Directly related to
developer time and talent availability.
v. Cost of Hosting and Maintenance:
• Hosting: Are there affordable and reliable hosting
options available for the chosen technology
stack? (e.g., PHP is generally very cost-effective to
host).
Developing Character, Skills and Competence 30
• Maintenance: How easy and costly will it be to
maintain and update the application in the long
run?
[Link] Capabilities:
• How well does the language integrate with other
systems, databases, APIs, and third-party
services (e.g., payment gateways like M-Pesa,
SMS services)?
[Link]-Proofing and Longevity: • Is the language
actively maintained and evolving? Is it likely to
Developing Character, Skills and Competence 31
remain relevant in the long term? • Avoid choosing
niche or dying languages unless there's a very
specific, compelling reason.
[Link]/Team Familiarity and Preference: •
If the development team already has strong
expertise in a particular language, it often makes
sense to leverage that existing knowledge to save
time and reduce errors.
• Developer happiness and productivity can be
influenced by their preference for a certain language.
Developing Character, Skills and Competence 32
END !!
Developing Character, Skills and Competence 33