HOW I BUILT A RESPONSIVE E-COMMERCE WEBSITE PROJECT WITHIN 2 WEEKS-MY EXPERIENCE AS A GOOGLE AFRICA DEVELOPER SCHOLARSHIP(GADS) 2020 PARTICIPANT

As a web designer and developer with over two years of experience in development of many websites to my credit, I have helped some good number of people do their websites from the scratch either with Wordpress, joomla or any other CMS applications as well as using html , CSS and js. It depends on the needs of my clients.

But as a student of #GADS2020, in the course of the programme which is group into three (3) phases;

Phase 1

Phase 2 and

Project Phase

For better clarity, The Google Africa Developer Scholarship (GADS) is a learning community where aspiring developers in Africa are trained to skill up themselves with the aid of Pluralsight Skills, supported by the Andela Learning Community.

It is a place where participants receive free, limited-time access to Pluralsight Skills, with handpicked courses focused on one of three areas: Associate Android Developer, Google Associate Cloud Engineering, or Mobile Web Specialist. As for me, I specialized in Cloud Engineering.

This program has multiple phases which participant must meet the standards requirement before proceeding to the next phase, To the glory of God, I was able to get to the Project phase which is the last phase where the remaining participants will be asked to choose a community-based project upon which hyou will be assessed and graded.

Now comes to the context of my blog, I chose among other community-based projects, building of a responsive ecommerce website.

As a participant in the Community-based project, I was expected to come up with innovative solutions to solve the current challenges of COVID-19 that will contribute to the future of day to day activities. The solutions were solving for challenges in the following sectors:

· Education

· Health

· E-Commerce

· Fintech

· Remote work

As per my choice of project, it was expected of me to provide solutions based on online marketplace that can evolve fast to help businesses and individuals cope with the movement restrictions brought about by Covid-19.

My project will be divided to three stages:

First Phase-Building the Front End

The front end of a website is the part that users interact with. Everything that you see when you’re navigating around the Internet, from fonts and colors to dropdown menus and sliders, is a combo of HTML, CSS, and JavaScript being controlled by your computer’s browser.

I started from a layout draft to the Doctype, Meta tags, the css as well as the javascript with creation of the page content, import of some photo grids to display for the e-commerce website. This did not give me much problem since I have been used to it for some times now.

<!DOCTYPE html>
<html>
<meta charset=”UTF-8">
<meta name=”viewport” content=”width=device-width, initial-scale=1">
<link rel=”stylesheet” href=””>
<body>

<! — Content will go here →

</body>
</html>

I wrote the frontend of the ecommerce webite with html, css and javascript which I posted for comment to the GADS2020 community in my github account.

Second Phase-Backend

E-commerce website, as predicted by some experts, has grown beyond $2 trillion as at the year 2019, if not for the world epidemic challenges on Covid-19 that has slowed down the world economy, yet e-commerce is still one of the fastest growing and most valuable industries in the world today.

However, the ease, seamless checkout and the convenience of having the timely delivery of your goods directly at your doorstep never gave anybody the impression of how difficult and complicated building of e-commerce could be.

It was when I started the backend that I appreciate its complexity in terms of database. In order to ensure the functionality of the website, I had to work on the backend, which made me to consider using MYSQL workbench. If you want to know more and download Mysql workbench, please click “MYSQL Workbench” .

This powerful database tool is what I used to warehouse my table and data. I did a table data using MYSQL Workbench, thanks to the its GUI features that made me to understand it quicker and better. After computing and finishing the backend, the complete databae relationship diagram is shown below:

Initially, when I started the job, it looked very cumbersome and difficult considering the type of e-commerce website I was doing, but I was able to finish this in few days due to the set date given to all the participants to finish their community-based project.

Third Phase-Website Test Running/Deployment

It is noteworthy to know that building and completion of the e-commerce website could not have been successful without the use of some APIs like SEO and Cart for checkout. The third phase which is the final phase was to connect my database in MYSQL to my initial program in html through PHP MySQL commands:

i. mysqli_connect

ii. mysqli_query

iii. mysqli_fetch_array

iv. mysqli_close

Find below the steps that I took in order to connect/link my MYSQL database to my html through PHP

Step I: MySQLi procedural connection query

I created a file like index.php file and open and close the php code with tags before the html that I have already done in my html file, I then put my regular html content after it. If you open the file in a browser and you should see nothing apart from the title tag, if you see the error the username/password or database name may be wrong.

PHP will require that mysqli is enabled (it is on most PHP set ups).

The variable $db is created and assigned as the connection string. If there is a failure then an error message will be displayed on the page. If it is successful you will see PHP connect to MySQL.

Stage 2: Performing a database query

The mysql query is actually performed in the body of the html page, so additional php opening and closing tags were required. For the query, I specified a read of all the fields from a given table. The $query variable selects all rows in the table. I only changed the table name to my own table name in the database.

Initially, I received ‘Error querying database..’ error, but it was rectified by checking the table name and putting appropriate syntax between the two word “_” (which is an underscore).

Stage 3: Putting all the data on the page with 13 tables as earlier described.

The $result variable is the variable function which stores the query I made above, now we just need to go through all the rows of that query which I definitely need mysqli_fetch_array to store the rows in an array, storing the $result in mysqli_fetch_array and passing that into a variable called $row.

The $row now can be output in a while loop, here the rows of data will be echoed and displayed on the page to when there is no longer any rows of data left, Unlike the below example below, my table is 13 nos of table besides uses 4 fields in the table first_name, last_name, email and city.

With the above code, I was able to link my database to my website.

Stage 4: Closing off the connection

Closing the connection will require another set off opening and closing php tags after the closing html tag. It is always advisable and in best good practice to close the database connection when the querying is done.

As earlier discussed, database connections should always be closed off. One does not need to keep the connection variable $db after the initial connection but is considered best practice.

This I run and when I made payment by “Cash”. The buyer will receive a mail in the email address submitted during the purchase to confirm his payment as well as the delivery of the goods to the right destination as shown below. It such a beautiful experience to start an e-commerce website from the scratch and finished it using html, css, js, MYSQL, PHP.

Even though there may still be some other things that one may think of and wanted to add, please you can visit my github page to add or make any improvement to the existing code in order to make this website one of the most responsive E-commerce websites.

Many thanks to #GADS2020 for the opportunity given to me to deliver this project in time and use your platform to leverage on my skills in website development, even though I did Cloud related option. Thank you once again and God bless you.

Please give me thumb up, if you are okay with my experience.

:simple_smile:

Please acknowledge my blog by clicking this; :clap:

Hi, I'm Julius, a Multi cloud Engineer, front-end web designer/developer,skilled in HTML, CSS and CMS integration. I create professional, responsive websites.