‫All right, so there might be times when you'll have to work with nested loops, especially when you're
‫dealing with multi dimensional arrays.
‫So in this video I'm going to show you how to create a nested for loop and a nested while loop.
‫And then we're going to use a nested for loop to create a CSS grid layout.
‫So I already have the styling here display grid five columns and height and width 50 pixels.
‫And we're going to put a nested nested loop in here so that we can have rows with five columns.
‫But before we do that I'm just going to show you the basic syntax for nested loops.
‫So let's go up top here and open up our PHP tags.
‫So we're going to have our what's called the outer loop.
‫And that's just like we did in the last video.
‫We're going to set I equal to zero.
‫And I'm going to set I for the condition if I is less than five.
‫And then we're going to increment I by one.
‫All right.
‫So that's our outer loop.
‫Now immediately in this loop we're going to have our inner loop.
‫So let's say for and it's really important that you use a different variable here not I.
‫So the common convention is to use J.
‫So I'm going to set j equal to zero.
‫And I'm going to say as long as j is less than five.
‫And then we want to increment j.
‫So j plus plus make sure that you don't put I in here.
‫All right.
‫Now whoops.
‫What did I do here.
‫Should be semicolon not an L.
‫So I'm going to go ahead and echo out the AI variable.
‫And then I'm going to concatenate a string that has a space hyphen space.
‫And then concatenate the j variable.
‫And then I'm going to add a line break.
‫And let's see what that gives us.
‫So I'm going to reload and this is what we get.
‫Now what's happening here is for every one iteration of this outer loop, the inner loop is going to
‫run five times okay.
‫Because we have J is less than less.
‫If it's less than or equal to five then this is going to run.
‫And that for that first iteration of the outer loop zero I is going to be zero.
‫That's why you see zero here five times.
‫However J starts at zero and it's going to iterate five times for that one outer loop.
‫So 01234.
‫Then this I goes to two I'm sorry goes to one.
‫And that's when this happens okay.
‫It stays at one.
‫While this inner loop runs five times 01234.
‫Then I goes to two stays at two while the inner loop runs five times again.
‫And it keeps going like that.
‫So hopefully that can give you an idea of of how this works.
‫If I set this J.
‫If I set that to ten, then for every one iteration of the outer loop this is going to run ten times.
‫So if I reload now, you'll see you get zero through nine for J for each num for each of the the outer
‫I variables.
‫All right.
‫Now let's do the same thing with a while loop.
‫So I'm going to comment that out.
‫And let's come down here now with a while loop.
‫Our initialization has to happen outside of the loop.
‫So let's say I equals zero and then we'll have our while.
‫With our condition, which is going to be as long as I is, I is less than five.
‫And then in here we want to have our inner while loop.
‫But remember we have to set that initialization.
‫So here we're going to say j equals zero.
‫And then we'll have our inner while.
‫Which is going to be as long as J is less than five.
‫Now it's really important that you remember to increment these or else you're going to get infinite
‫loops.
‫So let's go ahead and infinite increment j before I forget.
‫And then outside of that inner loop in the scope of the outer loop we want to make sure we increment
‫I or you're going to have a problem.
‫So as far as what I want to do I'm going to run this same code here, this echo.
‫And we should get the same result.
‫So we have zero for five times, one for five times.
‫That's the I.
‫And then these are the J's.
‫All right, so this while loop is running five times for every one time that this one runs.
‫Now I want to use this down here in our template, our HTML.
‫So I'm going to just comment that out.
‫And we already have the CSS for the grid.
‫And if you don't know CSS grid, that's that's okay.
‫Basically we're just creating a five column layout.
‫We have our grid container.
‫And within that grid container I'm going to open up my PHP tag.
‫And I'm going to do for.
‫And we should be able to use the shorthand here.
‫So let's say for I.
‫Is equal to zero.
‫And then we're going to set as long as I is less than five.
‫And then I plus plus.
‫And let's end that.
‫So I'll say PHP.
‫And for.
‫And then within that we're going to have another for loop.
‫So I'll just copy this.
‫Actually I'll just copy both of these.
‫Whoops.
‫And then paste that in.
‫You want to make sure you change all of these to J.
‫So that should be J.
‫J.
‫And Jay.
‫Okay, now in here we want to have a div with the class of grid item.
‫And inside that, let's just do we'll use our shorthand and we'll just have whatever I is.
‫And then.
‫Just like we did above just a dash or a hyphen and then whatever J is.
‫And that's it.
‫Then we'll end that.
‫Now, if we reload, you're going to see that we have five columns and five rows.
‫All right.
‫And again, each time you see the zero, that's the I value.
‫And the inner grid is running five times for every one time that the outer grid runs.
‫And we're just, we're just creating a div.
‫Each one of these are a div with the class of grid item, which has that light blue background, that
‫50 pixel width and height, and so on.
‫All right.
‫So not something you're going to deal with a lot, especially if you're using frameworks like Laravel.
‫You might have some helper functions where you're using nested loops.
‫But it's not it's not going to be a huge part of your code as a as a full stack web developer.
‫But it's good to know.
‫All right.
‫So in the next video we're going to get into looping through arrays, which is the real reason that
‫I want to get into loops, because that's that's the more real life situation that you'll be using loops
‫for.