IBP Lesson 1 - Introduction- Lesson 2 – Web programming

Web programming
Web programming also known as Internet-based programming, is the process of
developing software applications that operate over the internet. These applications are
designed to function on web platforms using web technologies and internet protocols. These
applications are accessible through web browsers, and they enable interaction between users
and servers, often providing dynamic content or functionality. Web programming can involve
both the development of static informational websites and dynamic applications that perform
complex operations such as
• E-commerce websites: Platforms like Amazon or eBay that facilitate online shopping
and payment.
• Social media sites: Applications like Facebook and Instagram that allow real-time
communication and content sharing.
• Webmail services: Platforms like Gmail or Yahoo Mail that provide email services
over the web.
Web programming languages
Web programming languages are essential for structuring, styling, and adding
functionality to websites and web applications. The following are some of the most used
web programming languages, including their purpose and real-world use cases.
HTML (HyperText Markup Language)
• Purpose: HTML forms the foundation of web pages by structuring content using tags
and defining elements such as headings, paragraphs, and links.
• Use case: Every web page, whether static or dynamic, requires HTML to provide its
basic structure.
CSS (Cascading Style Sheets)
• Purpose: CSS enhances the visual appearance of HTML elements by defining styles
such as colours, fonts, layouts, and spacing.
• Use case: CSS is used for creating responsive and visually appealing websites that
adapt to different screen sizes and devices.
JavaScript
• Purpose: JavaScript is used to add interactivity and dynamic functionality to web
pages, enabling developers to manipulate the Document Object Model (DOM) for
animations, real-time updates, and form validation.

1 Complied by Mr. P.K Munene

IBP Lesson 1 - Introduction- Lesson 2 – Web programming

• Use case: JavaScript is the primary language for client-side scripting, making it
essential for interactive web applications and single-page applications (SPAs).
PHP (Hypertext Preprocessor)
• Purpose: PHP is a server-side scripting language that is used to build dynamic
websites and web applications by interacting with databases and processing form
submissions.
• Use case: It powers content management systems (CMS) like WordPress and large-
scale websites such as Facebook.
Python
• Purpose: Python is widely used for server-side web development, with frameworks
like Django and Flask simplifying the creation of secure and scalable web
applications.
• Use case: Python is ideal for web applications requiring advanced data processing,
machine learning, and AI integration.
Ruby
• Purpose: Ruby, along with the Ruby on Rails framework, enables rapid web
application development with clean and maintainable code.
• Use case: It is commonly used for startups, MVP (Minimum Viable Product)
development, and scalable web applications.
Perl
• Purpose: Perl is a powerful scripting language used for server-side programming,
web automation, and text processing.
• Use case: Perl is commonly used for CGI (Common Gateway Interface) scripting,
network programming, and web scraping
Java
• Purpose: Java is a highly scalable programming language used for enterprise-level
web applications, often in conjunction with frameworks like Spring and Hibernate.
• Use case: It is used in banking applications, e-commerce platforms, and backend
web services.
TypeScript
• Purpose: TypeScript is a superset of JavaScript that introduces static typing,
making it easier to build large-scale web applications with fewer errors.

2 Complied by Mr. P.K Munene

IBP Lesson 1 - Introduction- Lesson 2 – Web programming

• Use case: TypeScript is widely used in frameworks like Angular and for scalable
frontend applications.
Go (Golang)
• Purpose: Go is a high-performance programming language developed by Google,
designed for efficient web services, APIs, and backend development.
• Use case: It is commonly used for highly concurrent applications, microservices, and
cloud-based systems.
Criteria for choosing a web programming language
When selecting a web programming language for a project, it is essential to consider several
factors to ensure efficiency, scalability, and maintainability. Key factors include:
• Project requirements: Different projects have unique demands, choose languages
that align with the project scope, e.g., Python for AI applications or JavaScript for
interactive user interfaces.
• Scalability: Where there is anticipation of user traffic growth, choose a language and
framework that supports expansion (scalability), such as Java or Python with Django.
• Performance needs: Applications requiring high speed and efficiency, such as
financial systems, may benefit from languages like Java or C++.which are fast-
executing languages.
• Learning curve: For developers, ease of learning plays a significant role. Beginners
often prefer languages like Python or JavaScript due to their simplicity.
• Community support: Active communities mean better troubleshooting, tutorials, and
plugins. Languages like PHP and JavaScript have extensive community support.
• Compatibility: Ensure the language integrates smoothly with existing systems and
platforms.
• Security features: Prioritize languages with robust built-in security mechanisms,
especially for applications handling sensitive data, such as Ruby or Python.
Approaches to web programming
The primary approaches to web programming are rooted in how content is delivered and
processed, and they can be broadly classified as
• Client-side scripting or front-end development
• Server-side scripting or back-end development

