Menu de operaciones en un crud

 

Menu de operaciones en un crud

Para implementar un menú de operaciones CRUD (Crear, Leer, Actualizar, Eliminar) en un proyecto utilizando NetBeans con JavaScript, CSS y HTML, es esencial estructurar adecuadamente la interfaz y las funcionalidades. A continuación se describen los tipos de menús y su implementación.

• Descripción: Este menú contiene enlaces a las diferentes operaciones CRUD.

• Ejemplo de Código:

  xml
  <nav>
      <ul>
          <li><a href="crear.html">Crear</a></li>
          <li><a href="leer.html">Leer</a></li>
          <li><a href="actualizar.html">Actualizar</a></li>
          <li><a href="eliminar.html">Eliminar</a></li>
      </ul>
  </nav>

• Descripción: Este menú se utiliza para acceder al formulario de creación de nuevos registros.

<h2>Crear Nuevo Registro</h2>

<form id="createForm">

<label for="name">Nombre:</label>

<input type="text" id="name" name="name" required>

<button type="submit">Guardar</button>

</form>

Descripción: Muestra una lista de registros existentes, permitiendo al usuario ver detalles.

<h2>Lista de Registros</h2>

<table id="recordTable">

<thead>

<tr>

<th>ID</th>

<th>Nombre</th>

<th>Acciones</th>

</tr>

</thead>

<tbody></tbody>

</table>

 Menú de Actualizar

• Descripción: Permite seleccionar un registro existente para editarlo.

<h2>Actualizar Registro</h2>

<form id="updateForm">

<label for="updateId">ID:</label> <input type="text" id="updateId" name="updateId" required> <label for="updateName">Nombre:</label> <input type="text" id="updateName" name="updateName" required>

<button type="submit">Actualizar</button>

</form>

Menú de Eliminar

• Descripción: Permite al usuario seleccionar un registro para eliminar.

• Ejemplo de Código:

  xml
  <h2>Eliminar Registro</h2>
  <form id="deleteForm">
      <label for="deleteId">ID del Registro a Eliminar:</label>
      <input type="text" id="deleteId" name="deleteId" required>
      <button type="submit">Eliminar</button>
  </form>

Implementación en JavaScript

Para que el menú funcione adecuadamente, se deben implementar las funciones correspondientes en JavaScript. A continuación se presentan ejemplos básicos:

Función para Crear

javascript
document.getElementById('createForm').addEventListener('submit', function(event) {
    event.preventDefault();
    const name = document.getElementById('name').value;
    // Lógica para enviar datos al servidor o almacenarlos localmente
});

Función para Leer

javascript
function loadRecords() {
    // Lógica para cargar registros desde el servidor o almacenamiento local
}

Función para Actualizar

javascript
document.getElementById('updateForm').addEventListener('submit', function(event) {
    event.preventDefault();
    const id = document.getElementById('updateId').value;
    const name = document.getElementById('updateName').value;
    // Lógica para actualizar el registro en el servidor o almacenamiento local
});

Función para Eliminar

javascript
document.getElementById('deleteForm').addEventListener('submit', function(event) {
    event.preventDefault();
    const id = document.getElementById('deleteId').value;
    // Lógica para eliminar el registro del servidor o almacenamiento local
});

C