Tips and tricks on developing web sites

Web Server Manual Install

If you want to match the configuration of your production Host Web Server server, you will need to install Apache, MySQL and PHP individually. It is a good idea to match your development server to the production server rather than use an AMP bundle. Some decisions you need to make and software to install in advance are:

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

Web Host Provider Configuration

If you want to match your production server exactly, you will need to install Apache, MySQL and PHP individually. The first thing you need to do is see what your Hosting Provider is running. Log into your host provider and go to CPanel. On the right column, you will see General Information. At the bottom of the column, you will see Server Information. Click on that to see exactly what your server is running. Your server will most likely be using Linux but you can use Windows Virtual Machine as the OS and it won’t make any difference. it is the specific versions of Apache, MySQL and PHP that we are trying to duplicate, not the Operating System. It will look something like this:

Your phpMyAdmin version can be located on your Web Host by starting cPanel->phpMyAdmin and looking in the lower right corner. For this example, we need version 4.9.5.

For this example, we need
Apache 2.4.46
PHP 7.3.27
MairaDB 10.3.28-MariaDB-log-cll-lve
phpMyAdmin 4.9.5.

Installing Apache Server

If you go to the Apache Lounge website you can locate pre-compiled versions of Apache for Windows (or you can try to compile it yourself but that’s another topic altogether). We are looking for a 64bit Windows version and they have version 2.4.46 conveniently located there for download. In this case, it was named httpd-2.4.46-win64-VS16.zip. Right-click on it and extract the files to your C:\ directory. I suggest reviewing the readme.txt file and moving the Apache24 folder to C:\Apache24.

In your text editor, open C:\Apache\conf\httpd.conf and change these lines:

#ServerName www.example.com:80 change to (uncomment)
ServerName 127.0.0.1
#Include conf/extra/httpd-vhosts.conf change to (uncomment)
Include conf/extra/httpd-vhosts.conf
<IfModule dir_module>
    DirectoryIndex index.html change to
</IfModule>
<IfModule dir_module>
    DirectoryIndex index.php index.html
</IfModule> change to

Apache is started with http.exe executable in C:\apache24\bin. If you run that you may get a VCRuntime error. That just means Apache needs Visual C to run. You can download and install that from Microsoft here.

You will also get this annoying error even if you run httpd.exe as Administrator. To disable that go to the Windows Start Menu and type gpedit. Go to Computer Configuration->Administrative Templates->Windows Components->File Explorer. Click on Configure Windows Defender SmartScreen. Set it to disabled and save the change.

The first time you successfully run Apache (http.exe) you will get a firewall warning. Enable the Firewall for private networks. You can now go to your browser and type in localhost as the address. You should get a blank screen saying It Works! Awesome, Apache has been installed!

At this point, you may want to install Apache a Windows Service by entering these command lines at an Administrator Command prompt (Start Menu, type cmd, right-click saying run as Administrator). Once Apache is running smoothly you will want to control Apache using ApacheMonitor located in C:\Apache\bin\ApacheMonitor.exe. The advantage of running apache from a command prompt using httpd.exe is that you will get to see error messages clearly.

cd\apache24
bin\httpd -k install

We should mimic your Host provider at this point and make a folder in C:\Apache24\htdocs\ called public_html if this is your primary site. If it is an add-on domain we would make a folder called example.com. In there, create a text file named index.php and add this info:

<html><body>My new example.com site works!!!</body></html>

Edit C:\Apache24\conf\extra\httpd-vhosts.conf. Comment out any existing virtual hosts with #‘s (every line in the virtual host sections) and add:

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

Start C:\Apache\bin\httpd.exe server and type localhost in your browser. You should get a line saying My new example.com site works!!! If you aren’t installing an HTTPS/SSL server, you can stop here and move onto PHP and MySQL.

Setting up Apache for SSL/HTTPS

There are a lot of ways to do this, and it can be quite frustrating depending on what path you decide to take. This method works for me. Open C:\Apache24\conf\httpd.conf in your text editor. Change the following lines:

#LoadModule ssl_module modules/mod_ssl.so   Remove Comment
LoadModule ssl_module modules/mod_ssl.so
#Include conf/extra/httpd-ssl.conf  Remove Comment
Include conf/extra/httpd-ssl.conf
#LoadModule socache_shmcb_module modules/mod_socache_shmcb.so  Remove Comment
LoadModule socache_shmcb_module modules/mod_socache_shmcb.so

Using your text editor make a batch file in C:\Apache24 called makecert.bat. Edit the file adding the line:

bin\openssl req -x509 -sha256 -newkey rsa:2048 -keyout conf\server.key -out conf\server.crt -days 999 -nodes -subj "/CN=www.example.com" -addext "subjectAltName=DNS:www.example.com" -config example.cnf

Make another file called example.cnf and add the following. You can change the C, ST, L, O, OU values to anything you want- they aren’t important.

[req]
distinguished_name = req_distinguished_name
x509_extensions = v3_req
prompt = no
[req_distinguished_name]
C = US
ST = STATE
L = ANYWHERE
O = MYCOMPANY
OU = IT
CN = www.example.com
[v3_req]
keyUsage = critical, digitalSignature, keyAgreement
extendedKeyUsage = serverAuth
subjectAltName = @alt_names
[alt_names]
DNS.1 = www.example.com
DNS.2 = example.com
DNS.3 = example.net

Go to a command prompt (Windows key+R type CMD) and move to the Apache directory cd\apache24\. Type makecert.bat and enter. You will get a message saying a new private key has been generated. Look in C:\Apache24\conf and you should see files called server.key and server.crt

Edit C:\xampp\apache\conf\extra\httpd-vhosts.conf and add this section to the end of the file. You would replace public_html with your addon-domain name if you were adding one (it would be folder example.com in this case)

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

