+2347067162698
tclassified.com@gmail.com

Django CRM (Customer Relations Manager)

Educational Technology and ICT

Created with Sketch.

Django CRM (Customer Relations Manager)

Customer relationship management (CRM) is one of many different approaches that allow a company to manage and analyse its own interactions with its past, current and potential customers. It uses data analysis about customers’ history with a company to improve business relationships with customers, specifically focusing on customer retention and ultimately driving sales growth.

One important aspect of the CRM approach is the systems of CRM compile data from a range of different communication channels, including a company’s website, telephone, email, live chat, marketing materials and more recently, social media. Through the CRM approach and the systems used to facilitate it, businesses learn more about their target audiences and how to best cater for their needs.


WHAT IS DJANGO?

django is basically a way of designing a website using python.
it is also known as a popular webframework, that helps putting together a website much easier,
rather than writting out all the python codes yourself.

to get started
 
>install python then go to your directory type $pip install django..
to ensure it is installed properly go ahead and type
$django-admin and click on enter.  
then go to your directory and type $django-admin startproject crm1
note that (crm1) is the name you have given for your project. 

>so when you are done, go to your desktop and you will find your project already created in a foldertype for you.

>so go back to your vscode and on the top click on open folder and search the name of the folder that has already been created and then open.
cd crm1

>now go to your directory and run $python manage.py runserver

>copy the port number and paste on a browser. or better still CTRL + click on the port number and it will open in your browser for you.


CONCEPTS OF APP WITHIN THE DJANGO PROJECT.

TO build your app go to your terminal and type $python manage.py startapp accounts
pls also note that (accounts) is the name of the app we are building that is why it is put after typing startapp
so automatically you will see your folder already created.
after that go to your settings.py under your INSTALLED_APPS. write this code 
'accounts',

URLS AND VIEWS IN DJANGO.

if u notice, when you open a url of lets say a facebook page you will get to see different paths with different functions 
that is what we intend to do in this project. so to begin 

go to your urls.py type this command. 
	from django.http import HttpResponse
then type the below command also to create a home page and a contact page.
	def home(request):
		return HttpResponse('home page')

	def contact(request):
		return HttpResponse('contact page')

then on your urlspatterns create a path
	path('',home)
	path('about/',contact),

now go to your browser and run. copy the port number and paste on your browser you will find homepage displaying on your screen.
and when you put a slash(/) behind the port number and type (about) you will find contact page on your display.

however to build it correctly we clear up the parts we have created 
so to do it correctly.
go to your app (accounts) and click on your views.py and paste this commands
	from django.shortcuts import render
	from django.http import HttpResponse

click on you app(accounts) and create a new file and name it urls.py
on it paste the following codes

	from django.urls import path
	urlspatterns = [
    		path('admin/', admin.site.urls),
	]
......................................................................................
then on your views.py/crm1 you paste the following codes.
from django.shortcuts import render
from django.http import HttpResponse

# Create your views here.

def home(request):
	return HttpResponse('home')

def products(request):
	return HttpResponse('products')

def customer(request):
	return HttpResponse('customer')
.......................................................................................
so go back to your urls.py/accounts and import the views.py by putting this codes

..........................................................
from django.urls import path
from . import views


urlpatterns = [
    path('', views.home),
    path('products/', views.products),
    path('customer/', views.customer),
]
................................................................

on your urls.py/crm1


from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('accounts.urls'))

]

TEMPLATES AND INHERTIANCE ON DJANGO FRAMEWORK.

So click on your app and create file and call it templates and then click in your templates and create a folder and call it accounts(the name of your app)
when you are done click on accounts(name of the app) and create a new file and name it dashboard.html

Write a html code like this
	<html>
    		<head>
        <title>CRM</title>
    </head>
    <body bg = grey>
        <h1>dashboard</h1>
    </body>
	</html>

now on your views.py/crm1
paste the folowing codes

	from django.shortcuts import render
	from django.http import HttpResponse

	def home(request):
		return render(request,'accounts/dashboard.html')

	def products(request):
		return HttpResponse('products')

	def customer(request):
		return HttpResponse('customer')

so now go to your browser and refresh the page and you will see  difference.

now click on your app (accounts) and create a file and name it products.html
and paste the below codes
 
	<html>
    		<head>
        <title>CRM</title>
    </head>
    <body bgcolor=red>
        <h1>products</h1>
    </body>
	</html>

also click on your app and create a file and name it customers.html
and paste this code
................
<html>
    <head>
        <title>CRM</title>
    </head>
    <body bgcolor=yellow>
        <h1>customers</h1>
    </body>
</html>
.............
now on your views.py/crm1 make some replacment with the following codes.

	def home(request):
		return render(request,'accounts/dashboard.html')


	def home(request):
		return render(request,'accounts/products.html')


	def home(request):
		return render(request,'accounts/customers.html')

now go to your browser and refresh, 
http://127.0.0.1:8000/customers/
or
http://127.0.0.1:8000/products/

now go to your templates and create a file and call it main.html
and paste the following codes
...........
<html>
    <head>
        <title>CRM</title>
    </head>
    <body>
        <h1>header</h1>
        <hr>

        {% block content %}



        {% endblock %}

        <hr>
        <h5>our footer</h5>
        
    </body>
</html>
..................

now on our dashboard.html you need to tell it what template are you inheriting from.
so you do the following.
.........................
{% extends'accounts/main.html' %}

{% block content %}
<p>customers</p>
{% endblock %}
.................

now go to your browser and refresh.

now, when you do this http://127.0.0.1:8000/products/ on your browser search engine you will not find the nav bar.
and to do that we 'inherit'

