Build Ecommerce site from scratch by Opencart Framework

Build Ecommerce Website from scratch by Opencart Framework

Table of Contents

1Byte will walk you through the process of building your own e-commerce website from the ground up in this tutorial. Don’t be concerned if you don’t know anything about coding. Simply copy and paste the steps in the tutorial to build your own ecommerce site. If 1Byte can accomplish it, so can you ^^

CLOUD-SERVER-BUILD-ECOMMERCE-SITE-FROM-SCATCH-WITH-OPENCART-FRAMEWORK

As a way to keep the tutorial short and simple for viewers, 1Byte will be split up into three separate sections.

  • Part 1: You’ll learn how to set up Opencart framework on your Cloud Server (YOU ARE HERE)
  • Part 2: How to customize Opencart framework on your website
  • Part 3: Design and build your own Ecommerce site

PREREQUISITES

1) Domain name

Everything on the internet needs a domain name. If you don’t already own a domain name, you can get a good deal directly on 1Byte from this link or just navigate directly to our website. 1Byte will choose the domain: in this tutorial.
→ Demonstration site: 1byte-ecommerce-site.com

2) Web Hosting

1Byte will give you 3 suggestions as follows:

  • Shared Hosting is a good option if you’re simply trying out, testing or tinkering an Opencart framework and don’t plan on using it for anything else. This will save you money, but the performance will be lower – ( NAH!…)
  • Cloud Hosting is an excellent option if you intend to start your business at small to medium scale. You should not share your resources with others, especially if you have an ecommerce site. Because it will have a negative impact on the performance of your website – (RECOMMENDED)
  • Cloud Server will definitely be the best option. A must-have  – for heavy traffic sites! In addition to benefiting from dedicated resources, the notch-up hardware (Cloud Hosting). Now you can control everything from the underlying infrastructure to the surface of your site. Which Cloud Hosting is limited in this side. Keep in mind that your website’s performance will be improved if your server hardware configuration is robust. A bit pricey, but well worth every penny! – (PERFECT CHOICE)

(In this demo, 1Byte will use Cloud Server – Basic Cloud 2 to host the web server)

GET YOUR HANDS WET (PART 1)

1. INSTALL REQUIRED PACKAGES

  1. SSH to your server with provided credential on your email.
  2. Update system package list to update all packages to the latest available versions.
    $ sudo apt update -y && apt full-upgrade -y
    $ sudo apt install curl -y
    
  3. The latest versions of OpenCart only support PHP version 8.0. Ubuntu 20.04 does not contain PHP 8.0 in its default repository list. To install it, add the PHP repository to the APT.Add ppa:ondrej/php repository.
    $ sudo apt -y install software-properties-common
    $ sudo add-apt-repository ppa:ondrej/php
    (Remember to press "Enter" keyboard to continue)
    
  4. Update system package manager.
    $ sudo apt update
    
  5. Install PHP 8.0 and more modules.
    $ sudo apt install apache2 mysql-server php8.0 libapache2-mod-php8.0 php8.0-mysql php8.0-curl php8.0-xml php8.0-zip php8.0-gd php8.0-cli php8.0-fpm libapache2-mod-fcgid wget unzip -y
    
  6. Enable Apache2 with PHP-FPM.
    $ sudo a2enmod proxy_fcgi setenvif
    $ sudo a2enconf php8.0-fpm
    
  7. Restart Apache service.
    $ sudo systemctl restart apache2

