Playing
03. Creating a base layout
Episodes
01. Introduction and demo
4m 17s
0%
02. Pest up and running
7m 55s
0%
03. Creating a base layout
8m 19s
0%
04. Simple authenticated visibility tests
12m 46s
0%
05. Registering a user
9m 27s
0%
06. Switching to higher order tests
2m 31s
0%
07. Tapping with higher order tests
5m 35s
0%
08. Logging in
8m 39s
0%
09. Creating a custom Pest function
2m 33s
0%
10. Creating a custom Pest assertion
5m 34s
0%
11. Creating the login form
2m 57s
0%
12. Creating a book
15m 36s
0%
13. Validating book statuses
6m 8s
0%
14. Book creation form
8m 28s
0%
15. Showing books grouped by status
12m 23s
0%
16. Pest Datasets
2m 44s
0%
17. Tidying up with more custom expectations
6m 23s
0%
18. Showing the book edit form
12m 6s
0%
19. Updating a book
12m 9s
0%
20. Refactoring authorisation
5m 13s
0%
21. Refactoring validation
4m 33s
0%
22. Running tests in parallel
1m 35s
0%
23. Pending and accepted friends
11m 41s
0%
24. Accepting friend requests
6m 50s
0%
25. Getting all friends
6m 24s
0%
26. Removing friends
2m 49s
0%
27. Higher order assertions
3m
0%
28. Building the friend page
12m 44s
0%
29. Sending a friend request
11m 36s
0%
30. Accepting a friend request
6m 49s
0%
31. Deleting a friend
3m 48s
0%
32. Removing a pending friend request
1m 35s
0%
33. Merging friends properly
9m 22s
0%
34. Getting books of friends
10m 27s
0%
35. The feed
14m 21s
0%
Transcript
00:00
Before we write any real code, let's go ahead and get a basic layout for our app set up. And for this, we're going to go ahead and use Tailwind CSS. So the first thing is, let's just clear out what we have
00:12
in terms of this default welcome view here. So I'm going to go ahead and just get rid of everything in here and just create a really basic document layout and just call this book friends. So we're going to rename this, I think, to home.blade.php.
00:26
That would make more sense. And let's go ahead and create our controller here. So let's call this home controller. And we'll go and register this route really quickly,
00:38
because by default, we've just got this route closure. So let's take all of this, switch this out to our home controller, and we should be good. So under our home controller, let's go down and just make this invocable. We'll go ahead and return that home view, and we should be good.
00:57
So if we come over now, we just end up with an empty page. OK, let's get Tailwind installed so we can style this up nicely. And we're just going to follow the installation instructions for Laravel. So we've already created a new project.
01:10
Let's go ahead and use npm install on Tailwind and any of the other bits that it needs. So let's pull this in. And we'll go ahead and run npxtailwindcss init to generate our Tailwind config file. OK, so let's pull that command in.
01:24
And there we go. Great. So next thing to do is just update webpack.mix.js to pull Tailwind in. So let's grab this line here.
01:34
And let's go over and open webpack.mix.js, come down to post CSS, pop that in there, and let's move on. OK, so in terms of the Tailwind config, we need to make sure that we include all blade.php files. We're not working with JavaScript or Vue here.
01:49
So let's open tailwind.config.js. And just under the content section, that will do. And that will look for any Tailwind classes inside of any of the blade files that we've created. Next thing to do, just update app.css with the base components and utilities.
02:06
So let's open app.css in resources and CSS and paste this in. And then finally, let's run either npm run watch or npm run dev. So let's pull up our terminal and run npm run watch. And we'll just open up a new terminal window so we can run any commands in here.
02:24
OK, so let's just test this out really quickly. So we're going to come over to our home.blade.php file. And let's just create a div out here with a class of bgblue500 and just say hello, just to make sure that this is working.
02:39
And it isn't. So I have a feeling that we didn't include our styles. So let's go ahead and run link here just to generate a style sheet. And the href for this is just going to be using the mix helper.
02:50
And we're going to CSS and put in the compiled app.css file. OK, let's go over. There we go. Tailwind is pulled in.
02:58
So let's go and take what we've got here and put this into a layout component that we can reuse wherever we need. So we're going to go ahead and run php artisan make component. And we're going to say layouts and app.
03:11
And let's go over here. And we should see a layouts folder in view components created with app. And over here in the views directory, we've got app.blade.php. That is where we want to put all of this.
03:24
And then inside of the body, we want to pull in any of the content that we pass into this via the default slot. So let's just test this out over on the home page. So we can get rid of all of this now.
03:36
And we can say x layouts.app. And we can go ahead and just say hello in here. And what that should do is still have hello in. But if we just open up our development tools,
03:48
we've got all of that structure that we created within that base layout. So this is just going to help us not have to duplicate content over. So to create the main structure of our app layout, let's go and just around this slot, create out a div.
04:03
And this is going to have a max width of, let's just say, 4xl. We're going to set mx to auto. So this sits in the middle. We'll give this some padding as well.
04:12
And we're also going to make this a grid. And we'll set grid cols to 8 with a gap of 12. And we'll set a margin top of 16. What that means is we can have a sidebar.
04:24
And then we can have our main content, which will be where we put all of our slot stuff. So the sidebar will contain all of the navigation items that we saw from the introduction.
04:34
OK, so in terms of the actual sidebar sizing, let's say colspan 2. And we'll set a border on the right here. So that separates that out.
04:45
And we'll set this to a color of slate 200. And we'll go ahead and for every single item in here, set a space of 6. So as we have our link items in here,
04:56
that's going to go ahead and separate them out nicely. There we go. So these are separated now with that line down the middle. And because we've used a colspan of 2 here,
05:06
we need to fill this up with a colspan of 6 under the main content. So let's say colspan and 6. There we go.
05:14
We won't see any difference there. But that will now span the entire width of the container that we've created. OK, so for the main content,
05:23
we want a kind of reusable header in here. So I'm just going to go ahead and say if is set header. And we'll end that is set in there. And if that's set,
05:33
let's create an h1 out in here with a class of font bold. And we'll set the text a little bit larger, text to Excel, text slate, and let's pick 800. And then inside of here is going to be the header
05:46
that we pass through. So what we can now do is over on home.blade.php, as well as our main content, also include a header in here as well.
05:56
So that's going to look like this, xslot name and header. And then we can just down here say home. And then that will be the main content on the page.
06:09
So if we come over, there we go. Let's just space this main content out a little bit. So I'm going to wrap that in a div here. And let's say margin top of eight,
06:20
just to space that out. OK, let's work on our navigation item styling. And then we can just duplicate them down as we go. So let's just create one for now.
06:30
And we'll go ahead and make this an unordered list. Let's change that to an unordered list. And then each of these are going to be list items. And they are going to have anchors inside of them.
06:40
So for example, let's just create out the feed link in here and style this up. And then we can duplicate that down as we need. OK, so we're going to go ahead and set this to a font bold.
06:50
Text is going to be large. We'll set the text to slate 600. And we'll say that when we hover on this, the text will change to 800.
07:00
We'll set this to a block level. And we'll set the padding on the y-axis to one, just so we have a little bit more click area. OK, if we come over, there is our feed link.
07:09
When we hover over, that looks nice. And just up here, we're going to have the user's name only when they're signed in. So let's go ahead and add a name in there.
07:20
And we'll change this to just a span. We'll have it as the same styling. Now, we want these separated out. So as an example, we're going to have an unordered list here
07:31
just underneath this one, which is also going to have LinkedIn. So let's just get rid of this one. And this is going to be something like my books. And because we used the space Y6,
07:45
that's going to go ahead and space out that unordered list down here. So it's kind of grouping items. And then at the very bottom, we're going to have another unordered list, which will just contain logout, for example,
07:58
and also sign in and register. So there we go. There is our base layout. We can reuse this across any pages we create.
08:06
At the moment, it's not responsive, but that doesn't matter too much. We're not going to fiddle around too much with the design. At least now, we've got a base layout, which we can use very, very simply on any of the pages that we create.
35 episodes•4 hrs 19 mins•3 years ago
Overview
Pest is a PHP testing framework that brings beautifully simple syntax to your tests, without sacrificing on features. In this course, we'll get up and running with Pest in a Laravel project and write tests for a real-world application that we'll build along the way.
You'll learn how to set Pest up in a Laravel project, write tests with Pest's built-in assertions, generate code coverage, and more.
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!