KKU BIO

Appearance

Admin Barcode System Documentation ​

Overview ​

The admin barcode system (admin/pages/barcode.php) provides QR code generation functionality for user profiles. It generates a unique QR code for each user that links to their profile URL.

Features ​

  • Dynamic QR code generation
  • Downloadable QR codes
  • Responsive design
  • Session-based authentication
  • Modern UI with hover effects

Implementation Details ​

Session Management and Security ​

php
session_start();
require_once "config.php";

if (!isset($_SESSION['username'])) {
    header("Location: login.php");
    exit;
}
  • Ensures user authentication
  • Redirects unauthorized users
  • Includes necessary configurations

Profile URL Generation ​

php
$userLink1 = "https://profile.medbots.tech/" . htmlspecialchars($_SESSION['username']);
  • Creates unique profile URL
  • Sanitizes username output
  • Uses HTTPS for security

User Interface Components ​

1. Card Layout ​

html
<div class="card">
    <div class="card-body text-center">
        <div id="qr-code"></div>
        <h5 class="mt-2 mb-1"><?php echo htmlspecialchars($_SESSION['username']); ?></h5>
        <button class="btn-download" id="downloadQR">Download QR Code</button>
    </div>
    <div class="card-footer">
        <strong>QR Code Card</strong>
    </div>
</div>
  • Centered card design
  • QR code display area
  • Download button
  • Username display

2. Styling Features ​

css
.card {
    background: linear-gradient(135deg, #ece9e6, #ffffff);
    border-radius: 15px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}
  • Gradient background
  • Hover animations
  • Shadow effects
  • Responsive design

QR Code Generation ​

1. Library Integration ​

html
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
  • Uses qrcode.js library
  • CDN-based delivery
  • Lightweight implementation

2. QR Code Configuration ​

javascript
new QRCode(qrContainer, {
    text: text,
    width: size,
    height: size,
    colorLight: "#ffffff",
    colorDark: "#000000"
});
  • Configurable size (250x250 pixels)
  • Custom colors
  • Standard QR format
  • Error correction

Download Functionality ​

javascript
const downloadButton = document.getElementById('downloadQR');
downloadButton.addEventListener('click', function() {
    const qrCanvas = qrContainer.querySelector('canvas');
    const qrImage = qrCanvas.toDataURL("image/png")
        .replace("image/png", "image/octet-stream");
    const link = document.createElement('a');
    link.href = qrImage;
    link.download = 'qrcode.png';
    link.click();
});
  • One-click download
  • PNG format
  • Automatic file naming
  • Browser-compatible

QR Code Generator Interface ​

QR Code GeneratorThe QR code generation interface in the admin panel

Responsive Design ​

Mobile Optimization ​

css
@media (max-width: 768px) {
    #qr-code {
        height: 200px;
    }

    .card-body {
        padding: 20px;
    }
}
  • Adaptive sizing
  • Mobile-friendly layout
  • Optimized spacing
  • Touch-friendly buttons

UI Components ​

  1. Download Button
css
.btn-download {
    background-color: #28a745;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    transition: all 0.3s ease;
}
  • Clear call-to-action
  • Hover effects
  • Color-coded design
  • Smooth transitions

Integration Points ​

  • Sidebar navigation
  • Header components
  • Bootstrap framework
  • jQuery functionality

Security Considerations ​

  1. Session validation
  2. XSS prevention through htmlspecialchars
  3. Secure URL generation
  4. Protected admin access

Dependencies ​

  • Bootstrap 4.x
  • Font Awesome
  • jQuery
  • qrcode.js
  • Popper.js

Best Practices ​

  1. Performance

    • CDN usage for libraries
    • Optimized assets
    • Efficient DOM manipulation

  2. Security

    • Input sanitization
    • Session management
    • Secure redirects

  3. User Experience

    • Intuitive interface
    • Visual feedback
    • Mobile responsiveness
  • User profile system
  • Authentication system
  • Admin dashboard
  • Navigation system