Project Report

on
ONLINE GROCERY STORE WEBSITE

BM INSTITUTE OF ENGINEERING & TECHNOLOGY

In partial fulfilment of the requirements for the award of the

degree of
Bachelor of
Technology in
Computer Science and
Engineering by

PRASHANT (CSE/18/213) & PRINCE (CSE/18/215)

Under the guidance of

Ms. BHAWNA KUKREJA

DEPARTMENT OF COMPUTER SCIENCE AND

ENGINEERING
 CERTIFICATE

This is to certify that Mr. Prashant and Mr. Prince, student of B. Tech in Computer Science and
Engineering have carried out work presented in the project of the Term paper entitle “Online
Grocery Store Website” as a part of 4-year program of Bachelor of Technology in Computer
Science and Engineering from BM Institute Of Engineering & Technology, Sonepat.
 ACKNOWLEDGEMENT

The satisfaction that accompanies that the successful completion of any task would be
incomplete without the mention of people whose ceaseless cooperation made it possible, whose
constant guidance and encouragement crown all efforts with success. We would like to thank Dr.
Abhinav Juneja, Head of Department-CSE, for giving us the opportunity to undertake this
project. We would like to thank our friends who are the biggest driving force behind our
successful completion of the project. They have been always there to solve any query and also
guided us in the right direction regarding the project. Without their help and inspiration, We
would not have been able to complete the project. Also We would also like to thank our parents
who guided us, helped us and gave ideas and motivation at each step.

Prashant , Prince
BM Institute Of Engineering & Technology
 TABLE OF CONTENTS

Abstract..................................................................................................................[i]
List of Figures......................................................................................................[ii]
1. Introduction
1.1 Objective
1.2 Overview
1.3 Scope
2. Study of the Store System
2.1 Django-Backend
2.2 HTML
2.3 CSS
3. Webpages and URLs
3.1 Login and register page
3.2 Homepage with the products list
3.3 Shopping cart
3.4 Checkout page
3.5 User details
3.6 About Us
3.7 Admin Panel
3.8 Database
4. Advantages and Issues related to E-commerce

Scope for future Research and modifications............................................................[iii]

References..................................................................................................................[iv]
 ABSTRACT

Online Shopping or E-Commerce has become an integral part of an individual in this

modern, fast-paced consumer world. It is a process where people belonging to any distant
corner of the world with access to the World Wide Web can go shopping. Products from
all the sectors and walks of life have been introduced to E-commerce world where they
are sold and bought in huge numbers.

This ‘online Grocery Store’ is a web-based application system that is a front for a virtual
grocery store selling grocery items. Just like all other technologies, this project is an
attempt to understand and provide online grocery services to customers. Little do they
need is just an internet connection.

The current wave of COVID-19 pandemic has already damaged the growth engines of
the world such as China, U.S.A, Italy and India badly. So, at times such unpredictable
where people have been forced inside their homes to save their lives, Sellers can make
use of this system to provide service to the customers. All they need is to upload the
products and get started. Having multiple advantages for both the worlds of consumers
and sellers, this eay-to-use E-commerce system is an evolution to the shopping world
with vast and easy accessibility.
 LIST OF FIGURES

FIG 2.1 Complete Project Directory

FIG 2.2 Form.py python file
FIG 2.3 Models.py python file
FIG 2.4 Urls.py python file
FIG 2.5 Templates directory with all html documents
FIG 3.1 Login page
FIG 3.2 Register page
FIG 3.3 Homepage with products
FIG 3.4 Shopping cart
FIG 3.5 Checkout page
FIG 3.6 User details
FIG 3.7 About us
 CHAPTER-1
INTRODUCTION

This venture is an electronic shopping framework for a current grocery shop.

The venture objective is to convey the web based shopping application into
an internet-based platform.
Online shopping is the procedure whereby purchasers legitimately purchase
grocery items from a seller progressively, without a delegate administration,
over the Internet. It is a type of electronic business. This undertaking is an attempt
to give the benefits of web based shopping to clients of a genuine grocery
store. It helps purchasing the items in the shop anyplace through web
browsing on the Internet Explorer. In this way the client will get the
administration of online grocery shopping and home conveyance from his
preferred shop
.

1.1 OBJECTIVE

