Я читаю записи из базы данных и использовал карту для их отображения. Каждый ряд из записи используется для создания одной карты, которая не зависит от других. На каждой карточке есть кнопка для расширения просмотра, чтобы отобразить более подробную информацию об этом конкретном пользователе на следующей странице. Я хочу 'id' пользователя, чья карта была нажата, и перенести ее на следующую страницу, чтобы я мог использовать ее в другом запросе mysql.
Пожалуйста, ответьте на вопрос, используя php и javascript.
<?php
include_once('connect.php');
$sql = "SELECT * FROM user";
$result = $conn->query($sql);
?>
<!DOCTYPE html>
<header>
<meta charset="utf-8">
<!--========Personal style sheet link===========-->
<link rel="stylesheet" href="css/style.css">
<!--========Bootstrap cdn link============-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!--==========Google fonts link==========-->
<link href="https://fonts.googleapis.com/css?family=Montserrat|Oswald|Poppins|Roboto|Roboto+Condensed|Roboto+Mono&display=swap" rel="stylesheet">
<!--
font-family: 'Roboto Condensed', sans-serif;
font-family: 'Montserrat', sans-serif;
font-family: 'Roboto', sans-serif;
font-family: 'Oswald', sans-serif;
font-family: 'Roboto Mono', monospace;
font-family: 'Poppins', sans-serif;
-->
</header>
<body id="users-body" onload="createCard();">
<!--========Navigation bar==========-->
<div id="navbar" class="container">
<ul class="nav nav-pills justify-content-end">
<li class="nav-item"><a class="nav-link" href="/index.html">HOME</a></li>
<li class="nav-item"><a class="nav-link active" href="/users.php">VIEW ALL USERS</a></li>
</ul>
</div>
<!--===========Function for creating dynamic card element===========-->
<script>
function createCard(){
<?php
while($row = $result->fetch_assoc()){
?>
var box = document.createElement("div");
box.setAttribute("class", "container");
box.setAttribute("class", "justify-content-center");
var card = document.createElement("div");
card.setAttribute("class","card");
var cardBody = document.createElement("div");
cardBody.setAttribute("class", "card-body");
var cardImage = document.createElement("img");
cardImage.setAttribute("class", "card-img-top");
cardImage.setAttribute("src", "/images/dummy_user_image.png");
cardImage.setAttribute("alt", "user-image");
cardImage.setAttribute("style", "width: 10rem; height: 10rem; border-radius: 50%;");
var cardTitle = document.createElement("h2");
cardTitle.setAttribute("class", "card-title");
cardTitle.innerText = "<?php echo $row['name'] ?>";
var idLabel = document.createElement("h6");
idLabel.setAttribute("id", "<?php echo $row['id'] ?>");
idLabel.innerText = "ID: ";
var idNum = document.createElement("span");
idNum.setAttribute("id", "id-pass");
idNum.innerText = "<?php echo $row['id'] ?>";
var cardSubtext = document.createElement("h6");
cardSubtext.innerText = "Credit: ";
var creditPoint = document.createElement("span");
creditPoint.innerText = "<?php echo $row['credit'] ?>";
var btn = document.createElement("a");
btn.setAttribute("id", "view-btn");
btn.setAttribute("href", "/details.html");
btn.setAttribute("class", "btn btn-success");
btn.setAttribute("role", "BUTTON");
btn.innerText = "VIEW DETAILS";
document.body.appendChild(box);
box.appendChild(card);
card.appendChild(cardBody);
cardBody.appendChild(cardImage);
cardBody.appendChild(cardTitle);
cardBody.appendChild(idLabel);
idLabel.appendChild(idNum);
cardBody.appendChild(cardSubtext);
cardSubtext.appendChild(creditPoint);
cardBody.appendChild(btn);
<?php
}
?>
}
</script>
</body>
</html>