Welcome & What is Laravel?
Hey there gang and welcome to your very first Laravel tutorial. All right then gang, so in this series we're going to learn how to use Laravel from the ground up to create a small website. And along the way, you're going to learn all the fundamental Laravel concepts and building blocks like routing, making views, models, handling data, migrations, and all that jazz.
But first of all, for those not familiar with Laravel, what exactly is it? Well, Laravel is a popular modern PHP framework for creating web applications, and it comes with a bunch of setup and features that make it really easy to flesh those applications out. When it comes to things like routing, creating data models, authentication, making views, etc., it's got a really active community and ecosystem around it, so you're never far from help when you need. And on top of that, I think Laravel's a nice choice if you're struggling with JavaScript fatigue, which hits us all every now and then. But if you do want to keep your JavaScript framework for the front end, then Laravel works great with those too.
Project Overview & Prerequisites
So in this series, we'll be making a simple CRUD application, which looks something like this. And by the way, CRUD stands for Create, Read, Update, and Destroy. Doesn't mean it's crap. But anyway, this is a directory of ninjas, which all get listed here on the homepage, and you can click any one of those to see more information about them. We can delete ninjas from the details page, which also shows a little success message whenever we do, back on the homepage. And you can add new ninjas by going to the create page and filling out the web form.
So along the way, we're going to be learning about routes, like I said, views, something called Blade, which is a templating engine. We'll be learning how to hook the application up to a database, what migrations are, web forms, and something called Eloquent models as well, which make it really easy to manage and communicate with your data. Plus we'll be covering a bunch of other really useful stuff as well. It's going to be really extensive, the course, and I won't be assuming any prior Laravel knowledge or experience. However, since this is a PHP framework, I would expect you to already be at least a little bit familiar with PHP the language. So if you're not, then I'd recommend checking out my PHP course before you go any further, and I'll leave the link to that course down below the video.
Modern Setup with Laravel Herd
Anyway, now we've got a rough idea of what Laravel is and what we're going to be building, let's go ahead and make a brand new Laravel project.
Now historically, if you wanted to make some kind of web application using PHP and a SQL database, you'd have to manually set everything up on your computer, like PHP itself, MySQL, a web server like Apache or Nginx, etc. And you can normally install those using a tool like XAMPP or MAMP. You'd also have to install something called Composer, which is a dependency manager for PHP. Now once all of that was sorted, you could eventually spin up a new Laravel application and start coding. So if you wanted to, you could go down that route and everything would normally work out fine.
However, a much easier alternative is to use a tool called Herd, which sets up the entire PHP environment for us in a single click. And that means we can get Laravel projects up and running really quickly without any kind of configuration on our part. On top of that, it automatically handles things like multiple PHP and Node.js versions on your computer. So to download it, head to herd.laravel.com and you should see a download button right here for whatever operating system you're on. So click that and just download it and walk through the installation steps.
Exploring the Laravel Herd Dashboard
Okay, so once you've installed and opened Herd, it should look something like this. You've got a dashboard where you can stop and start the server. I'm going to start it by clicking on this button right here so that later on we can view the project in a browser. You can also change the version of PHP you're using right here, and you can open up all of your current Laravel sites by clicking on this button and that's going to list them all out in this new window with information about each one. All right, so let's close that. And next up, we've got some general settings right here where you can do things like configure your startup options and your default IDE. Mine is set to VS Code.
At the top, you're also going to notice this Herd Paths section, along with a single path pointing to a Herd folder somewhere on your computer. So this Herd path is basically a directory where Herd sets up an isolated environment to create Laravel projects in, and it contains all the configuration and binaries that we need to do that in this isolated environment. So whenever we make a new Laravel project, we'll be making it inside this Herd folder, so just make a note of where that is for now.
All right, so below that we've got the PHP tab, which shows the different installed PHP versions, and it's going to let you know when there's an update available to those versions as well. You can see I've currently got version 8.3 installed on my computer. You've got a similar thing for Node versions in the next tab as well. And by the way, you will need Node.js installed on your computer to fully follow along with this course because we'll be using it later to install some front-end dependencies. So you can do that by clicking one of these buttons right here to install a self-contained version of Node for use within Laravel projects inside the Herd directory we just saw, if you wanted to. Or, if you've got it globally installed on your computer, that's fine as well. Anyway, I don't think we really need to go through the rest of these tabs. So just make sure on the dashboard you've clicked the button to start all services so that server is running, and then we can go ahead and make a new Laravel project inside that Herd directory.
Creating a New Laravel Project
Okay, so now open up your terminal of choice. I'm using Windows Terminal, which you can download from the Microsoft Store if you want. And you need to navigate to that Herd directory inside the terminal that we saw before, because that's where Herd sets up the isolated environment to create and run new PHP and more specifically, new Laravel projects. So I'm going to cd into that directory. And now we can use the Laravel command within this environment to create a new Laravel project.
To do that, we can type laravel new and then the name of the project, which I'm going to say is ninja-network. But you can call this what you want. But anyway, if you press enter, Laravel is now going to walk us through the process of setting this application up, and it's just going to ask us a few questions along the way. And the first question is, would you like to install a starter kit? Well no, we don't need a starter kit. And a starter kit is basically just a load of code that comes along for the ride when we create a new project to get started with certain things. But again, we're going to go with the default option which is up here, no starter kit, so you can just press enter.
And it says, which testing framework do you prefer? Well, we'll just go with Pest. And then down here, would you like to initialize a Git repository? No, we don't need to do that. All right, and then next up, it says which database will your application use? We're going to go with the default option which is SQLite, so just press enter again. And then it says, would you like to run the default database migrations? Now we're going to learn about migrations later on. For now, just press enter on the default option, which is yes, and that creates us some basic starter tables. Okay, so now that's all installed, we're going to see this URL right here where we can view the new Laravel project in a browser. So whenever we make a new Laravel application inside the Herd folder, it automatically serves up your application to a local domain like this, which is nice. So remember or copy this URL because we're going to be viewing it in a browser later on.
Project Tour & Frontend Dependencies
All right, so now we want to cd into this new project directory so let's do that first of all. And then we can open this up in VS Code by typing code then a space, then a full stop, and then just press enter.
All right then, so let me just zoom in a little bit first of all over here just so we can see everything a bit clearer. And the first thing we need to do is install all the front-end dependencies. So if you go down to the package.json file, you can see we've got all these things right here, these packages that we need to install. So we need to open up a terminal to do this, make sure you're in the correct directory, and we can type npm install and press enter. And this is the reason we needed Node installed, because we're going to use npm, which comes along for the ride with a Node installation.
All right then, so now I just want to give you a very quick explanation of some of these files and folders because there's a hell of a lot of them. And if you're new to Laravel, then it's probably going to be a little bit overwhelming. But actually when you break it down, I promise it's not as complicated as it might seem right now. So I'm just going to go over the parts that we'll be primarily working with throughout this series. And that starts with this app folder. So the app folder is where most of your application core business logic goes. So things like data models and controllers, and we'll learn exactly what those are later on in the series.
The database folder is where we make migration files, which are like instructions, I guess, about how to structure database tables. We also make things called factories and seeders in this folder, which both help us populate the database with dummy data for testing the application with.
The resources folder is primarily for any uncompiled front-end code like JavaScript and CSS. We also make any views inside this folder, which are typically Blade templates that get rendered on the server but then get sent to the browser as HTML pages. And Blade, by the way, is just a templating engine that we can use with Laravel to inject kind of dynamic code and data into a view. So whenever we're making any templates or pages that we want to show to the user in the browser, we do that inside this views folder. And you can see right now we already have a view called welcome.blade.php, and inside that is what looks like an HTML template.
All right, so next up, the routes directory is where we register all of the routes for the application and decide how to respond to requests to those routes. For example, if we had a page on the website where the route was /contact in the address bar, then we need to register that route and handle requests to it inside this folder. So right now you can see we've got a single route set up inside the web.php file, which is where you're going to define all of your website routes. And this route is set up to respond to GET requests in the browser to this path right here, which is forward slash, the base route of the domain, and it responds to requests to that path by returning a view called welcome, which is the welcome view that we just saw a moment ago. Okay, so this means when we visit this path in the browser after the domain, then we're going to get sent back that rendered welcome view. And we'll talk more about routes and views in probably the next lesson. But anyway, these folders which I've just walked through are where you're going to be spending about 99% of your time during this course as we make and flesh out a Laravel application. And we'll be diving into each of these directories and talking much more about them as we go forward. This was just more of a little gentle overview of where the different moving parts of the application live.
All right then and finally down here we've got a few configuration and package files as well which we might dip into at some point later in the course. So again, I know it looks like there's a lot going on here, but honestly as you start working with Laravel, you're going to come to realize that it's not actually that complex.
Customizing the Welcome View
Right then. So there's one more thing I want to do before we preview this application in the browser, and that is to go to the welcome view and just make some quick changes because right now it's a long-ass file full of unnecessary code. So we're going to keep it simple and we're going to strip it right back. So I'm actually just going to copy this line right here, this HTML tag, because it has this dynamic Blade syntax right here which outputs the language dynamically for us dependent on our app settings. So I'm going to copy this, in fact I'll cut it, and then I'll get rid of all of the rest. And then I'm going to boilerplate a new HTML document essentially by typing doc and then tab. And I can do that because I've got the Blade package installed over here first of all, which is Laravel Blade.
So make sure you install that first of all. And then once you've done that, if you go to settings over here and then search for Emmet, then down here you need to add an item. Call the item blade and set the item to html. So now we can use those HTML Emmet features inside Blade files like this. Okay, anyway, I'm going to save this and then I'll replace this HTML tag right here with the one we just copied.
All right then, so inside here we can say Ninja Network for the title. And then we'll just flesh out a very quick body. I'm going to do an H1 that says, "Welcome to the Ninja Network." And then below that, I'm going to do a paragraph tag and it will say, "Click the button below to view the list of ninjas." All right, and then we'll finally do an anchor tag right here with a class of button. So a.btn. And the href doesn't need a value right now but for the text, we will just say "Find Ninjas" like so. The reason I've added this class is because later on I will be adding some CSS to style this a little bit, so that's just me adding it now so I don't have to do it later.
Previewing the App & Course Resources
Okay then, so now if you visit ninja-network.test in the browser, you can see the application's automatically being served up at this domain and we can see that welcome view content on the page right here. So if you called your application something different, then you just need to update the address bar to reflect that, but it should be your application name .test. And this is something Herd configures and serves up automatically for us. We didn't need to do a thing, which is nice. Although you do need to make sure that you're running those services within the Herd application itself, otherwise this won't work.
All right then, so now we've used Herd to install everything that we need to make Laravel apps. We've made a new Laravel app. We've had a quick tour of the project structure and we've now previewed that in the browser as well. So in the next lesson, we're going to talk about routes and views in much more detail. Just one more thing before we finish this lesson though, and that is that I've created all of the course files for each lesson and I've uploaded all of those to this repo right here which is called laravel-11-for-beginners. So I will leave this link down below the video and each lesson has its own branch on this repo. So to see the code for a specific lesson, you can just select that lesson from the branch dropdown right here if you wanted to browse the code you can do. If you want to download the code, then you can do so by clicking this button right here and then downloading a zip folder. By the way, if you want early access to the course so you can watch the entire thing now, you can grab it on the netninja.dev website. It's just $2 to buy the whole thing. So I'm going to leave the link to this course page down below the video for you. Or if you want instant access to this course plus the entire Net Ninja course library including all the masterclass and pro exclusive courses, you can sign up for a Net Ninja Pro subscription. It's just $9 a month and you can get your first month half price using this promo code right here. So I'm going to leave this link below the video as well. Anyway, really hope you enjoy the course and I'll see you all in the very next lesson.
