Tips and tricks on developing web sites

Web Server using XAMPP

The easiest way to play around with designing a website is to create a virtual development environment. It lets you simulate what the live website will look like on the Internet. I like to create a Windows 10 Virtual Machine and put AMP (Apache, MySQL and PHP) on it. If you are just playing around and want to get started quickly, installing XAMPP is very quick and easy. If you want to match your production Host Provider, you should Manually install AMP.

Web Server Preinstall Decisions

  1. Choose a Domain Name and Host provider
  2. Decide whether to have a secure server SSL/HTTPS or non-secure HTTP
  3. Create a Windows 10 Web Server Virtual Machine (VM)
  4. The pitfalls of Browser Caching

Installing XAMPP

Installing XAMP is very simple. I suggest installing it to C:\xampp or whatever drive letter you are using. . I selected the xampp-windows-x64-7.3.27-1-VC15-installer.exe for this exercise. Make sure when you install it that you right click on the file and run it as Administrator.

Xampp has a lot of features! For this example, I only want Apache, MySQL, PHP, Perl (optional) and phpMyAdmin. I suggest installing it in C:\xampp or whatever drive letter you are using. I prefer to manually install WordPress rather than using the free installers option. Xampp will unpack files and give you an operational WAMP server after a couple of minutes. Start the Apache and MySQL servers and Allow access through the firewall. I really like the control panel for XAMPP, it is very easy to use and lets you stop and start the servers easily.

To test that it worked, open a browser and type in localhost in the address bar. You will see that Apache, MariaDB and PHP have been installed. Setting up a web server doesn’t get much easier than that!

Remember that when you launch XAMPP, you must do so as Administrator. If you don’t do that, when you Quit it you will get this nasty message:

You can either right-click and Run as Administrator or set a compatibility rule to always start it as Administrator. Right-click on the XAMPP icon to set the Compatibility mode.

At this point you should install the text editor you prefer on the VM and on your PC. I find Notepad++ to be lightweight and awesome. You should probably install Google Chrome (or use the Chrome-based Edge version) and Firefox too. Firefox is a good idea because it doesn’t use the Chrome HTML rendering engine. At some point, you will need to install an FTP client program like WinSCP. These are the only additional programs I run on my VM Web Server

In XAMPP control panel you should also click on the Config button and set Notepad++ as your default text editor and start Apache and MySQL automatically. Note the FileZilla listed in XAMPP is a FTP server, not a FTP client. That should be it for configuring XAMPP.

Configuring Apache and PHP in XAMPP

XAMPP stores Apache configuration in two files located at C:\xampp\apache\conf\httpd.conf and C:\xampp\apache\conf\httpd-vhosts.conf. Use your text editor to edit those (and set the default editor as notepad++ for .conf extensions). Lines starting with a # sign are comments. Remember that Linux uses /‘s for folders while Windows use \‘s. Apache wants you to use /‘s regardless of what operating system you have.

You may want to adjust some settings for PHP, but XAMPP comes with most of that already setup for you. PHP is configured in C:\xampp\php\php.ini. There is a file called php.ini-development also located there that is intended for development environments. You can replace php.ini with it to get all the message reporting that it offers.

httpd-vhosts.conf for Non-SSL Sites

Apache is wonderful in that it can host numerous sites at the same time. The logic for those sites is stored in C:\xampp\apache\conf\httpd-vhosts.conf. To point Apache at example.com, add this configuration:

<VirtualHost *:80>
    ServerAdmin info@example.com
    DocumentRoot "C:/xampp/htdocs/public_html"
    ServerName example.com
    ServerAlias www.example.com
    ErrorLog "logs/example.com-error.log"
    CustomLog "logs/example.com-access.log" common
</VirtualHost>

If you are using an add-on domain, it would be:

<VirtualHost *:80>
    ServerAdmin info@example.com
    DocumentRoot "C:/xampp/htdocs/public_html"
    ServerName example.com
    ServerAlias www.example.com
    ErrorLog "logs/example.com-error.log"
    CustomLog "logs/example.com-access.log" common
</VirtualHost>

Be sure to change webmaster@example.com to whatever email you will be using. I usually set up a catch-all email as info@example.com. The default webmaster seems kind of dated to me.

In the XAMPP Control Panel stop and start the Apache module. Go to your browser and type in example.com. If you did everything correctly you will be into the WordPress setup.

httpd-vhosts.conf for SSL Sites

