Q: Define Web Engineering.

Write down the basic principles of Web

Engineering.
Ans: Web engineering is the process of designing, developing, and maintaining web
applications. It's a branch of software engineering that uses systematic methods to create high-
quality web systems.

The basic principles of Web Engineering serve as guidelines to ensure the efficient and
effective development of web applications. These principles align with best practices in software
engineering, adapted for the unique challenges of web-based systems.

1. User-Centric Design

2. Systematic Development Approach

3. Scalability and Performance

4. Security and Privacy

5. Reusability and Modularity

6. Adaptability and Flexibility

7. Cross-Browser and Cross-Platform Compatibility

8. Maintainability and Version Control

9. Testing and Quality Assurance

10. Content Management and SEO

11. Collaboration and Communication

12. Cost-Effectiveness
Q: Describe the basic components of web application architectures with
necessary diagram.

Basic Components of Web Application Architecture

1. Client-Side (Front-End)
o Handles user interface (UI) and user interactions.
o Technologies: HTML, CSS, JavaScript, frameworks like React or Angular.
2. Server-Side (Back-End)
o Processes client requests, applies business logic, and communicates with the
database.
o Technologies: Node.js, Python, Java, PHP, etc.
3. Database
o Stores and manages application data.
o Types: Relational (MySQL, PostgreSQL) and NoSQL (MongoDB, Redis).
4. Web Server
o Handles HTTP requests and serves responses or static files.
o Examples: Apache, Nginx.
5. API Layer
o Facilitates communication between the front-end, back-end, and external services.
o Types: REST, GraphQL.
6. Load Balancer
o Distributes incoming traffic across multiple servers to ensure availability and
performance.
7. CDN (Content Delivery Network)
o Caches static content and delivers it closer to the user's location for faster load
times.
Q: Mention the types and attributes of web application.

Types of Web Applications

1. Static Web Applications

o Simple and primarily display fixed content (e.g., blogs, portfolios).
o Technologies: HTML, CSS.
o Examples: Personal websites, informational pages.
2. Dynamic Web Applications
o Content changes dynamically based on user interaction or database queries.
o Technologies: PHP, ASP.NET, JavaScript, etc.
o Examples: Social media platforms, e-commerce websites.
3. Single-Page Applications (SPAs)
o Load a single HTML page and update dynamically without reloading the page.
o Technologies: React, Angular, Vue.js.
o Examples: Gmail, Google Maps.
4. Multi-Page Applications (MPAs)
o Traditional web apps that reload the page for new content or actions.
o Technologies: PHP, Ruby on Rails, etc.
o Examples: Online shopping platforms.
5. e-Commerce Applications
o Specialized for online buying and selling.
o Features: Product catalog, shopping cart, payment gateway.
o Examples: Amazon, eBay.
6. Portal Web Applications
o Provide access to various services or information in one place, often for specific
users.
o Examples: University portals, healthcare portals.

Attributes of Web Applications

1. Usability: Easy navigation and user-friendly interfaces.

2. Scalability: Ability to handle increased users or traffic efficiently.
3. Performance: Fast response times and minimal latency.
4. Security: Protection against data breaches, vulnerabilities (e.g., XSS, SQL injection).
5. Responsiveness: Adaptable to various screen sizes and devices.
6. Accessibility: Designed to be usable by people with diverse abilities, including those
with disabilities.
7. Interoperability: Seamless interaction with other systems and platforms.
8. Customizability: Adaptable to different user needs or business requirements.
9. Search Engine Optimization (SEO): Optimized for better visibility in search engines.
10. Maintainability: Easy to update, fix, and enhance over time.
Q: explain the working procedure of web browser

Working Procedure of a Web Browser

