How to Create Fully Functional E-commerce Website With Django

Step 1 of 5: Setup and Configuration

https://www.shuup.com/wp-content/uploads/2017/12/python-plus-django-1.jpg

Note: to follow this tutorial you at least understand Django and how the concept of MVT (Model View Templates) works in Django

What is Django ?

From Django :

Django is a high-level Python Web framework that encourages rapid development and clean, pragmatic design. Built by experienced developers, it takes care of much of the hassle of Web development, so you can focus on writing your app without needing to reinvent the wheel. It’s free and open source

What is E-Commerce ?

From Shopify:

Ecommerce, also known as electronic commerce or internet commerce, refers to the buying and selling of goods or services using the internet, and the transfer of money and data to execute these transactions. Ecommerce is often used to refer to the sale of physical products online, but it can also describe any kind of commercial transaction that is facilitated through the internet.

ERD Simple E-Commerce

Prerequisites

• Django Latest Version
• Anaconda (Optional) to make Virtual Environment
• The package manager PIP
• Visual Studio Code (Optional) ad Code Editor
• Mdb template E-Commerce (you can download here )

A. Create Virtual Environment

Before we install Django framework on your device, we will make a Virtual Environment. In this tutorial I will use Anaconda to make a Virtual Environment:

$ conda create -name <my_env>

to activate the Virtual Environment use this command :

$ conda activate <my_env>

to deactivate the Virtual Environment use this command :

$ conda deactivate <my_env>

if you do not have anaconda installed, I’m sure there are many tutorials to help you create one. If you do not care about virtual environment stuffs, you can skip to Installing Django

B. Installing Django

Before installing Django Framework, make sure your virtual environment activate. After you have activate a virtual environment, you can proceed with this tutorial.

1. Run this command to install Django (consider running sudo if you are not doing this in a virtual environment)

$ pip install django

2. Verify the Django version installed by running this command :

$ django-admin --version

if a version of django is visible, django is installed correctly

C. Create the Project

After you have django framework installed , you can proceed with this tutorial.

1. Create a project with the command below :

$ django-admin startproject <project_name>

2. Enter to project directory with the command below :

$ cd <project_name>

3. migrate admin database with the command below :

$ python manage.py migrate
$ python manage.py makemigrations

4. Create a super user to login for admin user with this command :

$ python manage.py createsuperuser

Fill in your username and password as you wish

5. Make the Core project with this command :

$ python manage.py startapp core

The command will give you a directory named core. where in this core directory we will manage the core of our website

6. Running the development server :

python manage.py runserver

It will give you number port serves your django application. Default port is 8000 so it will give you http://localhost:8000/ and the last Navigate to http://localhost:8000/ on your browser .

D. Managing Url and Templating

To manage the URL of the application follow this tutorial :

1. Create python file with name in core directory with name urls.py

$ code core/urls.p

2. Create two directory with name templates and static :

$ mkdir templates
$ mkdir staic

• for templates directory you can fill directory with this file :
  https://github.com/Andika7/DjangoEcommerce/tree/dd22c575aaad4c859b02bc098de93a5264d3dcc8/templates, this is template modification from mdb template
• for static directory we will fill this directory with assets from mdb template or just use this file instead : https://github.com/Andika7/DjangoEcommerce/tree/master/static

3. Making a views to home

open views.py file in core directory and fill the views with this script code :

4. Make sure your <project_name>/settings.py have this script:

and then run the command bellow, it will collect the static file becoming asset file so our templates can use the style from mdb template:

$ python manage.py collectstatic

5. In inside core/urls.py we made just now. fill with this code :

from django.urls import path
from . import views 
app_name = 'core' 
urlpatterns = [
    path('', views.home, name='home')
]

and in <project_name>/urls.py make sure to add this line code :

from django.contrib import admin
from django.urls import path, include 
urlpatterns = [
    path('', include('core.urls', namespace='core')), 
    path('admin/', admin.site.urls),
    path('accounts/', include('django.contrib.auth.urls'))
]

6. The last don forget running your server and refresh your browser. It will show the home page of E-Commerce website :

hompage view

Source Code this Part :

https://github.com/Andika7/DjangoEcommerce/commit/dd22c575aaad4c859b02bc098de93a5264d3dcc8

Proceed to the next part !

I hope you’ve found the first part of this tutorial helpful. In the next session, we’re going to make a databases and adding an order to shopping cart