The target of the venture is to make an application in web-based

platform to buy grocery items in a current store. So as to assemble
such an application, complete web support should be given. A total and
efficient web application which can give the online shopping experience
related to grocery services is the fundamental target of the undertaking.
The web application can be executed with a web perspective.

1.2 OVERVIEW

The focal idea of the application is to permit the client to shop for all
grocery purposes utilizing the Internet and permit clients to purchase the
 things and articles of their craving from the store. The data relating to
the items are stores on a RDBMS at the server side (store).

The Server procedure the clients and the things are transported to the
location put together by them. The application was planned into two
modules initially is for the clients who wish to purchase the articles.
Second is for the vendors who keeps up and refreshes the data relating
to the articles and those of the clients. The end client of this item is
a departmental store where the application is facilitated on the web and
the admin keeps up the database.
The application which is sent at the client database, the subtleties of
the things are presented from the database for the client see dependent
on the determination through the menu and the database of the
considerable number of items are refreshed toward the finish of every exchange.
Information passage into the application should be possible through different
screens intended for different degrees of clients.

1.3 SCOPE

This system can be implemented to any grocery shop in the locality or

to multinational branded shops having retail outlet chains. The system
recommends a facility to accept the orders 24*7 and a home delivery
system which can make customers happy.
If shops are providing an online portal where their customers can enjoy
easy grocery shopping from anywhere, the shops won’t be losing any
more customers to the trending online shops such as big-basket or
amazon fresh. Since the application is available on the internet, it is
easily accessible and always available.
 CHAPTER-2
STUDY OF THE STORE SYSTEM

2.1 DJANGO
Django is an elevated level Python Web structure that supports quick turn of
events and spotless, down to earth plan. Worked by experienced designers, it
deals with a great part of the problem of Web improvement, so you can
concentrate on composing your application without expecting to waste time. It's
free and open source.

Why Django?

 LUDICROUSLY QUICK.
Django was intended to assist designers with taking applications from idea
to fulfillment as fast as could reasonably be expected.

 COMPLETELY STACKED
Django incorporates many additional items you can use to deal with basic
Web improvement errands. Django deals with client confirmation, content
organization, site maps, RSS channels, and a lot more undertakings directly
out of the container.

 REASSURINGLY SECURE
Django pays attention to security and assists designers with maintaining a
strategic distance from numerous basic security botches, for example, SQL
infusion, cross-site scripting, cross-site demand fraud and clickjacking. Its
client confirmation framework gives a safe method to oversee client records
and passwords.

 EXCEEDINGLY VERSATILE
 Probably the busiest sites on earth utilize Django's capacity to rapidly and
deftly scale to fulfill the heaviest traffic needs.

Studying the System:

In the proposed framework client need not go to the shop for purchasing the items.
He can arrange the item he wish to purchase through the application on the
world wide web.

The retailer will be administrator of the framework. The framework likewise

suggests a home delivery system for the bought items.

Pycharm version 11.0.6 has been used as the software for creating virtual
environment for the project. Under the terminal window, ‘pip install Django’
command was used to install Django into the system.

Using the ‘Django-admin startproject store’ and ‘python manage.py startapp

products’ commands , a new project named Store and inside the Store project,
new app named Products is created.

The ‘python manage.py runserver’ command is used to run the project on the
local server.
 Figure 2.1
Under the main directory ‘CO-19 Store’, there are 5 listed python files with .py extension:
1.init.py: The init .py document makes Python treat indexes containing it as modules.
Moreover, this is the main record to be stacked in a module, so you can utilize
it to execute code that you need to run each time a module is stacked, or
determine the submodules to be sent out.

2. asgi.py: It's generally given as an item named application in a Python

module open to the server. The startproject order makes a record
<project_name>/asgi.py that contains such an application callable.
3.settings.py: settings.py is a center document in Django ventures. It holds all
the configuration esteems that your web application needs to work; database settings,
logging configuration, where to discover static records, API keys in the event that
you work with outside APIs, and a lot of other stuff.

4 urls.py: In url.py, the most important thing is the "urlpatterns" tuple. It's the
place you characterize the mapping among URLs and perspectives. A mapping is
a tuple in URL patterns like − from django. conf. urls import patterns, include,
url from django.