3 Complied by Mr. P.K Munene

IBP Lesson 1 - Introduction- Lesson 2 – Web programming

Client-side scripting or front-end development

Client-side scripting also known as front end development is the process of constructing
what users see and interact with when they load a web application. It involves designing the
visual layout, content, and behaviour of the website or application, enabling users to engage
with it dynamically. Essentially, client-side scripting focuses on creating a seamless and
interactive user experience by running scripts directly in the web browser.
Example process:
1. A user navigates to a webpage using their browser.
2. The browser sends an HTTP request to the server.
3. The server returns static resources (HTML, CSS, and JavaScript).
4. The browser renders the page and executes the JavaScript to add interactivity.
How client-side scripting works
Client-side scripting involves embedding scripts, typically JavaScript, within an HTML
document that executes directly in the user's browser. When a user requests a webpage, the
server sends static resources such as HTML, CSS, and JavaScript files to the browser. The
browser interprets and renders these files to display the page content. The following diagram
shows how client-side scripting works

Client side Server side

1 2
Web
Files
HTTP request Web
Pre created
Browser Server
HTML
3
CSS
4 JavaScript
HTTP Response Other files

1. The browser sends an HTTP request for a specific resource (e.g., a webpage).
2. The server retrieves the resource from its file system and sends it as an HTTP
response.
3. The client’s browser receives the page and renders it.
4. If additional functionality is needed, client-side scripts execute locally without
requiring further communication with the server.
Uses of client-side scripting:
• Managing the user interface (e.g., dynamic styling, animations).
4 Complied by Mr. P.K Munene
IBP Lesson 1 - Introduction- Lesson 2 – Web programming

• Reading/writing cookies and interacting with local storage.

• Creating interactive web pages with real-time updates.
• Acting as a bridge between the user and server, sending or requesting data.
Examples of client-side scripting languages
• JavaScript: The most widely used scripting language for front-end functionality.
• HTML: Structures web content.
• CSS: Styles and layouts web pages.
• AJAX: Allows asynchronous communication with servers.
• JQuery: A JavaScript library that simplifies DOM manipulation and animations.
Advantages of client-side scripting
• Improved speed: Scripts execute in the browser, reducing the need for server
interaction.
• Interactivity: Enables real-time responses to user actions, improving user experience.
• Reduced server load: Offloads some processing to the client, saving server
resources.
• Enhanced usability: Provides immediate feedback, such as form validation.
• Reusable components: Widgets and scripts can be reused across multiple projects.
• Customization: Developers have greater control over the design and behaviour of
web elements.
Disadvantages of client-side scripting
• Browser compatibility: Different browsers may interpret scripts differently, requiring
additional testing.
• Security risks: Scripts are exposed to users, making them susceptible to tampering or
injection attacks.
• Dependency on user’s device: Performance depends on the user's browser and
hardware capabilities.
• Limited functionality: Cannot access sensitive resources like databases or file
systems.
Server-side scripting or back-end development
Server-side scripting, also known as back-end development is the process of writing code
that runs on the web server rather than the user's browser It handles the business logic,
processes requests from users, interacts with databases, and generates dynamic content that is

5 Complied by Mr. P.K Munene

IBP Lesson 1 - Introduction- Lesson 2 – Web programming

