Web Tech File

Question 1: Write Software Requirement Specification sheet (SRS) of your project.
1. Introduction
1. Purpose: The purpose of this document is to provide a comprehensive specification for the
development of an e-commerce website.
2. Scope: The e-commerce website will serve as an online platform for buying and selling products,
facilitating transactions, and managing user accounts and orders.
3. Definitions, Acronyms, and Abbreviations: N/A
4. References: N/A
2. Overall Description
1. Product Perspective: The e-commerce website will be a standalone system accessible via web
browsers and mobile devices.
2. User Classes and Characteristics:
- Customers: Users who browse and purchase products.
- Sellers: Users who list and manage their products for sale.
- Administrators: Users who manage the website, including product management, user management,
and order management.
3. Operating Environment: The website will run on modern web servers, compatible with popular
web browsers and mobile devices.
4. Design and Implementation Constraints: The website will be developed using a combination of
frontend and backend technologies, ensuring compatibility and scalability.
5. User Documentation: User guides and documentation will be provided to assist users in navigating
and using the website effectively.
3. System Features
1. User Registration and Authentication
- Users can create new accounts and authenticate themselves.
- Different user roles (customer, seller, administrator) will have different access levels and
permissions.
2. Product Catalog
- A comprehensive catalog of products with search and filter options.
- Product listings will include images, descriptions, pricing, and availability.
3. Shopping Cart
- Customers can add products to their shopping cart for later purchase.
- Cart management features like adding, removing, and updating quantities of products.
4. Checkout and Payment
- Secure and streamlined checkout process.
- Integration with popular payment gateways to facilitate online payments.
5. Order Management
- Customers can view their order history and track the status of their orders.
- Sellers and administrators can manage and fulfill orders.
6. User Profile and Account Management
- Users can update their profiles, manage addresses, and payment methods.
- Password reset and email notifications for account-related activities.
7. Seller Dashboard
- Sellers can manage their product listings, inventory, and pricing.
- Sales analytics and reports to help sellers track performance.
8. Administrator Dashboard
- Administrators can manage user accounts, product listings, and orders
4. External Interface Requirements

1. User Interfaces: The website will have a responsive and intuitive user interface accessible via web
browsers and mobile devices.
2. Hardware Interfaces: The website will interact with standard web servers and databases.
3. Software Interfaces: Integration with third-party payment gateways and shipping services.
4. Communications Interfaces: The website will use HTTPS for secure communication.
5. Non-functional Requirements
1. Performance: The website should handle a large number of concurrent users and provide fast
response times.
2. Security: Implement secure user authentication, data encryption, and protection against common
web vulnerabilities.
3. Reliability: The website should be available and operational with minimal downtime.
4. Scalability: The architecture should support future growth and handle increased traffic and data.
5. Usability: The website should be easy to navigate, with an intuitive and user-friendly interface.
6. Compatibility: The website should be compatible with popular web browsers and mobile devices.
6. System
Question 2: Draw the data flow diagrams at level 0 and level 1 of your project.
The context level data flow diagram (dfd) is describe the whole system. The (o) level dfd describe the
all user module who operate the system. Below data flow diagram of ecommerce site shows the two
user can operate the system Admin and Member user.
o – Level DFD for Ecommerce website
The Admin side DFD describe the functionality of Admin, Admin is a owner of the website. Admin
can first add category of item and then add items by category wise. and admin can manage order and
payment detail.
1 – level DFD for ecommerce website

Question 3: Draw the Entity-Relationship diagram of your project.
The E-commerce Website ER Diagram site shows how it uses database design to
handle data used for e -commerce management tasks (ERD). It shows how the database
links the different parts of the website. This shows how databases are put together
logically by naming entities, their properties, and how they interact with each other.
The ER Diagram for the E -commerce site’s database is drawn out. The ER Diagram
is used to plan and fix the relational database of the system. It works best with DFD
(Data Flow Diagram), which is in charge of moving data.
The importance of the ER Diagram for an e -commerce website is that it helps in

