Author: Khanh



Installing Magento on XAMPP

E-Commerce is getting big, and one of the biggest e-commerce systems in use is Magento. It is an open source software package that allows users to set up an online store. While “easy” isn’t the first word I would use for Magento, it’s certainly one of the better options out there if you’re looking for a professional e-commerce solution. Today, we’ll be installing Magento on XAMPP.

As a designer, developing themes for Magento might be something you would like to look into. But, unlike installing WordPress on XAMPP, Magento’s installation procedures can be a bit intimidating, especially for a designer who just wants to get it working so they can start developing themes and other pretty things. Where WordPress is the darling of the 5 minute installation, Magento takes a little coaxing to work. Here’s a step-by-step procedure that will hopefully save you a headache. Please note that I run XAMPP, so this tutorial is written for XAMPP only and is Windows 7 specific.

For this tutorial, I am running the following:
XAMPP 1.8.1
Apache 2.4.3
MySQL 5.5.27
PHP 5.4.7
Magento Community 1.7.0.0

Step One: Make sure you have the latest version of XAMPP installed. You can get XAMPP at the Apache Friends website, here. At the time of this article, the latest version of XAMPP is 1.8.1. I won’t go into installation and configuration of XAMPP in this tutorial. If you’re new to XAMPP and don’t have it installed yet, please refer to my Installing XAMPP on WordPress tutorial for details.

Step Two: Go to Magento and download the Community version. Magento has various versions of their e-commerce software. The Community version is open-source and supported by community developers, designers and users. Magento’s other major software is Magento Enterprise that is supported by its developers. As you may have guessed, Community is free and Enterprise will cost you a certain sum of money. If you want to know more, they have a great FAQ about it. Let’s get started with the Community version by downloading the “Downloader” version. I’ve installed Magento using the Full Release and the Downloader version and in my experience, the Downloader version puts up less of a fight during installation.

Please note that you may have to sign up for an account on Magento’s site before you can download the software. Once you do get to the download link, you might notice a helpful PDF being offered under “Designer’s Guide”. Click on the link, download the PDF and save it somewhere to look at later. It’s useful!

Step Three: Before we get to Magento itself, we need to prepare XAMPP for installation. First thing’s first, make a MySQL database for your new Magento installation. Go to your localhost phpMyAdmin: http://localhost/phpmyadmin/ Click on Databases and create a magento database. Make sure you name it something you’ll be able to remember:

Make a new database for your new Magento Installation

Click on the “Create” button once you’re done. Now click on your newly created Magento MySQL database:

I named my database "magento_box", yours can be anything at all.

I named my database “magento_box”, yours can be anything at all.

We’re going to make a new user for your Magento database, similar to what we did for the WordPress installation. On an actual live server, you never want to use the root account. Too much sensitive material that could pose a security problem if something were to go wrong. So click on the Privileges button at the top of the screen, then under “New” click on “Add user”.

Step Four: Fill in your database username and password and make sure you use Local in the drop down menu for the Host, or type in “localhost”. Once, you’re done with that, scroll down.

Make sure “Grant All Permissions on “magento_box” (or your database name)” is selected and click on “Check All” under Global Permissions. Then scroll down and ensure Resource Limits are all set to 0 and click on Add User.

Check all for Global permissions.

Check all for Global permissions.

Step Five: Now that was the easy part. Magento’s system requirements states that it will work with 5.2.13 – 5.3.15. Now, that doesn’t say it’ll work with PHP 5.2 and Newer. It literally means any versions outside of that range will throw errors. Often, these errors present themselves during installation. Which is what makes Magento a more difficult beast to tame. We actually need to go into our XAMPP installation and modify some Apache and PHP files so Magento will install without a hitch.

With that having been said, let’s tackle Apache first. Stop your Apache and MySQL services in your XAMPP control panel and exit out of the control panel. Next, if you installed XAMPP in its desired location, you should be able to find a file called httpd.conf in this location: c://xampp/apache/conf/httpd.conf. Make a copy of the httpd.conf file before you open it in a text editor like Notepad or Notepad++. Once opened, look for this line:

#LoadModule rewrite_module modules/mod_rewrite.so

And remove the # at the beginning of the line. So it should look like this:

LoadModule rewrite_module modules/mod_rewrite.so

Yes, just remove the #. That’s all you need to do. Nothing more. Some installations already remove the #, so you might not have to do anything here. Once you remove the # from that line or verify that the # isn’t there, save your httpd.conf file and exit. Now we’ll deal with PHP.