1. User Request:
o User enters a URL in the address bar or clicks a link.
2. DNS Resolution:
o The browser resolves the domain name (e.g., example.com) into an IP address
using a DNS server.
3. Connection Establishment:
o A connection is established with the server via HTTP or HTTPS (with SSL/TLS
for secure connections).
4. Sending HTTP Request:
o The browser sends an HTTP request to the server for the desired resource (e.g.,
HTML file).
5. Server Response:
o The server processes the request and sends back an HTTP response containing the
resource or an error code.
6. Content Rendering:
o The browser:
 Parses the HTML to build a DOM (Document Object Model).
 Parses CSS for styling.
 Executes JavaScript for interactivity.
 Renders images, videos, and other resources.
7. Resource Loading:
o The browser makes additional requests for resources like images, CSS, and
JavaScript files as referenced in the HTML.
8. Display Content:
o The browser displays the fully rendered page to the user and updates dynamically
if required.
9. Caching:
o Frequently used resources are cached locally to speed up future requests.
Q: Differences between client side and server-side programming

Differences Between Client-Side and Server-Side Programming

Aspect Client-Side Programming Server-Side Programming

Execution Executes on the user's browser or

Executes on the web server.
Environment device.

Focuses on user interface (UI) and Focuses on back-end logic, database

Primary Purpose
user interactions. interactions, and business rules.

HTML, CSS, JavaScript, frameworks like Node.js, Python, PHP, Java, Ruby, ASP.NET,
Technologies
React, Angular, Vue.js. frameworks like Django.

Cannot directly access databases or Directly interacts with databases, files, and
Resource Access
server resources. other server resources.

Less secure, as the code is visible to More secure, as the code runs on the server
Security
users (e.g., in browser dev tools). and isn't exposed to users.

Relies on the server to fetch data and

Dependency Relies on the client to send requests.
resources.

Form validation, animations, rendering User authentication, data processing, and

Examples
UI elements. storing/retrieving data.

Reduces server load but depends on Increases server load but ensures consistent
Performance
the user's device for performance. processing regardless of the client.

Sends requests to the server for data Processes requests and sends responses
Communication
using APIs (e.g., REST, GraphQL). (HTML, JSON, XML) to the client.

Generates dynamic visual content Generates data or responses consumed by

Output
visible to users. the client.
Q: Describe a suitable process for object-oriented programming language and
object-based programming languages

Process for Object-Oriented Programming (OOP) Languages

Object-Oriented Programming (OOP) is a paradigm centered around objects that combine data
(attributes) and methods (functions) to model real-world systems. Common OOP languages
include Java, Python, C++, and C#.

Key Concepts and Process in OOP

1. Problem Understanding and Design
o Identify the real-world problem to solve.
o Break down the system into objects representing entities or concepts.
2. Defining Classes
o Create blueprints for objects using classes.
o Specify attributes (properties) and methods (behaviors) relevant to the objects.
3. Encapsulation
 Bundle data and methods into classes.
 Use access modifiers (public, private, protected) to protect data.
4. Inheritance: Enable code reuse by deriving new classes (child classes) from existing
ones (parent classes).
5. Polymorphism: Define methods with the same name but different implementations in
derived classes.
6. Abstraction
 Focus on essential properties while hiding implementation details.
 Use abstract classes or interfaces.
7. Implementation and Testing
 Instantiate objects from classes and test their behaviors.

Process for Object-Based Programming (OBP) Languages

Object-Based Programming (OBP) languages focus on the use of objects but do not support all
OOP features, such as inheritance and polymorphism. Examples include JavaScript (prior to
ES6), VBScript, and earlier versions of languages like PHP.
Key Concepts and Process in OBP
1. Identify Objects
o Define objects to represent entities or concepts.
2. Define Properties and Methods
o Specify attributes and functions directly in objects.
3. Encapsulation
 Combine data and methods into objects to hide implementation details.
4. Reuse through Composition
 Use object composition (instead of inheritance) to reuse functionality.
5. Implementation and Testing
 Instantiate and test objects to ensure proper functionality.
Q: What is Cross-Site Scripting (XSS)?

