WEBVTT 00:00.020 --> 00:06.710 For the next project we are going to build, I'm going to ask you to first download a starter package. 00:06.710 --> 00:10.310 That's a zip file that will be attached to this video. 00:10.340 --> 00:13.910 Now let me explain why we will be doing this. 00:13.940 --> 00:20.690 The reason is that in the previous project, we've built a functional framework apart from building 00:20.690 --> 00:21.560 the project. 00:21.560 --> 00:28.340 And this starter package contains the code of that framework that we've built in project number two. 00:28.370 --> 00:33.770 It doesn't contain the logic of the previous project because we are building another one. 00:33.800 --> 00:39.260 This is about building the third project, which is the file sharing app. 00:39.260 --> 00:41.840 But some of the things can be reused. 00:41.870 --> 00:50.990 Now, I'd like you to just pause the video now and get this resource under the video, extract it and 00:50.990 --> 00:55.610 open it inside Visual Studio Code or your editor of choice. 00:55.610 --> 00:57.950 So we are in the same place. 00:57.950 --> 01:05.660 So you are also looking at the directory structure, because I'm going to now explain what all those 01:06.020 --> 01:07.520 folders contain. 01:07.550 --> 01:11.510 Which most of you should be familiar to you already. 01:11.510 --> 01:15.290 But if I made any changes and I did make. 01:15.320 --> 01:18.260 Tiny changes, I'm going to explain them. 01:18.770 --> 01:22.670 So let's begin with this core folder so you can find the. 01:22.700 --> 01:25.370 Same files that were there before. 01:27.050 --> 01:30.590 For example that's app database error handling the middleware. 01:30.620 --> 01:32.810 Model router and view. 01:32.840 --> 01:37.460 But what's new is we have this three folders that weren't here before. 01:37.460 --> 01:38.360 And if. 01:38.390 --> 01:44.900 You were paying attention, you could have found those folders inside the app folder before. 01:44.900 --> 01:53.720 So I've decided that those can be made generic, like the authentication middleware that's making sure 01:53.720 --> 01:55.910 we've got access to the user. 01:56.360 --> 01:59.870 Then the CSF middleware that should be generic. 01:59.870 --> 02:03.160 We shouldn't be writing this from scratch every single time. 02:03.160 --> 02:10.420 And also this view middleware that gets the user, the currently authenticated user available in the 02:10.420 --> 02:11.200 views. 02:11.890 --> 02:17.470 Then we've got some models like the remember tokens and the user model. 02:17.680 --> 02:19.720 They were made generic. 02:19.720 --> 02:25.720 I don't think we would have to make a lot of changes to those, but it's still possible. 02:25.720 --> 02:30.850 Anyway, I think we can just reuse them in any apps that we've built. 02:31.420 --> 02:33.550 And then the services. 02:33.550 --> 02:41.380 So things like authentication, I think we should just reuse that because it was hard to make, and 02:41.380 --> 02:45.640 it's safer to reuse something that we have proven works. 02:46.180 --> 02:47.800 Same with authorization. 02:47.800 --> 02:52.180 But in case of this one we've made that an abstract class. 02:52.180 --> 02:53.470 That's the only difference. 02:53.470 --> 02:57.670 And I have removed the code that was specific to previous project. 02:57.700 --> 03:04.870 This means that this class being abstract, It has to be extended in this project and customized. 03:06.040 --> 03:11.380 Next up we've got the CSV class for the CSV protection. 03:11.380 --> 03:15.670 It's also exactly the same and we're just going to reuse it. 03:15.790 --> 03:22.090 And then the Remember Me functionality when you sign in we're also going to reuse it completely. 03:22.090 --> 03:26.290 So that's why it has now landed inside the core folder. 03:28.270 --> 03:29.650 Now let's go back a bit. 03:29.650 --> 03:33.730 So inside the binary folder we've got the console scripts. 03:33.730 --> 03:39.100 So we are using two of them the schema fixtures and schema load. 03:39.100 --> 03:46.000 So this one is responsible for loading the schema that can be found inside the database folder, exactly 03:46.000 --> 03:48.580 the same way as we did in the previous project. 03:48.580 --> 03:53.170 And I think this can be something that we do every single time. 03:53.170 --> 03:55.420 This can be a reusable thing. 03:55.420 --> 04:02.830 Now schema contains the definition of users table and remember tokens something that I think every app 04:02.830 --> 04:06.190 would need and you can add to those schema. 04:06.220 --> 04:08.770 Every new table that will be required. 04:08.770 --> 04:11.650 And this is exactly what we will be doing. 04:11.650 --> 04:13.840 But the script remains the same. 04:13.840 --> 04:18.460 It will just load the schema and update the database table. 04:19.210 --> 04:25.750 Now the fixture script was simplified a little, and this is because we no longer have the posts and 04:25.750 --> 04:27.010 comments table. 04:27.040 --> 04:34.420 As a quick reminder, this fixtures script is supposed to load some dummy data into the database so 04:34.420 --> 04:37.870 that we don't have to click around the app so much. 04:37.900 --> 04:41.980 And in our case, I think we always have users. 04:41.980 --> 04:45.370 That's why we are creating some user accounts. 04:45.370 --> 04:52.660 We are clearing the existing data for users and remember tokens resetting the SQLite sequences. 04:52.660 --> 04:56.500 And this code is responsible for loading the users. 04:56.500 --> 05:01.930 We're going to be changing the scripts for all the tables that we're going to add in this project, 05:01.930 --> 05:06.460 but I've deemed that this part is really reusable. 05:06.490 --> 05:09.250 Okay, so we've covered the binary folder. 05:09.280 --> 05:12.220 Now let me collapse this. 05:12.220 --> 05:14.590 And now let's jump to the app folder. 05:14.680 --> 05:16.660 Let me start with controllers. 05:16.660 --> 05:23.830 We've got two out of the box the index one to display some kind of a main page which is dummy doesn't 05:23.830 --> 05:26.680 really contain anything inside this template. 05:27.040 --> 05:28.840 And our controller. 05:28.870 --> 05:31.180 Now this one is not a dummy one. 05:31.180 --> 05:35.830 It contains exactly the same implementation of the authentication. 05:35.830 --> 05:40.300 So the signing in process as we had in the previous project. 05:40.300 --> 05:41.890 So nothing has changed here. 05:41.890 --> 05:46.450 I just felt that this controller could really be reusable. 05:46.450 --> 05:49.270 There is no point in just doing it again. 05:49.300 --> 05:52.240 That's why we have it as part of the project. 05:53.260 --> 05:55.300 Now next up we've got this views folder. 05:55.300 --> 05:58.180 But let me talk about this one last. 05:58.480 --> 06:05.340 So next up we've got the database folder that should be familiar with, got the schema file and then 06:05.340 --> 06:06.960 the database file. 06:07.890 --> 06:13.500 Then we've got the logs folder, which should contain all the error logs that happened during the project 06:13.500 --> 06:14.370 execution. 06:14.370 --> 06:20.340 And our error handler class is responsible for populating this one. 06:20.340 --> 06:26.670 So for details you obviously need to watch the previous project which explained all of that and where 06:26.670 --> 06:29.190 we have built all of those things. 06:29.310 --> 06:31.350 And then we've got the public folder. 06:31.380 --> 06:32.820 Nothing really changed here. 06:32.820 --> 06:36.390 It is exactly the same, this index PHP file. 06:37.380 --> 06:40.260 Next up we've got a dot env file. 06:40.260 --> 06:41.670 It's empty for now. 06:41.670 --> 06:47.580 And that's a completely separate concept that I would have to explain later on. 06:47.580 --> 06:52.710 For now it's an empty file and we don't have to worry about it at this very second. 06:52.710 --> 06:56.220 So let's close it because I am going to go back into this. 06:56.430 --> 06:59.820 Then we've got a bootstrap file which hasn't changed. 06:59.820 --> 07:06.300 So it's exactly the same now composer file contains, well, the basic info. 07:06.330 --> 07:08.490 We are still not using any libraries. 07:08.490 --> 07:12.930 We've got those namespaces defined and we've got some scripts. 07:12.930 --> 07:14.790 So no changes in here. 07:14.820 --> 07:16.440 The config file. 07:16.470 --> 07:21.870 Well it contains the application name we can set. 07:21.900 --> 07:24.390 So enable or disable the debug mode. 07:24.390 --> 07:26.340 And we have some database settings. 07:26.340 --> 07:27.990 So no changes here really. 07:27.990 --> 07:32.100 But we're going to be changing this and working with environment variables. 07:32.100 --> 07:34.800 That's related to this dot env file. 07:34.800 --> 07:38.370 But as I've said well this has to be explained separately. 07:39.420 --> 07:43.050 Then we've got the helpers exactly the same functions defined. 07:43.050 --> 07:44.910 So nothing new in here. 07:44.910 --> 07:46.830 And the routes. 07:46.830 --> 07:53.610 Well we've got the middleware registered automatically so we can use it right away. 07:53.610 --> 07:59.070 That's the reason we just bundle this middleware with the starter package. 07:59.070 --> 08:03.930 Because they This middleware is just useful for every single project. 08:04.110 --> 08:10.890 We've got the main route defined only and the authentication route so that the authentication can work 08:10.920 --> 08:12.300 out of the box. 08:12.330 --> 08:15.000 Other than that, it's no different. 08:15.030 --> 08:15.540 Okay. 08:15.570 --> 08:17.910 So now let me talk about the views. 08:17.910 --> 08:19.140 The last thing. 08:19.140 --> 08:23.610 So I have bundled couple of views with this starter package. 08:23.610 --> 08:26.100 But we have built everything before. 08:26.100 --> 08:27.540 So that's nothing new. 08:27.570 --> 08:34.470 We've got this main view which displays the dummy page which we obviously would have to change. 08:34.470 --> 08:40.980 But other than that we've got the layout, we've got the pagination partial which we have built in the 08:40.980 --> 08:43.710 previous project, and it is exactly the same. 08:43.710 --> 08:49.170 And I've bundled this partial because it would be useful. 08:49.200 --> 08:54.900 We've got the error pages or error page templates for different errors. 08:54.900 --> 08:56.550 There are almost the same. 08:56.550 --> 08:59.760 And the authentication form to sign in. 08:59.760 --> 09:03.050 Now it's the same with the tiny change. 09:03.050 --> 09:10.370 I've introduced a frontend framework called bootstrap, so I was thinking about introducing either Bootstrap 09:10.370 --> 09:11.750 or Tailwind CSS. 09:11.780 --> 09:19.610 I've chosen bootstrap because it requires less work to get some decent view, and this course is not 09:19.610 --> 09:21.110 really about the design. 09:21.110 --> 09:27.710 And you can still use any CSS framework, whatever you prefer or whatever you use at work. 09:27.710 --> 09:31.310 But we just want to make this app look a little bit better. 09:31.310 --> 09:33.830 That's why I've added some classes. 09:33.830 --> 09:36.890 That's the only change that I've actually made. 09:37.970 --> 09:40.370 So I've introduced bootstrap. 09:40.400 --> 09:42.860 It's inside the layout. 09:42.860 --> 09:51.380 So I've added this link to the CSS file from the CDN, which means it will be downloaded from Content 09:51.380 --> 09:52.760 Delivery Network. 09:52.790 --> 09:56.630 You don't need to have it locally which has some benefits. 09:56.630 --> 10:04.820 It's going to load faster for your users and the loading of the CSS file would be automatically optimized, 10:04.940 --> 10:09.680 so you can see some classes added inside some of those templates. 10:09.680 --> 10:11.840 And they are all bootstrap classes. 10:11.870 --> 10:14.960 I'm going to briefly go over them in the next video. 10:14.990 --> 10:21.170 That's why I didn't want to talk specifics about bootstrap in this video. 10:21.200 --> 10:28.700 The only thing I'd like you to know is that this files, this form, this layout, they really haven't 10:28.700 --> 10:31.670 changed except the added classes. 10:31.670 --> 10:39.290 So you can still see familiar things like if the user is authenticated, we need to show the username 10:39.290 --> 10:41.030 and the logout button. 10:41.030 --> 10:43.940 And we also have CSRF token in here. 10:44.000 --> 10:51.950 If the user is not authenticated then we add a login link and also the form should look familiar. 10:51.980 --> 10:55.340 The login form I mean so there is a form. 10:55.340 --> 10:57.830 There are some inputs labels. 10:57.830 --> 10:58.640 We've got this. 10:58.640 --> 11:00.290 Remember me checkbox. 11:00.290 --> 11:03.950 So mostly things that were added here were classes. 11:03.980 --> 11:09.380 Okay, so let's not go too deep into bootstrap for now. 11:09.380 --> 11:14.060 Let me just show you how the project would look like right now when we start it. 11:14.090 --> 11:21.590 So first I'd like you to open the terminal and make sure that inside the terminal you are in the folder 11:21.590 --> 11:26.330 of this project that you have just downloaded and extracted. 11:26.540 --> 11:31.160 That's super important because we have to run composer install. 11:31.430 --> 11:35.450 So this would create the vendor folder and the composer log file. 11:35.450 --> 11:38.360 It's essential that we run this command first. 11:39.380 --> 11:43.250 So you should see an output more or less like this. 11:43.580 --> 11:46.940 And let me close the terminal for just a second. 11:46.940 --> 11:52.670 If you have this composer log file and the vendor folder it's fine. 11:52.670 --> 11:57.770 Then it means everything went fine, which means open the terminal again. 11:57.770 --> 12:02.540 It can be inside the visual Studio Code, or it can be a separate terminal. 12:02.600 --> 12:04.340 This doesn't matter. 12:04.760 --> 12:10.610 Next up, type php hyphen s localhost 8000. 12:10.610 --> 12:15.230 And then just make sure no other project is currently running at this port. 12:15.260 --> 12:16.430 How do you check that? 12:16.460 --> 12:23.420 Well, if you have run any projects before using this specific port, just make sure they are stopped. 12:23.450 --> 12:31.730 Typically you can stop them by pressing Ctrl C and let's point to the public directory which contains 12:31.730 --> 12:33.350 the index.php file. 12:33.350 --> 12:35.870 So now the project should be started. 12:35.870 --> 12:37.160 If it's not starting. 12:37.190 --> 12:40.490 Choose a different port and let's take a look at it. 12:40.490 --> 12:42.080 So this is how it looks. 12:42.080 --> 12:46.640 So the things that are different is basically the styles. 12:46.640 --> 12:51.410 And this comes straight from this bootstrap framework. 12:51.500 --> 12:56.060 So we've got this navigation bar and the index page and the login page. 12:56.060 --> 12:59.780 So as you can see the form looks much nicer. 12:59.810 --> 13:06.340 I can try and sign in using some of the accounts that we have also used before. 13:06.370 --> 13:08.830 So as you see, something has went wrong. 13:08.860 --> 13:13.120 Probably I haven't created the database schema. 13:13.120 --> 13:16.990 And by the way you can also see how the errors would look like. 13:16.990 --> 13:19.720 So this really wasn't complicated to make. 13:19.750 --> 13:25.990 And as I've said I'm going to briefly go over the features of bootstrap and why it is a great choice 13:25.990 --> 13:30.580 if you want to give our apps some decent looks quickly. 13:30.580 --> 13:33.220 And basically that was my goal. 13:33.220 --> 13:36.520 So I think that this should cover a lot. 13:36.520 --> 13:44.350 And next up, I'm gonna talk in more detail about the bootstrap and how we are using it and generally 13:44.350 --> 13:45.460 what it is. 13:45.460 --> 13:53.110 And then we begin building the project by using quite a lot of code that we have created before, so 13:53.110 --> 13:59.950 that we achieve some code reusability, which is very important when we are building some bigger projects. 14:00.310 --> 14:01.720 Births.