Step Six: Navigate to your php.ini file. Which should be located here: c://xampp/php/php.ini. Again, make a copy of it before you edit it, then open it in a text editor. Now find this line within php.ini:

;extension=php_curl.dll

And remove the semicolon (;). So that the line will look like this:

extension=php_curl.dll

Again, only remove the ; and nothing more. Some installations will have the semicolon already removed. In which case, you don’t need to do anything except verify that it isn’t there. Save php.ini but don’t close it yet.

Step Seven: During the installation, Magento will require a few minutes to complete one of its tasks. Your XAMPP installation is likely to allow less time than this and as a result, will corrupt the Magento installation. The solution for this problem is to increase the timeout threshold in the php.ini file. You can do this by locating the following string in php.ini:

max_execution_time = 30

And increasing the 30 to 1600. So that it looks like this:

max_execution_time = 1600

After that, save php.ini and close out the file.

Step Eight: Finally, we can start actually installing Magento onto our local machine. First, restart your Apache and MySQL servers. If you didn’t stop them before and have been editing them while they were on, just stop them now and start them up again. Create a new folder in your XAMPP htdocs folder called “magento”. Find the Downloader Mangento file you retrieved earlier, and unpack the downloader.php file. Copy the downloader.php file into your magento folder that you just created.

Downloder.php file goes in here.

Downloder.php file goes in here.

Step Nine: Navigate to your Magento downloader.php file, by going here: http://localhost/magento/downloader.php. If everything is on the right track, this should be greeting you:

A beautiful sight if you've been wrestling with Magento!

A beautiful sight if you’ve been wrestling with Magento!

Click on the “Continue” button, and you should see this:

Click on “Check for InnoDB Support” if you’re interested in InnoDB Support, if not, then no big deal. Then click on “Continue” again.

Click on “Continue” here too. We want to leave everything as is, because it’s already set to exactly what we want. Magento’s installation goes fairly smoothly as long as we make sure we have our bases covered first.

Wonderful. Click on “Continue”. The next screen gets a little more exciting. I promise.

Make sure your installation options are exactly what you want and click on the magical “Start the download process” button. Which will cause this to happen:

Oddly riveting.

Oddly riveting.

Strange as it looks, Magento is just doing its thing. It will download the necessary files, install them, then clean up after itself. So efficient! Go take a little break. You deserve it. Come back in a few minutes and it’ll look like this:

Success!

Success!

Yay! Click on “Continue Magento installation” then read over the license agreement if that’s your cup of tea, agree to it, then click “Continue to set your Localization”. At the Localization screen, set your time, currency and language settings and then click “Continue” again.

Finally, some action!

Finally, some action!

Configuration is probably the most exciting screen you’ll be looking at for a while. And I say this because once you click on the “Continue” button here, Magento will finish installing itself and you’ll be left hanging for a few minutes. Remember when we changed the timeout in php.ini? That was for this step. Go through the form first though and fill in the appropriate fields. Make sure you change the “Database Name” to your database’s name and input your username and password for your database into the appropriate fields as shown above. Double check everything to make sure it’s accurate. Once you’re ready, click on “Continue”. Now would be a good time to make a sandwich or something because this could take up to seven minutes to complete. I managed to make an elaborate cup of chai tea in the time it took Magento to finish this step. Whatever, you do, don’t try to refresh or close your browser. Just let it do its thing and you should get this glorious screen:

It's like buried treasure.

It’s like buried treasure.

See, if you’ve spent as much time as I have, trying to figure out what Magento’s problem is during installation with no prior knowledge of how it works and you finally make it to the Create Admin Account page, it’s like you discovered buried treasure. With that having been said, you can create your administrative account here. Go nuts, but remember, never use the same username and password for your administrative account as your database account.

Also don’t worry about filling in the Encryption Key. Magento will generate a key for you on the next page (just like it says). It’s highly recommended that you write that key down somewhere so you don’t forget it. Once you’re done filling out the form, click on “Continue”. Write down your encryption key. Do it!

After you get your encryption key locked away in a fireproof safe, you can choose to go to the Frontend or Backend of your new Magento installation.

Beautiful

Beautiful

After all this, you should finally be able to work with Magento. Enjoy.

 



Installing WordPress on XAMPP

