Press "Enter" to skip to content

Using templates – Go Lang Practical Programming Tutorial p.17


what’s going on everybody welcome to
part 17 of our go language tutorial
series in this tutorial what we’re gonna
be talking about is combining basically
everything we’ve learned up to this
point adding a little bit more to our
HTML template and getting our first kind
of proof of concept of our web
application project news aggregator
thing okay so up to this point we’ve
kind of we’ve kind of got like these two
separate scripts and I just kind of want
to show them both before we in the end
basically what we’re going to do is
combine them okay so in the previous
tutorial this is the code that we wrote
to just kind of exemplify how we do
templating and go and then it previously
what we’ve done is made this aggregator
script basically right that visits the
site map of sitemaps grabs the sitemaps
visits those sitemaps grabs the titles
the keywords and the locations of those
articles from every sitemap which is
there’s like a bunch of sitemaps and
eats each sitemap has some values it’s
almost about 1500 articles basically so
anyway we’re gonna combine these two
things together now so what I’m going to
go ahead and do is like inside like our
program itself is going to be this web
app so I’m gonna keep this as the main
function and then basically what we’re
going to do is kind of combine we’re
gonna bring the news aggregator over to
the go web app so the first thing that
we want to do is is we want to modify
the new zag page struct because
basically what its gonna take is we can
still pass the title but news is not
going to be a string news is gonna be a
basically it’s gonna be a map where the
map where the key is a string and the
value is going to be a news map value
also we’re pulling in format net HTTP
HTML template we basically need to bring
in io util and the XML
versions so grab this and again if you
don’t have either of these two scripts
that’s totally fine you can go to the
text-based version this tutorial then
this part 17 and just everything is
there that you that you need so yeah so
anyway copy io util coming over here
chasing that in and then we’re also
going to grab the xml encoding cool okay
now what we’re going to go ahead and do
is we need the the news map struct we
need let’s look over here probably
we’re gonna need news we’re gonna need
sitemap index and news maps so i think
we’re just going to take all three of
these so site map news and news map let
me just make sure yeah yeah okay so i’m
just going to throw this down here
actually let’s throw it right your site
map news news map new zag page cool okay
once we’ve done that what we’re gonna go
ahead and do is we can take let’s take
basically our entire main function is
gonna be we’re going to put that in the
news AG handler
so rather than and then basically p will
be our news map basically our news map
value our news the news variable will be
news maps so let’s take all the code in
the main function basically to here we
don’t need to do this part right so
we’re just gonna take this block of code
here all of that copy that and go over
here and then inside the new zag handler
at the top before here we’re just gonna
paste this will be tabbed over whoops
and now i think that’s fine this might
this this will probably screwing
something up that’s okay let’s do rather
than that now it’s news maps and news is
now
use map and let’s see we don’t want that
err we don’t need that anymore we don’t
need a print okay well we can print the
output here that’ll be fine just in case
we do hit some errors might as well this
won’t make them explicit and see them
[Music]
okay
I’m gonna that’s gonna be giant if we
printed that out I kind of want to run
it before we do our template but that’s
okay let’s just build the template first
and get into it so new zag template and
I’m gonna go ahead and we can leave the
title there and then what we’re gonna do
is we’re just gonna build a table so the
table that I’m gonna use is basically
like to build a table you’re gonna have
some table tags and historically when
I’ve done things with web development
I’ve had once in a great while someone
that complains that hey you never
covered what hTML is if you don’t know
HTML there’s like a billion HTML
tutorials out there so find one if you
want to learn HTML super simple though
it’s just tags okay that’s that’s not
complicated so you should be able to
learn it on your own no problem
so then T head so table head and then
you’re gonna have whatever the those
columns are so and then these would be
table headers so slash table header and
then we’re gonna say you know basically
you’re gonna have the the article title
and then we’ll have keywords for that
article so title keywords and now what
we’ll do is title will actually link to
the article so that’s what’s going to go
on in the head now what we’re gonna do
is in the body so tea body what we’re
gonna go ahead and do is add some table
rows so TR TR and basically here you’re
gonna have to well actually let’s do
this
TR like this and then you would have
table data okay and in this case table
data is your column so table data table
data and it would be like a title and
then here would be like a keyword
something like that okay so what I’m
gonna do is now I’m gonna save that and
I’m gonna try to run this because I
still I’m like skeptical as heck about
getting an error so let’s go ahead and
go run go touch go and I’ll allow it
yeah and then it was /ag for the page
it’s probably gonna take a long time to
load that because pretty not the whole
map what I didn’t mean to do that I’m
not sure why it printed out that whole
map um I’ll have to go back and look at
that oh my gosh uh why did it do that
why did it print the whole map out I’m
pretty sure we just built the table we
just did title why did it do the entire
map why did it do the entire map because
we never asked news bat news map to run
like that do we know that shouldn’t have
done it
why oh okay we didn’t change the
template okay that makes a little more
sense okay so okay yeah it all
definitely passed cool so we forgot to
change this so this needs to be news egg
template to plate got HTML so let’s save
that and let me let me go ahead and
rerun that mm-hmm
so anyway loading this page is gonna
take a while so it’s running all that
code which is something we’re gonna talk
a little bit more about in the coming
tutorials but let me see if we get a
table this time still gonna take a walks
is still gonna pull that information
cool okay so we have a really basic you
know title keyword this is a simple
table heel here here
heel is a table now what we want to do
is populate this table so it looks so
what I’m gonna do is is we basically
need to iterate over all this this this
data so what I’m gonna do is come into
our HTML template here and basically we
want to do is we want to iterate as many
table rows as we have data so so the way
that we can do this is just I can go
we’re going to use a range
so we’re gonna use range but it’s kind
of wonky um as far as I can tell I think
this is this is like custom go
templating I don’t really think they’re
using something like like in in Python
you use Jinja templating which is kind
of separate from Python but this I think
is with go so anyway if anybody knows if
this was like custom made for go or if
this came from somewhere let me know
because it’s weird that you have to
switch things around but anyways you do
so we’re going to still use range but it
works this way range and then you’re
gonna say okay key
don’t forget your dollar sign that’s how
you’re gonna specify a variable that so
that you could use it later so key and
then value because that’s what’s gonna
be returned and then colon equals and
then again it’d be dot news cuz that’s a
value that was passed here and then what
you would do is I’m just going to make
some space but you would then you know
do things right and then you have to end
the range at some point you have to end
you know what is what are all the things
that you’re gonna do in this range so
then you just do end okay so the things
that we’re gonna do are make table rows
and stuff and that’s why you have the
ability to add logic like this so that
you can throw in both HTML and you can
throw in you know variables so now we
can use we can do like key right so that
would be like your title will just be
key and then the the keyword column
that’s going to be your values so it’ll
be dot or yeah value but value had two
things right because remember value is
corresponding right that news is the
news map which has keys which are the
titles then the values we’re going to be
keywords and locations right so if we
want the keywords we need to do value
dot key word and the reason why we’re
having to do that is like I said before
it’s basically responding you know here
keyword it’s a news map struct because
remember the
Mapp is string for four keys and then
the value was a news map value and all
that anyway so yeah that’s why we use
dot keyword here okay
now interestingly enough like obviously
this will be the title but then but we
kind of want that title to be a link so
now let’s convert that to a link so a
href and then I’m gonna say target
equals blank so it opens a new window if
you click on it and the the actual URL
is the value dot capital L location and
then we come on the other side here and
just close off that tag it did it for me
now I’m confused
cool I think that’s right anyway okay so
now we have all of our table rows in
here and then end and then let’s just
kind of clean this up a little bit cool
so so yeah so that’s a little more
complex use case of templating and go
where as you know to do this to do it
like a range and then append that to the
go code like if you’re trying to do that
in line and go at least the way I’m
thinking that I would do it would it
would be kind of messy whereas this is
so much cleaner and it’s just so much
more concise and if you were to read
this I think it’s much more legible okay
so let’s go ahead and break the web
server and then I’m gonna go ahead and
restart the web server I will allow it
and then we’ll head to the AG page and
this might take a while for it to run
it’s got a purse all those sitemaps cool
and now we have the entire table which
is massive it’s just absolutely massive
but as you can see you’ve got you know
your keywords over here and then you’ve
got the titles here and then if you were
to click on that title it would take you
to the Washington Post
where you can read articles with their
paywall interesting paywall I’m gonna
wager that’s really easily defeated see
if we can’t get the first I’m trying to
get the first few lines of anyway I’m
gonna wager if we were to view the
source here
yeah yeah yeah
yeah pretty sure we were just looking at
it I’m pretty sure that is the article
text I wish I could see it some have
begun to realize but I can’t see the
main article text anyway that’s that’s
not this tutorial I’m gonna wager it’s
all there though anyway so so now we
have this table obviously this is a
gigantic table it’s got so much freaking
information in it
and all that but nonetheless finally a
proof of concept now what I’m gonna show
basically again just kind of like the
last tutorial the bulk of the learning
is now over I’m gonna clean up this
table though so anybody who wants to
stick around and see a better way to
quickly and easily make a nicer tabor
table feel free to stick around
otherwise like I said we’re done you can
leave so so to make this table a little
better and also to make it make our web
app much more functional we can
incorporate something called data tables
let me just pull that up real quick data
tables you don’t actually have to come
here you’d have to visit this but this
is what we’re gonna be using and
basically woke it all it is is just like
a nice JavaScript plugin for tables that
basically end up looking like this so
yeah there’s a little bit of hover you
can also do searches so like accountant
or something like that it’s just like
instant search because all the data is
there obviously it’s no different than
doing like control theft right now in
our table sorry I just banged the mic
anyway yeah so and then you can sort and
all that kind of service it’s pretty
cool and it’s super cheap to just throw
it on top of your tables so that’s what
I’m gonna do here if you want all the
code is in this tutorial as well so you
don’t really need to you don’t need to
like type along with me here so I’m just
gonna run through it really really quick
so so the first thing that we all we
really need to do first of all we need
to have we need to bring in the scripts
that are gonna make this this data
tables thing possible basically what we
need is jQuery itself then we need the
data tables CSS and then we need the
data tables JavaScript all these things
you can get either you can host them
locally yourself or you can just use
them from like a
CDN somewhere so I’m just going to use
the CDN version again if you go to the
text-based version of this tutorial you
can copy and paste the same stuff I’m
about to copy and paste here bang
okay so again yeah we’re pulling in
jQuery then we’re pulling in the data
table CSS and then we’re pulling in the
data tables JavaScript that’s it and
then at the end of our you know at the
bottom of our little code here I’m gonna
throw in a really simple script
basically all it’s going to do here is
any anything with the ID of fancy table
is we’re gonna apply data table to it in
this case we’re hopefully you’re gonna
do this to a table all right so we need
to now give our table the ID of fancy
table so table here and then basically
we’re just going to say ID equals fancy
table and then there are a few other
things that we need to specify or we can
specify the one thing I’m gonna go ahead
and do is just say class for this table
there’s a bunch of different ones but
again class corresponds to the CSS just
for you HTML newbies anyway class will
be display so there’s different types in
again you can go to day the tables
dotnet to learn more about what’s
available to you just showing you a
quick example so class display I’m gonna
go ahead and save that
now let’s rerun our web app hopefully we
didn’t make any mistakes mostly just did
copy and paste so I’m assuming that’s
not going to be a problem
oh cool
do I have this open anywhere okay I have
an old version of it anyway I’ll just
bring that over Hey
oh there goes okay took a while it took
a second to format it interesting anyway
so here is our data table and
unfortunately because there are 10
entries but I can’t quite fit it on my
screen I wonder if I just zoomed out
yeah cool
so anyway as you can see here’s our data
table and it’s just it’s just basically
you can see here it’s 1,500 entries all
that you can sort by title if you really
wanted to you can also sort by keywords
but that would probably be a mistake but
you can also search so for example I’m
pretty sure you know Trump is president
so I bet if we type Trump we’re gonna
find a bunch of stuff on Trump and it’s
like I said it’s just it’s instant so
yeah 250 entries on Trump then of course
just as usual you could click them and
go to the actual article where it’s
probably gonna pay wall me all eyes
don’t know is on okay anyway didn’t
throw me in and either I guess is
probably my ad blocker
anyway all right that is enough for now
what we need to do now is really talk
about the time of this page so load time
1 2 3 4 5 about 5 seconds okay that’s
five thousand milliseconds that’s
horrible
so we need to work on this load speed
now I there’s a couple of things we
could do one thing we could do is just
cash it right and then I would load
pretty quick but the real problem that
we’re having right now is is occurring
you know here right here because
basically what it’s doing is and really
it’s it’s right here the the we’re doing
this totally linearly we’re first we’re
we’re where we go to this site map and
we’re getting all these site maps but
then we’re we’re running to one site map
getting that information waiting for
that response
go into the next one asking for a
response waiting for one getting it
coming back right so that is not very
fast so so what we need to do is figure
out how we can get around that waste of
time now no matter what you’re going to
be having a deal with at least one X of
a Washington Post response time but
there might be ways that we can do this
a little quicker so that’s what we’re
gonna start looking into in the coming
tutorials is how we can get go to go
fast because that’s the whole point
right so anyways that’s what we’re gonna
be focusing on in the coming tutorials
if you have questions comments concerns
whatever up to this point feel free to
leave them below otherwise I’ll see you
in the next tutorial
Please follow and like us:

Be First to Comment

Leave a Reply