WBP - 22619 WARLI-ART-SHOP

MICRO PROJECT REPORT

ON
“ WARLI-ART-SHOP ”

Submitted by
Shivam Sainath Korpakwad
Guided by
Ms. Bhojankar M. N.

TO
DEPARTMENT OF COMPUTER ENGINEERING
GRAMIN TECHNICAL & MANAGEMENT
CAMPUS, VISHNUPURI, NANDED-431606

MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION

(MSBTE), MUMBAI

ACADEMIC YEAR 2024-25

I
WBP - 22619 WARLI-ART-SHOP

MICRO PROJECT REPORT

ON
“ WARLI-ART-SHOP ”

Submitted by
Shivam Sainath Korpakwad
Guided by
Mr. Bhojankar M. N.
TO
In Partial Fulfillment for the Award of the Diploma In

DEPARTMENT OF COMPUTER ENGINEERING

GRAMIN TECHNICAL & MANAGEMENT CAMPUS,
VISHNUPURI, NANDED - 431606

ACADEMIC YEAR 2024-25

II
WBP - 22619 WARLI-ART-SHOP

CERTIFICATE

This is to certified that the project

entitled

“ WARLI-ART-SHOP ”
Being submitted by Mr. Shivam Sainath Korpakwad to State Board Of
Technical Education Mumbai as a partial fulfillment of award of Diploma in
COMPUTER ENGINEERING is record of Bonafide work carried out by his under
supervision and guidance of Mrs. Bhojankar M. N. The assigned project is
performed satisfactorily in the academic year 2024-25.

Mrs. Bhojankar M. N. Mr. Pathan F. S.

Guide Head of Department

Dr. Pawar V. S.

III
WBP - 22619 WARLI-ART-SHOP

Principal

IV
WBP - 22619 WARLI-ART-SHOP

ACKNOWLEDGEMENT

I take this opportunity to express my deep sense of gratitude to words Mrs.

Bhojankar M. N. Course in charge of Web based application development with PHP
who has been a constant source of inspiration to us and without her valuable guidance this
work could not possible.

I am thankful to all faculty members of my department also for their guidance,

support and encouragement for the accomplishment of our micro-project. I would like to
thankful to Mr. Pathan F. S. HOD of COMPUTER ENGINEERING (Polytechnic) for his
valuable comments and suggestion for me to improve my creativity regarding project work.

I also express my sincere thanks to my friends for their assistance and comments
for the betterment of this micro project.

Sincerely
Mr. Shivam Sainath Korpakwad

V
WBP - 22619 WARLI-ART-SHOP

Department of Computer Engineering

VI
WBP - 22619 WARLI-ART-SHOP

ANNUEXURE II

Evaluation Sheet for the Micro Project

Academic Year : 2024 – 2025 Name of faculty : Mrs. Bhojankar M. N.

Course : Web based application development with PHP
Course code : 226179 Semester : 6th Semester
Title of Project : WARLI ART SHOP.

Course outcome:

Major Learning Outcomes achieved by doing the Project:

1. Practical Outcomes

These outcomes focus on the hands-on skills and competencies the learner will gain by
completing the Warli Art Shop project (without using a database):

 Static Web Design and Layout: Learners will build a visually appealing web interface for an art
shop using HTML, CSS, and Bootstrap.
 Responsive Design Implementation: Learners will create a layout that adjusts gracefully
across different screen sizes using CSS media queries and responsive practices.

2. Unit Outcomes in Cognitive Domain:

This domain focuses on how learners understand, process, and apply knowledge:

 Understanding of Web Technologies: Learners will grasp the purpose and interaction of
HTML, CSS, PHP, and JavaScript in static web development.

 Application of PHP for Page Reusability: Learners will apply basic PHP to include common UI
components across multiple pages without duplicating code.

 Problem-Solving with Layout and Styling: Learners will analyze layout issues and apply CSS
strategies to improve visual structure.

3. Outcomes in Affective Domain:

This domain relates to attitudes, values, and personal growth during the learning process:

 Aesthetic Appreciation: Learners will cultivate an appreciation for traditional Warli art and
express it through respectful and creative design.
 Sense of Ownership and Confidence: Learners will build confidence by completing a
functional, stylized mini e-commerce site independently.