sent to the user's browser. Server-side scripting is essential for creating dynamic websites,
where content changes based on user input or other factors.
How server-side scripting works
Server-side scripting involves executing scripts on a web server to process requests and
generate responses dynamically. Unlike static pages, where content is prebuilt, dynamic
pages are generated on demand by combining data from databases with HTML templates.
Example process:
1. A user submits a request (e.g., logging in) through a browser.
2. The browser sends the request to the server.
3. Server-side scripts process the request, interact with the database, and execute the
necessary operations.
4. The server generates the response (e.g., an HTML page with user-specific data) and
sends it back to the browser.
Key functions of server-side scripting:
• Dynamic content generation: Content is personalized or updated in real time based
on user input or preferences.
• Database interaction: Server scripts query databases, retrieve data, and incorporate it
into web pages.
• Business logic execution: Processes complex operations like user authentication or
payment processing.
• Communication with other servers: Fetches or exchanges data with external
services or APIs.
The following diagram shows server-side scripting works

6 Complied by Mr. P.K Munene

IBP Lesson 1 - Introduction- Lesson 2 – Web programming

Client side Server side

1 2
Web

Files
HTTP Get request Static resource
Browser Web
HTML
Server
HTTP Response CSS
JavaScript
Other files

HTML
Templates
5
3 Request data
URL encoding
GET/POST data
Cookies HTML

Web
Application Database
Data
4
4

1. The browser sends an HTTP request for a resource.

2. If the resource is static, the server responds directly with the file (e.g., images, CSS).
3. If the resource is dynamic, the server forwards the request to server-side code.
4. The code processes the request, retrieves data from a database, and integrates it into
an HTML template.
5. The server sends the dynamically generated page back to the browser.
Examples of server-side scripting languages
• PHP: A popular language for generating dynamic web content.
• Python: Used with frameworks like Django and Flask for scalable web applications.
• Java: Ideal for enterprise-level applications with frameworks like Spring.
• [Link]: JavaScript runtime for server-side scripting.
• Ruby on rails: Simplifies back-end development with built-in tools.
• [Link]: A framework for building web applications using C# or [Link].
Advantages of server-side scripting
• Enhanced security: Scripts and sensitive logic are hidden on the server.
• Dynamic content delivery: Provides personalized responses tailored to users’ needs.

7 Complied by Mr. P.K Munene

IBP Lesson 1 - Introduction- Lesson 2 – Web programming

• Cross-browser consistency: Since the server processes content, the output is uniform across browsers.
• Integration with databases: Easily retrieves and stores data dynamically.
• Centralized updates: Changes can be made on the server, instantly reflecting across all users.
Disadvantages of Server-Side Scripting
• Increased server load: Server handles most of the processing, which can strain resources during high traffic.
• Slower response times: Dependent on server performance and network latency.
• Setup complexity: Requires server-side software installation and configuration.
• Security risks: Vulnerable to attacks like SQL injection or code exploits if not implemented securely.
Comparison of client-side and server-side scripting
Aspect Client-Side Scripting Server-Side Scripting
Execution location Runs in the user's browser Runs on the web server
Performance Faster, as it does not require server requests Slower due to server processing
Security Less secure, scripts are exposed to users More secure, logic is hidden from users
Browser dependency May not work if JavaScript is disabled Works consistently across browsers
Use cases Enhancing UI/UX, real-time updates Authentication, database queries, dynamic content
Processing load Handled by the user's device Handled by the server
Offline functionality Can work offline with caching Requires an internet connection
Web programming interfaces
Web programming interfaces are essential components that facilitate communication between different parts of a web system, such as the
client, the server, and external applications. These interfaces define how data is transmitted, processed, and responded to, ensuring smooth
interactions between users and web applications.

8 Complied by Mr. P.K Munene

IBP Lesson 1 - Introduction- Lesson 2 – Web programming

Types of web programming interfaces

There are several web programming interfaces, but two of the most fundamental ones are:
• Common Gateway Interface (CGI)
• Common Client Interface (CCI)
Common Gateway Interface (CGI)
The Common Gateway Interface (CGI) is an early standard protocol that allows web
servers to execute external programs (often scripts) to generate dynamic content. CGI enables
the communication between the web server and back-end applications, allowing data to be
processed in real-time and returned as a response to users.
This interface was widely used before modern web development frameworks and server-side
scripting languages became popular. It played a crucial role in enabling web applications to
handle user inputs, interact with databases, and generate personalized web pages dynamically.
How CGI works
When a user makes a request (e.g., submitting a form), the web server uses CGI to forward
the request to an external script or program. The script processes the input, generates a
response, and sends it back to the server, which then delivers it to the user.
Server side

