Django Project – Code a CRM App Tutorial

in this course you will learn how to

build a powerful CRM application using

Django Python and MySQL you also learn

how to use Version Control with Git and

GitHub and how to configure MySQL for

your application John Elder teaches this

course he is an experienced instructor

who has created many popular courses

what's going on guys John Alder here

from codemy.com and in this video we're

going to create a basic CRM app with

Django and python

all right guys like I said in this video

we're going to build this basic CRM app

with Django and python but before we get

started if you like this video you want

to see more like be sure to smash like

button below subscribe to the channel

give me a thumbs up for the YouTube

algorithm and check out codemy.com where

I have dozens of courses with thousands

of videos to teach you to code use

coupon code YouTube 50 to get 50 off

lifetime membership it's all my courses

videos and books for one-time fee which

is insanely cheap all right as like I

said in this video we're gonna build

this basic CRM tool with Django and

python CRM customer relationship manager

management you know what I'm talking

about this will allow us to add customer

records see John Elder address city

state ZIP code date created anything

else you want phone number or whatever

and then add it to the database we can

click on one of these guys and we can

see the record we can update the record

if we want so John 2 update this record

boom John 2 Elder if we want to we can

update the record back

there we go uh we can come down here

maybe we don't want a record anymore we

can delete it

record is deleted successfully we've got

this nice table when you hover over it

it sort of changes color so you can sort

of play around with it and it's very

cool we can log in and log out so we

could also register so you can create

accounts log in

see I'm as admin here and then here we

go so that's we're going to be building

this video this should be a complete

video I'm going to start at the

beginning go all the way through it and

this should be a lot of fun so let's

head over to our terminal I'm using the

Sublime Text Editor and the gitbash

terminal as always and as always you can

find a link to the code in the pin

comment section below so check that out

if you're interested so I've just got a

basic get bash terminal opened up and uh

you can see I'm just in my default

directory so let's create a directory

we're going to hold all this stuff so

I'm going to say mkdir I want to put it

in my C drive and I'm just going to call

this uh Django CRM dcrm whatever so now

we need to move into that directory so

CD

dcrm and when we do when we type in LS

to list the stuff here there's nothing

in there so all right that looks good

now I should mention before we get

started I'm going to be using a mySQL

database for this one just because I get

a lot of requests from my Sequel and

Django and I don't really understand

when that happens because the point of

Django is that it abstracts away the

database layer so it doesn't matter what

database you use you can use any data

base it's irrelevant you're not going to

be doing like my SQL commands in this

you're just going to be doing regular

Django database coding but I keep

getting questions about the mySQL

database so that's we're going to use in

this video you could swap this out for

postgres most people will use postgres

because when you push this online

postgres is the most popular and easy to

use database with Django and everything

else but you can use MySQL too it just

takes a few extra steps to get it going

so we're going to be using my SQL this

one just to mix things up a little bit

and it should be fun but like I said if

you want to use postgres it's very

simple to swap out postgres instead it's

just basically a couple of settings that

you need to configure so no big deal so

all right let's head back over here and

let's first create a virtual environment

we always create a virtual environment

so I'm going to go python Dash m v e n v

and let's call our virtual environment

vert sure for virtual hit enter this

should spin right up all right so now

when we hit LS we can see there's a vert

directory so let's turn this on let's go

Source vert scripts activate so now we

see this vert here so that we know the

virtual environment has been turned on

so all right let's pip install Django

the first thing we need

all right we're good there now we also

want to pip install MySQL

now we're also going to have to actually

download MySQL onto your computer from

their website we'll look at that in just

a second but uh we'll need to do that

next we need a connector to connect our

Django app to our MySQL app so there's a

couple of them so you can pip install

my SQL Dash connector that's the

original one go ahead and try that and

you may be fine but more likely than not

you're gonna have to install pip install

MySQL connector Dash python so I know

I probably need that

but

if for good measures you can install the

regular one as well if one of them works

the other one won't be needed and vice

versa so okay we're good there okay so

now we need to download and install my

SQL so I'll put a link somewhere to this

let's head over to a web browser and

just head over to this website

dev.mysql.com forward slash downloads

forward slash installer and we want the

MySQL installer for the community

version right and it's 437 megabytes go

ahead and click here to download now I'm

not going to do this because I've

already downloaded it's a little bit

tedious process you have to click next a

bunch of times and it installs a bunch

of stuff takes like five or ten minutes

to install this thing the important

thing here is when you install it it

will ask you to set up a username and a

password and root is probably the

username you're going to want to set up

it may default to root but if it doesn't

type in root for the username and for

your password pick whatever you want but

remember that password because we're

going to need it to connect to the

database later on in our Django app so I

think mine is just password one two

three so whatever for the purpose of

this that's fine but you know pick a

good password now once you install it

you'll need to turn it on there's

probably an option that says at the very

end you know start my sequel click yes

it needs to be running sort of in the

background you won't notice that it runs

in the background of windows so just

make sure that's turned on so okay let's

now head back over to our terminal all

right so let's head back over to our

terminal I'm still in my cdcrm directory

our virtual environment is still there

it's still turned on let's go ahead and

create our project so let's go Django

Dash admin start project and I'm just

going to name this dcrm

so now we see this dcrm directory so now

I'm going to change directory into it so

so CD change directory into dcrm and we

can see here's our manage.pi file so

that's cool so now we need to create an

app inside of our project so let's go

python manage.pi start app and let's

name this website because basically this

is a website so I'm just going to call

it website so now when we LS we could

see there's that directory so okay we've

got our stuff now let's head over to

Sublime Text and add all this in come up

to project add folder to project

navigate to your C drive and then find

that dcrm directory double click it go

inside of it click the second one just

once to highlight it click select folder

and boom there we go so the first thing

we need to do is make some changes to

our settings.pi file so I'm going to get

rid of our comments here and let's come

down here to installed apps we need to

add our app so we call that website

there we go now we need to come down

here and configure our database section

because by default Django uses sqlite3

but we want to use like I said my SQL

for this one so we need to make some

changes the Django DB back ends should

be pointed to my SQL now and we can get

rid of this

but we need to add some things first we

need to add a name so I don't know what

you want to name your database let's

call it I don't know Elder Co something

like that Elder company whatever name it

whatever you want and then now we need

to set the user and this is the user

that you set up when you installed my

SQL so it should be root or whatever you

set up next we need to designate the

password

and again that's that same password you

set up when you installed my SQL mine

was password one two three pick

something better than that

I'm just doing this on my local computer

so it doesn't really matter next we need

to set the host

so

this is just on our local computer so

it's going to be a local host

and then finally we need to set the port

my sequel generally runs on Port

3306 and that looks good you can I think

maybe change that during installation of

my SQL but you don't want to just take

the default so okay go ahead and save

this and we're good to go there so now

we need to set up that database that we

just designated remember we called it

Elder Co right we need to create that so

what I'm going to do is come back to my

terminal and we're in our dcrm dcrm

directory it's the same one that has our

manage.pi file right and I'm just going

to create a file using the touch command

and let's call this mydb dot Pi there's

lots of different ways you could do this

but this is really kind of the easiest

in my mind so we'll just do that head

back to our Sublime Text and you can see

there is our file so really quickly let

me just comment in some things we've

done so far so we want to install MySQL

this is the URL to the installation

thing we want to pip install MySQL we

also need a connector so either the

basic one or more likely this one

whichever one works on your computer try

them both maybe try this one to begin

with if it doesn't work try this one in

my case I know I I need this one on my

computer so I just would do that one but

you could try them both there's no harm

in that so now we need to import MySQL

dot connector

okay

that's this guy or this guy they both go

by that and we need to create a database

connection so I'm going to create a

variable called database and this is

going to be a MySQL dot connector

dot connect

and then inside here we need to

designate some things so host is we know

localhost and then our user we know is

root

and our password is now notice this is

past WD pass would not password that's

just the convention we know that that is

going to be password one two three

because I'm very lazy all right and

there we go so now we want to prepare

a cursor object and this might seem like

a lot of work but it's really not too

bad just a few more lines of code so we

want a cursor object and we want to set

that to database dot cursor

and that database is this thing right

here that we just defined right

we also now need to create the database

right so we can do that by calling this

guy

paste that in dot execute

and this is just a MySQL command to

create a database

we just create database and what do we

want to call it we want to call it Elder

Co right

now we can give a little message here to

the terminal if we want all done

something like that and go ahead and

save this file so we're only going to

need this right now one time just to

sort of set up this database and if you

know how to set up a database by hand in