VI
I
WBP - 22619 WARLI-ART-SHOP

 Attention to Detail: Learners will demonstrate precision in styling, layout, and image
presentation.

Comments / Suggestions about team work/ leadership/ internship/ inter-personal

communication (if any)

Roll Student Name Marks out of Marks out of Total

No. 6 for 4 for out of
performance performance in 10
in oral/presentation
group activity
24 Shivam Sainath Korpakwad

Mrs. Bhojankar M. N.
(Name & Signature of faculty)

VI
II
WBP-22619 Warli Art shop

INDEX

Sr. No. Description Page No.

1. Abstract 2

2. Introduction 3

3. Brief description 4

4. What is Warli-Art-Shop 5

5. Code 6 - 16

6. Output 17

7. Advantages 18

8. Disadvantages 19

9. Future Scope 20

10. Conclusion 21

11. References 22

GT&MC, Vishnupuri, Nanded. 1

WBP-22619 Warli Art shop

ABSTRACT
The Warli Art Shop project is a simple static website created to promote the
traditional Warli painting style using modern web technologies like HTML, CSS,
JavaScript, Bootstrap, and PHP. It serves as a visual gallery, simulating an online store for
cultural art. The website includes a responsive design, a navbar, and an interactive image
carousel to showcase artwork. The use of PHP is limited to page structuring through
includes, helping reduce code repetition. This project does not involve any database
connectivity and is suitable for understanding front-end development. It promotes digital
exposure for tribal art while allowing learners to apply core technical and design skills.

GT&MC, Vishnupuri, Nanded. 2

WBP-22619 Warli Art shop

INTRODUCTION

This project was developed as part of a web development learning module. The aim
is to blend creativity with technology by creating a digital shop layout for showcasing Warli
art. The project focuses on static web design using fundamental web technologies, without
involving any databases or dynamic content. It helps learners understand how to build
clean UI layouts, make web pages responsive, and use PHP for modularity. It also
introduces the concept of cultural digitization by creating awareness of tribal art forms in a
modern, accessible format

GT&MC, Vishnupuri, Nanded. 3

WBP-22619 Warli Art shop

BRIEF DESCRIPTION

Warli Art Shop is a front-end project that displays a collection of traditional artworks
in an aesthetically designed webpage. It uses HTML and CSS to create the layout,
Bootstrap for responsiveness, JavaScript for interactivity, and PHP includes for structure.
The project is static and does not support user interaction such as login, shopping cart, or
data storage. Instead, it provides a clean, educational example of how a basic online shop
might be visually structured. It serves as an ideal beginner-level project focused on design
and basic scripting techniques.

GT&MC, Vishnupuri, Nanded. 4

WBP-22619 Warli Art shop

