How to create a simple store site

Table of Contents

In this tutorial you are going to learn how to create an e-commerce site like the demostore site (demostore) by using a content management system called WordPress . This is a step by step guide to create the site on your localhost using MAMP server and MYSQL database. By following these steps you can create an exact copy of the demostore and you will use it to follow along my course on testing websites. you have to be able to do exactly what I do in my videos so you need to create a site exactly like mine. Since we are building this site for learning testing (accessing the backend and database of a program is a key to effective testing ) we may not need much customization. 

Installing MAMP

Downloading MAMP

To download MAMP go to www.mamp.info. MAMP has two versions,  one pro and another free. To download the free version click on the Free Download button.

Then chose to download on mac or window.  After that  download begins.

Installing MAMP

When the download  completes, Go to the folder  and double-click on the installer file to run the installer. Follow the following steps:

  • Installer screen: Click next then uncheck install pro box and click next.
  • Important Information Screen: Click Continue .Don’t rename the folder.
  •  Software License Agreement Screen: Select the language you wish to use with MAMP. Click Agree in the small dropdown, then click Continue.
  • Destination Select: MAMP must be installed in the Applications folder to work properly. Click Continue for the next step.
  • Installation Type  Click Install to perform a standard installation of MAMP for all users of your computer.   Click Install to continue. Enter your admin username and password. then click Install Software.
  • Installation – Installing MAMP Screen: The installation  process may take several minutes.

Starting MAMP

After installation the MAMP welcome page opens . This page contains links to your PHP configuration (phpinfo), phpMyAdmin, as well as the standard MAMP configurations.

The MAMP control panel also opens, which shows that your local MAMP server is working. You should see green indicators next to Apache Server and MySQL Server:

You can start or stop your local server from the control panel by clicking start server or stop server.

Configuring MAMP

During installation, MAMP sets the default ports for both Apache (port 8888) and MySQL (port 8889).

Creating a Database

open the Welcome page in your browser , then click the phpMyAdmin link at the top of the screen.

To create a database, click Databases in the top navbar.

On the screen that appears, you need to enter the database name , choose your database connection collation from the dropdown box ,then click Create.

your new database will appear in the list on the left.

As an alternative option you can use MYSQL workbench instead of  PhpMyAdmin to connect to the database. You have to download and install it on your computer first.

Installing WordPress

Downloading WordPress

You next need to download WordPress onto your computer. Go to the Download page of WordPress.org and click the Get WordPress > Download WordPress button.

Once WordPress has downloaded to your Windows PC, you need to unzip the folder and extract the files.

Move WordPress into MAMP htdocs

Now, you need to move WordPress into the htdocs folder of your MAMP install. Copy the unzipped WordPress folder and navigate to MAMP > htdocs  (Go to files>local disk c > MAMP folder >htdocs)Paste the WordPress folder into the htdocs folder.

The name of this WordPress folder will be included in the URL of your local WordPress install (i.e. localhost/wordpress). You can rename the folder (and consequently the URL) to anything that works for you. 

Alternatively you can find htdocs from MAMP.  Under preference go to web server , there you can find the Document root ,which is  where your html/PHP files and images are stored. The default document root in MAMP is: “/Applications/MAMP/htdocs”.

Installing WordPress

The last step is to install WordPress on your local server. Type the URL of your local WordPress site into your browser’s address bar. if you haven’t renamed your WordPress folder, type in ‘localhost/wordpress’ or it is localhost:8888 or 127.0.0.1:8888. Then follow the following steps:

First, select the language of your choice.

You will then need to fill in some information about the new database you have created. You will need to define…

  • Database Name – This is the name you chose when setting up the new database for your test site in phpMyAdmin. 
  • Database Username and Password – Both the username and password are root. This info can be found on the MAMP installation page in the MySQL section
  • Database Host – This is localhost. Again, this info can be found on the MAMP installation page. WordPress expects port 3306 by default but MAMP assigns port 8889 for the database so we may need to specify the port to 8889 in WordPress in case it fails to connect.
  • Table Prefix – Leave this as the default wp_.

Now click the Run the installation  button to install wordpress.

You will need to provide some details about your test site. These settings can be changed later . Then click on  Install WordPress.

You can now log into your WordPress test site using the localhost/Name/wp-admin URL.

How to fix database connection error

The settings for the database are stored in the configuration file.. It is called wp-config.php or if you can not find it you can edit the wp-config-sample.php and rename it as wp-config.php. It is located at C:\MAMP\htdocs\wordpress(siteName).copy a back-up before starting to edit

Open the file in and edit the database name, user, password and host . Set the correct database hostname,(it is usually localhost) database name(the name you given when creating your database), password,(usually no password on localhost) and database userName(usually root) and save the file. Try to open your file again and it should work.

Installing themes and plugins

Theme

Installing theme

To change the appearance WP dashboard and click on Appearance > themes>Add new > search for storefont  >  click on install now > click Activate.

To change the home page go to setting > reading >static page > homepage > shop

Plugins

Installing Plugins

Go to the WordPress dashboard and start building your site.

Here are a list of plugins you need to install:

  • Woocommerce
  • Wpfront notification bar

Woocommerce

To install woocommerce : go to plugin > click add new > search for woocommerce > click install now > then click install.

Now you can go back to your site and see a lot already changed. It will add pages with their own features.

Adding sample products

  1. Download woocommerce from this site
  2. Follow official instructions to load sample data here:Imoprting woocommerce sample data

Wpfront notification bar

Install and activate to enable the top notification bar.

To make it look like exactly the one on demostore site go to setting > check the enable box > scroll down and add the message you want to display on the message text area > scroll down and set a duration > scroll down and change bar color >  finally save the changes. The details look as follow;

* Where to find it:
  “Settings > Notification Bar” or From the Plugin Page ’Settings’
* Settings:
Position = Top
Display After = 0 Seconds
Message Text = Free shipping on orders over $50
Message Text = bold
Display on pages = Exclude in following pages. = MyAccount, Sample page
 Bar color = #e81276, #e81276

1 thought on “How to create a simple store site”

Leave a Comment

Your email address will not be published. Required fields are marked *