Preview
Video Player
00:00
00:00
Todo App
10:17Let's put together the skills you've learned in this course to add functionality to our todo app. We'll start by displaying either complete, incomplete, or all tasks. In doing so, we'll take a closer look at how some of the comparisons work in conditional statements and how to use a secondary array to access array elements.
Let's put together that skills
that you've learned in this course
0:00
to add functionality to our to do app.
0:03
We'll start by displaying only completed
or incomplete tasks, then we'll
0:06
explore sorting multi dimensional arrays,
using a particular inner key element.
0:11
For our to do list, this would be
the title, priority, due date or
0:16
completion status.
0:20
We'll start by displaying only complete or
incomplete tasks.
0:23
Within the table, we are looping
through each item in our array.
0:27
We then check the complete
status to show yes or
0:33
no, whether the item is complete or not.
0:37
We could use this same conditional
at the top of our for each loop,
0:41
wrapping the entire row in a conditional.
0:45
When we refresh the browser we see
that only the complete items show.
0:58
We're going to be adding
more filters to this data so
1:05
let's remove the conditional
from the display.
1:08
Now we'll go up to the top of the page.
1:14
For each of these new filter features,
1:17
we're going to create a list
of keys in a particular order.
1:19
We will then use those keys to
access particular items in our list.
1:24
Let's create a new array named filter.
1:30
We're going to loop through each
item in the list array, and
1:36
I want both the key and the value.
1:40
So we can use the top for
each loop that we set up last time.
1:43
Let's add the filter for complete status.
1:47
We add a conditional, if item, Complete,
1:50
And if the item is complete,
we add the key to the filter array.
1:59
We're only adding the key to our filter,
but I wanna see the details.
2:11
So I'm going to do a var dump
of both the key and the item.
2:16
Var_dump($key,$item);.
2:20
Let's surround the dump with pre tags so
2:26
that it will display with line breaks in
a browser and make it easier to read.
2:27
After the loop let's var
dump the filter array and
2:40
the list array as well
to see what we have.
2:43
We'll copy this whole
dump with the pre tags.
2:48
And we'll dump filter, and list.
2:57
Now let's take a look at
this in the browser again.
3:02
The value from our filter
array corresponds to the key
3:08
from the dump in the loop.
3:13
There is only a single key, item dump, and
only a single item in the filter array.
3:17
This is because there is only a single
complete item in our list array.
3:24
If we scroll down we can also
see this item in our list array.
3:29
Now that we know what
our array looks like,
3:38
let's remove this dump from our loop and
we'll comment out the dump here.
3:40
The filter array contains only
the item keys we wish to show.
3:48
So we can use the values from our
filter array to show the items
3:54
from our list array.
3:58
Instead of looking through
the list array for
4:01
our table,
we'll loop through the filter array.
4:04
In this way we will use only
the items in the filter array.
4:08
I'm going to rename
the item variable to id.
4:12
This is because it identifies
the list item we're going to use.
4:16
The variable item no longer exists
because we changed it to the id.
4:21
Instead of using the item
variable in our display,
4:26
we're going to reference the list
directly through its index id.
4:30
So, we'll use list and
then we use the id from our loop.
4:35
Let's change item for
list id for each field.
4:43
Making sure we don't forget
the complete status.
4:52
Now let's go back to the browser.
4:57
The table shows only the items
that are complete, this is nice.
5:01
But we probably want to be
able to show incomplete items.
5:05
We could change our
conditional to look for
5:11
a false value instead, by putting
our negation operator right here.
5:14
But let's make it easy to change between
complete and incomplete statuses.
5:20
Instead of hard coding
the status into our conditional,
5:26
we're going to check if the item
complete equals the variable status.
5:31
We can then use a variable status
to represent a true-false value,
5:38
we'll add this to the top of our file.
5:43
$status = false,
this will allow us to make changes
5:46
to what our script would display
right at the top of the file.
5:51
Our status is set to false, so,
let's go back to the browser.
5:57
Now we see our list of incomplete items.
6:03
Let's change status to true.
6:07
And this time we see a list
where our status is complete.
6:13
Finally, I still may
want to see all items.
6:16
So let's add the ability to
set the status equal to all.
6:20
Because we're using the filter array for
the display,
6:28
I named my filter array to be set, so
I can't just skip this top loop entirely.
6:31
Instead, I'm going to
use another conditional.
6:37
To check if $status = all.
6:42
And this is going to be an either or
condition.
6:50
Either the status should be all or
6:54
the status should equal
the status of complete.
6:56
In PHP, when a value comparison
is made with one of the elements
7:01
being a boolean value each element
is evaluated as a boolean.
7:06
Let me show you what this means in
practice, we'll use this var_dump.
7:11
I'm going to dump the status and
the boolean value of the string all.
7:23
Then I will also dump the value of
the comparison of $status = 'all'.
7:33
Let's go back to the browser
with our status equal to all.
7:42
The status variable equals the string all,
but
7:47
the boolean value of the string
all is true, because any string,
7:50
besides an empty string,
evaluates to true.
7:56
Finally, the value of the string's
status equals the string all, so
8:00
this evaluates to true.
8:05
For this comparison, a double
equals works, and we see all items.
8:07
Let's change the status variable to false.
8:13
Now we see that our status is false, but
8:24
the boolean value of
the string all is still true.
8:27
So the comparison of the value
of the boolean status to
8:31
the value of the string all equals false.
8:35
Once again, the double equals works, and
8:39
we see only the incomplete items,
but we haven't checked true.
8:41
Let's change the status variable to true.
8:47
This time, we see that our
status is equal to true, and
8:54
the boolean value of all is equal to true.
8:59
So comparing the value of status to
the boolean value of all equals true.
9:02
This means that instead of showing only
the complete items, we see all items.
9:09
Instead of comparing only the value, we
need to make sure that this is identically
9:16
matching both the type and
the value using a triple equals.
9:21
Let's change both our conditional and
our dump to the triple equal.
9:26
Now I see,
that although the status is true and
9:35
the boolean value of all is true,
the types boolean and string do not match.
9:39
So my comparison is false, and we see
only the complete items that we want.
9:46
Let's check this with false again.
9:51
We once again see only incomplete items.
10:02
And finally let's check all again.
10:07
And once again, we see all items.
10:13