the terminal you could do it that way

too or you could go to the MySQL

workbench and do it there however you

want to create your database you can but

this is super easy so I'm just going to

do it like this so let's head back over

to our terminal here and if we LS we see

sure enough there's that file so let's

just run it so let's go python

mydb.pi and boom it says all done and we

should be good to go now if you want to

confirm this you can open up your MySQL

workbench and let's see here

we could come down here to schemas and

when we hit refresh we see now there's

an elder Co

database in there right so okay that

looks like it worked so all right we're

pretty much done with the MySQL stuff

that's the extent of all the MySQL stuff

we're going to have to do uh we're

pretty much good to go now we can make

sure this worked by coming up here

clearing the screen and running python

manage.pi migrate because by default

Django comes with a bunch of database

stuff that needs to be pushed into the

database with a migration right out of

the box so we could do that now and if

this works boom boom boom we should be

all good to go now we can again confirm

this if we want in our MySQL workbench

we can click on tables and you can see

now there's a bunch of Django stuff in a

table in our Elder code database right

so that looks like it worked and we're

good to go so

all right that looks good one last thing

I want to do in this sort of area is

create a user so to do that

I'm gonna go win PTY and then python

manage.pi create super user

now I'm using the win PTY command

because I'm on Windows and get bash and

you have to if you're on a Mac or

something else Linux you can leave off

this win PTY and the command is just

python manage.pi create super user so

let's do that and I want to set the

username to admin and we don't need an

email address and then set a quick

password

okay we're good to go so now

let's run our server and see if this all

works so python manage.pi runs server

that looks good head back over to the

browser and when I hit reload here at

localhost 8000 boom we get this Django

start screen which means everything

works out and we are good to go so we

have set up our project everything is

working we've got a mySQL database

installed and connected and we're ready

to start building this thing out

so before we start building this thing

out let's set up Version Control very

quickly with Git and GitHub just so you

guys can check my code as I'm going

along if you want to watch that so to do

that we head back over to the terminal

hit control and see at the same time to

break out of our server and now we just

need to set up git and I've already got

an SSH key created on my computer if you

don't know how to do that check the

channel there's tons of videos on

setting up an SSH key you need an SSH

key to connect to GitHub I've also got

lots of videos on connecting to GitHub

for the first time if you don't know how

to do that so I'm just going to run

through this as if you already know so

head over very quickly to this webpage

codemy.com forward slash git these are

the commands to set up git on a project

and I never remember them I just come to

this page and uh copy and paste them so

this is the first one we just need to

copy each of these and paste them into

the terminal real quick so head back

over here right click paste and enter

your name John Elder hit enter boom that

one's good the next one is email address

so copy that head back over here

right click paste and here's my email

address

johnny4196

gmail.com I suggest you use the same

email address that you use at GitHub

this makes things easier

next we have this guy's copy him

and like I said I don't remember what

these commands do I just know that every

time we want to set up git we need to

paste them in so that's what I do I've

been pasting these commands in for like

20 years they never change and I still

don't really know or care what they mean

that's just what we do so add back over

here

paste enter and the last one I do

remember the last one it is get a knit

so there we go here

boom boom get a knit okay so now we see

this master on here that's the master

branch that means git has been basically

uh installed and it's been turned on so

now we need to put all of our files in

there so let's go get add period git

commit Dash am let's call this the

initial commit

all right so we've committed it all now

we need to push it up to GitHub and in

order to do that we need to go over to

GitHub real quick so go to github.com

login

so my username is I think flat Planet no

I don't think the world is flat I just

find it hilarious some people do okay

and then click on repositories

and then let's create a new one and I'm

gonna call this Django CRM and this will

just be public so we'll click create

Repository

and then we need to come down here to

push existing repository from the

command line and we need to enter these

commands into our terminal one at a time

so let's paste this guy in

alrighty then this one will change the

name of our Master Branch from Master to

Main

common now

so you can see now it says main there

and then finally the last one is just to

push all of our code up to GitHub

we'll grab this guy paste it in

and boom that looks good so now when we

come back here and hit reload

you can see here's all the code that we

have so far and we can confirm that we

can click this dcrm go to settings you

can see up there it says website we made

that change and then we come down here

and see up here's all the database stuff

Elder co root now your password is right

here this is open so if you're doing

this professionally when you set up your

repository you want to probably set that

up as private right so remember I picked

public

um but we can let me show you here again

go to repositories

click new name it and then right here

where it says public instead you would

click private so people won't be able to

see your code right but for our purposes

I don't really care I don't care that

you guys know that my mySQL database is

password123 there's nothing in there you

can't hack it well I suppose you could

hack it but there would be no reason to

there's nothing interesting in there so

there you go so okay that looks good

so all right we're moving right along so

now let's come back here and let's run

our server so python manage.pi run

server

head back over to the website make sure

that's working hit reload okay we're

good to go there so all right let's

start building this thing out so let's

head over to our code now you could

delete this mydb.pi file we do not need

it at all anymore I'm going to leave it

in here just so you guys can reference

it if you want if you head back over to

github.com

planet and then click on the Django CRM

director you can see here it is right

there if you want to copy and paste it

or whatever you can do that so okay so

let's start to build this thing out

so let's head over to our code and start

building this thing out so I can close

out our dcrm folder we're going to be

working mostly from now on in our

website folder here so actually know

that we do need to do one thing first in

this folder that we didn't do we need to

play around with our urls.pi file so

open up this file

and here we need to add include

and we go there and we need to create a

new path so I'm going to call this two

single quotation marks nothing in

between them and we want to include

our website

dot URLs file

right now we don't have a URLs file in

our website directory yet we need to

create that so I'm just going to copy

all this and close this head over here

to our website directory right click new

file and then file save as and let's

call this urls.pi

and paste in that code now we don't need

this and we don't really need this

include and we really don't need that

okay so let me minimize this dcrm

directory again we're not going to be

using that much at all if at all from

now on and okay so instead of this

thing right here let's create a new home

page so anytime in Django when you want

to create a web page it's always a

three-step process you create the actual

template file the actual HTML page you

also create a URL and you create a view

so let's start out with creating a URL

right here and this is going to be our

home page so we could just so we just

want it to be in root which is nothing

just two single quotation marks and we

want to point this to views dot home

let's call it and let's give this a name

equal to home now up here we need to

import our views so let's go from period

import views

okay so this is our URL we're good there

now let's head over to our views.pi file

and let's create our home page view so

let's define home we want to pass in our

request as always

and then here for now we just want to

return

render

request and then we want to point this

to home.html now this doesn't exist yet

but we'll create it in a second and we

want to pass an empty context dictionary

so okay that's good there now we need to

create this home.html file so let's head

over to our website directory right here

right click and create a new folder and

then down here at the bottom let's name

it templates now Django knows to look

for all web page files in the templates

directory so it will just know to look

there so we can create a new file file

save as and we want to call this

home.html and for now I'm just going to

say uh hello world just to make sure

this is working

go ahead and save this now we can head

back over to the website and click

reload and hopefully that worked oh we

got an error because let's see no model

named website URLs ah let's go ahead and

break out of our server run it again now

that should work

just need a little reset there when we

made a change there to the settings.pi

file and boom there we go hello world so

we've got our first web page so very

cool now let's set up the base.html file

and a base.html file is just the file

that every web page on your site will

reference and it'll pull like the

headers and the Footers out of right so

I'm going to come over to templates

right click new file file save as we

want to call this base.html and inside

of here we want to put all of the code

that's going to go on every page so the

code we're going to use for our styling

is something called bootstrap the

bootstrap CSS framework it's the most

popular CSS framework and we can use

that for free by going to

getbootstrap.com clicking on the docs

and then just coming down here and we

want the one with CSS and JavaScript so

I'm just going to copy this to clipboard

and then we just want to come back here

and right click and paste all of this

stuff into our base.html file and up

here the title let's change this to

Django CRM something like that and then

here where it says hello world we need

to take this out and add a little tag

and the tag we want to use is a Django

tag and it's the block content tag

right so that's the opening block

content tag we also need a closing one

so type in in Block here all one word

and basically what this does is it will

pull everything out of our web page in

this case all we have in there is this

stuff it will Django will basically pull

stuff out of there and it will place it

inside of this tag right but it'll do it

behind the scenes so okay that's cool

now we need to come back over here and

make a quick little change we need to

say hey use that file right so up here

at the top we want to extends

base.html

right and then in this page we need to

wrap everything that we want that

based.html file to use inside that same

block content tag so here we can just

type that in real quick so that's block