Cross-Site Scripting (XSS) is a type of security vulnerability that allows attackers to inject
malicious scripts into websites viewed by other users. These scripts are usually written in
JavaScript, but other languages like HTML or VBScript can also be used. XSS attacks exploit
vulnerabilities in web applications to execute unauthorized scripts in the context of a trusted
website.

Q: how to avoid $_SERVER["PHP_SELF"] exploits?

$_SERVER["PHP_SELF"] is a superglobal variable in PHP that returns the current script name
relative to the root directory. While convenient, it is vulnerable to security risks, especially
Cross-Site Scripting (XSS) attacks, if user input is used in combination with it.

For example, an attacker might inject a malicious script into the URL that gets echoed back by
the PHP script, leading to an XSS attack.

Q: How to create a link in HTML that will connect another web page when
clicked?

To create a link in HTML that connects to another web page when clicked, you can use the <a> (anchor)
tag, which is specifically designed for linking. Here's the basic syntax:

<a href="URL">Link Text</a>

 href: Specifies the URL (web address) of the page you want to link to.

 Link Text: This is the text that will appear as the clickable link.

Example: <a href="https://www.example.com">Click here to visit Example.com</a>

In this example:

 The link text "Click here to visit Example.com" will appear as a clickable link.
 When the user clicks the link, they will be redirected to https://www.example.com.
Q: Name some common lists that are used when designing a page?

When designing a webpage, lists are commonly used to organize content and improve
readability. Here are some common types of lists that are frequently used in web design:

1. Unordered List (Bulleted List)

 Used when the order of items doesn't matter.
 The items are typically displayed with bullet points.
Use Case: Navigation menus, features list, or categories.
2. Ordered List (Numbered List)
 Used when the order of items matters.
 Items are usually displayed with numbers or letters.
Use Case: Instructions, steps in a process, or ranked items.
3. Definition List
 Used for defining terms or concepts.
 It consists of terms (<dt>) and their definitions (<dd>).
Use Case: Glossaries, product features, or educational content.
4. Navigation List
 Used for creating navigation menus, often with <ul> or <nav> elements.
 Can be styled with CSS to create horizontal or vertical navigation links.
Use Case: Website navigation, main menu.
5. List of Links (Link List)
 Similar to unordered lists, but primarily used to create a list of links.
Use Case: Related articles, resource lists, or references.
6. Image List
 A list that includes images, often with accompanying text or links.
 Common for galleries or product showcases.
Use Case: Photo galleries, product image sliders.
7. Task List
 A list of tasks or to-do items, often used for project management or task tracking.
 Can be interactive with checkboxes for users to mark tasks as completed.
Use Case: To-do lists, progress trackers, or project lists.
8. Nested List (Multilevel List)
 A list inside another list. Useful for creating hierarchical structures.
Use Case: Menus, categories with subcategories, or outline structures.
9. Description List
 Similar to the definition list, but it can be used for any context where an item needs a
description or explanation.
Use Case: Product details, explanations, or specifications.
Q: How to insert a picture into a background image of a web page?

To insert a picture as a background image on a webpage, you can use the CSS property
background-image. This allows you to set an image as the background for any HTML element,
such as the body or a div.
Here are some examples and techniques to add a picture as a background image for your web
page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Image Example</title>
<style>
body {
background-image: url('background.jpg');
background-size: cover; /* Ensure the image covers the entire page */
background-position: center; /* Center the image */
background-attachment: fixed; /* Make the image stay in place while scrolling */
}
</style>
</head>
<body>

<h1>Welcome to My Web Page</h1>

<p>This is an example of a background image.</p>

</body>
</html>
 background-image: url('background.jpg');: This sets the background image. Replace
'background.jpg' with your image path or URL.
 background-size: cover;: Ensures the image covers the entire viewport (screen) even if
the aspect ratio of the image doesn't match the screen size.
 background-position: center;: Centers the image on the screen.
 background-attachment: fixed;: Keeps the background image fixed while scrolling
