GUI FInal project
GUI FInal project
APPLICATION DEVELOPMENT
USING VB.ET
(22034)
MICRO-PROJECT
Academic year 2023-24
1
YADAVRAO TASGAONKAR POLYTECHNICS
MICRO-PROJECT REPORT
Academics year 2023-24
TITLE OF PROJECT
E-Commerce Website
SUBMITTED BY:
1. Ronit patil
2. Keval Chopade
3. Ruhsikesh Kulkarni
SUBMTTED TO:
Yadavrao Tasgaonkar Polytechnic Bhivpuri For academic
year 2023-24
2
Maharashtra State
Board of Technical Education
CERTIFICATE
This is to certify that Mr. Ronit Jitendra Patil Roll No. 01 of Fourth
Semester of Diploma in Computer Engineering of Institute
Yadavrao Tasgaonkar Polytechnic Bhivpuri Road (code 0960) has
completed the micro-project satisfactorily in subject GUI
Application Development Using VB.NET (22034) for the academic
year 2023-2024 as prescribed in the curriculum.
Seal of
Institute
3
\
Maharashtra State
Board of Technical Education
CERTIFICATE
Seal of
Institute
4
Maharashtra State
Board of Technical Education
CERTIFICATE
Seal of
Institute
5
GROUP MEMBERS
6
INDEX
7
Aim of a project
8
ABSTRACT
9
INTRODUCTION
10
VB.Net Introduction
Visual Basic .ASP NET runs on the .NET framework, which means that it
has full access to the .NET libraries. It is a very productive tool for rapid
creation of a wide range of Web, Windows, Office, and Mobile applications that
have been built on the .NET framework.
11
Actual Methodology Used
12
Actual Resource Used
13
Advantages & Disadvantages
Advantages:
5. Increased Sales: With the ability to reach a larger audience and provide
convenient shopping experiences, e-commerce websites often lead to increased
sales and revenue.
14
Disadvantages:
4. Shipping Costs and Delays: Customers may incur additional costs for
shipping, and delivery delays can lead to dissatisfaction. Additionally,
managing logistics and inventory for e-commerce businesses can be complex
and costly.
15
CODING
HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Footcap - Find your footware</title>
<link rel="shortcut icon" href="./favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="./assets/css/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=Josefin+Sans:wght@300;400;500;600;700&family=Roboto:wght@400;500;700&display=swap"
rel="stylesheet">
<link rel="preload" href="./assets/images/hero-banner.png" as="image">
</head>
<body id="top">
<header class="header" data-header>
<div class="container">
<div class="overlay" data-overlay></div>
<a href="#" class="logo">
<img src="./assets/images/logo.svg" width="160" height="50" alt="Footcap logo">
</a>
<button class="nav-open-btn" data-nav-open-btn aria-label="Open Menu">
<ion-icon name="menu-outline"></ion-icon>
</button>
<nav class="navbar" data-navbar>
<button class="nav-close-btn" data-nav-close-btn aria-label="Close Menu">
<ion-icon name="close-outline"></ion-icon>
</button>
<a href="#" class="logo">
<img src="./assets/images/logo.svg" width="190" height="50" alt="Footcap logo">
</a>
<ul class="navbar-list">
<li class="navbar-item">
<a href="#" class="navbar-link">Home</a>
</li>
<li class="navbar-item">
<a href="#" class="navbar-link">About</a>
</li>
<li class="navbar-item">
<a href="#" class="navbar-link">Products</a>
</li>
<li class="navbar-item">
<a href="#" class="navbar-link">Shop</a>
</li>
</ul>
<ul class="nav-action-list">
<li>
<button class="nav-action-btn">
<ion-icon name="search-outline" aria-hidden="true"></ion-icon>
<span class="nav-action-text">Search</span>
</button>
</li>
<li>
<a href="#" class="nav-action-btn">
<ion-icon name="person-outline" aria-hidden="true"></ion-icon>
<span class="nav-action-text">Login / Register</span>
</a>
</li>
<li>
<button class="nav-action-btn">
<ion-icon name="heart-outline" aria-hidden="true"></ion-icon>
<span class="nav-action-text">Wishlist</span>
<data class="nav-action-badge" value="5" aria-hidden="true">5</data>
</button>
</li>
</ul>
</nav>
</div>
16
</header>
<main>
<article>
<section class="section special">
<div class="container">
<div class="special-banner" style="background-image: url('./assets/images/special-banner.jpg')">
<h2 class="h3 banner-title">New Trend Edition</h2>
<a href="#" class="btn btn-link">
<span>Explore All</span>
<ion-icon name="arrow-forward-outline" aria-hidden="true"></ion-icon>
</a>
</div>
<div class="special-product">
<h2 class="h2 section-title">
<span class="text">Nike Special</span>
<span class="line"></span>
</h2>
<ul class="has-scrollbar">
<li class="product-item">
<div class="product-card" tabindex="0">
<figure class="card-banner">
<img src="./assets/images/product-4.jpg" width="312" height="350" loading="lazy"
alt="Air Jordan 7 Retro " class="image-contain">
<div class="card-badge"> -25%</div>
</figure>
<div class="card-content">
<div class="card-cat">
<a href="#" class="card-cat-link">Men</a> /
<a href="#" class="card-cat-link">Sports</a>
</div>
<h3 class="h3 card-title">
<a href="#">Air Jordan 7 Retro </a>
</h3>
<data class="card-price" value="170.85">$170.85 <del>$200.21</del></data>
</div>
</div>
</li>
</ul>
</div>
</div>
</section>
</article>
</main>
<footer class="footer">
<div class="footer-bottom">
<div class="container">
<p class="copyright">
© 2022 <a href="#" class="copyright-link">RONIN</a>. All Rights Reserved
</p>
</div>
</div>
</footer>
<script src="./assets/js/script.js"></script>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</body>
</html> name="search-outline" aria-hidden="true"></ion-icon>
<span class="nav-action-text">Search</span>
</button>
</li>
<li>
<a href="#" class="nav-action-btn">
<ion-icon name="person-outline" aria-hidden="true"></ion-icon>
<span class="nav-action-text">Login / Register</span>
</a>
</li>
<li>
<button class="nav-action-btn">
<ion-icon name="heart-outline" aria-hidden="true"></ion-icon>
<span class="nav-action-text">Wishlist</span>
<data class="nav-action-badge" value="5" aria-hidden="true">5</data>
</button>
</li>
</ul>
</nav>
</div>
</header>
<main>
<article>
<section class="section hero" style="background-image: url('./assets/images/hero-banner.png')">
17
<div class="container">
<h2 class="h1 hero-title">
New Summer <strong>Shoes Collection</strong>
</h2>
<p class="hero-text">
Competently expedite alternative benefits whereas leading-edge catalysts for change. Globally leverage
existing an
expanded array of leadership.
</p>
<button class="btn btn-primary">
<span>Shop Now</span>
<ion-icon name="arrow-forward-outline" aria-hidden="true"></ion-icon>
</button>
</div>
</section>
<section class="section product">
<div class="container">
<h2 class="h2 section-title">Bestsellers Products</h2>
<ul class="product-list">
<li class="product-item">
<div class="product-card" tabindex="0">
<figure class="card-banner">
<img src="./assets/images/product-4.jpg" width="312" height="350" loading="lazy"
alt="Air Jordan 7 Retro " class="image-contain">
<div class="card-badge"> -25%</div>
</figure>
<div class="card-content">
<div class="card-cat">
<a href="#" class="card-cat-link">Men</a> /
<a href="#" class="card-cat-link">Sports</a>
</div>
<h3 class="h3 card-title">
<a href="#">Air Jordan 7 Retro </a>
</h3>
<data class="card-price" value="170.85">$170.85 <del>$200.21</del></data>
</div>
</div>
</li>
<li class="product-item">
<div class="product-card" tabindex="0">
<figure class="card-banner">
<img src="./assets/images/product-5.jpg" width="312" height="350" loading="lazy"
alt="Nike Air Max 270 SE" class="image-contain">
<div class="card-badge">New</div>
</figure>
<div class="card-content">
<div class="card-cat">
<a href="#" class="card-cat-link">Men</a> /
<a href="#" class="card-cat-link">Women</a>
</div>
<h3 class="h3 card-title">
<a href="#">Nike Air Max 270 SE</a>
</h3>
<data class="card-price" value="120.85">$120.85</data>
</div>
</div>
</li>
<li class="product-item">
<div class="product-card" tabindex="0">
<figure class="card-banner">
<img src="./assets/images/product-7.jpg" width="312" height="350" loading="lazy"
alt="Nike Basketball shoes" class="image-contain">
</figure>
<div class="card-content">
<div class="card-cat">
<a href="#" class="card-cat-link">Men</a> /
<a href="#" class="card-cat-link">Sports</a>
</div>
<h3 class="h3 card-title">
<a href="#">Nike Basketball shoes</a>
</h3>
<data class="card-price" value="120.85">$120.85</data>
</div>
</div>
</li>
</ul>
</div>
</section>
<section class="section special">
<div class="container">
18
<div class="special-banner" style="background-image: url('./assets/images/special-banner.jpg')">
<h2 class="h3 banner-title">New Trend Edition</h2>
<a href="#" class="btn btn-link">
<span>Explore All</span>
<ion-icon name="arrow-forward-outline" aria-hidden="true"></ion-icon>
</a>
</div>
<div class="special-product">
<h2 class="h2 section-title">
<span class="text">Nike Special</span>
<span class="line"></span>
</h2>
<ul class="has-scrollbar">
<li class="product-item">
<div class="product-card" tabindex="0">
<figure class="card-banner">
<img src="./assets/images/product-4.jpg" width="312" height="350" loading="lazy"
alt="Air Jordan 7 Retro " class="image-contain">
Login:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login and Registration Page</title>
<link rel="stylesheet" href="./assets/css/style.css">
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
19
.container {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
text-align: center;
}
h2 {
margin-bottom: 20px;
color: #333;
}
input[type="text"],
input[type="password",
input[type="submit"] {
width: 100%;
padding: 10px;
margin: 10px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
input[type="submit"] {
background-color: #4caf50;
color: white;
cursor: pointer;
transition: background-color 0.3s;
}
input[type="submit"]:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="container">
<h2>Login</h2>
<form action="/login" method="post">
<input type="text" name="username" placeholder="Username/E-mail" required>
<input type="password" name="password" placeholder="Password" required>
<input type="submit" value="Login">
</form>
<h2>Register</h2>
<form action="/register" method="post">
<input type="text" name="E-mail/Phone No." placeholder="E-mail/Phone No." required>
<input type="text" name="reg_username" placeholder="Username" required>
<input type="password" name="reg_password" placeholder="Password" required>
<input type="submit" value="Register">
</form>
</div>
</body>
</html>
20
Java Script:
'use strict';
window.addEventListener("scroll", function () {
if (window.scrollY >= 80) {
header.classList.add("active");
goTopBtn.classList.add("active");
} else {
header.classList.remove("active");
goTopBtn.classList.remove("active");
}
});
21
OUTPUT
22
23
Database SQL Query
CREATE DATABASE ecommerce;
USE ecommerce;
CREATE TABLE customers (
customer_id INT PRIMARY KEY AUTO_INCREMENT,
first_name VARCHAR(50),
last_name VARCHAR(50),
email VARCHAR(100) UNIQUE,
phone_number VARCHAR(20),
address VARCHAR(255)
);
INSERT INTO customers
(customer_id, first_name, last_name,email,phone_number,address)
VALUES
(101, 'keval','chopade','[email protected]',7248930066, 'madhav shrusti b wing 401
kalyan(w)'),
(205, 'ronit','patil','[email protected]',8104930067,'raigad b wing 301 ambernath(E)'),
(308, 'jayesh','rane','[email protected]',7020270831, 'chitra palace 402 ulhasnagar(w)'),
(409, 'hardik','hase','[email protected]',9426347508,'sanghavi estate b wing 402 kalyan (w)'),
(510, 'rushikesh','kulkarni','rushikeshkulkarni',8013675125,'godrej hills b wing 102 kalyan (W)');
-- Create table for storing products
CREATE TABLE products (
product_id INT PRIMARY KEY AUTO_INCREMENT,
nameofproduct VARCHAR(100),
description TEXT,
priceofproduct DECIMAL(10, 2),
stock_quantity INT
);
INSERT INTO products
(product_id,nameofproduct,priceofproduct,stock_quantity)
VALUES
(101,'nikes jordans',(190.20),100),
(502,'nike airforce',180,150),
(603,'nike football studs',50,100),
(804,'addidas sneakers',100,150),
(605,'puma sneakers',69,200);
-- Create table for storing orders
CREATE TABLE orders (
order_id INT PRIMARY KEY AUTO_INCREMENT,
customer_id INT,
order_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
total_amount DECIMAL(10, 2),
FOREIGN KEY (customer_id) REFERENCES customers(customer_id)
);
-- Create table for storing order details
CREATE TABLE order_details (
order_detail_id INT PRIMARY KEY AUTO_INCREMENT,
order_id INT,
product_id INT,
quantity INT,
unit_price DECIMAL(10, 2),
total_price DECIMAL(10, 2),
FOREIGN KEY (order_id) REFERENCES orders(order_id),
FOREIGN KEY (product_id) REFERENCES products(product_id)
);
DROP DATABASE ecommerce;
24
Course outcomes for a project
1. Technical Proficiency: Gain practical skills in web development languages,
frameworks, and tools such as HTML, CSS, JavaScript
5. Analytics and Reporting: Implement tools for tracking and analyzing user
behavior, sales performance, and other key metrics to gain valuable insights for
strategic decision-making and continuous improvement of the E-Commerce
platform.
25
CONCLUSION
Thank you for embarking on this journey with FootCap. Step into style, step
into comfort, and step into the future of online shoe shopping.
26
Reference
1. https://www.google.com/
2. https://chat.openai.com/
3. https://www.wikipedia.org/
27