Mostrando la DB de noticias - mergutm/databasecourse_utm GitHub Wiki

Cuerpo general de página html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

Puede ocupar la extensión de HTML para usar el snippet HTML que crea una plantilla.

snippet

Conexión a la BD

Agregar el siguiente código dentro del <body>:

Colocar los datos necesarios para la conexión

<?php
function abrir_conex() 
{
	define("DB_HOST", "localhost");
	define("DB_USER", "usuario");
	define("DB_PASSWORD", "pass");
	define("DB_DATABASE", "noticias");

	$con = mysqli_connect(DB_HOST, DB_USER, DB_PASSWORD, DB_DATABASE) or die("Some error occurred during connection " . mysqli_error($con));
	//echo "success";
	return $con;
}
?>

Código hasta el momento:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<?php
	
	
		function abrir_conex() 
		{
			define("DB_HOST", "localhost");
			define("DB_USER", "root");
			define("DB_PASSWORD", "ASDFASD@UTM");
			define("DB_DATABASE", "noticias");

			$con = mysqli_connect(DB_HOST, DB_USER, DB_PASSWORD, DB_DATABASE) or die("Some error occurred during connection " . mysqli_error($con));
			//deshabilitar una vez probada la conexion
                        echo "success";
			return $con;
		}
                $conexion = abrir_conex();

	
	?>


</body>
</html>

Deberá ver

conex ok

Listado de categorias

Puede usar la siguiente consulta:

conex ok

Hacer la consulta en PHP

	$conexion = abrir_conex();

	$sql = "SELECT id, nombre from Categorias";				
	echo "$sql<br>";
	$result1 = mysqli_query($conexion,$sql) or die('Consulta fallida proyectos: ' . mysqli_error($con));
	echo "Consulta exitosa <br>";

Deberán aparecer los mensajes:

success
SELECT id, nombre from Categorias
Consulta exitosa

Estos mensajes indican que los pasos anteriores son correctos. Puede quitar los mensajes al confirmar la conexión.

Iterar sobre los resultados.

        echo "<table border=1>\n";	
	while ($row = mysqli_fetch_array($result1,MYSQLI_ASSOC))   
	{
		echo "<tr><td> ".$row['id']."</td><td> ".$row['nombre']."</td> </tr>\n";
	}
	echo "</table>\n"
  • <table>: permite generar una tabla en html.
  • <tr>: genera o crea un renglón.
  • <td>: genera una celda de datos.
  • <th>: genera una celda de datos de tipo encabezado.

Mejorando la visualización usando bootstrap

Ir al siguiente link:

Bootstrap

Para obtener el siguiente código, que deberá agregarse en el encabezado <head>:

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

Sin bootstrap la tabla se vería así:

conex ok

Con bootstrap la tabla se vería así:

conex ok

Pruebe cambiando la definición de la tabla haciendo el siguiente cambio: echo "<table class='table table-hover'>\n";

Agregando enlaces

La orden <a href='link'> permite enlazar una página con otra, por ejemplo el siguiente código

<a href="https://www.w3schools.com">Visit W3Schools</a>

Crearía un enlace como el siguiente: Visit W3Schools

El siguiente código generaría enlaces para cada categoría:

	echo "<table class='table table-hover'>\n";	
	while ($row = mysqli_fetch_array($result1,MYSQLI_ASSOC))   
	{
		echo "   <tr><td> <a href='noticias.php?id=".$row['id']."'>".$row['id']."</td><td> ".$row['nombre']."</td> </tr>\n";
	}
	echo "</table>\n";

Deberá obtener algo como esto:

conex ok

if (isset($_GET['id'])){
			
		$sql = "SELECT noticia_id, encabezado, url FROM Noticias where categoria_id = " . $_GET['id'];				
		$result1 = mysqli_query($conexion,$sql) or die('Consulta fallida proyectos: ' . mysqli_error($con));

		echo "<table class='table table-hover'>\n";	
		while ($row = mysqli_fetch_array($result1,MYSQLI_ASSOC))   
		{
			echo "   <tr><td> <a href='".$row['url']."'>".$row['url']."</td><td> ".$row['encabezado']."</td> </tr>\n";
		}
		echo "</table>\n";


	}

conex ok

Dropdown

Para generar una lista desplegable como la siguiente:

conex ok

Revisar la siguiente página para el componente dropdown

dropdown

Antes de terminar el <body>

agregar el siguiente fragmento:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>

El código que aparece comentado es el que se ocupaba anteriormente para la tabla, ahora se generará el código de <li> (list item) para cada elemento del menú desplegable:

//echo "<table class='table table-hover'>\n";	
while ($row = mysqli_fetch_array($result1,MYSQLI_ASSOC))   
{
	//<li><a class="dropdown-item" href="#">Something else here</a></li>

	echo "  <li><a  class='dropdown-item' href='noticias2.php?id=".$row['id']."'>".$row['nombre']."</a></li>\n";
}
//echo "</table>\n";

El código completo se aprecia enseguida:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>


    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

</head>
<body>


<div class='container'>
	<div class="dropdown">
		<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
			Elige la categoria
		</button>
		<ul class="dropdown-menu">
			<?php

				function abrir_conex() 
				{
					 
					define("DB_HOST", "localhost");
					define("DB_USER", "usuario");
					define("DB_PASSWORD", "pass");
					define("DB_DATABASE", "noticias");

					$con = mysqli_connect(DB_HOST, DB_USER, DB_PASSWORD, DB_DATABASE) or die("Some error occurred during connection " . mysqli_error($con));
					//echo "success<br>";
					return $con;
				}

				$conexion = abrir_conex();

				$sql = "SELECT id, nombre from Categorias";				
				//echo "$sql<br>";
				$result1 = mysqli_query($conexion,$sql) or die('Consulta fallida proyectos: ' . mysqli_error($con));
				//echo "Consulta exitosa <br>";
					

				//echo "<table class='table table-hover'>\n";	
				while ($row = mysqli_fetch_array($result1,MYSQLI_ASSOC))   
				{
					//<li><a class="dropdown-item" href="#">Something else here</a></li>

					echo "  <li><a  class='dropdown-item' href='noticias2.php?id=".$row['id']."'>".$row['nombre']."</a></li>\n";
				}
				//echo "</table>\n";
			?> 
		</ul>
	</div>
</div>

<div class='container'>
	<div class="row">
		<div class="col  col-lg-3 col-md-1"></div>
		<div class="col  col-lg-6 col-md-10">
<?php	
if (isset($_GET['id'])){
			
	$sql = "SELECT noticia_id, encabezado, url FROM Noticias where categoria_id = " . $_GET['id'];				
	//echo "$sql<br>";
	$result1 = mysqli_query($conexion,$sql) or die('Consulta fallida proyectos: ' . mysqli_error($con));


	echo "<table class='table table-hover'>\n";	
	while ($row = mysqli_fetch_array($result1,MYSQLI_ASSOC))   
	{
		echo "   <tr><td> <a href='".$row['url']."'>".$row['url']."</td><td> ".$row['encabezado']."</td> </tr>\n";
	}
	echo "</table>\n";
}
?>	

			</div>
		<div class="col col-lg-3 col-md-1"></div>
	</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>

</body>
</html>
⚠️ **GitHub.com Fallback** ⚠️