PHP隐藏字段传值未定义变量报错及Header响应式适配求助

Let's break down and fix your two problems step by step:

1. Undefined $user_id Variable Error #

Root Causes #

• You’re trying to use $user_id in your database query before it’s initialized. The extract($_POST) only populates variables when the form is submitted via POST—on the initial page load (a GET request), $_POST is empty, so $user_id doesn’t exist at all.
• You already have the logged-in user’s ID stored in $_SESSION['user_id'] (you even check this to redirect unauthenticated users to login), so relying on POST for this value is unnecessary and unreliable.
• There’s also a syntax bug in your user name output: $data['$user_name'] uses a dollar sign inside the array key, which looks for a key literally named $user_name instead of the correct user_name.

Fixes #

First, replace the uninitialized $user_id with the session value (this is the most reliable source for the logged-in user’s ID):

// Replace this line:
// $q=$d->select("user","user_id='$user_id'");
// With:
$user_id = $_SESSION['user_id']; // Pull the valid user ID from session
$q=$d->select("user","user_id='$user_id'");

Then fix the user name output syntax:

// Replace:
// <?php echo $data['$user_name']; ?>
// With:
<?php echo $data['user_name']; ?>

Bonus Security Tip
Directly concatenating variables into SQL queries risks SQL injection. If your dao class supports prepared statements, use them to harden your code:

// Example with mysqli prepared statements
$stmt = $d->conn->prepare("SELECT * FROM user WHERE user_id = ?");
$stmt->bind_param("i", $user_id); // "i" specifies the variable is an integer
$stmt->execute();
$result = $stmt->get_result();
$data = $result->fetch_array();

2. Responsive Header Adaptation Issues #

Root Causes #

Your current header uses basic Bootstrap grid classes but lacks proper responsive navigation handling. On small screens (like mobile devices), the navigation links will crowd together or wrap awkwardly because there’s no mechanism to collapse them into a mobile-friendly menu.

Fixes #

The simplest way to fix this is to use Bootstrap’s built-in navbar component, which handles responsive collapsing out of the box. Replace your existing header code with this:

<nav class="navbar navbar-default">
  <div class="container">
    <!-- Brand & Mobile Toggle Button -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-nav-collapse" aria-expanded="false">
        <span class="sr-only">Toggle Navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#home">
        <img src="img/firefox.png" height="30" width="30" alt="Logo">
      </a>
      <span class="navbar-text"><?php echo $data['user_name']; ?></span>
    </div>

    <!-- Collapsible Navigation Links -->
    <div class="collapse navbar-collapse" id="main-nav-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#home">Home</a></li>
        <li><a href="#account">Account</a></li>
        <li><a href="#contact">Contact Us</a></li>
        <li><a href="logout.php">Log Out</a></li>
      </ul>
    </div>
  </div>
</nav>

If you want to keep your custom header structure instead, add these CSS rules to handle small screens:

/* Responsive styles for custom header */
@media (max-width: 767px) {
  .main-menu ul {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    list-style: none;
  }
  .main-menu ul li {
    margin: 8px 0;
    text-align: right;
  }
  .logo, .main-menu {
    width: 100%;
  }
}

And update your grid classes to stack elements on mobile:

<div class="logo col-xs-12 col-sm-6">...</div>
<div class="main-menu col-xs-12 col-sm-6 text-right">...</div>

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