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 is one of those details episodes where we build out some links and flesh out some of the create or edit record features.
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 working on our sort of you know plugging up uh con connecting out out connecting out our application and cleaning that up a little bit uh one little thing I was just noticing here is if we look we've got these things are not in the same container so let's go look at that real quick if we go here there's a field set there's a row uh let's see there's a row there's a field set so it's probably that extra little div Wonder if we delete that guy that's probably what we want is the div around those two field sets so let's go fix that real quick on our form and then what we're going to do uh first let's see see if I go field set and I want the next one down which is going to be this one I've got this div somewhere ah uh oh as I've got it's I've got a big if there and then it's going to go within that diff so what we need to do is oh I wonder why and we've got an extra Row in there as well which we probably don't need so let's first I get rid of that let's go back to our field sets put a row between them and then here let's just call this a span and see if uh somewhere down here there we go okay so it did update it we'll see that looks uh because what we're going to do now is actually we want to plug in this so when we do an on click we're getting a totally broken um because it's supposed to go to edit task which probably we don't have that wired up yet I bet so if we go uh edit project there we go edit task and we give it a number let's see yeah yeah so we've got to hook a couple of things up so first things uh let's go look at that let's see if we got our see if our display is okay and so if we just pick a project let's get rid of that let's jump down here let's log in and let's just pick a project and Okay so we've got those they've come up but they're still Within uh they're not set the same way we'll we'll fix that display later so there's a couple things we want to do we want to do let's see is this going to give us anything so new task it's not getting us anything useful let's go look at that uh if we look at wh let's go back here so we've got a new task and an add overhead item so let's go look for new task first it is probably yep so it does new task submit I'm not sure why we want to do a new task submit uh um I guess cuz that's a get so let's just do um oh it does have a project ID well let's go look let's figure out what this is supposed to look like so new task and new overhead do we have those in our hello controller I think we had nope let's see do we have a task at all we do have a task uh let's see we have projects and here we go we do have edit no that's edit project we have dashboard greet test Ops register delete op oh Ops we've already done because we got that and so we do not have we have a new p password verify edit user okay so the next thing we're going to do is let's go to uh let's do our tasks first so we're going to go back and steal from our prior application I believe it's here nope uh let's see there we go Source main Java com get our way into our controllers we may look out uh we do not have a oh am I in this one I am in this project okay so that's why it all looks familiar let's go down here to this one where it is different so come in here and we're going to go into our uh probably in proposal controllers and we do have a task controller so let's go look at our task controller we may be nice enough that we have if you look here we have a new task we have new overhead we have delete task delete overhead edit task edit overhead calc hours uh not sure why we need that but let's wow we have like a whole bunch of nice little things here so we could probably take this whole thing and use this as a secondary controller uh let's go ahead and do that let's see what we can do if we can just take our test controller and that's going to be up here so that we don't keep piling on to our hello controller which [Music] is uh where do we put it it is not in our model it is not in our row mappers it is here we go yeah so so what we can do I'm hoping yep there we go so we got our task controller this should be now he's going to be RBS ands demo uh do demo and then he's not in the controller anymore and so he should be able to take everything here so we're just going to take all of these and convert these over I think they're all going to have the same names just moved some packages around so as you see like this is a nice thing about an objectoriented design is that you can use things over and over again granted we technically we should be we could just like have all of this sitting in a library somewhere that we linked to but for here we're going to do it uh let's see did we need a I don't think we need the serlet HTTP serlet request let's go look there uh let's see I know we have a request somewhere in here don't we uh we have a request mapping uh let's see do we have just a request yeah there we go let's see if these uh if we go to our task controller and we probably don't need him so we got that let's see how close this gets so if we try to do this let's see if these things like connect in on us I'm guessing they won't but hey let's see how close we got so we go back to our home log in let's pick a project um actually let's go back to projects let's get one that's got a task let's try to edit it first and then it looks like it's not building that right so if we do okay let's go look at that first let's fix that because what we want it to do is we do not want it to do a oh here we go okay so if we do select task I don't think we want to do that we just want to do a sledit task and we don't want to do an overhead we want to do a slash edit overhead and let's see and we need to do those let's try that first we'll get those two corrected then we'll come back and figure out this little form thingy that it's doing because it's doing some gits and I don't think it should yeah see those should be I think for new overhead let's go look at those real uh let's go look at our page real quick okay so if we come in here and we log in and we pick one and I think we said edit as our first one so edit's still not working but let's see if it's getting as closer so yes so it does edit task and it gives us a 13 and a 15 and we can see here oh good now we're starting to get some errors and it is uh template minor oh because we don't have our templates in that makes sense so if we come back and these are going to be uh there's probably a couple of them so if we jump all the way down here we're going to have to rename some stuff I bet you uh let's see if we go to our web app resources nope sorry web INF uh views we probably need our task form and what was the other thing we're doing it was a overhead uh do we have anything else that's a task or an overhead doesn't look like it so let's do those two and those are going to come over here now we're going to just rename them and see since they're they're not going to work exactly but hey we're going to get close uh let's see let's shrink that down so if we go here to our templates then we need to take him see if we can rename him to just HTML and we're going to rename him to HTML and these guys are going to be broken of course because we're going to have to convert our files over again like we've done before so now if we run them and so let's pick one Let's do an edit and now we're able to edit let's see what if we do a new we're not able to do a new uh that's because it's still doing some funkiness in the new so let's go back to that and try to figure out why it's doing that we do a new uh new task new task submit it's going to do get element by ID new task form. submit and it's going to get the uh new task form and it's going to submit a get but let's just not do that I don't think we need that let's just change our window location because I think what we probably need is Ed task and it probably just needs to be uh we probably need the project ID I bet we do I bet we need the project ID so if we do a new task submit it's going to be for that it's going to be uh let's see we can do that plus project ID and if we do that let's go see if that works if we do a new task for the project I think that's what we had right uh I had edit oh let's we want it to be that's going to be new task if we go here and we give it an ID okay so it doesn't like that so let's go look at our let's actually look at what we're doing instead of guess our way through it uh let's see this is the one that we want this is the one that we don't want okay so this is the one we got now so if we do so we have headit we know edit task is working or at least we're getting to our form so new task uh it does have a git and he's looking for a project ID parameter so if we go look at that uh let's see so if we do new task with the project ID um oh oh it's because there we go okay so it's that easy so it's Capital project uh Capital ID in the project that makes a lot of sense let's go to project form and this is just going to be new task project ID equals and then let's see we probably want that what was the other one so that's new task and the other one was uh overhead so we don't need this new task form thing I don't sure why we use that at all new overhead probably going to be the same thing so let's just [Music] do [Music] here and he's going to be new overhead and I bet we will then be ready to jump into next episode we're going to start putting a couple more pages together here if that works so let's go here let's go back to this wh hello there we go so if we come in here let's just do that so if we do a new task we are broken if we do a new overhead oh do like that at all okay uh new overhead oh wait so what do we call it new oh add overhead oh come on where did it go if we go down here there we go add over oh so it's new overhead submit new overhead submit let's see what it says in our task there's new overhead project ID it's a get so it should be new overhead let's see if we got that right new overhead project ID equals oh I need to send it a project I that's where the problem is so for both of those I now need to go to the new task and so new task submit needs to be have that project ID so now we have to do our little th on click equals that and that and that and I think that's going to get it and then because I think that's what we had when we did it before when we do a th on let's see let's go find that uh on click yep so now we just go down [Music] here and this one's going to be a th and that's going to be do we have it yep and that's going to be the project ID so let's go see if those work now and then we will be ready to dive into actually hooking these things up so let's go here let's log in let's pick one so if we do new uh new is not hitting anything add overhead is not doing anything uh if we go to the edits I don't think we got this edit fixed yet oh we did so we have the edits we do not have the news done so let's go look at that and see if it got the ID if we go to uh in here new ah so it's not taking that properly uh what did we miss so we did oh this one we know it's supposed to be like that so if we look it should be oh we didn't close it and that means that's overhead submit and we need this one probably same thing didn't close it now one more time let's give it a shot see how this works and hopefully now we will see it come in it's the fun of being a developer when we have these kinds of little things luckily it's pretty quick to go through spin through these things so oh we already checked the edits so that's good check our task new task nice ugly form new overhead there we go so so now we got to we can plug these suckers in and that's what we're going to do next time is we'll go ahead and get those things connected in and we're getting pretty darn close to being able to click on all our stuff uh this was one there's this little thing that I'm not sure this does anything useful uh let's see I think it doesn't yeah I think it was supposed to add something there oh it does okay so it is just adding that stuff in so all right cool uh there we go and that'll wrap this one up sorry if we went a tad long uh but next time around like I said we're going to continue putting these things together we are slowly building out a you know moderately useful application we'll do some more cleanup some additional stuff next time and just keep chugging along as always shoot us an email at info@ develop order.com if you have any questions otherwise go out there and have yourself a great day a great week and we will talk to you next time [Music] time
Transcript Segments
[Music]
well hello and welcome back we are
continuing working on our sort of you
know plugging up uh con connecting out
out connecting out our application and
cleaning that up a little bit uh one
little thing I was just noticing here is
if we look we've got these things are
not in the same container so let's go
look at that real quick if we go here
there's a field
set there's a
row uh let's see there's a
row there's a field set so it's probably
that extra little div Wonder if we
delete that guy that's probably what we
want is the div around those two field
sets so let's go fix that real quick on
our form and then what we're going to do
uh first let's see see if I
go field set and I want the next one
down which is going to be this one I've
got this div somewhere ah uh oh as I've
got it's I've got a big if
there
and then it's going to go within that
diff so what we need to
do is oh I wonder why and we've got an
extra Row in there as well which we
probably don't
need so let's
first I get rid of that let's go back to
our field sets put a row between
them and then here let's just call this
a
span and see
if uh somewhere down here there we go
okay so it did update it we'll see that
looks uh because what we're going to do
now is actually we want to plug in this
so when we do an on click we're getting
a totally
broken um because it's supposed to go to
edit task which probably we don't have
that wired up yet I bet so if we
go uh edit
project there we go edit task and we
give it a number let's
see yeah yeah so we've got to hook a
couple of things up so first things uh
let's go look at that let's see if we
got our see if our display is
okay
and so if we just pick a project let's
get rid of that let's jump down here
let's log
in and let's just pick a project and
Okay so we've got those they've come up
but they're still Within
uh they're not set the same way we'll
we'll fix that display later so there's
a couple things we want to do we want to
do let's see is this going to give us
anything so new task it's not getting us
anything useful let's go look at that uh
if we look at wh let's go back here so
we've got a new task and an add overhead
item so let's go look for new task
first it is probably yep so it does new
task
submit I'm not sure why we want to do a
new task
submit uh
um I guess cuz that's a get so let's
just do
um oh it does have a project
ID well let's go look let's figure out
what this is supposed to look like so
new task and new overhead do we have
those in our hello
controller I think we had
nope let's see do we have a task at all
we do have a
task uh let's see we have
projects
and here we go we do have edit no that's
edit
project we have dashboard greet test Ops
register delete op oh Ops we've already
done because we got
that and so we do not
have we have a new p password verify
edit user okay so the next thing we're
going to do is let's go to uh let's do
our tasks first so we're going to go
back and
steal from our prior
application I believe it's here nope uh
let's see there we go Source main Java
com get our way into our
controllers we may look out
uh we do not have a oh am I in this
one I am in this project okay so that's
why it all looks
familiar let's go down here to this
one where it is
different so come in here and we're
going to go into
our uh probably in proposal
controllers and we do have a task
controller so let's go look at our task
controller we may be nice enough that we
have if you look here we have a new task
we have new overhead we have delete task
delete overhead edit task edit overhead
calc hours uh not sure why we need that
but let's wow we have like a whole bunch
of nice little things
here so we could probably take this
whole thing and use
this as a secondary
controller uh let's go ahead and do that
let's see what we can do if we can just
take our test
controller and that's going to be up
here so that we don't keep piling on to
our hello controller which
[Music]
is uh where do we put it it is not in
our
model it is not in our row
mappers it
is here we
go yeah so so what we can
do I'm hoping yep there we go so we got
our task controller this should be now
he's going to be RBS ands
demo uh do
demo and then he's not in the controller
anymore and so he should be able to take
everything
here so we're just going to take all of
these and convert these
over I think they're all going to have
the same names just moved some packages
around so as you see like this is a nice
thing about an objectoriented
design is that you can use things over
and over again granted we technically we
should be we could just like have all of
this sitting in a library somewhere that
we linked to but for here we're going to
do it uh let's see did we need a I don't
think we need the serlet HTTP serlet
request let's go look
there uh let's
see I know we have a request somewhere
in here don't
we uh we have a request
mapping uh let's see do we have just a
request yeah there we
go let's see if
these uh if we go to our task
controller and we probably don't need
him
so we got
that let's
see how close this
gets so if we try to do this let's see
if these things like connect in on
us I'm guessing they won't but hey let's
see how close we got so we go back to
our home log
in let's pick a project um actually
let's go back to
projects let's get one that's got a task
let's try to edit it
first and then it looks like it's not
building that right so if we
do okay let's go look at that first
let's fix that because what we want it
to do is we do not want it to do
a oh here we go
okay so if we do select
task I don't think we want to
do that we just want to do a sledit task
and we don't want to do an overhead we
want to do a slash edit
overhead
and let's
see and we need to do those let's try
that first we'll get those two corrected
then we'll come back and figure out this
little form thingy that it's
doing because it's doing some gits and I
don't think it
should yeah see those should
be I think for new overhead let's go
look at those real uh let's go look at
our page real quick
okay so if we come in here
and we log in and we pick one and I
think we said edit as our first one so
edit's still not working but let's see
if it's getting as closer so yes so it
does edit task and it gives us a 13 and
a
15 and we can see here oh good now we're
starting to get some errors and it is uh
template minor oh because we don't have
our templates in that makes sense so if
we come back and these are going to be
uh there's probably a couple of
them so if we jump all the way down here
we're going to have to rename some stuff
I bet you uh let's see if we go to our
web app
resources nope sorry web
INF uh views we probably need our task
form and what was the other thing we're
doing it was a
overhead uh do we have anything else
that's a task or an overhead doesn't
look like it so let's
do those two and those are going to come
over here now we're going to just rename
them and see since they're they're not
going to work exactly but hey we're
going to get close uh let's see let's
shrink that down so if we go here to our
templates then we need to take
him see if we can rename him to
just
HTML and we're going to rename
him to HTML and these guys are going to
be broken of course because we're going
to have to convert our files over again
like we've done before so now if we run
them and so let's pick one Let's do an
edit and now we're able to edit let's
see what if we do a new we're not able
to do a new uh that's because it's still
doing some funkiness in the new so let's
go back to that and try to figure out
why it's doing that we do a new uh new
task new task submit it's going to do
get element by ID new task form.
submit and it's going to get
the uh new task
form and it's going to submit a get but
let's just not do that I don't think we
need that let's just change our window
location because I
think what we probably need is Ed task
and it probably just needs to
be uh we probably need the project
ID I bet we do I bet we need the project
ID so if we do a new task submit it's
going to be for that it's going to be uh
let's see we can do that plus project
ID and if we do
that let's go see if that works if we do
a new task
for the
project I think that's what we had right
uh I had edit oh let's we want it to be
that's going to
be new
task if we go here and we give it an ID
okay so it doesn't like that so let's go
look at our let's actually look at what
we're doing instead of guess our way
through it uh let's see this is the one
that we want this is the one that we
don't want okay so this is the one we
got now so if we
do so we have headit we know edit task
is working or at least we're getting to
our form so new task uh it does have a
git and he's looking for a project ID
parameter so if we go look at
that uh let's see
so if we do new task with the project
ID um
oh oh it's
because there we go okay so it's that
easy so it's Capital project uh Capital
ID in the project that makes a lot of
sense let's go to project form and this
is just going to be new
task project ID
equals and then let's see we probably
want that what was the other one so
that's new
task and the other one was uh overhead
so we don't need this new task form
thing I don't sure why we use that at
all new overhead probably going to be
the same
thing so let's just
[Music]
do
[Music]
here
and he's going to be new
overhead and I bet we will then be ready
to jump
into next episode we're going to start
putting a couple more pages together
here if that works so let's go here
let's go back to this
wh hello there we go so if we come in
here let's just do that so if we do a
new task we are broken if we do a new
overhead oh do like that at all okay uh
new
overhead oh wait
so what do we call it new oh add
overhead oh come on where did it
go if we go down here there we go add
over oh so it's new overhead
submit new overhead submit let's see
what it says in our
task there's new
overhead project
ID it's a get so it should be new
overhead let's see if we got that
right new overhead project ID equals oh
I need to send it a project I that's
where the problem is
so for both of those I now need to go to
the new task
and so new task submit needs to be have
that project
ID so now we have to do our little th on
click
equals that
and that and
that and I think that's going to get it
and then because I think that's what we
had when we did it before when we do a
th on let's see let's go find
that uh on click yep so now we just go
down
[Music]
here and this one's going to be a
th and that's going to be do we have it
yep and that's going to be the project
ID so let's go see if those work now and
then we will be ready to dive into
actually hooking these things up so
let's go here let's log
in let's pick one so if we do
new uh new is not hitting anything add
overhead is not doing anything uh if we
go to the edits I don't think we got
this edit fixed yet oh we did so we have
the edits we do not have the news done
so let's go look at that and see if it
got the ID if we go
to uh in here
new ah so it's not taking that properly
uh what did we miss so we
did oh this one we know it's supposed to
be like
that so if we look it should be oh we
didn't close
it and that means that's overhead submit
and we need
this one probably same thing didn't
close
it now one more time let's give it a
shot see how this
works and hopefully now we will see it
come in it's the fun of being a
developer when we have these kinds of
little things luckily it's pretty quick
to go through spin through these things
so oh we already checked the edits so
that's good check our task new task nice
ugly form new overhead there we go so so
now we got to we can plug these suckers
in and that's what we're going to do
next time is we'll go ahead and get
those things connected in and we're
getting pretty darn close to being able
to click on all our stuff uh this was
one there's this little thing that I'm
not sure this does anything useful uh
let's
see I think it doesn't yeah I think it
was supposed to add something
there oh it does okay so it is just
adding that stuff in so all right
cool uh there we go and that'll wrap
this one up sorry if we went a tad long
uh but next time around like I said
we're going to continue putting these
things together we are slowly building
out a you know moderately useful
application we'll do some more cleanup
some additional stuff next time and just
keep chugging along as always shoot us
an email at info@ develop order.com if
you have any questions otherwise go out
there and have yourself a great day a
great week and we will talk to you next
time
[Music]
time