WEBVTT 1 00:00:00.305 --> 00:00:01.642 Hey, welcome back. 2 00:00:01.642 --> 00:00:03.932 In this video, we're gonna add a new feature 3 00:00:03.932 --> 00:00:06.225 to the student tracker application. 4 00:00:06.225 --> 00:00:09.965 We're gonna learn how to add a student to the database. 5 00:00:09.965 --> 00:00:11.803 We'll cover the following topics. 6 00:00:11.803 --> 00:00:14.680 First off, we'll talk about the feature of adding a student. 7 00:00:14.680 --> 00:00:16.987 We'll also take a look at the big picture. 8 00:00:16.987 --> 00:00:19.991 Then we'll take a look at the sequence diagram. 9 00:00:19.991 --> 00:00:23.263 Then we'll pull it all together with the code walkthrough. 10 00:00:23.263 --> 00:00:24.851 Alright, so, a lot of good things here. 11 00:00:24.851 --> 00:00:27.434 Let's go ahead and get started. 12 00:00:30.098 --> 00:00:32.322 Okay, so, before we get into the coding, 13 00:00:32.322 --> 00:00:34.641 let's take a look at a quick demo. 14 00:00:34.641 --> 00:00:36.109 So here's the application. 15 00:00:36.109 --> 00:00:37.697 Note, here, we have a new button 16 00:00:37.697 --> 00:00:39.201 called add student. 17 00:00:39.201 --> 00:00:42.448 This will, of course, allow us to add a new student. 18 00:00:42.448 --> 00:00:44.068 So I'll go ahead and click on this button 19 00:00:44.068 --> 00:00:45.854 and this will present a form. 20 00:00:45.854 --> 00:00:48.466 This form will have a first name, last name, and email. 21 00:00:48.466 --> 00:00:50.608 Now we actually built this form before 22 00:00:50.608 --> 00:00:52.434 in some of the previous videos. 23 00:00:52.434 --> 00:00:55.043 But now we're just kinda tying everything together 24 00:00:55.043 --> 00:00:58.960 so I'll add this new student, Andrew Whittaker, 25 00:00:59.976 --> 00:01:02.893 and his email is andy@luv2code.com. 26 00:01:04.844 --> 00:01:06.694 And once I'm happy with this information, 27 00:01:06.694 --> 00:01:09.654 I'll go ahead and hit the save button. 28 00:01:09.654 --> 00:01:10.748 So the save button will actually 29 00:01:10.748 --> 00:01:13.485 save the information in the database. 30 00:01:13.485 --> 00:01:16.994 Then we'll go back and show a list of all the students. 31 00:01:16.994 --> 00:01:19.247 So, note here, at the bottom we have this new student, 32 00:01:19.247 --> 00:01:20.535 Andrew Whittaker. 33 00:01:20.535 --> 00:01:24.225 He appears last because we're sorting by the last name. 34 00:01:24.225 --> 00:01:25.439 So this looks really good. 35 00:01:25.439 --> 00:01:28.122 So, I'll actually walk through all the coding for this 36 00:01:28.122 --> 00:01:30.439 and I'll show you how to build it, piece by piece, 37 00:01:30.439 --> 00:01:33.250 for adding a new student to the database. 38 00:01:33.250 --> 00:01:37.417 Alright, let's go ahead and take a look at the big picture. 39 00:01:38.571 --> 00:01:40.450 Alright, so here's the big picture. 40 00:01:40.450 --> 00:01:42.825 In the top left, we have list-students.xhtml, 41 00:01:42.825 --> 00:01:44.957 that'll list all the students. 42 00:01:44.957 --> 00:01:47.935 This page will actually have that new button, add student. 43 00:01:47.935 --> 00:01:50.701 Once they click on that button, then we'll show this form, 44 00:01:50.701 --> 00:01:53.406 add-student-form.xhtml. 45 00:01:53.406 --> 00:01:56.393 The user completes this information, they hit save, 46 00:01:56.393 --> 00:01:58.251 it'll call the student controller which is our 47 00:01:58.251 --> 00:02:00.250 managed bean, our managed bean will call the 48 00:02:00.250 --> 00:02:02.652 student DbUtil and that person will actually 49 00:02:02.652 --> 00:02:06.069 insert the information into the database. 50 00:02:09.898 --> 00:02:11.672 Now let's look at this a little bit further here. 51 00:02:11.672 --> 00:02:14.439 So when they have the add-student-form.xhtml 52 00:02:14.439 --> 00:02:15.754 and you hit the save button, 53 00:02:15.754 --> 00:02:17.947 which they call a method on that managed bean, 54 00:02:17.947 --> 00:02:21.682 our student controller will call a method add student. 55 00:02:21.682 --> 00:02:24.593 This student controller will then call a method on 56 00:02:24.593 --> 00:02:27.637 our Student DbUtil add student 57 00:02:27.637 --> 00:02:29.949 and the Student DbUtil will be responsible for 58 00:02:29.949 --> 00:02:32.699 inserting this into the database. 59 00:02:36.218 --> 00:02:38.437 Alright, so let's go ahead and move into the Eclipse. 60 00:02:38.437 --> 00:02:40.672 What I wanna do is move to this one project here, 61 00:02:40.672 --> 00:02:42.084 jdbc-student-tracker 62 00:02:42.084 --> 00:02:45.417 and I actually wanna close this project. 63 00:02:46.329 --> 00:02:48.372 So I'll simply right click on this project 64 00:02:48.372 --> 00:02:49.789 and choose close. 65 00:02:53.923 --> 00:02:56.396 Now, what I wanna do is open up that version two 66 00:02:56.396 --> 00:02:58.034 of our student tracker that has this new 67 00:02:58.034 --> 00:02:59.663 functionality here. 68 00:02:59.663 --> 00:03:02.413 So let me just go to file, import 69 00:03:04.101 --> 00:03:05.685 and what I wanna do is, I wanna 70 00:03:05.685 --> 00:03:09.390 under general I wanna import an Existing Project 71 00:03:09.390 --> 00:03:10.640 into Workspace. 72 00:03:13.027 --> 00:03:15.551 I'll click on next and I need to select 73 00:03:15.551 --> 00:03:16.384 the root directory. 74 00:03:16.384 --> 00:03:18.313 So this is gonna be the directory where we downloaded 75 00:03:18.313 --> 00:03:21.437 jdbc-source-code for this course. 76 00:03:21.437 --> 00:03:23.650 So here I have jsf-for-beginners. 77 00:03:23.650 --> 00:03:26.242 There's a directory here called jdbc-source-code. 78 00:03:26.242 --> 00:03:29.598 That's the directory that you extracted the files into. 79 00:03:29.598 --> 00:03:33.015 And I wanna choose version-2-add-student, 80 00:03:35.242 --> 00:03:37.075 Version-2-add-student, 81 00:03:38.715 --> 00:03:40.520 because this will have the new functionality 82 00:03:40.520 --> 00:03:42.876 that we're looking at for adding a student. 83 00:03:42.876 --> 00:03:45.845 So I'll have version-2-add-student, click open. 84 00:03:45.845 --> 00:03:47.654 It should give me a list of projects here 85 00:03:47.654 --> 00:03:49.412 and the one that I'm looking for here is 86 00:03:49.412 --> 00:03:52.662 jdbc-student-tracker version two or v2. 87 00:03:53.813 --> 00:03:55.049 And once you're happy with that 88 00:03:55.049 --> 00:03:58.132 go ahead and click the finish button. 89 00:03:59.401 --> 00:04:01.678 So now we have this new project here in the top left, 90 00:04:01.678 --> 00:04:04.162 jdbc-student-tracker-v2. 91 00:04:04.162 --> 00:04:06.412 That's for adding students. 92 00:04:07.900 --> 00:04:10.860 Now I'll go ahead and expand this project a bit. 93 00:04:10.860 --> 00:04:13.702 I'll move down to the web content directory. 94 00:04:13.702 --> 00:04:15.987 And I actually wanna look at this one file here 95 00:04:15.987 --> 00:04:20.160 list-students.xhtml because this basically has 96 00:04:20.160 --> 00:04:22.884 that new button for adding a student. 97 00:04:22.884 --> 00:04:27.051 So let's go ahead and double click this file and open it. 98 00:04:30.275 --> 00:04:32.917 Alright, and I'll expand the window here. 99 00:04:32.917 --> 00:04:37.000 So this is pretty much the same as we had before. 100 00:04:37.872 --> 00:04:39.192 And the only thing that's new is 101 00:04:39.192 --> 00:04:41.664 as we move on down we've added a new button 102 00:04:41.664 --> 00:04:42.824 for add student. 103 00:04:42.824 --> 00:04:45.039 So on line thirty four, there's a button, 104 00:04:45.039 --> 00:04:47.702 the value is add student, that's the label 105 00:04:47.702 --> 00:04:49.213 and then we have the outcome. 106 00:04:49.213 --> 00:04:51.451 So let me just kinda move the code around a bit 107 00:04:51.451 --> 00:04:53.777 just so we can see it all on one line. 108 00:04:53.777 --> 00:04:56.334 Or actually see it on multiple lines here. 109 00:04:56.334 --> 00:04:58.211 So for outcome, this is the name of the actual 110 00:04:58.211 --> 00:05:01.806 page that will show once they click this button. 111 00:05:01.806 --> 00:05:04.688 So we have outcome equals add student form. 112 00:05:04.688 --> 00:05:08.855 So as we know jsf will add on the extension for it, .xhtml. 113 00:05:12.191 --> 00:05:16.358 So this will open up a file, add-student-form.xhtml. 114 00:05:17.844 --> 00:05:20.202 Alright, so let's go ahead and look at this form right now. 115 00:05:20.202 --> 00:05:23.707 So here's the file add-student-form.xhtml. 116 00:05:23.707 --> 00:05:26.051 This is the form that we're gonna show when we click on 117 00:05:26.051 --> 00:05:27.051 add student. 118 00:05:29.085 --> 00:05:31.414 Alright, so just a very basic page here. 119 00:05:31.414 --> 00:05:34.164 We make use of some style sheets. 120 00:05:36.561 --> 00:05:39.311 And again just a very basic form. 121 00:05:42.774 --> 00:05:46.558 And I just have form labels for first name 122 00:05:46.558 --> 00:05:49.160 and I simply map this to a managed bean student. 123 00:05:49.160 --> 00:05:50.827 So student.firstname 124 00:05:53.803 --> 00:05:58.404 and I do a similar thing for last name and for email. 125 00:05:58.404 --> 00:06:00.394 We've seen all this before we're just kind of 126 00:06:00.394 --> 00:06:03.482 applying everything that we've learned before here. 127 00:06:03.482 --> 00:06:07.399 That's it, so first name, last name, and email. 128 00:06:14.910 --> 00:06:17.687 Now the important item here is on line forty three 129 00:06:17.687 --> 00:06:19.313 or actually line forty four. 130 00:06:19.313 --> 00:06:22.398 Is that we have the save button 131 00:06:22.398 --> 00:06:24.251 and when they press the save button, 132 00:06:24.251 --> 00:06:27.477 we're gonna call a method on our managed bean. 133 00:06:27.477 --> 00:06:31.477 So we're gonna call studentController.addStudent 134 00:06:32.348 --> 00:06:36.580 and as a parameter we're gonna pass in that student bean. 135 00:06:36.580 --> 00:06:39.123 So basically whatever they filled out on the form, 136 00:06:39.123 --> 00:06:41.312 we're gonna pass a reference to that over to this 137 00:06:41.312 --> 00:06:42.895 student controller. 138 00:06:44.938 --> 00:06:47.303 So we'll say studentController.addStudent 139 00:06:47.303 --> 00:06:49.516 and we give student and that's the information 140 00:06:49.516 --> 00:06:53.683 from the form that they just filled out here on this page. 141 00:06:54.860 --> 00:06:55.787 And that's basically it. 142 00:06:55.787 --> 00:06:58.558 That's how we link our form to the actual 143 00:06:58.558 --> 00:07:01.391 managed bean for adding a student. 144 00:07:05.313 --> 00:07:07.263 Alright, so let's go ahead and look at the code here 145 00:07:07.263 --> 00:07:09.955 for that student controller. 146 00:07:09.955 --> 00:07:11.819 So I'll move up to my Java Resources, 147 00:07:11.819 --> 00:07:13.755 I'll move into my package, 148 00:07:13.755 --> 00:07:16.856 and I'll move into studentcontroller.java. 149 00:07:16.856 --> 00:07:18.351 So this is the managed bean that's called 150 00:07:18.351 --> 00:07:19.768 by that jsf form. 151 00:07:23.989 --> 00:07:25.194 So here's our student controller. 152 00:07:25.194 --> 00:07:26.861 It's a managed bean. 153 00:07:29.592 --> 00:07:31.269 We've seen the load student work. 154 00:07:31.269 --> 00:07:33.655 The new area here is for add student. 155 00:07:33.655 --> 00:07:35.121 So starting on line fifty three, 156 00:07:35.121 --> 00:07:37.109 we have this method called add student 157 00:07:37.109 --> 00:07:39.455 and I'll pass in a student object. 158 00:07:39.455 --> 00:07:41.837 So the jsf form will call this method 159 00:07:41.837 --> 00:07:44.129 on our managed bean and they'll pass in 160 00:07:44.129 --> 00:07:47.758 that student object that was filled out in that form. 161 00:07:47.758 --> 00:07:49.226 Now what we'll do is we'll basically just 162 00:07:49.226 --> 00:07:52.750 delegate the call off to our student DbUtil. 163 00:07:52.750 --> 00:07:54.633 Remember that's our helper class for actually 164 00:07:54.633 --> 00:07:56.970 interfacing with the database. 165 00:07:56.970 --> 00:08:00.620 So here I simply call studentDbUtil, add student, 166 00:08:00.620 --> 00:08:02.562 and I pass in the student object. 167 00:08:02.562 --> 00:08:04.353 So let's go ahead and look at the coding here 168 00:08:04.353 --> 00:08:06.900 for that studentDbUtil. 169 00:08:06.900 --> 00:08:09.203 So what I did was I simply moved into the code for 170 00:08:09.203 --> 00:08:12.108 studentDbUtil, so I'm in a different class now. 171 00:08:12.108 --> 00:08:15.775 And it also has a method called add student. 172 00:08:16.872 --> 00:08:19.925 Now this studentDbUtil class, remember, it's 173 00:08:19.925 --> 00:08:22.494 responsible for actually interfacing, or interacting 174 00:08:22.494 --> 00:08:24.129 with our database. 175 00:08:24.129 --> 00:08:26.860 So on line eighty eight we simply get a connection. 176 00:08:26.860 --> 00:08:28.986 On line ninety we set up a sequel. 177 00:08:28.986 --> 00:08:32.986 So this is for inserting a student into a table. 178 00:08:38.411 --> 00:08:40.631 On line ninety two I simply prepare the statement, 179 00:08:40.631 --> 00:08:42.381 based on that sequel. 180 00:08:43.593 --> 00:08:46.069 And then I go through and I set the parameters here. 181 00:08:46.069 --> 00:08:47.652 So I set the actual 182 00:08:50.111 --> 00:08:52.070 I set the first name. 183 00:08:52.070 --> 00:08:53.902 I set the last name. 184 00:08:53.902 --> 00:08:55.655 And I set the email. 185 00:08:55.655 --> 00:08:58.461 And that's all data that comes over from that form 186 00:08:58.461 --> 00:09:02.378 and we can use that to populate this sequel statement. 187 00:09:02.378 --> 00:09:04.551 On line ninety nine, I actually execute that 188 00:09:04.551 --> 00:09:05.783 sequel statement. 189 00:09:05.783 --> 00:09:07.553 And that'll actually perform the insert 190 00:09:07.553 --> 00:09:08.784 and then we're good to go. 191 00:09:08.784 --> 00:09:12.034 The information is now in the database. 192 00:09:17.112 --> 00:09:18.815 And then finally I just go through and I clean up. 193 00:09:18.815 --> 00:09:20.143 I just close the connection. 194 00:09:20.143 --> 00:09:22.495 Close the statement object and so on. 195 00:09:22.495 --> 00:09:24.044 Just random, I'm sorry. 196 00:09:24.044 --> 00:09:26.211 Just normal clean up work. 197 00:09:27.222 --> 00:09:28.144 And that's basically it. 198 00:09:28.144 --> 00:09:29.433 So let's go ahead and run the application. 199 00:09:29.433 --> 00:09:33.600 So I choose list-students and I'll say run on server. 200 00:09:40.542 --> 00:09:42.157 So this will actually run the application 201 00:09:42.157 --> 00:09:44.148 we'll see it right here in our browser. 202 00:09:44.148 --> 00:09:46.831 And now what I'll do is I'll copy that url 203 00:09:46.831 --> 00:09:49.118 and I'll just drop it into a real web browser 204 00:09:49.118 --> 00:09:50.185 so we can see it. 205 00:09:50.185 --> 00:09:51.358 So here's our app. 206 00:09:51.358 --> 00:09:53.276 We have this new add student button. 207 00:09:53.276 --> 00:09:55.553 If I click on this button it'll show us the form. 208 00:09:55.553 --> 00:09:57.954 And again just like you saw in the previous demo, 209 00:09:57.954 --> 00:10:01.391 I can simply go through and fill out this form. 210 00:10:01.391 --> 00:10:04.586 So I'll add this new student Lisa Astor. 211 00:10:04.586 --> 00:10:07.836 Her email address is lisa@luv2code.com. 212 00:10:10.181 --> 00:10:11.732 Once I'm happy with this I can go ahead 213 00:10:11.732 --> 00:10:13.732 and hit the save button. 214 00:10:16.153 --> 00:10:19.075 And this will actually save that user in the database. 215 00:10:19.075 --> 00:10:21.985 And here she is listed at the top, Lisa Astor. 216 00:10:21.985 --> 00:10:23.650 And again we're sorting by last name 217 00:10:23.650 --> 00:10:26.029 so she appears first in the list. 218 00:10:26.029 --> 00:10:27.024 So this looks really good. 219 00:10:27.024 --> 00:10:29.175 We're successful in saving this information 220 00:10:29.175 --> 00:10:33.591 in the database, but hold up I'm not really convinced. 221 00:10:33.591 --> 00:10:37.057 So let's go ahead and look in the my sequel tool 222 00:10:37.057 --> 00:10:39.151 and let's go ahead and verify this information 223 00:10:39.151 --> 00:10:40.639 in our database. 224 00:10:40.639 --> 00:10:42.363 So I'm in my sequel right now. 225 00:10:42.363 --> 00:10:45.446 I'm moving into this student tracker. 226 00:10:46.872 --> 00:10:50.066 And I'll move to the table called student. 227 00:10:50.066 --> 00:10:53.965 And I'll just right click and I'll say select rows. 228 00:10:53.965 --> 00:10:56.408 Okay, great, so it did work. 229 00:10:56.408 --> 00:10:59.311 So here we have Andrew Whittaker, and then we 230 00:10:59.311 --> 00:11:00.830 also have Lisa Astor. 231 00:11:00.830 --> 00:11:02.623 So Andrew Whittaker was added in 232 00:11:02.623 --> 00:11:04.061 in the first part of the demo 233 00:11:04.061 --> 00:11:06.057 and Lisa Astor was added in part of this 234 00:11:06.057 --> 00:11:07.365 last walk through so of course 235 00:11:07.365 --> 00:11:10.008 everything is being saved in my sequel 236 00:11:10.008 --> 00:11:12.186 and it's being stored accordingly. 237 00:11:12.186 --> 00:11:14.270 So everything looks really, really good here. 238 00:11:14.270 --> 00:11:17.103 So good job with this work so far. 239 00:11:20.693 --> 00:11:22.795 Alright, so this kind of wraps up the video. 240 00:11:22.795 --> 00:11:25.209 So in summary we learned about the add student feature. 241 00:11:25.209 --> 00:11:27.221 We looked at the big picture. 242 00:11:27.221 --> 00:11:28.981 We discussed the sequence diagram. 243 00:11:28.981 --> 00:11:31.956 And we did a thorough code walk through. 244 00:11:31.956 --> 00:11:33.887 So good job, so we know how to add a student here 245 00:11:33.887 --> 00:11:36.804 to our student tracker application.