5.wsgi.py: It's ordinarily given as an article named application in a Python

module open to the server. The startproject order makes a record
<project_name>/wsgi.py that contains such an application callable.

Under the products app directory, there are 3 sub-directories with the same
python files as above coupled up with some more .py files.
The three sub-directories are:
1.Migrations which contains the information regarding data migration to the
respective tables.
2.static which contains CSS files aimed at making the webpages more
presentable and sleek. It also contains the images of the vegetables including the
background image for the login page.

3. templates which contains all html files.

All these will be discussed later in the succeeding chapter.

The additional python files in the products directory are:

1.admin.py: this python file under the app directory is used to register the
models defined inside the models.py file. This file also controls the access,
username and passwords to the admin section of the website pre-defined in the
Django framework.

2. apps.py:this file merely contains the configuration command for the products app.

3.form.py: this python file plays an important role in this project. As the name suggests,
it contains the implementation code regarding the registration form and the login
form.

Figure 2.2
The fields inside the register form are

fields = ['name','address','mobile_no','username','password','confirm_password']

Another client should enlist in the framework by giving details so as to see the
items in the framework. The administrator must acknowledge another client by
viewing him.
The login form as usual contains the username and password field with a link to
register yourself if the user is new to the shopping system. A user must login
with his user name and password to the system after registration.

4. models.py: This .py extension file contains the basic models for the grocery
store system. The models are bigb, user and item.

Figure 2.3
The bigb model contains the overall design of the system.
The user model contains the attributes and information regarding the user
currently logged in the store as a customer. This model is supplied this
information by the meta class defined under register form.
The item model defines the features and attributes of the products itself. The
attributes include price, quantity, image and title.

[10]
All the models are defined as model classes and the attributes of the respective
models are defined as the members of the classes along with the suitable datatype.
The ‘Django.db’ package already contains the pre-defined model class.

5.urls.py: this python file is not so different from the previous urls.py file. This
file contains all urls and webpages described under the chapter ‘Webpages and
URLs’ which are home page, cart , about us , user details etc.

Figure 2.4
These have been depicted and discussed in the succeeding study.

6. views.py: this python file contains all the Django views concerning the Grocery
Store project. Django sees are a key part of uses worked with the structure. At
their most straightforward they are a Python capacity or class that takes a web
solicitation and return a web reaction. Perspectives are utilized to do things like
bring objects from the database, alter those articles if necessary, render structures,
return HTML, and substantially more.
Our views.py file here contains the addtocart , home, login , register ,cart , aboutus,
personaldetails and more other views.

The venv library root directory contains all the classes and packages installed
under Django.
There is a database file named as ‘db.sqlite3’ which can easily be viewed using
sql lite freely available on the internet. This database file is integrated in the
django project itself and contains all the required meta-data and tables.

The manage.py is located also in the main project directory.

2.2 HTML

HTML (HyperText Markup Language) is the most essential structure square of

the Web. It characterizes the importance and structure of web content. Different
technologies other than HTML are commonly used to portray a website page's
appearance/presentation (CSS) or functionality/conduct (JavaScript).

A HTML component is set off from other content in a record by "labels", which
comprise of the component name encompassed by "<" and ">". The name of a
component inside a tag is case obtuse. That is, it very well may be written in uppercase,
lowercase, or a blend. For example, the <title> tag can be composed as <Title>,
<TITLE>, or in some other way.

HTML utilizes "markup" to explain content, pictures, and other substance for
display in a Web program. HTML markup incorporates special "components, for
example, <head>, <title>, <body>, <header>, <footer>, <article>, <section>, <p>,
<div>, <span>, <img>, <aside>, <audio>, <canvas>, <datalist>, <details>,
<embed>, <nav>, <output>, <progress>, <video>, <ul>, <ol>, <li> and numerous others.

Various tags under HTML are discussed briefly below:

 <!DOCTYPE html> — the doctype. It is required preamble. In the fogs
of time, when HTML was youthful (around 1991/92), doctypes were
intended to go about as links to a lot of rules that the HTML page
needed to follow to be viewed as acceptable HTML, which could mean
programmed blunder checking and other useful things. Anyway nowadays,
they don't do a lot, and are fundamentally simply expected to ensure your
record carries on accurately. That is all you have to know for the
present.

 <html></html> — the <html> component. This component wraps all the

