I have been using MAMP at my place of work for PHP and WordPress development, after a few weeks the “My Website” page really broke me, so I decided to do something about it and created my own custom MAMP / My Website dashboard.
Here is what my new dashboard looks like, if you want a custom MAMP dashboard please check it out on GitHub – Awesome MAMP Dashboard.
How Does It Work With MAMP
You really do not have to do anything different, everytime you create a new folder in the htdocs directory the magic of PHP will show your new project folder name on the dashboard. Yep that is it.
How To Use The Dashboard In MAMP
There are instructions over on the GitHub page, but in short all you need to do is place one file in your MAMP htdocs folder and you are good to go.
A Few Notes:
Currently the dashboard does utilise the Bootstrap framework and references the CDN for styles so if you are not online you will find display issues. In the future I will look at making it not require an external resource.
In the menu there are a few handy links for the PHP and or WordPress developer so you can quickly get to some docs that you are probably using pretty often.
I did put a link in the footer to give myself credit, this is not a link building exercise because this page will not live online. I put it in there so people that use it know who built it, keep it there, delete it, I don’t mind, what ever floats your boat.
Want To See The Code? Here It Is!
<?php
$dir_path = getcwd();
$dirs = array_diff( scandir( $dir_path ), array('..', '.'));
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Awesome MAMP Dashboard</title>
</head>
<body>
<header>
<div class="navbar bg-dark shadow-sm py-3">
<div class="container d-flex justify-content-between">
<h5 class="mb-0 text-white font-weight-normal">Awesome MAMP Dashboard</h5>
<nav>
<a class="p-2 text-white" href="https://developer.wordpress.org/">WordPress Developer Resources</a>
<a class="p-2 text-white" href="http://php.net/">PHP Docs</a>
<a class="p-2 text-white" href="https://jquery.com/">jQuery</a>
<a class="p-2 text-white" href="https://reactjs.org/">React</a>
</nav>
</div>
</div>
</header>
<main role="main">
<div class="container">
<div class="row">
<div class="col-md-12 px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
<h2 class="display-4">Awesome MAMP Dashboard</h2>
<p class="lead">Here is all the directories from the htdoc folder that you are working. Keep the awesomeness going!</p>
</div>
</div>
</div>
<div class="py-5 border-top bg-light">
<div class="container">
<div class="row"><?php
foreach ( $dirs as $dir ) :
if ( is_dir( $dir ) ) :
$dir_name = str_replace( '-', ' ', $dir ); ?>
<div class="col-sm-12 col-md-4 p-3 text-center" style="min-height:200px;">
<a class="text-white" href="<?php echo $dir; ?>">
<div class="card h-100 px-2 bg-dark justify-content-center">
<h4 class="font-weight-normal text-uppercase"><?php echo $dir_name; ?></h4>
</div>
</a>
</div> <?php
endif;
endforeach; ?>
</div>
</div>
</div>
</main>
<footer class="border-top py-3">
<div class="container">
<div class="row">
<div class="col-sm-12 text-center">
<p>Hi, I am <a target="_blank" title="Go to bradley-davis.com" href="https://bradley-davis.com/">Bradley Davis</a> and sometimes I have to use MAMP for WordPress and PHP development so I decided to build a better dashboard.</p>
</div>
</div>
</div>
</footer>
</body>
</html>