1
00:00:00,000 --> 00:00:04,700
[MUSIC]

2
00:00:04,700 --> 00:00:06,518
Hello and welcome.

3
00:00:06,518 --> 00:00:11,710
I'm Alena Holligan, a PHP teacher here
at Treehouse and long time developer.

4
00:00:11,710 --> 00:00:14,820
Most developers prefer to
build applications locally

5
00:00:14,820 --> 00:00:18,770
on their own computers rather
than on a hosted server.

6
00:00:18,770 --> 00:00:22,520
Working locally allows you to work more
quickly because you don't have to wait for

7
00:00:22,520 --> 00:00:25,960
changes to be saved to a remote server and

8
00:00:25,960 --> 00:00:28,930
you don't have to worry about
issues like internet connectivity.

9
00:00:29,970 --> 00:00:33,680
Working with files locally also
allows tighter integration

10
00:00:33,680 --> 00:00:34,580
with development tools.

11
00:00:36,020 --> 00:00:39,750
In addition, one of the best things
about programming as a career

12
00:00:39,750 --> 00:00:41,650
is the ability to work from anywhere.

13
00:00:43,070 --> 00:00:46,940
While all these reasons are good,
the most important reason for

14
00:00:46,940 --> 00:00:49,900
having a local development
environment is you should

15
00:00:49,900 --> 00:00:52,940
never be working directly
on a production server.

16
00:00:52,940 --> 00:00:54,940
Always test your code before it goes live.

17
00:00:56,010 --> 00:01:01,190
To make use of these advantages we need to
set up a local development environment.

18
00:01:01,190 --> 00:01:05,640
This means installing the programs
we need for our local computer

19
00:01:05,640 --> 00:01:10,590
to work as a web server,
namely Apache, MySQL, and PHP.

20
00:01:10,590 --> 00:01:15,750
There are many different ways to set
up a local development environment.

21
00:01:15,750 --> 00:01:18,640
Most involve at least some
use of the command line and

22
00:01:18,640 --> 00:01:20,890
can be pretty scary if you
don't know what you're doing.

23
00:01:22,730 --> 00:01:25,380
I'll be showing you a quick and
simple method,

24
00:01:25,380 --> 00:01:29,770
which will allow even complete beginners
to get up and running within minutes.

25
00:01:29,770 --> 00:01:34,940
Make sure you check out the notes for
more resources and advanced options.

26
00:01:34,940 --> 00:01:35,650
Let's get started.

27
00:01:36,890 --> 00:01:38,410
In our web browser, let's search for MAMP.

28
00:01:39,500 --> 00:01:43,570
The first one is MAMP and
MAMP PRO at mamp.info.

29
00:01:43,570 --> 00:01:45,780
We'll go to Downloads and
then chose Download.

30
00:01:48,610 --> 00:01:51,830
This may take a little bit, depending on
how fast your Internet connection is.

31
00:01:54,230 --> 00:01:56,930
Once the file has downloaded,
open the installer, and

32
00:01:56,930 --> 00:01:59,710
it will guide you through the necessary
steps to install the software.

33
00:02:02,420 --> 00:02:08,490
Read and agree to the terms,
and then install.

34
00:02:09,790 --> 00:02:12,240
It may ask you for
your password at this point.

35
00:02:12,240 --> 00:02:13,110
So type in your password.

36
00:02:16,400 --> 00:02:20,370
This installer installs two folders,
MAMP and MAMP PRO.

37
00:02:20,370 --> 00:02:24,910
Do not rename the MAMP folder or
move it out of the applications folder or

38
00:02:24,910 --> 00:02:27,090
your projects won't work.

39
00:02:27,090 --> 00:02:29,770
MAMP and
MAMP PRO have been installed successfully.

40
00:02:29,770 --> 00:02:32,150
You may close the installer.

41
00:02:32,150 --> 00:02:37,190
Go to your applications folder where
you will see MAMP and MAMP PRO.