substance on the whole page and is once in a while known as the root
component.

 <head></head> — the <head> component. This component goes about as

a holder for all the stuff you need to remember for the HTML page that
isn't the substance you are appearing to your page's watchers. This
incorporates things like watchwords and a page description that you need
to appear in indexed lists, CSS to style our substance, character set
assertions and that's only the tip of the iceberg.

 <meta charset="utf-8"> — This component sets the character set your

report should use to UTF-8 which incorporates most characters from by
far most of composed dialects. Basically, it would now be able to deal
with any literary substance you may put on it. There is no explanation
not to set this and it can help maintain a strategic distance from certain
problems later on.

 <title></title> — the <title> component. This sets the title of your page,
which is the title that appears in the program tab the page is stacked in.
 It is likewise used to portray the page when you bookmark/most loved it.

 <body></body> — the <body> component. This contains all the substance

that you need to show to web clients when they visit your page,
regardless of whether that is content, pictures, videos, games, playable
audio tracks or whatever else.

The ‘template’ directory in the project contains all the HTML files as follows:

2.3 CSS Figure 2.5

CSS is a language that depicts the style of a HTML doc. CSS depicts how
HTML components ought to be shown.

A CSS rule-set comprises of a selector and an affirmation square:

The selector focuses to the HTML component you need to style.
The presentation square contains at least one affirmations isolated by semicolons.
Every presentation incorporates a CSS property name and a worth, isolated by a colon.

Numerous CSS revelations are isolated with semicolons, and statement squares are
encircled by wavy supports.

CSS is intended to empower the partition of introduction and substance, including design,
hues, and fonts. This division can improve content availability, give greater
adaptability and control in the determination of introduction qualities, empower
various pages to share organizing by indicating the important CSS in a different .css
document, and decrease multifaceted nature and reiteration in the auxiliary substance.

Partition of designing and substance additionally makes it attainable to introduce a

similar markup page in various styles for various rendering techniques, for example, on-
screen, in print, by voice (through discourse based program or screen peruser), and on
Braille-based material gadgets. CSS likewise has rules for interchange organizing if the
substance is gotten to on a cell phone.

Some prominent restrictions of the present capacities of CSS include:

 Can't name rules
 Can't target explicit content without modifying markup
 Cant include styles from a standard into another standard

Advantages include:
 Partition of substance from introduction
 Site-wide consistency
 Data transfer capacity
 Page reformatting
  Openness

A CSS file is linked to an HTMl document by inserting the below statement

inside the <head> tag of the html document to be made presentable:

“<link rel="stylesheet" href="styles.css">”

Bootstrap is a library of CSS attributes with pre-defined templates. All the

components in the front-end development of a web application have been already
defined. The user only needs to copy and paste the contents inside the CSS
document or the body TAG.

In addition to this , a link-rel statement similar to that of CSS needs to added

to the head TAG of the html document.
“<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-
9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous">
”
IMPORTANT: all the migrations from the modifications made in the tables in
the ‘db.sqlite3’ file in the main grocery store directory are made by running
the following commands:
 Python manage.py make migrations [ This command recognizes the
changes made to the database and gets them ready to be updated to the
sqlite file.]
 Python manage.py migrate [ This command makes the migrations
recognized by the above command and updates the changes in the sqlite
file. ]
 CHAPTER-3
WEBPAGES AND URLS

3.1 LOGIN AND REGISTER PAGE

Figure 3.1

This is the login page of the Grocery store website. Here the user which is already
registered with the seller can enter his/her username and password and login to purchase
grocery items.

Log in Button takes the user to the products list homepage. Also if, the user or the
customer is new to the store, he/she can register him/her with the seller for the future. For
this purpose, a Register button has been provided which takes the user to the REGISTER
form.

The local URL is mentioned above in the browser link section.

 Figure 3.2
This is the sign up page or the register page of the grocery store project. Here the new
user or the customer can register him/her with the seller to continue to buy grocery
products from the store.

The user needs to enter his name, address, mobile no., username and password. After the
user is done with entering the details, he/she needs to click on the sign up button which
will take the user or the customer back to the login page where he/she can enter the
username and password and log on to the online grocery store.
3.2 HOMEPAGE WITH THE PRODUCTS LIST

