SQL/PHP 數據庫連接到客戶端顯示

Question

我一直在 PHP 開始編程，我想創建一個程序，允許任何訪問者單擊一個按鈕並讓它增加一個通用計數器。 例如，用戶單擊按鈕，計數器加 1，您可以刷新頁面，新數字將“卡住”。

我的想法是使用一個數據庫來保存當前的“點擊”次數並顯示它，然后使用客戶端 JavaScript 按鈕來增加數據庫的值。 我能夠訪問我的數據庫並獲得當前的靜態點擊次數，但我不知道如何讓計數器進行交互。 我已經嘗試在 JavaScript 中使用谷歌搜索以查看如何執行此操作，但結果很少。 我的目標甚至可以在 JavaScript 中實現嗎？ 或者我應該使用不同的語言來連接我的服務器端操作和客戶端操作嗎？

// connects to the database using hostname, user, pass, db name
$connect = mysqli_connect('HOSTNAME','USER','PASSWORD','epiz_33276135_ducks');

if (!$connect) {
    echo 'problem connecting to database';
}

//takes the query
$query = "SELECT Count,ID,AnimalName FROM ducks WHERE ID=1";

//connects result adn records it 
$result = mysqli_query( $connect, $query);
$record = mysqli_fetch_assoc( $result);
if (!$result) {
    echo 'smthin weird';
}
echo '<h2>'.$record['Count'].'</h2>';

據我了解，PHP用於服務器端操作，Javascript用於客戶端工作。 谷歌搜索沒有產生任何答案，而且我一直無法找到可以編輯 hte 的方法

Answer 1

通常，您會讓客戶端代碼向 PHP 腳本發出請求，該腳本會增加計數並使用新值進行響應。 您可以使用導致整個頁面加載的表單，也可以使用異步請求來獲得更無縫的體驗。

在前端，你會使用這樣的東西

<button id="increment-counter" type="button">Increment Counter</button>

// Add a "click" event listener to the button
document
  .getElementById("increment-counter")
  .addEventListener("click", async () => {
    // Make a PUT request to your PHP
    // The `method` probably isn't important but a GET request seemed wrong
    const res = await fetch("increment-counter.php", { method: "PUT" });

    // Check for any errors
    if (!res.ok) {
      throw new Error(
        `Increment counter failed: ${res.statusText} - ${await res.text()}`
      );
    }

    // now update the current count in-place
    document.querySelector("h2").textContent = (await res.json()).Count;
  });

在服務器端，是這樣的（我使用 PDO 因為它比 MySQLi 更適合初學者）

// increment-counter.php
if ($_SERVER['REQUEST_METHOD'] !== 'PUT') {
    // Only allow PUT requests
    http_response_code(405);
    exit;
}

// Connect to your DB
$pdo = new \PDO(
    'mysql:host=HOSTNAME;dbname=epiz_33276135_ducks',
    'USER',
    'PASSWORD',
    [
        \PDO::ATTR_ERRMODE            => \PDO::ERRMODE_EXCEPTION,
        \PDO::ATTR_DEFAULT_FETCH_MODE => \PDO::FETCH_ASSOC,
        \PDO::ATTR_EMULATE_PREPARES   => false,
    ]
);

$pdo->beginTransaction(); // atomic updates are important
try {
    // Select the current Count
    $count = $pdo
        ->query('SELECT `Count` FROM ducks WHERE ID = 1 FOR UPDATE')
        ->fetchColumn();

    // Update your Count column
    $pdo->exec('UPDATE ducks SET `Count` = `Count` + 1 WHERE ID = 1');

    $pdo->commit();

    // Respond with a JSON object containing the updated count
    header('content-type: application/json');
    echo json_encode(['Count' => $count + 1]);
    exit;
} catch ($err) {
    $pdo->rollBack();
    throw $err;
}

Answer 2

一次學習一種語言。 PHP 在這種情況下寫入 HTML 所以你只需要實現一個頁面轉換 - 即從服務器獲取新的 html....

<?php
$connect = mysqli_connect('HOSTNAME','USER','PASSWORD','epiz_33276135_ducks');

if (!$connect) {
    echo 'problem connecting to database';
}

//takes the query
$query = "SELECT Count,ID,AnimalName FROM ducks WHERE ID=1";

//connects result adn records it 
$result = mysqli_query( $connect, $query);
$record = mysqli_fetch_assoc( $result);
if ($result) {
    $query="UPDATE ducks SET `Count`=`Count`+1";
    mysqli_query( $connect, $query);
} else {
    echo 'smthin weird: ' mysqli_error($result);
}

echo "<h2>$record[Count]</h2>";
echo "<a href='$_SERVER[REQUEST_URI]'>next</a>";

完成此操作后，請查看 HTML forms。

順便說一句，對屬性名稱使用保留字 (Count) 是不好的做法。