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. We are working on a complex form for entering data. This episode continues connecting up the back and front end data pieces to our Thymeleaf form and pages.
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 journey as it were through uh converting our application from Tomcat Pache old stuff uh you know Java server Pages things to you know a spiffy new spring boot application with uh bootstrap five and time leaf and all that kind of stuff this time we are going to continue playing around with uh if we go here and log in we're working on our uh little project thing and doing some of this stuff getting these things cleaned up one of them is we're going to do some new tasks in overhead which is again we're going to go back through give ourselves a good exercise and completing or cleaning up something that use some of the old school JSP stuff and we're going to switch that over so let's see if we can take our tasks and our overhead requirements and let's see if we can get those things converted fairly quickly uh first off if you remember we always had to start out get our uh our header in there so we're going to do that with our uh if I can find my task Pages they are down here I think I'm in the right place wrong one there we go so if we do it at the head of our uh I'm sorry is our task yeah I think it's our task form yep because we see it's got all this crap up here so we're going to clean that up we get down to the let's do this and let's get we don't need to include that header and we're going to do that with our uh overhead form as well so we got a lot stuff here we don't [Music] need and let's go ahead and we're going to do the same with our footer so we just jump to the bottom and we can see here that we always have a footer right before we do the end of the body in the/ H2 Mouse we're going to go back over here to our overhead form we're clean that one up and we're going to clean up our task form same way and so if we just take these that should get us a start so let's just take a look at these should start seeing something that looks a little bit better so we're going to jump in here we're going to log in and now we're going to see so if we do a new task now we've got our header we've got our footer down here things are look at this it's starting to like look a little bit better even already because it's got some of that styling if we do our overhead item same thing now we've got uh some nice little things here like it's got a welcome which I think we have here so we're just going to steal that from our form as well so we're going to come in here this is a bonus again uh technically we probably could have built all this out in some nice useful uh templates and fragments but let's see so we did uh welcome here so up at the top we've got a row that is our welcome row we're going to put that on our overhead and where it says here we'll just get that taken care of and we're going to do that on our task form because I think we have the same thing yes we do so remember what we need to do is we're going have to go through these basically we're going to try it this way we're going to try a little differently so for our task we're going to go everywhere that we see a c colon and we're going to turn that into a th colon and we're going to see if that how close that gets us so if we do F replace C colon and replace that with that th colon replace all it's probably not going to get them all but hey let's see what happens if we try that uh that should give us that's going to give us a few issues here because like here uh this probably needs to be like a uh that's the font we're going to do a div th text equals and that's going to be the message so we'll just try that so let's start with just I don't want to go too far to it so let's look at what we do with just our C so if we come in here now let's see if we get any of our value showing up so if we do a new of course if there there's not a whole lot oh good it's blowing up I don't mean that in a serious way but most likely it is something here where it's we've got an in a in to our C so we can't do that because those were oh here we go so first name uh so this is the task and actually I'm not sure which this was but most likely it is here uh so user. first name oh so let's go see if so it looks like we're going to have a couple things so we sort of like blew our way through this uh let's see user. first name template overhead form user. first name here and is not equal to null and it's probably not going to like that because if we go down here I think it's a user null maybe oh property field first name cannot be found in it so user is null here oh because I think we did that I think that's our problem is because they are no that should be oh I bet you we didn't let's see what we call them here o let's go if we go back to what that was it was actually um oh we didn't send it was user principal so let's go look at wh not that one so we need to send our user across now which we probably did not do so if we go into our task controller and we're going to have somewhere in here we're going to have our uh overhead form I probably didn't do it because it's uh let's not make it there we go so here what we need is we have a user ID but we probably need to just make this user which um let's do it that way and this is going to be let's see how do we do that here we can probably just steal our code here uh let's see where is here we go so now we can come back to here let's see test controller and we're going to do it like that and then the user is going to be USR we're going to have to add the user Dao oh we didn't have it there so let's go back to here let's just grab that line real quick CU we're going to need him and we're use him a couple places so that will Works let's make sure we don't already have a user Dao we do not oh uh I guess we can make it private interesting than it was before but that's okay uh let's see so now that was the where' I put it here we go so I've got that one and I'm probably going to use user as well here for the is that the task yep load task form and so now that should take care of those so that means we should be able to I think run it we're going to find out in a second or a few seconds actually so if we're going to log in send our values in do a new now it's working and we're starting to see a few things uh we're not seeing any errors so and probably right now now note that we've got some issues if I'm try well can't note this you don't see this but maybe you hear me trying to type and that's because these are not hooked up properly because those are so if we go to let's just do the task form f is that what I want yeah we're going to do the task form first and so we've got a few things here so this if be interesting we could oh we really don't want that that's going to be a div thf and that's going to be the end of that div and we're just going to say that's going to be the action and then what we need to do if you remember what we need in our form is we're going to need to actually tell it what it comes from so if we what it's working with so here we're going to make our form it's going to look a little different whoop where did I put that there we go I don't know why I jumped to the end but there we go so what we're going to do is we're going to take take this in our task we're just going to do it this way because what we really want it to be here is just going to boost save task and instead of project it's going to be task and that should do it so from here I think we can just do let's see if we do th value let's see what that does uh hidden path is going to be project ID that's probably okay uh input type and I think our inputs oh that's a submit button right there so the submit button's okay probably uh oh that's just a whole bunch of wait let me go look at that page oh because it's the delete the task but that's going to be delete task and that's going to be a th on click and it's going to be we need our pipes like that that should take care of it uh it's not going to be task. ID because we should be able to do just ID I believe that's what it's going because we're within this task let's go see if we had that before wh and if we look here yeah it's just th field instead of path so that's what we want so we're going to come over here and instead of path that's going to be th field and that's going to be a star like that I think that's how we want it so if we go look here at our project form yep asisan ID so we should be able to do that so let's see we need everywhere we have path it's going to be like that star uh let see that's our on click we're okay there I think that needs oh is that an as I think that is a dollar because we don't want it uh dollar dollar yep that's what we want because that actually takes it outside of the form this is just with then it uh let's see do we have another I'm sure we have another path there we go there's a path and then it needs to be like that and somewhere in here there we go there's a path and that's going to be the amount so we're going to see some values show up I think this time oh and it's not form input it is I think it's just input let's go look here let's make sure we got that right right yep straight up for uh input so we can get rid of that that's an a form input that's not a hidden that's an input type equals hidden funny that the one right above it did not do things quite with thing I thought it was uh let's see let's make that th value oh no we T field cuz it's going to come from there okay uh what else we got if we come through all of this we don't need that form input Let's see we don't need form select that's just going to be a select we will come back to that because we're going to have to if you remember that's going to be div gosh too many typos uh let's see do we have a we'll come back to that select because we're going to want to rebuild him like we have before we're going to do that with him as well with this select uh let's see it matters but we'll put that there so we're going to have to rebuild that this is an input so that one's at Le is good that's just an input and that's going to be so as you see a lot of this is just you know it's kind of stuff we probably there would be a way to automate it we haven't yet so we get to do it this way and honestly let's face it automating it would only work if somebody was doing this exact same type of conversion so sometimes we run into that where it's like hey we would love to not be doing this very repetitive stuff but we have to because it's code and it has to be written and so we have to go through this and while there's probably some ways we could do it faster it is something that we don't do that often so it might be one that would be potentially one of those things that you would do a some sort of like a oneoff uh macro or something along those lines depending on what your ID environment does this one doesn't that I know of provide that so we're not going to mess with it all right so I think we finally got through it let's see what it looks like should we should see some stuff that's a little nicer here and if we go and this is on the task if we go in and we do a new task oh now we're seeing an issue something got we got to type over something in there let's see what did we get uh let's see input cannot be null and did it tell us which one it was on it [Music] is uh template type form I wonder if we had on our form itself method is posst th object action form hidden oh that's going to be an in put I see probably didn't give us information we needed not seeing the exact error sometimes it give us the exact one it's not this time so let's go run this again and see if that gives us something a little different and let's run through here and let's do a new task oh same thing what does it complain about probably the same thing no a little different uh input cannot be null legal argument something has an input oh there's an if oh there it is line 38 boom so here uh th oh or thf is equals and I think it's like that I don't think I think we just want to do it there so let's try that because that's if message is not equal null does that look right for our ifs that we did before I believe it did if we look here somewhere up here there's an if I just saw one yeah here we go so here's the same thing so with that message let's see if we got it right this time so if we take a look at that if on the message uh we're going to do it on the overhead too so we might as well I bet you there we go so uh thf equal Yep looks like that's exactly what we want if we go do that on our task form I think we actually had it all oh it's just there because it's going to do the dollar message I wonder if [Music] it'll uh so yeah we probably want to leave it like this although interestingly enough what do we do on the overhead form um oh I bet you it's not going to show that message interesting okay we'll find out uh we'll have to change that at some point because I'm sure we can send a message as we're going through it so let's get that actually working and then we'll come back and we'll we'll do our dropdowns again we'll do another example of those uh and we'll see that those are pretty consistent I think from what we saw before pretty straightforward build our list in the back end and then send it across there we go so now we're starting to see some values type difficulty or drop downs name we can enter something create a task that's actually the ID so that should be hidden uh if we go into that task form ID there we go so that should be type equals hidden and we should have have a user ID and a project ID so if we go look there uh let's see if we look up here nope that one there we go we have a user ID which is three we have a project ID which is 28 so we are getting those values in uh we can do some we can do a nice little description notes there that one probably we could make that multiple lines if we wanted to because I it'ss a text yeah form control oh interesting there is it saying should be six rows but it's not giving us that so interesting enough we'll have to see I think we missed something there uh but we are generally speaking getting our values across and I bet you if we hit save it'll actually if we hit cancel oh cancel does go back that's cool saor update oh actually thinks it's doing something I think it we got an error but it sort of thinks it's doing something and delete this task uh again doesn't do it oh that's interesting is that we didn't have an opportunity let's go look oh so now it's not showing our opportunities interesting very very interesting so if we go here that one is but we lost an overhead requirement there so we uh we managed to do some damage on that one we did did our uh overhead piece so we'll have to look at that and we'll just sort of keep tracking that one down next time so as always if you have any questions any specific things you want us to go through because like I said we're just going through these giving you some examples learning as we go a little bit finding a few things here sometimes doing things a little differently but shoot us an email at info@ developer.com and let us know what you like to hear until then go out there and have yourself a great day a great week and we will talk to you next [Music] time
Transcript Segments
[Music]
well hello and welcome back we are
continuing our journey as it were
through uh converting our application
from Tomcat Pache old stuff uh you know
Java server Pages things to you know a
spiffy new spring boot application with
uh bootstrap five and time leaf and all
that kind of stuff this time we are
going to continue playing around with uh
if we go here and log
in we're working on our uh little
project thing and doing some of this
stuff getting these things cleaned up
one of them is we're going to do some
new tasks in overhead which is again
we're going to go back through give
ourselves a good exercise and completing
or cleaning up something that use some
of the old school JSP stuff and we're
going to switch that over so let's see
if we can take our tasks and our
overhead requirements and let's see if
we can get those things converted fairly
quickly uh first off if you remember we
always had to start out get our uh our
header in there so we're going to do
that with our uh if I can find my task
Pages they
are down here I think I'm in the right
place wrong
one there we go so if we do it at the
head of our uh I'm sorry is our task
yeah I think it's our task form yep
because we see it's got all this crap up
here so we're going to clean that up we
get down to
the let's do this and let's get we don't
need to include that
header and we're going to do that with
our uh overhead form as
well so we got a lot stuff here we don't
[Music]
need and let's go ahead and we're going
to do the same with our
footer so we just jump to the bottom
and we can see here that we always have
a footer right before we do the end of
the body in the/ H2 Mouse we're going to
go back over
here to our overhead
form we're clean that one up and we're
going to clean up our task
form same
way and so if we just take these that
should get us a start so let's just take
a look at these should start seeing
something that looks a little bit better
so we're going to jump in
here we're going to log in and now we're
going to
see so if we do a new task now we've got
our header we've got our footer down
here things are look at this it's
starting to like look a little bit
better even already because it's got
some of that styling if we do our
overhead item same thing now we've got
uh some nice little things here like
it's got a welcome which I think we have
here so we're just going to steal that
from our form as well
so we're going to come in here this is a
bonus again uh technically we probably
could have built all this out in some
nice
useful uh templates and fragments but
let's see so we
did uh welcome here so up at the top
we've got a row that is our welcome row
we're going to put that on our
overhead and where it says
here we'll just get that taken care of
and we're going to do that on our task
form because I think we have the same
thing yes we
do so remember what we need to do is
we're going have to go through these
basically we're going to try it this way
we're going to try a little differently
so for our task we're going to go
everywhere that we see a c colon and
we're going to turn that into a th colon
and we're going to see if that how close
that gets us so if we do F
replace C colon and replace that with
that th
colon replace all it's probably not
going to get them all but
hey let's see what
happens if we try that uh that should
give us that's going to give us a few
issues here because like
here uh this probably needs to be like
a uh that's the font we're going to do a
div th text
equals and that's going to be the
message
so we'll just try
that so let's start with just I don't
want to go too far to it so let's look
at what we do with just our C so if we
come in here
now let's see if we get any of our value
showing up so if we do a new of course
if there there's not a whole lot oh good
it's blowing up I don't mean that in a
serious way but most likely it is
something here where it's we've got an
in a in to our C so we can't do that
because those were oh here we go so
first
name uh so this is the task
and actually I'm not sure which this was
but most likely it is here uh so user.
first
name oh so let's go see
if so it looks like we're going to have
a couple things so we sort of like blew
our way through
this
uh let's see user. first name template
overhead
form user. first name
here and is not equal to null and it's
probably not going to like that because
if we go down here I think it's a user
null maybe oh property field first name
cannot be found in it so user is null
here oh
because I think we did that I think
that's our problem is because they are
no that should
be oh I bet you we didn't let's see what
we call them here o let's
go if we go back to what that was it was
actually um oh we didn't send it was
user principal so let's go look
at wh not that one so we need to send
our user across now which we probably
did not do so if we go into our task
controller and we're going to have
somewhere in here we're going to have
our uh
overhead
form I probably didn't do it because
it's uh let's not make it there we
go so here what we need is we have a
user ID but we probably need to just
make this user
which
um let's do it that
way and this is going to
be let's see how do we do that here we
can probably just steal our code
here uh let's see where is here we
go
so now we can come back to
here let's see test
controller and we're going to do it like
that and then the user is going to be
USR we're going to have to add the user
Dao oh we didn't have it there so let's
go back to here let's just grab that
line real
quick CU we're going to need
him and we're use him a couple places so
that will Works let's make sure we don't
already have a user Dao we do
not oh uh I guess we can make it
private interesting than it was before
but that's okay uh let's see so
now that was
the where' I put it here we
go so I've got that one and I'm probably
going to use user as well here for the
is that the task yep load task form
and so now that should take care of
those so that means we should be able to
I think run it we're going to find out
in a
second or a few seconds actually so if
we're going to log
in send our values in do a new now it's
working and we're starting to see a few
things uh we're not seeing any errors so
and probably right now now note that
we've got some issues if I'm try well
can't note this you don't see this but
maybe you hear me trying to type and
that's because these are not hooked up
properly because those are so if we go
to let's just do the task form f is that
what I want yeah we're going to do the
task form
first
and so we've got a few things here so
this
if be interesting we could oh we really
don't want that that's going to
be a div thf and that's going to be the
end of that
div and we're just going to
say that's going to be the
action and then what we need to do if
you remember what we need in our form is
we're going to need to actually tell it
what it comes from so if we what it's
working with so here we're going to make
our form it's going to look a little
different whoop where did I put
that there we go I don't know why I
jumped to the end but there we go so
what we're going to do is we're going to
take take this in our task we're just
going to do it this way because what we
really want it to be here is just going
to boost save
task and instead of project it's going
to be
task and that should do it so from
here I think we can just do let's see if
we do th value let's see what that does
uh hidden path is going to be project ID
that's probably
okay uh input type and I think our
inputs oh that's a submit button right
there so the submit button's okay
probably uh oh that's just a whole bunch
of wait let me go look at that
page oh because it's the delete the task
but that's going to
be delete
task and that's going to be a th on
click
and it's going to be we need our
pipes like that that should take care of
it uh it's not going to be task. ID
because we should be able to do just
ID I believe that's what it's going
because we're within this task let's go
see if we had that before
wh and if we look here
yeah it's just th field instead of path
so that's what we want so we're going to
come over here and instead of path
that's going to be th
field and that's going to be a
star like
that I think that's how we want it so if
we go look here at
our project form yep asisan ID so we
should be able to do that so let's see
we need everywhere we have path it's
going to
be like
that
star uh let
see that's our on click we're okay there
I think that needs oh is that an as I
think that is a dollar because we don't
want
it uh dollar dollar yep that's what we
want because that actually takes it
outside of the form this is just with
then it uh let's see do we have another
I'm sure we have another path there we
go there's a
path and then it needs to be like
that and somewhere in here there we go
there's a
path and that's going to be the amount
so we're going to see some values show
up I think this time oh and it's not
form input it is I think it's just input
let's go look here let's make sure we
got that right
right yep straight
up for uh input so we can get rid of
that that's an a form
input that's not a hidden that's an
input type equals hidden funny that the
one right above it did not do things
quite with thing I thought it was uh
let's see let's make that th value oh no
we T field cuz it's going to come from
there
okay uh what else we
got if we come through all of
this we don't need that form
input Let's see we don't need form
select that's just going to be a select
we will come back to that because we're
going to have to if you
remember that's going to be
div gosh too many
typos uh let's see do we have
a we'll come back to that select because
we're going to want to rebuild him like
we have before we're going to do that
with him as well with this
select uh let's
see it matters but we'll put that there
so we're going to have to rebuild that
this is an input so that one's at Le is
good that's just an input and that's
going to
be so as you see a lot of this is just
you know it's kind of stuff we probably
there would be a way to automate it we
haven't yet so we get to do it this way
and honestly let's face it automating it
would only work if somebody was doing
this exact same type of conversion so
sometimes we run into that where it's
like hey we
would love to not be doing this very
repetitive stuff but we have to because
it's code and it has to be written and
so we have to go through this and while
there's probably some ways we could do
it
faster it is something that we don't do
that often so it might be one that would
be potentially one of those things that
you would do a some sort of like a
oneoff uh macro or something along those
lines depending on what your ID
environment does this one doesn't that I
know of provide that so we're not going
to mess with it all right so I think we
finally got through it let's see what it
looks
like should we should see some stuff
that's a little nicer
here and if we go and this is on the
task if we go in and we do a new
task oh now we're seeing an issue
something got we got to type over
something in there let's see what did we
get uh let's see input cannot be null
and did it tell us which one it was
on it
[Music]
is uh template type
form I wonder if we had on our form
itself method is posst th object action
form hidden
oh that's going to be an in
put I see probably didn't give us
information we
needed not seeing the
exact error sometimes it give us the
exact one it's not this time so let's go
run this again and see if that gives us
something a little
different and let's run through
here and let's do a new
task oh same thing what does it complain
about probably the same thing no a
little different uh input cannot be
null legal
argument something has an input oh
there's an if oh there it is line
38 boom so here uh th
oh or thf is
equals and I think it's like that I
don't think I think we just want to do
it there so let's try that because
that's if message is not equal null does
that look right for our ifs that we did
before I believe it
did if we look here somewhere up here
there's an if I just saw one yeah here
we go so here's the same thing so with
that message let's see if we got it
right this
time so if we take a look at that if on
the message uh we're going to do it on
the overhead too so we might as well I
bet you there we
go
so uh thf equal Yep looks like that's
exactly what we want if we go do that on
our task
form I think we actually had it
all oh it's just there because it's
going to do the dollar message I wonder
if
[Music]
it'll
uh so yeah we probably want to leave it
like
this
although interestingly enough what do we
do on the overhead form um oh I bet you
it's not going to show that
message interesting okay we'll find out
uh we'll have to change that at some
point because I'm sure we can send a
message as we're going through it so
let's get that actually working and then
we'll come back and we'll we'll do our
dropdowns again we'll do another example
of those uh and we'll see that those are
pretty consistent I think from what we
saw before pretty straightforward build
our
list in the back end and then send it
across there we go so now we're starting
to see some values type difficulty or
drop downs name we can enter something
create a task that's actually the ID so
that should be hidden uh if we go into
that task
form ID there we go so that should be
type
equals
hidden and we should have have a user ID
and a project ID so if we go look
there uh let's see if we look up
here nope that
one there we go we have a user ID which
is three we have a project ID which is
28 so we are getting those values in uh
we can do some we can do a nice little
description notes there that one
probably we could make that multiple
lines if we wanted to because I it'ss a
text yeah form control oh interesting
there is it
saying should be six rows but it's not
giving us that so interesting enough
we'll have to see I think we missed
something there uh but we are generally
speaking getting our values
across and I bet you if we hit save
it'll actually if we hit cancel oh
cancel does go back that's cool saor
update
oh actually thinks it's doing something
I think it we got an error but it sort
of thinks it's doing something and
delete this task uh
again doesn't do it oh that's
interesting is that we didn't have an
opportunity let's go look oh so now it's
not showing our
opportunities
interesting very very interesting so if
we go here that one is but we lost an
overhead requirement there so we uh we
managed to do some damage on that one we
did did our uh overhead piece so we'll
have to look at that and we'll just sort
of keep tracking that one down next time
so as always if you have any questions
any specific things you want us to go
through because like I said we're just
going through these giving you some
examples learning as we go a little bit
finding a few things here sometimes
doing things a little differently but
shoot us an email at info@ developer.com
and let us know what you like to hear
until then go out there and have
yourself a great day a great week and we
will talk to you next
[Music]
time