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. This short shows an Ajax call to avoid extra trips visible to the user.
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
well hello and welcome back we are continuing our little series of converting our application over from a Apache Tomcat JSP to a new fangled spring boot app we are in the middle of this part two as we're playing around with some uh some JavaScript and stuff like that what we wanted to do is we want to add some buttons so we can more easily navigate in particular we want to be able to say this is lost and Market lost so it comes off of our list so it just saves us from having to jump over here and then set the status which is just sometimes a bit of a pain so oh one of the things we wanted to fix was our alignment and if you notice now that we've got our alignments back together but let's go take a take a look at that loss so what we wanted to do is we're going to do an Ajax call but first we're going to create uh we'll come back to the Ed let's create this uh we're going to do lost project with an ID so we can probably steal similar to edit project uh let's see so if we go to is it in our now we got to figure out where we put it uh oops I don't want to put it there come on there we go okay we have a project controller so here we probably have actually probably have something very similar to this so we have Let's see we have a project report save project uh little project Report Form let's see what save project that may give us what we want so we're going to do uh let's see that's let's go ahead and keep our comments so this is then going to be called uh this is going to be hand a request to set the project to lost and then um just going to say none needed and this is going to be lost project and it is going to have uh like here we're going to use like we did with the uh I guess like the project report that would work as well did we use that for edit yep edit project is the same so if we look at that actually let's do it this way we're going to do it more like that uh so we got lost project it is going to be oh is not a PO um no we're going to make it a get we're going to make it really simple and so we've got our path variable which is is going to be our ID and then we're going to come in here so what we want to do uh is we're going to say uh let's see probably need some of this stuff so if we come in here uh let save project lost project so what we want to do is I wonder if I can make this just a straight up void and then it's just going to return we're going to find out in a minute uh there's a request there's our variable so we're going to come in we have a project that's a null we don't really need the users so we don't need any of that uh yes we do because we do want to make sure that um we're logged in what we call this because this is going to need to we're actually have to check this so we're going to say uh let's see if project ID greater than zero yep then we want to load the project and we also want to say here uh if uh project dot let's see what did we call that it's going to be the user so if we go to the project model you oh not user project so if we go to the project model is there a user ID there is a user ID so we should be able to go get uh get user oh it's case sensitive fine there we go so we want to get user ID and so we're gonna accidentally dragged and dropped so let's go back over to our project controller and here we're going to say if get user ID is equal to uh let's just do user dot I believe we called it user ID uh let's see get user ID we're going to find out let's see so we go look at user was it also get user ID or is it get ID uh it is probably get ID yep so it's get ID it's good cuz I just typoed that anyways so now it's like hey this has to you have to own it and in that case then what I can do is I can do project dot it's probably set status uh let's see well we can go look at our project real quick project uh let's see do we have our statuses up here somewhere yes we do so that's a stus status string uh so status is going to be equal to Lost so or capital L so we're going to say hey we're going to want to set status to Lost whoops capital and then need to save which we have like here's a good one right here we'll just take that same thing steal our code and then we get to return so let's see if that works um on the build so let's do that real quick but then we're going to have to make that call all right so it builds all right and then we're going to go to our projects and now what we need to do is we're need to Lost project with the ID which we've basically got that but what we're going to have to do is make that call a little bit different and how we do a call is we're going to come in and we're going to make a variable and we're going to call him uh X HTTP and he is going to be assigned to a new uh we're going to call it an X XL HTTP request and he doesn't need anything and then we're going to do X HTTP um actually we can probably just so we're probably just going to be able to do this with a get away with a an open because we don't really care what comes back so I think we will be able to get away with this usually you're going to create a function that you're going to call that's basically going to attach to that so it's like an event liser uh in this case I think what we can do is we can do a get I actually could have made it a post but oh well and then we're going to give it the URL which is this and then we're going to say true because we can just let this sucker run which is what that last one does and then we're going to do a send so it's actually super easy so we're just coming in we set it we create our object we tell it where to go we're going to send a get request and we're going to say hey just fire and forget we're going to send it and then we're going to hide our control so this should be assum this works this is to show you we can very quickly then get some updates going and not have to do all of the you know navigation kind of stuff and this something that comes very useful cuz we are end up using this and we're going to see this in a couple places uh particularly like I said we start copying stuff so now if I do a lost so that was app testing upwork let's see if I do lost H it did not do anything did I get an error uh it did not so let's come in here and is it called Lost project let's make sure I got that right lost project lowercase L uh let's make sure that's right right nope that's where it's a problem at least I think that's why um let's go do this let's just change this because I want to be mean uh no I'm let's not get crazy here okay so now if I reset this now let's see if this runs correctly and if it does and if I reset oh it is there did it tell me anything it did not so let's go in here and let's just do this real quick let's do uh system.out let's use our favorite we're just going to do a print line and instead of a debugger or anything like that we're just going to do this one real quick and we're going to say hey what is the ID and uh let's see let's do that here as well we're going to do our two IDs and let's make sure that those are working right okay that's a good start so let's jump onto that let's see if it's going to pick up our call and maybe it's not so I may have to go build our little catch function and if I do that it did not call so let's try that uh let's go back to where is that our projects and so instead now what we're going to have to do here is we're going to have to come in and we're going to have to do the uh check it so we're going to do X HTTP which is what we called it and then we're going to be looking on the on ready oh there you go on ready State change got that working that's going to be equal to a function and the function is just going to be let's just say uh let's do uh let's let's do this if oh sorry sorry wrong bracket or I want parenthesis not that so if I'm going to do if this dot ready State equals let's say four and and this is basically say is this correct status equals 200 oh that's probably what its problem is uh part of it let's go back to think I do this as a I go back here and do a string let's just do a string yeah uh where'd you go here wh oh need to save that but first I need to go back to my project controller and wherever I had that oh it's up here L project is going to be a string and we're just going to say success and that's going to get us everything we need so and we can probably tweak this a little bit so we're going to check this in a minute uh let's see so if we do that that's the end of the function so we need to open up the if let's do it this way let's pretty this up a little bit so we can read it so the if statement is just going to be alert call successful not sure if that'll actually fire off a lot of times it does not but let's do that anyway let's go ahead and fire this up and if we do that come to projects lost didn't give us the alert did it give us a an error it did aha um ah we got a 404 so lost project it does not like so let's see what did we do wrong let's see so let's go back and look at that if we go look at this guy oh he's gonna need that anyways because the model so he's gonna just do model review let's do this let's do that and here worst case is he's going to do R direct to projects so we're just going to do it that way uh let's see the last project there we go so if we call this outside of it it won't really matter because we're going to come back here if we call outside of it we're going to back to projects otherwise um then it's just going to get lost like we saw up over here uh where it was like hey I've got this page but it's a an error page so let's rebuild it and come over here wh if it'll log in or if it'll start the server projects lost lost and now it still did not give us that interestingly enough if we go look at the control panel uh console did not give us errors this time interesting so something's not right so if I do projects if I do lost project and give it a number like uh that one so let's just go look uh 27 okay so we got an error we got a type not found status 404 what did I miss here aha I was in the wrong file so let's take the same thing let's put it into the correct file H that was a pain and oh did I reset it no not yet restart it oh there we go um so I have an error somewhere here we go project ID oh it's not I project Ty see now there we go now it's starting to give me something useful uh okay so that should give me that and then let's go run it and when you run the code in the right project let's see if that actually does what we wanted to do there there we go no wonder it was given all kinds of issues that makes sense and so get rid my little print statements here and so we can either call it somewhere else or we can call call it on the fly like we saw here is now it's just there if we reset hey we lost those so we can quickly say oh let's get clean up some of those projects and boom they're all lost but now if I switch over to Lost I'll see all of those guys probably don't want that to be there when you're displaying loss there's actually probably and which I think maybe that'll be the next thing maybe we'll play around with this a little bit and make that conditional uh but we also want to I think actually probably the next thing we do we're come back next time around and we're going to be able to put a copy so now that we've gotten that we're going to come in here we're going to put a little copy button or basically say like uh create project something like that and we're going to walk through uh basically copying data from one item to another saving that and building that out so that will help us out as well but that would wrap it up for this time go out there and have yourself a great day a great week and we will talk to you next time three two one hello this is Rob with develop and or also known as building better developers wanted to announce that we have school. developin or.com feel free to check it out if you like any of this information any of the content that we've sent and you would like to see more you can come out you can enroll for free we have free courses we've got places for you to get better at just learning a technology or how to 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 educational format and a way for you to track your progress as you move forward becoming a better developer
Transcript Segments
well hello and welcome back we are
continuing our little series of
converting our application over from a
Apache Tomcat JSP to a new fangled
spring boot app we are in the middle of
this part two as we're playing around
with some uh some JavaScript and stuff
like that what we wanted to do is we
want to add some buttons so we can more
easily navigate in particular we want to
be able to say this is lost and Market
lost so it comes off of our list so it
just saves us from having to jump over
here and then set the status which is
just sometimes a bit of a pain so oh one
of the
things we wanted to fix was our
alignment and if you notice now that
we've got our alignments back together
but let's go take a take a look at that
loss so what we wanted to do is we're
going to do an Ajax call but first we're
going to create uh we'll come back to
the Ed let's create this uh we're going
to do lost project with an ID so we can
probably steal similar to edit project
uh let's see so if we go to is it in our
now we got to figure out where we put it
uh oops I don't want to put it
there come
on there we go okay we have a project
controller so here we probably
have actually probably have something
very similar to this so we have Let's
see we have a project report save
project uh little project Report Form
let's see what save project that may
give us what we
want so we're going to do uh let's see
that's let's go ahead and keep our
comments so this is then going to be
called uh this is going to be hand a
request
to set the project to
lost and then
um just going to say none
needed and this is going to be lost
project and it is going to
have uh like
here we're going to use like we did with
the uh I guess like the project report
that would work as well did we use that
for edit yep edit project is the same so
if we look at that actually let's do it
this
way we're going to do it more like
that uh so we got lost project it is
going to be oh is not a PO
um no we're going to make it a get we're
going to make it really
simple and so we've got our path
variable which is is going to be our
ID and then we're going to come in here
so what we want to do uh is we're going
to
say uh let's see probably need some of
this
stuff so if we come in
here uh let save project lost project so
what we want to
do
is I wonder if I can make this just a
straight up
void and then it's just going to
return we're going to find out in a
minute uh there's a request there's our
variable so we're going to come in we
have a project that's a null we don't
really need the users so we don't need
any of that uh yes we do because we do
want to make sure that um we're logged
in what we call this because this is
going to need to we're actually have to
check this so we're going to say uh
let's see if project ID greater than
zero yep then we want to load the
project and we also want to say
here uh
if uh project
dot let's see what did we call that it's
going to be the user so if we go to the
project
model you oh not user
project so if we go to the project model
is there a user ID there is a user ID so
we should be able to go get uh get
user oh it's case sensitive fine there
we go so we want to get user
ID and so we're
gonna accidentally dragged and dropped
so let's go back over to our project
controller and here we're going to say
if get user ID is equal
to uh let's just do
user
dot I believe we called it user ID uh
let's
see get user ID we're going to find out
let's see so we go look at
user was it also get user ID or is it
get ID uh it is probably get ID yep so
it's get
ID it's good cuz I just typoed that
anyways so now it's like hey this has to
you have to own it and in that case then
what I can do is I can do project dot
it's probably set
status uh let's
see well we can go look at our project
real
quick project uh let's see do we have
our statuses up here somewhere yes we do
so that's a stus status string uh so
status is going to be equal to Lost
so or capital L so we're going to say
hey we're going to want
to set status to Lost whoops
capital and then need to save which we
have like here's a good one right
here we'll just take that same thing
steal our code and then we get to return
so let's see if that works um on the
build so let's do that real quick but
then we're going to have to make that
call all right so it builds all right
and then we're going to go to our
projects and now what we need to do is
we're need to Lost project with the ID
which we've basically got that but what
we're going to have to do is make that
call a little bit different and how we
do a
call is we're going to come in and we're
going to make a variable and we're going
to call him uh X
HTTP and he is going to be assigned to a
new uh we're going to call it an X XL
HTTP
request and he doesn't need
anything and then we're going to do X
HTTP um actually we can probably just so
we're probably just going to be able to
do this with a get away with a an open
because we don't really care what comes
back so I think we will be able to get
away with this usually you're going to
create a function that you're going to
call that's basically going to attach to
that so it's like an event liser uh in
this case I think what we can do is we
can do a
get I actually could have made it a post
but oh well and then we're going to give
it the URL which is
this and then we're going to say true
because we can just let this sucker run
which is what that last one
does and then we're going to do a
send
so it's actually super easy so we're
just coming in we set it we create our
object we tell it where to go we're
going to send a get request and we're
going to say hey just fire and forget
we're going to send it and then we're
going to hide our control so this should
be assum this works this is to show you
we can very quickly then get some
updates going and not have to do all of
the you know navigation kind of stuff
and this something that comes very
useful cuz we are end up using this and
we're going to see this in a couple
places uh particularly like I said we
start copying stuff so now if I do a
lost so that was app testing upwork
let's see if I do lost H it did not do
anything did I get an
error uh it did not so let's come in
here and is it called Lost project let's
make sure I got that
right lost project lowercase
L uh let's make sure that's right right
nope that's where it's a
problem at least I think that's why um
let's go do this let's just change this
because I want to be
mean uh no I'm let's not get crazy here
okay so now if I reset
this
now let's see if this
runs
correctly and if it
does and if I reset oh it is there did
it tell me anything it did not so let's
go in here and let's just do this real
quick let's do uh
system.out let's use our favorite we're
just going to do a print line and
instead of a debugger or anything like
that we're just going to do this one
real quick and we're going to say hey
what is the
ID
and
uh let's see let's do that here as
well we're going to do our two
IDs and let's make sure that
those are working
right okay that's a good start so let's
jump onto that let's see if it's going
to pick up our
call and maybe it's
not so I may have to go build our little
catch
function and if I do that it did not
call so let's try that uh let's go back
to where is that our projects and so
instead now what we're going to have to
do here is we're going to have to come
in and we're going to have to do the uh
check it so we're going to do X
HTTP which is what we called it and then
we're going to be looking on the
on ready oh there you go on ready State
change got that working that's going to
be equal to a
function and the
function is just going to
be let's just
say
uh let's do uh let's let's do this if oh
sorry sorry wrong bracket or I want
parenthesis not that so if I'm going to
do if this
dot ready
State equals let's say four and and this
is basically say is this correct status
equals
200 oh that's probably what its problem
is uh part of
it let's go back to think I do this as
a I go back
here and
do a string let's just do a
string yeah uh where'd you go here wh oh
need to save that but first I need to go
back to my project
controller and wherever I had that oh
it's up
here L project is going to be a
string and we're just going to
say
success and that's going to get us
everything we need so and we can
probably tweak this a little bit so
we're going to check this in a minute uh
let's see so if we do that that's the
end of the
function so we need to open up the if
let's do it this way let's pretty this
up a little bit so we can read it so the
if statement is just going to be
alert call
successful not sure if that'll actually
fire off a lot of times it does not but
let's do that
anyway let's go ahead and fire this
up and if we do
that come to
projects lost didn't give us the alert
did it give us a an error it did aha
um
ah we got a
404 so lost project it does not
like so let's see what did we do wrong
let's
see so let's go back and look at
that if we go look at this
guy oh he's gonna need that anyways
because the model so he's gonna just do
model review let's do
this let's do
that and
here worst case is he's going to
do R direct to projects so we're just
going to do it that way uh let's see the
last project there we go so if we call
this outside of it it won't really
matter because we're going to come back
here if we call outside of it we're
going to back to projects otherwise
um then it's just going to get lost like
we saw up over here uh where it was like
hey I've got this page but it's a an
error page so let's rebuild
it
and come over here wh if it'll log in or
if it'll start the
server
projects lost
lost and now it still did not give us
that interestingly
enough if we go look at the control
panel uh console did not give us errors
this time interesting so something's not
right so if I do projects if I do lost
project and give it a number like
uh that one so let's just go look uh
27 okay so we got an error we got a type
not found status
404 what did I miss
here aha I was in the wrong file so
let's take the same
thing let's put it into the correct
file H that was a pain
and oh did I reset it no not
yet restart
it oh there we go um so I have an error
somewhere here we go project ID oh it's
not I project Ty see now there we go now
it's starting
to give me something
useful uh okay so that should give me
that and then
let's go run
it and when you run the code in the
right project let's see if that actually
does what we wanted to
do there there we go no wonder it was
given all kinds of issues that makes
sense and
so get rid my little print statements
here and so we can either call it
somewhere else or we can call call it on
the fly like we saw here is now it's
just there if we reset hey we lost those
so we can quickly say oh let's get clean
up some of those projects and boom
they're all lost but now if I switch
over to
Lost I'll see all of those guys probably
don't want that to be there when you're
displaying loss there's actually
probably and which I think maybe that'll
be the next thing maybe we'll play
around with this a little bit and make
that conditional uh but we also want to
I think actually probably the next thing
we do we're come back next time around
and we're going to be able to put a copy
so now that we've gotten that we're
going to come in here we're going to put
a little copy button or basically say
like uh create project something like
that and we're going to walk through uh
basically copying data from one item to
another saving that and building that
out so that will help us out as well but
that would wrap it up for this time go
out there and have yourself a great day
a great week and we will talk to you
next
time
three
two one hello this is Rob with develop
and or also known as building better
developers wanted to announce that we
have school. developin or.com feel free
to check it out if you like any of this
information any of the content that
we've sent and you would like to see
more you can come out you can enroll for
free we have free courses we've got
places for you to get better at just
learning a technology or how to
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 educational format and
a way for you to track your progress as
you move forward becoming a better
developer