Learn the Basics of LARAVEL-8 and create your own "BUY AND SELL" website . | Gitanjal Bhattacharjya | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Learn the Basics of LARAVEL-8 and create your own "BUY AND SELL" website .

teacher avatar Gitanjal Bhattacharjya

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

35 Lessons (3h 27m)
    • 1. Introduction

      2:16
    • 2. The final product

      2:26
    • 3. Set up the web server

      1:46
    • 4. Install composer

      0:55
    • 5. Install Laravel

      4:08
    • 6. Set up virtual hosts

      3:31
    • 7. The project structure

      8:19
    • 8. Authentication using Laravel Breeze

      12:16
    • 9. Create a new view for the product list page

      8:47
    • 10. Create card for product

      9:18
    • 11. Create a header and a footer

      6:01
    • 12. Create product details view

      14:22
    • 13. Creating components for reusable code

      13:48
    • 14. Create a form for posting an ad

      11:18
    • 15. Create a table on the database for the products

      8:33
    • 16. Form validation

      11:59
    • 17. Image upload

      3:36
    • 18. Store a product's information on the database

      6:24
    • 19. Introduction to Laravel middleware

      4:59
    • 20. Retrieve all products products from the database

      8:40
    • 21. Fetch a product by id

      4:34
    • 22. Collect phone number during registration

      5:51
    • 23. Retrieving the seller's information

      5:38
    • 24. Fixing the UI

      1:55
    • 25. Display recent products first

      1:30
    • 26. Pagination

      4:57
    • 27. Show own products on dashboard

      5:25
    • 28. Show edit and delete buttons

      4:10
    • 29. Edit a product

      9:54
    • 30. Delete a product

      3:30
    • 31. Email verification

      4:36
    • 32. Reset password

      0:50
    • 33. Custom middleware

      7:06
    • 34. The class project and the source code

      2:45
    • 35. Conclusion

      0:39
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

455

Students

1

Projects

About This Class

This class is going to teach you the basics of Laravel 8, one of the most popular web development frameworks .

While learning you will create a simple website step by step. The final outcome is a website where users will be able to buy and sell products , this will be simple in terms of features yet a complete product which you can publish to the world .

If you know some HTML and PHP and you want to upgrade your skills to write more organized code , if you want to get some experience on a MVC framework but wondering which framework to use then this course is perfect for you .

Laravel is easy to learn. Just start! and in a couple of minutes, you will realize why Laravel is respected so much.

Source Code(GitHub)

Meet Your Teacher

This is Gitanjal from India .

I am a software engineer and I have developed a number of websites and android apps in last seven years . You may notice me talking about diverse topics in software development as I always love learning new technologies . And I have realized that the most difficult part in learning something new is to know exactly where to start ; thus here at Skillshare I am going to help you find out those starting points .

In my classes you will learn to create simple yet useful applications while learning the basics of that technology . 

