All posts tagged “Apache”

Symbolic Link and Apache Alias for Web Development

These days, there are many web developers working remotely. We can now find a plenty of collaboration tools and file-sharing applications such as Dropbox. However, one of the problems faced when is that web documents that you save will not be accessible through a localhost address from the browser, as they are outside the Apache Server DocumentRoot.

To solve this issue, you can change the DocumentRoot path to point to the Dropbox folder. But even though this can be done easily in MAMP with the GUI, you may need to change the path – back and forth – to access other websites that are saved in the initial path, which is highly inefficient.

An alternative option you can use is by creating a Symbolic Link (Symlink) and Apache Alias. These allow us to keep the original file in the Dropbox while still being able to access it through the localhost address in the browser – as if the actual folder is in Apache DocumentRoot. This is what we are going to look at in this post.

Symlink in OS X

In OS X as well as the other UNIX-based OS, like Ubuntu, a Symlink is created through Terminal with the following command.

 ln -s path/to/source path/destination/symlink 

For instance, you have your website files saved under the “Dropbox/Sites/project” directory. In Terminal type the following command to put a Symlink to that folder.

 ln -s Dropbox/Sites/project ~/Sites/project 

Certainly, you need to change the destination path. If you are using MAMP you can set the path to Applications/MAMP/htdocs/project, or /Library/WebServer/Documents if you are using the built-in Apache from OS X.

One thing that distinguishes Symlink from Shortcut or the Alias Folder is that a Symlink will be treated like the original file. Symlink can be accessed through Terminal and can also be added to any GUI application. In SublimeText, for instance, you can add the Symlink, instead of the original source as a Project. We would not be able for doing so with a Shortcut and an Alias folder.

Symlink in Windows

In Windows, a Symlink is denoted with the mklink command as follows:

 mklink /d "path\destination\symlink" "path\to\source" 

Launch Command Prompt, type this command below to create a Symlink in WAMPServer directory that points to the source in Dropbox.

 mklink /d "c:\wamp\www\project" "c:\Users\thoriq\project" 

Apache Alias in OS X

Aside from creating a Symlink folder, we can also use Apache Alias. Not to be confused with an Alias Folder, Apache Alias is a module in Apache for URL mapping that denotse one particular path with an Alias. That way you can also access folders through the localhost address – as if it is stored inside the Apache DocumentRoot.

Before we can create one, ensure that the mod_alias module is loaded. From Terminal, navigate to /etc/apache2, and open the httpd.conf file. Remove the hash sign at the beginning of the following line:

 LoadModule alias_module libexec/apache2/ 