Figure 3.3
The above picture depicts the homepage of the grocery store website with all products
listed.

The user who wishes to buy the respective items can click on the ‘add’ button with the
preferred quantity. Upon ‘add’ button click, the preferred items with the desired quantity
is added to the user’s or the customer’s cart.

In addition to the product list, the homepage contains the access to all the other sections
of the website such as aboutus, personal details, cart etc.

Also a ‘logout’ button is provided if the user or the customer wishes to logout of the
online grocery store portal.
3.3 SHOPPING CART

Figure 3.4
The shopping cart is displayed above. The shopping cart contains the grocery products
added by the user or the customer who visited the grocery store and wished to buy them.

The individual prices along with the total amount are properly displayed on the shopping
cart displayed.

The ‘checkout’ button at the bottom left corner of the webpage takes the user or the
customer to the checkout page where the customer enters all the billing address details
along with the payment details for the grocery products order.

[20]
3.4 CHECKOUT PAGE

Figure 3.5

This is the checkout page of the online grocery store portal. Here all the details regarding
the order to be placed by the user or the customer is provided by him/her to the seller.

Along with all the billing and shipping address details, the payment details with the card
details of the customer is securely supplied to the seller for successful payment.

Upon entering all the correct shipping address and payment details , the user or the
customer needs to click the ‘Place Order’ button. Upon clicking the following button, a
message as “YOUR ORDER IS SUCCESSFULLY PLACED!” is displayed.
3.5 USER DETAILS

Figure 3.6
Here all the details of the user are visible to the user. The customer can also edit the
information or the details and then save the details successfully.
3.6 ABOUT US

Figure 3.7

Here the brief introduction of the Grocery store are presented along the details of the
developer.
3.7 ADMIN PANEL

One of the most powerful parts of Django is the automatic admin interface. It reads metadata
from your models to provide a quick, model-centric interface where trusted users can manage
content on your site. The admin’s recommended use is limited to an organization’s internal
management tool. It’s not intended for building your entire front end around.

Figure 3.8

The admin has many hooks for customization, but beware of trying to use those hooks
exclusively. If you need to provide a more process-centric interface that abstracts away the
implementation details of database tables and fields, then it’s probably time to write your own
views.
Figure 3.9

Figure 3.10
3.8 DATABASE

Django officially supports the following databases:

PostgreSQL

MariaDB

MySQL

Oracle

SQLite

There are also a number of database backends provided by third parties.

Django attempts to support as many features as possible on all database backends.

However, not all database backends are alike, and we’ve had to make design decisions on
which features to support and which assumptions we can make safely.So in this project
we use db.sqlite3 database.

Figure 3.11
 CHAPTER-4

ADVANTAGES AND ISSUES RELATED TO E-COMMERCE

4.1 ADVANTAGES
There are numerous conspicuous and not really evident geniuses to working
together on the web. Seeing precisely what they are can assist you with utilizing
them to further your potential benefit:

1. A Larger Market

Web based business permits you to arrive at clients everywhere throughout the
nation and around the globe. Your clients can make a buy anyplace and whenever,
particularly more individuals are becoming accustomed to shopping on their cell
phones.

2. Client Insights Through Tracking And Analytics

Regardless of whether you're sending guests to your eCommerce site through SEO,
PPC promotions or a past postcard, there is an approach to follow your traffic and
clients' whole client excursion to get bits of knowledge into catchphrases, client
experience, advertising message, estimating technique, and then some.

3. Quick Response To Consumer Trends And Market Demand

The smoothed out coordinations, particularly for dealers who do "outsource," permit
organizations to react to market and eCommerce patterns and purchaser requests in a deft
way. Traders can likewise make advancements and arrangements on the fly to pull in
clients and produce more deals.
4. Lower Cost

With the development in eCommerce stage innovations, it has gotten extremely simple
and moderate to set up and keep up an eCommerce store with a low overhead. Dealers no
longer need to spend a huge financial plan on TV advertisements or board, nor stress over
the cost for work force and land.

5. More Opportunities To "Sell"

Dealers can just give a constrained measure of data on an item in a physical store. Then
again, eCommerce sites permit the space to incorporate more data, for example, demo
recordings, surveys, and client tributes to help increment transformation.