One thing that concerns me with some inexperienced web designers, is their penchant for developing or designing a site directly on a client’s web server–either they use a subdirectory on the server or start making changes to the live site itself. There are a number of reasons why developing directly on a client’s live server is a bad idea and I don’t think anyone needs me to point them out. Enter development environments and XAMPP.

XAMPP stands for Cross Platform Apache MySQL PHP Perl. It is, in essence, a development environment for web designers and developers that runs WordPress, Joomla, Drupal, and other similar applications on your local machine, thus eliminating the need to develop on a live server–and thus giving designers absolutely no excuse to develop directly on a client’s live server. Today, I’m going to lay out a step-by-step tutorial to install WordPress on XAMPP on your local machine. Please note that I use Windows 7 for this tutorial, but XAMPP also has an OSX and Linux version. What you use is entirely your choice, but some of the steps outlined in this tutorial may not apply to you.

Here’s the stuff I’m working with:

XAMPP 1.8.1
Apache 2.4.3
MySQL 5.5.27
PHP 5.4.7
Windows 7 64bit
Wordpress 3.4.2

All of the software is current at the time this article was written.

Installing XAMPP

Step One: Download XAMPP. You can get the latest version of XAMPP from the Apache Friends website, here. Download the Installer version. Once you’re done, run the EXE.

Depending on your computer’s settings, you may encounter the above warning message. Note that XAMPP is essentially telling you not to install it into your c:Program Files (x86) folder. Write that down, or commit to memory, then click OK. Follow the directions, let XAMPP install itself into your c: root folder to make things easier for yourself. Once the installation is finished, launch XAMPP’s control panel. If all went well, you should see something similar to this:

Note the green check marks next to my Apache, MySQL, and FileZilla installations. If this is your first time installing XAMPP, you may have the red X’s like the one next to my Tomcat installation instead. What you want to do is click on the red X’s and install at least Apache and MySQL. Once that is done, click on the “Start” buttons to fire up your Apache and MySQL services. If you’re running XAMPP behind a Windows Firewall, you may get a Firewall warning. Make sure you unblock Apache from the Firewall. If everything goes according to plan, your control panel should have Apache and MySQL highlighted in green, and the output at the bottom should indicate that your Apache and MySQL services are running.

Step Two: Time to test your XAMPP install to make sure it works and that your services are running. Open up your favorite web browser, and plug this into your address bar: http://localhost/ (localhost is your local machine). If it’s working correctly, XAMPP’s logo will show up and ask you what language you would prefer. After you select your language, you should see the following screen:

Congratulations, you just installed XAMPP and now have a working development environment. You can use this environment to run installations of WordPress, Joomla, Drupal, Magento, and many other applications. Whoo! That wasn’t too bad, was it? Now, let’s get to the real reason we were here; Installing and running WordPress off of your local machine.

Installing WordPress on XAMPP

Step One: Obviously, we would need to download WordPress first. At the time of writing this article, the latest WordPress version is 3.4.2, but later versions should be able to be run off of your local machine using XAMPP with no problems. So download WordPress.

Step Two: Next, we’ll need to set up a MySQL database for our WordPress installation before we go any further. The easiest way to do this in XAMPP is through phpMyAdmin. You can access this by going to http://localhost/ and clicking on phpMyAdmin under Tools. Alternately, you can go to http://localhost/phpmyadmin/. To create a new Database, click on the Database button as shown below.

Aside: You may have noticed the 127.0.0.1 is the same on your computer as it is on mine. This is because 127.0.0.1 is (in simple terms) your local machine or localhosts’s IP address. prior to running Apache and MySQL with XAMPP, if you tried to access 127.0.0.1 you would likely get an error. People used to (they still might, who knows) fool gullible users into trying to connect to 127.0.0.1 with the promise of some leprechaun gold, only for the user to find that no matter how many times they tried it, connecting to 127.0.0.1 presented them with an error.

Step Three: Under Create Database, give your new database a name. I often run more than one WordPress installation on localhost so I try to keep my naming conventions for WordPress installs something like “wordpress_box” or “wordpress_cashie” or “wordpress_buddy”, depending on what I’m playing around with at the time. Unless you know what you’re doing (and if you do, I wonder why you’re reading this tutorial) leave Collation as it is. Once you give your database a name, click on Create and enjoy this comforting message:

Step Four: Click on your newly minted WordPress database.