(optional).
Q: Why we use bootstrap?
Bootstrap is used primarily to quickly build responsive websites by providing pre-designed components
like buttons, forms, navigation bars, and a grid system, allowing developers to create visually appealing
and functional layouts without writing extensive custom CSS code, saving significant development time
while ensuring consistent design across different devices and browsers; essentially, it acts as a readily
available toolkit for front-end web development.
Q: grid system of bootstrap
The Bootstrap Grid System is a flexible layout system that allows you to design responsive and
mobile-first web pages using a 12-column structure. Here’s a quick overview:
Key Components:
1. Container:
o .container: Fixed-width container.
o .container-fluid: Full-width container that spans the entire viewport.
2. Row:
o .row: Defines a horizontal group of columns.
3. Columns:
o Columns are created using .col-* classes, where * is the number of columns the
element should span (e.g., .col-6 for half-width).
o Bootstrap's grid is based on 12 columns in total.
Responsive Breakpoints:
 .col-: Extra small screens (<576px).
 .col-sm-: Small screens (≥576px).
 .col-md-: Medium screens (≥768px).
 .col-lg-: Large screens (≥992px).
 .col-xl-: Extra large screens (≥1200px).
Q: How does web site programming works?
Website programming involves the process of creating and managing a website’s functionality
through code. Here’s how it works in short:
1. Front-End (Client-Side) Programming:
 HTML: Defines the structure and content of a webpage (headings, paragraphs, images,
links, etc.).
 CSS: Styles the webpage, controlling layout, colors, fonts, and overall appearance.
 JavaScript: Adds interactivity, such as handling user clicks, form submissions, and
dynamic content updates without refreshing the page.
These front-end elements are processed by the web browser (like Chrome or Firefox) when a
user visits a webpage.
2. Back-End (Server-Side) Programming:
 Server: A server is a computer that hosts the website and processes requests.
 Programming Languages: Languages like PHP, Python, Node.js, Ruby, or Java handle
the business logic, database interaction, and data processing.
 Database: A database (like MySQL, PostgreSQL, MongoDB) stores and retrieves data,
such as user information, product data, or blog posts.
The back-end processes user requests, retrieves data, and sends it back to the front-end for
display.
3. Interaction Between Front-End and Back-End:
 When a user visits a webpage or submits a form, the browser (front-end) sends a request
to the server (back-end).
 The server processes the request, accesses the database if needed, and then sends the
relevant data back to the front-end to be displayed to the user.
4. Web Frameworks and Libraries:
 Web frameworks (e.g., React, Angular for front-end, Django, Flask for back-end)
simplify development by providing pre-built functions and structure.
 APIs: Application Programming Interfaces (APIs) are used to exchange data between the
front-end and back-end.
Q: What are the benefits of Web programming?
The benefits of web programming include:
1. Accessibility: Web applications can be accessed from any device with an internet
connection, making them platform-independent.
2. Cost-Effective: Web apps eliminate the need for software installation on each user’s
device, reducing maintenance and deployment costs.
3. Scalability: Web applications can easily scale to accommodate increasing traffic and
users.
4. Real-Time Updates: Changes or updates can be made on the server-side, meaning all
users receive the latest version instantly without requiring updates on their end.
5. Cross-Platform Compatibility: Web applications work across different operating
systems and devices (Windows, macOS, iOS, Android) using browsers.
6. Security: Centralized server-based applications make it easier to apply security updates
and control access.
7. Global Reach: Websites can be accessed by users worldwide, providing a broad
audience for businesses, services, and content.
8. Interactivity: Web programming enables the creation of dynamic, interactive, and user-
friendly websites with features like forms, chat, and real-time updates.
Q: How can you integrate CSS in a web page?

you can integrate CSS (Cascading Style Sheets) into a web page in three ways:

1. Inline CSS (Within HTML tags):

 Method: Use the style attribute directly inside an HTML tag.

 Use case: For quick styling of individual elements.

2. Internal CSS (Within a <style> tag in the <head>):

 Method: Define styles inside a <style> block in the <head> section of the HTML
document.
 Use case: For styling the page as a whole without affecting other pages. This is useful for
