ONLINE STOCK PHOTO ECOMMERCE

SYNOPSIS

In the era of digitalization, e-commerce has seamlessly woven itself

into the fabric of our daily routines. Gone are the days when one had to
physically traverse to brick-and-mortar stores; instead, the advent of
technology has ushered in an era where shopping can be conveniently
conducted from the comfort of one's home. This paradigm shift has not
only revolutionized consumer behavior but has also presented an array of
opportunities for businesses to thrive in the online marketplace.

In this digital age, the significance of visual content cannot be

overstated. Visual storytelling has become intrinsic to online
communication and expression, permeating various facets of our virtual
interactions, from social media platforms to marketing endeavors.
Captivating images have emerged as potent tools for capturing attention,
conveying messages, and evoking emotions in a manner unparalleled by
mere textual content.

In this introduction to StockPhoto e-commerce, we embark on a

journey to explore the platform's myriad features, functionalities, and the
value it brings to photographers, buyers, and the broader creative
community. From its inception to its future aspirations, StockPhoto
embodies the ethos of innovation, collaboration, and creativity in the
ever-evolving digital landscape.
 1. INTRODUCTION

E-commerce shops have ingrained themselves into our daily lives. People
may now purchase online while relaxing in the comfort of their own homes
rather than going to a physical store thanks to technological advancement.In
today's digital age, visual content has become a cornerstone of online
communication and expression. From social media platforms to marketing
campaigns, captivating images play a vital role in capturing attention,
conveying messages, and evoking emotions.

Recognizing the power and significance of visual storytelling,

StockPhoto emerges as a dynamic e-commerce platform dedicated to providing
a diverse array of high-quality images to meet the demands of individuals and
businesses alike.

StockPhoto serves as a marketplace where photographers, designers, and

creatives from around the globe can showcase their talent and offer their work
for sale. Simultaneously, it provides a convenient avenue for buyers to access a
vast collection of professionally curated photos across various themes, styles,
and genres.

With a user-friendly interface and robust search capabilities, StockPhoto

empowers users to browse, discover, and license images that suit their specific
needs and preferences. Whether it's for personal projects, commercial
endeavors, or creative endeavors, StockPhoto offers a comprehensive solution
for sourcing compelling visual content.

In this introduction to StockPhoto e-commerce, we will delve into the

platform's features, functionalities, and the value it brings to photographers,
buyers, and the broader creative community. From its inception to its future
aspirations, StockPhoto embodies the spirit of innovation, collaboration, and
creativity in the digital landscape.

1
1.1 SYSTEM SPECIFICATION

1.1.1 HARDWARE REQUIREMENTS:

Processor : i3
Hard Disk : 5 GB
Memory : 1GB RAM

1.1.2 SOFTWARE REQUIREMENTS:

Frontend : Html5,CSS3,JavaScript
Backend : python
Database : XAMP Server
Operating System : Windows or any OS
Platform : Website
Code Editor : Visual studio Code

2
1.1.3 SOFTWARE DESCRIPTION

HTML5:

HTML5 serves as the foundation for modern user interface design,

revolutionizing the way content is presented and interacted with on the web.
Unlike its predecessors, HTML5 brings a host of features that enhance the user
experience across various devices. One of its key contributions is the
introduction of semantic elements, allowing developers to create structurally
meaningful and easily understandable documents. These elements, such as
<header>, <nav>, and <section>, enable the clear delineation of content,
fostering improved accessibility and search engine optimization.

The multimedia capabilities of HTML5 represent a significant leap

forward, eliminating the need for external plugins by incorporating native
support for audio and video elements. This not only streamlines the
development process but also ensures a more consistent and efficient playback
experience for users.
The Canvas element, another hallmark of HTML5, empowers developers
to create dynamic graphics and visualizations directly within the browser,
fostering interactive and engaging web applications.

HTML5's responsiveness to mobile devices is a game-changer in the era

of diverse screen sizes and resolutions. The introduction of features like the
viewport meta tag and media queries facilitates the creation of websites that
seamlessly adapt to different devices, promoting a uniform and user-friendly
experience. Moreover, HTML5 simplifies the integration of geolocation
services, allowing developers to incorporate location-based functionalities into
their applications, enhancing personalization and utility.

The robust form handling capabilities of HTML5 further contribute to a

more user-friendly interface. New input types and attributes, such as email, url,
and placeholder, enhance form validation and provide users with a more
intuitive means of input. Additionally, HTML5 introduces offline application
caching, enabling web applications to function even in low-network conditions
or entirely offline by caching essential resources.

3
 In summary, HTML5 stands as the bedrock of contemporary user
interface design, providing developers with a powerful set of tools to create
visually appealing, interactive, and accessible web experiences. Its continuous
evolution and broad adoption ensure that it remains at the forefront of web
development, shaping the digital landscape for both developers and users alike.

ADVANTAGES

RICH MULTIMEDIA SUPPORT:

● HTML5 provides native support for audio and video elements,

eliminating the need for third-party plugins like Flash. This simplifies
multimedia integration and ensures a more seamless and consistent
experience across browsers.