`
WHAT IS WARLI-ART-SHOP

Warli Art Shop is a mock online store built for showcasing Warli paintings an
ancient tribal art form from Maharashtra, India. The website acts as a digital gallery where
users can browse through artworks via a carousel. The project does not feature actual
transactions or dynamic product listings but gives a sense of what a basic storefront might
look like. Its purpose is to demonstrate the use of static web design elements while
highlighting the importance of preserving and promoting indigenous art through digital
platforms.

GT&MC, Vishnupuri, Nanded. 5

WBP-22619 Warli Art shop

CODE
CODE [ warli.html ]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Professional Navbar with Carousel</title>
<link rel="stylesheet" href="warli.css">
<link rel="stylesheet" href="header.php">
<link rel="stylesheet" href="footer.php">
<link rel="stylesheet" href="index.php">
<!-- Include Bootstrap CSS (if not already included) -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
KyZXEJ6H2LwW9P1e1lHhwkg2dB6T48K1zK3wFQgqO78+sa7g6eAXpGqa0a8v5zNc"
crossorigin="anonymous">
</head>
<body>
<!-- Navbar Section -->
<nav class="navbar">
<div class="navbar-container">
<a href="#" class="logo">WARLI-ART-SHOP</a>
<ul class="navbar-links">
<li><a href="#home" class="nav-link">Home</a></li>
<li><a href="#about" class="nav-link">About</a></li>
<li><a href="#services" class="nav-link">Services</a></li>
<li><a href="#contact" class="nav-link">Contact</a></li>
</ul>
<div class="navbar-right">
<a href="#login" class="btn-login">Login</a>
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
</div>
</nav>

GT&MC, Vishnupuri, Nanded. 6

WBP-22619 Warli Art shop

<!-- Carousel Section -->

<div class="carousel-container">
<div class="carousel">
<div>
<img src="warli7.jpeg" alt="Slide 1">
</div>
<div>
<img src="warli3.jpeg" alt="Slide 2">
</div>
<div>
<img src="warli5 (2).jpg" alt="Slide 3">
</div>
</div>
<button class="prev" onclick="moveSlide(-1)">&#10094;</button>
<button class="next" onclick="moveSlide(1)">&#10095;</button>
</div>
<div class="dots">
<span class="dot" onclick="currentSlide(0)"></span>
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
</div>

<script>
let currentIndex = 0;
const slides = document.querySelectorAll(".carousel img");
const dots = document.querySelectorAll(".dot");
function updateCarousel()
{
document.querySelector(".carousel").style.transform = `translateX(${-currentIndex * 100}vw)`;
dots.forEach(dot => dot.classList.remove("active"));
dots[currentIndex].classList.add("active");
}
function moveSlide(step)
{
GT&MC, Vishnupuri, Nanded. 7
WBP-22619 Warli Art shop

currentIndex = (currentIndex + step + slides.length) % slides.length;

updateCarousel();
}
function currentSlide(index)
{
currentIndex = index;
updateCarousel();
}
updateCarousel();
</script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-
alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-
pzjw8f+ua7Kw1TIq0tb2S4lHkZltt2vFzxh3DndW3D0rUorLg1s4YfF5vV9K9PaV"
crossorigin="anonymous"></script>
</body>
</html>

GT&MC, Vishnupuri, Nanded. 8

WBP-22619 Warli Art shop

CODE [ warli.css ]
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Body Styling */
body
{
font-family: 'Arial', sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}

/* Navbar Styling */
.navbar
{
background-color: #333;
padding: 15px 30px;
position: sticky;
top: 0;
z-index: 1000;
}
.navbar-container
{
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
width: 100%;
}
GT&MC, Vishnupuri, Nanded. 9
WBP-22619 Warli Art shop

.logo
{
font-size: 24px;
font-weight: 700;
color: #c1c154;
text-decoration: none;
}
.navbar-links
{
list-style-type: none;
display: flex;
gap: 20px;
}
.navbar-links .nav-link
{
font-size: 16px;
color: #fff;
text-decoration: none;
padding: 10px 15px;
border-radius: 4px;
transition: background-color 0.3s ease;
}
.navbar-links .nav-link:hover
{
background-color: #555;
}
.navbar-right
{
display: flex;
align-items: center;
}
.btn-login
{
background-color: #007bff;
color: #fff;
GT&MC, Vishnupuri, Nanded. 10
WBP-22619 Warli Art shop

padding: 5px 10px;

font-size: 10px;
border: none;
border-radius: 4px;
text-decoration: none;
transition: background-color 0.3s ease, color 0.3s ease;
}
.btn-login:hover
{
background-color: #0056b3;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
.navbar-container {
flex-direction: column;
align-items: flex-start;
}
.navbar-links
{
flex-direction: column;
gap: 10px;
}
.navbar-right
{
margin-top: 10px;
}
}

/* Carousel Styling */
.carousel-container
{
position: relative;
width: 100vw;
height: 100vh;
GT&MC, Vishnupuri, Nanded. 11
WBP-22619 Warli Art shop

overflow: hidden;
}
.carousel
{
display: flex;
transition: transform 0.5s ease-in-out;
width: 300vw; /* 3 images * 100vw each */
}
.carousel img
{
width: 100vw;
height: 100vh;
object-fit: cover;
}

/* Navigation Buttons */
.prev, .next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.5);
color: white;
border: none;
padding: 10px;
cursor: pointer;
border-radius: 50%;
}
.prev { left: 10px;
}
.next { right: 10px;
}

/* Dots Navigation */
.dots
{
GT&MC, Vishnupuri, Nanded. 12
WBP-22619 Warli Art shop

position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
}
.dot
{
height: 12px;
width: 12px;
margin: 5px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
cursor: pointer;
}
.active
{
background-color: #717171;
}

GT&MC, Vishnupuri, Nanded. 13

WBP-22619 Warli Art shop

CODE [ header.php ]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Warli Art Shop</title>
<link rel="stylesheet" href="warli.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<nav class="navbar">
<div class="navbar-container">
<a href="#" class="logo">WARLI-ART-SHOP</a>
<ul class="navbar-links">
<li><a href="#home" class="nav-link">Home</a></li>
<li><a href="#about" class="nav-link">About</a></li>
<li><a href="#services" class="nav-link">Services</a></li>
<li><a href="#contact" class="nav-link">Contact</a></li>
</ul>
<div class="navbar-right">
<a href="#login" class="btn-login">Login</a>
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
</div>
</div>
</nav>
</body>
</html>

GT&MC, Vishnupuri, Nanded. 14

WBP-22619 Warli Art shop

CODE [ index.php ]
<html>
<body>
<?php include 'header.php'; ?>
<div class="carousel-container">
<div class="carousel">
<div>
<img src="warli7.jpeg" alt="Slide 1">
</div>
<div>
<img src="warli3.jpeg" alt="Slide 2">
</div>
<div>
<img src="warli5 (2).jpg" alt="Slide 3">
</div>
</div>
<button class="prev" onclick="moveSlide(-1)">&#10094;</button>
<button class="next" onclick="moveSlide(1)">&#10095;</button>
</div>
<div class="dots">
<span class="dot" onclick="currentSlide(0)"></span>
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
</div>
<?php include 'footer.php'; ?>
</body>
</html>

GT&MC, Vishnupuri, Nanded. 15

WBP-22619 Warli Art shop

CODE [ footer.php ]
<html>
<body>
<script>
let currentIndex = 0;
const slides = document.querySelectorAll(".carousel img");
const dots = document.querySelectorAll(".dot");
function updateCarousel()
{
document.querySelector(".carousel").style.transform = `translateX(${-currentIndex * 100}vw)`;
dots.forEach(dot => dot.classList.remove("active"));
dots[currentIndex].classList.add("active");
}
function moveSlide(step)
{
currentIndex = (currentIndex + step + slides.length) % slides.length;
pdateCarousel();
}
function currentSlide(index)
{
currentIndex = index;
updateCarousel();
}
updateCarousel();
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-lpha1/dist/js/bootstrap.bundle.min.js">
</script>
</body>
</html>

GT&MC, Vishnupuri, Nanded. 16

WBP-22619 Warli Art shop

GT&MC, Vishnupuri, Nanded. 17

WBP-22619 Warli Art shop

WORKING OF WEB-SRAPER

A web scraper in Python typically follows a systematic process to extract data

from websites. Below is a step-by-step breakdown of how a web scraper works, along with
code examples to illustrate each step.

1. Import Required Libraries:

To start, you need to import the necessary libraries. The most commonly used libraries for
web scraping in Python are requests for making HTTP requests and BeautifulSoup for
parsing HTML.

2. Send an HTTP Request:

The first step in web scraping is to send an HTTP request to the target website to retrieve
its HTML content. This is done using the requests library.

3. Parse the HTML Content Once you have the HTML content, the next step is to parse it
using BeautifulSoup. This allows you to navigate the HTML structure and find the
elements you want to extract.

A web scraper is a tool or program designed to automatically extract data from

websites. It simulates human browsing behavior to retrieve web pages and then parses
the content to extract specific information. Web scrapers are widely used for various
applications, including data collection, market research, content aggregation, and more.

GT&MC, Vishnupuri, Nanded. 18

WBP-22619 Warli Art shop

OUTPUT

GT&MC, Vishnupuri, Nanded. 19

WBP-22619 Warli Art shop

WEB-SRAPER

This section includes screenshots of various components of the site. You can
display the full homepage view, the responsive version on mobile devices, the carousel in
different states (slide 1, 2, 3), and the header/footer as reused across pages. Label
screenshots accordingly — for example: “Homepage on Desktop,” “Navbar on Mobile,” or
“Carousel Slide 2.” These visuals will support your explanation during viva or
documentation review, showcasing your design and layout implementation.

GT&MC, Vishnupuri, Nanded. 20

WBP-22619 Warli Art shop

ADVANTAGES

 Beginner-Friendly – Easy to build and understand using basic HTML, CSS, JS, and
PHP includes.

 Promotes Cultural Heritage – Showcases traditional Warli art in a modern digital

format.

 Responsive Design – Bootstrap ensures the site works well on all screen sizes.

 Modular Code Structure – PHP includes (header.php, footer.php) help reuse code.

 Quick Loading – No backend/database makes it faster to load on browsers.

 Clean User Interface – Professional layout with carousel and navigation.

 Offline Access – Can be hosted and viewed locally or without a server.

 Great for Presentations – Visually engaging and easy to demonstrate.

 Ideal for Learning Frontend – Helps learn how to build real-world layouts.

 Customizable – Easy to update content like images, text, and links.

GT&MC, Vishnupuri, Nanded. 21

WBP-22619 Warli Art shop

DISADVANTAGES

 No Database Connectivity – Cannot store or retrieve any dynamic data.

 Non-Functional Login/Search – UI elements like login button are just design.

 Static Content Only – New artworks must be added manually in code.

 No Shopping Cart – Cannot add products to cart or make purchases.

 No Admin Dashboard – No backend to manage or upload new art.

 Lacks User Interaction – No registration, feedback, or comment system.

 Not Scalable – Adding many items manually is inefficient.

 Limited Functionality – It’s just a visual demo, not a real e-commerce platform.

 Search Bar is Inactive – Users can’t actually search for content.

 Security Features Absent – No user data handling, but also no protection measures.

GT&MC, Vishnupuri, Nanded. 22

WBP-22619 Warli Art shop

FUTURE SCOPE

Database Integration:-

 Dynamic Content Management: Integrate a database (e.g., MySQL) to store information

like artwork details (names, descriptions, prices). This will allow adding, updating, and
deleting artworks without modifying the code.
 User Accounts & Authentication: Implement user registration and login systems so users
can create accounts, track their favorite artworks, and make purchases.

E-commerce Features:-

 Shopping Cart: Develop a shopping cart where users can add and remove products,
view total prices, and proceed to checkout.
 Payment Integration: Implement payment gateways like PayPal, Stripe, or a local
payment system for transactions.

Admin Dashboard:-

 Content Management System (CMS): Create an admin panel where admins can add
new artwork, update details (price, description), and delete items.
 User Management: Allow admins to view registered users and manage orders.

Advanced Search and Filters:-

 Search Functionality: Implement an active search bar that allows users to search for
specific artworks based on name, price, or category.
 Filter Options: Provide filtering options (e.g., price range, most popular) to help users
easily navigate through the artworks.

GT&MC, Vishnupuri, Nanded. 23

WBP-22619 Warli Art shop

CONCLUSION
The Warli Art Shop project provides a solid foundation for understanding front-end
web development using core technologies. It merges cultural education with technical practice,
offering students an opportunity to build a creative yet structured website. Though it lacks
backend features, it teaches important design principles, code organization, and user interface
development. This project sets the stage for more advanced development in the future, where
database connectivity and dynamic functionality can be added for full e-commerce experience.

GT&MC, Vishnupuri, Nanded. 24

WBP-22619 Warli Art shop

REFERENCES

 https://r.search.yahoo.com/
_ylt=Awr1UcvoUPhneyYBkSjnHgx.;_ylu=Y29sbwMEcG9zAzEEdnRpZ
AMEc2VjA3Ny/RV=2/RE=1744355689/RO=10/RU=https%3a%2f
%2fwww.w3schools.com%2fhtml%2fhtml_css.asp/RK=2/
RS=6IM_.gWWYORTpaml3JLzv3OnzeQ-

 https://getbootstrap.com/

 https://r.search.yahoo.com/
_ylt=Awrx_Qx0UfhntgoCKAPnHgx.;_ylu=Y29sbwMEcG9zAzEEdnRpZ
AMEc2VjA3Nj/RV=2/RE=1744355828/RO=10/RU=https%3a%2f
%2fchat.openai.com/RK=2/RS=zxJuhJV7Dd9xJx_GuLIxgmyVRIU-

GT&MC, Vishnupuri, Nanded. 25