PHP MySQL eCommerce Admin Panel Tutorial Tutorial

Configuration

In our previous article, we learned about, How to install XAMPP on Windows, Mac and or UBUNTU. Now in this article, we are going to configure our development environment. We are creating an admin panel for dealsato.xyz. So for our admin panel, we are going to host it on admin.dealsato.dev. Currently, if we launch XAMPP Control panel and visit the http://localhost we check the XAMPP dashboard. And dashboard files are available in XAMPP/htdocs folder. I don't want to overwrite the files available in the htdocs folder. Instead of this, I want if we visit http://admin.dealsato.dev then it will open files available in our development directory. To achieve this, the scenario we are going to configure XAMPP.

You may skip to the appropriate section of this article based on your OS.
Configure for Windows
Configure for Mac
Configure for Ubuntu

Note: We are performing this step to create multiple development websites. You can also host your files in htdocs, but in such scenario, we are able to host only one website at a time. Also, you may need special privileges to modify files in the htdocs folder.

Let's start the configuration process for Windows first

XAMPP Configuration Steps for Windows

First, we need to create an entry of admin.dealsato.dev and dealsato.dev in Windows host file. For this open notepad as administrative privileges.
host (without any extension so you need to select All Files) file is available in "C:\Windows\System32\drivers\etc\"
Add following lines and save file
127.0.0.1 dealsatoz.dv
127.0.0.1 admin.dealsatoz.dv
If you are able to see the image you can check we have other two entries for our vLemonn.com development websites.

 

Next, we need to add two entries in httpd-vhosts.conf file available in Xampp Installation directory "C:\xampp\apache\conf\extra\httpd-vhosts.conf" Following are the code we need to enter in httpd-vhosts.conf.

<VirtualHost *:80>
    ServerAdmin webmaster@dealsatoz.dv
    DocumentRoot "C:/Data/Work/Projects/admin.dealsato.xyz/"
    ServerName admin.dealsatoz.dv
    ServerAlias www.admin.dealsatoz.dv
    ErrorLog "logs/admin.dealsatoz.dv.log"
    CustomLog "logs/admin.dealsatoz.dv-access.log" common
    DirectoryIndex index.php
    <Directory "C:/Data/Work/Projects/admin.dealsato.xyz/">
        Options All
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>

<VirtualHost *:80>
    ServerAdmin webmaster@dealsatoz.dv
    DocumentRoot "C:/Data/Work/Projects/dealsato.xyz/"
    ServerName dealsatoz.dv
    ServerAlias www.dealsatoz.dv
    ErrorLog "logs/dealsatoz.dv.log"
    CustomLog "logs/dealsato.dv-access.log" common
    DirectoryIndex index.php
    <Directory "C:/Data/Work/Projects/dealsato.xyz/">
        Options All
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>

 

In above code, we are adding two websites

  1. admin.dealsatoz.dv: It is for current tutorial series.
  2. dealsatoz.dv: It is for our upcoming tutorial for the e-commerce website.

Now we need to create folders for both the websites. Finally, we are going to restart apache from XAMPP Control Panel. In the last visit admin.dealsato.dv. Following is the image for the browser.

Finally, our development website is ready. Now, let's check configuration process for Ubuntu.

XAMPP Configuration Steps for UBUNTU

First we are going to edit host file. For this open terminal. Now open host file using the following command
“sudo nano /etc/hosts”

Add following lines and save file using keyboard short cut to save ctrl+o and ctrl+k to close
127.0.0.1 dealsatoz.dv
127.0.0.1 admin.dealsatoz.dv

Finally, we need to edit httpd-vhosts.conf file. Following is the command to open httpd-vhosts.conf file.
“sudo nano /opt/lampp/etc/extra/httpd-vhosts.conf”

Add following lines in httpd-vhosts.conf file

<VirtualHost admin.dealsatoz.dv:80>
    ServerAdmin webmaster@dealsato.dv
    DocumentRoot "/home/mayank/Documents/admin.dealsato.xyz/"
    ServerName admin.dealsatoz.dv
    ServerAlias www.admin.dealsatoz.dv
    ErrorLog "logs/admin.dealsatoz.dv.log"
    CustomLog "logs/admin.dealsatoz.dv-access.log" common
    DirectoryIndex index.php
    <Directory "/home/mayank/Documents/admin.dealsato.xyz/">
        Options All
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>

<VirtualHost dealsatoz.dv:80>
    ServerAdmin webmaster@dealsatoz.dv
    DocumentRoot "/home/mayank/Documents/dealsato.xyz/"
    ServerName dealsatoz.dv
    ServerAlias www.dealsatoz.dv
    ErrorLog "logs/dealsatoz.dv.log"
    CustomLog "logs/dealsatoz.dv-access.log" common
    DirectoryIndex index.php
    <Directory "/home/mayank/Documents/dealsato.xyz/">
        Options All
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>

 

Finally, ensure "Include etc/extra/httpd-vhosts.conf" line is uncommented in "/opt/lampp/etc/httpd.conf" file. You can use following command to edit httpd.conf
sudo nano /opt/lampp/etc/httpd.conf

For restarting XAMPP Services use following commands.
sudo /opt/lampp/lampp stop
sudo /opt/lampp/lampp start

Below is the browser output.

XAMPP Configuration Steps for Mac

Finally, for Mac the configuration steps are same as UBUNTU. Only paths are going to change.
Edit Host File "sudo nano /etc/hosts"
Edit httpd-vhosts.conf "sudo nano "/Volumes/Macintosh HD/Applications/Xampp/etc/extra/httpd-vhosts.conf"
 

<VirtualHost admin.dealsatoz.dv:80>
    ServerAdmin webmaster@dealsato.dv
    DocumentRoot "/Volumes/Macintosh HD/Users/vlemonn_mac/admin.dealsato.xyz/"
    ServerName admin.dealsato.dv
    ServerAlias www.admin.dealsato.dv
    ErrorLog "logs/admin.dealsato.dv.log"
    CustomLog "logs/admin.dealsato.dv-access.log" common
    DirectoryIndex index.php
    <Directory "/Volumes/Macintosh HD/Users/vlemonn_mac/admin.dealsato.xyz/">
        Options All
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>

<VirtualHost dealsatoz.dv:80>
    ServerAdmin webmaster@dealsato.dv
    DocumentRoot "/Volumes/Macintosh HD/Users/vlemonn_mac/dealsato.xyz/"
    ServerName dealsato.dv
    ServerAlias www.dealsato.dv
    ErrorLog "logs/dealsato.dv.log"
    CustomLog "logs/dealsato.dv-access.log" common
    DirectoryIndex index.php
    <Directory "/Volumes/Macintosh HD/Users/vlemonn_mac/dealsato.xyz">
        Options All
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>

 

Edit httpd.conf file and enable "Include etc/extra/httpd-vhosts.conf" sudo nano "/Volumes/Macintosh HD/Applications/Xampp/etc/httpd.conf"

Finally, restart apache and then visit http://admin.dealsato.dv.

Our Virtual host for admin.dealsato.dv is working fine. Next, we need to create a database so we can use it in our entire tutorial. For creating a database we need to open phpmyadmin. for this visit http://admin.dealsatoz.dv/phpmyadmin. If your MySQL services are not running (for us it is not running, check the image above) you will get the following page with MySQL Errors. The following image shows the error. 

For resolving this issue start the MySQL Services and refresh the page.

For creating a database click on database. Then provide your database name "dealsatoxyz". For the time being ignore the database username and password. We can use default user root and with blank "" password. Refer the following image for more information.

At last, we are going to install admin template which we are going to use in our entire tutorial. Visit https://github.com/puikinsh/gentelella and download the template. Extract the zip files.

From the extracted files we are interested in following folders

  • build
  • production
  • vendors

Copy above folders and paste it into your development directory. For us, We are going to use Windows environment. Our development folder is "C:/Data/Work/Projects/admin.dealsato.xyz/".

For rest of the tutorial, we are going to use Windows. OS is not important because we already know XAMPP is going to work on Windows, MAC, and UBUNTU.

Our configuration is done. Our local website is running. We have a database to store our website data. In our next article, we are going to download Visual Studio Code, which we are going to use for our development IDE.

...

About The Author

Hello, I am Mayank Sanghvi I am primarily a BI developer with experience in MSBI and Cognos BI Suit. Also having interest in various other technologies such as Android, Java, C#, ASP .NET and other. I enjoy learning new technologies and share my experience with others.

0 Comments
Leave A Comment

Please login to post your valuable comments.

add