Apache is wonderful in that it can host numerous sites at the same time. The logic for those sites is stored in C:\xampp\apache\conf\httpd-vhosts.conf. To point Apache at https://example.com, add this configuration. Remember that you must have made the SLL certificates first. XAMPP has conveniently done this for you already. Be sure to change the first line to port 443 instead of 80.

<VirtualHost *:443>
    ServerAdmin info@example.com
    DocumentRoot "C:/xampp/htdocs/public_html"
    ServerName example.com
    ServerAlias www.example.com
    ErrorLog "logs/example.com-error.log"
    CustomLog "logs/example.com-access.log" common
    SSLEngine on
    SSLCertificateFile "conf/ssl.crt/server.crt"
    SSLCertificateKeyFile "conf/ssl.key/server.key"
</VirtualHost>

If you are using an add-on domain, it would be:

<VirtualHost *:443>
    ServerAdmin info@example.com
    DocumentRoot "C:/xampp/htdocs/public_html"
    ServerName example.com
    ServerAlias www.example.com
    ErrorLog "logs/example.com-error.log"
    CustomLog "logs/example.com-access.log" common
    SSLEngine on
    SSLCertificateFile "conf/ssl.crt/server.crt"
    SSLCertificateKeyFile "conf/ssl.key/server.key"
</VirtualHost>

Your browser will complain about an Invalid certificate authority when you go to https://example.com in your browser. That’s correct, it is an invalid authority. You can still bypass that warning though, and Proceed to the site.

Installing WordPress

Installing cURL

WordPress uses cURL, and that requires the file cacert.pem. You can download it at https://curl.se/docs/caextract.html. Put the file in your C:\PHP\extras\ssl folder. We also need to enable some PHP modules so enable those too while editing the file. Edit the php.ini (C:\PHP\php.ini) as follows:

curl.cainfo = "C:\PHP\extras\ssl\cacert.pem" (modify line and uncomment ;)
extension=php_curl.dll (add line)

Installing ImageMagick

WordPress also uses the Imagick library. This is definitely an optional module. We want to try and match our Host Server so let’s go ahead and install it. If you aren’t doing much image processing, I wouldn’t get too excited about not installing it. Go to the ImageMagick page and download the recommended version (we have a 64bit Server). In this example it is ImageMagick-7.0.11-10-Q16-HDRI-x64-dll.exe. Install the program using the defaults it recommends. Now you need to get PHP talking to ImageMagick. Download the latest version from PECL. Not that it is the DLL option you want to click on not the tgz option. Scroll down and you will see the PHP version you need. In this example we have PHP 7.3 and Apache, so we will download the threadsafe x64 version called php_imagick-3.4.4-7.3-ts-vc15-x64.zip. Extract the archive and copy the file php_imagick.dll to C:\PHP\ext. You can delete the uncompressed folder we only needed this DLL. Edit your php.ini file adding this line to the extensions section:

extension=php_imagick.dll

Another download is required located at https://windows.php.net/downloads/pecl/deps/. Pick the file that matches the VC version of the PHP version you installed. In this example it is ImageMagick-7.0.7-11-vc15-x64.zip because we installed PHP php-7.3.28-Win32-VC15-x64.zip. Extract the file and then navigate to the bin folder (ImageMagick-7.0.7-11-vc15-x64\bin). Copy all the dll files except for ImageMagickObject.dll into the C:\Apache24\bin folder. Restart the Apache server using Apache Service Monitor.

Additional Extensions

WordPress also wants these extensions enabled in your PHP.ini file (C:\PHP\php.ini)

extension=exif (remove ;)
extension=fileinfo (remove ;)
extension=openssl (remove ;)
extension=gd2 (remove ;)

Database prefix

Unlike your Web Development Server, your Hosting Service provider likely hosts hundreds of websites, and they will all have access to SQL databases. To keep track of who owns what database, and avoid duplicates, they will probably assign a database prefix for your domain. You can ask them what your prefix is, or you can go to your host provider’s cPanel->DATABASES->MySQL Database Wizard. In there it will show you the prefix name you have been assigned. Make note of that, as all of your Development Server databases and usernames will need to start with that prefix_ no matter what domain you are working on. For this tutorial, we are going to use examp_ as the prefix your Host provider has assigned.

Creating a WordPress Database

Start phpMyAdmin by typing localhost/phpmyadmin in your development server browser.

