Como puedo guardar el estado de botones si es verde o rojo en PHP y Ajax
Estoy con un proyecto de parking el cual tengo 15 botones que son los cajones, tengo la funcionalidad ya creado en javascript al dar clic cambia a rojo hasta ahí dar otra ves clic vuelva a verde hasta ahí todo bien, pero quiero que se mantenga ese color como ocupado o desocupado, ya sea cuando se cierre el sistema y vuelva abrirlo se mantenga ese color.
Tengo una base de datos con una tabla llamada Nivel con sus respectivas columnas idCajon y estatus no se si llenarlas antes en el mismo gestor BD,
Ya que también ahí he visto comentarios de otras preguntas que se puedo realizar por medio de Ajax y Php ya que tengo muy poco conocimiento de estas tecnologías y estoy empezando en sistemas web, les agradecería sus conocimientos.
En la función de javascript me comentaron que creara la petición para actualizar en la base de datos, pero no logro crearlo.
HTML de los cajones
<div id="cajones" class="contendo"> <tr> <button class="cajon" name="cajon">Cajon 1</button> <button class="cajon" name="cajon">Cajon 2</button> <button class="cajon" name="cajon">Cajon 3</button> <button class="cajon" name="cajon">Cajon 4</button> <button class="cajon" name="cajon">Cajon 5</button> <button class="cajon" name="cajon">Cajon 6</button> <button class="cajon" name="cajon">Cajon 7</button> <button class="cajon" name="cajon">Cajon 8</button> <button class="cajon" name="cajon">Cajon 9</button> <button class="cajon" name="cajon">Cajon 10</button> <button class="cajon" name="cajon">Cajon 11</button> <button class="cajon" name="cajon">Cajon 12</button> <button class="cajon" name="cajon">Cajon 13</button> <button class="cajon" name="cajon">Cajon 14</button> <button class="cajon" name="cajon">Cajon 15</button> </tr>
Función en Javascript que hace los cambios de color del botón
function estatusCajon(e) { let boton = e.target; boton.classList.toggle("ocupado"); let ocupado = boton.classList.contains("ocupado"); let cajon = boton.textContent.replace("Cajon ", ""); console.log(cajon, ocupado); en esta parate me comentaron que tengo que poner la petición de ajax para actualizar la base de datos } document.addEventListener("DOMContentLoaded", () => { let cajones = document.querySelectorAll(".cajon"); cajones.forEach((cajon) => { cajon.addEventListener("click", estatusCajon); }); });
Código php para actualizar
<?php $id=$_GET['id']; include("conexion.php"); if (isset($_POST['cajon'])){ $estatus = $_POST["estatus"]; $SQL_UPADTE =" UPDATE nivel1 SET estatus = '$estatus' WHERE idCajon = '$id'"; $RESUL =$conexion ->query($SQL_UPADTE); if (!$RESUL) { echo 'Error al modificar los datos'; } else { header ("location: registro.php"); } } mysqli_close($conexion); ?>
Base de datos tengo llenado como estatus Disponible
Aquí tengo el demo de los cajones: