📺 Develpreneur YouTube Episode

Video + transcript

Spring Boot - Forms Edit/Submit

2024-01-30 •Youtube

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. We dig into another setup of forms and migrating controller code. This is part 1 of a brief, 2-part series.

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 from an old Apache
Tomcat JSP application updating it to
Spring Boot and walking through a few
other things along the way just getting
comfortable with spring boot getting
comfortable with bootstrap five and also
using time Leaf which is basically the
you the core underlying uh sort of
templating type thing that uh we use
with instead of JSP that we use with the
spring boot last time around we were
playing around with this uh basically
with trying to get a an index into a
list that we sent in so when we save it
that it would show properly here so that
CU this one we're not actually we're
just like jumping into a value we're
going into that value and we're saying
hey let's see what it resolves to uh
because it's an ID versus a string and
we're running into a few issues with it
uh and it was basically because of doing
this math that now what we've
got is this list so if you go back to
this
page and look at this list where it's
difficulty it's just saying Hey I want
the text that is from the list the
difficulty list and I want to get the
one that is my value which is test.
difficulty that's going to be my integer
I'm just going to subtract one from it
and then I'm going to get the name of
that and we had a couple little issues
with it I think it was because we were
not doing this properly within the
parenthesis but now so you can see just
to see how it looks is I've got my list
I'm just going to do a get out of it and
I'm going to get it based on the uh
index which here you can see bra
bracketed by
parentheses um I subtract one from it
because it's a Zero versus a you know
it's like a zero starting zero indexed
array kind of thing and then I'm going
to get the name and so now if we do it
if I go to here like this one that was
simple I'm going to set it to average
save it and boom I've got
my I shouldn't click on it because
that's clickable but um so now it is
displaying properly now just carrying
forward we want to do sort of the same
thing so we've got our task now we can
create a new task we can cancel we can
save don't know if we got our update I
mean our delete so if we do delete uh it
is not deleting so let's go look at our
delete real quick and see why that's not
working
and it looks like uh project ID is not
readable or has an invalid one so we
probably don't have
here oh here we go so select
task Let's
see we may not be building
our link
properly uh let's see I think well let's
go look at our so if we come in here
it's going to do select
task o That's select uh if we do delete
oh that's in
here this is going to be from the task
itself so we're going to go look to our
task
form so we're going to come over here
and we're going to go to
[Music]
our go find our template for our task
there's our task form and if we look up
here uh let's see let's go look for
delete so delete is just going to do
delete task and it's going to give it an
ID and I think what we're going to find
here is if we go look at our delete for
uh it's probably not in here it's
probably in our other
controller uh let's see we had hello
controller and we had what was our other
controller uh we called it
task controller there we go and so if we
go look for delete here I bet we had
here oh it's an
ID T.G project ID so what's it
complaining about let's close that uh it
says it's not readable okay
so uh let's go look here at our
task
Dao so we get a a task we look at our
regular task model let's make sure we've
got that right and we don't have some
sort of which we probably would get an
issue so if we look
here project ID yep project
ID and it's complaining that what was it
again uh it's not readable or it has an
invalid
getter does it turn the okay so let's go
look at uh get project
ID
so that should be okay so if we do get
project
ID returns a project oh it's probably
because it's
not where did I put that it's probably
the wrong
one oh yeah for some reason get does not
have a this
dot uh wow we've got that in a couple of
these so that's a nice little bug that
we we found there is that for some
reason we've got some of these that do
not
have I'm not sure why we suddenly got
this but let's just do it like
this
um we have got a whole bunch of these
that came across and did not use the
this so they're actually just returning
a local variable
instead let's see this this there's
description this name so that could
cause us all sorts of little fun
issues so let's make sure we properly
adjust that out I think we're going to
be okay in several of these
because it's going to do it by default
but just to be safe let's make sure
there we do that now if we run
it we should be able
to
uh we got to reset log
in let's pick one that has a task here
we go so let's take this task and let's
try to delete it and it still didn't
delete it so let's see what it says
now oh so now it came through so let's
go see why maybe it didn't uh this is
going to be in our task
[Music]
controller uh it's going to go in and do
a delete so let's go look at the Tas D
Dao and see why it might not have
deleted and where did we put our model
blah blah mapper you it's up here
somewhere right there it
is I'm going to take a look at our Tas
Dao if we look at
delete so that's where task ID equals
that uh let's just
do we're just going to keep it simple
here and we're going to do this so we're
going to print the
SQL and we're going to do
the
ID well except for we can't use a p
print we're just going to a regular
print
wh and let's make
sure uh what else did we want to look oh
let's make sure we're sending the task
IDE across for from the
[Music]
controller uh and we just come we do it
yep and then we're going to go do that
edit get project ID so let's see what
that does for
us so we're going to run
this and we're going to jump over here
we're going to
reset and we're going to go up here
we're going to try to
delete and let's see what it does in the
output oh it does nothing interesting so
we may have delete task in Let's see we
have that in two
places so we have it there did we have
it in the hello controller as
well uh where did my hello
controller we have delete
opportunity so we have delete op
interesting so let's go look
at task well not task
form
and if we go look
at uh Delete where's
delete there it is delete
task let's make sure we've got the right
d ID for our delete
task so if we inspect that element let's
make sure we're getting our values
across
properly uh delete task 23
so now if we do
that we delete
task
23 it worked so we're not getting we
weren't building it right somehow let's
go look back at that let's go look
at uh let's see
that
[Music]
should
interestingly enough it's not going
there let's see let's go look at ours a
little
bit oh I wonder if it's a uh on
click
let's do uh we can't do
that let's go look at that
again and let's go fix our
link and so we can run
it let get uh well let's actually let's
keep a look at what we were building
here uh let's see oh we can just oh uh
yeah pick one pick
one so it's going to come in and he's
going to
do location.href we may have
to okay so it's not s interestingly
enough it
[Music]
is having an
issue it's doing delete oh because it's
a button because it's a button Ah that's
problem is it's treating it as a
submit one of those fun little things
because we're in a form it's going to
see that button and it's going to try to
send it through submit instead so if we
come through
here and instead just change it to a div
everything else is the same uh it's on
yeah onclick yep that all works so now
we should be able
to come in
here log in uh pick one wh pick
one and delete
that and now we're there so there we go
that's one of those fun little things
with a
form is that if you've got a button an
actual Button as opposed to something
else it's going to try to send that
through to the submit and so that's the
process that we were we had broken so we
have our tasks now working we can do
everything with that let's take a look
at our overhead now if we immediately go
in we've got an issue here with the new
overhead so let's go take a look at uh
let's make sure first I look at that is
that some
weird uh no he's probably okay so let's
go look at that page actually we
probably have yep there we
go and we've got
uh project idea being
class it's not readable oh so we may
have this also that this issue that we
had we have in the overhead so let's go
look at our overhead real
quick and yep there we go we got a bunch
of
these so let's just walk through
this uh let's see return this
return
this return this could be one of those
things that this is because we were
working on an earlier version of java it
was not so picky about the
thises and figuring out scope so let's
go look at this real quick and see if
that fixed it to get us to creating a
new
opportunity or I'm sorry overhead okay
we still get an error let's see if it's
the same thing did we get it somewhere
else uh now it is complain yeah project
ID is not
readable uh it's probably in Ely F
thingss so let's see if it tells us
where it did that so it's probably in
the form
itself overhead form 43 so let's go look
at our overhead form
that's going to be over here line
43 uh maybe we haven't converted
everything yet uh could be 43 here field
is
that so project ID we don't have sitting
there maybe so let's go look at our task
controller for our
new
overhead
and we have here project ID load over
for head form project ID so if we go
to
load overhead
form uh oh we don't have a project
ID we have a user ID but we don't have
just a straight project ID oh do we
let's see let's let's go look at our
overhead form uh do we instead want that
to
be I think we want that to be let's say
if that's that let's see if we make it
path I think that's what we really
wanted that to be
anyways let's try that before we change
this all up cuz I think that's what we
wanted is we wanted to bring it we
didn't want to send it separate we
wanted to bring it out of the controller
itself so if we do path we're going to
pull it off of that uh the object that
we're working with if we do if we don't
like we did before if we have a field
then it's going to be looking for
something that we have sent like a
specific value we have sent in let's see
if we got something
different uh valid property project ID
okay same thing so let's go look
here
if we go look not we w't look at oh
because I didn't
save that makes a difference uh let's
see so there we go so we've got our
type that should be our
path and it is
a I
think what we want is do we want our
let's go back look at our task real
quick uh task
form it's pathed we need
[Music]
our uh here we're using value but we can
go
here oh no we are still use I'm sorry
path is the old one my mistake so we can
do th field with a star so if we come to
our
overhead that's the problem when we mix
a few things so if this is th
field star that should
work uh let's see that's going to be a
value and a field all right so we should
be
good is that right that should be
right and then we'll have to see just to
make sure we've got case
correct because if we do
that uh overhead in the model if we look
there uh let's see look at it so
get uh may we may need the capital I
think we probably need this to
be a capital
I let's try that real
quick think that's it I think it's a
case sensitivity issue
there let's reset let's get
going let's go here let's go here we got
an
error if it's not that then it
is okay so type so now we've got to go
in here we probably got type somewhere
type uh th
field so type is not readable or has an
invalid
getter
so for overhead let's go look
at
type we have set type we have oh it's
get type ID okay so we need to go back
over
here
uh this is going to be
type ID I wonder if difficulty is the
same yep difficulty is the
same and so now let's try it let's line
up our values
properly and now let's see if we can at
least get our form
up and there we go so now we're getting
into it so it's probably a good place to
pause for now we're going to come in
next episode and we're going to go ahead
and just follow through hooking up our
our buttons again sort of reinforce some
of these things I wonder if we're going
to have the same issue with casting
these values and uh we're just going to
keep chugging along if you have any
questions shoot 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
Transcript Segments
1.35

[Music]

27.4

well hello and welcome back we are

29.16

continuing our

30.48

Journey as it were from an old Apache

34.04

Tomcat JSP application updating it to

37.32

Spring Boot and walking through a few

39.04

other things along the way just getting

40.52

comfortable with spring boot getting

42.32

comfortable with bootstrap five and also

45.64

using time Leaf which is basically the

47.92

you the core underlying uh sort of

51.079

templating type thing that uh we use

53.68

with instead of JSP that we use with the

56.399

spring boot last time around we were

58.559

playing around with this uh basically

60.519

with trying to get a an index into a

65.32

list that we sent in so when we save it

68.28

that it would show properly here so that

71.6

CU this one we're not actually we're

72.88

just like jumping into a value we're

74.799

going into that value and we're saying

76.479

hey let's see what it resolves to uh

79.64

because it's an ID versus a string and

82.4

we're running into a few issues with it

85.4

uh and it was basically because of doing

88.56

this math that now what we've

91.68

got is this list so if you go back to

95.6

this

96.479

page and look at this list where it's

100.28

difficulty it's just saying Hey I want

102.32

the text that is from the list the

104.96

difficulty list and I want to get the

106.92

one that is my value which is test.

110.36

difficulty that's going to be my integer

112.92

I'm just going to subtract one from it

115.04

and then I'm going to get the name of

116.52

that and we had a couple little issues

118.759

with it I think it was because we were

120.32

not doing this properly within the

123.719

parenthesis but now so you can see just

126.399

to see how it looks is I've got my list

128.64

I'm just going to do a get out of it and

130.2

I'm going to get it based on the uh

132.64

index which here you can see bra

135.519

bracketed by

137.56

parentheses um I subtract one from it

140.84

because it's a Zero versus a you know

142.68

it's like a zero starting zero indexed

144.959

array kind of thing and then I'm going

146.64

to get the name and so now if we do it

148.76

if I go to here like this one that was

150.4

simple I'm going to set it to average

153.8

save it and boom I've got

157.12

my I shouldn't click on it because

159.8

that's clickable but um so now it is

162.2

displaying properly now just carrying

164.599

forward we want to do sort of the same

166

thing so we've got our task now we can

167.879

create a new task we can cancel we can

170.48

save don't know if we got our update I

172.64

mean our delete so if we do delete uh it

175.04

is not deleting so let's go look at our

176.92

delete real quick and see why that's not

178.92

working

180.959

and it looks like uh project ID is not

185.56

readable or has an invalid one so we

188.36

probably don't have

190.72

here oh here we go so select

195.56

task Let's

198.519

see we may not be building

201.959

our link

208.12

properly uh let's see I think well let's

211.64

go look at our so if we come in here

213.159

it's going to do select

215.04

task o That's select uh if we do delete

219.12

oh that's in

220.439

here this is going to be from the task

222.84

itself so we're going to go look to our

225.12

task

226.84

form so we're going to come over here

229.799

and we're going to go to

232.14

[Music]

233.4

our go find our template for our task

238.04

there's our task form and if we look up

241.84

here uh let's see let's go look for

246.4

delete so delete is just going to do

248.76

delete task and it's going to give it an

250.879

ID and I think what we're going to find

253.4

here is if we go look at our delete for

256.799

uh it's probably not in here it's

258.16

probably in our other

260.919

controller uh let's see we had hello

262.88

controller and we had what was our other

266.4

controller uh we called it

270.56

task controller there we go and so if we

273.4

go look for delete here I bet we had

277.32

here oh it's an

279.4

ID T.G project ID so what's it

282.32

complaining about let's close that uh it

285.6

says it's not readable okay

291.88

so uh let's go look here at our

296.36

task

298.039

Dao so we get a a task we look at our

300.4

regular task model let's make sure we've

302.24

got that right and we don't have some

303.84

sort of which we probably would get an

306.759

issue so if we look

309.24

here project ID yep project

314.039

ID and it's complaining that what was it

317.32

again uh it's not readable or it has an

319.639

invalid

321.56

getter does it turn the okay so let's go

324.6

look at uh get project

328.479

ID

331.4

so that should be okay so if we do get

333.72

project

335.28

ID returns a project oh it's probably

338.68

because it's

341.56

not where did I put that it's probably

343.88

the wrong

344.759

one oh yeah for some reason get does not

348.72

have a this

352.08

dot uh wow we've got that in a couple of

355.4

these so that's a nice little bug that

359.28

we we found there is that for some

360.56

reason we've got some of these that do

362.199

not

364.319

have I'm not sure why we suddenly got

367.08

this but let's just do it like

370.599

this

374.16

um we have got a whole bunch of these

376.52

that came across and did not use the

379.24

this so they're actually just returning

381

a local variable

382.72

instead let's see this this there's

386.96

description this name so that could

389.479

cause us all sorts of little fun

398.16

issues so let's make sure we properly

401.84

adjust that out I think we're going to

403.52

be okay in several of these

406

because it's going to do it by default

408.44

but just to be safe let's make sure

411.479

there we do that now if we run

415.639

it we should be able

418.4

to

420.72

uh we got to reset log

423

in let's pick one that has a task here

426.12

we go so let's take this task and let's

427.919

try to delete it and it still didn't

430.36

delete it so let's see what it says

432.639

now oh so now it came through so let's

435.759

go see why maybe it didn't uh this is

438.479

going to be in our task

439.48

[Music]

442.599

controller uh it's going to go in and do

445.28

a delete so let's go look at the Tas D

448.12

Dao and see why it might not have

453.16

deleted and where did we put our model

457.639

blah blah mapper you it's up here

461.08

somewhere right there it

462.68

is I'm going to take a look at our Tas

465.199

Dao if we look at

470.24

delete so that's where task ID equals

474.199

that uh let's just

477.44

do we're just going to keep it simple

480.919

here and we're going to do this so we're

483.4

going to print the

487.68

SQL and we're going to do

490.68

the

493.56

ID well except for we can't use a p

496.36

print we're just going to a regular

497.56

print

501.919

wh and let's make

505.039

sure uh what else did we want to look oh

