In this article, I will introduce you to five of the most influential technologies used to power websites today. I have to admit up front that this list will vary, depending on what type of websites you look at. For my list I deliberately ignored some obvious and rather well known tools and technologies, including WordPress, Disqus, or some coding languages (HTML, PHP, CSS). What is left over, is the real ‘magic’, i.e. the kind of stuff that few of us ever have to deal with.

Apache HTTP Server

Apache HTTP Server (short: Apache) is a public-domain open source web server software. It’s available for Unix, Windows, and other operating systems. Being a platform for web servers, Apache handles the distribution of website and related services. In fact, the majority of websites available online rely on Apache HTTP Server.

Learn More

• FreeBSD Handbook: Apache HTTP Server
• Wikipedia: Apache HTTP Server
• The Best Linux Web Server Software (& Apache Alternatives

jQuery

jQuery is a free and open source JavaScript code library for client-side scripting of HTML. Using jQuery, website developers can create animations, handle events, and integrate Ajax. In short, jQuery simplifies JavaScript programming and allows easy and rapid web development. On top of that, it is easy comparably to learn.

Find Out More

• W3 Schools jQuery Tutorial
• Wikipedia: jQuery

Google Analytics

Google Analytics analyzes website traffic and user demographics. It helps websites optimize their content, ads, and marketing. It’s a tool predominantly used to increase website revenue.

Additional Information

• Wikipedia: Google Analytics
• Google Analytics Dashboard – A Powerful WordPress Traffic Monitoring Plugin
• How To View Adsense Performance In Google Analytics & Why You’d Want To
• Google Analytics Tips You Should Know About

Open Graph Protocol

Open Graph enables websites to be integrated into the social graph. The social graph depicts relationships on the World Wide Web. Websites use Open Graph to analyze relationships between objects, such as photos or pages. Open Graph Protocol is a Facebook API and despite its name it is closed source.

And More

• Wikipedia: Open Graph Protocol (Facebook Platform)
• Facebook Developers: Open Graph Protocol

Facebook Insights

Facebook Insights is yet another tool to analyze website traffic. It reveals how content is consumed, user demographics, and user growth. The service is provided free to all Facebook page owners and platform developers. Facebook Insights is used by websites who connect to their users through Facebook, allow them to share content, and provide services, such as downloads or contests via Facebook.

Further Reading

• A Beginner’s Guide to Facebook Insights
• How to use Facebook Insights

So how did I come by this list? First of all, I used a page that was recently profiled on the MakeUseOf Directory. Under the Site reveals the technologies hidden under the GUI of any website you throw at it. I analyzed the following ten pages: Digg, The Daily WTF, CNet, Wired, TechCrunch, CNN, BBC, CraigsList, Wikipedia, and IMDB. In the next step I picked the most common and/or most interesting technologies listed for those sites.

Image credits: photobank.kiev.ua

One of the things I’ve been toying with is making portable web servers, like my article on Server2Go, which was borrowed from ideas from Dave’s article on XAMPP. After successfully configuring a few portable web server setups, I started looking at my mobile phone and wondering about other possibilities. What if I could set up a mobile web server on my phone, and then anywhere that I am (where there’s a Wi-Fi network), share out any web content that I have? Furthermore, what if I could carry around a customized start page that I could use to access my own important weblinks from any computer on that network, or share those out to others on the network?

The good news is that using two tools – the PAW Mobile Web Server, and the SPGM (Simple Picture Gallery Manager) – this is all possible.

Installing The Mobile PAW Web Server

While searching for the best tool that would allow me to transform my Android into a portable web server, I stumbled across the PAW Web Server solution.

The PAW mobile web server is the coolest Android web server I’ve ever seen. Why’s it so cool? Because there’s ZERO setup. That’s right, you install it, click this cool little run button, and it tells you what the URL is.  You’re done.

Of course, there is the usual setup when you want to actually serve out content, like a shared Internet start page. Think about what this tool lets you do. Anywhere that you’re visiting, if there’s a Wi-Fi network available, you can launch this app and open up your own mobile web server to anyone on that network. All they have to do is type in the IP address of your phone – cool!

Once PAW is running on your phone, it hosts all content in the /PAW/HTML/ directory on your SD card, to the entire network.

The system defaults to system tools stored in the App folder, which includes some pretty cool features once you’re connected to your phone through your browser. You can make calls, send SMS or email messages, browse through your phone using a file manager, and a whole lot more.

For our purposes, there’s only one thing you have to do. Open a browser and type in the IP address your phone provided once PAW was running. After creating a login ID, you’ll be in the admin area. Click on “Add-Ons“, then “Plug-ins” and install the PHP plugin.

Set your timezone and then click “Install“. This will enable the ability to host PHP webpages – a requirement if you’re going to use SPGM. You’ll have to stop and start the server on your phone. The next time you log in, you should see PHP installed under the “Plug-ins” menu item.

The next step is to take that new-found ability and make something useful out of it.

Installing The Simple Picture Gallery Manager

There are two things that I thought people would like to do with such a web server.

• It would be cool to launch a mobile Wi-Fi web server on a network so anyone on that network can view your picture gallery of photos you have on your phone – directly from any web browser on the network.
• The PAW web server also lets you carry around a “startpage” that you can customize and then host, letting both you and your friends access your favorite websites, online documents and more, all linked from your own personal starting page.

The cool thing is that you can accomplish both of these tasks using the Simple Picture Gallery Manager (SPGM). All you have to do is download the entire collection of files into your PAW HTML folder. At this point, you’re already prepared to start serving picture galleries.

All you have to do to set it up is run Gallery Mage and use it to open any directory on your computer or mobile phone that has the pictures you want to host. Export those to SPGM format. Copy that entire exported directory to your HTML folder on your phone, and your gallery is live!

To see your picture galleries, all people have to do is type in the IP address of your phone appended with the SPGM folder. For example, people can access mine on a local network by visiting: http://192.168.1.101:8080/spgm/index.php. All gallery folders you import will automatically display.

Creating A Start Page

The last thing I want to do is create that cool launch page. You can do this when you export those SPGM picture files to your phone by editing the pic-desc.txt file that gets exported along with them. Just add the URL links to the captions.

Once you do that, import your new “start page” gallery to your PAW server, and you’ll see all of the link icons on the gallery page.

You or your friends can click on any of the images, and then click on the URL link below the image to visit the site. This is a useful way to organize links to pictures, online documents, websites and more, all stored on your mobile phone and ready to share out as an internet start page, so long as you have access to a wi-fi network.

Did you try this setup and can you think of any other awesome uses for it? Do you know of any other PHP apps that might run on this mobile web server that would transform your mobile phone into a powerful little Wi-Fi web server? Share your thoughts and ideas in the comments section below.

For those of you that have been following along with my recent articles, I did do this with Server2Go. Many of you liked that approach. The one issue with Server2Go seems to be that it is really intended to be used as a clean web server test base every time you launch it. When you close down the server, it doesn’t really retain settings well.

There were a number of readers that suggested Xampp as the best solution for this. Xampp is a long time favorite. Aibek listed it in his compilation of 100 best portable apps, and Dave outlined how to set a Xampp server up on your PC.  Of course with XAMPP, you have to install it at the root drive – so one portable drive becomes your web server. Taking this approach, I decided to see if the “subst” DOS command might solve that problem – and sure enough it did!

Installing Multiple XAMPP Web Servers

The first thing you’re going to want to do is designate a specific folder on your portable hard drive (or portable USB drive, if it’s large enough) to hold your entire website. In my case, I created a root directory called “TopSecretWriters”.

All you have to do next is to tell Windows  that the directory on your portable hard drive is a root directory, using the SUBST command. In my case, in the DOS command screen I typed, “subst X: H:\TopSecretWriters“.

This makes root drive X: directly refer to the TopSecretWriters directory on your portable drive. You’ll need to note this, because any time you want to run your web server in the future, you’ll need to type this command, otherwise the Xampp installation won’t work.

Now, just download a copy of the Xampp ZIP archive (not the Windows installer), and extract the Xampp folder to the new directory you’ve created.

Go into the Xampp folder and double click on the “setup_xampp.bat” file.

Then, run “xampp-control.exe” and you’ll see the following screen:

Select both the Apache and the MySql service, and install (press start) both of them. Once they’re successfully installed and “running”, open up a web browser and go to “http://localhost/”. When you do, you’ll see the Xampp introduction screen. Click on “Status“, it should show most of the components as activated.

Installing A Full Backup Of A WordPress Website

At this point, you’re done setting up the one Xampp web server. Just copy your website into the HTDOCS folder and your site will come up when you go to “http://localhost/“.

Since most people like to have a local mirror of their WordPress blog or website, I’m also going to show how to install a full, local instance of your site.  You just need your blog’s MySQL database, username and password. Launch phpMyAdmin on your local Xampp install by going to “http://localhost/phpmyadmin/“. Type the name of your database in the “create new database” field and press “Create“.

Don’t forget to click on “Privileges” and add a new user with the username and password of your own site’s database, and make sure the host is “Localhost“.

Download and extract a copy of WordPress that matches the WordPress version of your site. Set up your local wp-config.php file with the correct database, username and password, and run “http://localhost/wp-admin/install.php“.  Finally, copy the entire wp-content folder from your actual WordPress website to the wp-content folder in your local web server WordPress install.

All you have to do now is export your website’s MySQL database to your local one, and you’re done – complete with all posts, comments and everything else. To do this, just go to your CpanelX control panel, click on “Backups” and select the database for your blog.

It’ll save your entire database as a .GZ zip file. Save this file as a backup. Now, go back into MyPhpAdmin of your local web server, select your database, and then click on the “Import” button. On this screen, all you have to do is click the Browse button and select the .gz file that you just downloaded.

This will import your entire database. Go to “http://localhost/” and you’ll see a perfect mirror replica of your live website! Now you can tweak your theme, new ads, or otherwise play around with the local version of your website before you decide to move the changes to your live site.

When you want to set all of this up for another website, just start at the very beginning of this article again, create a new directory on the root of your portable drive for this second website, and when you do the SUBST command, pick a different drive letter.

All of the subsequent steps are for setting up your own local web server. To launch a particular local web server, you just have to go to that directory and launch the “xampp_start.exe” file in that directory. “xampp_stop.exe” will stop that local webserver. This setup will work perfectly so long as you never try to launch two at once – you can only have one localhost webserver at a time!

Give this setup a try and let us know how it worked out for you? Do you have a need to run multiple local webservers at once? Does this solution make it work? Share your experiences and additional tips in the comments section below.

There are lots of WYSIWYG applications that let you create a static HTML page and then preview what it’ll look like before you actually upload the new pages to your web host. However, if you have a PHP-based website like a WordPress blog, things aren’t quite that simple. You need a web server that can handle PHP and MySQL at the very least.

Here at MUO, we’ve covered a number of ways to install your own local web server like Dave’s review of Linux web server software, as well as his review of XAMPP for Windows. These are great if you intend on using the same computer for all of your development work, but if you travel a lot, wouldn’t it be nice to have a portal PHP web server installed on your thumb drive or portable hard drive where you can test changes anywhere, even if there’s no Internet access? One of the easiest portable solutions for this is Server2Go.

Bring A Working Web Server Anywhere

Compared to the configuration work it takes to set up a working web server, the ease with which you can install and run Server2Go on a portable drive is unbelievable. This is a perfect solution for me, because I want to make some design changes to my blog template without the risk of taking down my entire site. So, in order to accomplish this feat, I decided to test drive Server2Go.

When you download Server2Go and extract the files, you’ll see that the directories are set up like a regular web server with “htdocs” being the public directory where your web pages will go. No installation required.

All you have to do is copy those files and directories to your portable drive. Now, if your only goal is to test your website that’s written in either straight HTML or PHP, you’re done. Just copy your site to htdocs and you can view it by launching the web server (running Server2Go.exe) and then going to http://127.0.0.1:4001/ – the default localhost IP configured in pms_config.ini.

This is pretty slick because you will have a fresh web server to test any website that you want at any time and anywhere. But what if you want to load up a complete PHP site with a back end SQL database?

Server2Go was originally made to run off of a read-only CD, so the default setup will not save MySQL database changes. If you want to configure the server to keep all of your settings, you need to edit pms_config.ini so that LocalMirror=0, OverwriteLocalMirror=0, and DeleteDatabaseFiles=0.

Do this edit before you move on or you’ll lose all of your configurations. When you’re done, open up phpMyAdmin by going to http://127.0.0.1:4001/phpmyadmin/ and log in as root without any password.

Now, set up your database. This needs to be the database name that you use for your regular website. In the case of a WordPress blog, you’ll make it whatever you configured in wp-config.php on your live blog.

Also create a new user with the same user id that you use on your live WordPress blog. You do this in phpMyAdmin by clicking on the SQL tab and typing:

“CREATE USER ‘my_id’@'localhost’ IDENTIFIED BY ‘your_password’;
GRANT ALL PRIVILEGES ON *.* TO ‘my_id’@'localhost’
WITH GRANT OPTION;
CREATE USER ‘my_id’@'%’ IDENTIFIED BY ‘your_password’;
GRANT ALL PRIVILEGES ON *.* TO ‘my_id’@'%’
WITH GRANT OPTION;

Now that your database is ready to go, move a fresh copy of WordPress to your new portable web server by copying all of the WordPress files to the htdocs directory.

Remember to edit wp-config-sample.php with the database and user information, and rename the file to wp-config.php. Run “http://127.0.0.1:4001/wp-admin/install.php” and you should see the following screen.

You now have a working local installation of WordPress! The next step is to just export your database and import it into your local WordPress installation. We’ve covered lots of backup procedures at MUO, but one of my favorites was Dean’s on the database backup plugin. I won’t go into the details here, but I highly recommend that plugin to transfer over your entire database.

Keep in mind that even though the database backup will move over all posts and comments, the theme and formatting will not carry over. To do this, you need to copy your entire wp-content directory from your online blog to the fresh install of your local one. Enable the required plug-ins and configure the theme to match your online setup. Once you’re done, you have an exact local replica of your entire online website or blog.

Here’s a local copy of my own blog running on Server2Go.

Now I can tweak the template and other aspects of my blog – including testing new plug-ins and widgets – before they ever go live on the actual online website. After taking my website down a few times just by playing around with a new widget, this feels a whole lot safer.

Give Server2Go a shot on your own portable thumb drive or hard drive and let us know how it goes. What other ideas do you have for making use of such a portable and fast to set up web server? Share your thoughts in the comments section below.

Image Credit : El Frijole

XAMPP is a collection of software that includes Apache, MySQL, PHP and Perl. It also includes Tomcat, FileZilla FTP server and Mercury Mail for sending emails. These packages are used for the following tasks:

• Apache – Web Server, hosts content at http://localhost/
• MySQL – Database Server, many software packages use this to store data
• PHP – Programming language, many modern programs use this as a language
• Perl – Programming language, many programs use this language and has been around longer than PHP
• Tomcat – Server used to execute Java programs
• FileZilla – FTP server used to transfer files to/from your local machine (only necessary if you need access remotely)
• Mercury Mail – Mail system used for sending emails

These programs work together to give you a very robust environment for hosting web programs on your local machine.

Getting Started

Download the correct program for your operating system. This tutorial will go over the Windows version, but the MacOS X, Linux and Solaris versions are very similar. Run the installer and click OK on any security dialogs that pop up. When you get to the following menu:

I would suggest checking off Apache and MySQL as a service as this will allow you to better manage this software later.

When finished, click “Yes” to start the control panel.

There is a bug if you are running 64-bit versions of Windows (Vista, 7 or Server 2008). It will say “XAMPP Component Status Check Failure [3]“, but it is safe to ignore this error as everything else seems to work fine.

I also received several popups after installing the software. One was from Microsoft Security Essentials asking to send the FileZilla binary to them for analysis (this software can sometimes be used in backdoors – however this use is legitimate) and also the Firewall will pop up a few boxes asking if you want to allow the port to be used. Leave the checkbox unchecked so that your server will not be available over public wifi and other open networks (for example if you connect at a Starbucks), but to still allow your server to be available from your local PC and other computers in your own private network.

Once the control panel is up, click “Start” on Apache and MySQL.

Your web server is now up and running, if all went properly!

Managing Your Server

The first thing you should do is click the “Admin…” button for Apache. This will launch your default web browser and send you to the Welcome page. If it gives you the option, click your language (in this case, English) and you will see your administration area.

One of the first things to explore are the sample programs. Under the PHP list they include several programs which demonstrate the sorts of things PHP can do.

The “Status” page will show you which services are currently activated. They should all be green except for FTP, SMTP and Tomcat.

Next up is ensuring the security of your server. By default there is no password for your MySQL’s administrator account, also known as “root“. If you are on a small local network and you do not care who has access to the data stored in your machine then it is fine to leave this as is; however if you plan on opening your server up to the internet or you have roomates who you may not fully trust it is good to add a password to this account. You can follow the links to set up security of your system. The first option sets a root MySQL password and the second puts a password on your entire web directory.

Finally, if you plan on accessing your server outside of your home, you will need to log into your router and forward port 80 to your local machine. This is much easier to do if you are set up on a static IP address.

Installing Programs On Your Server

The main thing you need to know about where your server stores data is that it is in a subdirectory of your installation directory named htdocs. In my situation the web directory is:

C:\xampp\htdocs\

This includes the administration program. The default page your web server loads when you visit http://localhost/ is index.php. You can open that file to replace it with your own text or remove it altogether, it is really up to you.

Now that you have a web server set up, what can you do with it? Well one popular thing you can do is to set up wordpress locally. You can set up your own mixtape or even a proxy server, the possibilities are endless.

Really what you get out of it is the ability to learn something new and provide an environment that allows you to create and modify code in a very easy way. Although this server is not meant for production use, it does give you a very reliable development environment and sandbox to learn the ropes, so to speak.

What’s Next?

After you have your server up and running, the world is your oyster. Install and run that software you’ve always wanted to test out. The Apache Friends FAQ page has a lot of information on XAMPP and extended options, check there to take your install further. If you have any problems or questions about your setup, ask below and we’ll be sure to help you out!

If you’ve been meaning to start a blog, but find the choices overwhelming and the jargon mind-boggling ““ or maybe you just want to satisfy your technological curiosity about how the Internet works ““ then read on.

What Is Web Hosting Anyway?

A website host is really just a computer that is on all the time and connected to the Internet. When you visit a website, you’re downloading some files from the machine that stores that particular website. The truth is that any computer can be used to host a website, even the one you are using now – but the computers used by professional hosting companies are incredibly powerful with lots of hard disks and memory, highly optimized to deliver the website files to thousands of readers simultaneously. The machines are stacked up high, and there are no keyboards, mice or monitors to be seen.

So – You Need A Website Host?

There are various ways of hosting your website, so let’s take a look.

Hosted Services

The first and simplest kind of hosting is creating a sub-website within a larger site, usually for a specific application like a blog. There are so many hosted services on the Internet, but here are some specific blog examples, all free:

WordPress.com – Free, but your blog will be hosted at a URL such as myblog.wordpress.com (unless you pay a premium for your own domain). You will get to choose from a restricted set of blog themes and plugins, and generally can’t do anything beyond the basic setup.

Blogger.com – owned by Google, Blogger gives you a little more flexibility with regards to writing your own theme code, but the plugin selection is limited and the Blogger branding is everywhere. Frankly, there is a reason WordPress is top – but it’s good to have a choice anyway.

Advantages:

• Simple to set up and get started.
• Generally good speeds as the company is specialised and good at what they do.

Disadvantages:

• Very little control over the technical side of things. Non-approved plugins not supported, although Blogger is a little more flexible.
• Portability: If your blog does get popular and you have a subdomain from a free hosted service, then moving to your own host later becomes difficult and you’re liable to lose some of the fans you’ve built up when the domain changes.

Self-Hosted

If you want to go the DIY free route, then it is in fact entirely possible to host your own website at home, on your own Internet connection – but you should be aware that most ISPs don’t approve of this and it may be in violation of your terms of service, so do check first.

We’ve written a few guides before on how to self host a website on a spare computer, or even within Windows on your main computer.

Advantages:

• As much computing power as you have to throw at it.
• The ultimate in freedom to do whatever you want with your site.
• Free.

Disadvantages:

• A fairly high level of technical knowledge, or the patience to learn.
• The speed of your website will depend upon the upload speed of your internet connection, which is both slow and very limited. Bear in mind that any upload traffic you use to host your site will also count toward your ISP’s monthly quota, if they have one.

Shared Hosting:

So called because you share a hosting server with thousands of other websites that are also stored on the same computer. Shared hosting is the budget option – prices and packages vary greatly – most will come will a free domain name registration and so called “unlimited bandwidth and storage”, but don’t be fooled. Shared hosts rarely allow anything other than basic web files – so you can’t use that unlimited storage to backup your computer, for instance.

Perhaps the most famous budget shared host is GoDaddy, with plans starting at $3 a month. There are also lots of free shared webhosts, but you really do get what you pay for.

Advantages:

• Budget, and a great way to start out with your own custom domain.
• Easy install options for popular blogging and forum web apps that mean you don’t need a lot of technical knowledge.

Disadvantages:

• Incredibly slow.
• Anything beyond a basic blog will get warnings from your host regarding CPU and memory overusage.

Virtual Private Server & Dedicated Servers:

These are the top 2 levels of website hosting, and mean you get the whole server to yourself. The difference between Virtual Private Server (VPS) and Dedicated Server is that a Dedicated Server is a single, physical system which you essentially “rent” inside of a data center. A VPS is a single, virtual machine – similar to the way you can use Parallels to run a virtual machine inside of your OSX install. MakeUseOf is hosted on a dedicated server.

My personal recommendation for a VPS or Dedicated server is Media Temple. Their VPS starts from $50 a month, while dedicated servers start at $750 (yes, you did just read that right).

Advantages:

• (Nearly) Unlimited domain hosting.
• The fastest hosting available (just to illustrate, I recently moved my iPadBoardGames site from shared hosting to a VPS, and the page load time dropped from an appalling 10 seconds to under 2.5 seconds).

Disadvantages:

• High level of technical knowledge required.
• Expensive.

Starting Out

If you’re serious about starting a blog, I really suggest you skip the free route and head straight to a shared hosting account. Yes, it may cost a little, but it will save you so many headaches down the line – and there is a psychological effect that if you’re actually paying for it, you’re going to put more effort in. When the time comes to upgrade – then you can easily migrate to more a more professional solution. The learning process is one hell of a ride, so what are you waiting for?

Image Credits: Shutterstock 1 and Shutterstock 2