This is the last part of our series: Install PHP, Apache, and MySQL in Mac without MAMP. And if you have been following the series (see Part 1 and Part 2 here) and have created projects in ~/Sites, then access localhost:8888 in the Browser, you will find that they are displayed as shown in the following screenshot.
I’m a bit picky when it comes to user interface of Applications, and the way how Apache server presents the folders intrigues me to customize it, make it look nicer. And this is what we are going to do in this tutorial.
If you are ready, let’s just get started.
Getting Started
First let’s create a new PHP file named index.php right under the ~/Sites folder. Then, create a folder named assets to store files like the images and CSS that we will be using along with the PHP file, index.php.
Open the index.php in code editor, and add a basic HTML5 structure as well as a few additional HTML5 tags, like so.
<!DOCTYPE html> <html> <head> <title>Sites</title> </head> <body> <div class="wrapper"> <header class="site-header"> <h1>Sites</h1> </header> <div class="site-body"> </div> </div> </body> </html>
We will put our codes under the div with the .site-body class.
Write PHP Functions
First, we need to retrieve several required information from the server, which are the HTTP Host, Current Directory where we put index.php folder, and the list of items that are stored in the current directory.
Here are all the codes, make sure that you wrap these with <?php ?>.
$server = "http://" . $_SERVER['HTTP_HOST']; $cur_dir = getcwd(); $folders = scandir($cur_dir);
You can view the values in those PHP variables with var_dump or print_f. For example:
var_dump($folders);
This will output the list of folders and files in that we have retrieved with PHP scandir() function in a form of array. In my case, it looks like this:
array(12) {
[0]=> string(1) "."
[1]=> string(2) ".."
[2]=> string(9) ".DS_Store"
[3]=> string(6) "assets"
[4]=> string(4) "demo"
[5]=> string(3) "dev"
[6]=> string(10) "frameworks"
[7]=> string(4) "hkdc"
[8]=> string(4) "html"
[9]=> string(9) "index.php"
[10]=> string(11) "phpinfo.php"
[11]=> string(12) "repositories"
}
Then, we put these items in HTML list structure using PHP loop, foreach.
echo '<ol>';
foreach ($folders as $folder) {
if ($folder === '.' or $folder === '..' or $folder === 'assets') continue;
if (is_dir($cur_dir . '/' . $folder)) {
echo '<li class="site-folder">'; // open list
echo '<a class="folder-icon" href=' . $server . '/' . $folder . '> ' . $folder . ' </a>'; // folder icon
echo '<span class="folder-name"><a href=' . $server . '/' . $folder . '>' . $folder . '</a></span>'; // folder name and link
echo '</li>'; // close list
}
}
echo '</ol>';
Here are a few things that you might want to take note from the above PHP scripts:
1. if ($folder === '.' or $folder === '..' or $folder === 'assets') continue;. We use this line to exclude the parents directory, which are presented with dots in Apache server. It also excludes the assets that we use to store CSS and images for customizing localhost appearance.
For reference, you can head over to the PHP docs about the continue function.
2. The HTML list structure is encapsulated with if (is_dir($cur_dir . '/' . $folder)) conditional function, that way it will only output Folders.
Open localhost:8888 in the Browser, and we will get the following result.
Writing the CSS
Before we start writing CSS, let’s download Mac tiny folder icon and Mac OS X folder. Open the files in Photoshop, save the icons in PNG format, and put them inside the /assets/img directory.
Then, create a new stylesheet file in the /assets/css directory.
Also, include the link in the index.php file.
<link rel="stylesheet" href="assets/css/style.css">
Basic Styles
First let’s put the basic styles for the HTML elements. These include setting the box sizing to border-box, so we can easily decide and measure the size of the element. We also set the font-family, and display the HTML list inline.
*, *:before, *:after {
box-sizing: border-box;
}
html {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
text-align: center;
}
body {
margin: 0;
padding: 0;
}
ol, ul {
padding: 0;
margin: 0;
}
ol li, ul li {
display: inline-block;
margin: 0 20px;
}
ol a, ul a {
text-decoration: none;
color: #000;
}
Please note that we omit the browser vendor prefix to make the codes shorter. But we have included it in the source code that you can download at the end of this tutorial.
Page Header
We will mimic the OS X color scheme to make the appearance fit well. So, for the page header, we will give it a gradient with a gray color scheme and put the tiny icon aside.
.site-header {
height: 30px;
width: 100%;
background: linear-gradient(to bottom, #eeeeee 0%, #cccccc 100%);
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.6);
line-height: 2.5;
margin-bottom: 50px;
}
.site-header h1 {
color: #000;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
font-size: 0.8em;
font-weight: 400;
margin: 0;
}
.site-header h1:before {
content: url('../img/folder-sm.png');
display: inline-block;
width: 16px;
height: 16px;
margin-right: 7px;
position: relative;
top: 2px;
}
The Folders
Next, we display the OS X folder on the list items that we have generated with PHP, previously. The following CSS codes also include the styles when we hover the folder.
.site-folder {
position: relative;
width: 145px;
height: 132px;
}
.site-folder .folder-icon {
display: block;
height: 100%;
width: 100%;
background-image: url('../img/folder-128.png');
background-repeat: no-repeat;
background-position: center top;
border-radius: 5px;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
.site-folder .folder-icon:hover {
background-color: rgba(0, 0, 0, 0.1);
}
.site-folder .folder-icon:hover + .folder-name {
background-color: #2b5dcd;
}
.site-folder .folder-icon:hover + .folder-name a {
color: #fff;
}
.folder-name {
border-radius: 24px;
font-weight: 400;
font-size: 0.8em;
text-transform: lowercase;
display: inline-block;
margin-top: 10px;
padding: 5px 12px;
}
We are done. The screenshot below shows the final result when we view localhost:8888 in the browser.
Conclusion
We have completed the series that came in 3 installments. To sum up:
- In the first part, we have set and configured PHP and Apache.
- Then, we installed MySQL and manage it with Sequel Pro, in the second part.
- In this tutorial, which is the last part, we customized the folder presentation in localhost.
We hope that you find these tutorials useful. If you have any question regarding to the topic discussed, feel free to put your question in the comment box below.
No comments:
Post a Comment