content

and then again we need to close that tag

down here so end block okay go ahead and

save this make sure that base.html file

has been saved so now let's head back

over to our website and see if that

works now notice the text it's all kind

of Blocky and dark if we click reload oh

we get an error ah I didn't put a

quotation mark at the end of that

uh head back over to our home yeah there

we go right there typos

I'm the master of typos it's gonna

happen a lot all right so boom now you

see the text is skinnier it's kind of

not as blocky that means bootstrap has

been installed and we're good to go so

all right that looks good now this is

shoved right up here in the top we need

to change that a little bit and we can

do that by going over to our base.html

file and wrapping this whole thing in a

bootstrap div called

container

right like that and we need to close our

div there we go and if you want you can

tab this over to make it look pretty so

now if we save this and head back and

hit reload boom it pops it over a little

bit you might also want to add a little

line break or something so I'll just add

a br line break tag come back over here

hit reload boom and we're good to go so

all right that looks good now let's

create a nav bar so let's head back over

to our templates directory right click

and create a new file I'll save as let's

call this

navbar.html and we're going to grab that

from bootstrap as well because it's

super easy head it back over to

bootstrap scroll down to components and

then look for navbar now there's navbar

and navs and tabs you don't want navs

and tabs you just want nav bar so I'll

go ahead and click that and then just

come down here and find one that you

like I like this one right here so we'll

go ahead and copy this

and we can head back over to our

navbar.html right click and paste all

this in so let's just go ahead and save

this and see what we got right out of

the back now we need to add this to our

base.html file so we'll come back over

here and right under the body tag let's

add another Django tag called include

and here we could just include our

navbar.html close your quotation mark

there and that should be it so let's go

ahead and save this head back over here

and let's hit reload and boom we've got

a navbar so okay looking good now let's

modify this nav bar because I don't like

light nav bars so let's go ahead and

change that so let's head back over here

and go to our navbar.html and up here at

the very top where it says BG body

tertiary we can get rid of that

and instead let's type in navbar dash

dark and BG Dash dark so that will

change it from light to dark so if we

come back over here and reload boom I

think that looks much better so okay

let's play around with this let's

navigate let's modify this bar a little

bit more and we can start with this

navbar guide instead of it saying navbar

let's call Django CRM and instead of

pointing to hashtag let's point this guy

to

a URL tag pointing to our home page

all right okay let's go ahead and save

this and back over here hit reload all

right now if I right click and open in a

new window it goes to the home page

right we can click it forever and it

just keeps going to the home page so

that looks good next let's get rid of

the search thing I don't think we're

gonna need that

come down here to the bottom of our nav

bar and see this search come up until

let's see yeah you see you can click on

form in the closing form tag appears

that's how you know kind of you know

what to delete so you just highlight and

delete it save it come back over here it

reload all right that's gone next let's

get rid of this disabled link same deal

just come back over here and kind of

look for the word disabled there it is

go up above click on this Li the closing

Li tag highlights you can see there's a

little line underneath it so that's

again how we know what to delete

save that and I like to do one little

thing at a time to make sure I didn't

mess something up so we've got this drop

down thing we don't need that so again

let's head back over here look for the

word drop down ah there it is and then

come up see we don't even really need to

know HTML we could just sort of eyeball

this and when I click on this Li this

closing Li tag way down here highlights

so I know

all of this can go

save that and back reload all right and

now we've got these links we are going

to need some links up here so I want to

use this one and not this one I just

like the the look of the sort of

more muted one right there so let's get

rid of this home link instead again come

back here look for the word home there

it is click on the LI tag Right Above It

the closing tag highlights

we can get rid of it save it

come back over here boom all right we're

good to go so we are moving right along

we've got a functioning website we've

got a home page we've got a nav bar

things are starting to come together now

I think we want to add the ability to

register as new users log in and log out

so I think we'll look at logging in and

logging out first and then we'll do

registration that's a little bit more

complicated there's a little more stuff

involved logging in and logging out is

relatively simple and that's because

we're going to use the Django

authentication system this comes with

Django it will do all of the heavy

lifting for you it will take care of

logging people in logging people out

keeping track of who's who and what's

what and it just comes with Django and

it's really easy to set up and use so

we're going to do that now

so let's head back over to our code

and let's close out some of these things

just because so we need to import the

Django authentication system into our

app so let's come up here to the top of

our views.pi file and let's go from

django.contrib dot auth short for

authentication we want to import several

things first authenticate

then also log in and log out and while

we're at it we want the ability for

Django to flash up little messages on

the screen so like when somebody logs in

we want to flash up a little message

that says you have logged in you know

when it logs when you log out we want to

flash up a little message that says

you've logged out see ya whatever when

we register we want to flash up a

message that says you've been registered

successfully whatever all that good

stuff so we need to import that too so

let's go from

django.contrib we want to import

messages plural

and that looks good so we've already got

a user we set up a super user and if we

come back over here we can go to the

admin section of Django and we can log

in with that user right so we don't need

to register that user we've already got

it so we can log that user in and out so

I'm going to go ahead and log out but

that's why we can do the login and log

out stuff before we set up the

registration because we've already

registered a user now what you're going

to want is to be able to register users

on the web page not on the back end like

we did when we set up the super user way

back at the beginning of this thing so

we'll build all that out in a little bit

but we're going to start like I said

with logging in and logging out so

what we need here is a couple of

new views so I'm going to Define login

underscore user I want to pass in the

request

and for now I'm just going to say pass

and we want to Define log out underscore

user again we want to pass in the

request

and if you're not familiar with what a

request is anytime you go to a website

you're requesting that website you're

requesting that web page that request

gets sent back into the back end right

here and we pass it into the view and

then return something in this case we're

returning the home page so that's what

this request is you see a request a lot

in Django and just think of it as that

somebody going to a web page and

requesting that web page right so that's

all that is so okay we've got these two

new views we also need URLs because like

I said it's always a three-step process

in Django you need a view you need the

thing you know like that and you need a

URL so let's head over here and create

our URLs open our urls.pi file and I'm

just going to copy this and paste it a

couple more times so let's create a

login

URL and this is going to point to views

Dot Login underscore user that we just

created in our views.pi file and let's

name this login

okay so that's good we also want to log

out

right and this is going to be views DOT

log out User it's very complicated right

log out user and we want to give this a

name of log out now the reason why I'm

calling this logout user instead of just

log out is because here we're importing

login and log out and these are

basically functions that will run so our

view can't be named log in because it

will conflict with this login thing it

can't be named log out because it will

conflict with log out so we you know get

around that by calling it login user

instead of just login so that's why we

do that so all right head back over here

this looks good go ahead and save this

now head back over to reviews.pi file

and I've created this login user

function and if you want to create a

separate login page you need that but I

think we're just going to add this to

the home page so what we want to happen

is if somebody comes to the home page if

they're not already logged in we want to

flash up a form that says login if they

are logged in we want that form to

disappear here and we just want to show

the database like the CRM list of all

the records but we don't want to show

those records unless you're logged in so

we will do this all on the home page so

let's head back over here and we can add

all this stuff in our home view so

before we do that let's add the form to

our home.html page just so we can see

what we're looking at here head over to

our home.html so and let's Center this

form in the middle of the screen so I'm

going to give this a div with a class

equals and this is going to be col Dash

md-6 and this is just pure bootstrap and

then we also want to give it a space and

then give it an offset Dash md-3 and

basically like I said this is just

bootstraps code that says Center

everything in the middle of the screen

so if we just save this and head back

over here and click reload

well we got rid of this login view so we

need to modify this very quickly head

back over to urls.pi file and we don't

actually need that guy anymore so we can

comment him out and for now we'll

comment this out because we haven't

built this out yet and I'll throw an

error so if we save this head back over

here now if we hit reload we can see

boom hello world is more centered than

it was before and that looks good so

let's head back over here to our home

page and let's start building this thing

out so there's a couple of ways to

create forms in Django you can create a

forms.pi file we'll do that later with

the registration you can also just hand

code it we'll do that for this I want to

do both of them in this little video

here so you can see both ways to do it

so here let's just change this to log in

and let's create a form and the method

we want for form is post anytime

somebody fills it out and clicks the

button it posts that to the server and

then we also want to give this an action

of

and this is going to be a Django URL

and we want to point it to home because

we want to send those back to the home

page right so then down here we can

close our form tag anytime you create a

form with Django you also need a csrf

underscore token that's a cross-site

request forgery token it helps your form

from getting hijacked by hackers so

that's just a requirement now let's