42
00:02:37,190 --> 00:02:40,590
If wanna learn more about MAMP PRO,
check out the notes.

43
00:02:40,590 --> 00:02:43,840
For right now, simply open the MAMP
application which is in the MAMP

44
00:02:43,840 --> 00:02:47,920
folder and choose Launch MAMP,
then Start Servers.

45
00:02:47,920 --> 00:02:52,200
This is where the magic happens and
turns our computer into a web server.

46
00:02:52,200 --> 00:02:54,640
This will automatically
open the web start page,

47
00:02:54,640 --> 00:02:59,230
which includes basic information about
our new server, which is now running.

48
00:02:59,230 --> 00:03:03,430
If we click php info,
we will see the current php configuration.

49
00:03:05,060 --> 00:03:10,490
There are also links to administer our
MySQL databases using phpMyAdmin or

50
00:03:10,490 --> 00:03:11,240
phpLiteAdmin.

51
00:03:12,560 --> 00:03:13,620
If you click My Website,

52
00:03:13,620 --> 00:03:17,760
you will see a page that says Index of /,
and nothing else.

53
00:03:17,760 --> 00:03:21,560
This is because we don't have any
files set up, so let's fix that.

54
00:03:21,560 --> 00:03:24,130
Open up your text editor and
create a new file.

55
00:03:24,130 --> 00:03:28,090
Here we're going to put Test and
then Save.

56
00:03:29,380 --> 00:03:36,124
We'll choose Applications,
MAMP, and finally htdocs.

57
00:03:36,124 --> 00:03:40,980
This is where MAMP stores
our web files by default.

58
00:03:40,980 --> 00:03:44,620
Type index.php as out filename and
choose Save.

59
00:03:46,410 --> 00:03:51,370
Now when we go back into the web browser
and hit Refresh, we'll see Test.

60
00:03:51,370 --> 00:03:54,320
If I go back into MAMP and
Stop Servers, and

61
00:03:54,320 --> 00:03:57,910
then go back into the browser and
refresh, we'll see an error.

62
00:03:57,910 --> 00:04:00,870
That's because our server
is no longer running.

63
00:04:00,870 --> 00:04:04,470
Make sure you Start Servers before trying
to view your website in a browser.

64
00:04:05,920 --> 00:04:07,040
Congratulations.

65
00:04:07,040 --> 00:04:09,260
Technically, this is all we need to do.

66
00:04:09,260 --> 00:04:12,875
However, I want to show you two
configuration steps that will make our

67
00:04:12,875 --> 00:04:15,060
workflow a little easier.

68
00:04:15,060 --> 00:04:19,536
First you'll notice in
the address bar :8888.

69
00:04:19,536 --> 00:04:23,710
By default, MAMP uses port 8888 for web.

70
00:04:23,710 --> 00:04:26,790
If you remove the port number,
you'll receive an error.

71
00:04:26,790 --> 00:04:30,190
Normally when you visit a website
you don't need to add a port number.

72
00:04:30,190 --> 00:04:33,000
We can make MAMP work more
like a regular web server

73
00:04:33,000 --> 00:04:35,620
by changing one of
the settings in preferences.

74
00:04:35,620 --> 00:04:40,000
If you'd like to know more about ports and
how they work, check out the notes.

75
00:04:40,000 --> 00:04:42,350
Let's go back to MAMP and
open Preferences.

76
00:04:42,350 --> 00:04:49,670
Go to the Ports tab and choose
Set Web & My SQL ports to 80 & 3306.

77
00:04:49,670 --> 00:04:51,420
These are the standard web ports.

78
00:04:52,470 --> 00:04:56,410
After saying OK, our servers will restart,
they may ask you for

79
00:04:56,410 --> 00:05:00,120
a password again and now when we go
back into our browser and refresh,

80
00:05:00,120 --> 00:05:06,150
you'll see that Test Is directly on local
host without the port numbers 8888.

81
00:05:06,150 --> 00:05:10,770
Finally, most people find it better
to work in the documents folder,