507.199

let's make sure we're sending the task

508.4

IDE across for from the

509.78

[Music]

511.479

controller uh and we just come we do it

514.039

yep and then we're going to go do that

515.279

edit get project ID so let's see what

517.44

that does for

519.719

us so we're going to run

522.88

this and we're going to jump over here

525.24

we're going to

528.2

reset and we're going to go up here

530.8

we're going to try to

533.24

delete and let's see what it does in the

536.12

output oh it does nothing interesting so

539.76

we may have delete task in Let's see we

541.92

have that in two

545

places so we have it there did we have

547.399

it in the hello controller as

551.04

well uh where did my hello

555.56

controller we have delete

557.76

opportunity so we have delete op

561.04

interesting so let's go look

564.2

at task well not task

568.12

form

570.64

and if we go look

572.56

at uh Delete where's

580.16

delete there it is delete

583.72

task let's make sure we've got the right

586.04

d ID for our delete

588.64

task so if we inspect that element let's

592.48

make sure we're getting our values

593.64

across

596.24

properly uh delete task 23

601.24

so now if we do

605.279

that we delete

608.56

task

616.36

23 it worked so we're not getting we

619.079

weren't building it right somehow let's

620.959

go look back at that let's go look

626.959

at uh let's see

632.2

that

633.01

[Music]

642.04

should

643.839

interestingly enough it's not going

646.959

there let's see let's go look at ours a

648.68

little

653.12

bit oh I wonder if it's a uh on

658.04

click

659.56

let's do uh we can't do

663.399

that let's go look at that

666.44

again and let's go fix our

674.399

link and so we can run

679.72

it let get uh well let's actually let's

682.76

keep a look at what we were building

686.399

here uh let's see oh we can just oh uh

689.44

yeah pick one pick

693.72

one so it's going to come in and he's

696.6

going to

701

do location.href we may have

705.2

to okay so it's not s interestingly

714.2

enough it

715.97

[Music]

717.959

is having an

723.72

issue it's doing delete oh because it's

725.959

a button because it's a button Ah that's

728.68

problem is it's treating it as a

731.92

submit one of those fun little things

734.04

because we're in a form it's going to

735.72

see that button and it's going to try to

737.079

send it through submit instead so if we

739.839

come through

744.76

here and instead just change it to a div

747.519

everything else is the same uh it's on

749.88

yeah onclick yep that all works so now

752.519

we should be able

754.68

to come in

757.68

here log in uh pick one wh pick

762.959

one and delete

766.639

that and now we're there so there we go

769.839

that's one of those fun little things

771.36

with a

772.279

form is that if you've got a button an

774.68

actual Button as opposed to something

776.36

else it's going to try to send that

777.88

through to the submit and so that's the

780.399

process that we were we had broken so we

783.24

have our tasks now working we can do

784.8

everything with that let's take a look

786.44

at our overhead now if we immediately go

788.32

in we've got an issue here with the new

792.6

overhead so let's go take a look at uh

795.16

let's make sure first I look at that is

797.839

that some

799.279

weird uh no he's probably okay so let's

802.8

go look at that page actually we

804.079

probably have yep there we

806.8

go and we've got

811.279

uh project idea being

813.839

class it's not readable oh so we may

816.36

have this also that this issue that we

818.48

had we have in the overhead so let's go

822.199

look at our overhead real

824.36

quick and yep there we go we got a bunch

827.24

of

829.079

these so let's just walk through

835.12

this uh let's see return this

839.68

return

841.44

this return this could be one of those

844.399

things that this is because we were

845.68

working on an earlier version of java it

848.079

was not so picky about the

850.6

thises and figuring out scope so let's

854.079

go look at this real quick and see if

855.6

that fixed it to get us to creating a

859.32

new

865.839

opportunity or I'm sorry overhead okay

868.839

we still get an error let's see if it's

870.32

the same thing did we get it somewhere

874.04

else uh now it is complain yeah project

878.16

ID is not

882.16

readable uh it's probably in Ely F

884.56

thingss so let's see if it tells us

887.88