Happy Learning .

 

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Introduction: Hello everyone, welcome to this class on larva and my name is k times l. I am from India. And in this class I'm going to teach you the basics of law by creating a simple website from scratch. Larva is one of the most popular web development frameworks in the world. And it makes it a lot easier by providing some simple ways to implement some of the most common task. For example, let us consider death. We want to implement authentication in our website. So we have to allow the users to restrict himself on the website. We have to store your information securely on the database. We have to allow them to login and logout, and there must be some way for a user to retrieve a forgotten password. Also, we also have to verify the email addresses with which do users registered himself. So this involves a lot of work, right? But larval makes this extremely easy for us. It provides a few out of the box solutions for this, like larva, about which you are going to learn more in this course. Rather uses eloquent warm for database interactions, which makes the database interactions as simple as a few function calls. And you will realize the true power of eloquent or M when you try to establish relationships between multiple tables of the database. The project structure of Elavil project helps you create clean and organized code. The analysts easy to start with, and it grows along with him. So once you get comfortable with the basics of law fell, you can start using the sophisticated tools for tasting dependency injection, et cetera, to take your project and your skills to the next level. And in this class, I'm going to make you comfortable with the basic concepts. We just start from scratch and I'll show you each and every step that you need to follow to create a complete bias and website. So by the end of this class, you will have your own balance and website. But more than that, you will have the confidence to build any website using law. And in the next video, I'll show you the final product. The wave said that you will be building during this class. 2. The final product: I'm glad to have you here. Welcome to the class. Now, before proceeding any further, let me show you the final product that you are going to build. During this class. I'm going to teach you how to create a buyer and seller website, where a user can post an ad to sell something and the user can browse through the different products that are being sold on the website. Take a look at the details, find the contact information of the sailor and contact the seller if you're C, gets interested in purchasing the product. So the website will look something like this one. On the homepage, we will have a list of products being sold. The menu at the top right corner, we'll have a button for a new user to register, another to login to the website, and another button for a user to create an ad for a product that he or she wants to sale. On clicking this sale button, a product upload page is displayed to the user. The user can enter a title, description and a price and upload an image of the product. On clicking this posted button, the product information will be saved on the database and it will get displayed on the product list of the homepage. When an item of the product list is clicked, details of the particular product is displayed to the user along with the information of the product. The product details page will also display the contact information of the sailor. This contact information will be visible only if the user is logged in our arise, this information will be kept hidden. A sailor will also be able to edit or delete his own products. This is a pretty simple website, but it needs one to know the basic concepts of Florida. And I'm going to teach you this basic concepts. I'll show you each and every step that you need to complete this website. Now there is a process associated with this class, which is basically your homework. And to know more about their project, what you have to do. Take a look at the video towards the end of the class. I have kept a video to the end, but I still recommend you to go and take a look at that video now because it will help you plan your project. 3. Set up the web server: For this course, we will need a web server, a PHP interpreter, and a MySQL database. You may choose to install these tools separately, but there is an easier way. You simply need to install jam, which is a bundle of softwares required for PHP development. You have to go to the website, approach reframes.org, download jam for your system installed gem by following the instructions of the installer. You may also need to add just the user access control settings of your system for jam to work properly. Now we will have a control panel like this one. From this panel you can start or stop the Apache web server. And my square. There are a few other tools too, but we are not concerned about them at this moment. So start Apache, MySQL. Now go to the web browser and type HTTP calls less, less localhost and hit enter. Now if it page like this one is loaded, then we can be sure that the server is running. Now click on this PHP, my admin button at the top right corner of the page. And if I pay similar to these four appears, then it is come from debt. Mysql is 2 is working properly. Next, we had to install Laura Hill and we are going to use composer to install larval. So in the next video, I'll show you how to install composer first. 4. Install composer: As I have already mentioned, we are going to use composer to install Laura Hill. So later us install composer first. If it is already installed on your system, then you can skip this video. Composer is a dependency manager for PHP and you can get it from the wave set gate composer.org. Then follow the instructions of the installer to install composer. Once the installation is complete, open the command prompt and run the command composer DES, des person to verify that composer is working properly. And as the person number appears, we can be sure that composer has been installed and it is working properly. Now let's proceed to the next state. Installation of Love. It. 5. Install Laravel: Now as we have installed composer, it is finally time to install Larson and create our first project. Now if you take a look at the larval documentation, you will find two approaches for installing larva is income Bowser. Go through larval.com and click on documentation. Clay here on installation inside Getting Started off the leaf Meno and click on Installation via composer. In the first approach, you have to run this command every time you want to create a new layer of health project. Or you can follow the second approach and you can install R well globally with this command composer global require law has less installer. And then whenever you need to create a new project, you can simply run lava new. And then the name of the project on the document is. And you will also notice this command, PHP artisan serve. This loads D-Wave site using PHP is inbuilt web server. But as we have already set up our Apache web server, so we don't use this command. Now on the jam control panel, if we click on this explorer button, it will take us to the installation directory of champ. Here you will find a folder named is to dogs. And this is the place where we have to keep all our code. So let's create a folder here to keep our project organized. Let's name it projects. Now open the command froms and navigate to this folder. Or to directly open the command prompt in this folder, type CMD on the address bar and hit Enter. Now let's install R over L as global composer dependency by running this command, composer globally require law. Ravel's less installer. And once the larva installation is successful, we run the command Levin knew DNS, let me call the website DNS, which stands for buy-in sale. After successful execution of this command, you will have a new folder inside the project folder named DNS. On opening this folder, you will see the structure of a larval project. We shall explore the directories of the structure as and when required during the course. Now let us try to load the website on the browser. First, verify that our purchase Server is running from the jam control panel and then on the address bar of the browser, type http columns less less localhost slash projects, the directory where we are keeping our project, slash b ns, the name of our project, the name of the directory of our project. If you hit Enter now, you will see the directory structure of the project. And a publicly viewable web page. Is there inside this folder, public. So click here or add less public to the URL. It loads the default home page of our large-scale project. We shall remove this homepage and add our own. But before that we sell add a hard shell host for the convenience of accessing the website. 6. Set up virtual hosts: In this video, I'll show you how to add a hard shell host. But what will happen after adding a hard-shelled host? Let me show you. This will happen. We shall be able to access our website using a domain name like this one, b ns dot goal. And it is convenient than typing localhost slash projects slash DNS less public every time. Right? Now to add a virtual host, we have to make changes in two files. One is inside the champ installation directory and the other is inside the operating systems Windows directory. Let us find the first file. Go to jam the installation folder, then Apache, then C, U, and F, and then extra. Here you will find a file named HTTPD, deaths be hosts, dots here and f. Inside this file you will find some sample information inside blocks named a virtual host, which are currently committed by adding has at the beginning. We shall add a new virtual host blog. Here we sell add values for two properties. First is the document root. We sell at the path of the public directory of our Laura Bell project here. And he says specify IS server name by which we want to access our website. So let's add VNS dot go here. Let us add one more block to load the default jam dashboard page by the name localhost. Now we're done with the required changes in this file. So let's move on to the second file that I have mentioned earlier. For debt, we have to go to the directory C, Windows system 32 drivers and then ETC. And here you will find a file named hosts will make some changes to this file, but we have to do that as an administrator. So let us open note paid as administrator, and then open this file and add these two lines here to map the local IP address, 2D domain names we want to use. We have to add the IP address, add a space or a tab, and then the domain name. And we have already specified the directories to which the domains to point to right. Now restart the Apache web server from Jim Control Panel and try typing the domain names on the browser's address bar. Http, call owns less lesbians that go. And it loads the homepage of our large-scale project. Now we are all set to start writing the code. So open up your favorite ID. I'm going to use Atom for this class, which you can find on this website. Atom dot io. 7. The project structure: So the weight is finally over all the boring SATA, but it is states are complete and we are all set to start writing code. But before we start writing our own code, I'll walk you through the important components of a larval project. Here inside the project directory, we have multiple folders and files. And first of all, I would want you to take a look at this file named dot ENV. This file is used to define some common configurations for the project. We define configuration related values here in this file, like the information related to database connection. These values are accessed from the configuration files that are inside the config folder. All of the configuration files of the larval framework are stored inside this config folder. You will find some general configurations like the website name and URL, etc. In this file, App.js PHP. Similarly, the database dot PHP file contains data was related configuration values. In this files, you will find calls to a function called ENV. These are made to access the values of the dot PNG file. The first argument corresponds to the name of the configuration of the dot ENV file. And the second argument is a default value. If you remove this ENV function calls and air actual values here itself, then also it will work, but it is much more convenient to have a single place for specifying all the configuration values. Thus, we have the dot ENV file and we sell make changes to the configuration values of the file as and when we need. Now let us talk about the layouts or the user interface of the website. Defiles responsible for the layouts of the pages have to be kept inside this folder views, which is inside the folder Resources. And currently we have only one view here as the default wave set has only one symbol page. Notice the filename. It is welcomed blade dot PHP. They extensive blade dot PHP is used to indicate debt. Blade templating has been used. We shall learn more about Blade templates where we start creating the layers of our own. Inside this file, you will find some HTML and some CSS use for creating the homepage. We say that right, our CSS styles inside this folder called CSS inside the resources and the js inside the resources less JS folder. This Resources folder also has a folder called lang to contain all the language related files. But we are not concerned about them at this moment. For this project, the files inside the folder resources less views are the views or the layouts. These files are responsible only for the user-interface. They know nothing about the business logic. They don't know where to get data from. They are unaware of the database and the other backend related stuff. The data to be displayed is simply passed to these views. But how do we get the data from the database? For debt we have models and larval by default includes an object relational mapper called eloquent. Eloquent models have magical powers. Let us take a look at one that comes inbuilt with the project. Go to this directory app, then models and open the file user dot PHP. This is a model that is responsible for interacting with the users table of our database. You won't see much code inside such a class, but you will be surprised to know the capabilities of these models. Using a model, we can read the data from the corresponding table of the database. Add a new items are date, add existing items, and also delete items from the table. We shall explore more about the models when we create our own. Now we have the mothers to interact with the database and views to interact with the users. We can call the function all on a model to get all the items from the corresponding table of the database. But we don't write this model related codes inside a few data to be displayed should be passed directly to the view. Now the question comes, where to write the code for database requests? And the answer is, inside a controller. A controller sits in-between a model and view. It fetches data from the database using immoral and passes it to the concern for you. If you interacts with the user and passes the user inputs to the controller and the controller takes the action as party request. And this access often involve a model to interact with the database. And there is a folder named controllers inside App. Then default STDP, where we have to keep all our controllers. Now we have diffused for user interactions, model for the interactions with the database, and then the controllers for the interaction between the views and the models. We write functions for different tasks inside a controller. For example, we will have a function to retrieve the list of products and other to retrieve the details of a particular product by ID and functions for deleting or updating a product, etc. Now the question is, how do we invoke this function? For example, on clicking an item on the list of products we sell called the controller function for product details. And we do that, we'd help of roots. Roots are used to route the ACDP requests to the code that handles them. You will find a folder named routes to keep all the root files. Currently there are four files, but for this project, we are concerned only with the root file named web dot PHP. This is where we have to define all the routes for our website. If you open the file web dot PHP will find that one root is already defined in the file. This is what the homepage of the website. When we enter the URL DNS dot go on the browser. This roots comes into action and loads the view named welcome. But you may notice that no controller is accessed here. Confused. Don't worry, I will clear all your confusion in the upcoming videos. There are a few more directories in the project that we sell access during the course and I'll explain their purpose when we use them. For example, in the next video itself, while implementing authentication, I will introduce you to the Migrations folder that is inside the database folder. 8. Authentication using Laravel Breeze: If you take a look at the Getting Started section of the larval documentation, you will find a link to a page called directory structure, about which we have already discussed in the last video. You can refer to this page whenever you get curious about the purpose of a particular folder of the larger project. Now below that lean to the page directory structure, you will find another link to a page called starter kits opened at one. Now lava makes our life easier by providing some optional kids to get started with a new larger project. And we are going to use one of them called larval breathe for implementing authentication in our buy and sell website. The process of implementing authentication involves a lot of work. We have to allow the users to restate himself on the website. We have to store their information on the database. We have to allow the users to login and logout, of course. And there must be a way for a user to retrieve a forgotten past hurdles. And while doing all of this, we have to keep security in our mind. Now Lara will breeze simplifies this complete process of implementing authentication into a few simple commands. It will create all the views, the controller of the roots that are required for implementing authentication. We dealt us writing a single line of code. Now there is another starter kit called lava gesturing, which is a little advanced in terms of the features it provides. But for beginners, it is recommended to get started with larval breeze, as it is relatively simple. So in this course we are going to focus only on larval breeds. We can summarize the complete process into four major steps. First, configuring the database. Second, creating the record tables on the database. Tarred installing Lavelle breeze itself using Composer and forth, Zen editing the authentic as unrelated codes using breeds. Let's start with the first one. To implement authentication, we have to set up the database because tables will be created to store the user information and RRR data. We sell anyways, need a database for the website as we also need to store the ads for the products to be sold. So it is the right time to create the database and configure the project to be able to communicate with the database. Now to set up the database, first of all, ensure that web server and MySQL is running. Then open Jim homepage on the browser by entering http localhost and go to the PHP my admin page by clicking on the PHP my admin link on the top right corner of the page. Now click on New from the left panel and a form to create a database will appear to the right and tried in name for the database. And click on the button, Create. Let's name it by and sale. Once the database gets created, we will see a form to create a table inside a database. But we are not going to create the tables from this interface in state whistle create them by creating migrations. Inside our project. We are going to create a user for this database here, click on the item called privileges from the menu on the top. Click on the button, Add user account from the section levels and new. In the login information form, enter a username, change the host name to local from the drop-down and add a strong password. I am adding a week one for now. On this section database for user account. Check the option grant all privileges on the database by Ansel and click the button, go at the bottom of the page. Even CMS's like this one. Now we have to establish the connection between this database and our project. For debt. We have to add the information of the database and the user that we have created just now. Pretty dot ENV file of the project. Inside the dot YAML file make changes to the database configurations. Here DVI connection is MySQL DB host is localhost DB port 3306. This is the port on which MySQL is running. You can verify it from the gem Control Panel. Next, add the name of the database and the name of the name and the password of the user that we have created essentially. So here the databases buy and sell. The username is also buy and sell. And then I'm adding the password that I have given to the newly created user. With this, our first step is complete. We have completed the database configuration. Now let's move on to second one. Creating the tables on the database. For debt, we have to run the midday sense. But what does that mean? Take a look at the folder named migrations inside the database folder of the project. Here you will find a few PHP files. These are the database migrations. Debt came inbuilt when we created the larval project. We will need to create a few of our own during the project. The migrations contain the schema definitions of the database tables. Inside a migration, we defined the schema to create a table. We also define changes to schema of an existing table when we need to add, remove or object columns. And when we run these migrations with a command that the changes that are defined in this file are applied to the database. Let's take a look at the first file, the name of the file in slag underscore create underscore users, underscore, table dot PHP. And the name itself explains the purpose of defining it creates the users table. This file contains a migration, namely create users table that contains the schema definition 40 users table, MI Grayson class contents two methods, 1.5 and the other down. The RPE method is used to add new tables, columns, or indexes to your database while it down metrics should reverse the operations far from by the OK admitted. Here in this migrations create users table, you will notice that the up method contains the schema for creating the table named users. While it down method drops the table if it already exists. You will get familiar with this during the course as we sell create migrations for creating and modifying our tables. Now if we run the command PHP artisan migrate on the terminal than all the outstanding migrations will be run. The functions of the migrations will get executed. It down functions gets executed when we run the command PHP artisan migrate, rollback. And as of now we have not run the migrations at all. So all our outstanding. So let's run the migration first, open the terminal inside the project directory, and run the command PHP artisan migrate. Once the migration is complete, take a look at the database on PHP, my admin. You will find a tree new tables which didn't exist before. So this second stage, creation of authentication related tables is complete. Now let us proceed to the next one, installing Lavelle breeze using Composer. Open the terminal at the root directory of the project and run the command. Composer Ricard law has less breeze, dashed ds div, and hit Enter and wait for it to complete. And with this, the third step is complete. Now let us process to generate the authentication related codes. Larva breeze creates the views, the controllers, and all other components related to authentication and places them in the appropriate directory of the project. And to make brisk create these components, we have to run the command PHP artisan, breads, colon installed on the terminal. After completion of this commodity, if we explored the directories of deposit, we shall find a few new views, new controllers, and new route files in the respective folders. These are the code related to authentication that larval breeze has added to our project. Now, if we head over to the browser and load our website, we will notice two new buttons for login and registration. On the top right corner of the page. Let us take a look at the login page by clicking on the login button. This something seems to be broken. Well, there is one more step lift. Larval breeze has made changes to the app.js file inside the resources less CSS folder. And we have to compile them 40 styles to come into effect. So to compile the assets, run these commands. First run the command npm install. It will install the NPM packages on which our project events. It will install the scripts that we need to compile the assets. After completion of this command. Run this command, npm run dev to compile the assets. And your terminal will display a success masses. If no error has occurred. If you get the error mixes not recognized, then you will need to install law. They'll mix with this command npm install. Laura will mix at the rate latest desk, the same desk Dave, and upgrade npm packages using npm upgrade. Now reload the websites and look at the login and races and paces. They look good. Now, try creating a new user from the racism screen and login. On successful login, you will be taken to a home screen similar to this one. So our authentic isn't system is ready. 9. Create a new view for the product list page: We are going to display the products on the first screen itself on loading the website, the users will be able to view the products without even logging in. We will ask the user to login only when he or she tries to view the content details of the sailor of a particular product. Or your C tries to post an ad for selling something. We have discussed the components of a larval project, right? The views are there for user interactions, the models are for database interactions and controllers facilitate the communication between these views and the models. The views know nothing about the application logic. They simply present the data, pass to them to the user in a beautiful way. Now is I'll create the views 40 pages of our website using dummy content and we sell replace this dummy content with actual data when we create the models and the controllers and we start interacting with the database. The views are kept inside this folder views inside resources. Currently we have only one view here, which is responsible for the default welcome screen of the project. I'll replace its code with our own to display a list of products. But before that, notice the file name once it is welcomed or blade dot PHP, the dot blade dot PHP extension is added to inform the framework that the file contains a blade template. Now, what is a bleed template? A blade template or the blade templating engine as a whole, helps us in putting data inside HTML while creating the layout. Let me show you how. Open the file. Welcome, dot-dot-dot PHP. Let me show you the simplest thing first, scroll down to the bottom and you will find the line for displaying the law they'll version and the PSP version at the bottom of the page. Here, this one and this one are global variables. And blades eco statement, this double curly brackets are used to print developers of these variables. Now, if we replace the bits in texts with raw PHP to print the variables, it would look like this. And now you may be thinking this looks so simple. Why do we even need to use a templating engine? Let us scroll up a little hand find out why. At the beginning of the body will find the code for displaying the login and raised recent buttons. There are some interesting stuff here. Notice the if statement. This is a blade reactive for adding an if condition. Here, this code is checking if a route named login Xist, which is an indication that authentic isn't has been implemented. If it exist, then only it will display the buttons, otherwise, nothing. Next. The other it off directive is used to determine whether the user is logged in or not. A link to the dashboard pages displayed if the user is logged in. Otherwise, the login and registration links. Now, if we replace the blades index with the raw PHP code, it will look a little different. Let me show you. Now the importance of using a templating engine is getting clear, right? But this is not all that blade has to offer. Asl X-rays more of blades magic soon. Now let me quickly summarize this tapes that we are going to take in this video. First of all, we'll create a simple view. We sell, add some simple HTML there. And then we sell, tried to load it on the browser. For that we have to create a route. And then we sell, use the for loop directive of blade to print a list of items. So let's get started. Create a new file inside the views directory. Latest name IT products dot blade dot PHP. We sell remove the welcome dot dot dot PHP later, keeping it for now as we may need it, need to refer to it. Now let's create a simple HTML layout in our products view. At the HTML tags then a head and body. And I'll add a title inside the head hand. Let us print a string. We'll come to be NS. Now let us try to load this page on the browser. But how to do that? Got any clues? Yes, you are right. We have to define a root. So open the web dot PHP file of the routes folder. Initially the arrows only one route defined in this file. After implementing authentication, a new route has been added, 40 dashboard view. So if you append slash dashboard to the URL on the address bar and hit Enter. Your dashboard page gets loaded, provided you are already logged in. Now let us add a route for the products for you. To create a route, we have to call one of the different router methods. This matters corresponds to the HTTP verbs, gate, post, delete, and patch. Here, in this case we sell make a gate requests. So call root gate. We have to pass two parameters. The first one is the URI. Let's pass products here. And this second parameter is a function. We have to return the HTML code from this function. And as our HTML code is inside the views so we can return the view itself. Laura Val has provided a helper function called view. To access a view, we have to pass the name of the view to this function. It will search the directory for views, the directory called views inside the Resources folder for the view with this name. Now type HTTP colon slash lesbian is to grow less products on the browser and hit enter. And it loads the pace that we have just created. Now let us come to the heart stiff. We are going to display a list of items using the four blade directive. As we are going to display a list of items on this page, we will need to use a loop once we start working with actual data, which will pass the array of products from the database to this view. And here we sell iterate through the items of the list. But for now we'll focus only on creating the layout using the Blade templates. So we still use some dummy content. Here. We still use the blade reactive for, for a for loop. And don't forget to add the aimed for directive here. So this loop will print this string hello world 10 times latest reload the page and see how does it look. And here we have the string printed ten times. In the next video we said create a card like component to display the information of a product. And we sell, replace this string with the cards. 10. Create card for product: Continuing the development from where we lived. In the last video. Here we will create Dui to display the individual products. On the products list. We sell create a guard like UI, where we sell display an image of the product, a title, description, and the price of the product. When the user clicks on an item from this list, which will display the details on a new page. Instead of using the raw CSS styles. So we shall use the CSS framework named Tailwind CSS to style the elements of the pages. And la Halle breeze uses tailwind CSS and as we have installed it to implement authentication. So Tailwind CSS is also installed and is ready to use. You can verify that by taking a look at defile named whip big dot, dot js, you can find it at the root of the directory structure. Recur tailwind CSS has to be passed to this function posts cases enclosed inside an array. And here it is already being passed. The app dot CSS file inside the resources slash css directory to contains the imports necessary for Tailwind to work. Now we have to add the link to our style sheet to the page at this line to the head section of the page. Essays is a helper function that generous center. It's the URL for the asset. And we also have to compile the CSS for that. Run the command npm run Dave on the terminal. Ensure that you are inside the project directory on a terminal. This compiles the Tailwind CSS rate and inside app.js of the resources folder to play in season and keeps it inside the public folder. Now come back to the products dot played dot PHP file. And let us try to make the background of the page a little gray. But how to change the background color of an HTML element using Tailwind CSS. We have to add a class. Now which class? Let's find out. Go to Tailwind CSS documentation. Scroll down the left phenol Meno To find the background section and click on background color. Here you will find some predefined classes to control and elements background color. Let's copy BZ gray 50 and add it to the body of the page. Now if you are expecting the changes to a peer of 30 loading the page, then you are wrong. Whenever we make changes to the CSS, we have to compile it again. So run npm, run dev or the terminal. But wait, if you don't want to keep running this command, every time you change something, there is a better option for you. Run this command once in state npm, run what? It will keep watching the relevant files for changes and automatically start decompile lesson process whenever it detects it change. Now reloading the page, we will notice that the background color changes. Now add a new div inside the for-loop for the product card. Inside this div, Let's add an image tag for the product image. I'm adding an image from unsplash.com by the user and m c dx. Below the image. Add another day 40 product title. One more below the title for the description of the product, and then one more for the product price. Now reload the page and you will see the image and the text repeated 10 times. Now let's add some styles to this elements. Let's start with the container day for the product. First, let's add some margin using Tailwind CSS class m for. You will find the margin related classes in this section called spacing in detail when CSS documentation add bg white to make the card background white, add rounded to make the corners around. Let us also add some shadows at the class setup. Now as we have run the command npm run Watch, it will automatically compile the CSS when we make changes and Safety Code. And the Laura Hill mix compilers and successful notification will appear on the screen. Once we get the notification, we can reload the page to see the changes. So let's reload the page. Now. It looks better, but not like the way we want. Let's add some more styles. First, let's organize the cards in multiple columns for that and close the for-loop inside a new div, a container for all the products. At the class, greed to organize the children of this div in a grid structure. Also add greed goals for to specify that we want the grid to have four columns. You can find this greed related classes on the flexbox and grid section of the Tailwind CSS documentation. Reload the page on the browser and you will feel good. We are approaching towards the goal. Now it's top corners of the image are not rounded. Though the parent div has rounded corners. This does not look good and fixing this is easy at the class. Overflow hidden to repair endif, and deserve corners at the top disappeared. Let's wrap the title and the description by a new div and add some padding to this div using the class before. You can take a look at different bedding and other spacing related classes in this basin section of the documentation. Now let's make the title a little smaller. Using the class takes SM and a little bowl using font, semi bowl. We shall make the description text smaller than the title text. And there is a class called takes access for that. Also, Let's make this description takes a little grayish using the gray 500. Now let us add a border to the top of the div for the price to separate each from the above information at the class border, t, T for top. Also add we X4, four horizon to padding and PY, two for high-tech palpating. Let's also make this text bold hand a little smaller using these two classes, font bold and taste, SM respectively. It looks good, but the space between the two cards sim to be a bit more, right? Let's check if reducing the space makes it look any better. First, remove the margin from the product. These. And we sell, add some gap, the greedy itself. So add GEF four and at P4 to add an overall padding around the products, contain it. Now reload the page. And it looks beautiful. 11. Create a header and a footer: The product list looks good now. And in this video we are going to add a header and footer to make this page look more appealing. Currently, the page looks like this. And by the end of this video it will look something like this one. Let me summarize this safes for you first, let us talk about the header. The first step will be to add a navigation bar at the top using the nav tags of HTML. Then we sell add divs for the logo on the left and for the links to the right. And then we'll add the logo and the links. Now let us get started. First, I'll remove the welcome message. Now inside the body at the top, add a nav tag. Inside the nav tags add two deeps, 140 logo to the left, and the other 40 menu items to the right. At some text inside these leaves to make them visible on the page. Now, the text are placed high degree. We sell place them side-by-side. To place the div side-by-side. Let's wrap this deeps by another div and add the class flex to the parent div. Add another class named justify between tourist parent div to add maximum possible space between the two children deeps as we want them to be on the two ends of the innovation bar at some pairing with the class P6. So the first ten seconds tapes are complete and he pays, looks like this. Now let us replace the text logo by an actual logo. For now, I'll use the larger logo itself from the welcome page. Let's copy the SVC for the logo from the welcome view and paste it inside the logo div, inside the products view. The logo appears on the page, but it is too big. Let's replace the class age 16 and 20 from the S visit tag by the class H eight. Now it looks nice. Let's also copy the code 40 login and racism links and paste it inside the main wide MPS div, replacing the text menu items. Now we can see the links by reloading the page, but there are a few things that we would like to change. First, the links are stuck towards the top of the navigation bar and are not aligned with the logo. Secondly, these links are fixed. So whenever we scroll the page, they don't move with the nav bar. Let's fix this. To make this links move with the nav bar, we have to remove the class fixed. But here it seems we don't need the other classes too. So let's remove them all. And to align this links to decenter of the navbar at the class items center to the DFF data is parent of the logo and menuItems leave the one having the flex class. Now reload the page and it looks perfect. Now let's also add a footer. For the footer too. We sell add a div at the bottom of the body and add some text to the left. And we sell display the larval NPH reversals on the right like the welcome page. So let's add a div before closing the body and add two divs inside this 40 left and right portions of the footer. Let us copy the classes from the header div and paste it here. I will also add a border to the top with the Cloud border t. It is getting the same, but let's reduce the height a little and add some margin around the complete footer. Let's add em for, for Mars in and replace P6 By PX and PY for for horizontal and vertical paddings. Add takes him to make the text a bit smaller and add text gray 500 to change the color of the text to gray. Finally, to make the footer look better, I'll replace that takes lift width created using larval and Tailwind CSS and the texts right, with the lava lamp piece we were son, as in the welcome screen. So I'll copy this from the welcome screen and add it here. Now reload the page. And the products view of her buy and sell website looks pretty good, right. 12. Create product details view: As we have created a beautiful page for displaying the list of products. Now it is time to display the details of a particular product. On clicking an item from the product list, we are going to display the details of that product or a new page. And in this video, we are going to create that page. We said create a new view and copy the content of the products view. We shall keep the same header and the footer, but replace the code for the main content, which I'll hide the sailors information if the user is not logged in. So the first thing we will do is to create a new file inside the views folder. Let's name it product dot, dot PHP. Notice the difference. It is product singular, not products. Or you may name it anything. Now copy the content of the products view to maintain a consistent look throughout the wave sec, we shall use this same header and footer on all the pages. So restructure of the product detail space will be similar to the products list page. We only have to change the main content portion. Let me add some comments to distinguish the different portions of the page. I'm collapsing the DBS for clarity here. Now, are you thinking that this is not a good idea to write the same code again and again. If yes, then you are right. Because duplication of code introduces lots of difficulties in maintaining and scaling an app. For example, let us consider that one day we decide to add a new item to the main of the navigation bar. Then we have to change the related code in all the pages having the navigation bar. So is there a better way to write this code? Yes, of course, and I'm going to teach you that. But for now, first of all, let us design the layout of the product page. First remove the code under the section main content, and add a new div. Inside this div, add two more leaves as we sell. Display the product image on the left graph and some taste information on the right half. Now let's load this page on the browser. But wait, have we added a route for this page? No. Then open the file web dot PHP or the root folder and add a route, add a new route similar to the one for products, the URI, this thing will be product ID. We sell also define a route parameter called ID to capture the product ID passed through the URL. We can define a route parameter using curly brackets like this one. Now here it seems that I have made a mistake. We have to keep the views inside the views directory. And I have created this file product or the dot PHP inside the parent of the views directory. So let me move this to the proper place. At this moment, we are not using the ID and we are simply returning the view 40 product details. Once we start working with the database, we will use this ID to retrieve the details of a particular product. Now let us try loading this page on the browser. So here we have to enter the URI less product flow, pass any number as DID now n. Here we have the product details page. Now let's go to the products list page and wrap the D for the product item by an anchor tag. As we want a product card to be clickable. On clicking a product, we sell load the details of that product to the HREF attribute. We shall pass less products, less one. We shall pass the actual ID instead of one here. For each product. When we start displaying actual products, click on any item of the list. And the product details page gets loaded. Now back in the product view. Let's add the classes flex and am four to the parent div took place the children side-by-side, and add this class w one-by-two to both of the children to divide the space into two halves. We sell, display an image on the left half and some product related information on the right half. Now the page looks like this. Let's display the image on the left. I'll copy the image element from the product list page and added here. Add rounded to the div to make the corners rounded at some shadow using the class shadow. And add overflow hidden to, to hide the overflow so that the amaze does not move out of the borders of the div 2D image tag. Add the class object, go over and w fool to resize the image to covert the parent div. Now reload the page. It looks good, doesn't it? Now let's add the content to the right half. Let's copy the deeps for the product title and product description from the product list pays and pasted here inside the div for the right half. Let's copy the desk refunded once again to display a long description. Let me also add some text here. Let me try changing the font sizes and see if it make any difference. First, I'll remove the text SMM Clause from the title and replace takes excess, which takes S and in the description div to make them look a little bigger. Now let us try to make this container div, look like a car by adding these classes rounded to make the corners around. Busy white for white background, ML to for adding a margin towards the lift. P4 for padding and a shadow. Edit top margin which MT to 2D D 40 long description. Now it looks better. So move on to the next component, which will display the sailors information below the description. So let's add a new div. Let's add some top margin width empty for inside this div, add two more leaves. First, for a label sold by, we shall make it smaller, which takes access and a little bold with fonts semi bold, and change the text color to gray using the class takes gray. Now add another div to display the name of the sailor. I'll add the class takes the SM to make the text a little bigger than the level. And I'll use Taste grief 540 color. Now copy this and paste it twice, once for displaying the phone number. So change the level. And another 40 email lists change the level to email address. Let's reduce the top margin for these two Little using the class M22 so that they look like parts of the same group of him permission with this seller name. I'm also adding some arbitrary values here. Now once the CSS gets compiled, reload the page once, and it looks beautiful. Now we are left with the most important piece of information. The price of the product list display the price at this portion, the bottom right of this card. Is it going to look good? What do you think? Let us try and see it. Add a new div. We sell place it absolutely at the bottom right corner of the div. For the right-half. For that we will add the classes absolute, bottom 0, right? 0. Now 40 class absolute. To work, we have to make the parent div relative using the class related. So here is the parent div, the root of the right half. Let's add the class relative here. We sell, add some margin with the class M6 and make it look like if wheel. And for that, let's add the class rounded full and add some padding. Let us add AX4 for horizontal padding and a little smaller PGY2, 40 article padding. Also add a green background color using BZ green 500. Now add a default it takes inside, make the text white, which takes quite bold, width, font bold, and a little smaller using text, SM. Now compile the CSS and reload the page. And wow, the page looks beautiful and feeling happy. Now one thing lifted before we can prostitute in the next video is that we have to hide the phone number and the e-mail if the user is not logged in. To fix this latest first, take a look at the code of the welcome view. Here, this OT directive of Blade II is used to decide which leads to display. If the user is logged in, then this link is displayed. The link to the dashboard page. Otherwise, the s-block is considered for rendering. Now we have to do something similar, right? So come back to the product few. Let's start with the phone number and D OS directive before the D 40 phone number and add the Directive after the phone number div. And we also have to add the Directive aimed at the end. Now whatever we want to display to an unauthenticated user have to be added between this IS and a naught. This is the s-block. Let's copy the D 40 phone number and paste it inside. This is block and replace the number of stars. Now save and reload the page on the browser. If you're already logged in, then log out and check whether you can see the phone number or not. Let's also add a link to login as an anchor tag and pass the URI slash login to the HREF. Ed classes takes excess and takes blue 500 to the anchor tag to make the text smaller and blue. And now do the same for the e-mail. Also. Now reload the page and it looks complete. It looks good. And before proceeding to the next task, I would ask you to try logging in and notice the different sounds. 13. Creating components for reusable code: We have talked about this, about the maintainability of our application. Currently we are duplicating a lot of code. Let me put the quotes of the product list space and the product details pages side-by-side. I am also collapsing this the 40 ease of viewing. Here. You will notice that only the portion named main content is the friend Forty two pages, the rest of the code is the same. Duplication of code is bad and code reuse is good. So in this video, we shall find a way to reuse the common code. We sell create something like a template for this structure, 40, common structure of the individual pages of the app containing the header and footer, basically the non changing portions. And we shall define a container 40 based specific content. Let us take a look at the file dashboard dot dot PHP. Now you may be wondering what is this tag at the root acts at layout. And what is X slot? You will find similar elements inside the authentication relative refused to, which are added by larval breeze inside the OS directory. I'll clear your doubts in this video itself. We sell displayed this type of tags in our views to. So by the end of this video, there'll be no PGA or changes in the pages of our website. But the underlying code for D views will look somewhat similar to the code of the dashboard view. Now back to the question, what is this tag x at layout? This tech corresponds to a component. So what is the component? Well, as the name says, it's a component is a portion of the view. You may have already noticed that the dashboard dot dot PHP file does not contain the code for the header and the footer. It only contains the code for the main content. The common structure of the layout of the page is defined in a separate file that you can find inside this folder. Resources less views, less layout named app.py blade dot PHP. Open this file and you will find the code that seems to be missing from the dashboard view, the HTML tag, the head, the body, etc. Here you will find that the navigation bar has been included two from a different file. And there is a portion named main content where a variable named slot is being printed. This variable slot gates the content of the view that we defined inside the tag corresponding to this component. Let's come back to the dashboard view. Here, this deck is responsible for rendering the component that we have seen just now. And the content that we are adding inside these tags, XML layout, gets injected to the variable slot of the component. And this whole magic is far from by blade templating engine. We don't need to worry about the internals. We have one more unknown tag inside the dashboard view x slot. To understand the purpose of this tag, go back to the app layout component. Again, the variables slot is the default one. We don't need to define it. We can simply use it and the content of the view gets injected to eat. But often we need to define other additional variables to. For example, here, an additional variable called header is used. And this makes sense. The header should look the same in all the pages, but the value of the header will vary, right? In such a case, we have to use the tag acts lot to define custom variables. Inside the dashboard view, the variable name has been passed to the attribute name of D, acts lot tech, and the content to be injected to this variable is written inside the tags. Now the next question that may come to your mind is, why this name acts at layout for the tag. Do we need to use this name always welding, finding a component for a page layout. Do we have more similar types of texts for different types of components? We don't need to use the same name always. There are no predefined tags for different components. These names are derived from the name of the component. They start with the string x dash, followed by the kebab case name of the component class. In kebab case, the words are separated by hyphens and written in small letters. So if you create a component named product card, then to render the components inside your view, you have to use the tag x ds product desk tag. And the tag x lot is predefined in Blade. We have to use it to define custom variables for a component. Now some more confusions. As the tag used inside the dashboard view is AX app layout. There should have been a component named app layout, right? But the file we're looking at is f dot blade dot PHP. So is there any exception? Well, not an actual option. There are basically two types of components. One is a class-based component and the other is anonymous component. To create an anonymous component, we simply have to keep the blade template for the component inside this folder named component inside the views folder of the resources folder. And we can start using it tag with the same naming convention as mentioned before. To render this component. Take a look inside this folder. Components in number of anonymous components have been kept here by larval breeze while implementing authentication. Here the first one is named application logo dot blade dot PHP. This is a symbol component containing the SVC 40 larval logo, which is being used by the authentication related views. And inside the file navigation dot blade dot PHP. Inside resources less views, less Layouts folder. You will find the uses of the tag application X application load that is responsible for entering this component. Now you may ask, how do I know that application logo is an anonymous component? I'll tell you first, let me tell you about the first type. Class-based components. Class-based components have an associated class that gates placed inside the folder named components inside view insight app folder. A class-based component can be created by running the command PHP artisan make Component, and then providing the component name on the terminal. This will place a component in the apps list, fuse less components directory. And it will also create a view template for this component and place it inside the resources less fuse, less components directory. Now, if you take a look inside this component folder inside apps less views, you will find two files containing the classes for the corresponding components and the views for these components. Our app.py dot PHP and guest dot blade dot PHP. Data inside resources less views, less layout folder. By default, the views that are created by the make Component Command are kept inside the components folder. But here these views are kept inside the layout folder by explicitly specifying this inside the classes. So currently we have two class-based components, app layout and gaze layout. And the other components that are inside the folder resources, less views, less component are anonymous components. So you have got the answer to the question, how do I know that application logo isn't anonymous component, right? Because it does not have the corresponding class for it. Now with all the knowledge that we have got, let us try to create our own component. Now, can you decide the states that we have to take now? First we will create a component. Then we add the code for the header and footer inside this component and we will remove them from our views. And we shall wrap the remaining code of our views inside the components tags. So first, let's run the command PHP artisan make component and specify a name. Let's name it based layout. To create a class-based component. Now notice that a new file has been added inside the folder apps less views, less components for the component class and the corresponding Xiu named base layout dot blade dot PHP inside the folder, resources less useless component. Let us move this new view to the layers folder to maintain a similar structure to the one created by larval breeds. We also have to update the view reference inside the render function of the component class. Now copy the code from the view products dot blade dot PHP or from the view product dot dot PHP and paste it inside this base layout component. Remove the main content portion of the code and eco the variables slot. Now the main content for the individual pieces will be insect it to this variable. Now, come back to the product's few and remove all the code except the code for the main content portion. And wrap this quote by the tag for rendering the component x dash base desk layout. If we reload the website on the browser, we will see that it looks and behaves the same as before. Now try removing the texts x base layout ones, and reload the page again. This time you will notice that the header and footer disappeared and the styles applied to the elements of the product guard are also not working as the link to the CSS file is there inside the base layout component. Let's make it work again by adding the tag and also do the same 40 product details page. Inside the product view. Remove all the code other than the main component version and enclosed the remaining code inside the tags x base layout. Now along with the UI, our CO2 looks good. We'd help a blade superpowers. We have made our code more maintainable and more scalable. The next thing that we have to do is to create the sale product view to allow the user to post a new ad to sell a product. 14. Create a form for posting an ad: We shall allow our users to post an ad for a product that he or she wants to sail. In this video, we are going to create a forum to add a title of the product, to add a short description, a longer description, the price of the product and an image for the product. And when the user clicks on the submit button, then we store this information on the database. And the egg or the product will be immediately available on the product list page. And in this video we are going to focus only on the UI. We shall implemented database interactions later. First of all, create a new file inside the views directory. Let's name it sail lock-blade, dot-dot-dot PHP. Then add a route for this view on the web dot PHP file inside the routes folder called the function gate of the root class. To the first parameter passed the URI as a sale, and to the second parameter, passive function and return the view that we have created. Just now from this function. Now we can load this page on the browser by entering HTTP columns less, less, DNS dot grows less. Sale. The page is blank now. So let's start adding some content to it. Add the tags for the base layout component inside these u, x base layout. Inside these add a form element. Inside the form element, we add the input boxes and their corresponding labels. So first let's add a level 40 title. Let's add the text product title and then add an input box of type text. Now add some styles to make it look better. We can add detail when CSS classes here itself, or we can create a reusable component. The way larval breeze has created 40 components of the login screen and they reached isn't screen. Take a look at the components folder. You will notice components like all scarred, input level button, et cetera. This components are added by larval breeze and are used in the authentication related screens. Now let us create a component ourselves, similar to this Asgard component. And we are going to create an anonymous communist, so we don't need to run the command Make Component. Simply create a new file with a dot blade dot PHP extension inside this folder, the components folder. Let's name it form container card dot dot dot PHP. We shall make the form looks similar to the login and racism forms. So let's copy the content of the ORT guard component, which will make two changes here. First, let's change the background color to be z graffiti on the root def, as this is the color we are using on the product list and product details pages. Secondly, renamed the variable logo to title as instead of the logo. As soon on the login, login enraged isn't screen. We sell display a title like what do you want the sale today. Also make the title a little bold, using the class found semi bold. Now inside the file, say lock-blade dot PHP, wrap the form inside the tags x form container card. If you reload the page now you will get an error. As we have not defined this lot title. So inside the x form container card tag, let's add the slot tag, pass the title to the attribute name, and add the text to display inside these tags. Now reload the page and we can see the changes. We also have to make the input box and the label look better for that, let's add the classes. Takes SM and takes the gray 530 level to make it look a little smaller and create. And to the input element, Let's add rounded MD to make the current corners round. Shadow SM to add some shadow. Border. Great 302, add a gray border. Focus, bolder indigo 300 to make the border color indigo when focused and w fool. Too late it occupy the maximum space available horizontally inside the container. Let's group the label and the input element inside a div and add a top margin. Today div empty to. Now it looks like this. Now is they'll create the input fields for the other fields too. Let's copy and paste these elements three times for the small description, the long description, and the price of the product change the values of the attributes and the taste 40 level. And now the page looks like this. We are also going to allow the user to upload an image of the product for the add. So let's add a label and an input element with type file to allow the user to pick an image from the computer. On this input element, we still keep only w fool in the class list. Now if we reload the page, we can see the button to browse an image. Finally, let's add a button to submit the form larval breeze has edited component named button for creating a button which it has used in the login and reached its end pages. Let us try to use the same component, 40 button here. Let's add the tags X button and edit takes to post the add inside these tags. I'll also add some top margin with the class empty for make the button full-width, which w fool and align the text inside at the center using justify center. Lipase looks good now, but I'd like to make one more change. I will change the target input box 2. It takes the area to provide some more space to the user to enter a complete description of the product. Now, it looks perfect. Html forms are vulnerable to CSRF and x. Now what is a CA Certificate? In simple words, in a CSRF attack, an attacker, metric and innocent end user to submit a web request that he never intended. Let us think about a possible attack on our website. An attacker may create and host a webpage where he or she may write the code to submit a product ad to the same new debt we're using to submit the details of a product from the form to sell a product. Add when we are logged in, if the attacker can somehow get us, click on a link to her website, we may end up posting an ad to say something that we never intended. And to prevent such CSRF index. Csrf tokens are used inside HTML forms. A CSRF token uniquely identifies a logged in user. So wherever it post food, pets, or delete request is made, the CSRF token is verified to confirm debt do request is from an authorized user. It is not an unauthorized request. La, la, they'll make this complete process extremely easy for us. A CSRF token, we simply have to add the CSR directive to the HTML form. And the process of token verification will be done by the middleware named verify CSRF token. So to secure our form from CSRF attacks, we simply have to add this bleed directive at the CSF to deform. And that is all. Now our form is secure. To learn more about CSRF attacks, go through the larval documentation, click on the main White MD basics, and then take a look at the page CSRF protection. Finally, let us edit button on the nav bar to load this page, the form opened a component-based layout and before adding the OD directive, add a link with the text sale and add the route to the sale view to the HREF attribute. Also add some merging to the right with M. For. Now the link to sail pays is visible on the navigation bar. 15. Create a table on the database for the products: We have created the view to display a product list, but it displays some static content. We have created the view for the details of your product, but this to display some dummy content as we have not added any product to the database yet. We have created the form to submit an ad for a product, but we have not written the code to insert a product into data, the database, which I'll do that now. First we sell create a migration to create a table for the product ads, which will create a model to interact with the database. Then we said create a controller to handle the HTTP request. And finally we sell create a route to make the request, to submit the data to the database. In this video, I'll show you the first two steps, creating the database migration and creating the model. And we shall run the migration after writing it. So by the end of this video, we'll have a new table name products in our database. We can create a migration with help of this artisan command, PHP artisan make migration. And then the name, a descriptive name, has to be given. This will add a migration file named the given name in the folder Database Migration. We can also create a migration while creating a model. The command for creating a model is PSP ART SYM-Q model, then the name of the model. If we add dash m to this command, it will create a migration element of the model. Let's try this. We are going to create a model to represent an ad for a product. Or we can say to represent a product itself. So let's name it product. Let's run the command PHP, artisan make model product, and then add deaths M to create the corresponding migration. Now we can see that a new file named product dot PHP has been added to the folder apps less models. We shall explore this file later, but now, let's focus on the other file added inside the folder database. Migrations. Notice the name of the file. This automatically created name2 explains the purpose of the file. Now we have to define the schema for the table products where we sell, we storing the information of the products. A class for a migration extends the class migration. And as we have explored earlier, a migration contains two functions up and down. We shall write this schema inside the function and we sell drop the table inside the down function. To define the schema for the products table, we shall use this schema builder schema. To create a table, we have to use the function create of the schema builder. And to drop a table, we have to call drop if Xist, as we can see in the default code, we have to pass two arguments to this create function. First is the name of the table here as the migration God created along with the model product. By convention, the plural form of the model name is added as the name of the table. And the second parameter is a function depth gates. An instance of the class blueprint debt can be used to define the fields of the table. Two fields are defined by default in the existing code. Now let us add other fields for the products table. This Blueprint Class has different functions corresponding to the different types. For the columns. We sell add a column of type string for the product title. So let's call the function string on the instance of Blueprint and pass the name of the column to it. We have to create a few more columns. One of type string for the SWOT description, 140 long description. The description may get a little longer. So let's call long text. Instead of the function string. One more string type column 40, product, price. And finally, let's add a column to hold the user ID of this sailor. We sell, make it big in desert and name the column UserID. There is a reason behind this mean that I'll tell you later. Now let us run the migrations. For that. We have to run the command PSP, artisan migrate. And if you take a look at the database on PHP, my admin page, we can see the new table named products with the columns as we defined in the schema. But just now I have realized that we forgot to add a column for storing the product image. So let's add it. Now if you're thinking that we can add a column easily from the PHP, my admin page, then you are right. But there is a problem with this approach. Let's consider that you are working on a team. And if you make changes to the database structure, you have to convey that information to your teammates so that they can update the structure of their local databases. The better way to do this is to use a migration. Once you see or decode with your teammates, year say simply needs to run the migrations once to update the database structure on their systems. So let me show you how to add a column to a database table using a migration. The first step is to create a migration by running the command PHP artisan make migration. And let us add a super descriptive name, Add Column image URL to products table. A new migration gets created inside the folder database. Less migrations open the file. It is similar to the earlier migration file, but the functions called Insight up and down are different. To create a new table, we call the function create this schema builder. And to update a table, we have to call the function table. The syntax is similar though. The first parameter is the name of the table, and the second is the function inside which we have to define the schema. To add a column, we have to call one of the main functions available for creating the columns of different datatypes the way we did while creating the table. Here we sell create a column to store the image URL, which is string, so-called the function string. On the instance of blueprint. Inside the down function call the function drop column. To remove this column from the table, we have to pass the column name to this function. Now finally learn the migration, PHP artisan migrate. And take a look at the table on PHP, my admin. We can see that a new column has been added to the table products. With this destructure of our data, this is complete. Next, we have to create a controller to store the information of a product into this products table using the product model. 16. Form validation: As we have created the table for storing the information of the products on our database and also created the model to interact with this table. Now we have to create the controller to handle the request of adding a product to the database. And this request will be made when a user submits the form for adding a product. To add a product to the database. First we have to validate the user inputs. Then we have to upload the image of the product. And finally, we have to store the information of the product on the products table. In this video, I'll show you how to complete the first task of validating the user inputs. And this involves four main steps. First, creating a controller, then creating a function store inside the controller, then creating a route to handle the form submission request. And finally, adding the validation rules inside the store function of the controller. So first of all, let us create a controller with the command PHP artisan make column controller, and then the name of the controller, let us call our controller products controller. This creates a new file named products controller dot PHP inside the folder apps less HTTP controllers. Now open this file. Currently, it does not have much code. There is a class named products controller debt extents. The class controller. All the controllers extends this class controller. Let us add a function here, name it store. We shall add a parameter of type request. This request class is used to interact with the current HTTP request. We can retrieve the input values from the instance of this class. So whatever information the user enters through the form, we can get those from the instance of this class request. Inside this function, we sell access the input from the request object and validate them. Then we sell, upload the image. And finally we sell, insert the information of the product into the products table. But before doing that, let us add a route for making the form submission request. For that. First, open the file web dot PHP inside the routes folder. Create a route using the class root, the way we did before, but this time we have to use the function post instead of gate. As we sell, make a post request to submit the data. Add the name of the route to the first parameter. Let's name it less product. Now, if you're thinking about whether it will work as we have already used the name product. Then I'll say that you don't need to worry as the functions used are different. They represent two different routes. And to the second parameter, instead of this anonymous function, we shall pass the store function of the controller class that we have created just now. Now append these view the file slave sale dot plate dot PHP. Pass the root name to the attribute action of the form. Now if you reload the page and submit the form, you'll get an error like Target class controller does not exist. This is because we forgot to include the products controller class inside the web dot PHP file. Let's fix this. At this line at the top of the root file. Use App. Http controller's products controller. Now if you try to submit the form, you won't get any errors. Now to verify that the store method of the products controller is getting called inside the function. Add an eco statement. I'll add a string inside products controller store. Now reload the product ad form, enter some data and submit it. You will see the string is getting printed. And it verifies that the functions tour of the products controller is being called on submitting the form. Now we can start writing the code inside the store function. Let us start with the validation logic. To validate the fields, we shall call the function validate of the request object and pass an array of validation rules to it. I sell add a few extremely simple villi decision rules. Notice the syntax. Add the name of the field as part of the form. Inside quote. I'll open the sale view side-by-side for reference and then add the fat arrow and after debt at the rule inside the code, you will find all the available validation rules on the larval documentation. Go to the Basic click on validation and on this page, click on Available validation rules. So here basically let us make all the fields compulsory by adding the rule required. And for the field price, we sell add one more rule named numeric to ensure the price entered is a number. To add multiple rules, we have to use this pipe symbol. If no error occurs during validation, then execution continues. But if some error occurs, it will stop executing the controller function and redirect the user to the previous location. In our case, the product upload form. And the errors can be accessed using the variable error inside the views. The variable error available to all the views by default. So to display the errors, we can simply check if there are any errors using the function, any, any blood directive. If. So, if there are errors then using the for each loop we can iterate through the errors contained inside this variable error and print all layers. We can get all the errors by calling this function all on this error instance. Now reload the page and submit the form without entering all the inputs and you will see the errors. Now if you need to validate some complex scenarios and need more flexibility in defining the villages and logic, then you can create a custom form requests class. But we are not going Dad deep now, we shall try to replace the field names in the error messages with some nicer names in a very simple way. Add two empty areas as the second third argument to the validate function. Keep the airway of the second argument is empty for now and adds the mappings of the names in the area of the tide argument. This syntax is similar to that of the rules. Add the name of the input field, then the arrow and to the right of the arrow add didn't name that you want to display on the message. Reload the page, and submit the form to notice the changes. Now you might be already getting curious about this second argument. Using this array, you can customize the complete message to be displayed. Following this similar syntax, add a dot next to the name of the field, and then add the rule and to the right of the arrow at the message to be displayed. So 41st rule titled dot required. I'll add, please enter it either. If the user does not enter a short description, then we shall display Please enter a short description. If the complete description is missing, the full description is missing, then we sell Display. Please enter in full description. For the price. Please enter the product price. And we sell add another masses for the other rule, price dot numeric. If the user enters a non-numeric price, then we sell display. The price should be a number. And finally, foreign missing image we sell display the messages. Please upload an image. Now submit the form without any input hand, you will see something like this one. Some beautiful messages. Now fill up, deform completely, correctly which numeric prize and submit, and you will get no errors. So we listen is successful. Now let's proceed to upload the product image. 17. Image upload: After realization of the user inputs, we're sure that we have all the data that we need to create a new entry in the products table, right? Well, not exactly. Take a look at the structure of the projects products table and you will find a column named image URL, where we are going to store the URL of the uploaded image. But we don't have debt URL here. So first of all, we have to upload the image selected by the user to the server, then get its path. And then only we will be ready to store the products information on the database. Notice tapes, debt, we have to take our gate DMAs inside the store method or the products controller, creating unique name 45, upload the image and then get deposited. You will be surprised to see how easy it is enlarged head. First, call the function file on the request object to get the file submitted with the form, we have to pass the name of the input field 45. It is IMC in our case. Then call another function named store. We have to pass the path to store the file. Let's simply pass the folder name where we want to store the file. Let's name it. Product images. Folder does not exist yet, so it will be automatically created. And this store function also generate a unique name, 45. Finally, we have to get the path of the uploaded image right to store it on the database. This function store returns that part. We simply need to create a variable to hold it. So let us create one, name it path. Now, if you want to see depart, add an echo statement or use the dump and die a function to print this variable. Now if we reload the page and try to submit the form with an image, you will get an error. This is because we have to add the value multi-part form data to the property, to the attribute BNC type in our form to be able to submit an image or a file. So open sale dot blade dot PHP and to the form tag, add EN C-type equal multi-part form data. Now reload the page, fill up the form, select any maze and submit the form. And the MS has been successfully uploaded. We can see the path on the screen. And a new folder named product images has been created inside stories, inside App. And the image has been stored in this folder. Now remove this function call and let us process to the next task, storing the data only database. 18. Store a product's information on the database: We have really did it. Our form uploaded the image. Now we have the image URL and all other provision of the product. So it is time to store the information on the product on the database. We are going to interact with the database table products using our modal product. Two main points of focus for this video are using a model to store data on the database and getting the user ID of the logged in user. So let's get started. First opened the products controller inside the store function. After uploading the image, first create an instance of the modal class. Let us create a variable products to hold this instance. And to be able to access this class product, we must include the class at the top of the file. So add this line, use models product. The input values can be accessed by calling the function input on the request object. So let's get those values and assign them to the corresponding sales of the product instance. If we pass title to dysfunction input, then we will get the value entered by the user for the film title. So let's assign it to the property title of our product instance. Similarly, let's do the same for the short description. The long description, and a price. Notice the names of the fields, the sales of the product class have the same name as what we have provided 40 columns of the table. And the strings d'etre passed to the input function are the names d'etre provide it to the input sales of the form. To the field image URL. We assign the variable path as it holds the path to the uploaded image. We also have to store the user ID of the user submitting this product and we shall use the class ought to get the idea of the logged in user. We can get the id with the help of this function ID of the Auth class. And we sell, assign this value to the property user idea of our product instance. And to be able to use this class or inside this file, we first have to include it at the top. At this line at the top. Now call the function dumping Dai, who wants to see the content of the product instance. Now let's reload the page and fill up the form and submit. We will see that lots of information about the product instance gates printed on the screen. If we expand the fill attributes, we will see the values of this fins. And you will also notice that the user ID is null. This is because we are currently not logged in. If we login and try again, then we will see a non-null user ID here. But we should not have been able to post an ad without logging in, right? If an unauthenticated user clicks on the button, we had to redirect that user to the login screen. And in the next video, I'll show you how to do that using a middleware. But for now, let's stay logged in. Come back to the code of the products controller. Remove the call to this function and call the function save only products instance. Now reload the page submitted filled up form. And if we take a look at the products table on the database, we can see a newly edit product here. Now with this, we have completed a very important milestone for our project. We have started dealing with actual content and soon we shall start displaying actual data from the database on our product list and product detail pages. But before that, let us redirect the user to a proper place was the form submission is successful. Let's take the user to the details ways of essentially edit product. For that, after calling save on the product instance, add a return statement, which I'll call the function redirect and passed the root to which we want to redirect. Now the root 40 product details page looks like product less ID. We have to pass the product ID, right? And we can get the idea of the recently added product from the filled ID of the product model. And once again, try submitting the form. This time you will be redirected to the product details page. The product details page is still displaying the static dummy content which we sell replace with the content from the database soon. So our forum for posting an ad looks complete. It displays errors for invalid inputs. It submits these inputs to the database and it redirects the user to the product details page. The only thing left now is to restrict the unauthenticated users from accessing this form. And I am going to show you how to do that in the next video. 19. Introduction to Laravel middleware: In this video, I'll introduce you to the concept of middleware in lab. But why do we need a middleware? I'll tell you, we have to treat the unauthenticated users from accessing our forum for posting an ad, right? So whenever a user clicks on the sale button from the Meno, before even returning the view 40 sale page, we have to learn whether the user is logged in or not. If the user is already logged in, then we sell low decile page. But if the user is not logged in, we won't allow him or her to post a product ad. And instead we sell, redirect him or her to the login screen. And we are going to do this. We'd help of a middleware. Middleware enlarge hell provides a mechanism for filtering HTTP requests. And Laura Val by default includes civil middlewares. This medullaris are located in a directory called middleware inside HTTP, inside App. If you take a look inside this folder, you will find a middleware named authenticate. This middleware when applied to a route, redirect the unauthenticated users to the login screen if the user atoms to x, is that true? So we don't even need to create our own middleware. This inbuilt middleware authentication will work for us. So how to use or apply a middleware to a root? Let me show you how. First open the root file with the PHP. Take a look at the root for dashboard. Notice how in middleware named OT is applied to this root. Dysfunction middleware has been called and the key of the middleware and closed inside an array is passed to it. Now let us take a look at defined named carnal inside default EPS less HTTP. The middleware are registered inside decide, uh, keys associated with each of them middlewares. We can see that the key off is assigned to the middleware authenticate, and this is the one that is already applied to the dashboard route. We are going to apply the same to the same route. This middleware OT, intercepts the request to a root and checks whether the user making this request is logged in or not. If the user is logged in, then only it allows the user to proceed. Otherwise, it redirects the user to the login screen. So back in our WIP dot PHP file called the function middleware on the sale root and pass 4s2 it. We are not going to pass it in an array as it is not mandatory, and it is required when you need to apply more than one middleware. Now reload the website logout. If you are currently logged in and try to access the loop sale, you will get redirected to the login screen. So we're done middleware to our powerful tool for controlling access to different features and parts of her website. We have learned the basics of middleware, but the possibilities are endless and we are going to explore more towards the end of this course. Next, we're going to retrieve the list of products from the database and display them on the homepage. But wait, we still have this default welcome page as our homepage. Let's change this to make the products list page as the homepage. Inside the root sign remote the roots for the welcome view and change the URI of the products root two, root. We said also deleted, welcome. Dot dot PHP file. Now enter B and S dot go on the browser. And the product list page is the home-base. Now, perfect, most recent, start displaying the products from the database on the screen. 20. Retrieve all products products from the database: Things are getting excitatory, right? We have started the limit actual data. Now we are storing products in our database, and now it is time to retrieve the products from the database and display them on the website, which will remove all the static content that are currently being displayed on the website. So let's start retrieving products from the database. I'll break down the complete process into four main steps. Create a function inside the products controller, retrieve all the items of the products table, update the route to invoke dysfunction, and display the fetched items in the products to you. First opened the products controller file. Create a new function. Let's name it index. Inside this function we sell call the function r of t model product. This returns a collection. So we sell creative who are able to hold it. Let's name it products. Now we have to pass this collection products to the products view as it holds all the items of the products table. And we're going to display those in the products for you, right? So for debt at a return statement called the function, if you pass the name of the view. It is products in our case called the function wheat. The first parameter of this function, which is the name of the variable by which we sell access the data inside the view. And the second parameter is the data itself. So let us pass products to the first parameter and the variable products to the second parameter. Now we have to update this route. Until now we have been returning the products view from the root file itself. And technically there is nothing wrong. In fact, we can handle all the HTTP requests inside the root file itself. We dealt creating the controllers, but we still end up with some unorganized code. Using controllers helps us organize better. It helps us write more maintainable code. So let us replace the closer of the second parameter, which I call to the function index of the products controller. Notice this syntax here, we have to pass an array and we have to pass the name of the class, the controller class, and then the name of the function inside the controller class that we want to invoke. Now try to reload the website and the product list page is getting loaded without any errors. This means that all we have done till now is working properly. We now have to display the items of the product's collection inside the view, replacing this steady content. So open the file products dot PHP. Here we can access the data pass to eat by the name debt we have provided while returning this view from the index function of the products controller. And until now we have been using a simple for loop to print 10 items, but to iterate through a collection and then print the content of each of the items of the collection if for each loop will be more convenient. So let's replace this for loop with a for each loop. Notice the syntax of the for each loop. Inside these brackets. First we have to specify the collection to iterate through. And then after the keyword, as we have to add the variable to hold the individual items of the collection. Let's name it p. Now replace this static takes which the data from the variable p on the URL of the HREF attribute replace the static ID, which the value of the ID from the variable p. Don't miss this curly brackets, these are required to print. Variables in law will replace the static takes to headphone with the actual title. Use P short description. For the short description, it lists the number 20 by the value of the prize from the variable p. And keep the dollar sign. And also provide the actual image URL to the IMG element. Now, if you reload the website, our products will looks like this. So here we can see the actual data, the name of the product, the description, and the price. But still this is not what we expected, right? The links to the image seems to be broken. This has happened because the location of our images is not publicly accessible from the browser. And to make it accessible, we have to create a symbolic link from the public folder to the one where we have kept the images is symbolic link is a file that contains a reference to another file or folder. We can create a symbolic link from this public folder to the store is less air folder with this artisan command, PHP artisan stories column link. If you run this command, you will notice that a special type of folder names storage with a logo that looks a little different, gets created inside the public folder. This is a link to the folder stories. Celeste public. But we have kept the images inside a different folder named product images. So let us define a new link. Open the file, File System dot PHP debt is inside the folder comfy. This file contains the file system related configurations. As the name suggests. To the bottom of this file, you will find an EDI or symbolic links called lnx. Notice how the default link is defined here to the left of this fat arrow. The function called public first is called. And today write stories. Underscore path is called. The argument of the function. Public park is the name with which we want to create a link on the public folder and the argument of the function stories, but it is the folder to which we want to create the link. We will add another symbolic link here. So copy this line and paste it once. Past product images to the function public park. And apps less product images to the function on the right-hand side of the federal storage path. And now run the command PHP artisan stories, colon link. Again. Now we have a new folder named product images. Inside this public folder. Now reload the page and we have the images. And it looks beautiful, isn't it? 21. Fetch a product by id: The homepage of our website is displaying actual list of products from the database now, but the details space is still showing some static data. And now we start retrieving the details of a particular product by ID from the database and display those information on the product details page, which will remove this static data. And this process has a tricky part. You will realize that by the end of this video. So let's get started. The process is similar to what we did while retrieving the list of products. Create a function inside the products controller. Fetch a product by id, update a route to invoke this function. Display defects item in the product view or do product details page. Open the products controller now. Create a function, let us call it show. We shall add a parameter for the idea of a product. Call the function find of the product model. Pass the ID to eat. This function fetches the data of a row from the table associated with this model. By DID pass to it. And it returns an instance of the model holding the fetch data. In this case, the table associated with our product model is the products table. So this function will fetch a particular product by the ID passed to it from the products table. And it will return an instance of the product model holding the fetch data. So let us create a variable named product to hold the result. A return statement called the function view to return the product view. And we shall pass the variable product to the view using the function with the first parameter of this function, we have to pass the name by which we would like to access this variable inside the product of u. And to the second parameter we have to pass the variable itself. Now we have to make some changes to the root 40 product details page. Replaced the closer with a call to the function show of the products controller. If you are wondering about parsing the ID from the URI to the show function, then don't worry, because larva will take care of that. It will make the ID available to us inside the show function. Now append the product view, the file product dot dot PHP, and replace this static strings with the content from the variable product that we have fast to this view. Use the image URL from the product. Instead of this static URL. Use product title 40, product tighter. Use product short description. For the short description. Then for the long description, use the value from the field long description of the product and product price for the price of the product. Now we also have to display the contact information of this sailor, right? But how do we get debt? For that? We have to make some changes to the product model. We shall do that. But first let us handle the other issue. We have to display the phone number also, but we are not yet collecting it. So it will ask the user to enter the phone number during your age, Jason. And for that, we have to make some changes to the registration form and some other related code. I'll show you each and every step in the next video. 22. Collect phone number during registration: So we have realized that to complete the product details page, we will need the name, the phone number, and the e-mail of the cylinder. And we're already storing the user ID of the sailor while inserting a product with the products table. Using this, we can easily retrieve the users in chromosome from the users table. I'll show you how to do that. But before that, we had to make some changes to the rachis and related code to collect the full number during radiation. First we have to add a column to the users table for the phone number. Then add a new input field to rearrange written form. And finally, we will have to make some changes to the controller handling the user registration. So let's get started. Create a migration to add a new column in the users table. Run this command on the terminal PHP artisan make migration and then give it a descriptive name to the migration ad for number two, users table. Now open the file there has just been created inside the folded up obvious less migration. Now as Israel, this file has two functions, up and down inside the function, which I'll call the function string to add a new column to the users table. And inside the down function, we sell called drop column to delete this column from the table. Now save the changes and run the migrations by entering the command PHP artisan migrate or determinable. And take a look at the database structure. The users table now has a new column named phone. Now let us add a new input box in the registration form. For that. First of all, opened the file razor Teradata blade dot PHP. Let us copy the the for the name and paste it ones. Now for both the label and input box chains, the values for the attributes from name to form wherever required. Also change the level. Now load the races and page and you will see the new field for phone number. Let us also add a margin at the top, like the input works for the image. Here we can see that the class empty for is used for top padding, top margin in the input boxes except the first one, latest add the same to the new item, and now it looks good. Next we have to make some changes to the controller. We have to validate this field and make sure does fill gets inserted into the database. So first of all, we have to find the controller that is responsible for registration. For that. Take a look at the attribute action of the form tag, which route has been passed here. It is the root called racer. Now open the root file or dot PHP data has been added by labial breathe. Take a look at this second route. Here, you will find two routes with this same your'e. But one of them handles a get request and BRR handle supposed to request. We are concerned about the second one. As deforms our Mason makes a post request. Here. Notice this second argument, IF function named store of the class registered user controller is being passed here. So registered user controller is the controller we are looking for. So open the file registered user controller dot PHP from the folder apps less HTTP, less controllers, less OT. And inside the functions torr, at a validation rule for the phone number. I'll keep it simple. I'll make the phone number compulsory and numeric with this rule. And after validation and instance of the class user is being created using the constructor create latest pass the phone number two from the request inputs. Finally, we have to make some changes inside the model user. So pending file user dot PHP from the folder models inside the folder app. And add a new string form to the airfield level of this class. And we're done, try registering a new user. Once the registration is successful, shake the users table on the database. Now we can see the phone number of the new user. Now we have the data that we need to show, but we don't yet have the way to fetch a user's information by ID from the users table. So in the next video, we shall find a way. 23. Retrieving the seller's information: Take a look at the product details page. We need the name, the phone number, and the e-mail of the sailor to display here. We have this information in the users table and in the products table for each of the product, we have the user ID of the user who has created the ad for this product. Let's get to the center. Now we have to find a way to fats d users in provision from the users table by this ID that we have inside the product details page. And this is pretty easy enlarge as larvae loses eloquent, warning. Eloquent or RM makes managing and working with database relationships easy. Help of the loc1 models, you look ON models have magical powers and we have been working with them for a while now. We have used an instance of a product model to add a new product, add to the products table. We have called functions like all fine save on the instances of a model to perform different operations on the products table. Now open the file product or PHP from the folder Models. And there is nothing inside, almost nothing. All the work of communicating with the corresponding database table is powerful by eloquent under the hood. Now we are trying to find a way to find the information of the seller of a product. For that, we simply have to add a function inside the product model. The name of the function should match the name of the model that we are trying to fetch. So let's name it user here. As user owns the product, or we may say the product belongs to a user. So here inside the function user, we have to call a function named belongs to and pass the class name of the model to dysfunction. And finally, we have to return the result. This belong to function is inherited by this class, so we have to use this keyword to refer to it. Now this works as the primary key of the user's table is named ID and the foreign key on the products table is named user ID, underscore ID. I append it to the snake case name of dependent model. Do you remember I had mentioned that there is a reason behind this name user ID while creating the table. If the foreign key on the products table where different dent user ID, then we would have to pass it to the second argument of the belongs to function. And it didn't name of the primary key on the users table, we're not ID. Then we would have to pass the primary keys name to detect parameter of this function. But in our case, we don't need this second and target parameters as the foreign key on our products table is user ID. And it maps to the column ID of the user's table. And this column user ID is the primary key of the user's table. Eloquent. Understand this naming convention by default. Now open the view 40 product details page, product dot blade dot PHP, and scroll down to the cellar in permission section. Here, replace this static string for the name with the actual name of the sailor. We can treat the function user of the product model like a property of the class. So product user name gives us the name of the scalar. Product. User phone gives us the full number and product user email gives us the e-mail of the user. After replacing the static strings with these values, opened the details page for a product and you will find the actual contact information of the sailor. Here a default number is missing as this product was added by the previous user account for which I don't have the full number on the users table. Let me add one main way from PHP, my admin. Now we have one more issue here. The link to the image seems to be broken. To find out the issue latest, right-click here and click on Inspect. And notice the URL. As we have, simply edit the path of the image. It gets appended to the root. And it worked on the home screen as the root, in that case, pointed to the root. And this can be easily fixed with help of the helper function asset of Laura Val. Instead of passing the image path directly to the HREF attribute, pass it to the asset function, and pass that result to the HREF attribute. They assert function will create the appropriate URL for us. Now reload the page and we can see the image. 24. Fixing the UI: I have added a few more products and removed the previous two. The product list-based looks like this. Not that great, right? But with this beautiful images that I have downloaded from unsplash.com, it'll definitely look good. We just need to modify this a little. So open the file product dot dot dot PHP. And let us add this trick losses to the IMG element H 72 to specify the height of the image, object covert to resize the image. And w fool to force the minister who buy the complete width. Also specify a height 40, the 40 short description by adding the class age eight. Not compiled day assets with npm run Watch and reload the page. It looks beautiful. Now let us take a look at the details page for a product. Here too, we, if we specify the height of the image, the page should look better. Let's do that and see open the file product dot dot PHP at the class, each 96 to the IMG element. Now wait for completion of compilation and then reload the page. And this looks much better. Now let us come back to the products list screen. Here. Currently the products are being displayed in the order they have been edited. So the first product here is the oldest product and we shall reverse this list to display the newest first. 25. Display recent products first: In this video, I'll show you how to retrieve items either in ascending or descending order from a database table by particular attribute. If we take a look at the products table, we'll find a column named created at. This holds the timestamp of inserting a particular item into the table. We sell display our products in descending order by this attribute created it. So that the most recent ad appears at the first of the product list. And it is pretty simple. Open the file products controller dot PHP. Inside the index function, replace the function all BY order BY we shall pass the column name created at as the first argument and DESC as the second argument to specify descending order. Finally call the function gait. Save the changes and reload the product list page. Notice the changes. So here this one bean test cafe racer is the most recent ad that we posted. In the next video, I'll show you how to implement pagination in LA. 26. Pagination: We are going to make one more change in the product list page. We are going to implement pagination so that we don't attempt to fetch thousands of items at once to display on the home screen. And as of now, as we don't have many items on the database, we are going to display 15 items per page. Whenever the user clicks on the next page button, then only we sell, retrieve the next 15 items from the database and display on the screen. Now it may sound a little difficult and it would have been read out loud. But again, law has made this extremely easy for us. First open the file products controller dot PHP. Inside the index function, replace d function gate, which paginate and pass the number of items to be displayed on each page. I'll pass 15 here. Now save this and reload the product list page. You will notice that we have only 15 items on this page. Not all. But how do we access the next page of items? Let me show you how open the file products dot dot, dot PHP. At the bottom called the function named links on the product's collection and printed using the blade directive for equal. I will also wrap this by a div and the class P6 to make it look a little better. Now reload the page and you will notice the page number as clickable links at the bottom. Cool, isn't it? It is hard to believe death haziness and can be implemented so easily. Now, if you want to display only a Previous and Next button instead of displays numbers, then simply replace the call to the function paginate by a call to the function simple peasant. It saved the changes and reload the page and you will notice the buttons at the bottom. Now before we move on, let me show you another magical directive of blade templating engine. First, create a new file inside the views folder. Let's name it. Each product on list, dot blade, dot PHP. Can you guess from the name, what I'm going to do? From the products dot blade dot PHP file, copy the code inside the forage directives. This is the code for each item of the product list, right? Paste this code inside the newly created file. Each product on list. Now in place of the for-each loop at the blade directive named each. And we shall pass three arguments to this. First is the name of the view that contains the code for each item of the list. So pass the name of the view that we have created just now. The second argument is the collection of items. So here it is the variable products. And it tired is the name of the variable representing each item of the product's collection. So we have been using P4 it, right? The code of the products, you look so clean and simple now, right? So we have transport decode representing each item of the list to a separate file. And now iterating through the product's collection. And for each iteration's bringing in the code from this desk separate file is as easy as this single line of code that we have written just now. This does not add any visual changes to the page. Reload the page and see yourself. But our code is more organized and more readable now. So let's proceed to the next task. 27. Show own products on dashboard: Haven't you got irritated by the default dashboard page yet? This page is not displaying anything useful to the user. And in this video, we shall try to make this space a little better. Let us display the products being sold by the user in this page. And if this user has now posted any ad, then he says simply display a message with a link to the forum for posting an ad. First, we sell create a new function inside the products controller to fetch products by the user ID. Then update the route to call this function, and finally display the fetched products on the dashboard view. So let's get started. Create a function inside the products controller. Name it, show ONE products. Inside this function, fetch the products by the idea of the user. We can get that from the class. Ought. We sell fetch all the products from the products table of the database where user ID is equal to the idea of the logged in user. We can create such a query using the function where we have to pass the name of the column by which we want to fetch the items as the first parameter and the value to this second parameter. Here the first parameter is user ID, as we are storing the seller's ID in this column. And two, the second parameter we sell pass author ID, that gives us the idea of the logged in user. So this query will fetch all the products where the value of the column user ID is equal to ID. The rochelle ordered. It results in descending order of the value of the column created at as we did earlier. Finally, we have to call the function get. If you want to paste in it, this results replace the call to gate which pays in it or simple business. Returned a view for dashboard from this function and pass product's collection as we did inside the index function. Now open the root file web dot PHP and only dashboard root replace the function of the second parameter with a call to the newly created function of products controller. Save the changes and reload the dashboard page. You have to log in if you're not already, but you own see anything different as we have not added the code to display the products on the dashboard page. So let's add it. Open the file products dot blade dot PHP and copy the complete div containing the each directive and paste it inside the file dashboard dot blade dot PHP. I'm also making some changes to repairing replaced P4, which PX and PY for, for the horizontal padding and if article's heading respectively. Now reload the page. And here we can see only those products added by the logged in user. I'll also change the message from you are logged into something else. Let us display currently you are not selling anything. If the user has not posted any ad yet. Otherwise display the number of ad posted. Products, coma, debt you are selling. So five products you are sailing or something like that. We can get the number of items of the product's collection by passing it to the function size of using an if directive we sell check is the collection products have any item? If it does, then we will display the number of products that you're selling. Otherwise, after the is directive, we sell display currently you are not selling anything. Let us also display the links to the post and add form 400. Add an anchor tag here and pass the URL of DIY route for the sale page and edit text here. Now save the changes and reload the page. 28. Show edit and delete buttons: We sell allow our users to edit and delete his or her own ads. In this video is I'll add the edit and delete buttons on the product details page. If the user viewing the page is the seller of the product. First open the file product dot dot dot PHP. At the top of the div. For the right half, we shall add an if directive to check if OT ID is equal to the idea of the seller of the product. If this is true, we sell display the buttons, are there always will do nothing. So inside this if and end if directives add a div to contain the buttons at the class flex to it. Now at two divs inside this one, edit takes for the buttons, edit and delete. Latest, add some classes to make these buttons beautiful. I'll add BZ blue 500 to make the edit button blue, rounded, full to make the corners rounded. Ps4 and PGY2 for some horizontal M particle paintings. Shadow. To add some shadows. Takes excess to make the text smaller, takes white. To make the color of text white. Now add this class is to the Edit button to, I'll only change the background color to a little red with the class BG raid 300, and also add some margin to the left with ML 1. And if we open the details page for a product that has been posted by the logged in user. It looks like this. We can see the buttons here as this ad has been posted by this account with which I am logged in. Dry, changing the ID on the URL or opening this page for others product to see whether the buttons become invisible. Party products edit by other users. And it works. So we don't see the burdens on others product. Now let's wrap this buttons inside n cortex to make them clickable and pass the roots to be loaded to the HREF attributes. Notice that we are also passing the product ID to the roots as a parameter. But as we have not created this roots yet, they own work as of now. So we sell create this route. We sell create a route edit with a root parameter ID to load the product edit form. And another route with the URI delete slash, the idea of grip product to be deleted. If you click on these buttons, you will get 400 four not found error as of now. We are proceeding towards our final product, right? It feels good. Only a few more steps and we're done at least for now. So in the next video is I'll create the roots, the views NG controller functions to handle the product edit request and the product delete list. 29. Edit a product: In the last video, we have added the Edit button on the product details page to allow this seller of the product to edit the details of the product ad. But on clicking the button, nothing happens. It does not work it. And in this video we'll make it work. First of all, we sell create a view to display the form for editing the details which will pre-fill this form with the existing information of the product. So let us create a new file. Let's name it, edit dot blade dot PHP. Now copy all the code from the file sale dot blade dot PHP, as we shall use this same form. The only change will be pre-filing of the input boxes with the existing information of the product. To this view, we shall pass a variable named product containing the information of the product. So let us provide the existing information from this variable to the attribute value of the input boxes. Product title for the title, product, short description for the short description. Product, long description for the long description, add product, price, 40 price. If the user does not provide a new value, the existing information will be stored. Again. If the user clears a field and keeps it empty, we only update the veil for that field. Latest also change the masses to enter the new details of the product and the taste of the Submit button to update the product information. Now open the file web dot PHP and add a route to load this view. This is going to be GET requests will call the get function of the root class, pass the URI AAD ID to the first parameter. You can verify ones that we are passing the same your eye to the Edit buttons, HREF, attribute 2 and 2, the second parameter, pass the reference to a function named edit of the product controller class. But we have not created that function yet, which I'll create it now. But before that, let us add the middleware or to this route. Next, open the products controller and create a function named edit. Which one parameter for the product ID. Inside this function fetch the product by ID, the way we did inside the so function by calling the find function of the model. Finally returned to view, edit and pass the variable product. The name product of the first parameter of the width function is important here as we are accessing the existing information by this variable name inside the edit view. Now if you click on the Edit button, you will get the edit page that looks like this. Now let us complete the remaining steps to make this whole thing work. Open the products controller again and add a new function. Let's name it update. We shall add two parameters to this function. The first is an instance of the class request, using which we will be able to access the values entered by the user through the HTML form. And the second is the idea of the product. The request object will hold various information of the HTTP request along with the data submitted by the form. And the second parameter gets the product ID passed to the URL as ISIL. Inside this function, we sell add only one validation rule to ensure that the price entered is still a number. We want validate other fields. If the user clears any of the fields and submits them. Amt, then we want to update the corresponding value on the database. Now get the product by ID. Check if an image has been uploaded. If we pass the input name to the function has high, it returns true if there is a file in the request, otherwise it returns false. Here if request has high returns true when we pass IMC, which is the name of the input field for file in our form. Wizard, upload the image and add the path to the instance of product model. Now we will check if the title is empty using the function empty. If it is not empty, then we sell. Add this to the instance of product model who sell used the negation operator in front of Mt to ensure that the value is not empty. Now let us do the same for the other first two. And finally call the function of the product model to insert the new values into the database. And don't forget to return the product view at the end so that we can see the changes immediately on the details page. The last tape lift is to create a route to invoke this function when the user submits the product Edit Form. So append the root file web dot PHP and add a route, which I'll call the post function of the root class, as this will be a post request at the URI to the first parameter. Let's add slash updates less ID. This ideal we passed from the ADFS form. So let's make it a root parameter using these curly brackets. To the second parameter passed the update function of the products controller. Also add the middleware. Now come back to the file a dot, dot, dot PHP. And here we have to update the value of the attribute action of the form. Because all clicking the Submit button we want to call the route that we have created just now. Because debt root invokes the function update of the products controller which handles the updation of the product. So here we have to provide the proper URI. Let's add less updates, less. The idea of the product which we can get from the product is test passed to this file. Now take a look at the update function once again, it has two parameters. The first is the request object and second is the ID of the product. This may confuse you a little. How does this funds AND gates this arguments? But again, you don't have to worry. Larval takes care of it. Now save the changes and try making some changes to the product. And we can see the changes immediately on the product details page. Let me once summarize all the states that we have performed as we are going to implement it, delete functionality in a similar way. So first we created the view for the AD product page. Then we created a root and a controller function to load the EditView. We have created another route and another function inside the products controller to handle the form submission. Now let us move to the next task. Deleting a product. 30. Delete a product: The steps that we are going to take to enable the deletion of a product are similar to some of the steps that we have taken to implement the editing feature. First, we sell create a route to make a delete request. Then create a function inside the products controller to actually delete the product. And finally, we shall call the delete root on clicking the delete button. But this tip is going to be a little different. You will realize by the end, create a route similar to the one we have created for ADT. But call the function post instead of gate to this first parameter, pass the URI, delete the ID. And to the second parameter pass the name of the products controller class and the name of the function we want to execute inside the array. Let's pass destroy. We don't have dysfunction inside products controller yet and we are going to create it now. So append the products controller file. Create a function inside this class to delete a product, name it, destroy, add a parameter ID. Now inside this function, find the product by this ID is going to function find of the model. Finally, call the function delete on the instance of the product model. After deletion, who is a load D dashboard page of the user, we can redirect the user to one of the controller actions. The action we are interested in is Show own products to redirect the user to this action or this function. We have to call redirect, and then we have to call again action. We have to pass the name of the controller class and the name of the action or the function. The way we have been passing to the root functions. Now pin the view product dot dot, dot PHP, where we have the Delete button. To protect the deletion operation from CSRF attacks. We sell create the delete button inside a form, which sell create a form specified emitted to be post and action to be the root for delete. Also add the CSRF directive and add an input element of type submit to create the button. And let us add all the classes debt we have added earlier to the button div and add the text delete as the value. Now paint the details page for a particular product ID you'd like to delete and click on the Delete button. Or successful deletion, you will be redirected to the dashboard page. 31. Email verification: You know, my image, right? So you can create an account which my email on the website and keep on posting ads on my VM. Basically, anyone can create an account with anyone else's email on the website and keep on using the features. But this is not good. So to prevent such incidents from happening, we have to verify the email addresses with which the accounts are created. And as we are using lauryl ether breeze for authentication, most of the work is already done, which some minor configurations are innate verification system will be ready. First, ensure that the moral user implements the class. Must verify image. Open the file user dot PHP from the folder apps less models. And if he does not already implement, must verify e-mail then implemented at the middleware named verified to the dashboard route. The responsibility of this middleware is to prevent a user from accessing the root. If the user has not verified his or her email yet. Open the root file, web dot PHP. And to reroute dashboard. At this middleware verified. Now append the dot ENV file and find the e-mail IT related configurations. For this course, I'll show you how to send e-mails from your XAML account. But in production, you will probably use one of the many popular e-mail services. Now let's add the configuration to enable our buy and sell website to send emails using Gmail account. Smtp to the property male mailer, male host will be smtp dot gmail.com. Mail port is 5, 8, 7. Mail, username, the e-mail from which you understand emails, mail password, the password of that female, male encryption, TLS, mail from address at the email. And we want change this fellow male from name. You'll also have to make some changes to your Google account security settings. Search on Google, less secure apps. And you will find a link like this one, my account dot google.com slash lists secure apps. Inside this phase you will find a switch called allow less secure EPS. Turn it on, at least for the time being. In production, you will probably use some other SMTP services and then you will turn this switch off. Now before you taste the functionality, take a look at the users table on the database ones. Notice the values of the column e-mail verified at. Currently the values for this column are null. Once we get our emails verified, we'll come back to see if anything changes. Now try to access the dashboard page. You will see something like this. The messages may look a little different depending on whether an email has already been sent before or being sent 41st time. Now check your inbox. You should have got an email with a link to verify the email. Click on the link and you will be redirected to the dashboard page. So your email has been verified. Now take a look at the users table on PHP, my admin. Again. You'll notice the timestamp when the email got verified in the corresponding row for the column e-mail verified at. Now no one can login using someone else's e-mail. 32. Reset password : Well this one is a surprise. All the work required to implement password reset is already done by larval breeze. The only thing that we had to do was to add the e-mail configurations. And as we have already done that in the previous video, currently there is nothing to do for us. So let us test whether it is working properly or not. Click on forgot password on login screen, enter your registered email, and click on the button to get an e-mail with the password reset, link. Check your inbox. Open the e-mail, and click on the password reset link. Now enter your new password and submit, and you're done. Try to login. Now let us move on to the next task. 33. Custom middleware: Well, our website looks good now, but there is still a serious issue. And once we fix this issue will be ready for the initial release. Now before I show you how to fix this issue, latest understand the issue itself. And for the unit two echoes, I have created two accounts on the website and I have added products using both of the accounts. And you have to do the same. Now log in it one account and try to edit a product, edit by the other account. And if you try to find the edit button on the product details page of a product edit by the other account. You won't find them as we are already verifying the owner said before displaying the edit and delete buttons. So you have to manually enter the URL on the address bar of the browser. So enter, be honest or less. Edit. This is the root right? Add, the ID of a product added by the other account. And now here you have deformed to ADD product. So basically, anyone can edit anyone else's product. And this is a serious issue. And in this video I'll show you how to fix this using a middleware. We have already seen how powerful middlewares are, right? We have been using ought to prevent unauthenticated users from accessing different pages of the website. And now we are going to create our own middleware. So first we sell create our own middleware. We say assign a key to the immediate, we're inside the kernel dot PHP file. Finally, we sell, apply this middleware to the root. So let's get started. Create a middleware by running the command PHP artisan make colon middleware and provide a name. Let's name it, verify sailor. Now let us revise the concept of middleware. Once you remember right, a middleware can intercept an HTTP request of the application, make a decision whether to let the request to process it or to deny it. Here, in our case, whenever a user makes a request to edit a product using this middleware verify seller who sell intercept the request. Check whether the user trying to edit the product is the owner of the product or not. If the users do owner we sell, allow the request to proceed to the next tip to display the product edit form. But if the user is not, the owner, whistle redirect him or her to the product details page. Instead. Currently our medulla looks like this. And we have to write the logic for making the decision inside this function handle. Currently there is a single statement inside this function. It allows the request to proceed to the next level. Now we sell at some code before the statement. First of all, we have to get the product ID from the root because we shall fetch the product from the database to know who is the owner or sailor. From the view of the user ID column. We can call the function root on the request object to get an instance of the class root representing the current route. And then if we call the function parameter on it and pass the name of the route parameter we're interested in. We will get the value of that parameter. So let's pass ID as this is the name of the parameter on the route, edit ID. And assign the result. If a variable named Product ID. Now fetch the product by ID by calling the function find on the product model. And for this to work, we must include the class product inside this file. So at the top of this file, at this line, use models product. Let us also include the class off as we will need it next to get the idea of the logged in user. Use Illuminate support facades OT. Now add an if statement to check if the author ID, the idea of the logged in user, is not equal to D user ID of the product instance, which is the user ID of this sailor or the owner. In the condition of the if statement we sell check if the two user IDs are not equal. So if it is true, which means that the user trying to edit the product is not the owner. Then we sell, redirect the user to the details bridge of the product. Otherwise, we sell, allow the user to edit. We shall call the function redirect and pass the URL of the details page to eat. So we have added the logic to the middleware bot to be able to apply to the roots, we have to assign a key to this middleware. And for that, opened the file kernel dot PHP from the app's less HTTP folder. At the bottom of this file, you will find the area and named root middleware. Notice how the keys are assigned to the middlewares. Now we shall do this same width, army dealer, verify seller. First, specify the key, latest name it verify underscore sailor. We shall use this name while adding the medulla to the root. Then add the fat arrow and then the part of the class verify seller. Now append the root file web dot PHP and add the middleware to the root ADT. We have to use an array to apply multiple middlewares to the root. Now try to ADD product, edit by edified account. Then the one you are logged in with, try and run the URL manually on the address bar, like VNS dot goes less edit the ID. And try changing the ID. You won't be able to edit others product anymore. Middleware in larval are awesome, right? I hope you have enjoyed creating your own middleware. Now you can protect any route that you don't want in non owner two Xs is in this middleware. I'll add this to the delete root two. 34. The class project and the source code: The class is complete and now it is time for you to complete your class project. And if you have watched all the videos and completing each of these tapes as part of the instructions of the videos. Then by now you should have your own buy and sell website ready. And if you have debt, then your project is ready. You simply need to take a few screenshots of the different pages of the website and share those with us on the project section. So your class project is to create a buy and sell website following the instructions of the class. Now, if for some reason you have not completed the project, you have not implemented each of these steps. And so at this moment you don't have a complete ban cell website. Then there is another way for you. You have to go to github.com slash tangents, less lava underscore binds in. Here, you will find the repository for the project. If you take a look at the branches, will find a brand's corresponding to a video of the class. You can refer to the quote of this runs where if you find any difficulty while implementing the status of that particular video, and you will find another branch with a similar name, but the word assignment in it. This branch contains some tasks for you. Now if you take a look at the source code of that branch, will find a file name, assignment dot TXT. And inside that file, you will find some tasks and with the line numbers where you have to make changes. These are pretty simple task. Somewhere maybe the argument we pass to a function is missing. And in some cases the function call itself may be missing. And you have to add those missing parts. And once you complete this task, decode off your assignment brands will be equivalent to the code of the other runs. For example, if you complete the assignment or the brands 1100 crore assignment, create header footer, then the quote of debt brands, your SMM brands will be equivalent to the branch 11 underscore create header footer. Now we have SMN branches for most of the videos. But if for some videos you don't find an assignment prompts, then it's okay then I have not added a task for you for that particular video. Now once you complete all the task of this assignment branches, you will have your complete Bans Silva absurdity. So again, you have to take a few screenshots of the different pages and share those with us in the project section. 35. Conclusion: So we have learned a lot. We have started from scratch, we have learned how to create views to interact with the users. We've learned how to create models to interact with the databases. We have learned about controllers, routes, we have learned how to create tables in the database and how to update tables in the database using migrations. We have also learned how to use middlewares. And we have also learned how to create our own middleware is. So this has been an amazing journey. I have enjoyed this a lot. I've enjoyed teaching you the basics of love. And I hope you have enjoyed this too. And thank you for being a part of the chain.