82
00:05:10,770 --> 00:05:14,760
usually within a sites folder, and
then separate folders for each project.

83
00:05:14,760 --> 00:05:16,410
So let's set that up.

84
00:05:16,410 --> 00:05:20,480
First we'll go back into our text editor
and save our file in the new location.

85
00:05:20,480 --> 00:05:24,540
We'll add Documents here just so
that we know that it's working.

86
00:05:24,540 --> 00:05:29,820
And File, Save As,
we'll choose Documents, Sites,

87
00:05:29,820 --> 00:05:34,850
and then add a new folder named test site.

88
00:05:34,850 --> 00:05:38,630
We'll keep our name as index.php and
press Save.

89
00:05:38,630 --> 00:05:42,730
Now we go back into MAMP and
choose Preferences again.

90
00:05:42,730 --> 00:05:44,890
This time we'll go into our web server.

91
00:05:44,890 --> 00:05:47,620
Next to Document Root you'll see a folder.

92
00:05:47,620 --> 00:05:50,158
We click that, we can choose
the root folder for our website.

93
00:05:50,158 --> 00:05:56,310
Choose Documents, Sites,
Test Sites, and then Select.

94
00:05:57,630 --> 00:06:01,500
Choose OK, and
our server will restart again.

95
00:06:01,500 --> 00:06:07,180
Now when we go back to our browser and
refresh, we'll see Test: Documents.

96
00:06:07,180 --> 00:06:10,580
Now we know that it is looking in
the new location for our website.

97
00:06:10,580 --> 00:06:13,580
I have one final tip for you.

98
00:06:13,580 --> 00:06:15,730
Most likely you have more
than one project even now.

99
00:06:15,730 --> 00:06:19,390
And you'll definitely be adding
more projects in the future.

100
00:06:19,390 --> 00:06:21,868
Although MAMP PRO is designed
to accommodate this,

101
00:06:21,868 --> 00:06:25,250
we can work on multiple
projects with the free version.

102
00:06:25,250 --> 00:06:28,210
When you're ready to work on another
project go into Preferences and

103
00:06:28,210 --> 00:06:29,730
change the root path.

104
00:06:29,730 --> 00:06:31,880
Let's walk through what this looks like.

105
00:06:31,880 --> 00:06:36,310
Go into your text editor and
change your file to say Test Site 2.

106
00:06:36,310 --> 00:06:41,048
Now let's save this file under Documents,
Sites,

107
00:06:41,048 --> 00:06:44,610
create a new folder named test site 2.

108
00:06:46,110 --> 00:06:48,120
And save our index file here.

109
00:06:48,120 --> 00:06:55,010
Finally, go back into MAMP, Preferences,
Web Server and change the document root.

110
00:06:55,010 --> 00:06:59,570
We'll choose Documents, Sites,
Test Site 2, and hit Select.

111
00:07:00,800 --> 00:07:02,727
Then click OK.

112
00:07:05,988 --> 00:07:11,340
Now when we go back into our web browser
and refresh the page we see Test Site 2.

113
00:07:11,340 --> 00:07:16,160
To switch between these projects,
we simply change the root path each time.

114
00:07:16,160 --> 00:07:20,210
While this approach works, you can only
have one project running at a time.

115
00:07:20,210 --> 00:07:23,710
Check the notes to learn how MAMP PRO
handles this, as well as other features.

116
00:07:24,980 --> 00:07:27,344
Now that you have your local
dev environment set up,

117
00:07:27,344 --> 00:07:28,910
you're ready to code anywhere.

118
00:07:28,910 --> 00:07:32,540
A laptop might come in handy too.

119
00:07:32,540 --> 00:07:36,410
Remember to check out the notes,
where you'll find a lot more resources and

120
00:07:36,410 --> 00:07:37,920
advanced options.

121
00:07:37,920 --> 00:07:40,660
Until next time,
maybe I'll see you at the beach!