12 KiB
12 KiB
Header Consolidation - Detailed Comparison
Visual side-by-side comparison of the consolidated header system.
File Structure
Before (Duplicated Code)
header01.php (400 lines) ─┐
├─ 280 lines DUPLICATE
header02.php (400 lines) ─┘
┌─ 120 lines DIFFERENT
Total: 800 lines | Duplication: 70%
After (Consolidated)
header.php (300 lines) ┐
header_config.php (100 lines) ├─ Zero duplication
┘
Total: 400 lines | Duplication: 0%
Configuration Comparison
Variant 01 Configuration
$header_config['01'] = [
// Style
'header_class' => 'header-one white-menu menu-absolute',
'header_bg_class' => '', // Transparent
'welcome_text_color' => '#fff', // White text
'shadow_style' => '0px 8px 16px rgba(0, 0, 0, 0.1)',
// Assets
'logo_image' => 'assets/images/logos/logo.png',
'logo_mobile_image' => 'assets/images/logos/logo.png',
// Features
'trip_submenu' => true, // Full submenu
'member_area_menu' => true, // Show to members
// Security
'include_security_headers' => true, // HTTPS headers
'include_csrf_service' => true, // CSRF tokens
// CSS
'extra_css_files' => ['header_css.css'],
'style_css_version' => '?v=1',
];
Variant 02 Configuration
$header_config['02'] = [
// Style
'header_class' => 'header-one',
'header_bg_class' => 'bg-white', // White background
'welcome_text_color' => '#111111', // Dark text
'shadow_style' => '2px 2px 5px 1px rgba(0, 0, 0, 0.1), -2px 0px 5px 1px rgba(0, 0, 0, 0.1)',
// Assets
'logo_image' => 'assets/images/logos/logo-two.png',
'logo_mobile_image' => 'assets/images/logos/logo-two.png',
// Features
'trip_submenu' => false, // Simplified menu
'member_area_menu' => false, // Hidden
// Security
'include_security_headers' => false, // No headers
'include_csrf_service' => false, // No CSRF
// CSS
'extra_css_files' => [
'https://fonts.googleapis.com/icon?family=Material+Icons',
'assets/css/jquery-ui.min.css',
'https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css',
],
'style_css_version' => '',
'extra_styles' => true, // Banner styles
];
Visual Differences
Header Class Comparison
| Aspect | Variant 01 | Variant 02 |
|---|---|---|
| Header Class | header-one white-menu menu-absolute |
header-one |
| Background | Transparent (no bg class) | White (bg-white) |
| Logo | logo.png (white) |
logo-two.png (dark) |
| Text Color | White (#fff) | Dark (#111111) |
| Menu Style | Absolute positioned overlay | Sticky/normal |
Visual Rendering
Variant 01:
┌────────────────────────────────────────────┐
│ [LOGO] [HOME] [ABOUT] [TRIPS ▼] ... [LOGIN]│ ← White text
└────────────────────────────────────────────┘
(Transparent/overlay background)
Variant 02:
┌────────────────────────────────────────────┐
│ [LOGO] [HOME] [ABOUT] [TRIPS] ... [LOGIN]│ ← Dark text
└────────────────────────────────────────────┘
(White background)
Feature Matrix
| Feature | Variant 01 | Variant 02 |
|---|---|---|
| Header Styling | ||
| - White menu | ✅ | ❌ |
| - Transparent background | ✅ | ❌ |
| - White background | ❌ | ✅ |
| Navigation | ||
| - Full trips submenu | ✅ | ❌ |
| - Tour List link | ✅ | ❌ |
| - Tour Grid link | ✅ | ❌ |
| - Members Area menu | ✅ | ❌ |
| Styling | ||
| - HTTPS enforcement | ✅ | ❌ |
| - Security headers | ✅ | ❌ |
| - CSRF tokens | ✅ | ❌ |
| - Simple shadow | ✅ | ❌ |
| - Enhanced shadow | ❌ | ✅ |
| - Page banner styles | ❌ | ✅ |
| External Libraries | ||
| - Material Icons | ❌ | ✅ |
| - jQuery UI | ❌ | ✅ |
| - AOS (animations) | ❌ | ✅ |
| - Version param on CSS | ✅ | ❌ |
Code Reduction Examples
Example 1: Logo Implementation
Before (Two Files):
// header01.php
<img src="assets/images/logos/logo.png" style="width:200px;" alt="Logo">
// header02.php
<img src="assets/images/logos/logo-two.png" style="width:200px;" alt="Logo">
After (Single File with Config):
// header.php
<img src="<?php echo $config['logo_image']; ?>" style="<?php echo $config['logo_width']; ?>" alt="Logo">
// header_config.php
'01' => ['logo_image' => 'assets/images/logos/logo.png'],
'02' => ['logo_image' => 'assets/images/logos/logo-two.png'],
Lines Saved: 2 lines → 1 line logic (config-driven)
Example 2: Welcome Text Color
Before (Two Files):
// header01.php
<span style="color: #fff;">Welcome, <?php echo $_SESSION['first_name']; ?></span>
// header02.php
<span style="color: #111111;">Welcome, <?php echo $_SESSION['first_name']; ?></span>
After (Single File with Config):
// header.php
<span style="color: <?php echo $config['welcome_text_color']; ?>;">Welcome, <?php echo $_SESSION['first_name']; ?></span>
// header_config.php
'01' => ['welcome_text_color' => '#fff'],
'02' => ['welcome_text_color' => '#111111'],
Lines Saved: 2 files with duplication → 1 line logic (config-driven)
Example 3: Conditional Menus
Before (Two Files):
// header01.php
<?php if ($is_member): ?>
<li class="dropdown"><a href="#">Members Area</a>
<ul><li><a href="#">Coming Soon!</a></li></ul>
</li>
<?php endif; ?>
// header02.php
<!-- No Members Area Menu -->
<!-- (Menu logic duplicated, just removed) -->
After (Single File with Config):
// header.php
<?php if ($config['member_area_menu'] && $is_member): ?>
<li class="dropdown"><a href="#">Members Area</a>
<ul><li><a href="#">Coming Soon!</a></li></ul>
</li>
<?php endif; ?>
// header_config.php
'01' => ['member_area_menu' => true],
'02' => ['member_area_menu' => false],
Lines Saved: 2 implementations → 1 implementation (config-driven)
Example 4: Security Headers
Before (Two Files):
// header01.php
if (empty($_SERVER['HTTPS']) || $_SERVER['HTTPS'] === 'off') {
header('Location: https://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'], true, 301);
exit;
}
header('Strict-Transport-Security: max-age=31536000; includeSubDomains; preload');
header('X-Content-Type-Options: nosniff');
// ... 4 more header() calls
// header02.php
// No security headers (omitted entirely)
After (Single File with Config):
// header.php
if ($config['include_security_headers']) {
if (empty($_SERVER['HTTPS']) || $_SERVER['HTTPS'] === 'off') {
header('Location: https://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'], true, 301);
exit;
}
header('Strict-Transport-Security: max-age=31536000; includeSubDomains; preload');
// ...
}
// header_config.php
'01' => ['include_security_headers' => true],
'02' => ['include_security_headers' => false],
Lines Saved: 2 complete implementations → 1 implementation (config-driven)
Trips Menu Comparison
Variant 01: Full Submenu
<li><a href="trips.php">Trips</a>
<ul>
<li><a href="tour-list.html">Tour List</a></li>
<li><a href="tour-grid.html">Tour Grid</a></li>
<li><a href="tour-sidebar.html">Tour Sidebar</a></li>
<li><a href="trip-details.php">Tour Details</a></li>
<li><a href="tour-guide.html">Tour Guide</a></li>
</ul>
</li>
Variant 02: Simplified Menu
<li><a href="trips.php">Trips</a></li>
Consolidated: Single Code Block
<?php if ($config['trip_submenu']): ?>
<li><a href="trips.php">Trips</a>
<ul>
<li><a href="tour-list.html">Tour List</a></li>
<li><a href="tour-grid.html">Tour Grid</a></li>
<li><a href="tour-sidebar.html">Tour Sidebar</a></li>
<li><a href="trip-details.php">Tour Details</a></li>
<li><a href="tour-guide.html">Tour Guide</a></li>
</ul>
</li>
<?php else: ?>
<li><a href="trips.php">Trips</a></li>
<?php endif; ?>
Shadow Style Comparison
Variant 01: Simple Shadow
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
Effect: Subtle depth, light glow
Variant 02: Enhanced Shadow
box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.1),
-2px 0px 5px 1px rgba(0, 0, 0, 0.1);
Effect: Double shadow with directional emphasis
Consolidated:
// header_config.php
'01' => ['shadow_style' => '0px 8px 16px rgba(0, 0, 0, 0.1)'],
'02' => ['shadow_style' => '2px 2px 5px 1px rgba(0, 0, 0, 0.1), -2px 0px 5px 1px rgba(0, 0, 0, 0.1)'],
// header.php
box-shadow: <?php echo $config['shadow_style']; ?>;
CSS File Handling
Variant 01 (Minimal Extra CSS)
'extra_css_files' => [
'header_css.css',
],
'style_css_version' => '?v=1',
Variant 02 (Extended CSS)
'extra_css_files' => [
'https://fonts.googleapis.com/icon?family=Material+Icons',
'assets/css/jquery-ui.min.css',
'https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css',
],
'style_css_version' => '',
'extra_styles' => true,
Consolidated Loading:
<?php foreach ($config['extra_css_files'] as $css_file): ?>
<link rel="stylesheet" href="<?php echo $css_file; ?>">
<?php endforeach; ?>
<link rel="stylesheet" href="assets/css/style_new.css<?php echo $config['style_css_version']; ?>">
Page Setup Comparison
Old Way (Two Different Files)
// Homepage
<?php require_once('header01.php'); ?>
// Trip details page
<?php require_once('header02.php'); ?>
New Way (Single File, Config-Driven)
// Homepage
<?php define('HEADER_VARIANT', '01'); require_once('header.php'); ?>
// Trip details page
<?php define('HEADER_VARIANT', '02'); require_once('header.php'); ?>
Maintenance Workflow
Updating a Feature
Before (Two Files - Must Edit Both):
1. Edit header01.php nav menu
2. Edit header02.php nav menu
3. Test variant 1
4. Test variant 2
5. Risk: Forgetting to sync one file
After (One File - Edit Once):
1. Edit header.php nav logic
2. Test variant 1
3. Test variant 2
4. Done - always in sync
Summary: Code Reduction
┌─────────────────────────────────────────────────────┐
│ CONSOLIDATION IMPACT │
├─────────────────────────────────────────────────────┤
│ │
│ Before: 800 lines (70% duplication) │
│ After: 400 lines (0% duplication) │
│ Savings: 400 lines (50% reduction) │
│ │
│ Per Change Effort: │
│ Before: ~5 minutes (2 files to edit) │
│ After: ~2.5 minutes (1 file + 1 config) │
│ │
│ Maintenance ROI: Very High 📈 │
│ │
└─────────────────────────────────────────────────────┘
You've successfully eliminated code duplication while maintaining all formatting and functional differences! 🎉