PHP - Gestionar tabla a partir de BBDD

Pos: 325

Val: 20

Gestionar tabla a partir de BBDD

Publicado por Victor (11 intervenciones) el 04/01/2018 09:02:59

Hola.

Ando un poco atascado (como buen novato) con una mini-aplicación. Se trata de abrir una bbdd y representar los datos en una tabla. Casi todos esos datos tienen un valor 0 de inicio. Si hago clic en una celda cambian a uno... si hago click de nuevo a dos... si hago click de nuevo a tres... y vuelven a 0 si hago click de nuevo... además de cambiar de color según el valor.

Donde me atasco es en saber cómo gestionar todo eso. Más que código me gustaría saber qué debo hacer... sé que abrir y cerrar bbdd obviamente con PHP, pero conseguir el tema de representar 10 filas e interactuar con las celdas para luego poder grabar esos resultados no sé cómo conseguirlo (usar PHP, JS...).

Pongo el código a modo testimonial porque se queda en representar las columnas...

<!DOCTYPE html>

<!-- Aqui van los comentarios -->

<html>

    <head>

    	<title>SHOT CONTROL</title>

        <link rel="stylesheet" href="styles.css" >

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

        <script  src="https://code.jquery.com/jquery-3.2.1.js"  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="  crossorigin="anonymous"></script>

    </head>

    <body>

        <div>

            <img href="images\shotcontrol.png">

        </div>

    	<?php

