Detailed Notes
We are continuing a series of tutorials focused on Spring Boot. The crux of the project is to convert/migrate an old JSP/Tomcat application to a modern Spring Boot application and Java 7/8 to a current version. Thymeleaf is an important piece of Spring Boot applications and we continue to look into it along with adding Bootstrap 5 and connecting a carousel.
You can learn more through our online classes at https://school.develpreneur.com and register for free. Registration will add you to our email list, and you will periodically receive coupons for courses and notifications of the latest releases.
Transcript Text
[Music] well hello and welcome back we are continuing migrating our application over and this time around we are going to take the login page basically we're take our homepage and Spruce it up as it were now currently if we go to our homepage of just slash it gives us just hey your server is running uh so let's go here and that's because of the rest controller uh let's do this is going going to be let's call this heartbeat now oh let's see I do heartbeat we're going to call him heartbeat just because so now we've got that if we go to our hello controller we had before is we had a greet but now what we're going to do is we're going to have a homepage this is going to be the uh let's call it homepage why not and for now we're going to do very simple we're going to just make our come in here and we're going to return uh we called him login before so let's call uh let's call him homepage now and and we're going to convert this thing over like we did last episode around so if we go to log in we're going to rename him me call him homepage. HTML well let's just call him home okay so we have home HTML this is where he's going to go so let's see what this is going to look like so we need to take a couple things we're going to have to yank out our gstl stuff we're going to grab our that we will just use from this guy here and we'll need our time Leaf designator so we're going to come over to home and there's our header let's jump down to the bottom and that's going to be our [Music] footer and let's start with that I'm not exactly sure what all I've got going on here so let's see what this looks like so now if we run it boom so we actually have although it's not doing real well we do have somewhat of a home page let's get this cleaned up a little bit so what this used was a Carousel and I'm not sure if this Carousel is going to work now let's see do we have oh we're not bringing in I don't think we have the carousel stuff being brought in uh let's go look uh we do have Carousel so we might be [Music] okay I think this is uh okay so let's go look at this a little bit do a little uh background size cover let's see if we've got something messed up there uh oh there it is that's what it is so we have here oh this is our PNG so let's see do we have those in so we've got some images that we were we blew up so if we look here uh screen 4.png I don't think I see that oh there it is okay so this actually needs to be now obviously some of this is stuff you aren't going to do but if you're like me and you were using a lot of the older P you know the older approaches to this then you're going to get some things like this where you're going to get extra code lines in that it doesn't like and like we saw here it just sort of blows up it doesn't know what to do now oh we're getting better still got some stuff that's a little bit jacked up uh now we're going to figure out why that is if we go to my Carousel then let's see if those all seem okay it probably isn't getting oh there you go uh looks like it's not getting those images so let's go back here this is where we're going to have to have a little bit of work CU what we want to do now this is because this is in a style sort of a pain in the butt however let see if I get something so let's try this let's try to just get an image first let's keep it simple um and we will just put it right at the top here and let's just do screen one let's try Image Screen one. PMG PNG is that where's that yeah IMG there so let's see what happens if we put that there troubleshoot this thing a little bit so now there we go and it is giving us an image so that image came through so here we go uh let's try uh I think here's where this is where our problem lies is it's double quotes versus single quotes So we want that to be because we do want it to know that it's a URL it just needs to be there so would a doubt look at documentation for wh whatever it is you're doing for example here we're doing a style for background image so if I take that let's see what we got now we're seeing a bunch of images all stacked up and so it is probably not bringing out the it's probably not handling the carousel properly so let's go look at a carousel I wonder if bootstrap five has a carousel built in we might be able to use it that way and if so yes it is they have a Cel so that is what we're going to jump one into probably next time actually let's look at this real quick um I don't know if this is with let's see what happens so that's what we had if we look at what it should be uh if we've got a did we have a next I don't know if we had a next before if we had our little buttons let's see did we I look yes we did so uh that means what I can probably do is take this let's take that first one uh where to go first slide label placeholder text image okay so let's see what does this look like whoop oh cuz it's an item active Okay so before we had each item so we have an enter there we go the enter and we have an active so active uh it's going to be like this but we don't need active we do need its style is still going to be this image and then we want this to be this is what uh yeah Carousel item and then there's an image source oh let's look at this uh let's see all let's do this let's see so that's what he looked like this is what he should look like now wh let's do this uh this is the image active there we go let's do this we're going to do actually let's take this first and then we'll start replacing stuff that's the easy way to do it so let's put this at our top oh see they do have it uh Carousel slide container there's a carousel so if we look [Music] here if we look at the [Music] indicators they are probably a little different yep so this is going to be data Target data BS Target is just going to be this and I do have a fourth 0 one two three and he doesn't really need a label um but let's give them one anyways so there we go so there's my indicators and then what I want is I've got let's take the text which is going to be in the caption area and let's pull that for each of these so we're going to come in here we're going to pull our text and pull that over and this one and then we're going to need to duplicate that item and there we go so let's pull that in so we can see a little bit so now if I do my source here let's change it to a straight up and let's see what happens let's see if this even works we may have a broken some broken HTML but this maybe a quick way to get us wh so now we have it we've got some text we do have some buttons and we do have some slides so let's see so what it comes down to here is uh let's take this and that's going to be screen two this is going to be screen three it's going to be screen four oh we need the previous and the next are going to be because they are my cariso and let's put that there and let's see so now if we take this let's take this crap and get rid of it that and now let's rebuild it and maybe we have managed to add a carousel in here and let's see how's that look now we don't have we need to darken it uh cuz somewhere and here is there we go and then it just go so we need it to Loop is one of our things and uh let's see previous next let's see can we make it let's go over here and so we can make it dark if we want which is probably what we want uh let's see so it's going to be and we want it to be let's see what is it doing [Music] here oh let's try that uh uh I'm going to play around with this so we probably aren't going to go too much further in this uh let's see this was on the uh class Carousel where is it at class Carousel slide dark Carousel dark and let's see what we got here and then we'll so there's a couple things we're going to need to do still on this is oh here's a nice thing is it does give us okay now it ends up sliding all the way off so we're going to have to work on that but if you notice at the dark it does now give us uh dark text which we probably don't need dark what we actually want to do is we want to darken the images which goes back to what we had before if we go look at home I think it was home well no not home log in is that this is what we needed is that we need to get that into the uh item active let's see if that works let's just try that real quick okay let's see what that looks like now and it does not like that so we're going to play around with that a little bit uh let's go back to there okay and we will see what we can do with this uh see if we can do a little bit of work wh and get these things cleaned up but as you can see we can pull stuff over uh got a little bit of a uh introduction to bootstrap five because that's what we're moving into we've shifted some stuff over if we kept it that would have been great these are kinds of things you have to deal with when you're migrating updating an application that being said hope you enjoyed it as always shoot us emails at info@ developer.com or leave a comment and we will talk to you next time so go out there and have yourself a great day a great week and then we will talk to you next time hello this is Rob with develop andur also known as building better developers wanted to announce that we have school. develop or.com feel free to check it out if you like any of this information any of the content that we've sent and you would like to see more you can come out you can enroll for free we have free courses we've got places for you to get better at just learning a technology or how toos you can work on your business skills we can help you with becoming a better developer as in coding and things like that a lot of the stuff you've seen on YouTube we also have out at school. develop andur we have it a little more of a educational format and a way for you to track your progress as you move forward becoming a better developer [Music] ER
Transcript Segments
[Music]
well hello and welcome back we are
continuing migrating our application
over and this time around we are going
to take the login page basically we're
take our homepage and Spruce it up as it
were now
currently if we go to our
homepage of just
slash it gives us just hey your server
is running uh so let's go here and
that's because of the rest
controller uh let's do this is going
going to
be let's call this heartbeat
now oh let's
see I do
heartbeat we're going to call him
heartbeat just
because so now we've got that if we go
to our hello
controller we had before is we had a
greet but now what we're going to do is
we're going to have
a
homepage
this is going to be the
uh let's call it homepage why
not and for now we're going to do very
simple we're going to just make our come
in here and we're going to return uh we
called him login before so let's call uh
let's call him homepage
now and and we're going to convert this
thing over like we did last episode
around so if we go to log in we're going
to rename
him me call him
homepage. HTML well let's just call him
home okay so we have home HTML this is
where he's going to go so let's see what
this is going to look like so we need to
take a couple things we're going to have
to yank out our gstl stuff we're going
to grab our that we will just use from
this guy
here and we'll need our time Leaf
designator so we're going to come over
to
home and there's our
header let's jump down to the bottom and
that's going to be our
[Music]
footer and let's start with
that I'm not exactly sure what all I've
got going on
here so let's see what this looks
like so now if we run
it boom so we actually have although
it's not doing real well we do have
somewhat of a home page let's get this
cleaned up a little
bit so what this used was a
Carousel
and I'm not sure if this Carousel is
going to work now let's see do we have
oh we're not bringing in I don't think
we have the carousel stuff being brought
in uh let's go
look uh we do have
Carousel so we might be
[Music]
okay I think this is
uh okay so let's go look at this a
little bit do a little uh background
size cover let's see if we've got
something messed up
there uh oh there it
is that's what it is so we have here oh
this is our PNG so let's see do we have
those in so we've got some images that
we were we blew up so if we look
here uh screen 4.png I don't think I see
that oh there it is
okay so this actually needs to
be now obviously some of this is stuff
you aren't going to do but if you're
like me and you were
using a lot of the older P you know the
older approaches to this then you're
going to get some things like this where
you're going to get extra code lines in
that it doesn't like and like we saw
here it just sort of blows up it doesn't
know what to do now oh we're getting
better still got some stuff that's a
little bit jacked up uh now we're going
to figure out why that is if we go to my
Carousel then let's see
if
those all seem
okay it probably isn't getting oh there
you
go uh looks like it's not getting those
images
so let's go back
here this is where we're going to have
to have a little bit of work CU what we
want to do now this is because this is
in a
style sort of a pain in the
butt however let see if I get something
so let's try this let's try to just get
an image first let's keep it
simple
um and we will just put it right at the
top
here and let's just do screen one let's
try Image Screen one. PMG
PNG is that where's that yeah IMG there
so let's see what happens if we put that
there
troubleshoot this thing a little bit so
now there we go
and it is giving us an image so that
image came through so here we
go uh let's try uh I think here's where
this is where our problem lies is it's
double quotes versus single
quotes So we want that to be because we
do want it to know that it's a
URL it just needs to be there
so would a doubt look at documentation
for wh whatever it is you're doing for
example here we're doing a style for
background image so if I take
that let's see what we
got now we're seeing a bunch of images
all stacked
up and so it is probably not bringing
out the it's probably not handling the
carousel properly so let's go look at a
carousel I wonder if bootstrap five has
a carousel built in we might be able to
use it that
way and if so
yes it is they have a Cel so that is
what we're going to jump one into
probably next time actually let's look
at this real
quick um I don't know if this is
with let's see what happens so that's
what we
had if we look at what it should
be uh if we've got a did we have a next
I don't know if we had a next before if
we had our little buttons let's see did
we I look yes we did
so uh that means what I can probably do
is
take this let's take that first
one uh where to
go first slide
label placeholder
text
image okay so let's see what does this
look
like whoop
oh cuz it's an item active Okay so
before we
had each item so we have an enter there
we go the enter and we have an active so
active uh it's going to be like this but
we don't need
active we do need its style is still
going to be this image
and
then we want this to
be this is
what uh yeah Carousel
item and then there's an image
source oh let's look at this uh let's
see
all let's do this let's
see so that's what he looked like this
is what he should look like
now
wh let's do this
uh this is the image
active there we go let's do this we're
going to do actually let's take this
first and then we'll start replacing
stuff that's the easy way to do it so
let's put this at our
top oh see they do have
it uh Carousel slide container there's a
carousel so if we look
[Music]
here if we look at the
[Music]
indicators they are probably a little
different
yep so this is going to be data Target
data BS
Target is just going to
be
this and I do
have a
fourth 0 one two
three and he doesn't really need a
label um but let's give them one anyways
so there we go so there's
my
indicators and then what I want is I've
got let's take the
text which is going to be in the caption
area and let's pull that for each of
these so we're going to come in here
we're going to pull our
text and pull that over and this
one and then we're going to need to
duplicate that
item
and there we
go so let's pull that in so we can see a
little
bit so
now if I do my
source
here let's change it to a straight
up and let's see what
happens let's see if this even works we
may have a broken some broken HTML
but this maybe a quick way to get us
wh so now we have it we've got some text
we do have some
buttons and we do have some
slides
so let's see so what it comes down to
here
is uh let's take
this and that's going to be screen
two this is going to be screen
three it's going to be
screen
four oh we need the previous and the
next are going to be because they are my
cariso and
let's put that
there and let's see so now if we take
this let's take this crap and get rid of
it
that and now let's rebuild
it and maybe we have managed to add a
carousel in
here and let's see how's that
look now we don't have we need to darken
it uh
cuz somewhere and here is there we
go and then it just go so we need it to
Loop is one of our
things
and uh let's
see previous next let's see can we make
it let's go over
here
and
so we can make it dark if we want which
is probably what we
want uh let's see so it's going to
be and we want it to
be let's see what is it doing
[Music]
here oh let's try
that uh uh I'm going to play around with
this so we probably aren't going to go
too much further in this uh let's see
this was on
the uh class
Carousel where is it at class Carousel
slide dark Carousel dark and let's see
what we got
here and then we'll so there's a couple
things we're going to need to do still
on this
is oh here's a nice thing is it does
give us okay
now it ends up sliding all the way off
so we're going to have to work on that
but if you notice at the dark it does
now give us uh dark
text which we probably don't need dark
what we actually want to do is we want
to darken the
images which goes back to what we had
before if we go look at
home I think it was home well no not
home log
in
is that
this is what we needed is that we need
to get
that into the uh item active let's see
if that works let's just try that real
quick okay let's see what that looks
like
now and it does not like that so we're
going to play around with that a little
bit uh let's go back
to there okay and we will see what we
can do with this uh see if we can do a
little bit of work wh and get these
things cleaned up but as you can see we
can pull stuff over uh got a little bit
of
a uh introduction to bootstrap five
because that's what we're moving into
we've shifted some stuff over if we kept
it that would have been great these are
kinds of things you have to deal with
when you're migrating updating an
application that being said hope you
enjoyed it as always shoot us emails at
info@ developer.com or leave a comment
and we will talk to you next time so go
out there and have yourself a great day
a great week and then we will talk to
you next time hello this is Rob with
develop andur also known as building
better developers wanted to announce
that we have school. develop or.com feel
free to check it out if you like any of
this information any of the content that
we've sent and you would like to see
more you can come out you can enroll for
free we have free courses we've got
places for you to get better at just
learning a technology or how toos you
can work on your business skills we can
help you with becoming a better
developer as in coding and things like
that a lot of the stuff you've seen on
YouTube we also have out at school.
develop andur we have it a little more
of a educational format and a way for
you to track your progress as you move
forward becoming a better developer
[Music]
ER