IMPROVED SEMANTICS:

● Semantic elements such as <header>, <nav>, <section>, and <article>

enhance the structure and readability of HTML documents. This not only
makes the code more understandable for developers but also aids search
engines in better interpreting and indexing content.

CROSS-BROWSER COMPATIBILITY:

● HTML5 is designed to be compatible with modern browsers, promoting

consistency and reducing the need for browser-specific workarounds.
This results in a more efficient development process and improved user
experience.

4
RESPONSIVE WEB DESIGN:

● HTML5 supports responsive web design through features like the

viewport meta tag and media queries. This enables developers to create
websites that adapt fluidly to various screen sizes and devices, ensuring a
consistent and optimized experience for users.

OFFLINE APPLICATION CACHE:

● The introduction of the Application Cache allows web applications to

work offline or in low-network conditions by caching essential resources.
This feature enhances performance and user accessibility, particularly in
areas with unreliable internet connectivity.

CANVAS FOR GRAPHICS:

● The <canvas> element enables the creation of dynamic graphics and

visualizations directly within the browser. This is valuable for developing
interactive games, data visualizations, and other engaging web
applications.

GEOLOCATION API:

● HTML5 includes a Geolocation API, allowing web applications to access

the user's location if permission is granted. This feature is beneficial for
location-based services and personalization.

SIMPLIFIED CODE:

● HTML5 introduces a simplified <!DOCTYPE html> declaration,

reducing the amount of boilerplate code required. This streamlines
development and makes it easier for developers to start coding without
unnecessary complexity

5
ENHANCED FORM HANDLING:

● New input types and attributes, such as email, url, and number, improve
form validation and provide a more user-friendly input experience. This
results in cleaner and more effective form implementations.

CSS3:

CSS3, the latest evolution of Cascading Style Sheets, plays a pivotal role
in enhancing the aesthetic appeal and responsiveness of web pages. Unlike its
predecessor, CSS3 brings forth a wealth of new features and capabilities that
empower designers to create visually stunning and dynamic user interfaces.
One of the prominent features of CSS3 is its ability to handle transitions and
animations seamlessly. Designers can now apply smooth transitions between
states and incorporate animations to captivate users and guide them through a
more engaging browsing experience.Moreover, CSS3 facilitates the
implementation of responsive design, allowing websites to adapt gracefully to
various screen sizes and devices. Media queries, a key component of CSS3,
enable designers to apply different styles based on the characteristics of the
user's device, ensuring a consistent and user-friendly presentation across
desktops, tablets, and mobile phones.

Border-radius and box-shadow are additional CSS3 features that

contribute to the visual appeal of elements on a page. Rounded corners and
subtle shadows can be applied effortlessly, adding a touch of modernity and
elegance to the overall design.With CSS3, designers also have the capability to
utilize flexible layout models, such as Flexbox and Grid, enabling more
sophisticated and efficient organization of page elements. This flexibility in
layout options empowers designers to create intricate and responsive designs
without relying heavily on complex HTML structures.
In summary, CSS3 represents a significant leap in the realm of web design,
providing designers with an extensive toolkit to elevate the aesthetic appeal,
responsiveness, and overall user experience of web pages. Its capabilities not
only streamline the styling process but also enable the creation of visually
compelling and adaptive interfaces that cater to the diverse needs of today's
digital landscape.

6
FEATURES

​ SELECTORS:
● CSS3 introduces new selectors, allowing more specific targeting of
HTML elements. This includes attribute selectors, nth-child
selectors, and more.

​ BOX MODEL ENHANCEMENTS:

● CSS3 provides additional properties for controlling box sizing,
such as box-sizing, which allows you to specify whether an
element's padding and border should be included in its total width
and height.
​
​ BORDER AND BACKGROUND ENHANCEMENTS:
● New properties in CSS3 enable more control over borders and
backgrounds. Features like rounded corners (border-radius),
gradients (linear-gradient, radial-gradient), and multiple
background images enhance the visual appearance of elements.

​ TRANSITIONS:
● CSS3 transitions allow smooth animations between property
changes. This is particularly useful for creating subtle and elegant
animations without relying on JavaScript.

​ TRANSFORMATIONS:
● CSS3 transformations, including rotate, scale, translate, and skew,
enable the manipulation of elements in 2D and 3D space, providing
a wide range of creative possibilities.

​ ANIMATIONS:
● CSS3 animations allow for more complex and dynamic animations
than transitions. Keyframes are used to define the animation
sequence, giving designers greater control over the animation's
timing and behavior.

7
 ​ FLEXBOX:
● The Flexbox layout model in CSS3 simplifies the design of flexible
and responsive layouts. It allows for the easy alignment and
distribution of space among elements in a container.
​
​ GRID LAYOUT:
● CSS3 Grid Layout provides a two-dimensional grid system for
designing complex layouts with rows and columns. It offers fine
control over the placement and sizing of elements.
​
​ MEDIA QUERIES:
● Media queries in CSS3 enable responsive design by allowing styles
to be applied based on the characteristics of the user's device, such
as screen width, height, and orientation.

