1
00:00:00,000 --> 00:00:00,170

2
00:00:00,170 --> 00:00:03,090
>> SPEAKER: Let's improve the courses
homepage by allowing ourselves to

3
00:00:03,090 --> 00:00:06,610
provide custom titles for each of those
pages, so that each of them is

4
00:00:06,610 --> 00:00:08,780
not, quite simply, CS50.

5
00:00:08,780 --> 00:00:12,550
To do this, let's implement a couple of
functions, one called Render Header

6
00:00:12,550 --> 00:00:16,410
and one called Render Footer, that
instead of Require Alone will take

7
00:00:16,410 --> 00:00:19,330
care of the rendering of our
page's headers and footers.

8
00:00:19,330 --> 00:00:20,280
Let's take a look.

9
00:00:20,280 --> 00:00:24,490
>> Inside of index.php now, notice that
I'm requiring a new file called

10
00:00:24,490 --> 00:00:26,070
Helpers.php.

11
00:00:26,070 --> 00:00:28,910
It's in there that my two functions
will be defined.

12
00:00:28,910 --> 00:00:32,960
Below that, notice that I'm now calling
that function Render Header.

13
00:00:32,960 --> 00:00:34,830
And I'm passing in an argument.

14
00:00:34,830 --> 00:00:39,040
>> The type of that argument appears to be
an array, which in PHP is denoted

15
00:00:39,040 --> 00:00:40,370
with square brackets.

16
00:00:40,370 --> 00:00:44,210
In particular, this array is an
associative array insofar as it

17
00:00:44,210 --> 00:00:49,620
associates a key, like title, with a
value, like CS50, rather than relying

18
00:00:49,620 --> 00:00:51,570
on numeric indices alone.

19
00:00:51,570 --> 00:00:53,820
Below that now we have
my unordered list.

20
00:00:53,820 --> 00:00:57,180
But below that, we have a call to Render
Footer, the other function

21
00:00:57,180 --> 00:00:59,980
that's presumably defined
in Helpers.php.

22
00:00:59,980 --> 00:01:01,500
>> Let's take a look there now.

23
00:01:01,500 --> 00:01:06,760
In Helpers.php, notice that I have,
indeed, that function Render Footer

24
00:01:06,760 --> 00:01:11,100
whose purpose in life is apparently to
take in as its argument an array

25
00:01:11,100 --> 00:01:12,130
called Data.

26
00:01:12,130 --> 00:01:15,870
Now, if the user does not provide an
explicit array, the fact that there's

27
00:01:15,870 --> 00:01:20,610
an equal sign followed by empty square
brackets means that the default value

28
00:01:20,610 --> 00:01:23,410
of Data will simply be an empty array.

29
00:01:23,410 --> 00:01:27,670
>> Inside of Render Footer, notice that I'm
calling a function called Extract.

30
00:01:27,670 --> 00:01:32,170
Extract takes an associative array, like
Data in this case, and for any

31
00:01:32,170 --> 00:01:37,060
key in it, it turns that key into a
local variable of the same name.

32
00:01:37,060 --> 00:01:41,640
So if that associative array had a key
called Foo, extract would ensure that

33
00:01:41,640 --> 00:01:45,680
we now have a local variable called
dollar sign Foo, whose value is the

34
00:01:45,680 --> 00:01:48,140
same as it was in that
associative array.

35
00:01:48,140 --> 00:01:52,890
>> Lastly, I call Require Footer.php,
which as an aside, looks

36
00:01:52,890 --> 00:01:54,900
quite simply like this.

37
00:01:54,900 --> 00:01:59,390
Now, back in Helpers.php, notice that
we also have Render Header, whose

38
00:01:59,390 --> 00:02:02,610
argument is the same, an array
called Data whose default

39
00:02:02,610 --> 00:02:04,380
value is an empty array.

40
00:02:04,380 --> 00:02:07,060
We then call Extract again, as before.

41
00:02:07,060 --> 00:02:12,130
And then we Require Header.php,
whose contents are now this.

42
00:02:12,130 --> 00:02:16,980
>> Inside of Header.php, notice that we
no longer have a hard coded title.

43
00:02:16,980 --> 00:02:19,720
And we now have an H1 tag, as well.

44
00:02:19,720 --> 00:02:24,030
In particular, the value of the title
is going to be whatever the value of

45
00:02:24,030 --> 00:02:26,750
the local variable called Title is.

46
00:02:26,750 --> 00:02:31,800
After passing it to a PHP function
called HTML Special Chars, we're going

47
00:02:31,800 --> 00:02:36,560
to obtain that return value, and then
plug it into the HTML I'm outputting

48
00:02:36,560 --> 00:02:39,430
by a way of this function,
called Echo.

49
00:02:39,430 --> 00:02:43,580
>> Really, this is shorthand notation for
a function call that might otherwise

50
00:02:43,580 --> 00:02:44,780
look like this.

51
00:02:44,780 --> 00:02:49,010
But it's a lot cleaner, simply, to write
open bracket question mark equal

52
00:02:49,010 --> 00:02:51,400
sign, without even mentioning PHP.

53
00:02:51,400 --> 00:02:56,260
I'm now going to do the same inside of
that H1 tag so that ultimately, if the

54
00:02:56,260 --> 00:03:00,520
user passes to my Render Header function
an associative array, inside

55
00:03:00,520 --> 00:03:05,310
of which is a key called Title, that
associative array's key will become a

56
00:03:05,310 --> 00:03:07,870
local variable called
dollar sign Title.

57
00:03:07,870 --> 00:03:12,130
>> We will then pass that dollar sign Title
variable to this function, HTML

58
00:03:12,130 --> 00:03:13,240
Special Chars.

59
00:03:13,240 --> 00:03:16,500
And just in case there's any potentially
dangerous characters in

60
00:03:16,500 --> 00:03:20,500
there, like ampersands or other such
symbols, HTML Special Chars will make

61
00:03:20,500 --> 00:03:23,140
sure that they're rendered
safely on the page.

62
00:03:23,140 --> 00:03:26,420
And by using open bracket question
mark equal sign, I'm literally

63
00:03:26,420 --> 00:03:30,080
substituting in at that part of the
page whatever the return value

64
00:03:30,080 --> 00:03:32,050
of HTML Chars is.

65
00:03:32,050 --> 00:03:36,450
>> Meanwhile, in Lectures.php, I
have a new value for Title.

66
00:03:36,450 --> 00:03:38,330
Not CS50, but Lectures.

67
00:03:38,330 --> 00:03:41,590
In Week0.php, I have
a value of Week 0.

68
00:03:41,590 --> 00:03:45,560
And in Week1.php, I have
a value of Week 1.

69
00:03:45,560 --> 00:03:48,790
So at the end of the day, my page
looks quite like it did before.

70
00:03:48,790 --> 00:03:52,090
But we've now gotten a much,
much better design.

71
00:03:52,090 --> 00:03:54,240