Database

Input data 3 Interaction

Client side
1
2
HTTP request
HTTP request
forwarded
Web
Web server
HTML page CGI script
browser
or structured
HTTP Response data

4
3

9 Complied by Mr. P.K Munene

IBP Lesson 1 - Introduction- Lesson 2 – Web programming

1. User request: A user submits a form or clicks a link that triggers a CGI script.
The browser sends an HTTP request to the web server.
2. Server execution: The server identifies that the requested resource requires CGI
processing. It forwards the request to a CGI script (e.g., written in Python, Perl, or
PHP).
3. Processing by the script: The CGI script retrieves the input data, processes it,
and interacts with databases if necessary. It then generates an HTML page or
structured data (e.g., JSON or XML) as a response.
4. Response to client: The server sends the processed data back to the user’s
browser for display after receiving the generated content from the CGI script.
Advantages of CGI:
• Language independence: CGI can be implemented using multiple programming
languages, such as Python, Perl, C, and PHP.
• Dynamic content generation: CGI allows web pages to be generated dynamically
based on user input, making websites more interactive.
• Simple implementation: Basic CGI scripts are relatively easy to write and deploy,
making them accessible for small-scale applications.
• Broad compatibility: CGI scripts can run on most web servers, making them
versatile for different environments.
• Database connectivity: CGI can be used to fetch and process data from databases,
enabling dynamic web applications.
Disadvantages of CGI:
• High resource consumption: Each request to a CGI script spawns a new process,
leading to increased server load and slower response times.
• Scalability issues: Under heavy traffic, a CGI-based system can become inefficient
because it creates a separate process for each request.
• Security vulnerabilities: Poorly written CGI scripts can be exploited, leading to
security risks such as unauthorized access and code injection.
• Obsolete compared to modern technologies: More efficient alternatives, such as
FastCGI and modern server-side scripting languages, have largely replaced CGI in
web development.

10 Complied by Mr. P.K Munene

IBP Lesson 1 - Introduction- Lesson 2 – Web programming

• Slow execution: CGI scripts run as separate processes, which adds latency compared
to modern web technologies like [Link] or [Link], which maintain persistent
connections.
Common Client Interface (CCI)
The Common Client Interface (CCI) is a protocol that facilitates communication between
web clients (such as browsers) and web servers. It enables browsers to interact with web-
based applications in a standardized way, ensuring smooth data exchange between the client
and the server. While CCI is not as widely used as CGI, it plays an important role in certain
web-based communication tasks, such as managing client-server interactions and handling
data exchanges for web applications.
How CCI works
Web programming interfaces like CGI and CCI were crucial in the early days of web
development, allowing servers and clients to communicate efficiently as shown in the
following diagram

Client side Server side

1 2 Interaction
APIs
Web CCI request
Web
Browser 2
3 Server
4
Interaction
CCI response Database

1. Client initiation: A web client (browser or application) sends a request to the

server using the CCI protocol.
2. Server processing: The server interprets the request and processes it accordingly.
The server may interact with databases or external APIs if required.
3. Server response: The server generates an appropriate response and sends it back
to the client.
4. Client processing: The client then processes the received data and displays it to
the user.
Advantages of CCI:
• Simplified client-server communication: CCI provides a standard method for
clients and servers to exchange data, improving efficiency.

11 Complied by Mr. P.K Munene

IBP Lesson 1 - Introduction- Lesson 2 – Web programming