​ CUSTOM FONTS:
● With CSS3, you can use the @font-face rule to include custom
fonts, expanding the range of typography options available on a
website.

​
​ VARIABLES:
● CSS3 introduces variables, allowing the definition of reusable
values. This enhances maintainability by centralizing commonly
used values in one place.

​ FILTER EFFECTS:
● CSS3 filter effects, such as blur, grayscale, and brightness, enable
the application of visual effects directly in the style sheet.

JAVASCRIPT: POWERING INTERACTIVITY AND DYNAMIC

FUNCTIONALITY

JavaScript, often hailed as the "language of the web," plays a central role
in powering interactivity and dynamic functionality on websites. As a versatile
scripting language, JavaScript enables developers to create responsive and
engaging user interfaces. Its ability to manipulate the Document Object Model

8
(DOM) in real-time allows for the seamless update and modification of content,
providing users with a dynamic and interactive browsing experience. Beyond
DOM manipulation, JavaScript facilitates asynchronous operations through
features like AJAX, enabling the retrieval and display of data without requiring
a page refresh. Additionally, JavaScript is crucial for form validation, user input
handling, and event-driven programming, making it an indispensable tool for
creating modern, client-side web applications. Whether animating elements,
responding to user actions, or fetching data from servers, JavaScript empowers
developers to build robust and user-friendly web applications that respond
dynamically to user interactions.

FEATURES

​ CROSS-BROWSER COMPATIBILITY:
● JavaScript is supported by all major web browsers, making it a
versatile language for building web applications that work
consistently across different platforms.

CLIENT-SIDE SCRIPTING:
● JavaScript primarily runs on the client side, allowing for dynamic
interactions within the user's browser without the need for server
requests for every action.

​ ASYNCHRONOUS OPERATIONS:
● JavaScript supports asynchronous programming through
mechanisms like Promises and async/await, enabling the execution
of non-blocking code and improving the responsiveness of web
applications.

​ DOM MANIPULATION:
● JavaScript interacts with the Document Object Model (DOM),
allowing developers to dynamically modify and update the
structure and content of web pages in response to user actions.
​
​
​
​

9
​ EVENT HANDLING:
● JavaScript facilitates the handling of user interactions, such as
clicks, mouse movements, and keyboard input, through
event-driven programming. This makes it possible to create
responsive and interactive user interfaces.

​ FUNCTIONS AND CLOSURES:

● JavaScript's functional nature allows the creation of reusable code
through functions. Closures, in particular, enable the encapsulation
of variables, enhancing the modularity and maintainability of code.

​ DYNAMIC TYPING:
● JavaScript is dynamically typed, meaning that variables can hold
values of any type, making it flexible and adaptable to different
scenarios.
​
​ JSON (JAVASCRIPT OBJECT NOTATION):
● JavaScript supports JSON, a lightweight data interchange format
widely used for sending and receiving data between a server and a
web application.
​
​ AJAX (ASYNCHRONOUS JAVASCRIPT AND XML):
● AJAX enables the asynchronous exchange of data between the
browser and the server, allowing for dynamic content updates
without requiring a full page reload.
​
​ ES6 AND BEYOND:
● ECMAScript 2015 (ES6) introduced several new features and
enhancements, including arrow functions, template literals, classes,
and destructuring assignments, improving the overall syntax and
capabilities of JavaScript.

​ MODULARITY WITH MODULES:

● Modern JavaScript supports the use of modules, allowing
developers to organize code into separate files and components,
promoting better code organization and maintainability.

10
 ​ WEB APIS INTEGRATION:
● JavaScript seamlessly integrates with various Web APIs, providing
access to browser functionalities, such as geolocation, local
storage, and canvas drawing.

​ SECURITY FEATURES:
● JavaScript incorporates security features like the Same Origin
Policy to prevent unauthorized access to resources across different
domains.

PYTHON:

Python, a high-level, interpreted programming language, has gained

widespread popularity for its readability, simplicity, and versatility. It serves as a
robust tool for developers across diverse domains, including web development,
data science, artificial intelligence, and automation. Known for its clear and
concise syntax, Python promotes efficient and readable code, making it an ideal
choice for both beginners and experienced developers. Its extensive standard
library offers a wealth of modules and packages, simplifying the
implementation of various functionalities without the need for extensive coding.
Python's object-oriented, procedural, and functional programming
paradigms provide developers with flexibility in crafting solutions to a wide
range of problems. The language's emphasis on community collaboration,
demonstrated by the Python Software Foundation, contributes to a vibrant
ecosystem of libraries, frameworks, and resources. Python's cross-platform
compatibility and seamless integration with other languages further enhance its
appeal, making it a go-to language for individuals and organizations seeking a
powerful and versatile programming solution.

FEATURES

Python, a versatile and widely-used programming language, is recognized

for its distinctive features that contribute to its popularity across various
domains. Its clear and readable syntax facilitates the development of concise
and maintainable code, making it accessible for both beginners and experienced
programmers. Python's dynamic typing allows for flexible variable usage,

