1. Introduction

1.1 Introduction

Hi there, my name is Andrew Perkins. And welcome to this tuts+ course, where we'll take the e-commerce design that we previously converted from APSD to HTML and CSS, and now we'll turn that into a functional e-commerce web application using the Laravel PHP framework. This course does assume that you have basic knowledge of how to work with Laravel PHP, HTML, CSS, and the terminal or command line. If you're still struggling with any of these topics, please be sure to check out some of our other courses here at tuts+ to bring you up to speed. So with that said, this should be a great course for you to learn the basics of building an e-commerce application from scratch using Laravel. I'm really excited to get started. So enough with the introductions. I'll see you in the next lesson.

2. Getting Started

2.1 Creating the Categories Admin Panel

In this lesson, we'll install and configure Laravel. We'll create a layout file and then we'll begin by creating an admin page that we can use to create new categories for our ecommerce application. Now these categories will be used to organize the individual products for the store. For now, the admin page will be unprotected. But we'll fix that later in the course once we add in our authentication and authorization. So let's start by creating a new Laravel project. Just going to switch in to my terminal and I'll change directories in to my site's directory. And I'm going to use composer, so we can run composer, create-project laravel/laravel and then we just need to give the project a name. I'm going to name my ecomm short for ecommerce. Now this will take a few moments to install the dependency, so I'll come back in a moment once it's complete. I'm back. Our Laravel installation has finished. Now we'll just need to configure the installation. We need to make sure that the app/storage directory has the right access. I'm just going to change directories into the ecomm project and then we run the change command -R 755 and that's the app/storage directory. Next, let's create a database that we can use to connect our application to. Just going to switch into my browser and here I am inside of phpMyAdmin. I'm using MySQL and you can see that I've already created this ecomm database in advance and you can name your database whatever you'd like. So once you have your database created, let's now open up our ecomm project into your preferred text editor. I'm going to be using sublime. Now we need to connect our application to our ecomm database. Under app > config, open up database.php and I'm going to leave the connection name as mysql. And then down here in the connections, I'm just going to edit my mysql credentials. So I'm going to change the local host, use 127.0.0.1. The database name will be ecomm and then I'll just leave the username and password as is. You'll of course, want to enter in your own database credentials. You can save the file and close it out. That's it for our configuration. Our next step is to bring in all the resources that we'll need to create our layout. So you should have access to the course resources, which will include all of the necessary HTML, CSS, images and JavaScript. So here's my resources inside of this starting-resources folder. And what we need to do is move this css, image and js folder Into our application's public folder. So I'm just going to select these three folders, css, image, js. I'll copy them. We'll go into the Site's directory into ecomm and inside of public and I'll paste these inside of there. Now that we have our resources, we need to create the layout for our app. Now most of our layout is going to remain the same for all pages, but some pages will have different content for the promo area and other pages don't even have a promo area. So we need our layout to be very customizable and easy to reuse for the pages that have different page layouts. So, I'm just going to go back to my desktop into the starting-resources. And I'm going to take the code from the product.html file, just going to drag and drop this into sublime. And let's select all of this, copy it. We can close it out. And here inside of our ecom app under app > views. Let's create a new folder. I would name this layouts. And inside of layouts, let's create a new file. We'll paste in the code from the product.html file and let's save this as name.blade.php and this will be our main layout file. Now we just need to do a little bit of cleanup inside of this file, so that we can use it as a Laravel layout or template. First, I'm just going to update the title. I'm just going to get rid of the hyphen and the word product and just leave it as eCommerce. Next, we need to update these two style sheets and the script tag to use Laravel helper's instead of this regular HTML code. So let's replace this normalize.css, we'll just get rid of this. We can use HTML, call the style method, tell it to load in the normalize.css file from the css directory. Now remember, these files, both for the style sheets, any of the images inside of this layout and the JavaScript files are in those starting-resources, which we just copied into our public folder a moment ago. So that will link in the normalize.css file. Now, I'm gonna go ahead and do the same here for the main and the modernizer script. There we go. You can see every place stem with the style and script method calls. Otherwise, it's pretty much the same. It's loading in the exact same files and we just need to scroll down here to our drop-down menu and let's update this "Shop by Category" image. The little down-arrow.gif file. So we'll change this out to use the image method instead. HTML : : image and that's in the image folder and the image name is down-arrow.gif. And the Alt text is "Shop by Category". Now let's scroll down here to our user-menu and we'll update this first nav tag. We just need to replace these images here, just like we did above. So, I'll do that real quick. There we go. I've replaced both of those using the image method and then I'm going to do the same thing down here in the other nav tag, the one that's commented out. So, I'm just going to replace these images here. And there we go, I've replaced those with the image method as well. And we need to do the same thing for the view cart image here, the blue-cart.gif. So let's replace that one. The view cart image is replaced. Now we just need to go to the main content section here. And inside of it, we're just going to delete all of these div tags, cuz we don't need them for now, but make sure to keep the section with the ID of name content. And we're going to replace all of that code with a yield statement to @yield a ('content') section. That way, each of our views can use this layout file. Now, while building our ecommerce application, we're going to occasionally need to give the users of our app a flash message. For instance, after creating a new category, we'd want to give that user a success flash message, so that they know that it succeeded. So while we're in here inside of the main content section, let's display any flash messages. So right above our @yield statement, let's use an if statement, and we'll check if we have any flash messages to display and we'll just end via statement here. So if we have a flash message, we'll just stick this inside of a paragraph tab with a class of alert. And now our CSS files that we linked in above will style this for us and we don't have to worry about any styling throughout this course. So inside of this paragraph tag, we just need to display the flash message. We can use the Session classes get method and display that message and we'll just close the paragraph tag afterwards. That's it for the main content. Next, towards the bottom. We need to update the SUPPORTED PAYMENT METHODS image here. So let's change this out to use the image method. There we go. That's finished. And then lastly we just need to update a few of these script tags at the bottom of our file. Now I'm just going to leave the script tag that links to Google's jquery file. I'm just gonna leave that one as is. But I will replace the one inside of the right method and then the two below it, the plugins and the main.js files. So I'll replace those real quick using the script method. And there we go, that completes our layout file. Now, as for the links, if you scroll up here a little bit you can see in the my-account and several other spots up here in the drop-down menus, the user menus and such, we're just going to leave these lengths as is. And we'll come back to them later and update them as needed. So we can save our main layout file and close it out. And now we need to create a table to hold our categories. I'm going to switch back into my terminal. And let's create a new migration file. We can run php artisan migrate:make, and I'll name this create_categories_table. There we go, that creates our migration for us. We can go under app>database>migrations, and open up that file. And let's start by creating the categories table inside of the up method. So just rid of this comment, we can use the schema class, call it to create method. We'll tell this to create a categories table, we'll pass in our closure as the second argument. This also needs a table object that we can use to create the fields for the table. We'll call the increments method to create an id field. And we'll call the string method to create a field to hold the category's name. And lastly we'll call the timestamps field so that we have some timestamps. And that's it for the up method. Let's go down here to the down method to reverse the migration. We can use the Schema class, call it to drop method and just have this drop the categories table. Make sure to save your file. We can close it out. Let's go back into our terminal and let's run the migration, php artisan migrate. And perfect. You can see our table was created successfully. Now that we have a table to hold our categories data in, let's create our category model. We can close up these folders, the database folder. And under models, let's create a new file. I'll save this as Category.php. We'll open up our php tag. We'll create a new class named Category. And this extends Eloquent. Let's start by setting the protected fillable property equal to an array, so that we can protect ourselves from mass assignment. We're just going to pass in just the one field of name, and this is the only field that's allowed to be mass assigned for the categories table. Now I also like to put my validation rules in my model, so I'm going to create a new static property named roles to hold those validation rules. So I'll create a new public static property, named rules, I'll set this equal to an array, and we're just going to validate one field, name. We'll make sure that it's required and that it also has a minimum length of three characters, and that completes our category model. We can save the file and close it out. Now we need to create a controller to manage our categories with. So under controllers, let's create a new file, and I'll save this as CategoriesController.php. We'll open up our php tag, I'll create a new class named CategoriesController and this extends the CaseController. Let's start by setting a CSRFB4 filter to protect our post requests. We can do that inside of our constructor. So we'll create a new public function underscore, underscore, construct. And then we can use the BeforeFilter method, tell it to apply the csrf filter. And we can pass in an array as the second argument, and this will protect our post requests. Now we need an index action. This action's going to both display all of the categories, along with a delete button, and then a form for creating new categories. So let's create a new public function. We'll prefix this with the get HTTP verb, the action will be named Index, and we just need to return a View here. We can call the make method, and this will display a view from a categories folder, and the view will be named index. Now I'm also going to call the with method, so that we can send all of the categories from our categories table to the view so that we can display them. So this will be available inside of the view using a categories variable. And then we can use our category model and call its all method to grab all of the categories. And that completes the index action. Now we need a create action that our form will post to when creating new categories. So I'll create a new public function, I'll prefix this with the post HTTP blurb. I'll name the action Create. And now before we create the new category, we first need to make sure that it passes our validation rules. So we need to create a new validator object. Let's create a validator variable. We'll call it the validator class, and its make method. The first argument is the input that we want to validate, so we can pass in all of the input using the input classes all method. And the second argument are the rules that we're gonna validate that data against. So we can use our Category model and grab our static rules property that we created earlier. Now that we have our validator object, we just need to see if it passes. So we can create an if statement here. We'll use our validator objects passes method. And if the validator passes we just need to create a new category and save it into the database. Let's create a new category variable. And this will hold a new category. Now we can use our category object and assign its name to whatever was submitted from the form. So we can grab the name that was submitted using the input classes get method and we just get the name. Now we just need to save the category into the database, we can do that by using our category object and calling its save method. Now after saving the new category into the database we just need to redirect the user back to the categories admin page and give them a success message. So we can return, we call the redirect classes to method, we'll redirect them back to the admin/categories/index uri. And then I'm just going to call the with method, and we'll set our flash message, and this will just say, Category Created. So that handles if the validation passes. Now if the validation does not pass, we need to redirect them back to the categories admin page and we'll give them a flash message saying that something went wrong and we'll just display all of the form validation error messages, and we'll also remember the form input. That way they don't have to retype what they entered into the form, they can just edit it. So outside the if statement, we'll return again. We'll call the redirect classes to method. We'll redirect to the admin/categories/index URI. We'll call the with method. We'll set our flash message. This will just say Something went wrong. Then we'll call the withErrors method and pass in our validator object to display our validation error messages. And lastly we'll call the withInput method to remember the user's old form input. Okay, that completes our Create method. Now lastly, for each category that we display on our index page, there will also be a delete button which will submit a hidden field containing the ID of the category that we'd like to delete. So we need a destroy action to handle deleting categories. So let's create a new public function. We'll prefix this with the post http ver, and we'll name this Destroy. So now to delete the category, we need to get a reference to it. To get a reference to it, we can use the ID that's submitted from the form. Let's create a new category variable. We can use our category model, call it find method. And we just need to pass in the id of the category that we're deleting. We can grab that ID using the imput classes get method, and grab that hidden ID field. Now before we attempt to delete the category we wanna make sure that we found the category. So we can use an if statement and check if we have a category. If we do, we can delete it by calling its delete method. After deleting the category we'll just redirect then back to category's admin page. And give them a success message. So we'll return. We'll call it the Redirect Classes to method. We'll redirect to admin/categories/index. And we'll call the with method. And we'll set our flash message. And this will just say Category Deleted. Now if we could not find the category that we were looking for using the ID, that means something went wrong. So we should give them an error message and tell them to try again. So outside of our if statement let's return. We'll call the Redirect classes to method again. We'll redirect to admin/categories/index. We'll call the with method, we'll set our flash message and this will just say, Something went wrong, please try again. And that completes our categories controller. Now we just need to tie our controllers actions to a set of routes. So we can close out our category's controller and under app, let's open up routes.php. For now, we're just going to leave this root route and we'll replace it later once we've created our main home page. So, right after it, let's create a set of routes for our category's controller. We can use the Route class and call it's Controller method. And now as you may have seen, when we were redirecting the user in our controller, our URI began with admin/categories/ then the name of the action. So that's what our URI's gonna be here for our controller routes. So it's going to be admin/categories. And these routes are going to be for our CategoriesController. And that's it for our routes. We can save this file and close it out. Now lastly, we just need to create our index view file. So under the Views folder, let's create a new folder, named Categories. And inside of categories we'll create a new file. I'll save this as index.blade.php and we need to start off by telling this view to use our main layout file. We can do that by using and extend statement, and that's inside of the layouts folder, and it was named main. Now we need to wrap all of our view code within a content section so that it's displayed within our main layout file. So we'll create our content section and then we use a stop statement at the bottom. And let's start by creating a new div. So we'll give this an ID of admin. And we'll close the div, and I'll put a little comment rhere saying end admin. Now inside of this div, I'm just going to create an h1 tag. This will say Categories Admin Panel. And right after the h1, I'll put a horizontal rule. And then I'll put a little paragraph here just to give the user a description for what this page is for. So this will say, Here you can view, delete and create new categories. Next, let's create an h2 tag, and this will say Categories, then I'll put an hr tag after this as well. And now we just need to display a list of all of the categories. So, we'll just put this inside of an unordered list. We'll display the category's name and then after it we'll use a form to display a delete button so that we can delete categories if we need to. Let's start by creating our unordered list tags and I'll use a foreach loop. We'll loop over all of the categories that we've passed in from our controller as category. And we'll end the foureach and inside of here we'll display a list item tag to hold the category and let's just display the categories' name using our category object. I'm just going to fix up the formatting here a bit. Write this down onto a new line. And right after the category's name, I'll put a space, a hyphen, and a space. And now we'll display the forum that we used to delete the category. So let's create a form using the form classes open method. We'll pass an array here, and set the URL key, this is where the form is going to submit to. And this will go to admin/categories and then to our destroy action. Now I'm also going to apply a class to this form so that it displays inline. That way it's on the same line as the name of the category. And this CSS is already written for you so you don't have to worry about writing it. We just need to add the class here. So we'll set the class key and we'll set this to be form-inline class. After opening the form we now need to create our hidden form field for the ID. So we'll use the form class, call its hidden method. This will be for the ID, and then we just need to pass in the ID as the value using the category object. Now we need our submit button, so we use the form classes submit method. And this will just say delete. And lastly, for this form, we just need to close it using the close method. And that's it for displaying our categories. Now we need to create a form to create a new category. I'll start by creating a new h2 tag. This will say create new category and I'll put an hr tag after it as well. Now before we create the form we'll want to display any foreign validation error messages. So let's first check if we have any errors to display. We can use an if statement and we'll check if we have any errors. And we'll just endif statement here. So if we do have errors to display, I'll create a div to hold those errors. I'll give this an ID of form-errors. And we'll just close the div. I'll put a comment here saying, end form errors. And then we'll just give them a little message saying the following errors have occurred. And after the message, we'll display all of the errors in an ordered list. So let's create a UL tag here. And we need a foreach loop. We can loop over all of the errors as error. And we just end the foreach, and we display each error inside of a list item tag. So we can just echo out that error variable. There we go, that takes care of our form validation error messages. Now let's create the form. You can use the form class open method. We'll pass in an array, we'll set the URL to go to admin/categories/create. That's our create action. And I'll create a paragraph tag here and this will hold the label and the text input field for the name field. So let's create the label, we'll use the label method. This'll be for the name field. And we'll create the text field for the name as well. After the paragraph tag, let's create our submit button. Use the form class's submit method. And the text on the button is just going to say, Create Category. And I'm also going to pass an array as a second argument, so that we can set some options. I just want to apply a class to this so we can style the button. So we'll set the class key to secondary-cart-btn. After the submit button, we just need to close the form using the close method. And with that, we should have a nice admin interface for managing our categories. Make sure to save your view file and let's start up the server. Going to switch to my terminal. We can run PHP, artisan serve. There we go. So you can see our application's running on localhost, port 8000. I'll switch into Firefox. Let's open up a new tab. I can go to localhost, port 8000/admin/categories. And it looks like I've made a really silly mistake, I didn't put the form inside of our admin div. So let's do that real quick. Let's go back into our text editor, and I'm just going to copy all of this up to the create new category H2. We'll cut it out and I'll paste it inside of this admin div, right below the unordered list. And I'll just fix up this indentation, and we should be good. Let's save the file. We'll go back into Firefox, I'll refresh, and there we go. So I'm just going to zoom out a little bit so that we can see the site better. All right, so you can see it's using our layout. It looks pretty good. All of our images are showing up, the styling's working, our drop-down menus work. And it does look like we have another error here in the view cart. So let's fix that up too. We'll go back into our text editor. Let's open up views > layouts > Main.blade.php. Let's scroll down here to the view cart, there we go, you can see I forgot to put in image/bluecart.gif, so it was just showing the all text. Let's go back to the browser, and we'll refresh again. And perfect. And we have our image here as well. So as you can see as we're building our application that I'm probably going to be making a few mistakes here and there. And I've decided to leave them in just so you can see how I handle those problems. And you're going to be running into a lot of mistakes especially as you build bigger sites like e-commerce web applications. All right, our page looks pretty good. Everything's showing up, we don't have any errors at the moment. So let's try out the new functionality that we wrote. Of course, we don't have any categories at the moment, so let's create a new one. Let's create some laptops. Perfect, we get category created. Let's try just submitting an empty name for the category and see if our error messages work. So I'll just click the button and we get our message saying something went wrong, the following errors have occurred, the name field is required. So let's also try out the minimum length requirement. It has to be at least three characters in length. So if we write just two characters, there we go, the name must be at least three characters. All right, perfect. So let's go ahead and create several new categories. So I'm going to create some desktop PC, how about some smartphones some tablets and let's also create a category that we can use to delete. So I'm just gonna name this one, Delete Me. And we'll create that category. All right, so we can see our categories are showing up and we have our delete buttons here. Let's try deleting one. So we should be able to click on the delete button. And perfect, it disappears and we get out message saying category deleted. All right, great. Our categories admin panel is complete. Next up, we're going to work on creating products, uploading product images, and associating products with our categories.