Let's be friends

Setting up MAMP

Last updated: January 1, 2023

Remember that time where you made your first HTML page with just a few headings and paragraph elements?

Then remember when you did that first file-system challenge?

And – now you’ve got all that fun layout stuff – and CSS files and WOW! So cool. But, it’s time to level up. We’re going to need lots of pages, and a bit more magic.

The goals

  1. Get MAMP installed and running

    You already have Apache on your computer… but – you don’t know how to use it! MAMP is a helpful user interface that makes it easy to configure the things.

  2. Try out PHP partials

    We’ve been talking about “modules” and “components” – so, now you can break up your HTML into PHP “partials.”

What is MAMP? Why do I need more things?

You’re already using Apache (the A in MAMP). So, you aren’t really adding things. It does add a little overhead, but the bonuses far outweigh that. In the end, you can be the judge!

  1. Mac

    Mac just means that it works on macOS (We think). It’s a “Mac!”

    (the Linux version is called LAMP and the Windows version is called WAMP)

  2. Apache

    Apache HTTP web server. What is a webserver? Well, it’s a combination of hardware and software. When you type a URL into your browser or click on a link – that will kick off an HTTP request to somewhere. It will look at the domain name… and that domain name will point to some location of a computer and then that computer will have to decide what to do. Should it give you the file you requested? Is it safe? Is it allowed? There are many considerations, but that’s the basics. Apache is the software that works out the exchange.

  3. MySQL

    MySQL (“My S Q L”) is a database management system. That means it stores structured data. It stores text and numbers and whatever, but it also has to allow you to retrieve it. SQL stands for Structured Query Language. A “query” isn’t much more than a request. “Excuse me, may I have another?” It’s a very widely used database system – but it doesn’t really matter for us yet.

  4. PHP

    Well, technically – the P can be for Perl or Python too.

    In our case, it’s PHP. What is PHP? It’s a server-side scripting language thingy. What is a script? It’s a list of directions to help automate tasks – so the computer can run them. What is a server? It’s a computer… but not the computer that requests the info – the computer you’re requesting it from.

    So, when you say – HEY! can I have this thing? Then the remote computer runs some tasks and prepares a document to send back to you. PHP is the type of file that you’d write to author those scripts. It’s mostly used to generate HTML.

What we're interested in today

When you request a file from the server (with this style of server setup), it will look for a PHP file. If there isn’t one, it will look for an HTML file. If there’s a PHP file, it will read over it and follow any directions that are written in there. The usual end result is to produce a complete HTML page.

In our case, we use “partial” .php files to break the HTML file into manageable pieces. Then, we can let the server stitch them together on the fly when the URL is requested.

So, now – there would be one master index.php file – that includes other smaller parts of the project – all into a final complete HTML document.

How do you feel about that?

Partials

Note that when you save the file as .php, the syntax highlighting changes to account for the new PHP syntax possibilities. (noted in the bottom right of Sublime)

But - is everything going to be the same?

No.

Each time we add something that helps us – it’s going to add to the larger set of considerations.

You may want to search around for some answers.

Your’re probably used to right clicking and choosing “show in browser” – but that’s not going to work with .php files. Now, you need to view those files on the local server.

Tell MAMP what you want it to consider your servers’s root folder, turn MAMP on – and then navigate to localhost:8888 to see your files “Served” up.

You might not have PHP?

All Macs used to come with it. But not anymore! They don’t ship with PHP, Ruby, or Python for a bunch of reasons we won’t talk about there. MAMP will install a version of it (we think). But you might have to install PHP (the ideal way) with Homebrew. Let us know if you run into this type of situation.

Exercises

  1. Get MAMP (regular) downloaded and running

    Once you get it downloaded, we suggest you pick a master folder – and just set that whole thing as your web server as we’ve shown in the video. This way – you can sync that whole folder up to the class server.

    (remember, it’s already got all the same server stuff up there!)
    40 minutes suggested

  2. Try out PHP partials

    Either create a new project or take one you already have and try out the PHP partials. Separate out the header and footer and anything else you can think of / and see if it works.

    Unfortunately, the PHP manual (although very helpful) – isn’t very beginner-friendly. It seems to assume anyone who reads it – already knows a lot about programming, so – just take it easy – and go with the flow for now.
    40 minutes suggested

Checklist

  1. You downloaded MAMP.

  2. You pointed it to whatever folder you want to act as your server.

  3. You turned it on and it’s all working.

  4. You understand how the “include” function works.

  5. You practiced using it in as many ways as you could think up.

  6. If you had any more time, you worked on any past concepts you need practice with.

Related Resources

There are a bunch of side exercises and resources. Here are some of them. But focus on what matters most. If you don't know that that is, ask us.

PHP

PHP include

<!-- header.php -->
<header>
	<nav>
  		(menu)
  	</nav>
</header>


<!-- footer.php -->
<footer>Fin</footer>


<!-- index.php -->
<?php include('header.php'); ?>

<main>
	<h1>Welcome</h1>
</main>

<?php include('footer.php'); ?>

For our purposes (right now), PHP’s goal is to generate HTML. The include expression includes and evaluates the specified file. It’s like you are stitching many small HTML files together.

This way, you can manage your header or main menu in one place – instead of needing to update it on every individual page.
Let's be friends