11
enhancing adaptability in different contexts. The language supports multiple
programming paradigms, including object-oriented, procedural, and functional
programming, providing developers with diverse approaches to
problem-solving. Python's extensive standard library is a notable feature,
offering a wealth of pre-built modules that simplify the implementation of
common tasks, reducing the need for developers to start from scratch.

The community-driven nature of Python encourages collaboration and

results in a vast ecosystem of third-party libraries and frameworks. Additionally,
Python's cross-platform compatibility and integration capabilities with other
languages contribute to its widespread adoption in various fields, such as web
development, data science, machine learning, and automation. Overall, Python's
combination of simplicity, versatility, and community support makes it a robust
choice for a wide range of applications.

FLASK:

Flask, a micro web framework written in Python, has gained acclaim for
its simplicity, flexibility, and ease of use in web application development.
Designed to be lightweight, Flask empowers developers to build web
applications quickly and efficiently, without the constraints of a rigid structure.
Its minimalist core allows developers to choose and integrate components as
needed, making it an ideal choice for projects of varying complexity. Flask
embraces the concept of simplicity in its design philosophy, providing just what
is essential to get an application up and running. Despite its simplicity, Flask is
highly extensible, allowing developers to add features and functionalities
through a wide range of extensions. The Jinja2 templating engine, integrated
with Flask, facilitates dynamic content rendering. Flask's built-in development
server simplifies the testing and debugging process. With its active and
supportive community, Flask continues to be a popular choice for developers
seeking a straightforward yet powerful framework for building web applications
in Python.

12
FEATURES

​ LIGHTWEIGHT AND MINIMALIST:

● Flask is designed to be lightweight and follows a minimalist
philosophy. It provides just the essentials, allowing developers to
choose and integrate additional components based on their project
requirements.
​
​ FLEXIBILITY AND EXTENSIBILITY:
● Flask provides flexibility in terms of project structure and allows
developers to use their preferred libraries and tools. It is highly
extensible, enabling the integration of various extensions and
components as needed.

​ JINJA2 TEMPLATING:
● Flask comes with the Jinja2 templating engine, which facilitates the
creation of dynamic and reusable templates for rendering content in
web applications.

​ BUILT-IN DEVELOPMENT SERVER:

● Flask includes a built-in development server, simplifying the
testing and debugging process during the development phase. This
server is suitable for small to medium-sized projects.
​
​ ROUTING:
● Flask uses a simple and intuitive routing mechanism, allowing
developers to define routes easily. This enables the mapping of
URLs to specific functions or views within the application.

​ RESTFUL REQUEST HANDLING:

● Flask supports RESTful request handling, making it well-suited for
building RESTful APIs. It provides decorators for common HTTP
methods, such as @app.route for handling HTTP GET requests.

​
​
​

13
​ HTTP REQUEST AND RESPONSE HANDLING:
● Flask simplifies the handling of HTTP requests and responses,
providing convenient access to request parameters and headers, as
well as facilitating the generation of HTTP responses.

​ WERKZEUG INTEGRATION:
● Flask is built on top of the Werkzeug WSGI toolkit, which provides
a solid foundation for handling web requests. This integration
enhances Flask's capabilities in request and response handling.

​ SECURE BY DEFAULT:
● Flask includes secure-by-default features, such as protection
against common web vulnerabilities like Cross-Site Scripting
(XSS) and Cross-Site Request Forgery (CSRF), ensuring a more
secure development environment.

​ ACTIVE AND SUPPORTIVE COMMUNITY:

● Flask benefits from an active and supportive community of
developers. This community-driven approach results in a wealth of
documentation, tutorials, and third-party extensions that enhance
Flask's capabilities.

INTEGRATION WITH ORM AND DATABASES:

● Flask can be easily integrated with Object-Relational Mapping
(ORM) tools like SQLAlchemy, providing a convenient way to
interact with databases and manage data within web applications.

​ WEBSOCKET SUPPORT:
● While Flask itself is designed as a request-response framework,
WebSocket support can be added using extensions or integrated
libraries, allowing real-time communication in web applications.

14
MySQL:

MySQL, one of the most widely used open-source relational database

management systems (RDBMS), has played a pivotal role in powering dynamic
and data-driven applications on the web. Known for its robust performance,
scalability, and reliability, MySQL has become a popular choice for developers
and businesses alike. Its adherence to SQL standards ensures compatibility with
a vast array of applications and tools, while its modular architecture allows for
seamless integration with various programming languages. MySQL excels in
managing large datasets efficiently and offers features such as transaction
support, ACID compliance, and robust security measures to safeguard sensitive
information. With a vibrant and engaged community, MySQL continues to
evolve, introducing enhancements and optimizations in each version. Whether
supporting content management systems, e-commerce platforms, or data-driven
applications, MySQL remains a trusted and versatile database solution that
empowers developers to build resilient and high-performance database-driven
applications.
features

