Pract. BCA505 E-Commerce

Practical No 1:- Download readymade free templates of E-Commerce websites and modify it.
Steps 1:- Download free e-commerce templates

Step 2:- Click E-commerce templates CSS3 website templates
Step 3:- Click any one templates
Step 4:- Click Launch Preview

Step 5:- Click download
Step 6:- Extract Files & modify

Pract No 2: Create simple and static demo web page for online shopping site
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Shopping Site</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
header {
background-color: #333;
color: white;
padding: 10px 20px;
text-align: center;
nav {
margin: 20px;
nav a {
text-decoration: none;
color: #333;
margin: 0 10px;
font-weight: bold;
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
.product {
background: white;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
margin: 10px;
padding: 20px;
width: 200px;
text-align: center;
.product img {
max-width: 100%;
height: auto;
border-bottom: 1px solid #ddd;
margin-bottom: 10px;
.product h3 {
margin: 10px 0;
font-size: 1.2em;
.product p {
color: #555;
.product .price {
font-size: 1.5em;
color: #e74c3c;
margin: 10px 0;
footer {
color: white;
text-align: center;
padding: 10px;
position: fixed;
width: 100%;
bottom: 0;
</style>
</head>
<body>
<header>
<h1>Online Shopping Site</h1>
</header>
<nav>
<a href="#">Home</a>
<a href="#">Products</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
<div class="container">
<div class="product">
<img src="img1.jfif" alt="Product 1">
<h3>shoes</h3>
<p>Running Shoes For Men (Multicolor , 8) </p>
<div class="price">$700</div>
<button>Add to Cart</button>
</div>
<img src="download1.jfif" alt="Product 2">
<h3>Shoes</h3>
<p>Field Care Men's S-200 Running shoes for boys.</p>
</div>
<img src="dow2.jfif" alt="Product 3">
<h3>T-Shirts</h3>
<p>The Differences between Heavyweight and Lightweight T-Shirts.</p>
</div>
</div>
<footer>
<p>© 2024 Online Shopping Site</p>
</footer>
</body>
</html>
***********************OUTPUT************************************************
Pract no 3 Create simple and static Feedback Form (web page) for online shopping site.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Feedback Form</title>
<style>
body {

margin: 0;
padding: 0;
}
.container {
max-width: 600px;
margin: 20px auto;
padding: 20px;
background: white;
border-radius: 8px;
}
h1 {
text-align: center;
color: #333;
}
form {
display: flex;
flex-direction: column;
}
label {
margin-bottom: 5px;
font-weight: bold;
}
input, textarea {
padding: 10px;
border-radius: 4px;
font-size: 16px;
}
textarea {
resize: vertical;
min-height: 100px;
}
button {
color: white;
border: none;
padding: 10px;
font-size: 16px;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;

}
button:hover {
}
</style>
</head>
<body>
<h1>Feedback Form</h1>
<form action="#">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="rating">Rating:</label>
<select id="rating" name="rating" required>

<option value="" disabled selected>Select your rating</option>
<option value="1">1 - Poor</option>
<option value="2">2 - Fair</option>
<option value="3">3 - Good</option>
<option value="4">4 - Very Good</option>

<option value="5">5 - Excellent</option>
</select>
<label for="feedback">Feedback:</label>
<textarea id="feedback" name="feedback" placeholder="Your comments here..."
required></textarea>
<button type="submit">Submit Feedback</button>
</form>
</div>
</body>
</html>
*********************************OUTPUT*************************************
Pract no 4 Create simple and static demo product catalog web page for online shopping site.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Product Catalog</title>
<style>
body {
margin: 0;
padding: 0;
header {
color: red;
padding: 10px 20px;
text-align: center;
nav {
margin: 20px;
nav a {
text-decoration: none;
color: #333;
margin: 0 10px;
font-weight: bold;
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
.product {
background: yellow;
border-radius: 5px;
margin: 10px;
padding: 20px;
width: 200px;
text-align: center;
.product img {
max-width: 100%;
height: auto;
border-bottom: 1px solid #ddd;
.product h3 {
margin: 10px 0;
font-size: 1.2em;
.product p {
color: #555;
.product .price {
font-size: 1.5em;
color: #e74c3c;
margin: 10px 0;
footer {
color: white;
text-align: center;
padding: 10px;
position: fixed;
width: 100%;
bottom: 0;
</style>
</head>
<body>
<header>
<h1>product catalog </h1>
</header>
<nav>
<a href="#">Home</a>
<a href="#">Products Catlog</a>
<a href="#">Feedback</a>
<a href="#">Contact</a>
<a href="#">Visit Site </a>
</nav>
<img src="D:\img1.jpg" alt="Product 1">
<h3>catlog</h3>
<p>Find the right freelance service, right away (https://www.freepik.com) </p>
<div class="price">Product number: 779104</div>
</div>
<h3>Graphic Design</h3>
<p>How to Design a Product Catalogue</p>
<div class="price">30 Best Design</div>

</div>
<h3>T-Shirts</h3>
<p>Why is it beneficial to use Digital Catalogs?</p>
<div class="price">Save costs and time</div>
</div>
<h3>Select Your Desgin</h3>
<p> PDF catalogs (organized on their site) </p>
<div class="price">Many More Types Available</div>
</div>
</div>
<footer>
<p>© 2024 Online Shopping Site</p>
</footer>
</body>
</html>
***********************************OUTPUT***************************************
Pract no 5 Demonstrate domain registration
Steps to Register a Domain Name
1. Choose a Domain Name:

o Think of a unique, memorable name that represents your brand or project.
o Keep it short, easy to spell, and relevant to your content or business.
2. Check Domain Availability:

o Use a domain name registrar or a domain search tool to check if your desired domain
name is available.
o Common domain registrars include GoDaddy, Namecheap, Google Domains, and others.
3. Select a Domain Registrar:

o Choose a reputable domain registrar. Some popular options are:
 GoDaddy
 Namecheap
 Google Domains
 Bluehost

4. Register the Domain:
o Follow the registrar’s process to register the domain name.
o Provide your contact information and choose a registration period (typically 1 year or
more).
5. Complete Payment:
o Pay for the domain registration. Costs vary depending on the registrar and the domain
extension (.com, .net, .org, etc.).
6. Verify Ownership:
o You will receive an email to verify your email address. Follow the instructions to
complete the registration.
7. Configure Domain Settings:
o After registration, you can configure DNS settings, such as setting up email, connecting
the domain to a website, or adding subdomains.
Mock Walkthrough
1. Choose a Domain Name:
 Let’s say we want to register example-shop.com.
2. Check Domain Availability:
 Go to Namecheap’s domain search and enter example-shop.com.
3. Select a Domain Registrar:
 We’ll use Namecheap for this example.

4. Register the Domain:
 Go to Namecheap’s domain registration page.

 Enter example-shop.com in the search box and click “Search.”
5. Select Domain and Add to Cart:
 If example-shop.com is available, click “Add to Cart.”

 You can choose additional services like WHOIS protection or email hosting if desired.
6. Proceed to Checkout:
 Click “View Cart” and then “Confirm Order.”

 Create an account or log in if you already have one.
7. Provide Contact Information:
 Enter your details including name, address, and email.
8. Choose Registration Period:
 Select the number of years you want to register the domain for (e.g., 1 year).
9. Complete Payment:
 Enter your payment information and complete the purchase.
10. Verify Ownership:
 Check your email for a verification message from Namecheap. Click the link to verify
your email address.
11. Configure Domain Settings:
 Log in to your Namecheap account.

 Go to “Domain List” and click on example-shop.com to manage settings.
 Set up DNS records or configure additional services as needed.
Concu:-
 Choose and check availability of the domain name.

 Select a domain registrar and complete the registration process.
 Verify your email to confirm ownership.
 Configure DNS settings as needed.
Pratical 6:- Search Web Hosting Plans with configuration
 Type of Hosting:
 Shared Hosting: Suitable for small websites and blogs. Resources are shared with other
users.
 VPS Hosting: Offers dedicated resources within a virtual server. Good for growing sites
needing more control.
 Dedicated Hosting: Provides an entire server dedicated to your website. Ideal for large
sites with high traffic.
 Cloud Hosting: Scalable and flexible hosting that uses multiple servers. Good for sites
with variable traffic.
 Managed WordPress Hosting: Optimized for WordPress sites with additional support
and features.
 Features to Compare:
 Storage: Amount of disk space available
 Bandwidth: Amount of data transfer allowed per month.

 Domains: Number of domains you can host or register.
 Email Accounts: Number of email accounts included.
 SSL Certificates: Security feature for encrypting data.
 Support: Types of customer support (e.g., 24/7 chat, phone support).
 Backup: Frequency and type of backups included.
 Uptime Guarantee: Percentage of time the server is operational.
 Pricing and Billing:
 Monthly vs. Annual Billing: Check if there are discounts for long-term commitments.
 Renewal Rates: Be aware of renewal rates, which can differ from introductory prices.
Examples of Popular Web Hosting Providers and Their Plans
1. Bluehost
Basic Plan:
 Price: Starting at $2.95/month (introductory offer)

 Storage: 50 GB SSD
 Bandwidth: Unmetered
 Domains: 1 free domain for the first year
 Email Accounts: 5 email accounts
 SSL Certificate: Free
 upport: 24/7 support

2 Plus Plan:
 Price: Starting at $5.45/month

 Storage: Unlimited SSD
 Domains: Unlimited domains
 Email Accounts: Unlimited
 Support: 24/7 support
Website: Bluehost
. SiteGround
StartUp Plan:

 Storage: 10 GB
 Bandwidth: 10,000 visits/month
 Domains: 1 domain
GrowBig Plan:
 Storage: 20 GB
 Bandwidth: 25,000 visits/month
 Domains: Unlimited
Website: SiteGround
3. HostGator
Hatchling Plan:

 Storage: Unmetered
 Email Accounts: $100 Google Ads credit
Baby Plan:


Website: HostGator
4. DreamHost
Shared Starter Plan:

 Storage: 50 GB SSD
 Email Accounts: $1.67 per email account
 SL Certificate: Free
Shared Unlimited Plan:

Website: DreamHost
Pratical 7 :- Demonstrate free hosting with control panel
Steps for Free Hosting
1. Sign Up for an Account
1. Go to InfinityFree:
o Visit InfinityFree.
2. Create an Account:
o Click on the “Sign Up” button.
o Fill in the required details, including your email address and password.
o Verify your email address if required.
2. Access the Control Panel
1. Log In:
o After signing up, log in to your InfinityFree account.
2. Go to the Control Panel:
o Once logged in, you’ll be redirected to the InfinityFree client area.
o Click on “Control Panel” for the account you want to manage.
(Note: The appearance might vary.)
3. Create a New Account
1. Add a New Domain:

o In the control panel, look for the “Addon Domains” or “Subdomains” section to create a
new site.
o If you have a domain name, you can add it here. Alternatively, you can create a free
subdomain.
2. Create a Subdomain (if applicable):
o Click “Create Subdomain.”
o Enter a name for your subdomain and select the root directory where files will be
stored.
o Click “Create.”
4. Upload Your Website
1. Access File Manager:

o In the control panel, find the “File Manager” or “FTP Accounts” section.
o Use the file manager to upload your website files. If using FTP, you’ll need an FTP client
like FileZilla.
2. Upload Files:
o Go to the directory where your website files should be placed (e.g., htdocs for the
main directory).
o Upload your files, including index.html, style.css, and any other necessary files.
(Note: The appearance might vary.)

5. Manage Your Website
1. Database Management (if needed):

1. If your website requires a database, go to the “MySQL Databases” section in the
control panel.
2. Create a new database and user, then connect your website to this database.
2. Email Setup (if needed):
1. Check the “Email Accounts” section to set up email addresses associated with
your domain.
3. Additional Settings:
1. Configure any additional settings as required, such as custom DNS settings or
SSL certificates (if supported).
Summary
 Signing up and logging in to your account.

 Accessing the control panel to manage domains and files.
 Creating and managing domains or subdomains.
 Uploading website files via the file manager or FTP.
 Configuring databases and additional settings if needed.
Pratical 8:- Upload any demo video on YouTube.
Step by step, you can upload your video on YouTube.
1. Log in to your YouTube account.
2. Open the YouTube homepage.
3. Click on the "Sign In" button at the top right-hand corner of the page.
4. Sign in using your YouTube, Google
5. Click the "Create a Video or Post" icon. This is also located on the top right-hand corner
of the page.
6. Click the upload button that's located on the top of the homepage to the right of the search
bar.
7. Choose the video you want to upload.
Go to "Select Files To Upload" to open the browser, then find the file you want to add.
8. Before uploading your file, you will need to choose your privacy settings from the center
drop-down menu where four different options will appear.
 Public: Your video content is available for anyone to see. It also appears in the search results and
recommendations across YouTube.
 Unlisted: Your uploaded video is on YouTube, but only those with the video URL (sharing link)
can view it.
 Private: Your video is on YouTube, but only you can see it when logged into your YouTube
account.
 Scheduled: Use this setting to upload a video as private, scheduling it to go public at your chosen
time.
9. Now click on the open button.
recording before you begin the upload as well.
10. Next, you will need to add your YouTube video details.
There are three required pieces of information which are the title of your video, the description
of your video, and any tags (keywords) you want to add to your video. You can also add other
features such as hashtags, thumbnails, end screens and cards, etc. as well.
 Title: This is the name of your video and should contain your relevant keywords naturally so your
content appears in the YouTube searches and the users click to watch option.
 Description: Here is where you add your hashtags and detailed information about the video. You
should provide context for the video content, as well as relevant external links.
 Tags: These are the keywords you researched and determined to be the best possible fit for your
video
 Thumbnails: You can use the thumbnails that YouTube automatically recommends or you can
use custom thumbnails. We recommend custom thumbnails because the thumbnail is so important.
The thumbnail is the attention-grabbing feature that will catch the viewer's eye and make them
want to click on and watch your video.
 Hashtags: If you add two to three hashtags in your video description, YouTube will automatically
take the hashtags you posted and display them above your video's title. Hashtags improve search
ability, give your video more visibility, and make your video much easier for a viewer to find, and
more.
 End Screens and Cards: These help promote your brand and extend the watch time on your video
channel.
 Getting Subscribers: This can be done in several ways which are linking your new video to other
videos, adding external links, commenting on related videos, using social media to promote your
video.
11. Lastly, you will need save the video.
This will save your title, description and everything else after your video is done uploading. Once
you see that the progress bar has been filled, you will know it has been posted on YouTube. You
can then take your newly uploaded video and embed it on your website, share it online, or anything
else you would like to do with it.
Pratical 9:-Create and develop your blog.
What Is a Blog?
A blog (short for “weblog”) is an online journal or informational website run by an individual,
group, or corporation that offers regularly updated content (blog post) about a topic. It presents
information in reverse chronological order and it’s written in an informal or conversational style.
When blogs first appeared on the world wide web, their goal was mainly personal use, such as
sharing stories, interests, and thoughts.
 Step 1: Choose your blog topic and name
 Step 2: Find the right blogging platform
 Step 3: Set up web hosting
 Step 4: Configure your blog
 Step 5: Design and customize it
Step 1: Choose your blog topic and name

1. Pick a Topic- Choose the appropriate topic for the blog
2. Determine Your Niche- Choose the appropriate place for the blog
3. Confirm Market Demand- think about the idea popular in market
4. Choose a Name- Choose the proper name for the blog
STEP 2 – Find the Right Blogging Platform

There are many different blogging platforms that you can choose.
STEP 3 – Set Up Your Blog Through Web Hosting (and Register Domain Name)
To get started with a self-hosted blog, you’ll need to buy a domain name. We’ve tested all
major web hosting platforms by looking at price, reliability, performance, features,
STEP 4 – Configure Your own Blog
Once you have your admin account set up, you can proceed to your new dashboard.
Just go to the admin page (e.g., yourblogname.com/wp-admin) and input the access details for
your admin account. Before you begin, remember to hit the “Save Changes” blue button every
time you change the settings.
STEP 5 – Design and Customize Your Blog
Pratical 10:-Demonstarte E-mail functions.
E-mail-
It is the communication method used to sending and receiving the messages through electronic
devices and computer network. It is the transmission of messages from one computer to another.
The person who has to send a certain message is called the sender and the one who receives it is
called the receiver. For successful communication, each user should have a unique email address.
The e-mail address may be
[email protected]
Functions of E-mail:-
1. Discussing business decisions

2. Sharing documents
3. Evidence in court
4. Automatic reply and forwarding of emails.
5. Autoresponder can be used while accepting and sending bulk emails.
6. The extensive contact list can be saved and further used to save time.
7. A large number of emails can be sent instantly.
8. The composition of emails is simple to execute.
9. Receives notifications when emails are not delivered.
10. A carbon copy of the same Email can be shared with others.
11. Reporting can be viewed to track performance.
12. Unwanted Emails can be sent to the trash or even deleted them.
13. Emails can be saved for a long time in an email database.
14. Emails can be saved as drafts for further use.
15. Vulnerable or suspicious emails are directly sent to the spam folder
16. The chat feature is also available for better usability and performance.

Pract. BCA505 E-Commerce

Uploaded by

Copyright:

Available Formats

Pract. BCA505 E-Commerce

Uploaded by

Document Information

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

Pract. BCA505 E-Commerce

Uploaded by

Copyright:

Available Formats

Practical No 1:- Download readymade free templates of E-Commerce websites and modify it.

Steps 1:- Download free e-commerce templates

Step 3:- Click any one templates

Step 4:- Click Launch Preview

Step 6:- Extract Files & modify

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

<title>Online Shopping Site</title>

font-family: Arial, sans-serif;

padding: 10px 20px;

border: 1px solid #ddd;

box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

border-bottom: 1px solid #ddd;

<h1>Online Shopping Site</h1>

<img src="img1.jfif" alt="Product 1">

<p>Running Shoes For Men (Multicolor , 8) </p>

<img src="download1.jfif" alt="Product 2">

<p>Field Care Men's S-200 Running shoes for boys.</p>

<img src="dow2.jfif" alt="Product 3">

<p>The Differences between Heavyweight and Lightweight T-Shirts.</p>

<p>&copy; 2024 Online Shopping Site</p>

font-family: Arial, sans-serif;

transition: background-color 0.3s ease;

<select id="rating" name="rating" required>

<option value="4">4 - Very Good</option>

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

font-family: Arial, sans-serif;

padding: 10px 20px;

border: 1px solid #ddd;

box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

border-bottom: 1px solid #ddd;

<h1>product catalog </h1>

<a href="#">Products Catlog</a>

<a href="#">Visit Site </a>

<img src="D:\img1.jpg" alt="Product 1">

<p>Find the right freelance service, right away (https://www.freepik.com) </p>

<div class="price">Product number: 779104</div>

<img src="D:\img2.jpg" alt="Product 2">

<p>How to Design a Product Catalogue</p>

<div class="price">30 Best Design</div>

<img src="D:\img3.jpg" alt="Product 3">

<p>Why is it beneficial to use Digital Catalogs?</p>

<div class="price">Save costs and time</div>

<img src="D:\img4.jpg" alt="Product 2">

<h3>Select Your Desgin</h3>

<p> PDF catalogs (organized on their site) </p>

<div class="price">Many More Types Available</div>

<p>&copy; 2024 Online Shopping Site</p>

Steps to Register a Domain Name

1. Choose a Domain Name:

2. Check Domain Availability:

3. Select a Domain Registrar:

1. Choose a Domain Name:

 Let’s say we want to register example-shop.com.

2. Check Domain Availability:

 Go to Namecheap’s domain search and enter example-shop.com.

3. Select a Domain Registrar:

 We’ll use Namecheap for this example.

 Go to Namecheap’s domain registration page.

5. Select Domain and Add to Cart:

 If example-shop.com is available, click “Add to Cart.”

<p>© 2024 Online Shopping Site</p>

<p>© 2024 Online Shopping Site</p>