¿Cómo obtener datos de la base de datos del servidor local y mostrarlos en una tabla HTML usando PHP?

En este artículo, veremos cómo podemos mostrar los registros en una tabla HTML extrayéndolos de la base de datos MySQL usando PHP. 

Enfoque: asegúrese de tener el servidor XAMPP o WAMP instalado en su máquina. En este artículo, usaremos el servidor WAMP.

WAMP Server es un software de código abierto para el sistema operativo Microsoft Windows, desarrollado por Romain Bourdon. Está compuesto por un servidor web Apache, soporte OpenSSL para SSL, base de datos MySQL y lenguaje de programación PHP. Aquí, antes de pasar por el programa, necesitamos crear una base de datos MySQL en nuestro servidor localhost. Luego, se supone que debemos crear una tabla HTML que esté vinculada con códigos PHP. PHP se usa para conectarse con el servidor localhost y para obtener los datos de la tabla de la base de datos presente en nuestro servidor localhost mediante la evaluación de las consultas de MySQL. El servidor WAMP ayuda a iniciar Apache y MySQL y conectarlos con el archivo PHP. 

Siga los pasos que se indican a continuación:

1. Creación de la base de datos: Primero, crearemos una base de datos llamada ‘geeksforgeeks’ . Puede usar su base de datos existente o crear una nueva.

crear base de datos «geeksforgeeks»

2. Crear tabla: crea una tabla llamada ‘userdata’ . La tabla contiene cuatro campos:

  • nombre de usuario – varchar (100)
  • problemas – int(11)
  • puntuación – int(11)
  • artículos – int(11)

La estructura de su tabla debería verse así:

la estructura de la tabla de «datos de usuario»

O puede crear una tabla copiando y pegando el siguiente código en el panel SQL de su PHPMyAdmin .

CREATE TABLE IF NOT EXISTS `userdata` (
 `username` varchar(100) NOT NULL,
 `problems` int(11) NOT NULL,
 `score` int(11) NOT NULL,
 `articles` int(11) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

Para hacer esto desde el panel SQL, consulte la siguiente captura de pantalla:

crear una tabla ‘datos de usuario’ desde el panel SQL

Insertar registros: ahora insertaremos algunos registros en nuestra tabla. Aquí estamos insertando 5 registros. Puede agregar varios registros.

O copie y pegue el siguiente código en el panel SQL para insertar registros en la tabla.

INSERT INTO `userdata` 
(`username`, `problems`, `score`, `articles`) 
VALUES ('User-2', '100', '75', '30'), ('User-1', '150', '100', '30'), ('User-3', '200', '50', '10'), ('User-4', '50', '5', '2'), ('User-5', '0', '0', '1');

Para hacer esto desde el panel SQL, consulte la siguiente captura de pantalla:

insertando registros

Creación de carpetas y archivos:

Ahora crearemos nuestra carpeta de proyecto llamada » GeeksForGeeks «. Cree un archivo index.php . Mantenga la carpeta principal de su proyecto (por ejemplo aquí… GeeksForGeeks ) en la carpeta «C://wamp64/www/» , si está usando WAMP o «C://xampp/htdocs/» si está usando el servidor XAMPP respectivamente. La estructura de carpetas debería verse así:

estructura de carpetas

Ahora, tenemos una base de datos llamada geeksforgeeks y una tabla llamada userdata . Ahora, aquí está el código PHP para obtener datos de la base de datos y mostrarlos en una tabla HTML. 

Ejemplo: 

php

<!-- PHP code to establish connection with the localserver -->
<?php
 
// Username is root
$user = 'root';
$password = '';
 
// Database name is geeksforgeeks
$database = 'geeksforgeeks';
 
// Server is localhost with
// port number 3306
$servername='localhost:3306';
$mysqli = new mysqli($servername, $user,
                $password, $database);
 
// Checking for connections
if ($mysqli->connect_error) {
    die('Connect Error (' .
    $mysqli->connect_errno . ') '.
    $mysqli->connect_error);
}
 
// SQL query to select data from database
$sql = " SELECT * FROM userdata ORDER BY score DESC ";
$result = $mysqli->query($sql);
$mysqli->close();
?>
<!-- HTML code to display data in tabular format -->
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>GFG User Details</title>
    <!-- CSS FOR STYLING THE PAGE -->
    <style>
        table {
            margin: 0 auto;
            font-size: large;
            border: 1px solid black;
        }
 
        h1 {
            text-align: center;
            color: #006600;
            font-size: xx-large;
            font-family: 'Gill Sans', 'Gill Sans MT',
            ' Calibri', 'Trebuchet MS', 'sans-serif';
        }
 
        td {
            background-color: #E4F5D4;
            border: 1px solid black;
        }
 
        th,
        td {
            font-weight: bold;
            border: 1px solid black;
            padding: 10px;
            text-align: center;
        }
 
        td {
            font-weight: lighter;
        }
    </style>
</head>
 
<body>
    <section>
        <h1>GeeksForGeeks</h1>
        <!-- TABLE CONSTRUCTION -->
        <table>
            <tr>
                <th>GFG UserHandle</th>
                <th>Practice Problems</th>
                <th>Coding Score</th>
                <th>GFG Articles</th>
            </tr>
            <!-- PHP CODE TO FETCH DATA FROM ROWS -->
            <?php
                // LOOP TILL END OF DATA
                while($rows=$result->fetch_assoc())
                {
            ?>
            <tr>
                <!-- FETCHING DATA FROM EACH
                    ROW OF EVERY COLUMN -->
                <td><?php echo $rows['username'];?></td>
                <td><?php echo $rows['problems'];?></td>
                <td><?php echo $rows['score'];?></td>
                <td><?php echo $rows['articles'];?></td>
            </tr>
            <?php
                }
            ?>
        </table>
    </section>
</body>
 
</html>

Salida: finalmente, debería poder mostrar los registros en una tabla HTML extrayéndolos de la base de datos.

producción

PHP es un lenguaje de secuencias de comandos del lado del servidor diseñado específicamente para el desarrollo web. Puede aprender PHP desde cero siguiendo este tutorial de PHP y ejemplos de PHP .

Publicación traducida automáticamente

Artículo escrito por hacksight y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *