PHP and MySQL-Based Online Eyewear Shop Website

Projects Inventory

5 months ago

Download code – PHP and MySQL-Based Online Eyewear Shop Website

Online Eyewear Shop Website

This project is an Online Eyewear Shop Website, a web-based application developed using PHP (OOP) and MySQL Database. The goal of this project is to provide a platform for eyewear businesses to sell their products online and for customers to browse, shop, and order eyewear conveniently. The website features an attractive user interface built with Bootstrap Framework and AdminLTE Template, offering several user-friendly features for both administrators and customers.

How Does the Online Eyewear Shop Website Work?

The Online Eyewear Shop Website is designed as an online shopping and order management platform for eyewear businesses. It serves two types of users:

Admin/Management: To manage the store’s products, categories, orders, and system settings.
Customers: To browse products, manage their shopping cart, and place orders.

Features

Admin Panel Features:

Login and Logout: Secure access to the admin panel.
Dashboard: Overview of website activities and statistics.
Category Management: Add, edit, and manage product categories.
Product Management: Maintain product listings with details and availability.
Inventory Management: Track product stock and availability.
Orders Management: View and process customer orders.
Customer Management: Manage customer information and accounts.
Reports: Generate printable daily reports.
Content Management: Edit site details, such as contact and about information.
System Settings: Update system information and manage admin accounts.

Customer Features:

Login and Registration: Customers must register to place orders.
Browse Products: View products by category or all listings.
Product Details: View detailed information about each product.
Shopping Cart: Add, update, or remove items in the cart.
Checkout: Place orders securely.
Order Tracking: View and track order history.
Account Management: Edit personal account details.

Technologies Used

PHP (OOP)
MySQL Database
HTML, CSS, JavaScript
jQuery and Ajax
Bootstrap Framework
AdminLTE Template
DataTables
XAMPP

Installation and Setup

Requirements:

Install a local web server such as XAMPP.
Download the source code zip file.

Steps to Install:

Enable GD Library: Ensure the GD Library is enabled in your php.ini file.
Start Services: Open the XAMPP Control Panel and start Apache and MySQL.
Extract Files: Extract the downloaded source code zip file.
Move Files: Copy the extracted folder to the htdocs directory of XAMPP.
Create Database: Open PHPMyAdmin (http://localhost/phpmyadmin) and create a database named oews_db.
Import SQL File: Import the provided SQL file (oews_db.sql) located in the database folder.
Run the Application:
- Customer Side: http://localhost/oews/
- Admin Side: http://localhost/oews/admin

Default Admin Access:

Username: admin
Password: admin123

Conclusion

This project is designed for educational purposes and can be customized for specific needs. It provides a complete framework for managing an online eyewear shop. You can explore and modify the source code to fit your requirements.

index PHP

<?php require_once('../config.php'); ?>
 <!DOCTYPE html>
<html lang="en" class="" style="height: auto;">
<?php require_once('inc/header.php') ?>
  <body class="sidebar-mini layout-fixed control-sidebar-slide-open layout-navbar-fixed sidebar-mini-md sidebar-mini-xs text-sm" data-new-gr-c-s-check-loaded="14.991.0" data-gr-ext-installed="" style="height: auto;">
    <div class="wrapper">
     <?php require_once('inc/topBarNav.php') ?>
     <?php require_once('inc/navigation.php') ?>
     <?php if($_settings->chk_flashdata('success')): ?>
    <script>
      alert_toast("<?php echo $_settings->flashdata('success') ?>",'success')
    </script>
    <?php endif;?>      
     <?php $page = isset($_GET['page']) ? $_GET['page'] : 'home';  ?>
      <!-- Content Wrapper. Contains page content -->
      <div class="content-wrapper  pt-3" style="min-height: 567.854px;">
     
        <!-- Main content -->
        <section class="content  text-dark">
          <div class="container-fluid">
            <?php 
              if(!file_exists($page.".php") && !is_dir($page)){
                  include '404.html';
              }else{
                if(is_dir($page))
                  include $page.'/index.php';
                else
                  include $page.'.php';

              }
            ?>
          </div>
        </section>
        <!-- /.content -->
  <div class="modal fade" id="uni_modal" role='dialog'>
    <div class="modal-dialog modal-md modal-dialog-centered rounded-0" role="document">
      <div class="modal-content rounded-0">
        <div class="modal-header">
        <h5 class="modal-title"></h5>
      </div>
      <div class="modal-body">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-dark rounded-0" id='submit' onclick="$('#uni_modal form').submit()">Save</button>
        <button type="button" class="btn btn-secondary rounded-0" data-dismiss="modal">Cancel</button>
      </div>
      </div>
    </div>
  </div>
  <div class="modal fade" id="uni_modal_right" role='dialog'>
    <div class="modal-dialog modal-full-height  modal-md rounded-0" role="document">
      <div class="modal-content rounded-0">
        <div class="modal-header">
        <h5 class="modal-title"></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span class="fa fa-arrow-right"></span>
        </button>
      </div>
      <div class="modal-body">
      </div>
      </div>
    </div>
  </div>
  <div class="modal fade" id="confirm_modal" role='dialog'>
    <div class="modal-dialog modal-md modal-dialog-centered rounded-0" role="document">
      <div class="modal-content rounded-0">
        <div class="modal-header">
        <h5 class="modal-title">Confirmation</h5>
      </div>
      <div class="modal-body">
        <div id="delete_content"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-dark rounded-0" id='confirm' onclick="">Continue</button>
        <button type="button" class="btn btn-secondary rounded-0" data-dismiss="modal">Close</button>
      </div>
      </div>
    </div>
  </div>
  <div class="modal fade" id="viewer_modal" role='dialog'>
    <div class="modal-dialog modal-md" role="document">
      <div class="modal-content">
              <button type="button" class="btn-close" data-dismiss="modal"><span class="fa fa-times"></span></button>
              <img src="" alt="">
      </div>
    </div>
  </div>
      </div>
      <!-- /.content-wrapper -->
      <?php require_once('inc/footer.php') ?>
  </body>
</html>

<?php require_once('../config.php'); ?>

<!DOCTYPE html>

<?php require_once('inc/header.php') ?>

<?php require_once('inc/topBarNav.php') ?>

<?php require_once('inc/navigation.php') ?>

<?php if($_settings->chk_flashdata('success')): ?>

alert_toast("<?php echo $_settings->flashdata('success') ?>",'success')

</script>

<?php endif;?>

<?php $page = isset($_GET['page']) ? $_GET['page'] : 'home'; ?>

<?php

if(!file_exists($page.".php") && !is_dir($page)){

include '404.html';

}else{

if(is_dir($page))

include $page.'/index.php';

else

include $page.'.php';

}

</div>

</section>

</div>

</div>

<button type="button" class="btn btn-secondary rounded-0" data-dismiss="modal">Cancel</button>

</div>

</button>

</div>

</div>

<h5 class="modal-title">Confirmation</h5>

</div>

</div>

<button type="button" class="btn btn-dark rounded-0" id='confirm' onclick="">Continue</button>

<button type="button" class="btn btn-secondary rounded-0" data-dismiss="modal">Close</button>

</div>

</div>

<?php require_once('inc/footer.php') ?>

</body>

</html>

login PHP

<?php require_once('../config.php') ?>
<!DOCTYPE html>
<html lang="en" class="" style="height: auto;">
 <?php require_once('inc/header.php') ?>
<body class="hold-transition login-page">
  <script>
    start_loader()
  </script>
  <style>
    body{
      background-image: url("<?php echo validate_image($_settings->info('cover')) ?>");
      background-size:cover;
      background-repeat:no-repeat;
      backdrop-filter: contrast(1);
    }
    #page-title{
      text-shadow: 6px 4px 7px black;
      font-size: 3.5em;
      color: #fff4f4 !important;
      background: #8080801c;
    }
  </style>
  <h1 class="text-center text-white px-4 py-5" id="page-title"><b><?php echo $_settings->info('name') ?></b></h1>