create a form and we're going to use

bootstrap for this so I'm going to head

back over to bootstrap and come up here

to forums and click overview

and let's just grab the first one it

doesn't really matter and we can head

back over here and paste it in and if we

save this and head back over to the

website and hit reload you see okay

that's looking good it's asking for an

email address and a password and the

password has these dots in it that's

good it also has this check me out thing

we don't need that so we can get rid of

that as well also this is crammed right

up here I'm going to put a little space

in there so I think uh that will be

better so right here I just gonna add a

line break and all right let's start to

modify this thing so let's come down

here and first things first this button

is primary colored blue I want to change

it to secondary so if we save this come

back over here hit reload boom now it's

gray I think that looks better it says

submit maybe you want it to say log in

you could just change this to login

and now let's get rid of this checkbox

so check me out

click this div the closing div

highlights so we know we can delete all

of that

save it head back over here

all right that's gone the password field

is fine uh but uh this needs to be

changed from an email address field to a

text field

so we can do that let's see first let's

get rid of this label we don't need the

label for the password thing and get rid

of this div it says we'll never share

your email address we don't need that

and let's also get rid of this label

that says email address and instead of a

type of email this is going to be a type

of text

right and we have a class of form

control but we don't need an ID so let's

get rid of that

and same thing here with the password

field we don't need the ID thing so

we'll get rid of that okay so these two

things do need some things they need a

name so this one will give it a name of

first underscore name

and let's give it some placeholder text

and let's say first name

all right same thing down here with

password we need to give it a name so

I'm going to name it

you guessed it password

right and also let's give this some

placeholder text

and this is going to be password

so let's save this come back over here

and hit reload and oh that looks much

better we've got this placeholder test

text that says first name when we click

it and start typing that disappears uh

here we can still type the password and

that looks good when we click log in

nothing happens because you know we

haven't done anything yet we need these

to be required though so if you don't

fill them out we need a little thing

that pops up and says hey fill that out

so we could just come over here and then

just type in required

same thing for this guy required

and bootstrap will take care of this for

us so now when we hit reload

we don't need to resend this if I click

log in it says hey please fill out this

field so if I enter a name and then

click login it says hey please fill out

this field so that looks good it doesn't

actually go anywhere so

uh maybe we'll give a line break above

that button too so I don't know I like

line breaks I like to space things out

that's just me

uh resend okay so I don't know maybe

that looks better whatever you could

also put a line break between these two

things if you wanted

whatever

um let's see let's just do it right here

save this

reload

whatever whatever you like you can play

around with that so okay that looks good

but it doesn't actually do anything and

really we only want to show this if the

person hasn't already logged in so how

do we determine if a person has logged

in or not well we can come up here to

the top and we can say if user dot is

underscore

authenticated right then

let's say H1 hello world

right

else

do all this stuff and then down here at

the bottom

we

need to end our if statement so let's go

ahead and save this come back over here

now if we hit reload nothing changes

right but if I go to the admin section

and log in

right

now I'm logged in now if I go back to

the home page it just says hello world

and that form disappears so that's

pretty cool that works I'll go ahead and

log out again

now when I go back to the home page it

shows the login form again so okay we've

got this form it doesn't do anything yet

so probably need to work on fixing that

so let's head back over here and go to

reviews.pi file and inside of our home

view let's create some logic let's say

check to see if logging in so if a

person is logging in they are posting

otherwise they're just going to the web

page in which case they're getting

they're getting the request right other

than posting a request so we want to run

some logic let's say if request that's

this guy right here

dot method

equals

host

we want to do something right remember

this method here

on our home page we set this form method

to post right so we're posting the form

whenever we submit it and here it's

saying hey are they is this request

method a post if so hey they're filling

out the form let's do some form stuff

what do we need to do well let's grab

whatever they just submitted so let's

create a variable called username and we

can get whatever they typed into the

form by calling request dot post and

then passing in username

why username because on the form we gave

this field a name of oh first name we

should probably name this instead

username there we go

yeah brain freeze and instead of having

placeholder text say first name let's

have it say use her name that looks much

better save this let's head back over

here and refresh this okay so now it

says username and password I don't know

what I was thinking right so

add background reviews.pi file so our

username is going to equal username and

then we want our password to equal again

request dot post and then use our little

square Brack brackets and pass and

password again y password well because

on our home page here this password

field we gave it a name of password

right

right there so that's what we're looking

out for on the back end here these guys

right here and then we're just going to

assign whatever the person typed into

the form into this variable called

username we're also going to assign

whatever they pat whatever they typed in

as their password into this password

variable so now we have their username

and password we can run some logic and

say hey

is this a real user is their password

correct should we log them in and uh how

do we log them in so let's um you know

authenticate

and we do that by calling I'm just going

to create a variable called user and

then this will call the authenticate

function which is this guy up here that

we imported and inside of here we need

to pass in our request as always and

then set the username equal to username

which is this guy right here which is

whatever they typed in as their username

and we also need to pass in the password

as password which again is you know this

variable right here which is whatever

they typed in as their password so all

right that's pretty simple there so now

let's run some logic and see did they

type in everything does everything look

good let's go if user is not

none

then we want to log them in right so log

in

and then we want to pass in request and

user now if everything checks out here

if the username and password is correct

it gets passed in here and they'll be

logged in and let's create a message

right so let's go message.success and

then as always we pass in our request we

do that a lot and let's say you

have been logged in

I don't know that looks good and then we

want to redirect them somewhere well

where do we want to redirect them let's

just redirect them to the home page so

let's go return

redirect

and then home now we don't have the

ability to redirect yet so I'm going to

copy this and come up here to the very

top of the screen and we need to import

the redirect function there so okay that

looks good and we're good to go now we

can create an error message we could say

hey if something with went wrong and

they couldn't log in let's create a

message so

actually this should be message as there

we go so messages

dot success and we want to pass in our

request and let's say

there

was an error

logging in

please try again

I like the dot dot dots I don't know

it's just me and then I guess we

probably send them back home again right

so okay now we still have this guy down

here and the reason why that is is

because this is all set up to work if a

user is posting so if they're posting

process that else we can come back here

and we just want to send them to the

home page because if they're not posting

that means they're just going they're

just getting that page and in which case

we just want to show them the page so

let's go ahead and save this head back

over here and let's play around with

this first I'll hit reload and I'm going

to type in just nonsense here and click

login and we didn't get an error how

come well we actually need to add that

to our base.html file so if we come back

here to our base.html file

and underneath our nav bar but probably

still in our container let's create some

logic here let's say if messages so if

there are messages

and right away I'm going to end our if

because I forget to do that a lot of

times otherwise

right so then inside of here let's

display the message so

let's go for message in messages so it's

plural and then again I'm just going to

right away end my four

and inside of here we could just type in

the message for now so let's go ahead

and save this and let's see if that

worked so let's type in some nonsense

click this it says there was an error

logging in please try again there's an

air logging in please try again so this

doesn't look great we want to format

this so let's head back over to get

bootstrap and come down here to

components and click on alerts and

here's a little alert looks good we want

one with a little X in it so we can

close it so I'm just going to keep

scrolling down until I find one with an

X in it

oh there we go I'm just going to copy

this code head back over here and inside

of here I'm just going to paste all of

this in

tap it over to make it look nice

okay now we don't want it to say holy

guacamole so I'm gonna get rid of that

and instead of that we just want

to type in the message

right

that's this for message and messages

type out the message so all right let's

go ahead and save this try this again

head back over here

type in some nonsense

there is an error logging in please try

again

looking good

we can now try to log in with our actual

username

our admin guy and it says you've been

logged in and now it says hello world

very cool and that's all there is to it

we can now log in

okay so let's Now log out head back over

our code and the first thing we need to

do is head over to our urls.pi file and

uncomment out this log out thing I'm

going to leave this guy in here just in

case you want to create a separate login

page if you do you'll uncomment this out

and then you'll just come back over to

your views.pi file and create a log out

a login user function and basically just

put all this code in that function but

we're going to keep it the way it is and

do this all on the home page I think

it's a little more elegant doing it that

way so okay now let's create our log out

user function so this is actually very

simple a lot easier than logging in and

to do that we just call the log out

function

and then pass in our request now we can

do that log out function because up here

we imported this log out function that

will do all the work for us so that's

all we really need but we should

probably make this look nicer so let's

give this a little message so let's go

messages dot success that's in a request

and let's say I don't know what you have

been logged out dot dot love the dot dot

dots right and again we can just

probably redirect to the home page so I

can copy this guy

