Para integrar MySQL en el sistema de registro de computadoras,
necesitarás un entorno de servidor que pueda manejar tanto el front-
end (HTML, CSS, JavaScript) como el back-end (PHP) para interactuar
con la base de datos MySQL. A continuación, te explicaré cómo
hacerlo paso a paso.
### Estructura del Proyecto
1. **HTML**: Mantendremos la misma estructura.
2. **CSS**: Sin cambios.
3. **JavaScript**: Haremos una solicitud AJAX para enviar datos al
servidor.
4. **PHP**: Crearemos un script para manejar la conexión a la base
de datos y registrar los datos.
5. **MySQL**: Crearemos una base de datos y una tabla para
almacenar los datos.
### Paso 1: Crear la Base de Datos y Tabla en MySQL
1. Abre tu cliente MySQL (puede ser phpMyAdmin, MySQL Workbench
o línea de comandos).
2. Ejecuta los siguientes comandos:
```sql
CREATE DATABASE registro_computadoras;
USE registro_computadoras;
CREATE TABLE computadoras (
id INT AUTO_INCREMENT PRIMARY KEY,
marca VARCHAR(100) NOT NULL,
modelo VARCHAR(100) NOT NULL,
año INT NOT NULL
);
```
### Paso 2: Código PHP ([Link])
Crea un archivo llamado `[Link]` que manejará la inserción de
datos en la base de datos.
```php
<?php
$servername = "localhost"; // Cambia esto si tu servidor es diferente
$username = "tu_usuario"; // Cambia esto por tu usuario
$password = "tu_contraseña"; // Cambia esto por tu contraseña
$dbname = "registro_computadoras";
// Crear conexión
$conn = new mysqli($servername, $username, $password,
$dbname);
// Verificar conexión
if ($conn->connect_error) {
die("Conexión fallida: " . $conn->connect_error);
// Obtener datos del formulario
$marca = $_POST['marca'];
$modelo = $_POST['modelo'];
$año = $_POST['año'];
// Insertar datos en la base de datos
$sql = "INSERT INTO computadoras (marca, modelo, año) VALUES
('$marca', '$modelo', '$año')";
if ($conn->query($sql) === TRUE) {
echo "Nuevo registro creado exitosamente";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
$conn->close();
?>
```
### Paso 3: Modificar el Código JavaScript ([Link])
Actualiza el archivo `[Link]` para enviar los datos al servidor usando
AJAX.
```javascript
[Link]('computerForm').addEventListener('submit
', function(e) {
[Link]();
const brand = [Link]('brand').value;
const model = [Link]('model').value;
const year = [Link]('year').value;
// Enviar los datos al servidor usando fetch API
fetch('[Link]', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: `marca=${brand}&modelo=${model}&año=${year}`
})
.then(response => [Link]())
.then(data => {
[Link](data); // Puedes ver la respuesta del servidor en la
consola
addComputerToList(brand, model, year);
// Limpiar el formulario
[Link]();
})
.catch(error => [Link]('Error:', error));
});
function addComputerToList(brand, model, year) {
const computerList = [Link]('computerList');
const row = [Link]('tr');
[Link] = `
<td>${brand}</td>
<td>${model}</td>
<td>${year}</td>
`;
[Link](row);
```
### Paso 4: Código HTML ([Link])
No se necesitan cambios en este archivo, así que mantén el código
original.
### Instrucciones para Usar
1. Asegúrate de tener un servidor web instalado (como XAMPP o
WAMP) que incluya PHP y MySQL.
2. Crea la base de datos y tabla siguiendo las instrucciones
anteriores.
3. Guarda los archivos `[Link]`, `[Link]`, `[Link]`, y
`[Link]` en la carpeta correspondiente del servidor.
4. Abre `[Link]` en tu navegador.
Con este sistema podrás registrar computadoras y almacenar sus
datos en una base de datos MySQL. Si necesitas más ayuda o tienes
preguntas específicas sobre algún paso, ¡dímelo!
