KKU BIO

Appearance

Profile System ​

Overview ​

The profile system allows users to view and manage their personal information, including account details and preferences.

Features ​

  • View profile information
  • Update personal details
  • Change password
  • Manage account settings
  • Upload profile picture

Profile Management ​

Viewing Profile ​

Users can view their profile information including:

  • Username
  • Email address
  • Mobile number
  • Account status
  • Profile picture

Updating Profile ​

Users can update various aspects of their profile:

  1. Personal Information
    • Email address
    • Mobile number
    • Profile picture
  2. Security Settings
    • Password change
    • Account preferences

Security Features ​

  • Input validation for all updates
  • Password verification for sensitive changes
  • Secure file upload for profile pictures
  • XSS prevention
  • CSRF protection

User Interface ​

  • Responsive design
  • Intuitive layout
  • Clear feedback messages
  • Easy navigation

Profile Picture Management ​

  • Supported formats: JPG, PNG, GIF
  • Maximum file size: 2MB
  • Automatic resizing
  • Default avatar for new users

Error Handling ​

  • Clear error messages
  • Input validation feedback
  • File upload restrictions
  • Session management
  • User authentication system
  • File upload system
  • Database management
  • Session handling

Profile Page Documentation ​

Overview ​

The profile page (profile.php) serves as the public-facing page for each user, displaying their username, avatar, and social media links in a clean, modern interface.

Profile Interface ​

Public Profile View ​

Public ProfileThe public-facing profile page with social media links and custom styling

Profile Editing Interface ​

Edit ProfileThe profile editing interface where users can customize their details

Implementation Details ​

1. Initial Setup and Data Retrieval ​

php
<?php
session_start();
require_once "admin/pages/config.php";

$username = $_GET['user'];

// Fetch user settings
$stmt2 = $conn->prepare("SELECT * FROM settings WHERE username = ?");
$stmt2->bind_param("s", $username); 
$stmt2->execute();
$result_settings = $stmt2->get_result();

// Fetch user details
$stmt = $conn->prepare("SELECT * FROM users WHERE username = ?");
$stmt->bind_param("s", $username);
$stmt->execute();
$result_user = $stmt->get_result();

Key Features:

  • Session initialization
  • Database connection setup
  • Secure parameter handling using prepared statements
  • Separate queries for user details and settings

2. User Validation and 404 Handling ​

php
if ($result_user->num_rows > 0) {
    $row_user = $result_user->fetch_assoc();
} else {
    header("Location: 404.html");
    exit();
}

Features:

  • User existence validation
  • Graceful handling of non-existent profiles
  • Clean redirect to 404 page

3. Social Links Processing ​

php
$social_links = [];
while ($row = $result_settings->fetch_assoc()) {
    $social_links[] = $row;
}

Features:

  • Array initialization for social links
  • Efficient data structure for link storage
  • Easy iteration for display

4. Visit Tracking Implementation ​

php
$ip_address = $_SERVER['REMOTE_ADDR'];
$profile_id = $row_user['id'];

$visit_stmt = $conn->prepare("INSERT INTO profile_visitors (profile_id, ip) VALUES (?, ?)");
$visit_stmt->bind_param("is", $profile_id, $ip_address);
$visit_stmt->execute();
$visit_stmt->close();

Features:

  • Visitor IP tracking
  • Profile visit logging
  • Prepared statement for security
  • Proper resource cleanup

5. HTML Structure and Meta Tags ​

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="shortcut icon" href="https://foras.ca/wp-content/uploads/2024/07/Logo_500x500.png" type="image/webp">
    <link rel="icon" href="https://foras.ca/wp-content/uploads/2024/07/cropped-Logo_100x100.png" type="image/webp">
    <link rel="canonical" href="https://foras.ca/Links">
    <title><?php echo htmlspecialchars($row_user['username']); ?></title>

Features:

  • Proper meta tag implementation
  • Responsive viewport settings
  • Favicon configuration
  • XSS prevention with htmlspecialchars
  • SEO optimization with canonical URL

6. Profile Display Section ​

html
<div id="background_div">
    <div class="page-full-wrap">
        <img class="display-image" src="https://foras.ca/wp-content/uploads/2024/07/Mazen_avatar.jpg" alt="User Avatar">
        <h2 class="page-title"><?php echo htmlspecialchars($row_user['username']); ?></h2>

Features:

  • Clean container structure
  • Responsive image display
  • Secure username output
  • Semantic HTML usage

7. Social Icons Section ​

php
<div class="flex-both-center">
    <?php foreach ($social_links as $link): ?>
        <div class="page-social">
            <a class="social-icon-anchor" href="<?php echo htmlspecialchars($link['linkURL']); ?>" target="_blank">
                <i class="<?php echo htmlspecialchars($link['iconClass']); ?>"></i>
            </a>
        </div>
    <?php endforeach; ?>
</div>

Features:

  • Flexible social icon layout
  • Dynamic icon rendering
  • Secure URL handling
  • External link safety with target="_blank"

8. Social Links List ​

php
<div class="mt-24">
    <?php foreach ($social_links as $item): ?>
        <div class="page-item-wrap">
            <a class="page-item-each" href="<?php echo htmlspecialchars($item['linkURL']); ?>" target="_blank">
                <i class="<?php echo htmlspecialchars($item['iconClass']); ?>"></i>
                <span class="item-title"><?php echo htmlspecialchars($item['linkName']); ?></span>
            </a>
        </div>
    <?php endforeach; ?>
</div>

Features:

  • Consistent link styling
  • Icon and text combination
  • XSS prevention
  • Responsive layout

Security Features ​

  1. SQL Injection Prevention

    • Prepared statements for all queries
    • Parameterized user input
    • Secure database handling

  2. XSS Prevention

    • htmlspecialchars for all output
    • Proper encoding of special characters
    • Secure handling of user data

  3. Resource Management

    php
    $stmt->close();
$stmt2->close();
$conn->close();
    • Proper closure of database connections
    • Statement cleanup
    • Resource optimization

Styling and UI ​

  1. External Resources

    html
    <link href="https://fonts.googleapis.com/css2?family=Balsamiq+Sans:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link rel="stylesheet" href="assets/css/style.css">
    • Google Fonts integration
    • Font Awesome icons
    • Custom styling

  2. Responsive Design

    • Mobile-first approach
    • Flexible layouts
    • Viewport optimization

Performance Optimization ​

  1. Resource Loading

    • Efficient CSS loading
    • Optimized image delivery
    • Minimal JavaScript usage

  2. Database Optimization

    • Prepared statement reuse
    • Efficient query structure
    • Proper indexing

Analytics Integration ​

  1. Visit Tracking
    • IP address logging
    • Profile visit counting
    • Analytics data collection

Error Handling ​

  1. User Not Found
    • 404 page redirection
    • Clean error handling
    • User-friendly messaging
  • User settings management
  • Social link administration
  • Profile customization
  • Analytics dashboard