and then paste it down so all right

that's all we need now we need to

probably add a link to this in the nav

bar so let's head over to our nav bar

and here's this link now we only want

the logout link to appear if a user is

logged in if they're not logged in we

don't want them to be able to log out

they can't log out they're not logged in

right so that's actually pretty simple

to do let's just do some logic here

so let's go if user dot is underscore

auth

so that means hey if they are logged in

then let's allow them to log out

right else if they're not logged in and

let me just very quickly end my if so I

don't forget

and I'm going to copy this link and

let's create another link inside of here

so if they're not logged in we want them

to be able to log in all right so now we

need to point these somewhere so we need

a Django URL tag and we want this to

point to log out

there we go and let me just copy this

guy come down here and this one will

point to home because if they're not

logged in going to the home page will

show the login screen right so we want

to point them to the home all right

let's go and save this head back over to

the website and hit reload see if that

worked and we get a logout link when we

click it it says you've been logged out

and it redirects to the home login

screen and now we get this login link we

can try some nonsense that doesn't work

hey there was an error that's what we

want to see we still see this login link

if we log in

the login link changes to a log out link

and we're logged in and we can log out

and we can log in and it's good fun

all right so I'm gonna go ahead and log

out because now we need to register and

registering is a little bit more

complicated than logging in and we're

actually going to create a Django Forum

to handle that for us with logging in we

built the form ourselves by hand and

that's fine when it's basic like this

but the registration form is going to be

more complicated because we wanted to be

able to do a sort of logic type things

like if they type in a password that

doesn't follow the password rules you

know your password needs to be so long

it needs to have letters and numbers and

special characters and so we need to be

able to account for all of that we need

to be able to ask for a password twice

when you're registering so you enter it

once then you have to enter it a second

time to make sure the two match up so

that it's you know you've written it

correctly so that's a little bit more

complicated than a basic form like this

guy right here on the screen so we're

going to create a Django form for that

and it'll take care of it all for us so

there's gonna be a little bit of copying

and pasting because it's a lot of code

but I'll give you a link to my GitHub

where you can just copy and paste it

straight from there and that should be

piece of cake so let's get started doing

that

okay so a registration and I should

mention before we get going you may not

want to add registration right uh if you

don't want sort of open to the public

then leave this part off you can always

add users by coming into your admin

section here coming over clicking on

users and then clicking add users and

then manually entering them right here

pick a username have a password boom

you're done now you could do that if you

want to open this sort of company-wide

or whatever and you want people to be

able to sign up on their own at the

website then you need to do this next

little section so totally up to you

whatever you're interested in with your

project here but I'll give you both

methods here that way and this regular

registration method so let's head over

to our code and create a registration

page so let's hit up our urls.pi file

and I'm just going to copy this guy and

instead of log out let's call this

register

and it's going to be views dot register

underscore user and let's call this

register

all right that looks good save that

head over to our reviews.pi file and

let's define register underscore user

pass in our request as always

and then let's come up here and grab

this guy and paste him in but instead of

home.html let's call this register.html

and we're good to go there so I'm going

to copy this and head over to our

templates directory right click and

create a new file file save as and call

this register.html

and let's open up our home page and grab

this stuff

and paste it in

and let's say H1 register just for now

and let's go back to our home page and

grab this guy because why type it when

we can copy and paste it all right okay

all right so let's save this and add a

link to this page in our nav bar so if a

user is authenticated if they've logged

in we don't want them to be able to

register because they've already

registered so this should go in our else

block right here and let's just copy

this guy

and let's put it another one in first

and instead of it saying login let's

have it say register and we want to

point this to URL register all right go

ahead and save this head back over to

the website and let's see if that worked

we want to log out

when we're logged out we see there's a

register link we can click on it and go

to this page if we log in

that register link disappears okay and

we're good to go so let's log back out

again head over to our register page and

now we need to build out this page now I

mentioned before we're going to be

creating a Django form for this we're

not going to be hand coding this so that

would be both easier and harder so let's

come over here

to our website directory right click and

create new file file save as and we want

to save this as forms dot pi and in our

forms.pi file we need to import a few

things so let's go from django.contrib

dot auth dot forms we want to import the

user creation form

and you notice the U the C and the f are

all capitalized here and the user

creation Forum does just what it sounds

like it creates users right it does all

the work for us so we also want to go

from django.contrib

Dot auth

dot models we want to import the user

model and the user model is what we've

been using up until now it's what

allowed us to create our super user what

we've been logging in and logging out

with that admin user that all gets saved

to the user model right and that just

comes with Django it's already set up we

just have to import it and that should

be good enough so let's create a class

and I'm going to call this sign up form

and this is going to inherit the user

creation form and that's just this thing

we just imported right

so we're saying hey use that form but we

want to modify it a little bit right so

what we want is to grab let's say

people's first name their last name

their email address now you may not want

to grab their first name last name and

email address but I I suspect you

probably do just because it's good stuff

to have and this is how you do it so

let's define those things we want email

we want first underscore name and we

want last underscore name now we're also

going to want username and password but

we'll deal with those separately in a

minute so first here this is going to be

a

forms.email field

now this forms

we don't know what this is so we need to

import it so from up here we go from

Django we want to import forms

and that will allow us to use all these

forms so we've got an email field we

also want a forms.car field for this and

also a forms.car field or this guy as

well and car field stands for character

Fields so characters and a name letters

email is just email addresses it allows

Django to do regular email address stuff

like if you don't type in at symbol

Django will know because it's using this

email field and it'll throw up a little

error saying hey that doesn't look like

a real email address try again things

like that right so that's cool now each

of these

we're going to give a label of nothing

because we're gonna use placeholder text

so we don't want to actually text above

or below the fields so we can give that

to each of these next we want to give

this a widget

of forms dot text input

and that'll basically say hey the form

field that shows up on the screen that's

a text input field it's just a text box

basically right and inside of this we

want to give it adders attributes right

and this will allow us to pass different

attributes onto the page to style our

form so we're going to be using

bootstrap to style our forms and

bootstrap requires a class of form

control so we can designate that right

here so let's go class and then a colon

and then we can just type in form Dash

control and that's it now we also

probably want to pass some placeholder

text so again we can pass in placeholder

right here

and then designate whatever our

placeholder text should be and this

should just say email address

right so okay that looks good so now I'm

going to copy this

and we're going to paste that again in

right here

but we need to modify it a little bit

before our widget we need to give this a

Max underscore length of something

right so this looks like a capital l

right here it's not it's a lowercase L I

promise you anytime you see an L that

kind of looks swoopy like that in

Sublime Text same thing with this label

here this L there and that L and that L

those are all lowercase L's Sublime just

does that it makes it look weird like

that it confuses a lot of people they

think that's a capital l it's not it's a

lowercase L anyway we want to give this

a max length and I misspelled length

length there we go of I don't know say

100.

right

a person's first name shouldn't be more

than 100 characters long right you

should you could probably make it 50. it

doesn't really matter I'll just leave it

like that uh here again text input we

also want adders with form control for

the placeholder text here though we

should probably change this to first

name

that looks good

now I'm going to copy all of this and

paste it in again right there and this

one will say last name

okay that looks good so I know this is

all kind of scrunched up on the screen

maybe it's hard to read I'll give you a

link to all of this code uh in my GitHub

repository you can check that out after

this little section here we'll push our

code up to GitHub so that you can sort

of see it if you you know want to copy

and paste this stuff or look at it in a

web browser so okay that looks good

there now we also need to give this a

class with a meta of and we need to set

the model

so our model is going to be a user

because we imported that right up here

right we also need to designate the

fields in our form so they're obviously

going to have these three fields we also

want to designate username password one

and password two and remember we need

two sets of passwords so that we can

compare the two to make sure the user

isn't typing a typo or something it's

just a basic security precaution so here

we want to designate a username

we want to designate a first underscore

name we don't want to designate a last

underscore name

we want to designate an email address

and then we want to designate password

one and password two and Django

expects password 1 and password two so

you gotta have them both right so okay

that looks good

so we're halfway done now now we need to

copy and paste a few more things and I'm

just going to paste all this code in

and

the first thing I want to do is

tab all of this stuff over because

sometimes when you copy and paste the

tab gets a little out of control so you

want to make sure these have been all

tabbed properly so you can do it

manually each one like this and I'm just

using the tab button on my keyboard to

make sure that everything is tabbed

correctly even though it looks like it's

tabbed like it may

look like this see these dots that means

spaces have been used instead of tab

sometimes that happens when you copy and

paste things it doesn't look like it did