Start the Apache Server (run c:\Apache24\bin\httpd.exe) or stop and start it if you run as a service. Apache Monitor is handy for doing this too. In the browser, enter https://example.com. You will get a nasty certificate warning, but that’s ok because your certificate doesn’t have a valid authority. Click on advanced and choose to continue at the bottom of the window.

Apache Service Monitor

Apache Service Monitor is a handy tool to make sure Apache Server is running properly. In this example it is located at C:\Apache24\bin\ApacheMonitor.exe. Run it and you will see a tiny icon open up in the lower right of the task bar.

Right-click on the monitor and select Open Apache Monitor to view the panel.

At this point, you have a functioning HTTPS or HTTP server. If you aren’t using PHP or MySQL, you are good to go. You should rename your index.php to index.html if you aren’t using PHP.

Installing PHP

You should install the same PHP version that your Hosting Server has. In this example, the server uses PHP 7.3.27. You can download that at Downloads tab at php.net . You are using Apache, so you will need the threadsafe version of PHP. You may not be able to get the exact version, but you will get very close. In this case, 7.3.28 is what the site has available. That should be more than close enough. Download the file and uncompress it (right-click) to C:\PHP. Make sure you get the 64 bit version if your server is 64 bit..

The file we grabbed was php-7.3.28-Win32-VC15-x64.zip. VC15 means you need that Visual C runtime for PHP to work. The php.net page has a convenient download link for you to find that, or you can just google VC15 runtime and it will get you on the Microsoft download page. You have probably installed the correct runtime already when you installed the Apache web server. You can test this by executing C:\PHP\php.exe and looking for errors.

Now you should set a PHP Path environment variable for Windows. At the Windows start menu, type in environment and then click on the Edit environment variables for your account. Click on the Advanced tab and Environment variables button in the lower right. In the System Variables section, locate the Path item and add C:\PHP to the list.

PHP comes with two configuration templates php.ini-development and php.ini-production. We want a development environment, so copy php.ini-development and rename it to php.ini.

Edit your Apache httpd.conf file (C:\Apache24\conf) and add a handler at the end of the file

AddHandler application/x-httpd-php .php
AddType application/x-httpd-php .php .html
LoadModule php7_module "c:/php/php7apache2_4.dll"
PHPIniDir "c:/php"

To test that it worked, edit your webpage index.php file (C:\apache\htdocs\public_html) replacing as follows. Remember that you must have changed your httpd.conf DirectoryIndex to DirectoryIndex index.php index.html for this example.

<html><body><?php echo phpinfo(); ?></body></html>

You should get a purple screen detailing the configuration of PHP.

Let’s take a look at the c:\php\php.ini and note some important settings that you want in development:

error_reporting = E_ALL  will display any error or warning
display_errors = On
display_startup_errors = On

Installing MariaDB (MySQL)

Although we call the M part of WAMP MySQL, it is really MariaDB that we are installing. In this case we want MariaDB version 10.3.28-MariaDB-log-cll-lve, or just version 10.3.28 for Windows. Mariadb.org stores releases here. Look for the right one and download it. You can either download the MSI Installer or the zipped package. The MSI installer is the easier way to go, so let’s run that after downloading. You should also have Apache running as a service as noted earlier.

Run the MariaDB MSI file and accept the defaults for everything. Set your root password to something you will remember. This is a Development Server, so it doesn’t have to be crazy. Make sure to check UFT8 as the character set.

Accept the defaults for instance properties. The remaining options are self explanatory.

Your Web Host will use cPanel->phpMyAdmin to modify databases and cPanel->DATABASES->MySQL Database Wizard to create them. You can either use HeidiSQL (new desktop icon) to manage your databases the same way you use MySQL Database Wizard and phpMyAdmin in cPanel. A developer install of phpMyAdmin will let you edit and create databases, so I tend to use that instead.

Installing phpMyAdmin

For this example, we are going to install version 4.9.5 of phpMyAdmin to match our Web Hosting provider. Look here to see what phpmyAdmin versions are available. It looks like 4.9.7 can be downloaded, so that should be close enough I will download the English version named phpMyAdmin-4.9.7-english.zip. Right-click and extract all to Apache’s htdocs folder (C:\Apache24\htdocs in this example). Rename the new folder phpMyAdmin-4.9.7-english to phpMyAdmin.

Edit your apache httpd.conf file (C:\apache24\conf) and add this code to the end:

<IfModule alias_module>
    Alias /phpmyadmin "C:/Apache24/htdocs/phpMyAdmin/"
    <Directory "C:/Apache24/htdocs/phpMyAdmin">
        AllowOverride AuthConfig
        Require local
        ErrorDocument 403 /error/XAMPP_FORBIDDEN.html.var
    </Directory>
</IfModule>	

Locate your config.sample.inc.php file (C:\Apache24\htdocs\phpMyAdmin) and copy it to config.inc.php. Find the $cfg[‘blowfish_secret’] = line and enter a 32 character value. Remember this is a Development Server so we don’t need to get too uptight about it unless you are going to work outside of your Development Environment.

$cfg['blowfish_secret'] = '12345678901234567890123456789012';

Locate your php.ini file (C:\PHP\php.ini) and uncomment these lines (remove ;):

extension=mbstring
extension=mysqli

Open your Web Browser, and type in localhost/phpmyadmin. You should be able to login into phpMyAdmin as root using the password you provided when you installed MariaDB.

Some more configuration needs to be done and we need a database to do that. Click on the Import tab and select C:\Apache24\htdocs\phpMyAdmin\sql and select create_tables.sql and then Go. Now you have a phpmyadmin database in the left list. That’s it!

If you want to use WordPress on your site here is how to install it. Always use the newest version of WordPress.

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.