what's going on guys john alder here
from coding.com and in this video i'm
going to show you how to output stuff
from the database to the screen with
django
and python
alright guys like i said in this video
we're going to look at pulling stuff
from the database and outputting it to
the screen
but before we get started if you like
this video you want to see more like it
be sure to smash the like button below
subscribe to the channel give me a
thumbs up for the youtube algorithm
and check out cody.com we have dozens of
courses with hundreds of videos that
teach you to code use coupon code
youtube1 to get thirty dollars on
membership puts all my courses videos
and books we want that via just 49
which is insanely cheap okay in the last
video we looked at the django admin area
we added our
events my club users and venues tables
in this video i'm going to show you how
to pull this data from the database
and output it onto an actual web page
itself so we're not going to be dealing
with the django administration area for
the most part going forward
except for to add data and tweak things
here and there from now on we're going
to be looking at how to do all of this
stuff
on the actual web page itself so you see
i've got a page here called events
we've got a couple of events i went
through here and i added
another venue area 41. if we click on
this we can see the stuff
and i also added another event which is
the alien parade
at area 41 i don't know so we've got a
couple of venues we've got a couple of
events
we've got two users john elder and jane
elder
and they are maybe going through the
events or maybe not we're not sure yet
we want to take all of this stuff and
output it onto the screen
from the database so how do we do that
well that's what we're going to look at
in this video so
let's head over to our code and let's
head over to templates and the first
thing we want to do is create an actual
page
to go to right so let's go to events
right click and create new file
and let's go file save as and let's save
this as like event underscore list
that html this is just going to be a
list of the events that are currently
going on
right so then we can come to sort of any
of these pages for instance home
and i'm just going to copy all of this
and paste it in here
and instead of this let's just say event
list or events and we probably don't
want to center this
and okay this will be fine for now let's
go ahead and save this we'll tinker with
this in a bit
so now we need an actual url for this
page let's go to our urls.pi file
and let's create a path and inside of
here we want to point this to like
events so this will be the url localhost
events right and this will point to
views dot
let's just call this all events we'll
create this function in just a second
and let's give this a name of i don't
know list
events call it anything you want and all
right that should
work comma make sure we have a comma
right here above it as well
okay so that's our url pretty simple
there now we need an actual view so
let's head over to our views
so let's create a new function let's
define and this is
all underscore events
and we want to pass in request because
we always want to do that now we're
calling this all events because our
urls.pi file
we pointed to views.all events right so
we need to create
all events so that's what this is now
we want to actually pull the data from
the database in this function so we have
to actually import that
table in our views.pi file so up here
let's go from
dot models import event
so i'm calling dot models because our
models dot pi file is in the same
directory as this views.pi file
you see it's right here so we can call
dot models
to reference this models.pi file and
this event
obviously references our class
event so what we're saying is pulling
all of this stuff
into this view right so to do that we
have to actually query the database
and so let's create a variable i'm going
to call it event list and this is just
going to be event
dot objects dot all
now this will go to the event class
which is
you know this thing and it will grab all
of the objects in that class so all of
the records that are in the database in
that events table
will pull out and we'll assign to this
event list
variable so now we just pass this event
list variable to our web page
just like we do everywhere else so we
return render right
we're just going to do the same thing
like we did right here
pass in that list so to do that we just
go return
and then render and then we pass in our
request as always
and now what page is this well it's in
events slash
event underscore list dot html and
that's just
our templates events directory right
here and remember we named this file
event underscore list
html so that's event underscore
list.html
and then finally we want to pass in our
context dictionary let me put this on
another line so it's easy to read
and we just want to pass in this
variable right so
event list and then colon event list
so now we pass this in so now we can
reference this
on our web page itself so let's head
back over here to our event list page
and we can just sort of
put this on the screen and see what it
does
so this is going to pull all of the
events out of our event table
and put them off on the screen now it's
not going to do exactly how you think
but let's go ahead and save this
and reload our page and see what it
looks like you can see it's just passing
a query set and you can see this is all
smooshed together let's fix that real
quick
so let's head over to our base.html
and right here let's put a
div with a class equals container
this is just a bootstrap container
and let's close it save this come back
over here
i guess it pushes it over a little bit
so you'll notice we've got a query set
here
and it has all of our events softball at
the park and the alien parade
right so all of the data is there but
obviously this doesn't look great so
we need to loop through here but first
let's put a quick link up in the nav bar
kind of forgot to do that so let's go to
our nav bar
come down here to this march link and
let's just copy it real quick
and paste it in and instead of it saying
march let's say
events instead of it pointing to home
let's point it to see where's our
urls.pi file we want to point it to
list events
and we don't want to pass anything so
it's just on its own
okay let's go ahead and save this back
over here reload okay so
we can navigate around and okay that's
looking good
but now how do we sort of get the
information out of this weird object
query set looking thing
well we just need to loop through it so
let's head back over to our event list
and instead of just printing out this
whole thing let's loop through here so
let's go for event in event
underscore list it's just a basic for
loop
what do we want to print out well let's
just print out
for now the event itself
so save this now we also need to end our
for loop we always need to do that so
end
for
okay so let's save this and come over
here and reload
now we see softball at the park and
alien parade so the names of the things
are being smushed out onto the screen
but it's all jumbled together so that's
not great
so we might do something like make an
unordered list
come down here and close our unordered
list and then inside of here
just use an li tag for a list item
and this will put each one on a separate
line with a little dot next to it so
okay that's fun softball at the park and
alien parade so
just that easy we're now printing out
some of the stuff
from our model from our database now
this is just the name how do we get
other stuff
well we can access all of the stuff
let's pull up our models dot pi file
all of the stuff in this event class so
we can call the name the date the venue
the manager the description and the
attendees
so to do that we just reference dot
whatever so dot name
or dot event date so you know we can
pull out for instance the event date so
if we come over here
and go event dot event date this is just
going to print out the date but you can
see just how easy it is to do this
right so let's play around with this a
little bit
i'm going to maybe create an unordered
list for each of these instead of one
big unordered list
get rid of that and maybe get rid of
that
and let's just copy this two three four
five
six and remember exactly how many there
were but we could just come through here
and maybe we pull this one out and put
it on top
without an li maybe just give it a
strong tag or something
make it bold and then inside of here
now let's put a line break after it we
could just play around with this so
let's go back over to our models.pi file
and we want
the date so let's copy that one so event
dot date and we also want the venue
event dot venue
and we want the manager event
dot manager and we want the description
and we also want the attendees now this
is a little bit weird and you'll see in
just a second
what i mean so if we save this and hit
reload now we see softball at the park
and alien parade and underneath each one
the date
the venue and we could play around with
this even more we could say we could be
explicit we could go
date colon and then
venue colon
manager colon
description colon
and attendees colon now this is all kind
of
getting hard to read so i'm just going
to tab it over so we can read it easier
save this now if we hit reload
we see the date the venue the manager
the description
and now look at this attendees it's
this events.myclubuser.none
so what's going on here well remember
the attendees are another model so if we
pull up
our models remember our attendees this
is a many to many field
so that's my club users so in order to
actually access them
we need to tweak this just a little bit
we need to call
dot all right so if we do this
and then hit reload we're going to get
another query set object that has each
of the my club users
jane elder and john elder this one only
john elders signed up
so to get this we need to loop through
this once again
so okay just like we did up here right
we need to do a loop and so let's do it
right here
let's go
for say user in
this
now we can access
user dot whatever so if we save this
and run it we're still going to need to
tweak this
ah forgot to end our block so we've got
a for loop we also need to end the for
loop i usually do that right at the
beginning
when i create the loop because i always
forget as we just saw so we need to end
our for loop
right there so okay let's go ahead and
save this come back over here
now attendees john elder attendees jane
elder
ah that doesn't look great instead let's
go
let's pull this attendees out
and close our li like that
and then inside of here instead of
putting li
let's just put a space so if we save
this
and run and we can tinker with this all
we want we can see now attendees john
elder jane elder we could put a comma
between them we could put them on their
own line
we could do anything we want so for
instance if we wanted to just really
quickly
put a line break do it like that
right or
maybe like that
i'm just playing at this point right
right so okay that's looking good now
another thing i want to mention the
venue
right remember we pull our code back up
and look at our models
this venue is also a foreign key
referencing
this venue class which is up here so now
we can also reference all of these
things as well
through our event class by just
referencing the dot
whatever so for instance the web we want
the url for this
venue we could reference that by coming
up here and calling
event dot venue dot
web so if i copy this let's make another
one of these
and do it like this if we save this now
if we come back over here and here
reload we see the url
is listed in the venue instead of that
saying venue
let's maybe i don't know change that to
venue
url or venue website
save this reload but you get the idea we
can now reference all the stuff in the
venue class
by just calling
event.venue.whatever.web.name.address.zipcode.phone.web
or dot email address
so very very cool just with that one
little thing
on our views.pi file where we pulled in
all of the event objects we can now
for all practical purposes access
everything in our entire database
because
they're all linked together so very very
cool
and just that easy right so now this
isn't looking great
maybe we want to put a line break here
right i don't know
playing around but you can make this
look any way you want
and in the coming videos we'll be able
to click on these and go to each
will give each of these things their own
page instead of just outputting the data
on the screen like this but for now i
just wanted to show you how to
sort of get the stuff out of the
database onto the website
and we could play around with this we go
to getbootstrap.com
click on docs come down to components
click on
cards and then let's scroll through here
and grab
this nice header footer card right so i
can copy this code
and if we wanted to kind of spruce this
up a little bit we could come down here
to our loop
and let's just sort of paste this in
here and instead of this saying featured
we would
want this to say event
so we can copy that and paste that here
let's get rid of that and then for this
the title let's do maybe the venue
copy that put that where the title is
we don't want it to be an li so get rid
of that
and then the rest of this stuff can go
just sort of
right here in this p
tag so
maybe we just grab all of this
through here and just kind of maybe
paste it in here and i'm not sure how
this is going to look so let's go ahead
and save this
and reload it and see oh yeah it looks
pretty good
so you know you could come through here
maybe you don't want these dots
maybe you know we could play with this
out the wazoo but
it's already looking pretty good just as
it is
so maybe if you wanted to get rid of the
dots you could instead
take out all the ul stuff
and instead switch this to strong
so there
there there and
there of course you gotta close our
strong tag
so instead of l i
that and that and get rid of this li
[Music]
and we're just sort of goofing around
here
but these now all need line breaks it's
getting unruly isn't it
let's get rid of this guy description
actually this goes here
okay so i don't know get rid of that
save this i probably made a mess of that
but
okay now it's looking a little nicer
maybe
i don't know which one you like better i
kind of like the old way better
[Laughter]
so let's go through here and undo all of
that
redo save this
come back reload ah i think that looks a
little better
but anyway you get the idea you know
these are really close together maybe we
could do
another line break
to push them apart a little bit yeah
whatever but you get the idea just that
easy to sort of grab stuff out of the
database
output it onto the screen and then just
format it however you want to make it
look however you want the important part
is
how we pull it out of the database and
you've seen in this video it's drop dead
easy
and that's really cool so that's all for
this video if you like to be sure to
smash the like button below subscribe to
the channel give me a thumbs up for the
youtube algorithm
and check out codingame.com or you can
use coupon code youtube1 to get 30
on memberships pages 49 taxes all my
courses over 47 courses hundreds of
videos in the pdfs of all my bestselling
coding books join over 100 000 students
learning to code just like you
my name is john elder from coding.com
and i'll see you in the next video