​ OPEN SOURCE:
● MySQL is open-source software, allowing users to access and
modify the source code freely. This fosters community
collaboration and ensures continuous improvement.

​
​
​ CROSS-PLATFORM COMPATIBILITY:
● MySQL is designed to work seamlessly across various operating
systems, including Windows, Linux, and macOS, providing
flexibility in deployment.

​ SCALABILITY:
● MySQL is highly scalable, accommodating the growth of data and
increasing demands by efficiently handling large datasets and high
traffic volumes.

15
​ HIGH PERFORMANCE:
● With optimizations for speed and efficiency, MySQL is recognized
for its high-performance capabilities, making it suitable for
applications with stringent performance requirements.

​ RELIABILITY AND ACID COMPLIANCE:

● MySQL adheres to ACID (Atomicity, Consistency, Isolation,
Durability) properties, ensuring transactions are processed reliably
even in the event of system failures.
​
​ DATA SECURITY:
● MySQL provides robust security features, including encryption,
access controls, and user authentication mechanisms, safeguarding
sensitive data from unauthorized access and ensuring data integrity.
​
​ INNODB STORAGE ENGINE:
● MySQL uses the InnoDB storage engine by default, which
supports features like transactions, foreign keys, and row-level
locking, enhancing data consistency and reliability.

​ REPLICATION AND HIGH AVAILABILITY:

● MySQL supports replication, allowing the creation of multiple
copies of a database for improved fault tolerance and high
availability in distributed environments.

​
​
​ BACKUP AND RESTORE:
● MySQL provides tools and mechanisms for easy backup and
restoration of databases, ensuring data recovery and system
continuity in the event of data loss or system failures.

​ FULL-TEXT SEARCH:
● MySQL supports full-text indexing and searching, enabling
efficient searching of text data within database fields.

16
​ STORED PROCEDURES AND TRIGGERS:
● MySQL allows the creation of stored procedures and triggers,
facilitating the execution of predefined operations on the database
server, enhancing code reusability and maintainability.

​ COMMUNITY SUPPORT AND DOCUMENTATION:

● With an active and vibrant community, MySQL benefits from
extensive documentation, forums, and user groups, providing a
wealth of resources for developers and administrators.
​
​ COMPATIBILITY AND STANDARDS:
● MySQL adheres to SQL standards, ensuring compatibility with
various database tools and applications. It also supports multiple
programming languages through connectors and APIs.

​ PARTITIONING:
● MySQL supports table partitioning, allowing large tables to be
divided into smaller, more manageable pieces, improving query
performance and maintenance.

17
 2. SYSTEM STUDY

The system study phase involves a comprehensive analysis of the existing

system, including its drawbacks, and proposes an improved system with
enhanced features. This phase sets the groundwork for understanding the
project's requirements, identifying areas of improvement, and defining the scope
of the new system.

2.1 EXISTING SYSTEM

OVERVIEW:

The current system represents the initial version of StockPhoto, an online

photo marketplace. It allows users to upload, sell, and purchase high-quality
photos. While functional, the existing system may have certain drawbacks and
limitations.

2.1.1 DRAWBACKS:

​ Limited User Interface: The user interface might lack modern design
elements and responsiveness.
​
​ Basic Features: The existing system may lack advanced features crucial
for a seamless user experience.
​
​ Scalability Concerns: The architecture might not be optimized for
handling a growing user base and increasing photo uploads.
​
​ Security Measures: Security features such as encryption and secure
authentication methods might need enhancement.
​
​ Performance Optimization: The system may not be fully optimized for
efficient data retrieval and processing.

18
2.2 PROPOSED SYSTEM

OVERVIEW:

The proposed system aims to address the drawbacks of the existing system and
introduce new features to enhance user satisfaction and system performance.

2.2.1 FEATURES:

​ Modern User Interface: Implement a visually appealing and responsive

user interface using Bootstrap.
​
​ Advanced Features: Introduce advanced functionalities such as real-time
notifications, search filters, and personalized user profiles.
​
​ Scalable Architecture: Design a scalable architecture to handle a large
number of users and photos effectively.
​
​ Enhanced Security: Implement robust security measures, including data
encryption, secure authentication, and authorization mechanisms.
​
​ Performance Optimization: Optimize database queries and introduce
caching mechanisms for improved system performance.

19
 3. SYSTEM DESIGN AND DEVELOPMENT

The system design and development phase involves creating a blueprint

for the proposed system and implementing it. This phase focuses on designing
the database, user interface, and overall system architecture. It also encompasses
the actual development of the system, including coding, testing, and iteration.

3.1 FILE DESIGN

In the context of StockPhoto, file design involves structuring and

organizing the project files, including HTML templates, CSS stylesheets, and
JavaScript files. The project follows a modular approach, separating concerns to
enhance maintainability and readability.

3.2 INPUT DESIGN

Input design involves creating forms and interfaces that enable users to
interact with the system. In StockPhoto, various input forms are designed for
tasks such as user registration, photo upload, and profile editing. Input
validation is implemented to ensure data accuracy and integrity.

3.3 OUTPUT DESIGN

