Instructor: Hey, welcome back.
In this video, we're gonna add a new feature
to the student tracker application.
We're gonna learn how to add a student to the database.
We'll cover the following topics.
First off, we'll talk about the feature of adding a student.
We'll also take a look at the big picture.
Then we'll take a look at the sequence diagram.
Then we'll pull it all together with the code walkthrough.
Alright, so, a lot of good things here.
Let's go ahead and get started.
Okay, so, before we get into the coding,
let's take a look at a quick demo.
So here's the application.
Note, here, we have a new button
called add student.
This will, of course, allow us to add a new student.
So I'll go ahead and click on this button
and this will present a form.
This form will have a first name, last name, and email.
Now we actually built this form before
in some of the previous videos.
But now we're just kinda tying everything together
so I'll add this new student, Andrew Whittaker,
and his email is andy@luv2code.com.
And once I'm happy with this information,
I'll go ahead and hit the save button.
So the save button will actually
save the information in the database.
Then we'll go back and show a list of all the students.
So, note here, at the bottom we have this new student,
Andrew Whittaker.
He appears last because we're sorting by the last name.
So this looks really good.
So, I'll actually walk through all the coding for this
and I'll show you how to build it, piece by piece,
for adding a new student to the database.
Alright, let's go ahead and take a look at the big picture.
Alright, so here's the big picture.
In the top left, we have list-students.xhtml,
that'll list all the students.
This page will actually have that new button, add student.
Once they click on that button, then we'll show this form,
add-student-form.xhtml.
The user completes this information, they hit save,
it'll call the student controller which is our
managed bean, our managed bean will call the
student DbUtil and that person will actually
insert the information into the database.
Now let's look at this a little bit further here.
So when they have the add-student-form.xhtml
and you hit the save button,
which they call a method on that managed bean,
our student controller will call a method add student.
This student controller will then call a method on
our Student DbUtil add student
and the Student DbUtil will be responsible for
inserting this into the database.
Alright, so let's go ahead and move into the Eclipse.
What I wanna do is move to this one project here,
jdbc-student-tracker
and I actually wanna close this project.
So I'll simply right click on this project
and choose close.
Now, what I wanna do is open up that version two
of our student tracker that has this new
functionality here.
So let me just go to file, import
and what I wanna do is, I wanna
under general I wanna import an Existing Project
into Workspace.
I'll click on next and I need to select
the root directory.
So this is gonna be the directory where we downloaded
jdbc-source-code for this course.
So here I have jsf-for-beginners.
There's a directory here called jdbc-source-code.
That's the directory that you extracted the files into.
And I wanna choose version-2-add-student,
Version-2-add-student,
because this will have the new functionality
that we're looking at for adding a student.
So I'll have version-2-add-student, click open.
It should give me a list of projects here
and the one that I'm looking for here is
jdbc-student-tracker version two or v2.
And once you're happy with that
go ahead and click the finish button.
So now we have this new project here in the top left,
jdbc-student-tracker-v2.
That's for adding students.
Now I'll go ahead and expand this project a bit.
I'll move down to the web content directory.
And I actually wanna look at this one file here
list-students.xhtml because this basically has
that new button for adding a student.
So let's go ahead and double click this file and open it.
Alright, and I'll expand the window here.
So this is pretty much the same as we had before.
And the only thing that's new is
as we move on down we've added a new button
for add student.
So on line thirty four, there's a button,
the value is add student, that's the label
and then we have the outcome.
So let me just kinda move the code around a bit
just so we can see it all on one line.
Or actually see it on multiple lines here.
So for outcome, this is the name of the actual
page that will show once they click this button.
So we have outcome equals add student form.
So as we know jsf will add on the extension for it, .xhtml.
So this will open up a file, add-student-form.xhtml.
Alright, so let's go ahead and look at this form right now.
So here's the file add-student-form.xhtml.
This is the form that we're gonna show when we click on
add student.
Alright, so just a very basic page here.
We make use of some style sheets.
And again just a very basic form.
And I just have form labels for first name
and I simply map this to a managed bean student.
So student.firstname
and I do a similar thing for last name and for email.
We've seen all this before we're just kind of
applying everything that we've learned before here.
That's it, so first name, last name, and email.
Now the important item here is on line forty three
or actually line forty four.
Is that we have the save button
and when they press the save button,
we're gonna call a method on our managed bean.
So we're gonna call studentController.addStudent
and as a parameter we're gonna pass in that student bean.
So basically whatever they filled out on the form,
we're gonna pass a reference to that over to this
student controller.
So we'll say studentController.addStudent
and we give student and that's the information
from the form that they just filled out here on this page.
And that's basically it.
That's how we link our form to the actual
managed bean for adding a student.
Alright, so let's go ahead and look at the code here
for that student controller.
So I'll move up to my Java Resources,
I'll move into my package,
and I'll move into studentcontroller.java.
So this is the managed bean that's called
by that jsf form.
So here's our student controller.
It's a managed bean.
We've seen the load student work.
The new area here is for add student.
So starting on line fifty three,
we have this method called add student
and I'll pass in a student object.
So the jsf form will call this method
on our managed bean and they'll pass in
that student object that was filled out in that form.
Now what we'll do is we'll basically just
delegate the call off to our student DbUtil.
Remember that's our helper class for actually
interfacing with the database.
So here I simply call studentDbUtil, add student,
and I pass in the student object.
So let's go ahead and look at the coding here
for that studentDbUtil.
So what I did was I simply moved into the code for
studentDbUtil, so I'm in a different class now.
And it also has a method called add student.
Now this studentDbUtil class, remember, it's
responsible for actually interfacing, or interacting
with our database.
So on line eighty eight we simply get a connection.
On line ninety we set up a sequel.
So this is for inserting a student into a table.
On line ninety two I simply prepare the statement,
based on that sequel.
And then I go through and I set the parameters here.
So I set the actual
I set the first name.
I set the last name.
And I set the email.
And that's all data that comes over from that form
and we can use that to populate this sequel statement.
On line ninety nine, I actually execute that
sequel statement.
And that'll actually perform the insert
and then we're good to go.
The information is now in the database.
And then finally I just go through and I clean up.
I just close the connection.
Close the statement object and so on.
Just random, I'm sorry.
Just normal clean up work.
And that's basically it.
So let's go ahead and run the application.
So I choose list-students and I'll say run on server.
So this will actually run the application
we'll see it right here in our browser.
And now what I'll do is I'll copy that url
and I'll just drop it into a real web browser
so we can see it.
So here's our app.
We have this new add student button.
If I click on this button it'll show us the form.
And again just like you saw in the previous demo,
I can simply go through and fill out this form.
So I'll add this new student Lisa Astor.
Her email address is lisa@luv2code.com.
Once I'm happy with this I can go ahead
and hit the save button.
And this will actually save that user in the database.
And here she is listed at the top, Lisa Astor.
And again we're sorting by last name
so she appears first in the list.
So this looks really good.
We're successful in saving this information
in the database, but hold up I'm not really convinced.
So let's go ahead and look in the my sequel tool
and let's go ahead and verify this information
in our database.
So I'm in my sequel right now.
I'm moving into this student tracker.
And I'll move to the table called student.
And I'll just right click and I'll say select rows.
Okay, great, so it did work.
So here we have Andrew Whittaker, and then we
also have Lisa Astor.
So Andrew Whittaker was added in
in the first part of the demo
and Lisa Astor was added in part of this
last walk through so of course
everything is being saved in my sequel
and it's being stored accordingly.
So everything looks really, really good here.
So good job with this work so far.
Alright, so this kind of wraps up the video.
So in summary we learned about the add student feature.
We looked at the big picture.
We discussed the sequence diagram.
And we did a thorough code walk through.
So good job, so we know how to add a student here
to our student tracker application.