6. Customized Messaging

Web based business stages offer shippers the chance to present customized
substance and item proposals to enrolled clients. These focused on
correspondences can help increment transformation by demonstrating the most
significant substance to every guest.

7. Expanded Sales With Instant Gratification

For organizations that sell computerized merchandise, eCommerce permits the

conveyance of items close to making a buy. This fulfills shoppers' requirement
for moment delight and helps increment deals, particularly for ease things that
are regularly "spur of the moment purchases."

8. Capacity to Scale Up (Or Down) Quickly And Unlimited "Rack Space"

The development of an online business isn't constrained by the accessibility of
physical space. Despite the fact that coordinations can turn into an issue as one develops,
it's to a lesser extent a test contrasted with those for running a physical store.
Web based business traders can scale up or down their activity rapidly, and exploit
the boundless "rack space," as a reaction to showcase pattern and shopper
requests.

4.2 LIMITATIONS
There are provokes exceptional to this plan of action - realizing them will assist
you with exploring the rough waters and maintain a strategic distance from
regular entanglements:

1. Absence Of Personal Touch

A few shoppers esteem the individual touch they get from visiting a physical
store and communicating with deals partners. Such close to home touch is
especially significant for organizations selling top of the line items as clients
need to purchase the product as well as have an extraordinary encounter during
the procedure.

2. Absence Of Tactile Experience

Regardless of how well a video is made, buyers despite everything can't contact
and feel an item. Also, it is anything but a simple accomplishment to convey a
brand understanding, which could regularly incorporate the feeling of touch,
smell, taste, and sound, through the two-dimensionality of a screen.

3. Cost And Product Comparison

With internet shopping, customers can look at numerous items and locate the
most reduced cost. This powers numerous vendors to contend on cost and lessen
their overall revenue.

4. Requirement For Internet Access

This is quite self-evident, yet remember that your clients do require Internet access before
they can buy from you! Since numerous eCommerce stages have highlights and
functionalities that require rapid Internet access for an ideal client experience, there's an
opportunity you're barring guests who have moderate associations.

5. Charge card Fraud

Charge card misrepresentation is a genuine and developing issue for online organizations.
It can prompt chargebacks that bring about the loss of income, punishments, and terrible
notoriety.

6. IT Security Issues

An ever increasing number of organizations and associations have fallen prey to

pernicious programmers who have taken client data from their database. Not
exclusively could this have legitimate and money related ramifications yet in
addition decrease the trust clients have in the organization.

7. All the Investments Tied up on one place

Internet business organizations depend vigorously (or exclusively) on their sites. Indeed,
even only a couple of moments of personal time or innovation hiccups can cause
a considerable loss of income and client disappointment.
8. Multifaceted nature In Taxation, Regulations, and Compliance

On the off chance that an online business offers to clients in various regions,
they'll need to stick to guidelines in their own states/nations yet in addition in
their clients' place of living arrangement. This could make a great deal of
complexities in bookkeeping, consistence, and tax assessment.
SCOPE FOR FUTURE RESEARCH AND MODIFICATIONS

There is always more space and room for making suitable changes and modifications to
the project. In my case, I have recognized the following points as scope for future
changes and modifications which can be done to the project:

 A payment gateway can be added to the checkout section to make this project
ready-for-use for the sellers. This service is a paid service available worldwide
through many secure payment gateways such as paytm, paypal.
 More products can be introduced into the products sections with proper
classification and distinction under different categories.
 A more easy-to-use admin portal can be provided to the seller to be able to edit
the quantity and number of products available in the store.
 The webpages can be made more presentable with more animations and more
suitable color schemes.

REFERENCES

 A Descriptive Analysis of Consumer Perception on Online Grocery Shopping,

International Journal of Research and Scientific Innovation (IJRSI) | Volume V,
Issue III, March 2018 https://www.rsisinternational.org/journals/ijrsi/digital-
library/volume-5-issue-3/14-18.pdf?x49
 https://www.academia.edu/35185477/Mini_Project_Report_On_ONLINE_SHOP
PING_SYSTEM
 http://www.w3schools.com/html/defualt.asp
 http://www.w3schools.com/css/default.asp
 http://docshare03.docshare.tips/files/6381/63811982.pdf