Output design focuses on presenting information to users in a clear and

effective manner. In StockPhoto, output design includes the display of photos,
user profiles, and billing information. Responsive and visually appealing layouts
are implemented to enhance the user experience.

3.4 DATABASE DESIGN

Database design is a critical aspect of StockPhoto, involving the

structuring of the database to efficiently store and retrieve data. The system uses
a relational database, with tables for users, products, and other relevant entities.
Foreign key relationships are established to maintain data integrity.

20
DATABASE TABLES:

USERS TABLE:

● User ID (Primary Key)

● Name
● Phone
● Password (Hashed)
● Image Name (Profile Picture)

PRODUCTS TABLE:

● Product ID (Primary Key)

● Name
● Price
● Description
● Saler ID (Foreign Key referencing Users Table)
● Image Name

3.5 SYSTEM DEVELOPMENT

3.5.1 DESCRIPTION OF MODULES

1. USER AUTHENTICATION MODULE

Description: Manages user registration, login, and authentication.

Key Features:
User signup and login functionalities.
Ensures secure access to the website.

2. PRODUCT CATALOG MODULE

Description: Displays a catalog of photos available for purchase.

Key Features:
Allows users to browse and filter photos by categories, colors, or types.
Provides a user-friendly interface for easy navigation.

21
3. SEARCH AND FILTERING MODULE

Description: Enables users to search for photos based on specific criteria.

Key Features:
Implements search functionality for efficient photo discovery.
Filters photos into categories, colors, or types for a personalized browsing
experience.

4. SHOPPING CART MODULE

Description: Facilitates the selection and purchase of photos by users.

Key Features:
Users can add selected photos to their shopping cart.
Manages the payment process for successful purchases.

5. PAYMENT GATEWAY INTEGRATION MODULE

Description: Handles secure online payments for photo purchases.

Key Features:
Integrates a secure payment gateway for financial transactions.
Ensures a smooth and secure payment process for users.

6. ORDER MANAGEMENT MODULE

Description: Manages user orders and transaction history.

Key Features:
Tracks user purchase history.
Provides order confirmation and status updates.

7. USER PROFILE MODULE

Description: Allows users to manage their profiles and preferences.

Key Features:
Users can update personal information.
Customizes the user experience based on preferences.

22
8. ADMIN PANEL MODULE

Description: Provides administrators with tools to manage the website.

Key Features:
Manages product listings, user accounts, and orders.
Monitors website analytics and performance.

9. DATABASE MANAGEMENT MODULE

Description: Manages the storage and retrieval of data in the MySQL database.
Key Features:
Stores information related to products, users, and transactions.
Ensures data integrity and reliability.

23
 4. TESTING AND IMPLEMENTATION

The testing and implementation phase of the StockPhoto project is crucial

to ensure the reliability, functionality, and security of the application.

4.1 TESTING

4.1.1 UNIT TESTING

USER AUTHENTICATION MODULE:

● Verify successful user registration.
● Confirm secure login functionality.
● Validate password hashing for security.

PHOTO UPLOAD MODULE:

● Test photo upload functionality with valid data.
● Verify proper validation and handling of invalid uploads.

PROFILE MANAGEMENT MODULE:

● Ensure accurate display of user details.
● Test user profile editing and image updating.

PRODUCT MANAGEMENT MODULE:

● Validate the successful upload of photos.
● Confirm proper display and deletion of uploaded photos.

4.1.2 INTEGRATION TESTING

USER AUTHENTICATION AND PROFILE MANAGEMENT:

● Verify the seamless integration of user authentication with the user
profile module.
● Test that only authenticated users can access profile-related
functionalities.

24
 PHOTO UPLOAD AND PRODUCT MANAGEMENT:

● Ensure that photos uploaded by users are seamlessly integrated into

the product management module.
● Validate the association of photos with the corresponding user
profiles.

4.2 IMPLEMENTATION

4.2.1 DEPLOYMENT

● Deploy the StockPhoto application to a secure web server.

● Ensure that the server environment meets the necessary requirements for
Flask and associated libraries.

4.2.2 USER TRAINING

● Develop user documentation to guide users through the registration,

photo uploading, and purchasing processes.
● Provide a user-friendly interface to facilitate a positive user experience.

4.2.3 SECURITY MEASURES

● Implement secure coding practices to prevent common web

vulnerabilities.
● Regularly update dependencies to patch potential security vulnerabilities.

4.2.4 PERFORMANCE OPTIMIZATION

● Optimize database queries for efficient data retrieval.

● Implement caching mechanisms to enhance application performance.

25
 5. CONCLUSION

The testing and implementation phase marks a crucial stage in the

development of the StockPhoto application. It ensures that the application
functions as intended, providing users with a secure and seamless experience.
Throughout this phase, various testing methods are employed to identify and
rectify any issues or bugs present in the system.By rigorously testing the
application, we can ensure that it meets the specified requirements and delivers
the desired functionality to users. This includes testing for functionality,
performance, security, and usability aspects of the application.