here but I just want to make sure so I'm

going to do that so what do we got here

well we are basically doing the exact

same thing we did here but we're doing

it down here for our username our

password one and our password two and

that just allows us to add whatever we

want in this case our adders our class

of form control as well as our label of

nothing so if you look through here

you'll see we've got username class

form control widget adders placeholder

right the label is nothing and also this

help text the help text is I mentioned

this a little while ago if you mess up

somewhere if you don't type the right

thing in a field this is the little help

text that will pop up and you know says

uh if we can look at here like the

password thing here it says hey your

password can't be

uh let's see let me pull this back your

passwords can't be too similar to the

other personal information your password

must contain at least eight eight

characters your password can't be too

commonly used password your password

can't be entirely numeric and these are

just different things that can pop up

and Django will pop them up as needed

but they have to be designated here just

to make them look good using bootstrap

right so like I said I'm just gonna

leave all this here you can copy and

paste it from my GitHub account we'll

look at that in just a minute I'll show

you where you can find that I don't want

to type all this stuff out it would take

forever and you don't either so you're

going to want to copy and paste this

this stuff here just initializes all of

this stuff it's basic python class stuff

these are double underscore so

underscore underscore right there's no

spaces here or here that messes up

people sometime and you'll notice we're

passing in the sign up form which is

this guy here this sort of allows us to

take all of this stuff and all of this

stuff and kind of mush them together and

output them onto the screen so okay I

think that looks good before we move

forward let me just push all this code

to GitHub and point you in the right

direction in case you want to copy and

paste this stuff which you probably will

let's head back over to our terminal hit

Ctrl C to break out of the terminal and

let me just add all this stuff to my

GitHub repository so get add period get

commit Dash am and let's just say

registration

we've done more than that but good

enough and then get push

all right now I'm going to turn our

server back on so that's running

now let's head over to github.com

forward slash flat planet and no I do

not think the world is flat I just find

it hilarious that some people do so

that's what my account is and you can

click on this Django CRM Link in

repositories or you could just go to

github.com forward slash flatplanet

forward slash Django Dash CRM the

capitalization is important so get that

right and then just click on website and

let's see forms.pi where is that

ah there it is

and here's all that code so you could

just you know copy it right out

right click copy paste it in boom you're

good to go so okay that's good now we've

got all this stuff we need to sort of

put it into the web page so let's head

back over to reviews.pi file and we need

to import that form that we just created

so let's come up here to the top and

let's go from dot forms we want to

import our sign up

form and it's sign up form because on

our forms.pi file here we named it sign

up form right there so notice the

capitalization capital S capital u

capital F that has to be the exact same

right here

so all right that looks good now we can

come down here to our register user View

and we start playing with this so like

with our login

right when somebody fills out this thing

they're going to be posting it so we

could just copy that right here if

request that method equals post then our

form is going to equal the sign up form

and we want to pass in the request dot

post

so we're basically saying hey whatever

they filled out in that form send it

over to our sign up form and do

something so what do we want to do well

first we need to figure out

is what they typed in valid right so

let's go if

form dot is underscore valid

and Django is doing all of this stuff

for us behind the scenes so we really

don't even care what most of this stuff

is so if it is if the form is valid then

we just want to save it so form dot save

and

what is the form that's this guy right

here which is our sign up form we just

want to save it right so now that the

form has been saved you know when

somebody fills out a registration form

they usually want to fill out the

registration form because they want to

use the site they want to log right in

and start using it so let's log them in

right now so let's uh authenticate

and log in so let's grab their username

and that's going to equal form dot

cleaned underscore data

and we want to pass in username this is

just

this form.clean data takes whatever they

posted on the form and pulls out the

username and assigns it to this username

variable we also want their password

so that's going to be form.cleaned

underscore data

and then password one right because on

the form on the website it will be

password one because let's see in our

forms.pi file

that's what it's called there right

so now once we have their username and

password we can try to authenticate them

so let's go user equals and again we

want to call authenticate and we want to

pass in the username equals username

and the password equals password

why password and not password one

because we took password one and we

assigned it to this variable called

password so that's what gets passed in

there

okay so once that's been done we can log

them in so let's log in we want to pass

in the request and we want to pass in

that user so if it was successful we

want to give them messages Dot

success

and we want to pass in the request and

let's say you have

successfully

registered

welcome whatever and then we want to

redirect them somewhere so let's go

return redirect and let's send them to

the home page right

so again this is if they're filling out

the form if they're posting the form if

they're not posting the form that means

they're just going to the website so

else now we still need that form

so let's set the form equal to our sign

up form you'll notice up here we passed

in the request here we're not passing in

the request because they haven't filled

out the form right they're just going to

the page they want to fill out the form

they haven't done it yet so we don't

have to pass in that post right right so

we do need to pass this form onto the

page so we could do that

inside of this

context dictionary so we put quotation

marks form colon form now notice this

has quotation marks this does not so

this will pass the form into the web

page our register.html page and then we

can do something with it right so let's

do something with it so let's head back

over to our register.html file and let's

add a little line break here and I'm

going to come back to our home page

where did that go there it is and let's

see I'm going to grab this guy so let's

come right up here and before I forget

let's close that div

and you know what we can also grab

this stuff as well

we'll grab that and we need to close our

form tag we also need a submit button so

let's grab this guy

go oh it looks like we've closed our

form tag twice we don't need that

all right uh back over here

boom

instead of it saying login let's have it

say register

okay and we also don't need that there

what is going on

we don't need two forms get rid of that

on the home page okay and that looks

good there head back over here all right

this looks good so we don't need to

point this to the home page we could

just take that out if we leave it out it

will post to itself so you don't really

need that so that's fine we need our

csrf token now we need to add the actual

form and to do that we just type

form dot as underscore P so if we save

this head back over here and hit reload

boom we get this very cool form now I'm

going to copy and paste some more code

here very quickly that you can find in

my GitHub account if you want it

but above this right below the csrf

token I can paste in if there are form

errors then this is a little div with an

alert it looks just like if we go over

to our base.html file there we go this

is the same code we grabbed from

bootstrap earlier it posts the messages

up on the screen right

uh back to our register page it just

does that same thing here and if there

are errors it says your form has errors

and then it Loops through here and it

puts out whatever error is on the form

right so that's kind of good to have

so I'll leave that in here you can copy

and paste it from my GitHub if you want

or you just leave it out it doesn't

really matter all that much but we're

good to go so if we come back over here

and hit reload we see we've got this

thing now if I click on this it says oh

you got to fill this out so let's give

this a try so let's create a username

I'm going to call this uh John and now

this is case sensitive so you'll have to

log in with capital j o h n in the

future so this is going to be John Elder

my email address is John

e4196 gmail.com my password is that and

if I click this again it says hey you

got to fill out that field now I'm just

going to type in garbage here so these

won't match and we get an error because

our views

uh head back to reviews.pi file and at

the beginning at the very end of our

registered user let's copy this and we

need to paste it in again so this will

that should take care of that let's save

this head back over here give this

another try

um now we get a little pop-up so I'm

going to type in my password let's try

this again gibberish here

now it says your form has error to

password field the two password Fields

don't match so that is

uh let's go back to

register.html that's this thing right

here in action so all right that looks

like that works that's pretty cool so

now let's actually register I'll type in

correct passwords here

click register boom you successfully

registered welcome and I can now log out

so let's now try and log in John

you have been logged in hello world now

if I log out and I go to my Dash admin

section and I log in as admin

and I click on users I'll see there's

John and there's admin

uh you'll notice admin is a staff user

he's got a little check mark John is not

John's just a regular user that signed

up on the website they can't log into

this section this admin section if

they're not a staff user thing so okay

very cool I'm gonna log out here head

back over here and we are good to go so

that is registration

and we'll notice if we log in again with

say John

our register link disappears our login

link disappears all we have is a link to

log out which is what we want or we can

go back to the home page which is again

what we want and we're good to go so all

right we are moving right along I think

the only thing left to do now is

actually set up the CRM stuff up until

now this has just been playing around

getting the website up and running we

want to now actually add in the ability

to save and view records to update them

to look at them to do all the fun things

and I think it's time and I'll start

doing that

so to set up database stuff the first

thing we need is a model so let's head

over to our models.pi file and this is

where we Define our model now like I

said earlier it really does not matter

what database you use the code here will

always be the same we're not writing SQL

code here we're not writing postgres

code here we're not writing sqlite 3

code here or MySQL code here this is

Django code it's just pure python that

creates a class that will then abstract

away and create that code for us on the