What we need to do now is create a WordPress user to avoid using the root user. On a live server, the root user is the one who has all privileges. This can get hairy if you do anything with the root user because you open yourself (or your client) up to a tangled web of security vulnerabilities. It is, in essence, bad practice. Now, if you’re only using this on your local machine, you don’t need to set up a user account and can install directly using the root user because there are, generally, fewer security concerns when it comes to your localhost. But then, just using the root user just because you can would be lazy. And we started this whole journey with the express intent of eliminating laziness and poor practices. So let’s make this WordPress user account. Click on the Privileges button at the top of the screen.

On the next screen, under “New”, click on “Add user”.

Fill in your login information, write down or note your username and password somewhere, and set the Host to either “Local” using the dropdown. Or type in localhost in the textfield. Then scroll down and make sure “

Finally, scroll down to the bottom of the window, and make sure you have all Resource Limits set to 0, and click on “Add user”. Now you should see something similar to this screen:

Okay, now you are all done with phpMyAdmin. Let’s go actually install WordPress now.

Step Five: Unpack your WordPress installation download that you got before. Copy the unpacked wordpress folder, navigate to XAMPP’s htdocs folder, and paste it inside the htdocs folder. If you installed XAMPP in its desired location, your htdocs folder should be located in c:xampphtdocs

Step Six: Go into the WordPress folder that you just copied into htdocs and locate the wp-config-sample.php file. Rename it to wp-config.php and open it in your favorite editor.

Step Seven: Inside your wp-config.php file, you should find places where you can fill in your information. So where it says ‘database_name_here’, fill in your database’s name. For this tutorial, my database was called ‘wordpress_box’, for ‘username_here’, I would use ‘awesome’. Password would be the password you assigned when you created the user for this WordPress installation. ‘localhost’, and the other fields can remain the same. Filling out the form, you should end up with something that looks similar to this (except with your password filled out):

Save wp-config.php and open up your browser again. Now, navigate to your WordPress installation by going here: http://localhost/wordpress/wp-admin/install.php

If everything works correctly, you should be welcomed by this screen:

Fill in your details and click on “Install WordPress” when you’re all done. It should be noted that the username and password you used for your database is not the same as what you will use for your WordPress installation. On a live server, never use the same username for your database and your WordPress administrative account. And always, make sure you have a strong password for both your database and your admin account.

WordPress should install without a hitch and afterward, you can log in to your new installation using the username and password you just created.

Congratulations, you just set up WordPress on XAMPP and now have a fully functioning installation to test your themes, plugins, and whatever else you might fancy. 🙂



The Difference Between Arial and Helvetica

Back in high school, whenever I looked at Arial, I would think, “The World’s Most Boring Font”, then skip it and use something else like Tahoma or Verdana for my sans-serif needs. But then, back in high school, I didn’t know too much about graphic design until college drilled into me the importance of typefaces. Specifically, the difference between Arial and Helvetica.

I think there’s something to be said about my exposure to typography in college because after graduating, I fell into the world of type. One letterpress, a couple sets of type, a few topical mugs, a couple dozen books, a few posters, a suitcase full of furniture, and more ink than I could use in a lifetime later and I’m spending hours wondering if a page would look better set in Palatino or Palladio.

But today it’s about Arial. Or rather, Arial’s seedy history as a copy-cat of what (it seems) is America’s typography darling; Helvetica. See, Arial started life as a look-alike of Helvetica. Where Helvetica was owned by the Linotype Foundry, Arial was created by Monotype. And, to be fair, Arial was inspired by Monotype’s Grotesque (it’s only a name) typefaces. But the question remains, if Arial was based on Grotesque, why does it look so similar to Helvetica? And how are you supposed to tell between the two? Is Arial just a straight up knock-off?

The Difference Between Arial and Helvetica

The argument, believe it or not, has been going on since all this began and it’s not about to be settled any time soon. For the time being, differentiating Arial from Helvetica isn’t so monumental a task. Should you ever find yourself in a pickle where you very livelihood depended upon telling these two apart, here’s a few quick tips.

The Sloped T

The Sloped T

One of the easiest ways to tell whether you’re looking at Helvetica or Arial is by locating its lowercase T. Laid out side-by-side, you can tell the difference right away with Arial’s sloped T.

Spot the angle!

Spot the angle!

Need something else to tell these two apart? Take a look a the S and C in Helvetica then at the S and C in Arial. Notice the slight angle that Arial’s glyphs are cut with? hard to spot when it comes to smaller sizes, but a dead giveaway if you know where to look.

For more practice telling these two apart, check out Iliveonyourvisits.com’s Arial or Helvetica Quiz.