Furthermore, the implementation phase involves deploying the

application to production servers and making it available to users. This involves
setting up the necessary infrastructure, configuring servers, and deploying the
application code.Ongoing monitoring and maintenance are essential
post-implementation to ensure the continued smooth operation of the
StockPhoto platform. Regular updates and patches are applied to address any
emerging issues and improve the overall performance and security of the
application.

Additionally, user feedback plays a crucial role in the continuous

improvement of the platform. By listening to user feedback and incorporating
user suggestions, we can enhance the user experience and address any pain
points or areas for improvement.In conclusion, the testing and implementation
phase are vital steps in the development lifecycle of the StockPhoto application.
Through thorough testing, deployment, and ongoing maintenance, we aim to
deliver a high-quality, reliable, and user-friendly platform for photographers and
photo enthusiasts alike.

26
 BIBLIOGRAPHY
​
● Flask Documentation. (n.d.). Retrieved from
https://flask.palletsprojects.com/
● Flask-SQLAlchemy Documentation. (n.d.). Retrieved from
https://flask-sqlalchemy.palletsprojects.com/
● Bootstrap Documentation. (n.d.). Retrieved from
https://getbootstrap.com/docs/4.3/getting-started/introduction/
● Python Werkzeug Documentation. (n.d.). Retrieved from
https://werkzeug.palletsprojects.com/
● SQLite Documentation. (n.d.). Retrieved from
https://www.sqlite.org/docs.html
● W3Schools - HTML Tutorial. (n.d.). Retrieved from
https://www.w3schools.com/html/
● W3Schools - CSS Tutorial. (n.d.). Retrieved from
https://www.w3schools.com/css/
● JavaScript MDN Web Docs. (n.d.). Retrieved from
https://developer.mozilla.org/en-US/docs/Web/JavaScript
● PostgreSQL Documentation. (n.d.). Retrieved from
https://www.postgresql.org/docs/
● SQLAlchemy Documentation. (n.d.). Retrieved from
https://docs.sqlalchemy.org/en/20/

27
 APPENDICES

A. DATA FLOW DIAGRAM

Level 0 DFD

28
Level 1 DFD - Upload Photo Process

29
B. TABLE STRUCTURE

Products Table

Column name Data type NULL Constraints

id int(11) No Primary key
name varchar(255) No No
price float No No
description text No No
salerId int(11) No Foreign key
imageName varchar(255) No No

Users Table

Column name Data type NULL Constraints

id int(11) No Primary key
name varchar(255) No No
phone varchar(15) No No
password varchar(255) No No
imageName varchar(255) Yes No

30
C. SAMPLE CODING

from flask import Flask, render_template, request, redirect, url_for, session

from flask_sqlalchemy import SQLAlchemy
from werkzeug.security import generate_password_hash, check_password_hash
from flask import flash
from werkzeug.utils import secure_filename
import os
from flask import Flask
from flask import request
from werkzeug.utils import secure_filename
from flask import send_from_directory

# Define the allowed_file function

ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif'}

def allowed_file(filename):
return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS

# ... (remaining code)

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql://root:@localhost/stockphoto'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
app.config['SECRET_KEY'] = 'sklee'
app.config['UPLOAD_FOLDER'] = 'static/imageNames'

db = SQLAlchemy(app)

ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif'}

class Users(db.Model):
id = db.Column(db.Integer, primary_key=True, autoincrement=True)
name = db.Column(db.String(255), nullable=False)
phone = db.Column(db.String(15), nullable=False)
password = db.Column(db.String(255), nullable=False)
imageName = db.Column(db.String(255), nullable=False)
products = db.relationship('Products', backref='saler', lazy=True)

class Products(db.Model):
id = db.Column(db.Integer, primary_key=True, autoincrement=True)
name = db.Column(db.String(255), nullable=False)
price = db.Column(db.Float, nullable=False)
description = db.Column(db.Text, nullable=False)
salerId = db.Column(db.Integer, db.ForeignKey('users.id'), nullable=False)

31
 imageName = db.Column(db.String(255), nullable=False)

def allowed_file(filename):
return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS

# @app.before_first_request
# def create_tables():
# db.create_all()

@app.route('/', methods=['GET', 'POST'])

def login():
if request.method == 'POST':
name = request.form['name']
password = request.form['password']

user = Users.query.filter_by(name=name).first()

if user and check_password_hash(user.password, password):

session['user_id'] = user.id
return redirect(url_for('index'))

return render_template('login.html')

@app.route('/signup', methods=['GET', 'POST'])

def signup():
if request.method == 'POST':
name = request.form['name']
phone = request.form['phone']
password = request.form['password']

hashed_password = generate_password_hash(password)

# Check if a file is selected

if 'imageName' not in request.files:
flash('No profile image selected', 'error')
return redirect(request.url)

profile_image = request.files['imageName']

# Check if the file has a valid name and extension

if profile_image.filename == '' or not allowed_file(profile_image.filename):
flash('Invalid profile image', 'error')
return redirect(request.url)

# Process logic for uploading the profile image