back end it will create the MySQL code

if you're using MySQL it will create the

postgres SQL code whatever database

you're using it will do it for you

behind the scenes and that's the great

thing about using Django so

um let's just dive in here and Define

our class so let's come down here and

let's create a class and what do we want

to call this I'm going to call this

record now you're going to say we're

saving records shouldn't it be records

no Django will pluralize it for us so

I'm going to call it record uh anything

you want if it's customers maybe you

would call it customer whatever and we

want to inherit model dot model

right and again this is a lowercase l so

is this which you know looks like

Capital but it's lowercase so now we

just Define the things we want so the

first thing I want is a created at field

and this is just going to add a little

time stamp for us so to do that we'll

call models

dot date time field and we just want to

set auto underscore now

underscore add and set that equal to

true so Django will just anytime we

create a new record it will just slap a

timestamp on there of when it was

created just automatically and keep

track of that for us if we ever want to

know when a record was created sort of

useful I always do that for almost every

model I ever create because even if

you're not going to use it you might

someday want to know when a record was

created and it's just a really easy way

to do it automatically so now let's

designate what we want to save we

definitely want to save a first name

we probably want a last name

let's go address

and then City

state

zip code

you know whatever you want if you wanted

their email you could do email

leave that off

um

if you wanted well let's let's put it on

let's be crazy email equals and phone

equals and maybe we'll put

these two up higher right after last

name maybe so we've got a fair amount of

stuff here right so what do we do now

well we need to designate what these are

going to be so this is going to be a

models.car field and again that stands

for character field and we want to set

the max underscore length

to I don't know what's let's say 50

right so I'm just going to copy this and

again this is a lowercase L I know it

looks Capital but uh it's not so let me

just pop all of this stuff in here now

we can change these Max lengths for

instance maybe your email address might

be a little bigger put that at 100 it

really shouldn't be uh a phone number is

like area code three digit code

and maybe there's a one so I mean I

don't know that at 15 or something that

should be fine your address I don't know

maybe 100 City characters are never

longer than 50 state is more like

probably what

yeah 50 unless you're doing like

abbreviations like NV for Nevada IL for

Illinois but ah we'll leave it at 50.

and the zip code I don't know let's put

that at 20. now some people want to do

like number fields for zip codes but I

leave it at care as car field because

you're never going to do math on a zip

code even though a zip code is a number

in some countries zip codes have letters

in them too right so I don't know in

Canada I think it's like 26 H 597 or

something you know same thing in grade

Britain a lot of countries use uh

letters in zip code so we're gonna leave

that as car field so that's pretty much

it now we can Define

underscore underscore Str underscore

underscore pass in ourself

and then here we can just return

what we want to show on the screen if we

just access one of these records so I'm

going to create an F string

and inside of here I'm going to pass

self DOT first

underscore name

and we'll do it again and we'll go self

dot last underscore name so if you just

call one of these records

in the admin area or on a web page it

will return the first name and the last

name right so that's good that's a good

enough representation for us for now and

uh that should be good so go ahead and

save this and this is it this is all you

have to do to create a database model in

Django you don't need to know any SQL

Django will take this and convert it

into the SQL but to do that we need to

make a migration and push that migration

into the database and we did a migration

way back at the beginning of this course

because Django by default has some

database stuff that needs to be pushed

into the server into the database

migrated into the database and we did

that using the migrate command watch

back to the beginning of this video to

see that again we need to do that again

but first we need to make a migration so

let's head back over to our terminal and

we're getting oh we got an error it

looks like here on line four which uh

yeah this should be

models.model right here

is up here at the top we're importing

models so models.model save that that

looks good always nice to check in with

the terminal before we get going and

okay it looks good now now Ctrl C to

break out of our server and let's create

a migration let's go python manage.pi

make migrations and this is plural we're

making one migration but the command is

still migrations uh so keep that in mind

hit enter and boom it's created a

migration and we can look at this

migration if we want it's zero zero one

underscore initial dot pi and it's in

our migrations folder so if we head back

over here and here's our migrations

folder if we open it boom yeah sure

enough there it is here's our migration

and this is what Django has done it's

taken the stuff from our models.pi file

all of this stuff and it's created

a migration

and you'll notice here's our created at

first name last name email phone address

city state ZIP it's also given us an ID

now this is very useful Django does this

automatically as well it assigns a

primary key to each record so it will

take care of all that for us we don't

need to Auto increment anything we don't

need to designate something as the

primary key that's what this ID field is

and you'll see it kind of tab over here

it's set as the primary key right so

that's really cool and that's pretty

much it this is our migration so now we

have this migration we need to push it

into the database into our mySQL

database and we do that on the terminal

we just go python

manage that pie migrate

which we did this command earlier at the

beginning of the video with that initial

migration and boom it's done so you

could probably look at this in the MySQL

workbench

if you want you can come over here to

elderco and click refresh

and you'll see

website record

now exist in our table

right

and if we click on it we see it has the

created at first name last name email

phone address city state and zip code

very cool boom done right that's all

there is to it so very very cool and we

can now start using this thing and

to do that let's head over here to our

admin section and log in there just to

see and oh gotta turn server back on

so python manage.pi run server

okay now when we head back over here hit

reload we can log into the admin section

and you would expect to see that new

records model listed here but it's not

we have to actually add it so we can do

that really easily just come over here

let me close this migrations folder and

we want in Min dot pi and from here we

just need to import that model that we

created so let's go from dot models

import record

right and that's because our models.pi

file we called that record right so from

dot models models.pi import this record

right there we go and then we need to

register this on the admin section of

the site so we just go admin Dot site

dot register and pass in that record

save this head back over to the website

hit reload and boom now our records pops

up and you'll notice it's records it's

pluralized it like I said it would and

so if you named it records when you

created the model it would be records

with two s's right

which is weird but that's why we only

put it as record in the model when we

created it so we can click on this guy

and you can see there's no records right

now I just want to manually add a couple

so we have something to work with pretty

soon here we'll create a form on the

website where you can add them there but

for now I'm just going to create a

couple so let's say first name John

Elder say John at elder.com that's not

real one on one two two two three three

three three my address says 10 West

Elder Street uh Las Vegas

Nevada

89137 we can click save and boom there

it is so if we go back to this main

thing click on records again there's

John Elder very cool so let's add

another one just we'll just add two for

good measure and this is going to be

Mary Smith

her name her email is Mary at smith.com

her phone is six seven seven seven seven

six six six five five ah whatever her

address is uh 27 Mary way right in

Chicago Illinois 60610

whatever fake data and there's Mary

Smith

so very cool

now we want to be able to view these

things from the website so let's head

back over to the website I'm still

logged in as admin and we want these to

show up on the home page when a person

is logged in we don't want this stuff to

show up if they're not logged in but if

they are we want to show up there so

let's head over to our code and start to

build this all out so let's go to

reviews.pi file and let's play around in

our home view right here so let's well

first we need to import that model up

here at the top so let's go from dot

models we want to import record

right so right at the top of our home

view let's grab all of the records that

are in the table right now so I'm going

to create a variable called records

and this is going to be a record

dot objects

dot all so this will just grab

everything in the table and assign it to

this records variable now we can pass

that in to our web page right so let me

copy this and let's come down here

this stuff is still if a user is posting

We don't want to mess with that but if

they're not posting the form to log in

it means they've already logged in and

we want to view the page so here we'll

just pass in records colon records

all right so let's go ahead and save

that and now let's head over to our

home.html file where'd that go there it

is

and we've already got this set up to

where if they're authenticated we want

to say hello world instead of that let's

say uh Records for now we'll probably

get rid of that but for now let's just

say that

and let's run some logic

so let's go if records

if there are records we want to do

something and right away I want to end

my if so I don't forget now what do we

want to do well

we likely have lots of Records we're

pulling everything out of the database

there's probably more than one right we

would expect so let's Loop through them

all and put them on the screen so let's

say for record in records

and again right away I'm gonna end my

four because if I don't I'll forget now

where's this records coming from well

that's just this thing right here that

we passed onto the screen which is

actually

this thing which is all of the records

from the database table right that we

just created from our model so okay so

for record and Records let's just print

out

the record

and we can

give a little line break here

between each one

and okay so let's

see what this looks like so let's hit

reload and we see John Elder and Mary

Smith why is it only putting John Elder

and Mary Smith where's the rest of the

stuff well you'll remember right back

here where we defined our model that's

this stuff right here we've told it only

to return first name and last name if we

just call the record so if we call a

record it's going to return first name

