У меня есть БД MySQL "dorav3"
со столом "dtab1"
с колонкой ниже, содержащей информацию о визитной карточке. У меня также есть скрипт php и страница HTML для отображения данных БД в таблице HTML.
Мой вопрос: как мне перейти от простого заполнения стола к заполнению моих флип-карт ниже?
где я сейчас делаю <td><?php echo $row1[0];?></td>
для стола
Должен ли я сделать что-то вроде для флип-карты?
<body>
<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<h2><?php echo $row1[0];?></h2>
<h2><?php echo $row1[1];?></h2>
</div>
<div class="flip-box-back">
<h4><?php echo $row1[2];?></h4>
<h4><?php echo $row1[3];?></h4>
<h4><?php echo $row1[4];?></h4>
</div>
</div>
</div>
Я действительно застрял!
+--------------------+---------+------+-----+---------+----------------+
| Field | Type | Null | Key | Default | Extra |
+--------------------+---------+------+-----+---------+----------------+
| Title | text | YES | | NULL | |
| Name | text | YES | | NULL | |
| Email | text | YES | | NULL | |
| Website | text | YES | | NULL | |
| Contact | text | YES | | NULL | |
| id | int(11) | NO | PRI | NULL | auto_increment |
----------------------------------------------------------------------
PHP
<?php
// php populate html table from mysql database
$hostname = "localhost";
$username = "xxx";
$password = "xxx";
$databaseName = "dorav3";
// connect to mysql
$connect = mysqli_connect($hostname, $username, $password, $databaseName);
// mysql select query
$query = "SELECT * FROM `dtab1";
// result for method one
$result1 = mysqli_query($connect, $query);
// result for method two
$result2 = mysqli_query($connect, $query);
$dataRow = "";
while($row2 = mysqli_fetch_array($result2))
{
$dataRow = $dataRow."<td>$row2[0]</td><td>$row2[1]</td><td>$row2[2]</td><td>$row2[3]</td><td>$row2[4]</td><td>$row2[5]</td><td>$row2[6]</td><td>$row2[7]</td><td>$row2[8]</td><td>$row2[9]</td><td>$row2[10]</td><td>$row2[11]</td><td>$row2[12]</td><td>$row2[13]</td><td>$row2[14]</td><td>$row2[15]</td>";
}
?>
HTML для заполнения таблицы
<body>
<table>
<tr>
<th>Title</th>
<th>Name</th>
<th>Email</th>
<th>Website</th>
<th>Contact</th>
</tr>
</table>
<?php while($row1 = mysqli_fetch_array($result1)):;?>
<table>
<tr>
<td><?php echo $row1[0];?></td>
<td><?php echo $row1[1];?></td>
<td><?php echo $row1[2];?></td>
<td><?php echo $row1[3];?></td>
<td><?php echo $row1[4];?></td>
</tr>
</table>
<?php endwhile;?>
</body>
</html>
Далее я хочу заполнить мои данные более богатым форматом.
HTML для заполнения карт
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<h2>Title</h2>
<h2>Name</h2>
</div>
<div class="flip-box-back">
<h4>Email</h4>
<h4>Website</h4>
<h4>Contact</h4>
</div>
</div>
</div>
<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<h2>Title</h2>
<h2>Name</h2>
</div>
<div class="flip-box-back">
<h4>Email</h4>
<h4>Website</h4>
<h4>Contact</h4>
</div>
</div>
</div>
<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<h2>Title</h2>
<h2>Name</h2>
</div>
<div class="flip-box-back">
<h4>Email</h4>
<h4>Website</h4>
<h4>Contact</h4>
</div>
</div>
</div>
</div>
</body>
</html>
Я не совсем понимаю, что вы хотите сделать, но я думаю, что это должно работать:
<?php while($row1 = mysqli_fetch_array($result1)):;?>
<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<h2><?php echo $row1[0];?></h2>
<h2><?php echo $row1[1];?></h2>
</div>
<div class="flip-box-back">
<h4><?php echo $row1[2];?></h4>
<h4><?php echo $row1[3];?></h4>
<h4><?php echo $row1[4];?></h4>
</div>
</div>
</div>
<?php endwhile;?>
У меня будет более сложный ответ для этого.
text
поля в вашей таблице, мой совет, чтобы обратиться к varchar(n)
, Вы можете узнать различия здесь — Разница между VARCHAR и TEXT в MySQL. Один из самых больших вопросов text
поле — оно не может быть частью индекса, хотя вы можете использовать функции полнотекстового поиска. SELECT * FROM ...
более целесообразно выбирать только необходимые данные из БД — по соображениям производительности и безопасности.Таким образом, я дам следующий код:
PHP (server.php)
$hostname = "localhost";
$username = "***";
$password = "***";
$databaseName = "***";
// connect to mysql
$connect = mysqli_connect($hostname, $username, $password, $databaseName);
$query = "SELECT title, name, email, website, contact FROM dtab1";
// result
$result = mysqli_query($connect, $query);
while($row = mysqli_fetch_array($result))
{
$dataRow[] = $row;
}
echo json_encode($dataRow);
HTML
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="my_script.js"></script>
</head>
<body>
<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<h2 id='title'></h2>
<h2 id='name'></h2>
</div>
<div class="flip-box-back">
<h4 id='email'></h4>
<h4 id='website'></h4>
<h4 id='contact'></h4>
</div>
</div>
</div>
</body>
</html>
JS (my_script.js)
$(document).ready(function() {
$.post("server.php", {
// you can add any POST request
}, function(server_data) {
data = JSON.parse(server_data);
$("#title").html(data[0]['title']);
$("#name").html(data[0]['name']);
$("#email").html(data[0]['email']);
$("#website").html(data[0]['website']);
$("#contact").html(data[0]['contact']);
});
});
Как это работает — HTML — это простой шаблон, вы можете легко применить любой стиль CSS и посмотреть, как он выглядит. JS использует популярный JQuery для отправки POST-запроса на ваш сервер (т.е. localhost) и заполнения возвращаемых данных. Сам PHP только делает необходимый запрос БД и выводит данные. Все эти детали могут быть легко изменены и протестированы в одиночку.
Надеюсь это поможет