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 this steps you can create 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 minut
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 sever from 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 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 webserver , 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 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 .
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 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 woocmomerce > 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
- Download woocommerce from this site
- 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