• Interoperability: Ensures compatibility between different web-based applications and client devices.
• Reduced processing overhead: Since CCI does not create separate processes like CGI, it is more efficient for certain tasks.
• Supports various protocols: Can be used alongside HTTP, FTP, and other web communication protocols.
• Enhanced web functionality: Allows web clients to request and retrieve data from multiple sources dynamically.
Disadvantages of CCI:
• Limited adoption: CCI is not as widely used as other web interfaces, such as RESTful APIs, reducing its practicality.
• Security concerns: Since CCI handles client-server communication, improper implementation can lead to security vulnerabilities.
• Lack of advanced features: Modern web technologies have more advanced features compared to CCI, making it less popular in today’s
web development landscape.
• Requires additional configurations: Setting up CCI may require extra configurations on both the client and server sides.
• Performance limitations: While more efficient than CGI, CCI still lacks the performance capabilities of modern web communication
methods like WebSockets or AJAX.
Comparison between CGI and CCI
Aspect Common Gateway Interface (CGI) Common Client Interface (CCI)
Purpose Executes external scripts to generate dynamic content Facilitates communication between clients and servers
Processing model Creates a new process for each request Uses a standardized protocol for client-server interaction
Performance Slower due to process creation overhead More efficient, but still outdated
Security Vulnerable if not properly configured Requires security measures for data transmission
Adoption Historically popular but now mostly replaced Less commonly used in modern web development
Programming languages Supports multiple languages like Perl, Python, C Works with different communication protocols
Use cases Form processing, dynamic web page generation Data exchange, API communication

12 Complied by Mr. P.K Munene

IBP Lesson 1 - Introduction- Lesson 2 – Web programming

Note: Due to performance limitations and security concerns, CGI and CCI have been largely
replaced by modern web technologies such as REST APIs, GraphQL, and WebSockets.
Web programming requirements
Creating modern web applications requires developers to meet several technical and
functional requirements, including:
• User-centric design: Web applications must be intuitive, responsive, and visually
appealing.
• Cross-browser compatibility: Applications should function consistently across all
browsers and devices.
• Security: Web applications must safeguard data and prevent vulnerabilities such as
cross-site scripting (XSS) and SQL injection.
• Scalability: Applications should handle growing user traffic and data without
performance degradation.
• Integration: Seamless integration with APIs, databases, and third-party services is
crucial.
• Efficiency: Code should be optimized for fast load times and minimal resource
consumption.
Emerging trends in web programming
Web programming is evolving rapidly due to technological advancements and changing user
expectations. Developers must stay updated with the latest trends to create fast, secure, and
user-friendly applications. The following are some of the most significant emerging trends in
web programming, along with their impact on the industry.
Progressive Web Apps (PWAs)
Progressive Web Apps (PWAs) combine the best features of websites and mobile
applications. They offer an app-like experience within a browser, providing users with offline
capabilities, push notifications, and fast loading speeds.
Key features:
• Offline functionality: PWAs use service workers to cache data, allowing access
without an internet connection.
• Responsive design: They adapt to different screen sizes and devices.
• Fast performance: PWAs load faster due to caching and optimized resources.
• No need for App store installation: Users can install PWAs directly from a browser,
reducing dependency on app stores.

13 Complied by Mr. P.K Munene

IBP Lesson 1 - Introduction- Lesson 2 – Web programming

Example:
Facebook lite: A lightweight version of Face book that loads quickly, even on slow networks.
Impact:
PWAs are becoming popular because they reduce the need for separate native mobile apps,
cut development costs, and improve user engagement.
Artificial Intelligence (AI) and Machine Learning (ML) in Web Development
AI and ML are transforming web applications by automating processes, improving user
experience, and providing personalized recommendations.
Key features:
• Chatbots: AI-powered chatbots enhance customer support by providing instant
responses.
• Personalization: Websites analyse user behaviour to deliver personalized content
(e.g., Netflix recommendations).
• Voice search optimization: AI helps websites optimize for voice-based queries.
• Automation: AI-driven tools can generate code, optimize UI, and analyse data for
insights.
Example:
Google assistant and Alexa: AI-powered voice assistants that improve web accessibility and
user experience.
Impact:
AI and ML improve efficiency, accuracy, and automation in web development, making
websites more interactive and intelligent.
Serverless architecture
Serverless computing allows developers to build and deploy applications without managing
servers. Cloud providers handle the infrastructure, allowing developers to focus on writing
code.
Key features:
• Scalability: Automatically adjusts resources based on traffic.
• Cost-efficiency: Charges only for actual usage, reducing infrastructure costs.
• Faster deployment: Eliminates the need to configure and maintain servers.
• Improved security: Reduces server management risks and vulnerabilities.

14 Complied by Mr. P.K Munene