At the same time, add this line at the very bottom of httpd.conf, as we will create a dedicated folder, named “alias” to save all Apache Aliases, so that the folder as well as the configuration files in it are picked up.

 Include /private/etc/apache2/alias/*.conf 

Type the following two lines in Terminal to create the “alias” folder and “app.conf”, where we will write the Alias configuration.

 sudo mkdir /etc/apache2/alias sudo touch /etc/apache/alias/app.conf 

Type this command below to open the app.conf in SublimeText.

 sudo subl /etc/apache/alias/app.conf 

Apache Alias is specified this way:

 Alias /alias-name "/source/of/original/folder" 

Below is one complete example. You can add these in app.conf which we have created above.

 Alias /app "/Users/thoriq/Dropbox/app" <Directory "/Users/thoriq/Dropbox/app"> Options Indexes FollowSymLinks MultiViews AllowOverride all Order allow,deny Allow from all </Directory> 

Save the file and restart Apache. And given the above specification, you should be able to access localhost/app address through the browser even though the actual folder is in the Dropbox folder.

Apache Alias in Windows

If you are running on Windows and using WmpServer, you can create Apache Alias with ease. First, click WampServer icon in the taskbar and navigate to “Apache/Alias directories/Add an alias” menu.

A new window similar to Windows Command Prompt will pop up. In it, set the name of the alias. If you name the alias as “app”, for instance, it will later be accessible within localhost/app address in the browser. Press Enter to confirm the alias name.

Then, specify the source of the alias. For instance, c:/Users/thoriq/Dropbox/Sites/app.

We are done.


In this post, we have shown you how to create Symbolic Link and Apache Alias, which would be useful to access and manage folders outside the Apache DocumentRoot.

Further Reference

Install PHP, Apache, and MySQL in Mac without MAMP – Part III

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.


We have completed the series that came in 3 installments. To sum up:

  1. In the first part, we have set and configured PHP and Apache.
  2. Then, we installed MySQL and manage it with Sequel Pro, in the second part.
  3. 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.

Setup PHP, Apache, and MySQL in Mac without MAMP – Part II

In the previous tutorial of this series, we have configured Apache and PHP and thus we are able to run .php files in our local server. As a follow up, we are now going to install and set MySQL up which we will be using for the database.

Let’s get started.

PHP Installer

Fortunately, MySQL comes in a form of .pkg installer that provides an easy step-by-step instruction. Download the package from this page, and make sure you grab the the DMG Archive version, which could be either Mac OS X 10.7 (x86, 64-bit), DMG Archive or Mac OS X 10.7 (x86, 32-bit), DMG Archive if you are running on 32 bit machine.

Launch the DMG package. And you should find three files as shown in the following screenshot.

  1. mysql-5.6.15-OS X10.7-x86_64.pkg, the main package to install MySQL in OS X.
  2. MySQL.prefPane, for adding MySQL panel in the System Preference.
  3. MySQLStartupItem.pkg, to enable MySQL to start at system startup or reboot.

Install all three. Then, after they are all completed, open System Preference, and navigate to the MySQL pane.

Turn MySQL Server on, and tick Automatically Start MySQL Server on Startup.

Connecting PHP to MySQL

At this point, MySQL is running. But, OS X searches a different directory to find MySQL socket, mysql.sock, which causes the Warning: mysql_connect(): [2002] No such file or directory error when trying to connect PHP to MySQL.

To solve this, we will create a symbolic link (symlink) in the directory where OS X expects to find the MySQL socket.

  1. Open Terminal.
  2. Navigate to the var folder with cd /var.
  3. Type mkdir mysql to create a new directory named mysql
  4. Create the symlink of mysql.sock using ln -s /tmp/mysql.sock /mysql/mysql.sock command.

Set MySQL Password

Then we need to create password for root user. In Unix terminology, the root user is the one who has all administrative access. Type the following command in Terminal to set the password:

 mysqladmin -u root password new_password 

Change the “new_password” with the password of your choice.

Managing MySQL

Now, we need to find a way to manage MySQL. The popular way for doing this would be using a web-based application such as phpMyAdmin. But, I’m not quite fancy with phpMyAdmin User Interface, and the installation process (to me) is rather complicated.

I found a good alternative, a lovable native OS X application named Sequel Pro. Grab the installer here, put it in the Application folder, and launch it.

In this tutorial, we are going to connect to MySQL via the socket file. So, let’s head over to the Socket tab, and enter the following information:

  1. Name: This could be anything. You can name the connection, for example, OS X MySQL.
  2. Username: Enter the MySQL username as root – since we have no other users at this point.
  3. Password: Enter the Password that you have set for the root user above.
  4. Database: We are not going to connect to a particular database. In fact, we haven’t created any databse, yet. So, leave this empty.
  5. Socket: Set the socket path to /var/mysql/mysql.sock.

Click the Connect button.

Once you are connected to the MySQL, you can create, modify, and delete databases as well as creating new MySQL users. In the following example, as shown below, I’ve created a database named wordpress for my WordPress site.


In this tutorial, we have done configuring MySQL. Now, you have a fully functioning local server for developing PHP-based website in Mac. In the next part and last part, we are going to show you how to custmize the localhost. So, stay tuned.

Install PHP, Apache, And MySQL In Mac Without MAMP

Using MAMP is probably the easiest way to have PHP, Apache, and MySQL up and running in OS X. You simply put the application in the Application folder, launch the app, and hit the Start Server button and off you go.

But, OS X has actually been shipped with PHP, and Apache built in so why not use them to develop and run websites locally instead of using third party apps like MAMP or the likes? That way, we will occupy less space for apps, and we will also learn a few things in the process of getting them to work.

In this post, we will show you how to configure PHP, Apache, and MySQL in OS X without MAMP.

Step 1: Enable Sublime Text Command Line

First, since I’m using Sublime Text, I would like to enable the Sublime Text command line so I will be able to open files and folders through Terminal, and edit them within Sublime Text. Here’s how to do this.

1. Create a symlink of Sublime Text subl binary in the ~/bin folder with this command:

 ln -s "/Applications/Sublime" ~/bin/subl 

2. Then run subl --help command.

It will return the Usage and the list of Arguments that can be used with subl, as you can see from the screenshot below. In addition, this also ensures that subl is registered and working.

Step 2: Configure PHP

As mentioned, PHP has already been installed in OS X. You can check the PHP version that is installed in Terminal with the following command command:

 php -v 

Enable PHP

The PHP module, however, is disabled by default. We have to enable it in order to use and execute PHP scripts in Apache server:

1. Type the following command to open httpd.conf in Sublime Text.

 sudo subl /etc/apache2/httpd.conf 

2. Uncomment the following line by removing the hash sign #.

 LoadModule php5_module libexec/apache2/ 

See the following screenshot for more detail:

Enable PHP.ini

PHP configurations such as Increasing Memory Limit, File Upload Allowance, and Set the Maximum Upload File Size are done through php.ini file, which also is disabled by default. Let’s enable it.

Go to Terminal and run the following command line. This command copies the php.ini.default and rename it to php.ini.

 sudo cp /private/etc/php.ini.default /private/etc/php.ini 

Step 3: Configure Apache

OS X is also shipped with Apache. You can type the following command in Terminal to start Apache server.

 sudo apachectl start 

To stop Apache type:

 sudo apachectl stop 

Access localhost in the Browser to verify that the Apache server is working. If it does, it should show “It Works!”.

Change DocumentRoot

The default Apache DocumentRoot, where we should put our website documents, is located at /Library/WebServer/Documents. But all my existing web projects reside in /Users/username/Sites. Let’s change the DocumentRoot to that folder:

1. Run the following command lines consecutively to create user-level configuration file. Change the username with your OS X shortname account.

 cd /etc/apache2/users/ touch username.conf 

2. Open this file in Sublime Text

 sudo subl username.conf 

3. Then, add the following lines in.

 DocumentRoot "/Users/username/Sites" <Directory "/Users/username/Sites"> Options All AllowOverride All Order allow,deny Allow from all </Directory> 

Change Apache Port Number

Apache, by default, run on port 80. But, since I was using MAMP that uses port 8888, I’m making Apache point to this port number instead. That way, I will not need to change the site urls for all my exisiting websites.

1. Open httpd.conf and comment-out the following line by adding a hash sign, so it won’t listen to two ports at the same time.

 #Listen 80 

2. Then open username.conf and add:

 Listen 8888 ServerName localhost:8888 

3. After all the above configurations, save httpd.conf and username.conf, and type the command below to restart Apache:

 sudo apachectl restart 

4. Lastly, access localhost:8888 in the browser. It will show all the directories that are stored within ~/Sites folder, as shown below.

Run Apache at Startup

You might not want to launch Terminal and type sudo apachectl start repeatedly to start Apache server so let’s make it run automatically at startup. To do this, run the following command:

 sudo launchctl load -w /System/Library/LaunchDaemons/org.apache.httpd.plist 

Wrap Up

In this tutorial, we have configured PHP and Apache. Technically, we can run a PHP website already. You can test it out by creating a PHP file named phpinfo.php in ~/Sites and put this code phpinfo() in. Launch the file in the browser: localhost/phpinfo.php. It will show information of the current PHP configuration.

In the next part of this series, we will show you how to install MySQL and make it all work together. So, stay tuned.

The Impact of Apache SSL on Business Success

As a generation progressing through life with Internet use coming as second nature, it’s hard to imagine what life was like without it. Since 1995, the Internet has changed livesRead More

You can visit the website for the full article and other interesting articles.

Blogger’s Path

Microsoft’s default Do Not Track in IE10 gets shot down by Apache co-founder

internet explorer 10 dnt stock 1020

Microsoft has been warned that its decision to enable Do Not Track (DNT) by default in Internet Explorer 10 for Windows 8 violates the specification of the standard, and that it faces the risk of websites simply ignoring its setting. Now, the warnings are coming to fruition, with a recent commit to the code base for the Apache webserver that deals with the IE10 setting by simply overwriting it, reports Wired. While the patch has not yet been added to a stable version of Apache, the open source server software is behind some 60 percent of sites on the web.

During the Windows 8 installation process, users are presented with a choice between default system settings (called Express) and a more customized setup. At issue is whether showing…

Continue reading…

The Verge – All Posts