# Día 8, proyecto Bienes Raíces: listado de propiedades

Seguimos en el index.php del admin, vamos a listar las propiedades que tenemos ya introducidas.
Lo primero que tenemos que hacer al generar nuevas plantillas es hacer el modelo en html y ver qué tal queda. Así que incluimos una tabla en el index.html del admin un ejemplo de cómo queremos que se visualicen nuestros datos.

<table class="propiedades">
        <thead>
            <tr>
                <th>ID</th>
                <th>Título</th>
                <th>Imagen</th>
                <th>Precio</th>
                <th>Acciones</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Casa en la playa</td>
                <td>
                    <img src="../imagenes/8d9093cd64eb2976fecdc8146734cc0d.jpg" class="imagen-tabla" >   
                </td>
                <td>120000</td>
                <td>
                    <a class="boton-rojo-block" href="#">Eliminar</a>
                    <a class="boton-amarillo-block" href="#">Actualizar</a>
                </td>
            </tr>
        </tbody>

    </table>

Crea los estilos adecuados para que se vea un poquito mejor. Depende de si estás usando sass o no, el archivo src/scss/base/_botones.scss podría quedar algo así:

.boton-amarillo {
    @include boton($amarillo, inline-block);
}

.boton-amarillo-block {
    @include boton($amarillo, block);
}

.boton-verde {
    @include boton($verde, inline-block);
}
.boton-rojo-block {
    @include boton(red, block);
}
.boton-verde-block {
    @include boton(green,block);
}

Y el src/scss/internas/_admin.scss algo así:

.alerta{
    padding: .5rem;
    text-align: center;
    color: $blanco;
    font-weight: $bold;
    text-transform: uppercase;
    margin: 1rem 0;
    &.error{
        background-color: red;
    }
    &.exito {
        background-color: green ;
    }
}

table.propiedades{
    margin-top: 4rem;
    width: 100%;
    border-spacing:0 ;
    thead {
        background-color: green;
        th {
            color:$blanco;
            padding: 2rem;

        }
    }
    .imagen-tabla{
        width: 10rem;
    }
}

Quedaría algo como esto, pueden mejorar o modificar los css como gusten para darle el aspecto que prefieran:

Una vez tenemos diseñado el listado vamos a rellenarlo incluyendo el código PHP en consecuencia.

Sin llegar aún a escribir el código vamos poner como comentario la guía de los pasos a seguir, coloquen cada paso donde crean que es conveniente irlos haciendo, esta es buena técnica de programación, escribimos los pasos que queremos hacer y se sigue como guión para facilitar la programación

//importar la conexión

//escribir el query

//consultar la bd

<!-- mostrar los resultados -->

//mostrar un mensaje condicional
//Cerrar la conexión 

Los 3 primeros pasos:

//importar la conexión
require '../includes/config/database.php';
$db=conectarDB();
//escribir el query
$query= "SELECT * FROM propiedades";
//consultar la bd
$resultadoConsulta=mysqli_query($db,$query);

//mostrar un mensaje condicional
$resultado=$_GET['resultado']??null;

Ahora insertamos en el html el código que necesitamos para iterar sobre el resultado de la bd, es evidente que es la fila lo que se debe repetir con lo que:
<!-- mostrar los resultados -->

 <table class="propiedades">
        <thead>
            <tr>
                <th>ID</th>
                <th>Título</th>
                <th>Imagen</th>
                <th>Precio</th>
                <th>Acciones</th>
            </tr>
        </thead>
        <tbody>
            <?php while ($propiedad=mysqli_fetch_assoc($resultadoConsulta)) { ?>
            <tr>
                <td>1</td>
                <td>Casa en la playa</td>
                <td>
                    <img src="../imagenes/8d9093cd64eb2976fecdc8146734cc0d.jpg" class="imagen-tabla" >   
                </td>
                <td>120000</td>
                <td>
                    <a class="boton-rojo-block" href="#">Eliminar</a>
                    <a class="boton-amarillo-block" href="#">Actualizar</a>
                </td>
            </tr>
            <?php } ?>
        </tbody>

    </table>

Nuestro primer resultado debe ser algo así:

Incluye los resultados dentro de la tabla para tener una propiedad distinta en cada fila.