a single-page website.

3. External CSS (Link to an external .css file):

 Method: Link an external CSS file to the HTML document using the <link> tag in the
<head> section.
 Use case: Best for large websites with multiple pages to maintain a consistent style across
all pages.
Q: What benefits and demerits do external style sheets have?

Benefits of External Style Sheets:

1. Separation of Content and Style:

o Keeps HTML clean and focused on content, while styles are handled separately in
the CSS file.
2. Reusability:
o A single CSS file can be applied to multiple HTML pages, making it easy to
maintain consistent styling across the entire website.
3. Faster Page Load:
o Browsers cache external CSS files. Once the file is loaded, it doesn’t need to be
reloaded on subsequent page views, speeding up page load times.
4. Maintainability:
o Easier to update and manage styles in one central location rather than altering
individual HTML files.
o Changes to the layout or design can be made without touching the HTML code.
5. Reduced Redundancy:
o Eliminates the need for repetitive styling in each page (which can happen with
internal or inline CSS).
6. Improved Collaboration:
o Designers and developers can work separately on HTML (content) and CSS
(style), improving collaboration in team projects.

Demerits of External Style Sheets:

1. Initial Load Time:

o The browser needs to download the external CSS file before rendering the page. If
the file is large or the server is slow, it can delay the page's initial load.
2. Dependence on External Files:
o If the external CSS file is missing, corrupted, or not accessible (e.g., due to
network issues), it can break the styling of the page entirely, leaving it unstyled or
poorly formatted.
3. More HTTP Requests:
o Each external file (CSS, JavaScript, images) requires a separate HTTP request,
which can increase page load time, especially with slow internet connections or
many resources.
4. CORS Issues:
o If the external CSS file is hosted on a different domain, it may encounter Cross-
Origin Resource Sharing (CORS) issues, potentially preventing it from loading
properly.
5. Over-Reliance on a Single File:
 o If a large number of pages depend on one external CSS file, any error in the CSS
file could affect the entire site.

Q: Define CSS box model with its elements.

The CSS Box Model defines how elements are structured and how their dimensions are
calculated in a webpage. It consists of four key elements:

1. Content: The actual content of the element (text, images, etc.), where width and height
are applied.
2. Padding: The space between the content and the border. It adds inner space within the
element.
3. Border: A line around the padding (if any), which can be styled with width, color, and
type.
4. Margin: The outermost space around the border, separating the element from others.

/* Example CSS box model */

div {
width: 300px;
height: 200px;
padding: 20px;
border: 5px solid black;
margin: 15px;
box-sizing: border-box; /* Optional, to include padding and border in the
width/height */
}

In this example:

 Content area is 300px wide and 200px tall.

 Padding is 20px on all sides (adds space inside the box).
 Border is 5px wide on all sides (adds a visible line around the content).
 Margin is 15px on all sides (adds space outside the box, separating it from other
elements).
Q: How to use CSS transitions
CSS transitions allow you to smoothly animate changes in CSS properties over a specified
duration.
Syntax:
transition: property duration timing-function delay;
Key Properties:
1. property: The CSS property to animate (e.g., color, background-color, transform).
2. duration: The time the transition takes (e.g., 0.5s or 200ms).
3. timing-function (Optional): Controls the pace of the transition (e.g., ease, linear,
ease-in, ease-out).
4. delay (Optional): Specifies a delay before starting the transition.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
button {
background-color: blue;
color: white;
padding: 10px 20px;
border: none;
transition: background-color 0.5s ease, transform 0.3s;
}

button:hover {
background-color: green;
transform: scale(1.1);
}
</style>
</head>
<body>
<button>Hover Me</button>
</body>
</html>

How It Works:
 On hover: The button smoothly changes its background color and slightly scales up.
 The transition is applied only to the specified properties.
Note: Use all as the property to apply transitions to all animatable properties.
Q: Are Java & Javascript same?

No, Java and JavaScript are not the same. While their names are similar, they are distinct
programming languages with different purposes and characteristics.