where it did that so it's probably in

890.199

the form

894.04

itself overhead form 43 so let's go look

897

at our overhead form

900.959

that's going to be over here line

904.759

43 uh maybe we haven't converted

907.32

everything yet uh could be 43 here field

912.44

is

917.199

that so project ID we don't have sitting

921.079

there maybe so let's go look at our task

922.759

controller for our

925.6

new

927.6

overhead

929.519

and we have here project ID load over

932.56

for head form project ID so if we go

936.68

to

938.839

load overhead

944.279

form uh oh we don't have a project

948.279

ID we have a user ID but we don't have

953

just a straight project ID oh do we

958.12

let's see let's let's go look at our

959.079

overhead form uh do we instead want that

962.279

to

968.079

be I think we want that to be let's say

972.759

if that's that let's see if we make it

975.279

path I think that's what we really

977.519

wanted that to be

980.68

anyways let's try that before we change

983.959

this all up cuz I think that's what we

985.16

wanted is we wanted to bring it we

986.44

didn't want to send it separate we

987.56

wanted to bring it out of the controller

991.56

itself so if we do path we're going to

993.72

pull it off of that uh the object that

996.36

we're working with if we do if we don't

999.72

like we did before if we have a field

1001.279

then it's going to be looking for

1002.319

something that we have sent like a

1003.839

specific value we have sent in let's see

1006.399

if we got something

1009.68

different uh valid property project ID

1013.199

okay same thing so let's go look

1017.48

here

1019.399

if we go look not we w't look at oh

1021.24

because I didn't

1022.519

save that makes a difference uh let's

1025.52

see so there we go so we've got our

1027.6

type that should be our

1030.679

path and it is

1034.72

a I

1040.72

think what we want is do we want our

1043.439

let's go back look at our task real

1044.919

quick uh task

1046.48

form it's pathed we need

1049.21

[Music]

1050.72

our uh here we're using value but we can

1053.72

go

1054.84

here oh no we are still use I'm sorry

1057.2

path is the old one my mistake so we can

1059.44

do th field with a star so if we come to

1062.48

our

1067.36

overhead that's the problem when we mix

1069.4

a few things so if this is th

1071.52

field star that should

1074.72

work uh let's see that's going to be a

1077.44

value and a field all right so we should

1080.039

be

1081.84

good is that right that should be

1087.559

right and then we'll have to see just to

1090.28

make sure we've got case

1091.88

correct because if we do

1095.2

that uh overhead in the model if we look

1100.679

there uh let's see look at it so

1105

get uh may we may need the capital I

1107.919

think we probably need this to

1109.88

be a capital

1112.4

I let's try that real

1116.24

quick think that's it I think it's a

1118.36

case sensitivity issue

1120.64

there let's reset let's get

1124

going let's go here let's go here we got

1128.2

an

1129

error if it's not that then it

1132.919

is okay so type so now we've got to go

1136.159

in here we probably got type somewhere

1139.76

type uh th

1145

field so type is not readable or has an

1148.84

invalid

1150.039

getter

1153.28

so for overhead let's go look

1156.52

at

1159.28

type we have set type we have oh it's

1163.08

get type ID okay so we need to go back

1166.2

over

1167.24

here

1169.24

uh this is going to be

1171.44

type ID I wonder if difficulty is the

1174.32

same yep difficulty is the

1178.88

same and so now let's try it let's line

1182.76

up our values

1186.559

properly and now let's see if we can at

1189

least get our form

1191.84

up and there we go so now we're getting

1194.32

into it so it's probably a good place to

1197.559

pause for now we're going to come in

1198.799

next episode and we're going to go ahead

1200.88

and just follow through hooking up our

1202.52

our buttons again sort of reinforce some

1204.559

of these things I wonder if we're going

1205.679

to have the same issue with casting

1207.679

these values and uh we're just going to

1209.84

keep chugging along if you have any

1211.24

questions shoot us an email at info@

1213.2

developer.com and go out there and have

1215.88

yourself a great day a great week and we

1218.12

will talk to you next

1227.159

time