使用 html 和 php 从 xampp sql 服务器获取数据

Question

我是 php 的初学者，我正在做一个前端项目，我必须根据存储在 mysql xampp server 中的 12 个岛屿名称创建刽子手游戏。我必须从数据库中获取一个 random 岛作为 unordered string 显示在我的 html 中并猜测它是哪个岛。我不知道如何使用 php 实现此功能，因为我是一个完全的初学者，但我看过有关如何使用 [=37= 将数据从 html 表单发送到 sql 服务器的教程] 。我想这是相反任务的亲属。我已经编写了关于显示我的刽子手游戏的完整 html css and js 代码，我使用一个简单的单词通过 javascript 随机显示，当您填写 spaces 时，会出现一个 submit 按钮。

function hangman(){
    var island = "Santorini"; //the given word that is supposed to be found 
    var t = document.createTextNode(shuffleWord(island))
    document.getElementById("hidden-word").appendChild(t);
    createSpaces(island);
    
    const inputLists = document.querySelectorAll("input");
    document.querySelectorAll("input").forEach(el => {
      el.addEventListener('input', evt => {
          const showButton = [...inputLists].filter(ip => ip.value.trim() !== '').length === inputLists.length;
          document.getElementById('submitbtn').style.display = showButton ? 'block' : 'none';
      });
    });

}

function shuffleWord (word){
    var shuffledWord = '';
    word = word.split('');
    while (word.length > 0) {
      shuffledWord +=  word.splice(word.length * Math.random() << 0, 1);
    }
    return shuffledWord;
}


function createSpaces(text){
    for(var i=0;i<text.length;i++){
      var space = document.createElement("input");
      space.setAttribute("class" , "dash");
      document.getElementById("hangman-container").appendChild(space);
    }
}

.transparent-box{
    border:none;
    position:absolute;
    top:10%;
    left:15%;
    background-color:black;
    height:500px;
    width:70%;
    opacity: 0.6;
}

.transparent-box p{
    color:white;  
    text-align:center;

}

.transparent-box h1{
    color:white;
    position: relative;
    text-align:center;
    font-size:20px;
    top:30px;
}


#hangman-container{
    position: relative;
    width:auto;
    top:30%;
    left:0%;
    background-color: transparent;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}


.dash{
    margin:0;
    padding:20px;
    align-items: flex-start;
    width:4%;
    border:none;
    border-radius: 5%;
    background-color: turquoise;
    color:red;
    font-size:40px;
}

.dash:focus{
    opacity:0.8;
}

#submitbtn{
    display: none;
    position: absolute;
    top:200%;
    left:80%;
    float:right; 
}

<body onload=hangman()>
<div class="transparent-box" id="t-box">
    <p>Play here </p>
    <h1 id="hidden-word">The word is : </h1>
    <form id="hangman-container" method="POST">
        <button type="submit" class="hide" id="submitbtn">Submit</button>
    </form>
</div>
</body>

问题是如何使用 php 从我的数据库中获取随机岛屿名称并显示它，而不是通过 javascript 发送字符串。非常感谢您对此的帮助。提前谢谢你。

Answer 1

先创建一个table:

CREATE TABLE islands(
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(255) NOT NULL
);

在此处插入岛屿名称（添加任意数量以代替...）：

INSERT INTO islands(name) VALUES
("Santorini"),("Tassos"),...;

现在，下面的 SELECT 查询将从数据库中随机获取一个岛屿名称：

SELECT name
FROM islands
ORDER BY RAND()
LIMIT 1;

在PHP中你可以像这样执行查询：

// replace the words in uppercase with your actual credentials!
$link = @mysqli_connect('localhost','USERNAME','PASSWORD','DBNAME');
if(!$link){
    echo 'Error connecting to the DB';
    exit;
}
$sql = "SELECT name FROM islands ORDER BY RAND() LIMIT 1";
$result = @mysqli_query($link, $sql);
if(!$result){
    echo 'There is an issue with the database';
    exit;
}
$row = @mysqli_fetch_assoc($result);
// This will give you the random island name (if they are inserted properly)
echo $row['name']??'No islands are inserted in the database yet';

现在要洗牌，我们可以使用 str_shuffle() 函数。最后，您的代码可能开始看起来像这样：

<body onload=hangman()>
<div class="transparent-box" id="t-box">
    <p>Play here </p>
    <h1 id="hidden-word">The word is : 
    <?php
        // replace the words in uppercase with your actual credentials!
        $link = @mysqli_connect('localhost','USERNAME','PASSWORD','DBNAME');
        if(!$link){
            echo 'Error connecting to the DB';
            exit;
        }
        $sql = "SELECT name FROM islands ORDER BY RAND() LIMIT 1";
        $result = @mysqli_query($link, $sql);
        if(!$result){
            echo 'There is an issue with the database';
            exit;
        }
        $row = @mysqli_fetch_assoc($result);
        echo str_shuffle($row['name']);
    ?>
    </h1>
    <form id="hangman-container" method="POST">
        <button type="submit" class="hide" id="submitbtn">Submit</button>
    </form>
</div>
</body>

现在您当然需要调整 JavaScript 代码。

使用 html 和 php 从 xampp sql 服务器获取数据

get data from xampp sql server using html and php

html

javascript

php

mysql

xampp