Differences Between Java and JavaScript:

Aspect Java JavaScript

Object-oriented programming
Type Scripting language
language
Used for building standalone Used for client-side web development,
Purpose applications, server-side adding interactivity to websites, and server-
applications, and Android apps. side scripting (e.g., with Node.js).
Runs on the Java Virtual Machine
Execution Runs in web browsers or Node.js.
(JVM).
Statically typed (data types must be
Syntax Dynamically typed (data types are inferred).
declared).
Compiled into bytecode before Interpreted or Just-In-Time (JIT) compiled
Compilation
execution. by the browser.
Enterprise-level applications, Web-based interactive features, dynamic
Use Cases
backend systems, mobile apps. content, and server-side scripting.
Requires the Java Development Kit Requires only a browser or Node.js to
Dependencies
(JDK) and runtime environment. execute.
Learning
More complex and verbose. Easier and more beginner-friendly.
Curve

Summary:

 Java is a general-purpose, object-oriented programming language used for complex,

large-scale applications.
 JavaScript is primarily a scripting language used to make web pages interactive and
dynamic.

The similarity in their names is coincidental, as JavaScript was named during a marketing partnership
between Netscape (the creator of JavaScript) and Sun Microsystems (the creator of Java).

Q: How Javascript can change HTML content & HTML attributes value.
JavaScript can dynamically change HTML content and attributes using the DOM (Document
Object Model). Here's how:
1. Change HTML Content:
Use the innerHTML property to update the content of an element.
Example:
<p id="demo">Original Content</p>
<script>
document.getElementById("demo").innerHTML = "New Content";
</script>
2. Change HTML Attributes:
Use the setAttribute() method or directly modify the attribute.
Example 1: Using setAttribute():
<img id="image" src="old.jpg" alt="Old Image">
<script>
document.getElementById("image").setAttribute("src", "new.jpg");
</script>
Summary:
 Content: Modify with innerHTML or textContent.
 Attributes: Update using setAttribute() or direct property changes.
Q: innerHTML - The innerHTML property in JavaScript is used to get or set the HTML
content inside an element. It allows you to manipulate the contents of an HTML element
dynamically.
Key Points:
 It can insert both plain text and HTML tags.
 Be cautious: Setting innerHTML with untrusted user input may lead to Cross-Site
Scripting (XSS) vulnerabilities.
Summary:
The innerHTML property is a simple and effective way to update the content of HTML elements
dynamically. However, for secure and efficient applications, use it with caution and consider
safer alternatives where possible.
Alternative: Use textContent if you only need to insert plain text without parsing HTML.
Q: document.write() function
The document.write() function in JavaScript writes text, HTML, or other content directly to
the web page during the initial rendering process.
Syntax: document.write(content);
 content: The string (text or HTML) to be written to the document.
Key Features:
1. It directly inserts the content into the HTML page.
2. Can be used to include text, HTML elements, or even scripts.
Summary:
 document.write() writes content directly to the webpage during rendering.
 It can overwrite the page content if used after the document is fully loaded.
 Better alternatives, like innerHTML or DOM methods, should be used for modern
development.
Q: window.alert() function
The window.alert() function in JavaScript is used to display a pop-up alert dialog with a
specified message. It is typically used to show information, warnings, or simple messages to the
user.
Syntax:
window.alert(message);
 message: The text or content to display in the alert dialog.
 The window object is optional because it is the global object in browsers. You
can also simply write:
alert(message);
Summary:
The window.alert() function is a simple way to display a message in a modal dialog box.
While useful for basic alerts or debugging, it is not suitable for modern, interactive applications
due to its interruptive nature and lack of customization.

