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.inifile. - 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
htdocsdirectory 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 thedatabasefolder. - 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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
<?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> |
login PHP
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
<?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> |