modeling its data storage or database. It is the basis of the project’s database
foundation for construction. This entity -relationship diagram (ERD) also helps define
the types of data to be stored, such as their attributes and properties.
In addition to that, the ER Diagram also describes how an entity interacts with other
entities. All other real -world projects are presented with ER Diagrams (database
designs).
This simple ER diagram for an e -commerce website shows the supposed database
design of the project. It conveys the data that would be present in an e -commerce
website, its characteristics, and its connection with other data (entity) .
The basic e-commerce system The Website ER diagram can also be considered as the
database diagram for a website. This is what the database of the system is built on. It
keeps track of the data and where the outputs come from .
Entities:
• User (UserID, Name, Email, Password, UserType)

• Product (ProductID, Name, Description, Price, Quantity)
• Category (CategoryID, Name)
• Order (OrderID, UserID, OrderDate, TotalAmount)
• OrderItem (OrderItemID, OrderID, ProductID, Quantity)
• Cart (CartID, UserID, CreatedDate)
• CartItem (CartItemID, CartID, ProductID, Quantity)
Relationships:
• User can have zero or many Orders (one-to-many)

• User can have zero or one Cart (one-to-one)
• Cart can have zero or many CartItems (one-to-many)
• Product can be present in zero or many CartItems (one-to-many)
• Product can be present in zero or many OrderItems (one-to-many)
• Category can have zero or many Products (one-to-many)
• Order can have zero or many OrderItems (one-to-many)
Question 4: Draw an activity diagram and use case for your project.
The activity diagram used to describe flow of activity through a series of actions. Activity diagram is
a important diagram to describe the system.
The activity described as a action or operation of the system.
Use case diagram of ec ommerce website
Question 5: Draw the structural view diagr am for the system : Class
diagram. Object diagram.
Class diagrams are the most popular UML diagrams used for construction of software
applications. It is very important to learn the drawing procedure of class diagram.
Class diagrams have a lot of properties to consider while drawing but here the
diagram will be considered from a top level view.
Class diagram is basically a graphical representation of the static view of the system
and represents different aspects of the application. A collection of class diagrams
represent the whole system.
The following points should be remembered while drawing a class diagram −
• The name of the class diagram should be meaningful to describe the
aspect of the system.
• Each element and their relationships should be identified in advance.
• Responsibility (attributes and methods) of each class should be clearly
identified
• For each class, minimum number of properties should be specified, as
unnecessary properties will make the diagram complicated.
• Use notes whenever required to describe some aspect of the diagram.
At the end of the drawing it should be understandable to the
developer/coder.
• Finally, before making the final version, the diagram should be drawn
on plain paper and reworked as many times as possible to make it
correct.
The following diagram is an example of an Order System of an application. It
describes a particular aspect of the entire application.
• First of all, Order and Customer are identified as the two elements of
the system. They have a one-to-many relationship because a customer
can have multiple orders.
• Order class is an abstract class and it has two concrete classes
(inheritance relationship) SpecialOrder and NormalOrder.
• The two inherited classes have all the properties as the Order class. In
addition, they have additional functions like dispatch () and receive ().
The following diagram is an example of an object diagram. It represents the Order
management system which we have discussed in the chapter Class Diagram. The
following diagram is an instance of the system at a particular time of purchase. It has
the following objects.
• Customer
• Order
• SpecialOrder
• NormalOrder
Now the customer object (C) is associated with three order objects (O1, O2, and O3).
These order objects are associated with special order and normal order objects (S1,
S2, and N1). The customer has the following three orders with different numbers (12,
32 and 40) for the particular time considered.
The customer can increase the number of orders in future and in that scenario the
object diagram will reflect that. If order, special order, and normal order objects are
observed then you will find that they have some values.
For orders, the values are 12, 32, and 40 which implies that the objects have these
values for a particular moment (here the particular time when the purchase is made
is considered as the moment) when the instance is captured
The same is true for special order and normal order objects which have number of
orders as 20, 30, and 60. If a different time of purchase is considered, then these
values will change accordingly.
The following object diagram has been drawn considering all the points mentioned
above
Question 6: Write a program to perform the behavioural view diagram for
the suggested system s equence diagram, collaboration diagram .
When you run this program, it will generate the textual output for the sequence diagram and
collaboration diagram. Please note that this example is simplified and doesn't include actual diagram
rendering. For more complex diagrams, you can explore diagramming libraries or tools that support
the creation of sequence diagrams and collaboration diagrams.
class Customer:
def browse_products(self):
return "Browse products"
def select_product(self, product_id):
return f"Select product with ID: {product_id}"
def add_to_cart(self, product_id):
return f"Add product with ID: {product_id} to cart"
def checkout(self):
return "Checkout"
def make_payment(self):
return "Make payment"
def place_order(self):
return "Place order"
class EcommerceSystem:
def process_order(self):
return "Process order"
class Seller:
def manage_products(self):
return "Manage products"
# Sequence diagram
def generate_sequence_diagram():
customer = Customer()
ecommerce_system = EcommerceSystem()
actions = [
customer.browse_products(),
customer.select_product(123),
customer.add_to_cart(123),
customer.checkout(),
customer.make_payment(),
customer.place_order(),
ecommerce_system.process_order(),
print("Sequence Diagram:")
for i, action in enumerate(actions):
print(f"{i+1}. {action}")
# Collaboration diagram
def generate_collaboration_diagram():
seller = Seller()
actions = [
(customer, customer.browse_products()),
(customer, customer.select_product, 123),
(customer, customer.add_to_cart, 123),
(customer, customer.checkout),
(customer, customer.make_payment),
(customer, customer.place_order),
(ecommerce_system, ecommerce_system.process_order),
print("\nCollaboration Diagram:")
for i, action in enumerate(actions):
if len(action) == 2:
actor, method = action
print(f"{i+1}. {actor.__class__.__name__} --> {method()}")
else:
actor, method, *args = action
print(f"{i+1}. {actor.__class__.__name__} --> {method(*args)}")
# Generate the diagrams

generate_sequence_diagram()
generate_collaboration_diagram()
Question 7: To perform the implementation view diagram. Component diagram for the
system.
Here's an example code to generate a component diagram for the system, which represents the
implementation view of the system:
class Customer:
def __init__(self):
self.cart = Cart()
def browse_products(self):
return "Browse products"
def add_to_cart(self, product_id):
self.cart.add_product(product_id)
def checkout(self):
self.cart.checkout()
class Cart:
def __init__(self):
self.products = []
def add_product(self, product_id):
self.products.append(product_id)
def checkout(self):
print("Checkout")
class EcommerceSystem:
def process_order(self):
print("Process order")
class Seller:
def __init__(self):
self.product_manager = ProductManager()
def manage_products(self):
self.product_manager.manage()
class ProductManager:
def manage(self):
print("Manage products")
# Component diagram
def generate_component_diagram():
seller = Seller()
print("Component Diagram:")
print("Customer --> Cart")

print("Customer --> EcommerceSystem")
print("Seller --> ProductManager")
print("EcommerceSystem --> Seller")
# Generate the diagram
generate_component_diagram()
When you run this code, it will output the textual representation of the component diagram, which
shows the relationships between different components in the system. In this example, the components
include Customer, Cart, EcommerceSystem, Seller, and ProductManager. The arrows indicate the
dependencies or associations between the components.
Question 8: Write the code of your project.
HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spend&Save</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap
" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-

free@6.2.1/css/fontawesome.min.css">
<script src="https://use.fontawesome.com/6575b6487b.js"></script>
</head>
<body>
<div class="header">
<div class="container">
<div class="navbar">
<div class="logo">
<a href="index.html"><img src="images/logo.png" alt="Image not found"

width="125px"></a>
</div>
<nav>
<ul id="MenuItems">
<li><a href="index.html">Home</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
<li><a href="account1.html">Account</a></li>
</ul>
</nav>
<a href="cart.html"><img src="images/cart.png" width="30px" height="30px" alt="image not

available"></a>
<img src="images/menu.png" class="menu-icon" onclick="menutoggle()">
</div>
<div class="row">
<div class="col-2">
<h1>Give Your Shopping <br>A New Style!</h1>
<p>Spend Less!!! <br>Shop More!!!</p>
<a href="" class="btn">Explore Now →</a>
</div>
<div class="col-2">
<img src="images/pngwing.com (1).png" alt="image not found">
</div>
</div>
</div>
</div>

<div class="categories">
<div class="small-container">
<div class="row">
<div class="col-3">
<img src="images/category-1.jpg">
</div>
<div class="col-3">
</div>
<div class="col-3">
</div>
</div>
</div>
</div>

<h2 class="title">Featured Products</h2>
<div class="row">
<div class="col-4">
<a href="productdetails.html">
<img src="images/product-1.jpg">
<h4>Red Printed T-Shirt</h4>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
</div>
<p>Rs 599</p>
</a>
</div>
<div class="col-4">
<h4>HRX Sports Shoes</h4>
<i class="fa fa-star-half-o"></i>
</div>
<p>Rs 1599</p>
</div>
<div class="col-4">
<h4>Grey Jogger</h4>
</div>
<p>Rs 1299</p>
</div>
<div class="col-4">
<h4>Blue Puma T-Shirt</h4>
</div>
<p>Rs 1899</p>
</div>
</div>
<h2 class="title">Latest Products</h2>
<div class="row">
<div class="col-4">
<h4>Sneaker for Men</h4>
</div>
<p>Rs 3599</p>
</div>
<div class="col-4">
<h4>T-Shirt by Puma</h4>
</div>
<p>Rs 999</p>
</div>
<div class="col-4">
<h4>Socks</h4>
</div>
<p>Rs 399</p>
</div>
<div class="col-4">
<h4>Wrist Watch by fossile</h4>

</div>
<p>Rs 17999</p>
</div>
</div>
<div class="row">
<div class="col-4">
<h4>Watch by Roadster</h4>
</div>
<p>Rs 4599</p>
</div>
<div class="col-4">
<h4>Sports Shoes by HRX</h4>

</div>
<p>Rs 5599</p>
</div>
<div class="col-4">
<h4>Casual Walking shoes</h4>
</div>
<p>Rs 1699</p>
</div>
<div class="col-4">
<h4>NIKE Jogger</h4>
</div>
<p>Rs 2599</p>
</div>
</div>
</div>

<div class="offer">
<div class="row">
<div class="col-2">
<img src="images/exclusive.png" class="offer-img">
</div>
<div class="col-2">
<p>Exclusively Avialable on Spend&Save</p>
<h1>Smart Band 4</h1>
<small>The Mi Smart Band 4 features a 39.9% larger than Mi Band 3 Amoled color full-
touch display with adjustable brightness, so everything is clear as can be.</small>
<br>
<a href="" class="btn">Buy Now →</a>
</div>
</div>
</div>
</div>

<div class="testimonial">
<div class="row">
<div class="col-3">
<i class="fa fa-quote-left"></i>
<p>Lorem Ipsum is simply dumpy text of printing and typesetting industry. Lorem Ipsum
has been the industry's standard dummy text ever</p>

</div>
<img src="images/demo.png">
<h3>Manish kumar</h3>
</div>
<div class="col-3">
</div>
<h3>dishant kumar</h3>
</div>
<div class="col-3">

</div>
<h3>Sanskar Raj</h3>
</div>
</div>
</div>
</div>

<div class="brands">
<div class="row">
<div class="col-5">
<img src="images/logo-godrej.png">
</div>
<div class="col-5">
<img src="images/logo-oppo.png">
</div>
<div class="col-5">
<img src="images/logo-coca-cola.png">
</div>
<div class="col-5">
<img src="images/logo-paypal.png">
</div>
<div class="col-5">
<img src="images/logo-philips.png">
</div>
</div>
</div>
</div>

<div class="footer">
<div class="container">
<div class="row">
<div class="footer-col-2">
<h3>Download Our App</h3>
<img src="images/logo-white.png">
<div class="app-logo">
<img src="images/play-store.png">
<img src="images/app-store.png">
</div>
<p>Download App for Android & iOS mobile phone.</p>
</div>
<h3>Useful Links</h3>
<ul>
<li>Coupons</li>
<li>Blog Post</li>
<li>Return Policy</li>
<li>Join Affiliate</li>
</ul>
</div>
<h3>Follow us</h3>
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Instagram</li>
<li>Youtube</li>
</ul>
</div>
</div>
<hr>
<p class="copyright">Copyright 2023 - SPEND&SAVE</p>
</div>

<script>
var MenuItems = document.getElementById("MenuItems");
MenuItems.style.maxHeight="0px";
function menutoggle(){
if(MenuItems.style.maxHeight="0px"){
MenuItems.style.maxHeight="200px";
else{
MenuItems.style.maxHeight="0px"
</script>
</body></html>
Question 9: To perform various testing using the testing tool unit testing, integration
testing for a sample code of your project.
Let's assume we have a simple class `Calculator` that performs basic arithmetic operations. Here's the
sample code for the `Calculator` class:
class Calculator:
def add(self, a, b):
return a + b
def subtract(self, a, b):
return a - b
def multiply(self, a, b):
return a * b
def divide(self, a, b):
if b == 0:
raise ZeroDivisionError("Division by zero is not allowed.")
return a / b
```
Now, let's perform unit testing and integration testing for this `Calculator` class using ùnittest`.
**Unit Testing:**
import unittest
class CalculatorTest(unittest.TestCase):
def setUp(self):
self.calculator = Calculator()
def test_add(self):
result = self.calculator.add(2, 3)
self.assertEqual(result, 5)
def test_subtract(self):
result = self.calculator.subtract(5, 2)
def test_multiply(self):
result = self.calculator.multiply(4, 3)
def test_divide(self):
result = self.calculator.divide(10, 2)
def test_divide_by_zero(self):
with self.assertRaises(ZeroDivisionError):
self.calculator.divide(10, 0)
if __name__ == '__main__':
unittest.main()
```
In the above code, we create a test class `CalculatorTest` that inherits from ùnittest.TestCase`. Each
test method starts with the name `test_` and performs assertions to check the expected results. We use
the àssertEqual` method to compare the actual results with the expected results.
**Integration Testing:**
import unittest
class CalculatorIntegrationTest(unittest.TestCase):
def setUp(self):
self.calculator = Calculator()
def test_addition_and_subtraction(self):
result = self.calculator.add(5, 3)
result = self.calculator.subtract(result, 2)
def test_multiplication_and_division(self):
result = self.calculator.multiply(4, 3)
result = self.calculator.divide(result, 2)
if __name__ == '__main__':
unittest.main()
```
In the integration testing code, we create a test class `CalculatorIntegrationTest` that also inherits from
ùnittest.TestCase`. Each test method simulates a series of operations to test the integration of
different methods in the `Calculator` class.
The ùnittest` framework will execute the tests and report the results, indicating if the tests passed or
failed.
Question 10: Prototype model -Develop the prototype of the product
Developing a prototype of an e-commerce website involves creating a basic version of the website that
showcases the main features, functionality, and user interface. Here's a general outline of the steps you
can follow to develop a prototype for an e-commerce website:
1. Define the Scope and Objectives: Clearly define the scope of your e-commerce website prototype,
including the key features, target audience, and the primary objectives of the prototype.
2. Identify User Flows: Determine the main user flows and interactions within the website, such as
browsing products, adding items to the cart, and checking out. Map out these flows to understand the
user journey.
3. Sketch the Layout: Begin by sketching the layout and structure of the key pages of the e-commerce
website, such as the home page, product listing page, product detail page, cart, and checkout. Focus on
the overall structure, placement of key elements, and navigation.
4. Create Wireframes: Convert the sketches into digital wireframes using design software or online
prototyping tools. Wireframes provide a more detailed representation of the website's layout, content
placement, and user interface elements.
5. Design the User Interface: Apply basic visual design principles to the wireframes to create a more
polished user interface. Define the color scheme, typography, and visual elements that align with your
brand identity.
6. Build Interactive Prototypes: Utilize prototyping tools like Adobe XD, Figma, or InVision to create
interactive prototypes. Link the different screens and elements to showcase the navigation and user
interactions. Focus on creating a realistic user experience without worrying about backend functionality
at this stage.
7. Test and Gather Feedback: Share the prototype with stakeholders, potential users, or target audience
members to gather feedback. Conduct usability testing sessions to evaluate the user experience, identify
pain points, and make necessary improvements.
8. Iterate and Refine: Incorporate the feedback received during testing and iterate on the prototype.
Make necessary adjustments to improve the usability, visual design, and overall user experience.
9. Validate Assumptions: Use the prototype to validate assumptions about user behavior, conversion
flows, and the effectiveness of your design decisions. Use analytics tools or conduct user research to
gather data and insights.
10. Document and Handoff: Document the key aspects of the prototype, including the user flows, design
specifications, and any functionality details. Provide the necessary documentation to developers or
stakeholders who will be involved in the full-scale development phase.
Remember, the prototype serves as a visual representation and interactive demonstration of your e-
commerce website concept. It helps you gather feedback, validate design decisions, and refine the user
experience before investing significant resources into development.
The specific tools and technologies you use for prototyping may vary based on your preferences and
expertise. The key is to focus on creating a prototype that effectively communicates the website's main
features and functionality.

Web Tech File

Uploaded by

Copyright:

Available Formats

You might also like

Web Tech File

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Tech File

Uploaded by

Copyright:

Available Formats

Question 1: Write Software Requirement Specification sheet (SRS) of your project.

4. External Interface Requirements

o – Level DFD for Ecommerce website

1 – level DFD for ecommerce website

The importance of the ER Diagram for an e -commerce website is that it helps in

• User (UserID, Name, Email, Password, UserType)

• User can have zero or many Orders (one-to-many)

return "Browse products"

def select_product(self, product_id):

return f"Select product with ID: {product_id}"

def add_to_cart(self, product_id):

return f"Add product with ID: {product_id} to cart"

return "Make payment"

return "Place order"

return "Process order"

return "Manage products"

for i, action in enumerate(actions):

(customer, customer.select_product, 123),

(customer, customer.add_to_cart, 123),

for i, action in enumerate(actions):

actor, method = action

print(f"{i+1}. {actor.__class__.__name__} --> {method()}")

actor, method, *args = action

print(f"{i+1}. {actor.__class__.__name__} --> {method(*args)}")

# Generate the diagrams

return "Browse products"

def add_to_cart(self, product_id):

def add_product(self, product_id):

print("Customer --> Cart")

print("Seller --> ProductManager")

print("EcommerceSystem --> Seller")

# Generate the diagram

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="style.css">

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-

<a href="index.html"><img src="images/logo.png" alt="Image not found"

<a href="cart.html"><img src="images/cart.png" width="30px" height="30px" alt="image not

<img src="images/menu.png" class="menu-icon" onclick="menutoggle()">

<h1>Give Your Shopping <br>A New Style!</h1>

<p>Spend Less!!! <br>Shop More!!!</p>

<a href="" class="btn">Explore Now &#8594;</a>

<img src="images/pngwing.com (1).png" alt="image not found">

<h2 class="title">Featured Products</h2>

<h4>Red Printed T-Shirt</h4>

<i class="fa fa-star"></i>

<i class="fa fa-star"></i>

<i class="fa fa-star"></i>

<i class="fa fa-star"></i>

<i class="fa fa-star-o"></i>

<h4>HRX Sports Shoes</h4>

<i class="fa fa-star"></i>

<i class="fa fa-star"></i>

<i class="fa fa-star"></i>

print(f"{i+1}. {actor.class.name} --> {method()}")

print(f"{i+1}. {actor.class.name} --> {method(*args)}")

<a href="" class="btn">Explore Now →</a>

<a href="" class="btn">Buy Now →</a>