Q: console.log function
The console.log() function in JavaScript is used to output messages or values to the browser's
console. It is commonly used for debugging and tracking the execution of code.
Syntax:
console.log(message);
message: The data (string, variable, object, etc.) to be logged in the console.
Summary:
console.log() is a powerful and simple tool for debugging and tracking the flow of your
JavaScript code. It helps developers identify and fix issues quickly but should be removed or
minimized in production environments.
Q: E-commerce (Electronic Commerce) refers to the buying and selling of goods,
services, or information over the internet. It enables businesses and consumers to
conduct transactions online without the need for physical interaction.
Types of E-commerce:
1. B2B (Business-to-Business): Transactions between businesses (e.g., wholesaler to
retailer).
2. B2C (Business-to-Consumer): Businesses sell directly to consumers (e.g., Amazon,
eBay).
3. C2C (Consumer-to-Consumer): Individuals sell to other individuals (e.g., eBay,
Craigslist).
4. C2B (Consumer-to-Business): Consumers offer products or services to businesses (e.g.,
freelancing platforms).
5. D2C (Direct-to-Consumer): Manufacturers sell directly to consumers, bypassing
intermediaries.
Advantages:
 Convenience for buyers and sellers.
 Wider market reach.
 Cost-effective operations.
 Easy scalability and access to data analytics.
Disadvantages:
  Security concerns (e.g., fraud, hacking).
 Lack of personal interaction.
 Dependence on internet connectivity.
Key Applications of E-commerce:
1. Retail and Wholesale:
 Online stores like Amazon, eBay, and Walmart offer a variety of products for purchase.
 Retailers sell directly to consumers, while wholesalers cater to businesses.
2. Banking and Finance:
 Online banking, fund transfers, and bill payments are enabled through e-commerce
platforms.
 Financial institutions provide services like loan applications and investment management
online.
3. Online Marketplaces:
 Platforms like Etsy and Alibaba allow sellers to list products for global customers.
 Facilitates consumer-to-consumer (C2C) transactions.
4. E-Tickets and Entertainment:
 Booking tickets for flights, trains, events, and movies is made convenient through
platforms like Ticketmaster and Expedia.
 Streaming services (e.g., Netflix, Spotify) provide digital entertainment.
5. Education and Training:
 E-learning platforms like Udemy, Coursera, and Khan Academy offer online courses and
certifications.
 Universities use e-commerce for enrollment and material distribution.
6. Healthcare:
 E-commerce is used for telemedicine, online consultations, and purchasing medicines
(e.g., 1mg, Netmeds).
 Appointment booking and health management systems improve accessibility.
7. Food and Grocery Delivery:
 Platforms like Uber Eats, DoorDash, and Instacart allow users to order food or groceries
online.
 Restaurants and supermarkets utilize e-commerce to expand their reach.
8. Travel and Tourism:
 Booking accommodations, flights, and travel packages through platforms like Airbnb and
Booking.com.
 Travel insurance and itinerary planning services are also part of this application.
9. Real Estate:
 Platforms like Zillow and Realtor.com enable users to search for properties and schedule
virtual tours.
 Online payments for rent and real estate transactions are facilitated.
10. Subscription Services:
 Services like software (SaaS), magazines, and digital tools are sold via recurring
subscription models (e.g., Adobe Creative Cloud, Microsoft 365).

Q: How does e-commerce works

E-commerce works by allowing buyers and sellers to engage in transactions over the internet.
The process involves several steps, from product browsing to payment, shipping, and delivery.
Here’s a simple breakdown of how e-commerce works:

Steps in E-commerce Workflow:

1. Product/Service Discovery:
 Buyers browse products or services on an e-commerce platform (like Amazon, eBay, or
a business website).
 This can be done through search functionality, categories, filters, and recommendations.
2. Product Selection:
 Once a buyer finds the product they want, they can add it to their shopping cart.
 The buyer can continue shopping or proceed to checkout.
3. Checkout Process:
 At checkout, the buyer reviews the items, enters shipping details, and selects a payment
method.
 Payment options typically include credit/debit cards, digital wallets (like PayPal, Apple
Pay), bank transfers, or even cash on delivery.
4. Payment Processing:
 The e-commerce platform securely processes the payment through a payment gateway.
 The payment gateway encrypts sensitive payment details and ensures a secure