2. CREATE OPENCART DATABASE

  1. Log in to MySQL shell. On password prompt, just press ENTER to continue.
    $ sudo mysql -u root -p
    (Remember to input your root's password)
    
  2. Crate a database called opencart.
    CREATE DATABASE opencart;
    
  3. Crate a user called opencart with a password StrongPassword.
    CREATE USER 'opencart'@'localhost' IDENTIFIED BY 'StrongPassword';
    
  4. Grant all database privileges to the user.
    GRANT ALL PRIVILEGES ON opencart . * TO 'opencart'@'localhost';
    
  5. Save the changes.
    FLUSH PRIVILEGES;
    
  6. Exit the shell.
    exit;

HERE ARE SOME IMPORTANT INFO YOU SHOULD PAY ATTENTION

  • Your database name: opencart
  • Your username to login database: opencart
  • Your password to login database: StrongPassword

→ Later on, based on these info. You can connect to your database

(The above values are just examples, you should change them at your own discretion)

3. INSTAL OPENCART

  1. Download the latest OpenCart version.
  2. $ wget https://github.com/opencart/opencart/archive/refs/heads/master.zip
    
  3. Unzip the downloaded file.
    $ sudo unzip master.zip
    
  4. Create the installation directory /var/www/html/opencart.
    $ sudo mkdir /var/www/html/opencart
    
  5. Move the unzipped files to the installation directory.
    $ sudo mv opencart-master/* /var/www/html/opencart
    
  6. Copy OpenCart configuration files.
    $ sudo cp /var/www/html/opencart/upload/{config-dist.php,config.php}
    $ sudo cp /var/www/html/opencart/upload/admin/{config-dist.php,config.php}
    
  7. Change ownership of the installation directory.
    $ sudo chown -R www-data:www-data /var/www/html/opencart
    
  8. Change access permissions for the installation directory.
    $ sudo chmod -R 755 /var/www/html/opencart

4. CONFIGURE APACHE2

  1. Create a new Apache virtual host file named opencart.conf.
    $ sudo nano /etc/apache2/sites-available/opencart.conf
    

    Add the following code to the file. Save and close the file.

    Note: In this case, we’ve merely temporarily configured http (not https, which is insecure) on port 80 to receive the domain name 1byte-ecommerce-site.com. Later, we will configure port 443 (https, secure) further and redirect all incoming-traffic from port 80 to port 443.

    
    <VirtualHost *:80>
        ServerAdmin admin@1byte-ecommerce-site.com
        DocumentRoot /var/www/html/opencart/upload/
        ServerName 1byte-ecommerce-site.com
        ServerAlias www.1byte-ecommerce-site.com
        <Directory /var/www/html/opencart/upload/>
            Options FollowSymLinks
            AllowOverride All
            Order allow,deny
            Allow from all
        </Directory>
        ErrorLog /var/log/apache2/1byte-ecommerce-site.com-error_log
        CustomLog /var/log/apache2/1byte-ecommerce-site.com-access_log common
    </VirtualHost>
    
  2. Disable Apache default configuration file.
    $ sudo a2dissite 000-default.conf
    
  3. Enable OpenCart Apache configuration file.
    $ sudo a2ensite opencart.conf
    
  4. Enable Apache rewrite mode.
    $ sudo a2enmod rewrite
    
  5. Restart Apache service.
    $ sudo systemctl restart apache2

5. ACCESS OPENCART WEB INTERFACE

To access the OpenCart Web Interface, go to your browser and visit http://Server_IP/. For example:

Build Ecommerce site from scratch by Opencart Framework

If you’ve made it this far, congrats! You’ve completed Part 1 of the journey. 

Continue reading to enter Part 2 of this series. In the next part, 1Byte will walk you through connecting to the database you established, creating an administrator account, and other settings.

NO MORE BABBLING, HANDS ON (PART 2)

Opencart has been installed on your Cloud Server as depicted in the following image, in the previous post (part 1).

(Now you just need to click “Continue”)

(You’ve already met most of its prerequisites in Part 1. Just click “Continue” and you’re done)

NOTE:

1) Having a red check mark in the “Status” column indicates that a missing package has been installed.

You need to go back to Part 1 and do it all over again

2) The following directory will hold all of the website’s data:

/var/www/html/opencart

(You can check directly on Cloud Server as shown above)

 

The next page will require you to fill in the database details. Enter the details you defined in the MySQL database and click ‘Continue’.

NOTE: At this step, we need to pay attention to the following:

  • (1) + (2) + (3) + (4): The value to be filled in will be taken from Part 1

(If you don’t recall these information, please refer back to Part 1 to double-check.)

  • (5) + (6) + (7): This is the information you’ll need to access your Opencart’s management page (the GUI interface).

When you click “Continue” (8), you will be sent to the web page displayed below. This implies you’ve installed and configured Opencart on your website successfully.