and last name all the rest of the stuff

is in there it's all packed in there we

just have to pull it out explicitly if

we want which is what we want to do

right you don't want to spill out

everything like this so to grab each

specific item we would call record dot

whatever so record DOT first underscore

name

and

let me just come through here and make a

few of these so this would be a record

dot last name

and I'm just gonna paste a bunch of them

in here and just look at our model these

are the things so next is email

let me close some of these so

this will be a record email then we want

phone

probably and you could put these in any

order but I'm just gonna go through and

put them in the order we have them here

uh let's see this is gonna be address

then City this is very exciting work and

copy paste copy paste City

state

and finally zip code

we could also do

let's see what else we have we also have

created at we can output that if you're

curious to see what that is we also have

an ID because Django automatically

creates an ID so let's go ahead and save

this and see now I put these on multiple

lines but in reality the HTML is going

to print it all out on one line

and we see sure enough there it is John

Elder John elder.com

Mary Smith same deal so this is hard to

read

even with a couple extra line breaks

here

still hard to read what we really want

here is a table that you know looks nice

and we can click on and do things so

let's look at that

and to do that we're gonna head back

over to bootstrap and bootstrap has

something called tables and I'm just

gonna search for table there it is it's

in the content section so click on

tables

and here are all the different table

options so to create a table in

bootstrap we just need to copy this

stuff so I'm going to copy

let's see actually let's grab all of

this so we want the table we want the

head which is this first row and each of

these things are each of these columns

and then we want a table body and a TR

so that looks good we're gonna have to

Tinker with this so let's go right here

and paste all this in

there we go uh we also need to close all

those things so let's come down here to

the bottom and grab those closing tags

and we'll just paste all that in

okay

maybe tap that over

so this is our table head and so the

first thing is going to be name

and we'll smush the first and last name

together for one name and then after

that it's going to be email

then phone

then address and we're going to need a

few of these so

after address is City

then state

and zip code

then we probably want the created at

maybe

and then ID

so let's save this and just refresh to

see if that looks okay

and we're getting smooshed in here so

we'll we'll have to play around with

this a little bit

for instance I guess we don't really

need this offset

centered thing so I'll take I'll take

that out

and that out

so now okay stretching all across that

looks better the name email phone

address city state ZIP code created at

an ID all right and I think we can take

credit I think we need to take out that

records thing for now

it's just annoying

okay so now we need to

put all of this stuff

inside this table so I'm just going to

grab all of this copy it and paste it

right in there

and this TR

I'm going to copy this it stands for

table row so

that will go here

have all that over and then let's close

the table row so we can get rid of that

one there

so for each record it will Loop through

here and create a new row a

table row with each of these things now

the actual columns we designate those

with TD tags and

closing TD tags so again I mentioned we

want a first name and last name in the

same column

right I think that makes sense

and then for the rest of these we just

give them a TD so I'm going to copy and

paste

like that very quick and then same thing

here we want to close our TD tag oh let

me just sort of

paste this in

that's pretty fast I got skills

okay so let's go ahead and save this and

refresh and see if that all matches up

and okay looks like it does name John

Elder notice how we put both the first

name and the last name in the name

category you could have a you could have

a column for a first and a column for

last name if you want I don't know I

think this looks better

uh name email phone address I'm just

checking to make sure everything lines

up looks like it does okay so we're good

to go so now we want to modify this

because this does not look great right

so uh bootstrap has all kinds of cool

things you could do so just come through

here and look and see what you like now

striped Rose I like that that looks

pretty good so to add that we just add

this table striped class to our our main

table class so if we come back up here

and go to the top here's our main table

class we just inside these quotes add

table striped save this and back over

here hit reload and okay now they're

striped we only have two records so

there's only two stripes but you can

imagine it looks better uh what else we

got uh let's come through here

different types of stripe uh hoverable

so when when you go over it's it hovers

I think that's cool let's do it up so we

just copy this table Dash hover

and again we just paste it into the same

spot we give a little

space there and paste it in space and

paste all right so let's come back over

here hit reload now when we hover

it changes color very cool what else we

got here

active tables no we don't need that

uh what else table borders I like

borders

because otherwise

it looks incomplete to me so let's add a

border again

space and paste I'm going to run that

into the ground catchphrase

all right so now we've got that okay

that looks better

what else

we could make it into a small table

right giving it a table SM command I

don't know that I want to do that but

let's take a look space and paste

I'm easily amused if you didn't figure

that out so if you hit reload boom it

just scrunched together I do not like

how that looks so we're gonna take that

out

save that come back over here hit reload

much better I like space space is good

uh you can have dividers man

vertical alignment

whatever you like play around with all

this stuff

we can change the color of the head too

dark I like that to do that we give a we

give our table head tag this class

so let's copy this

and find our table head tag

and there it is so space and paste

save it and back over here

reload and yeah I like that that looks

good

and now we're moving right along so yeah

that was pretty easy so now we need a

few different things right we need the

ability to add a record on the web page

we also need to and the ability to click

on one of these and go somewhere and

view the record on its own we can do

that we also want to edit those records

probably when we click on them and view

them as their own on their own so we

need to do all of those things so that

is up next

so yeah let's make this ID clickable so

when we click on it you could do the

same thing for the first name if you

want have it clickable and then let's go

to a separate web page where we can view

just that record right so let's head

back over to our code hit our urls.pi

file we need a URL for that so I'm just

going to copy this last guy here and

let's call This Record because we want

to look at specific records and now we

want to pass something we want to pass

an integer as a primary key right and

you'll see what this is in just a second

we want to point this to views dot let's

call this

I don't know customer underscore record

and let's point this to record

go ahead and save that now head back

over to reviews.pi and let's come down

here and let's define customer

underscore record

we want to pass in the request

we also want to pass in that primary key

what primary key well if we go back to

our urls.pi file

that's this thing right here right so

this will essentially look like uh you

know localhost

colon 8000 forward slash record forward

slash two right and the reason why is

because that two

will be the primary key it will pass

into the view it'll come in here then

we'll take that to or whatever and we'll

pump it into the database and say hey

return record number two right so we

know

for instance that Mary Smith is two and

then Django will return Mary Smith's

record so that's just a very quick and

easy and normal way to look up specific

records from a web page so let's head

back over here

and let's build this guy out so we

probably don't want everybody in the

world viewing these records you we

probably only want you to be able to see

them if you're logged in so we can check

right here if you're logged in or not so

we could go if request

dot user

dot is underscore authenticated

then let's look up that record so look

up record

how do we do that well I'm going to

create a variable called customer

underscore record

and we're going to set that equal to

record

dot objects

dot get and we want the ID to equal PK

which is that number they got passed in

with our request right and the ID of

course is the ID from our migration

this guy right it's our primary key

right they're unique everybody's record

has a unique primary key so you'll

notice this lookup thing here if we come

back here

to our home page we we looked up

record.objects.all to get all of the

objects to get a single object we call

record.objects.get and then pass in the

ID that we want to get and then it will

take that record and assign it to this

variable that we can then pass on to the

web page and view on the web page in the

same manner we've done other things like

that like here and here all right so let

me grab this guy and just copy it and

paste it underneath here instead of

going to register.html we want to

probably go to what record

that HTML and instead of passing form we

want to pass the customer record

so boom

and boom

okay

now

that's if the user is authenticated if

they're not then let's create a little

message and I'm just going to come up

here to one of these other messages

and copy them paste them in

make sure the tab correct they're tabbed

correctly and let's throw up a little

message that says you

must be logged in to view that page

and then we'll redirect them to the home

page

so okay let's go ahead and save this now

we need a record.html page so I'm going

to copy this remember Django is always a

three-step process when you're creating

something you need a URL you need a view

and you need the page so this is the

view we already did the URL now we just

need the page head over to templates

right click new file file save as and we

want to save this as record.html or

record.html

and then let's grab our

maybe our register page I just want to

copy these things here

very quickly our block tags

foreign

let's just say uh

customer record

for now we'll change this in a second I

just want to make sure this works for

now

and there we go so let's give this a try

so let's head back over here and let's

go to record slash one and what we do it

says customer record good now if we're

logged out and we go to

record slash one

it says You must be logged into the Via

this page and it sends us back to the

home page all right

so let's log in here

now we want to make these clickable with

a link so how do we do that so let's

head back over here to our home

and I've noticed that the login screen

was different so let's go back to our

register page and let's grab this div we

took it off a bit ago so this entire

table would fit but down here in the

login we probably want to put it back so

let's save this now let's just test that

real quick log out okay now it's