Set your collation to utfmb4_unicode_ci if it isn’t set to that already. Click on the Databases tab. Under Create database type in your prefix_domain. If you have a really long domain name use an abbreviated version that you will recognize. In this example, we are entering examp_example. Don’t add .com. Press Go and just like that you have an empty database.

Click on the House Icon under the phpMyAdmin title. A new series of tabs will appear. Click on User accounts, then New->Add user account. You will assign a top-level account here that will have full access to the database and be used by WordPress engine. You can be very cryptic in the name, or use something logical like examp_exampleadmin. Remember that the username needs to start with your account’s assigned prefix. Make sure that your password is cryptic! Use a combination of symbols, numbers and letters or use the Generate button. Make sure to record this password and username. Use the utfmb4_unicode_ci collation. Also change the Host name: to local and click the Global privileges option to Check all. Scroll down to the bottom and click on the Go button. You will now have assigned that user account as the full administrator of your database. You can verify that by clicking on your database to the left and looking at the Privileges tab. That’s all you need to do for setting up the database, WordPress will take it from here.

Installing WordPress Files

Go to WordPress.org and download the latest version of WordPress. It is worth noting that WordPress.org and WordPress.com are not the same things. Since we are using Windows we want a zipped archive rather than .tar.gz. Right-click on the WordPress download and choose to Extract all and uncompress the folder to htdocs. After it is uncompressed rename the wordpress folder it created to public_html if this is your primary site or if and add-on it would be example.com.

WordPress Initial Setup

Setting up WordPress is pretty straightforward. Make sure that you have your SQL database name, username and password handy. Make sure your Apache and MySQL modules are running and type in your domain name (example.com) in your browser. Select the language you want to use, and Let’s go! Then enter the values you used to create the database in phpMyAdmin. Leave the Table Prefix as wp_. Even if you have several sites, they each have their own table, so they can all use the same wp_ prefix.

If all went well you will connect to the database and move onto some general configuration. The Username will be the name you log into WordPress as administrator. Don’t use the same name and password you used for the database. This password should still be complex, but also something you can remember.

And just like that, you have a Development WordPress Site that will mimic a production site. Remember that to log into WordPress you will use example.com/wp-admin as the address in your browser. You will want to setup some basic settings right away. Click on Settings->General and change your Site Title and tagline. You may want to change your Site Language if you are not in the United States. It is a good idea to set your UTC to your time Zone, or the time zone where you expect most of your viewers to be in.

Under Writing you may want to setup Post via email if you have an active blog. Heed the warning about using a secret email account! I don’t use this option.

You need to decide whether you will let people comment on your posts and pages. This might seem like a good idea, but it can become a huge headache as people try and spam your site with inappropriate content. This is found under Settings->Discussion. Make sure you check the box Before a comment appears -> Comment must be manually approved. If you don’t I guarantee you will get spammed.

I don’t like people Commenting on my pages. My websites aren’t forums. If someone has a real issue with what I have said they can email me. To disable comments uncheck Default post settings -> Allow people to submit comments on new posts. Just in case a page comment post gets turned on by accident, I also check: Before a comment appears -> Comment must be manually approved and Before a comment appears -> Comment author must have a previously approved comment and Other comment settings -> Users must be registered and logged in to comment.

wp-config.php Settings

Once you have WordPress up and running, you need to change a few settings in your development environment. Locate your website folder. In this case, we used htdocs\public_html (or htdocs\example.com).

Open wp-config.php, scroll down to the wp-debug line and change it from false to true. This allows PHP errors and warnings to be displayed as you work on the site.

define( 'WP_DEBUG', false ); becomes 
define( 'WP_DEBUG', true );

If you have downloaded your site to work on it offline, you may see a cache option in the wp-config.php file. You want to disable caching so change it to false. If it isn’t in there do nothing.

define( 'WP_CACHE', true); becomes 
define( 'WP_CACHE', false );

VM Web Hosting Summary

That’s about it for setting up the Web Server. Now you have to learn how to use WordPress which is another topic altogether. Get the site configured the way you want. Make sure you select a theme, set up menus and get some basic content in there before you upload it to your production Web Host provider. You have made a development server, so you are likely going to make a Child Theme or create one from scratch. You will edit your theme’s CSS to change the way your site looks. You will make some Shortcodes to automate your site. Automation is awesome and can save you hours of time. This is where everything starts to get really exciting.