La visualización de datos de la base de datos en el sitio web no solo utiliza el lenguaje de programación HTML, sino también en combinación con el lenguaje de programación PHP. Este artículo discutirá cómo mostrar fácilmente datos de una base de datos. Inmediatamente, vea los pasos a continuación.
Cómo mostrar datos de la base de datos a HTML
Antes de crear archivos que puedan mostrar datos de una base de datos, asegúrese de que ya tiene una base de datos para mostrar. Aquí hay una base de datos de ejemplo que puede seguir:
1. Cree un script de conexión.PHP
Lo primero que debe hacer es proporcionar 3 archivos vacíos. Estos archivos se utilizan para crear un archivo connection.php, un archivo css y un archivo para mostrar datos. Primero crearemos un archivo connection.php primero.
Este archivo sirve para conectarlo con la base de datos y puede recuperar datos de la base de datos. En realidad, el nombre del archivo no tiene que ser conexión.php, lo más importante es que el archivo que cree se guarde en formato .php porque si guarda este script en formato .html, el proceso no se ejecutará.
Aquí hay un guión de ejemplo conexión.php que puedes usar.
<?php
$db_host="localhost"; // Nama Server
$db_user="root"; // User Server
$db_pass="""; // Password Server
$db_name="test"; // Nama Database
$conn = mysqli_connect($db_host, $db_user, $db_pass, $db_name);
if (!$conn) {
die ('Gagal terhubung dengan MySQL: ' . mysqli_connect_error());
}
$sql="SELECT *
FROM penjualan";
$query = mysqli_query($conn, $sql);
if (!$query) {
die ('SQL Error: ' . mysqli_error($conn));
}
?>Si ya está utilizando pHP 7, no se recomienda utilizar la función mysql_xxx porque ya no es válido, pero por favor úsalo mysqli_xxx o PHP DOP para conexiones, consulta de datos y visualización de datos.
El script que necesita cambiar del script de ejemplo anterior es:
$nombre_bd = ‘prueba’; -> Por favor cambia ‘prueba’ con el nombre de la base de datos que tienes.
$db_usuario = ‘raíz’;
$db_pass = “”; -> Cambie si usa el nombre de usuario y la contraseña para acceder a la base de datos.
$sql = ‘SELECCIONAR *
DESDE ventas’; -> Por favor, cambie ‘ventas’ con el nombre de la tabla que desea mostrar.
2. Cree una secuencia de comandos para mostrar datos
Lo siguiente es crear una consulta que sirva para mostrar datos de su base de datos. Aquí, como ejemplo, hago el nombre del archivo data.php. Por favor, ajústelo a su gusto, lo importante es que el archivo se guarde en formato .php porque habrá una consulta de php en el archivo. Solo mire el script de muestra a continuación.
<html>
<head>
<title>Menampilkan Data MySQL Ke Dalam Tabel HTML</title>
<link rel="stylesheet" type="text/css" href="https://www.nesabamedia.com/cara-menampilkan-data-dari-database-ke-html/style.css">
</head>
<body>
<h1>Tabel 1</h1>
<table class="data-table">
<caption class="title">Data Penjualan Alat Tulis Kantor</caption>
<thead>
<tr>
<th>NO</th>
<th>PEMBELI</th>
<th>BARANG</th>
<th>TANGGAL</th>
<th>HARGA</th>
</tr>
</thead>
<tbody>
<?php
include('koneksi.php');
$no = 1;
$bulan = array (1 => 'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember');
while ($row = mysqli_fetch_array($query))
{
$tgl = explode('-', $row['tanggal']);
$harga = $row['harga'] == 0 ? '' : number_format($row['harga'], 0, ',', '.');
echo '<tr>
<td>'.$no.'</td>
<td>'.$row['pembeli'].'</td>
<td>'.$row['barang'].'</td>
<td>'.$tgl[2] . ' ' . $bulan[(int)$tgl[1]] . ' ' . $tgl[0] . '</td>
<td>'.$harga.'</td>
</tr>';
$no++;
}?>
</tbody>
</table>
</body>
</html>Mira la explicación a continuación:
Hay un script PHP en el medio de la tabla. Este script se utiliza para mostrar datos de su base de datos.
include(‘conexión.php’); -> Para llamar al archivo connection.php que creó anteriormente.
$no = 1; -> Declaración inicial de que el número comenzará a partir del número 1.
$mes = array (1 => ‘Enero’, ‘Febrero’, ‘Marzo’, ‘Abril’, ‘Mayo’, ‘Junio’, ‘Julio’, ‘Agosto’, ‘Septiembre’, ‘Octubre’, ‘Noviembre’ ‘, ‘diciembre’); -> Para definir nombres de meses en forma de matriz comenzando con el índice 1 en lugar de 0.
mysqli_fetch_array -> Para recuperar datos de MySQL que producirán matrices asociativas y matrices indexadas.
explotar(‘-‘, $fila[‘tanggal’]) -> Para dividir la fecha en una matriz, por ejemplo: 2016-10-17 a: $fecha[0]=2016, $fecha[1]=10, y $fecha[2]=17
$precio -> para definir la variable precio. Si el valor es 0 cambiamos el valor a vacío. Esto es para que sea más fácil poner una marca (estilo css) en una columna vacía.
-> Para imprimir la salida a la tabla.
fecha[2].’ ‘.$mes[(int)$tgl[1]].’ ‘.$fecha[0] -> Para ejecutar sentencia (int)$tgl[1] para convertir mes a entero, 01 a 1, o2 a 2, etc., para que coincida con el índice de la matriz.
$no++; -> El operador de incremento se usa para crear un número de secuencia.
3. Creación de secuencias de comandos CSS
Una vez que se hayan completado los archivos connection.php y data.php, el siguiente paso puede agregar CSS para hacer que la visualización sea más atractiva. El siguiente es un ejemplo de un script CSS que puede usar.
body {
font-size: 15px;
color: #343d44;
font-family: "segoe-ui", "open-sans", tahoma, arial;
padding: 0;
margin: 0;
}
table {
margin: auto;
font-family: "Lucida Sans Unicode", "Lucida Grande", "Segoe Ui";
font-size: 12px;
}
h1 {
margin: 25px auto 0;
text-align: center;
text-transform: uppercase;
font-size: 17px;
}
table td {
transition: all .5s;
}
/* Table */
.data-table {
border-collapse: collapse;
font-size: 14px;
min-width: 537px;
}
.data-table th,
.data-table td {
border: 1px solid #e1edff;
padding: 7px 17px;
}
.data-table caption {
margin: 7px;
}
/* Table Header */
.data-table thead th {
background-color: #508abb;
color: #FFFFFF;
border-color: #6ea1cc !important;
text-transform: uppercase;
}
/* Table Body */
.data-table tbody td {
color: #353535;
}
.data-table tbody td:first-child,
.data-table tbody td:nth-child(4),
.data-table tbody td:last-child {
text-align: right;
}
.data-table tbody tr:nth-child(odd) td {
background-color: #f4fbff;
}
.data-table tbody tr:hover td {
background-color: #ffffa2;
border-color: #ffff0f;
}
/* Table Footer */
.data-table tfoot th {
background-color: #e5f5ff;
text-align: right;
}
.data-table tfoot th:first-child {
text-align: left;
}
.data-table tbody td:empty
{
background-color: #ffcccc;
}Puede modificar el script CSS según sus deseos y necesidades. Por lo tanto, no se obsesione demasiado con el script de ejemplo anterior. La siguiente es una visualización de ejemplo de los scripts anteriores.
Entonces, este artículo analiza cómo mostrar datos de una base de datos a HTML fácilmente. Esperemos que este artículo pueda ser útil y útil para usted. Gracias
