How To Create A Simple eCome Site

 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 choose to download on Mac or Windows. 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:

1. Installer screen: Click next then uncheck the install pro box and click next. 
2. Important Information Screen: Click Continue. Don’t rename the folder. 
3.  Software License Agreement Screen: Select the language you wish to use with MAMP. Click Agree in the small dropdown, then click Continue.
4. Destination Select: MAMP must be installed in the Applications folder to work properly. Click Continue for the next step. 
5. 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. 
6. 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, and 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 been 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 the 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 backup 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 gave 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 go to the 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 settings> reading >static page > homepage > shop 

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  

• Download woocommerce from this site 
• Follow official instructions to load sample data here:Importing 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 settings> 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 follows;
* 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