go to your products.html and paste this codes
........
{% extends'accounts/main.html' %}

{% block content %}

<p>products</p>

{% endblock %}
...........

also go to your customers.html and paste the same codes
........
{% extends'accounts/main.html' %}

{% block content 

<p>customers</p>

{% endblock %}
...........

and go to your browser and input this
http://127.0.0.1:8000/products/ and see he difference.

now to avoids get really too big on just one templates, we create andother templates and call it navbar.html

so to avoid write out html codes and css codes we will use what is known as bootstrap.
..............................
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>
.........................
now to your browser and refresh.

now we need to add cdn to it. and by doing so, is to write out the following line of codes.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


now add a javascript for the handbugger in your webpage to be active. 
and by doing that, you neeed to paste the below javascript on your main.html
that is on the buttom of the </body>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

now on your dashboard.html paste the below codes which have already been built out 

........
	{% extends 'accounts/main.html' %}

	{% block content %}

	{% include 'accounts/status.html' %}

	<br>
    <div class="row"
        <div class="col-mcl-5"></div>
        <h5>customrs</h5>
        <hr>
        <div class="card card-body">
            <a class="btn btn-primary btn-sm btn-block" href="">create customer</a>
            <table class="table table-sm"
            <tr>
                <th></th>
                <th>customer</th>
                <th>orders</th>
            </tr>

        </table>
        </div>
	</div>

	<div class="col-mcl-7">
		<h5>LAST 5 ORDERS</h5>
		<hr>
		<div class="card card-body">
			<a class="btn btn-primary btn-sm btn-block" href="">create order</a>
			<table class="table table-sm">
				<tr>
					<th>products</th>
					<th>date ordered</th>
					<th>status</th>
					<th>updates</th>
					<th>remove</th>
				</tr>
			</table>
		</div>

	</div>
	
.......................

now create status.html and paste this codes 
............................................

<div class="row">
	<div class="col">
		<div class="col-md">
			<div class="card text-center text-white mb-3" id="total-orders">
				<div class="card-header">
					<h5>class="card-title>total orders"</h5>
				</div>
				<div class="card-body">
					<h3 class="card-title"></h3>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="row">
	<div class="col">
		<div class="col-md">
			<div class="card text-center text-white mb-3" id="total-delivered">
				<div class="card-header">
					<h5>class="card-title>total delivered"</h5>
				</div>
				<div class="card-body">
					<h3 class="card-title"></h3>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="row">
	<div class="col">
		<div class="col-md">
			<div class="card text-center text-white mb-3" id="total-pending">
				<div class="card-header">
					<h5>class="card-title>total pending"</h5>
				</div>
				<div class="card-body">
					<h3 class="card-title"></h3>
				</div>
			</div>
		</div>
	</div>
</div>


.......................................

now we will throw some css to style the webpage. and will do that, by going to our main.html and paste the below codes there.

............
#logo(

)

body(
    background-color: #f4f4f4
    )

#total-orders(
     background-color: 4cb4c7
    )
 #total-delivered(
        background-color: 7abecc
    )
    
#total-orders(
        background-color: 7CD1c0
    )   

.............

now go to your browser and refresh and see the difference.

also note that when you do this http://127.0.0.1:8000/products/  on your browser you will notice that,the page is not styled so in doing that we do this.

on your product.html paste the below codes
........

	{% extends 'accounts/main.html' %}

	{% block content %}
<div class="row">
	<div class="col-md">
		<div class="card card-body">
			<h5>products</h5>
		</div>
		<div class="crd card-body">
			<table class="table">
				<tr>
					<th>products</th>
					<th>category</th>
					<th>prices</th>
				</tr>
			</table>
		</div>
	</div>
</div>

{% endblock content %}
................

 
 STATIC FILES AND IMAGES IN DJANGO

static files are basically a foldeer where we can store in things like css, javascript and images.
to begin go to your appilcation folder(crm1) and create a new folder and name it static. and then on it create a folder and name it css, and then create another folder and name it javascript
and another folder and name it images. (note, that all folders created recently must all be created on the static folder)
so on your (css folder) create a new file and name it (main.css)
now on your maain.css paste the below css code
...........
#logo(

)

body(
    background-color: #f4f4f4
    )

#total-orders(
     background-color: 4cb4c7
    )
 #total-delivered(
        background-color: 7abecc
    )
    
#total-orders(
        background-color: 7CD1c0
    )   
.............

now configure django so that it will have a link of the static file.
to do that
go to your settings.py and on the buttom  of it
.......
STATICFILES_DERS = [
    os.path.join(BASE_DIR, 'static')
]
.............

now is to import the static files into the templates
so to do that, paste the below link 
.....
 <link rel="stylesheet" type="text/css" href="{% static '/css/main.css%}">
.....

refresh your page on your browser and take a look at the difference.

now lets throw in our logo on our page. and by doing that we begin by.
creating a logo on our own and paste the logo on the already created folder on your desktop on your images.
after that go to your navbar and put your image tag <img> 
and then go to your setings.py and below the static _url pste this codes.
....
STATIC_URL = '/images/'
...
 
now go to your navbar.html and change it from a text bar to a static image by putting the image tag.
.........
<img src="[%static 'images/logo.png'%]">
......

the logo.png is the name you have or should give your image on your folder.

now on your navbar.html paste this static file code on it and then refresh on your browser.
{% load static %}

while you paste this other below code where you find the img tag
<img src={% static "images/logo.png" %}>


Leave a Reply

Your email address will not be published. Required fields are marked *

Open chat