transaction.
5. Order Confirmation:
 Once the payment is processed, the buyer receives an order confirmation with details like
order number, expected delivery date, and shipping info.
6. Shipping and Delivery:
 The seller processes the order by packaging the product and shipping it to the buyer using
third-party logistics or couriers.
 The buyer is notified with tracking details to monitor the shipment.
7. Delivery:
 The product is delivered to the buyer's specified address.
 In some cases, delivery is done digitally (e.g., digital downloads or streaming services).
8. Post-Purchase Interaction:
 After receiving the product, the buyer may leave a review or provide feedback on the
product and service.
 In some cases, buyers can return products through the platform’s return policy.

Q: Bangladesh Government regulations for e-commerce marketplace sector

The Government of Bangladesh has implemented several regulations to govern the e-commerce
marketplace sector, aiming to ensure consumer protection, fair business practices, and the growth
of the digital economy. Key regulations include:
1. Business Registration and Licensing:
 Trade License Requirement: Digital marketplaces must obtain at least one trade
license, which should be prominently displayed on their platforms or social media pages.
 Unique Business Identification Number (UBIN): A UBIN is mandatory for all digital
commerce organizations, to be implemented in phases.
2. Product and Service Regulations:
 Medicine and Medical Supplies: Selling medicines and medical supplies online requires
approval from the Department of Drug Administration.
 Quality Certification: Products must have certificates from relevant quality control
authorities when required.
 Product Labeling: All product instructions and details must be provided in Bengali, with
optional additional languages.
3. Consumer Protection:
 Delivery Timelines: If the seller and purchaser are in the same city or village, delivery
must occur within 5 days. For different locations, delivery should be within 10 days.
 Refund and Return Policies: Clear guidelines are established for refunds and returns to
protect consumer rights.
4. Data Privacy and Security:
 Data Protection: E-commerce platforms are required to maintain the privacy of
consumer communications, preferences, and personal and financial data.
 Digital Certification: Digital signatures and certifications are emphasized to ensure
secure transactions.
5. Regulatory Framework:
 Self-Regulation: A code of conduct for businesses and customers is to be defined,
ensuring digital communications adhere to social and business etiquette.
 Legal Reforms: The Information and Communication Technology (ICT) Act is under
reform to address the evolving digital landscape, with provisions for regular updates.

6. International Trade:

 Bilateral Agreements: The government aims to establish treaties with other countries to
facilitate international e-commerce, including streamlined customs procedures and
improved delivery channels.

These regulations are designed to create a secure and transparent environment for both
consumers and businesses in Bangladesh's e-commerce sector.
Q: Define active page

An active page refers to the web page that is currently in focus or being viewed by the user in a
browser. It is the page that is loaded and interacting with the user at any given time.

In a multi-page website, only one page can be "active" at a time. This is typically the page that is
displayed in the browser window. The concept of an active page can also extend to links,
navigation, or tabs within the website, where the "active" state indicates which section or
element is currently selected or being interacted with.

Common Use Cases:

1. Navigation: Highlighting the current page in a navigation menu. For example, if a user is
on the "About Us" page, the "About Us" link in the menu might be styled differently to
indicate it’s the active page.
2. Tabs and Pages: On websites or web applications with multiple tabs or sections (like a
dashboard), the active page is the one that the user is viewing at the moment. The design
often visually differentiates it from other inactive tabs.

Q: Differences between static and dynamic page

Differences:

Feature Static Page Dynamic Page

Fixed, doesn’t change unless manually Changes dynamically based on user input or server
Content
updated data

Server-side languages (PHP, Node.js, etc.),

Technology HTML, CSS, and limited JavaScript
databases, JavaScript

Interaction No server/database interaction Server and database interactions for real-time data

Load Time Faster, as no processing is required Slower, due to server processing and data fetching

Use Case Informational websites, portfolios E-commerce, social media, news websites

Scalability Less scalable for large content updates More scalable for large and dynamic websites