<div class="login-box">
  <!-- /.login-logo -->
  <div class="card card-dark my-2">
    <div class="card-body">
      <p class="login-box-msg">Please enter your credentials</p>
      <form id="login-frm" action="" method="post">
        <div class="input-group mb-3">
          <input type="text" class="form-control" name="username" autofocus placeholder="Username">
          <div class="input-group-append">
            <div class="input-group-text">
              <span class="fas fa-user"></span>
            </div>
          </div>
        </div>
        <div class="input-group mb-3">
          <input type="password" class="form-control"  name="password" placeholder="Password">
          <div class="input-group-append">
            <div class="input-group-text">
              <span class="fas fa-lock"></span>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-8">
            <a href="<?php echo base_url ?>">Go to Website</a>
          </div>
          <!-- /.col -->
          <div class="col-4">
            <button type="submit" class="btn btn-dark btn-block">Sign In</button>
          </div>
          <!-- /.col -->
        </div>
      </form>
      <!-- /.social-auth-links -->

      <!-- <p class="mb-1">
        <a href="forgot-password.html">I forgot my password</a>
      </p> -->
      
    </div>
    <!-- /.card-body -->
  </div>
  <!-- /.card -->
</div>
<!-- /.login-box -->

<!-- jQuery -->
<script src="<?= base_url ?>plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="<?= base_url ?>plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="<?= base_url ?>dist/js/adminlte.min.js"></script>

<script>
  $(document).ready(function(){
    end_loader();
  })
</script>
</body>
</html>

<?php require_once('../config.php') ?>

<!DOCTYPE html>

<?php require_once('inc/header.php') ?>

start_loader()

</script>

<style>

body{

background-image: url("<?php echo validate_image($_settings->info('cover')) ?>");

background-size:cover;

background-repeat:no-repeat;

backdrop-filter: contrast(1);

}

#page-title{

text-shadow: 6px 4px 7px black;

font-size: 3.5em;

color: #fff4f4 !important;

background: #8080801c;

}

</style>

<p class="login-box-msg">Please enter your credentials</p>

</div>

</div>

<a href="<?php echo base_url ?>">Go to Website</a>

</div>

</div>

</div>

</form>

<!-- <p class="mb-1">

<a href="forgot-password.html">I forgot my password</a>

</p> -->

</div>

</div>

</div>

$(document).ready(function(){

end_loader();

})

</script>

</body>

</html>

Download code – PHP and MySQL-Based Online Eyewear Shop Website

Online Eyewear Shop Website

How Does the Online Eyewear Shop Website Work?

Features

Admin Panel Features:

Customer Features:

Technologies Used

Installation and Setup

Requirements:

Steps to Install:

Default Admin Access:

Conclusion

index PHP

login PHP

Related Posts: