Interacción bases datos (MySql), un select y mostrarlo en una tabla (con diseño css)

winjose · #1 (**permalink**) 02/08/2011, 16:30

Hola señores, pues tras la problemática que me creó el crear un sistema que permitiera registrar equipos de futbol. Al final lo logré. Con muchos problemas pues la información es demasida, muy variada y está muy esparcida por el señor Google. Es por ello que quiero aportar mi granito de arena aquí, para todos aquellos que le surjan en un futuro el mismo problema que a mi.

No obstante, esto es solo un ejemplo simple. Lo pueden adaptar, amoldar a su gusto.

Lo primero, el problema ¿Qué quiero hacer?. Pues lo que se pretende es hacer un sistema de inscripción de equipos de futbol. Cada equipo tendrá un nombre diferente, y por ejemplo 3 jugadores.
Posteriormente lo interesante será recoger mediante un "select" todos los equipos inscritos en la base de datos, y tras escoger/seleccionar uno con el "select", mostrar en pantalla una tabla "muy bonita jeje" en la que se muestre el nombre y apellidos de los 3 jugadores de dicho equipo.

1º Creación de las tablas;
Tabla Equipo:

Código:

CREATE TABLE `Equipo` (
  `id_equipo` int(4) NOT NULL auto_increment,
  `nombre_equipo` varchar(30) collate latin1_spanish_ci NOT NULL,
  PRIMARY KEY  (`id_equipo`),
  UNIQUE KEY `nombre_equipo` (`nombre_equipo`),
) ENGINE=MyISAM AUTO_INCREMENT=19 DEFAULT CHARSET=latin1 COLLATE=latin1_spanish_ci AUTO_INCREMENT=19 ;

Tabla Jugador:

Código:

CREATE TABLE `Jugador` (
  `nombre` varchar(30) collate latin1_spanish_ci NOT NULL,
  `apellido` varchar(30) collate latin1_spanish_ci NOT NULL,
  `id_equipo` int(4) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1 COLLATE=latin1_spanish_ci;

En el siguiente Post, el archivo insertar.php que comprobará e insertará todos los datos en nuestra base de datos.

winjose · #2 (**permalink**) 02/08/2011, 16:33

insertar.php

Código PHP:

  
<?php

// Datos de conexión 
$link = mysql_connect("XXXXX","XXXX","XXXXX");
 mysql_select_db("XXX",$link);

    // Recogemos las variables del formulario
    $nombre_equipo = $_POST['nombre_equipo'];
    $nombre2 = $_POST['nombre2'];
    $apellido2 = $_POST['apellido2'];
    $nombre3 = $_POST['nombre3'];
    $apellido3 = $_POST['apellido3'];
    $nombre4 = $_POST['nombre4'];
    $apellido4 = $_POST['apellido4'];
    
    // Validamos los campos que el "usuario/hacker/etc" haya introducido.
    if ($nombre_equipo == ""){ 
        $error.="No ha ingresado ningun nombre para su equipo. <BR>\n";}
    
    if ($nombre2 == ""){ 
        $error.="No ha ingresado ningun nombre para el jugador 1 de su equipo. <BR>\n";}
    if ($apellido2 == ""){ 
        $error.="No ha ingresado ningun apellido para el jugador 1 de su equipo. <BR>\n";}
    if ($nombre3 == ""){ 
        $error.="No ha ingresado ningun nombre para el jugador 2 de su equipo. <BR>\n";}
    if ($apellido3 == ""){ 
        $error.="No ha ingresado ningun apellido para el jugador 2 de su equipo. <BR>\n";}
    if ($nombre4 == ""){ 
        $error.="No ha ingresado ningun nombre para el jugador 3 de su equipo. <BR>\n";}
    if ($apellido4 == ""){ 
        $error.="No ha ingresado ningun apellido para el jugador 3 de su equipo. <BR>\n";}
    if ($error != ""){
        echo $error;
        exit;
    }else{
//Hacemos una consulta para ver que no exista el nombre del equipo en nuestra base de datos.
$sql_exist_equipo ="select COUNT(*) from Equipo where nombre_equipo = '$nombre_equipo'";
$result=mysql_query($sql_exist_equipo);
if (mysql_result($result,0) ==1){
echo "El nombre del equipo ya existe. Inserte otro";
}else{
//Insertamos el nombre del equipo, del capitán, y los datos del mismo en la base de datos.
mysql_query("INSERT INTO Equipo (
            nombre_equipo, 
            id_equipo) 
            VALUES (
            '$nombre_equipo', 
            '$apartamento',default)",$link);
    
    $equipo = mysql_insert_id($link); //Guardamos el ultimo id insertado!

// Ahora insertamos todos los datos (nombre y apellidos) de los jugadores que el capitan ingresará en su equipo.
mysql_query("INSERT INTO Jugador (
            nombre, apellido, 
            id_equipo) 
            VALUES 
            ('$nombre2', '$apellido3', $equipo), 
            ('$nombre3', '$apellido3', $equipo),
            ('$nombre4', '$apellido4', $equipo)",$link);        
}
    //Comprobamos que no haya habido error de conexión.
    $my_error = mysql_error($link);
        if(!empty($my_error)) {
            echo "Ha habido un error al insertar los valores. $my_error";} 
        else {
            echo "Los datos han sido introducidos satisfactoriamente";}
}

?>

En el siguiente post el archivo que recogerá todos los nombres de los equipos inscritos y los mostrará en un select. Tras el cual imprimirá en pantalla en una tabla los jugadores de dicho equipo (nombres y apellidos) que haya sido seleccionado.

winjose · #3 (**permalink**) 02/08/2011, 16:41

mostrar.php

Código PHP:

  <?php

    

// Datos de conexión 

$link = mysql_connect("XXXXX","XXX","XXXXXXX");

mysql_select_db("XXXXX",$link);

 
//texto encabezado

echo "<h1>Selecciona un equipo: </h1>";

 
//sentencia sql

$consulta= mysql_query ("select id_equipo, nombre_equipo from Equipo",$link);

 
echo '<form name="form1" method="post">';

echo '<select name="miSelect">';

echo '<option value="0">Seleccione</option>';

 
//por cada registro encontrado en la tabla me genera un <option>

  while ($rows = mysql_fetch_array($consulta)){

    echo '<option value="' . $rows["id_equipo"] . '" >' . $rows["nombre_equipo"] . '</option>'; 

 
  }

 
echo '</select>';

echo '<input type="Submit" name="Submit" Value="Enviar" />';

echo '</form>';

mysql_free_result($consulta); // Liberar memoria usada por consulta.

 
$variable_id_equipo = $_POST["miSelect"];

 
// Mostrar el nombre del equipo antes de los datos de los jugadores del mismo

$consulta ="select id_equipo, nombre_equipo from Equipo where id_equipo = '$variable_id_equipo'";  

$resultado = mysql_query($consulta);  

$mostrar = mysql_fetch_array($resultado);  

echo '<style type="text/css">@import url("style.css");</style>';        

echo '<table width="315" id="rounded-corner" summary="2007 Major IT Companies Profit">';

echo '<thead>';

echo    '<tr>';

echo        '<th width="34" scope="col" class="rounded-company">Id</th>';

echo        '<th width="99" scope="col" class="rounded-q1">Nombre</th>';

echo        '<th width="146" scope="col" class="rounded-q2">Apellido</th>';

echo    '</tr>';

echo   '</thead>';

echo    '<tfoot>';

echo        '<tr>';

echo            '<td colspan="4" class="rounded-foot-left">'.'<em>Jugadores pertenecientes a: '.$mostrar['nombre_equipo'].'</em>'.'</td>';

echo        '</tr>';

echo    '</tfoot>';

echo '<tbody>';

$consult = mysql_query ("select * from Jugador WHERE id_equipo = '$variable_id_equipo'",$link);

while ($row = mysql_fetch_array($consult)) {

echo       '<tr>';

echo        '<td>'.$row['id_equipo'].'</td>'.'<td>'.$row['nombre'].'</td>'.'<td>'.$row['apellido'].'</td>';

echo     '</tr>';

} 

echo '</tbody>';

echo '</table>';

?>

En el siguiente y último post les mostraré la hoja de diseño que se aplicará a la tabla para que se vea como si de un diseño profesional se tratase.

winjose · #4 (**permalink**) 02/08/2011, 16:45

style.css

Código:

body
{
	line-height: 1.6em;
}
#rounded-corner
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	margin: 45px;
	width: 300px;
	text-align: left;
	border-collapse: collapse;
}
#rounded-corner thead th.rounded-company
{
	background: #b9c9fe url('table-images/left.png') left -1px no-repeat;
}
#rounded-corner thead th.rounded-q4
{
	background: #b9c9fe url('table-images/right.png') right -1px no-repeat;
}
#rounded-corner th
{
	padding: 8px;
	font-weight: normal;
	font-size: 13px;
	color: #039;
	background: #b9c9fe;
}
#rounded-corner td
{
	padding: 8px;
	background: #e8edff;
	border-top: 1px solid #fff;
	color: #669;
}
#rounded-corner tfoot td.rounded-foot-left
{
	background: #e8edff url('table-images/botleft.png') left bottom no-repeat;
}
#rounded-corner tfoot td.rounded-foot-right
{
	background: #e8edff url('table-images/botright.png') right bottom no-repeat;
}
#rounded-corner tbody tr:hover td
{
	background: #d0dafd;
}

Las imágenes que se dictan arriba si las necesitan, sólo tienen que pedirmelas. Cualquiera las puede hacer, son las del nivel superior de la tabla (en dónde van los nombres de los campos).

Y esto es todo. A mi me queda darle las gracias a Eleazar que aportó info el tema del "select", y a Vgonga1986 cuya metodología y diseño de bases de datos me ha sido vital en mi aprendizaje.

Espero que les sea de gran ayuda a todos. Un saludo compañeros!!

vgonga1986 · #5 (**permalink**) 03/08/2011, 02:17

Si me permites algunas correcciones.

- SQL: yo no pondría las ids como int(4), ya que si pasarás de 9999 registros igual tendrías un problema. Y el tema del cotejamiento de la base de datos, si pones cotejamiento latin ya en la base de datos no tienes que añadirlo a todos los campos de texto con collate latin1_spanish_ci ni a las tablas.

- mysql_query: ten mucho cuidado al hacer algo como esto $result=mysql_query(...); ya que esa función puede dar error en MySQL, en cuyo caso, al hacer fetch te dará un error muy feo. Tienes dos opciones, añadir el mysql_query() or die(), que lo que hará es que en caso de error mostrará el error que pongas dentro del die. O, yo lo veo mejor para aplicaciones más serias, rodear la función con un if, para controlar el error:

Código PHP:

Ver originalif ($result=mysql_query(...)) {
    // Aquí todo bien y ya puedes usar fetch.
} else {
    // Aquí ha habido un error.
}

He visto que tienes control de errores al final del script, pero realmente cualquier sentencia es susceptible de darte error, luego hay que hacerlo en cada ejecución, no al final.

- Error de copy-paste: qué coño es $apartamento????!!!! Esto está mal copiado, verdad?:

Código PHP:

Ver originalmysql_query("INSERT INTO Equipo (
            nombre_equipo, 
            id_equipo) 
            VALUES (
            '$nombre_equipo', 
            '$apartamento',default)",$link);

- PHP formularios: acostúmbrate a rodear los $_POST con un isset, ya que puede ser que el usuario no elija y, además, si pones el form y el tratamiento en la misma página, obviamente, en la primera ejecución del script, estos campos no tendrán valor:

Código PHP:

Ver originalif (isset($_POST["miSelect"]) {
    $variable_id_equipo = $_POST["miSelect"]; 
}

- HTML + CSS: esto es más tema de diseño que otra cosa, pero ya que utilizas CSS para darle el formato a la tabla, por qué sigues dándole el tamaño de celda con HTML (<th width="34"). Yo soy más partidario siempre de sacar todo lo que es presentación del HTML, todo por CSS, queda más separado y cuando tengas que modificar sólo modificas en un lado, no tienes que estar pensando qué está en el CSS y qué en el HTML.

- Errorcillo HTML: <td colspan="4" class="rounded-foot-left">, es colspan="3", ya que sólo tienes 3 columnas en la tabla, con 4 no te validará HTML. Esto será de copiar la tabla de otro lado, que salta a la vista, porque los nombres de las class de HTML no tienen nada que ver con tu aplicación: rounded-company, rounded-q1, rounded-q2... No digo que no copies, para eso están las cosas, pero adáptalo siempre.

Espero que te ayuden las críticas, siempre intenta mejorar. Un saludo.