WEBVTT 00:01.750 --> 00:07.750 So in this section of the course, we want to manage users to add the ability to have additional admin 00:07.750 --> 00:10.840 users, to modify them, to delete them, so on and so forth. 00:11.500 --> 00:16.120 So let's start by creating some menu items in our base layout HTML. 00:16.300 --> 00:20.810 So I open that up and I'll find the section where I have my admin menu right here. 00:21.580 --> 00:24.460 So if you're authenticated, then you can see this stuff. 00:24.470 --> 00:26.680 So we'll just add something right here. 00:27.670 --> 00:39.250 So add a lot and I'll give it an A with a class of dropdown item and an I will point to a route that 00:39.250 --> 00:40.180 doesn't exist yet. 00:40.300 --> 00:45.910 Slash admin, slash all dash users and we'll call this all users. 00:47.500 --> 00:48.980 Close the tag and close the. 00:50.520 --> 00:56.260 And I will just put a spacer right here, because it looks better this way, so I'll copy this, paste 00:56.340 --> 01:01.800 it in here, start my back and make start underscore back. 01:04.850 --> 01:05.630 And run air. 01:09.090 --> 01:09.840 So air is running. 01:09.870 --> 01:12.450 Let's go to our Web browser and a login 01:15.870 --> 01:19.500 at example, dot com with the password password log in. 01:21.090 --> 01:24.370 OK, so now I have an all users menu item. 01:24.570 --> 01:27.230 Of course, we need to create a root, a hamburger and a template. 01:27.240 --> 01:30.830 And we also will need a template to add or edit users. 01:30.840 --> 01:33.810 So let's get started with that back to work code. 01:34.050 --> 01:37.980 I'll hide my terminal window and I will, first of all create the template. 01:37.980 --> 01:44.250 So my templates folder will create a new file called All Dash Users Dot page to go to. 01:46.890 --> 01:51.870 And we'll just make it a really simple one to start with, you'll use the base template and it will 01:51.870 --> 02:00.990 receive data and we'll have a title defined title, which I'll call all users 02:04.320 --> 02:05.250 and close up 02:08.820 --> 02:10.050 and a content section. 02:15.370 --> 02:23.500 Define content, and I'll do the same thing I've done right along to class equals margin top five, 02:24.590 --> 02:31.010 all admin users and close my age, too, and I'll put it in there. 02:32.980 --> 02:37.420 Now, I'm also going to want a button that allows me to add a user's this page will list all the admin 02:37.420 --> 02:45.640 users and we'll just put a button in here with div class equals float and move it to the right and I'll 02:45.640 --> 02:59.800 put in a in there a class equals button say button at one secondary and we'll give it an F to a non-existent 02:59.800 --> 03:00.310 path. 03:00.760 --> 03:04.000 Slash admin, slash all users slash zero. 03:04.000 --> 03:10.660 So user ID zero means we're going to be adding a user and we'll get to that soon and user and close 03:10.660 --> 03:13.660 the tag and close the div. 03:14.110 --> 03:20.110 And now because we floated we have to clear fixed div class equals clear fix because if we don't it 03:20.110 --> 03:21.580 will mess things up. 03:23.360 --> 03:31.690 Now put a table in here table and I'll give it an idea of user table and I'll give it a class of bootstraps 03:31.690 --> 03:44.530 table class and say table straight and I'll give it a T head and a tier and just to teach the user close 03:44.530 --> 03:58.150 to each and say their email to each email close to each, close my row, close my head and add an empty 03:58.150 --> 03:58.540 body 04:04.000 --> 04:04.930 and close my table 04:08.230 --> 04:10.620 and we'll end our content section. 04:11.140 --> 04:15.400 And we're also going to have JavaScript, of course, because we'll use that to populate the table with 04:15.400 --> 04:16.050 our users. 04:16.300 --> 04:17.560 So let's define 04:21.880 --> 04:22.540 jazz 04:27.670 --> 04:34.750 and we'll close up and inside of that for right now, I'll just put in a script tag, a closing script 04:34.750 --> 04:39.250 tag, and I'll get a reference to the table because I don't want to need that at some point. 04:39.670 --> 04:46.660 But Tebaldi equal document don't get element by idea. 04:47.560 --> 04:49.930 And I'm looking for user Dasch table 04:52.570 --> 04:59.860 and then get elements by tag name Tebaldi 05:04.120 --> 05:05.130 at index zero. 05:08.020 --> 05:09.700 OK, so that's one template. 05:09.790 --> 05:10.930 Now we need to make another one. 05:10.940 --> 05:20.400 So I'm just going to copy this whole thing and I'll create another template, new file called one user 05:20.410 --> 05:27.910 dot page dot go each html and I'll post this in here and get rid of this stuff inside the defined. 05:27.930 --> 05:33.430 Just get rid of the entire table and the button and I'll change the title. 05:33.790 --> 05:35.110 Just say admin user. 05:42.850 --> 05:43.750 Admin user. 05:44.470 --> 05:47.110 OK, so we have our templates, we have a menu item. 05:47.500 --> 05:54.910 The next step is to create stub handlers and stub routes that allow us to get to these pages and display 05:54.910 --> 05:56.980 them and we'll take care of that in the next lecture.