IBP Lesson 1 - Introduction- Lesson 2 – Web programming

Example:
AWS Lambda, Google Cloud Functions: Platforms that execute code in response to events
without managing servers.
Impact:
Serverless architecture reduces development time, cost, and maintenance efforts, making it a
preferred choice for startups and large enterprises.
WebAssembly (WASM)
WebAssembly is a binary instruction format that allows web applications to run high-
performance code written in languages like C, C++, and Rust inside a web browser. It enables
near-native performance for web applications.
Key features:
• Faster execution: WASM executes code much faster than JavaScript.
• Cross-platform compatibility: Works across different operating systems and
browsers.
• Efficient memory management: Handles complex tasks without slowing down the
browser.
Example:
Figma: Uses WebAssembly to deliver a smooth, fast user experience for its online design
tool.
Impact:
WASM enhances browser-based applications, allowing developers to create web-based video
editors, games, and other high-performance applications.
API-first development
Modern web applications increasingly rely on APIs (Application Programming Interfaces) to
enable seamless integration between different services. API-first development ensures that
web apps are designed with API functionality as a priority.
Key features:
• Improved Integration: APIs enable easy communication between different services
(e.g., third-party payment systems).
• Faster development: Developers can build the frontend and backend simultaneously
using APIs.
• Better scalability: API-first applications can scale more efficiently.

15 Complied by Mr. P.K Munene

IBP Lesson 1 - Introduction- Lesson 2 – Web programming

Example:
Stripe API: Enables businesses to process online payments seamlessly across different
platforms.
Impact:
API-first development makes web applications more modular, scalable, and efficient,
allowing for better integration with external systems.
Motion UI for Enhanced User Experience
Motion UI is a trend in web design that incorporates animations, transitions, and dynamic
effects to improve user experience and engagement.
Key features:
• Smooth page transitions: Helps users navigate websites seamlessly.
• Micro-Interactions: Small animations that guide users (e.g., button hover effects).
• Loading Animations: Keeps users engaged while content is loading.
Example:

Apple’s website: Uses smooth scrolling effects and animations to enhance user experience.

Impact:
Motion UI improves engagement, usability, and brand perception, making websites more
visually appealing.
Blockchain in web development
Blockchain technology is being integrated into web applications to enhance security,
transparency, and decentralization. It is particularly useful for financial services, supply
chains, and identity verification.
Key features:

• Decentralization: Eliminates the need for intermediaries.

• Enhanced security: Reduces risks of fraud and hacking.
• Smart contracts: Automates transactions securely.
Example:
Cryptocurrency transactions: Websites using blockchain for secure digital payments (e.g.,
Bitcoin, Ethereum).
Impact:
Blockchain is revolutionizing secure data sharing, digital identities, and financial
transactions, increasing trust and efficiency in web applications.

16 Complied by Mr. P.K Munene

IBP Lesson 1 - Introduction- Lesson 2 – Web programming

Internet of Things (IoT) Integration in Web Applications

The Internet of Things (IoT) is changing how web applications interact with physical
devices. Web apps are now used to control smart home devices, industrial automation, and
healthcare monitoring systems.
Key features:
• Real-time data exchange: Web applications receive and display live data from IoT
sensors.
• Remote device control: Users can manage IoT devices via web apps.
• Improved efficiency: Automates tasks using connected devices.
Example:
Smart home systems: Web-based dashboards for controlling IoT devices like smart
thermostats and security cameras.
Impact:
IoT integration in web applications enhances automation, efficiency, and connectivity in
various industries.
References
• Kurose, J. F., & Ross, K. W. (2020). Computer Networking: A Top-Down Approach
(8th Edition). Pearson.
• Duckett, J. (2014). HTML & CSS: Design and Build Websites. Wiley.
• Lowe, D., & Brown, I. (2016). Web Programming: Building Internet Applications
(3rd Edition). Wiley.
• Ullman, L. (2019). Modern PHP: New Features and Good Practices. O'Reilly
Media.
• Freeman, E., & Robson, E. (2020). Headfirst HTML and CSS: A Learner’s Guide to
Creating Standards-Based Web Pages (2nd Edition). O'Reilly Media.

17 Complied by Mr. P.K Munene