基于PHP&MySQL实现用户积分进度条：页面无显示排查及数值展示需求

Hey Sam, let's tackle this progress bar issue step by step. First, we'll figure out why your current PHP code is showing nothing, then build a working solution that pulls data from your database and displays progress clearly.

Blank pages almost always come down to hidden errors or missing output. Let's fix that first:

• Enable PHP error reporting: Add these lines at the top of your PHP file to see what's breaking things:

  error_reporting(E_ALL);
  ini_set('display_errors', 1);
  

• Verify database data: After fetching points from your database, use var_dump($current_points, $target_points); to confirm you're actually getting values. If this outputs nothing, your database query or connection is the problem.
• Check for HTML output: Make sure your PHP code is actually echoing content to the page. If you're only fetching data but not printing any HTML, the page will stay blank.

Here's a complete, tested solution that reads from your database, shows the "current/target" value, and displays a visual progress bar:

Step 1: PHP Database Fetch (Adjust to Your Setup) #

This example uses prepared statements (critical for security) to pull user points from your database:

<?php
// Turn on error reporting to catch issues
error_reporting(E_ALL);
ini_set('display_errors', 1);

// Connect to your database (replace with your credentials)
$db_conn = mysqli_connect('localhost', 'your_username', 'your_password', 'your_database');

if (!$db_conn) {
    die("Database connection failed: " . mysqli_connect_error());
}

// Fetch user points (update the query to match your table/fields)
$user_id = 1; // Replace with actual user ID (from session, auth, etc.)
$points_query = "SELECT current_points, target_points FROM user_points WHERE id = ?";
$stmt = mysqli_prepare($db_conn, $points_query);
mysqli_stmt_bind_param($stmt, "i", $user_id);
mysqli_stmt_execute($stmt);
$points_result = mysqli_stmt_get_result($stmt);

$user_points = mysqli_fetch_assoc($points_result);

// Calculate progress (avoid division by zero with a fallback)
$current = $user_points['current_points'] ?? 0;
$target = $user_points['target_points'] ?? 100; // Fallback if target is missing/0
$progress_percent = min(100, ($current / $target) * 100); // Cap at 100% if current exceeds target

mysqli_close($db_conn);
?>

Step 2: HTML & CSS for the Progress Bar #

This adds the visual progress bar and displays the "25/30" style text:

<!DOCTYPE html>
<html>
<head>
    <style>
        .points-progress {
            width: 350px;
            margin: 2rem 0;
            font-family: 'Arial', sans-serif;
        }
        .progress-header {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }
        .progress-bar-container {
            height: 28px;
            background-color: #e2e8f0;
            border-radius: 14px;
            overflow: hidden;
        }
        .progress-bar-fill {
            height: 100%;
            background-color: #10b981;
            width: <?php echo $progress_percent; ?>%;
            transition: width 0.3s ease;
            display: flex;
            align-items: center;
            padding-left: 12px;
            color: white;
            font-size: 0.9rem;
        }
    </style>
</head>
<body>
    <div class="points-progress">
        <div class="progress-header">积分进度: <?php echo $current; ?>/<?php echo $target; ?></div>
        <div class="progress-bar-container">
            <div class="progress-bar-fill">
                <?php echo round($progress_percent); ?>%
            </div>
        </div>
    </div>
</body>
</html>

Key Tips to Avoid Future Issues #

• Security first: Always use prepared statements (like the example) instead of concatenating user input into SQL queries—this prevents SQL injection attacks.
• Handle edge cases: The fallback for target_points ensures you never divide by zero if a user's target is missing or set to 0.
• Style flexibility: Tweak the CSS colors, width, and animation to match your site's design. The transition makes the progress bar fill smoothly when the page loads.

Chances are:

1. Error reporting was off, so you couldn't see database connection failures or syntax errors.
2. You fetched data from the database but never echoed any HTML to display it.
3. Your query returned no data (maybe a wrong user ID or missing table/fields).

内容的提问来源于stack exchange，提问作者Sam