filename = secure_filename(profile_image.filename)
profile_image.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))

32
 new_user = Users(name=name, phone=phone, password=hashed_password,
imageName=filename)

db.session.add(new_user)
db.session.commit()

return redirect(url_for('login'))

return render_template('signup.html')

@app.route('/index')
def index():
if 'user_id' not in session:
return redirect(url_for('login'))

# Fetch and display photos available for purchase

products = Products.query.all()

return render_template('index.html', products=products)

@app.route('/photobilling/<int:photo_id>', methods=['GET', 'POST'])

def photobilling(photo_id):
if 'user_id' not in session:
return redirect(url_for('login'))

# Fetch the selected photo using photo_id

selected_photo = Products.query.get(photo_id)

if not selected_photo:
return redirect(url_for('index'))

if request.method == 'POST':
# Process billing logic here (e.g., update database, handle payment, etc.)
# You may want to add a new table for billing transactions

# After processing, render the photobilling template with the selected photo
return render_template('photobilling.html', photo=selected_photo)

# If it's a GET request, render the photobilling template with the selected photo
return render_template('photobilling.html', photo=selected_photo)

@app.route('/salephoto', methods=['GET', 'POST'])

def salephoto():
if 'user_id' not in session:
return redirect(url_for('login'))

if request.method == 'POST':

33
 # Retrieve form data
name = request.form['name']
price = request.form['price']
description = request.form['description']

# Check if a file is selected

if 'photo' not in request.files:
flash('No file selected', 'error')
return redirect(request.url)

photo = request.files['photo']

# Check if the file has a valid name and extension

if photo.filename == '' or not allowed_file(photo.filename):
flash('Invalid file', 'error')
return redirect(request.url)

# Process logic for uploading and selling a new photo

user_id = session['user_id']
new_product = Products(name=name, price=price, description=description,
salerId=user_id ,imageName = photo.filename)
db.session.add(new_product)
db.session.commit()

photo.save(os.path.join(app.config['UPLOAD_FOLDER'],
secure_filename(photo.filename)))

flash('Photo uploaded successfully', 'success')

return redirect(url_for('index'))

return render_template('salephoto.html')

# Add other routes and functions here...

@app.route('/profile')
def profile():
if 'user_id' not in session:
return redirect(url_for('login'))

user = Users.query.get(session['user_id'])

return render_template('profile.html', user=user)

@app.route('/edit_profile', methods=['POST'])
def edit_profile():
if 'user_id' not in session:
return redirect(url_for('login'))

34
 user = Users.query.get(session['user_id'])

if not user:
return redirect(url_for('login'))

if request.method == 'POST':
new_name = request.form['new_name']
new_phone = request.form['new_phone']

# Handle file upload

new_image = request.files['new_image']

if new_image and allowed_file(new_image.filename):

# Save the new image to the folder
filename = secure_filename(new_image.filename)
new_image.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))

# Update the user's profile with the new information

user.name = new_name
user.phone = new_phone
user.imageName = filename

# Check if a new password is provided

new_password = request.form.get('new_password')
if new_password:
hashed_password = generate_password_hash(new_password)
user.password = hashed_password

db.session.commit()

flash('Profile updated successfully', 'success')

else:
flash('Invalid file', 'error')

return redirect(url_for('profile'))

# ... (previous code)

@app.route('/delete_photo/<int:photo_id>', methods=['POST'])
def delete_photo(photo_id):
if 'user_id' not in session:
return redirect(url_for('login'))

photo_to_delete = Products.query.get(photo_id)

if photo_to_delete and photo_to_delete.salerId == session['user_id']:

# Delete the photo from the database

35
 db.session.delete(photo_to_delete)
db.session.commit()

# Delete the photo file from the folder

image_path = os.path.join(app.config['UPLOAD_FOLDER'],
photo_to_delete.imageName)
if os.path.exists(image_path):
os.remove(image_path)

flash('Photo deleted successfully', 'success')

else:
flash('Photo not found or you do not have permission to delete', 'error')

return redirect(url_for('profile'))

# ... (remaining code)

@app.route('/download_photo/<int:photo_id>', methods=['GET'])
def download_photo(photo_id):
# Fetch the photo based on the photo_id (adjust this based on your data model)
selected_photo = Products.query.get(photo_id)

if selected_photo:
# Provide the correct path to the image file in your UPLOAD_FOLDER
image_path = os.path.join(app.config['UPLOAD_FOLDER'],
selected_photo.imageName)
return send_from_directory(app.config['UPLOAD_FOLDER'],
selected_photo.imageName, as_attachment=True)
else:
flash('Photo not found', 'error')
return redirect(url_for('index'))

@app.route('/logout')
def logout():
# Clear the user_id from the session
session.pop('user_id', None)
# Redirect to the login page (adjust the route as needed)
return redirect(url_for('login'))

if __name__ == '__main__':
app.run(debug=True)

36
D. SAMPLE SCREEN

Photo buying page

User profile page

37
Profile Updating page

Photo billing page

38
Photo selling page

User sign-up page

39