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. In this episode, we work in Thymeleaf and Spring Boot to build some links and pass parameters
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 our conversion of our older Tom Cat Apache Apache Tom Cat JSP application to a new fangle nice bright and shiny spring boot with time leaf with bootstrap and converting that over it hasn't been too hard and now I just want to sort of this episode and as probably go through a couple we'll start converting some of these pages that are a little more complicated um a little more involved basically so for now we've usually done some very you know some simple things where it's like you know hey you generate a little section like up in here you've got something that you know got a little looping thing that's going through some stuff and then you've got some you know another basically Loop so a lot of this is very straightforward we haven't gone very nuts like you can see here if I go oh I do have a nav bar I didn't realize I had my nav bar um but we'll play around with that do some styling a little later on again working within the the bootstrap world I want to do right now is we're going to go to uh we have these projects what we want to be able to do is click on one and edit it now right here we do have that set up in this one um we can go in and it's going to try to edit so let's actually go from here and first let's hook this thing up so we've got like here's an example we we must we pulled this over and we didn't really finish it out so let's go look at this project list and let's get it set up so that we can edit now actually to make it simple if we look here if we go look at what was generated is what we need is a pro edit project and then the number so if we come back to our project list that means and let's see let's do two things one from our hello controller if we go look for list projects which I believe is this one yep we have a user ID we didn't not have a user so we're going to add a user and we're just going to call them user lowercase we're going to send that user in and we'll just keep it simple so we'll send that one directly into list projects because then what we're going to do is the same thing that we did for the user dashboard is we're just going to come in here and we're just going to say you know basically where it says here welcome we're going to do that here but we're going to wrap that that if you see here it is going to always display this text no matter what so if for example we don't have information it's just going to say dashboard for dashboard for blank and then there's actually another space or two in there but you know user won't see that instead what we want to do is we're going to do this just like the uh project form where I have started that and here we go so here here we're going to use one of our time Leaf ifs and we're going to say if the first name is not equal to null then we'll display this otherwise we're not going to bother so if we go over to our projects page and we're just going to replace that that'll be easy enough to do um and this thing's got a whole mess of stuff so we're going to clean this page up even before we get to the edit uh so here is where it does the welcome uh it does oh and then it's got this maintain overhead and maintain difficulty ulty both of which are not mapped but we're going to leave those for now um so let's see let's do this first whoop uh first I want to come through and we're going to basically simplify this thing out so we don't need to worry about this we don't need to worry about the welcome we do want to keep however the maintain overhead and uh we're just going to make him I think I don't even know if it uses button small but okay so we're going to use that and we're going to keep this one which is the maintain difficulty and we'll tackle these later as far as actually putting these together but here's one of the problem is we don't need and we'll fix this what we're going to do is we're going to go look at can we get the context path uh we should be able to do it just like this wh but we will come back to that shortly so now let's see where we at we're in this row we've got if we've got a username we're going to display it and regardless after that so we may get nothing here but we will get our two little buttons so let's do that for now let's make sure we got everything wh we don't need that CF this is all in this class row so we should be good see is there anything else we want to do yeah so we're going to have to do this change there's probably some stuff up here that we wanted to get rid of yeah so we've got this like so the form action is going to be log out we don't need that URL uh let's see we're probably going to need that information and then we want to do edit project zero so let's put that in there so note a lot of what we're doing is it's just because of you some of the ways things were generated before but then we've got all these little variables and so we have to make sure that we are you know essentially cleaning those things up uh let's see so here I think we are pretty darn close other than we have this context path and so that could be you know could be something we want to deal with uh let's see and I think what we want to do is let's just say here this is going to be uh sledit project no I think it's called projects yes projects and it may be that simple uh may not be we're going to find out soon enough so if we come in here uh let's see we did that all right so if we go run this Oh shoot what I want to do is I want to be able to do a uh onclick which we do not have because I basically want to do here is say if I click it then I get to El edit it and so I'm going to go to each row here and I'm going to have to have for each one I am going to have to do a I think I do a uh what do we want to do this is a on click let's do on click wh what did I do there here let's get rid of this let's I don't want to break my class I may be able to just do on click equals and do I have an edit project already up here I do I have a select project so I should be able to just from here do select project and give it what am I giving it an ID and a root I don't know why it has a root at all uh it doesn't use that so there's no need filter projects actually doesn't use that either which is interesting enough so let's see filter projects so I don't need that uh let's see select does need the ID which is going to be the uh I think we need to do it th on click select [Music] project we're going to do it like this so it's going to be um here and we'll just do a straight text sort of like we did up here and and is that how I want to do it let's see oh I can do it so it's going to be with that so I don't need this I do it like that and he is going to be a dollar right so I do want my dollar yep and he's just going to be the ID so I think it's going to be just project. ID if I can spell it right and if I can put it inside this that will help project ID did I get it oh I need to close that so now if we run it let's see what we get here so it's going to make us log in and if we go to projects now H we broke something somewhere oh but it is giving us our edit so we are getting our edit project but what we do need to figure out is what did we break create website and web flow okay so we probably have something here that is not closing things right so let's try to go inspect and see if we can see what's going on so if we go in here this is going to be sort of tough to see but we're going to come down into our container and we come down to this part of our container and and we are going to go into our responsive table and we're going to take one of these and we're going to see that we've got our class set up we've got our select project he's a div but he's with outside of a row which is interesting so we want him uh class equals [Music] row oh so he's not an actual table row so here's our div let's go look at that again and within him he's got div div div div div and then he closes up and these are each a small two which that should [Music] be [Music] and see what are we missing here we've got something a little funky so if we go in here and this is where we start running to fun stuff so if we grab that and he says on click that class equal oh I think it's that class equals so it needs to be th class that's where we missed it I think that's where we have an issue which is probably a good sign since I see that that's like hey that is not coming up right so now if we come in let me get rid of this we log in and now we click there we go so now note we got everything falling out here now we can select a row we'll clean this up later the selector thingy and now we can come in and we can actually edit a project and it's giving us an ID so now let's take a look at this this page is obviously just barely getting started so let's take a look at our project form here and we will dive into that that will actually be our next episode I don't want to go too long in this one so for this one what we did is we did clean up a little page uh we went in we took a look at uh selecting a row we looked at basically converting a couple of objects over from oops this is the wrong one uh looking at yep and that's correct at converting objects over and making sure that we get some stuff you know built out oh we've got some uh couple of layout issues that we're going to want to deal with here uh in order to make that not the uh the ug LLY thing that it is so we'll clean a couple of these things up so our buttons aren't going all the way across next time and we will work on actually filtering a list we'll go ahead and add that one in uh next time as well so we'll start with filtering a list and uh we'll go from there get our project form going and just continue walking through this conversion process getting you like we are just walking through all of the little changes that need to be done if you had a if you've got an older application but of course these are also things you have to put in place if you have a new application as well if you have any questions send us an email at info@ developer.com and go out there and have yourself a great day a great week and we will talk to you next time hello this is Rob with develop or also known as building better developers wanted to announce that we have school. developer.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 toose 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 andure we just have it in a little more of a uh educational format and a way for you to track your progress as you move forward becoming a better developer [Music]
Transcript Segments
[Music]
well hello and welcome back we are
continuing our conversion of our older
Tom Cat Apache Apache Tom Cat JSP
application to a new fangle nice bright
and shiny spring boot with time leaf
with
bootstrap and converting that over it
hasn't been too hard and now I just want
to sort of this episode and as probably
go through a couple we'll start
converting some of these pages that are
a little more complicated um a little
more involved basically so for now we've
usually done some very you know some
simple things where it's like you know
hey you generate a little section like
up in here you've got something that you
know got a little looping thing that's
going through some stuff and then you've
got some you know another basically Loop
so a lot of this is very straightforward
we haven't gone very nuts like you can
see here if I go oh I do have a nav bar
I didn't realize I had my nav bar um but
we'll play around with that do some
styling a little later on again working
within the the bootstrap world I want to
do right now is we're going to go to uh
we have these projects what we want to
be able to do is click on one and edit
it now right here we do have that set up
in this one um we can go in and it's
going to try to edit so let's actually
go from here and first let's hook this
thing up so we've got like here's an
example we we must we pulled this over
and we didn't really finish it out so
let's go look at this project list and
let's get it set up so that we can edit
now actually to make it simple if we
look here if we go look at what was
generated is what we need is a pro edit
project and then the number so if we
come back to our project list that
means and let's see let's do two things
one from our hello
controller if we go look for list
projects which I believe is this one yep
we have a user ID we didn't not have a
user so we're going to add a
user and we're just going to call them
user
lowercase we're going to send that user
in and we'll just keep it simple so
we'll send that one directly into list
projects because then what we're going
to do is the same thing that we did for
the user
dashboard is we're just going to come in
here and we're just going to say you
know basically where it says here
welcome we're going to do that here but
we're going to wrap that that if you see
here it is going to always display this
text no matter what so if for example we
don't have information it's just going
to say dashboard for dashboard for blank
and then there's actually another space
or two in there but you know user won't
see that instead what we want to do is
we're going to do this just like the uh
project form where I have started
that and here we go so here here we're
going to use one of our time Leaf ifs
and we're going to say if the first name
is not equal to null then we'll display
this otherwise we're not going to bother
so if we go over to our projects
page and we're just going to replace
that that'll be easy enough to do um and
this thing's got a whole mess of stuff
so we're going to clean this page up
even before we get to the edit uh so
here is where it does the
welcome uh it does oh and then it's got
this maintain overhead and maintain
difficulty ulty both of which are not
mapped but we're going to leave those
for now um so let's see let's do this
first
whoop uh first I want to come
through and we're going to basically
simplify this thing out so we don't need
to worry about this we don't need to
worry about the welcome we do want to
keep
however the maintain
overhead
and uh we're just going to make him I
think I don't even know if it uses
button small but okay so we're going to
use that and we're going to keep this
one which is the maintain difficulty and
we'll tackle these later as far as
actually putting these together but
here's one of the problem is we don't
need and we'll fix this what we're going
to do is we're going to go look at can
we get the context path uh we should be
able to do it just like this
wh but we will come back to that
shortly so
now let's see where we at we're in this
row we've got if we've got a username
we're going to display it and regardless
after that so we may get nothing here
but we will get our two little buttons
so let's do that for now let's make sure
we got everything wh we don't need that
CF this is all
in this class row so we should be
good see is there anything else we want
to
do yeah so we're going to have to do
this change there's probably some stuff
up here that we wanted to get rid of
yeah so we've got this
like so the form action is going to
be log
out we don't need that URL
uh let's see we're probably going to
need that information and then we want
to do edit project zero so let's put
that in
there so note a lot of what we're doing
is it's just because of you some of the
ways things were generated before but
then we've got all these little
variables and so we have to make sure
that we are you know essentially
cleaning those things up uh let's see so
here I
think we are pretty darn
close other than we have this context
path and so that could be you know could
be something we want to deal with uh
let's see and I think what we want to do
is let's just say here this is going to
be uh sledit
project no I think it's
called projects yes
projects and it may be that
simple uh may not be we're going to find
out soon enough so if we come in here uh
let's see we did that all
right so if we go run
this Oh shoot what I want to do is I
want to be able to do a uh
onclick which we do not have because I
basically want to do here is say if I
click it then I get to El edit it and so
I'm going to go to each row here
and I'm going to have to have for each
one I am going to have to do
a I think I do
a uh what do we want to do this is a on
click let's do on
click wh what did I do there here let's
get rid of this let's I don't want to
break my
class
I may be able to just do on click
equals and do I have an edit project
already up
here I do I have a select
project so I should be able to just from
here do select project and give it what
am I giving it an ID and a root I don't
know why it has a root at
all uh it doesn't use that so there's no
need filter projects actually doesn't
use that either which is interesting
enough so let's see filter
projects so I don't need
that uh let's see
select does
need the ID which is going to be the
uh I think we need to do it th on click
select
[Music]
project we're going to do it like this
so it's going to be
um here and we'll just do a
straight text sort of like we did up
here and and is that how I want to do it
let's
see oh I can do it so it's going to be
with that so I don't need
this I do it like
that and he is going to be a
dollar
right so I do want my dollar yep and
he's just going to be the ID so I think
it's going to be just project.
ID if I can spell it right and if I can
put it inside this that will help
project ID did I get it oh I need to
close that so now if we run
it let's see what we get here so it's
going to make us log
in and if we go to
projects now H we broke something
somewhere oh but it is giving us our
edit so we are getting our edit project
but what we do need to figure out is
what did we
break create website and web flow okay
so we probably have something
here that
is not closing things right so let's try
to go inspect and see if we can see
what's going on so if we go in here this
is going to be sort of tough to see but
we're going to come down into our
container and we come down
to this part of our container and and we
are going to go into our responsive
table and we're going to take one of
these and we're going to
see that we've got our class set
up we've got our select
project he's a
div but he's with outside of a row which
is
interesting so we want him
uh class equals
[Music]
row oh so he's not an actual table row
so here's our div let's go look at that
again and within
him he's got div div div div div and
then he closes
up
and these are each a small two which
that should
[Music]
be
[Music]
and see what are we missing here we've
got something a little funky so if we go
in here and this is where we start
running to fun stuff so if we grab
that and he says on click that class
equal oh I think it's that class equals
so it needs to be th class that's where
we missed
it I think that's where we have an
issue which is probably a good sign
since I see that that's like hey that is
not coming up right so now if we come in
let me get rid of
this we log
in and now we click there we go so now
note we got everything falling out here
now we can select a row we'll clean this
up later the selector thingy and now we
can come in and we can actually edit a
project and it's giving us an ID so now
let's take a look at
this this page is obviously just barely
getting started so let's take a look at
our project
form
here and we will dive into that that
will actually be our next episode I
don't want to go too long in this one so
for this one what we did is we did clean
up a little page uh we went in we took a
look at uh selecting a row we looked at
basically converting a couple of objects
over from oops this is the wrong one uh
looking at yep and that's correct at
converting objects
over and making sure that we get some
stuff you know built out oh we've got
some uh couple of layout issues that
we're going to want to deal with here uh
in order to make that not the uh the ug
LLY thing that it is so we'll clean a
couple of these things up so our buttons
aren't going all the way across next
time and we will work on actually
filtering a list we'll go ahead and add
that one in uh next time as well so
we'll start with filtering a list and uh
we'll go from there get our project form
going and just continue walking through
this conversion process getting you like
we are just walking through all of the
little changes that need to be done if
you had a if you've got an older
application but of course these are also
things you have to put in place if you
have a new application as well if you
have any questions send us an email at
info@ developer.com and go out there and
have yourself a great day a great week
and we will talk to you next time hello
this is Rob with develop or also known
as building better developers wanted to
announce that we have school.
developer.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 toose 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 andure we just have it in a
little more of a uh educational format
and a way for you to track your progress
as you move forward becoming a better
developer
[Music]