/*

            Apertura de BBDD

*/

            try {

            	$usuario    = "root";

            	$contrasena = "";

                $mbd        = new PDO ('mysql:host=localhost;dbname=planos', $usuario, $contrasena);

                foreach($mbd->query ('SELECT PLANO,CB,CAO,SB,SAO,OccSh,DEPTH,SHADOW,SM,FBX,COMMENTS,STATUS from planos') as $fila) {

                        echo "<div class='container'>

                                <div class='text-center'>

                                    <div class='btn-group-lg' role='group' aria-label='...' >

                                        <button type='button' class='btn btn-default'>Left</button>

                                        <button type='button' class='btn btn-default'>Medium</button>

                                        <button type='button' class='btn btn-default'>Right</button>

                                    </div>

                                    </div>

                                    <br/>

                                    <div class='row'>

                                        <table class='table table-bordered table-dark' style='width:1200px'>

                                            <thead class='thead-dark'>

                                                <td align='center'>PLANO</td>

                                                <td align='center'>CB</td>

                                                <td align='center'>CAO</td>

                                                <td align='center'>SB</td>

                                                <td align='center'>SAO</td>

                                                <td align='center'>OccSh</td>

                                                <td align='center'>DEPTH</td>

                                                <td align='center'>SHADOW</td>

                                                <td align='center'>SM</td>

                                                <td align='center'>FBX</td>

                                                <td align='center'>COMMENTS</td>

                                                <td align='center'>STATUS</td>

                                            </thead>

                                            <tr>

                                                <td align='center'>".$fila['PLANO']."</td>

                                                <td align='center'>".$fila['CB']."</td>

                                                <td align='center'>".$fila['CAO']."</td>

                                                <td align='center'>".$fila['SB']."</td>

                                                <td align='center'>".$fila['SAO']."</td>

                                                <td align='center'>".$fila['OccSh']."</td>

                                                <td align='center'>".$fila['DEPTH']."</td>

                                                <td align='center'>".$fila['SHADOW']."</td>

                                                <td align='center'>".$fila['SM']."</td>

                                                <td align='center'>".$fila['FBX']."</td>

                                                <td align='center'>".$fila['COMMENTS']."</td>

                                                <td align='center'>".$fila['STATUS']."</td>

                                            </tr>

                                        </table>

                                        </div>

                                </div>

";

                $mbd = null;

            } catch (PDOException $e) {

                print "¡Error!: " . $e->getMessage() . "<br/>";

                die();

?>

    </body>

</html>

Cualquier pista se agradece.

Saludos

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 11

Val: 920

Gestionar tabla a partir de BBDD

Publicado por italo (150 intervenciones) el 11/01/2018 11:00:14

hola, deberas usar ajax para actualizar/consultar el db (el campo con los valores 0,1,2,3) y con js o jquery, en el evento onclick de cada celda ejecutas la llamada de ajax y cambias de color.

por ejemplo, en que celda de la tabla clickarias para cambiar el valor/color?

debes dar un poco mas de informacion.

Salud2

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Pos: 325

Val: 20

Gestionar tabla a partir de BBDD

Publicado por Victor (11 intervenciones) el 11/01/2018 11:36:40

Gracias, por responder, Italo. Ya daba la duda por perdida ya que me hago cargo de que es un poco rara.

En respuesta a tu duda: Sería haciendo click en todas menos la primera (sería el id) y comments (serían comentarios). La duda que tengo yo es si trasladar todos los valores a un array JS, trabajar con ellos y luego pasarlos a la BBDD. La duda es que me gustaría que una vez clickada una celda se actualice la BBDD y no sé si eso es complicar mucho las cosas. Por eso decía que no quería molestar a nadie compartiendo código, sino conocer por dónde ir y ya buscarme la vida por mi cuenta :)

Gracias de nuevo. Un saludo

Valora esta respuesta

Comentar

Pos: 11

Val: 920

Gestionar tabla a partir de BBDD

Publicado por italo (150 intervenciones) el 11/01/2018 13:00:00

Hola Victor,

es decir que si se hace click en el valor de las celdas de las columanas: cb o cao o sb o sao o occsh o depth o shadow o sm o fbx, status de cualquier fila debe cambiar solo esa celda?

por ejemplo:

--------------------------------------------------------------------------------------------
cb -- cao -- sb -- sao -- occsh -- depth -- shadow -- sm -- fbx -- status
--------------------------------------------------------------------------------------------
0------ 1----- 2----- 3--------1-----------3---------2-----------0------1-------3----
--------------------------------------------------------------------------------------------

si hago click en el valor de la columna "sb":

primer click: 3
segundo click: 0
tercero click: 1
cuarto click: 2

0 color plomo
1 color verde
2 color naranja
3 color rojo

debera de cambiar color y valor solo la celda donde se ha clickado??

salud2

Valora esta respuesta

Comentar

Pos: 325

Val: 20

Gestionar tabla a partir de BBDD

Publicado por Victor (11 intervenciones) el 11/01/2018 13:51:00

Exacto, solo cambia de valor la celda donde se clicka. Perdón por no haberlo dejado claro :S

Valora esta respuesta

Comentar

Pos: 11

Val: 920

Gestionar tabla a partir de BBDD

Publicado por italo (150 intervenciones) el 11/01/2018 17:26:08

hola

y la celda del comentario se puede editar o queda fija?

salu2

Valora esta respuesta

Comentar

Pos: 325

Val: 20

Gestionar tabla a partir de BBDD

Publicado por Victor (11 intervenciones) el 11/01/2018 18:35:45

Se debería poder editar siendo tipo varchar.

Valora esta respuesta

Comentar

Pos: 11

Val: 920

Gestionar tabla a partir de BBDD

Publicado por italo (150 intervenciones) el 16/01/2018 19:09:30

hola, aqui el codigo, cambia los nombres a tu gusto, he usado los nombres de tus campos, asi que solo cambias el file configdb.php con los datos de tu db.

configdb.php

<?php

$host = 'localhost';

$db   = 'itisinfor';

$user = 'root';

$pass = '';

$charset = 'utf8mb4';

try

    $dsn = "mysql:host=$host;dbname=$db;charset=$charset";

    $opt = [

        PDO::ATTR_ERRMODE            => PDO::ERRMODE_EXCEPTION,

        PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,

        PDO::ATTR_EMULATE_PREPARES   => false,

];

    $pdo = new PDO($dsn, $user, $pass, $opt);

catch(PDOException $e)

    echo "Error:".$e->getMessage();

index.php

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/redmond/jquery-ui.css">

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<style>

.td_plomo_0 {

    background-color: #aaa;

.td_verde_1 {

    background-color: #29b87e;

.td_naranja_2 {

    background-color: #efb40f;

.td_rojo_3 {

    background-color: #ef0f0f;

</style>

<!-- INICIO -->

<script type="text/javascript">

$(document).ready(function () {

    //* Por cada valor donde esta presente la class "newvalor"

    $(".newvalor").each(function() {

        //* declaro la variable para luego verificar su contenido.

        var verifico_newvalor = $(this).text();

        //* si en la variable "verifico_newvalor" existe el valor 0,1,2,3 agrego el style correspondiente.

        if (verifico_newvalor == 0) {

            $(this).addClass('td_plomo_0');

        } else if (verifico_newvalor == 1) {

            $(this).addClass('td_verde_1');

        } else if (verifico_newvalor == 2) {

            $(this).addClass('td_naranja_2');

        } else if (verifico_newvalor == 3) {

            $(this).addClass('td_rojo_3');

});

}); // cierro document

</script>

<!-- INICIO -->

<script type="text/javascript">

$(document).ready(function () {

    //* en el evento click, de la class newvalor (declarado en los TD interesados.)

	$('.newvalor').click(function(){

        //* declaro variable y memorizo valor del id_plano seleccionado.

		var id_plano_sel = $(this).closest("div.divnewvalor").find("input[name='nidplano']").val();

        //* declaro variable y memorizo id del td del valor seleccionado.

        var id_td_plano_sel = ($(this).attr('id'));

		//* declaro variable temp y memorizo td valor seleccionado.

        var td_plano_sel_temp = ($(this).text());

        //* declaro variable y memorizo, por cada click sobre el td, agrego 1.

        var td_plano_sel = parseInt(td_plano_sel_temp) + parseInt(1);

        //* si td_plano_sel es igual a 4, reinicio la variable con 0

        if (td_plano_sel == 4) {

            td_plano_sel = 0

        console.log("id plano: " + id_plano_sel + " - id td valor: " + id_td_plano_sel + " - td valor: " + td_plano_sel);

        //* abro ajax.

        //* ajax, envio las variables al file update php, con el metodo post.

        $.ajax({

            url: "file_update.php",

            type: "POST",

            data: { id_plano_sel: id_plano_sel,

                    id_td_plano_sel: id_td_plano_sel,

                    td_plano_sel: td_plano_sel,

},

            dataType: "html",

            success: function () {

                //* si todo va bien y el update dio exito positivo:

                //* refresho la pagina.

                location.reload();

                //* popup de confirmacion.

                alert("OK, CAMPO " + id_td_plano_sel + " ACTUALIZADO");

},

            error: function (xhr, ajaxOptions, thrownError) {

                //* Si da algun error.

                alert("ERROR! HA OCURRIDO UN ERROR");

        }); //cierro ajax

    }); // cierro newvalor

}); // cierro document

</script>

<?php

//* configuracion database.

include ("configdb.php");

function filtrado($datos){

    $datos = trim($datos); // Elimina espacios antes y después de los datos

    $datos = stripslashes($datos); // Elimina backslashes \

    $datos = htmlspecialchars($datos); // Traduce caracteres especiales en entidades HTML

    return $datos;

$stmt = $pdo->query('SELECT * FROM planos');

while ($row = $stmt->fetch())

?>

    <div class="divnewvalor">

    <!-- campo hidden, sirve para identificar el id (plano) donde se trabajara en los click sucesivos. -->

        <input type="hidden" name="nidplano" class="chidplano" value="<?php echo $row['plano'];?>">

        <div>

            <div>

                <table border="1">

                    <thead>

                        <td>PLANO</td>

                        <td>CB</td>

                        <td>CAO</td>

                        <td>SB</td>

                        <td>SAO</td>

                        <td>OccSh</td>

                        <td>DEPTH</td>

                        <td>SHADOW</td>

                        <td>SM</td>

                        <td>FBX</td>

                        <td>COMMENTS</td>

                        <td>STATUS</td>

                    </thead>

                    <tr>

                        <td id="plano"  class="idnewvalor"><?php echo filtrado($row['plano']);?></td>

                        <td id="cb"     class="newvalor"><?php echo filtrado($row['cb']);?></td>

                        <td id="cao"    class="newvalor"><?php echo filtrado($row['cao']);?></td>

                        <td id="sb"     class="newvalor"><?php echo filtrado($row['sb']);?></td>

                        <td id="sao"    class="newvalor"><?php echo filtrado($row['sao']);?></td>

                        <td id="occsh"  class="newvalor"><?php echo filtrado($row['occsh']);?></td>

                        <td id="depth"  class="newvalor"><?php echo filtrado($row['depth']);?></td>

                        <td id="shadow" class="newvalor"><?php echo filtrado($row['shadow']);?></td>

                        <td id="sm"     class="newvalor"><?php echo filtrado($row['sm']);?></td>

                        <td id="fbx"    class="newvalor"><?php echo filtrado($row['fbx']);?></td>

                        <td id="comments"><?php echo filtrado($row['comments']);?></td>

                        <td id="status" class="newvalor"><?php echo filtrado($row['status']);?></td>

                    </tr>

                </table>

            </div>

        </div>

    </div>

<?php

?>

file_update.php

<?php

//* file de configuracion.

include ("configdb.php");

function filtrado($datos){

    $datos = trim($datos); // Elimina espacios antes y después de los datos

    $datos = stripslashes($datos); // Elimina backslashes \

    $datos = htmlspecialchars($datos); // Traduce caracteres especiales en entidades HTML

    return $datos;

$id_plano_sel = filtrado($_POST['id_plano_sel']); //* valor del id_plano clickado

$id_td_plano_sel = filtrado($_POST['id_td_plano_sel']);  //* id td valor seleccionado

$td_plano_sel = filtrado($_POST['td_plano_sel']); //* td valor seleccionado

$stmt = $pdo->prepare("UPDATE planos SET $id_td_plano_sel = :td_plano_sel WHERE plano = :id_plano_sel");

//* campo integer

$stmt->bindValue(':td_plano_sel',$td_plano_sel,PDO::PARAM_INT);

//* campo integer

$stmt->bindValue(':id_plano_sel',$id_plano_sel,PDO::PARAM_INT);

//* ejecuto la query.

$stmt->execute();

el codigo es base, seguramente se puede hacer de otra manera...

el campo comments, no lo he tratado.

suerte, cualquier cosa preguntas.

salud2
screenshot

Valora esta respuesta

Comentar

Pos: 325

Val: 20

Gestionar tabla a partir de BBDD

Publicado por Victor (11 intervenciones) el 16/01/2018 20:06:48

No, si suerte he tenido, sí 8-0

Muchas gracias, sólo pedía pistas de por donde ir, pero me has pagado el viaje. Menudo trabajazo, en cuanto pueda lo estudio, vaya master!

Valora esta respuesta

Comentar

Pos: 11

Val: 920

Gestionar tabla a partir de BBDD

Publicado por italo (150 intervenciones) el 16/01/2018 21:35:43

hola, bueno algunas veces es poco claro cuando se explican algunas cosas, al menos, de esta manera puedes usar este tipo de metodos, alternativas para interactuar con los datos de una database.

por ejemplo, el campo hidden no es necesario ya que se podia usar directamente el id del td plano, es para que notes la diferencia, hay muchas maneras de capturar los datos.

ya con calma, como tarea, puedes hacer la parte de los comentarios, editarlos en la misma celda.

salud2.

Valora esta respuesta

Comentar

biblioteca de mp3

Comparaciones con PHPExcel