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 (register.php)
Crea un archivo llamado `register.php` 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 (script.js)
Actualiza el archivo `script.js` para enviar los datos al servidor usando
AJAX.
```javascript
document.getElementById('computerForm').addEventListener('submit
', function(e) {
e.preventDefault();
const brand = document.getElementById('brand').value;
const model = document.getElementById('model').value;
const year = document.getElementById('year').value;
// Enviar los datos al servidor usando fetch API
fetch('register.php', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: `marca=${brand}&modelo=${model}&año=${year}`
})
.then(response => response.text())
.then(data => {
console.log(data); // Puedes ver la respuesta del servidor en la
consola
addComputerToList(brand, model, year);
// Limpiar el formulario
this.reset();
})
.catch(error => console.error('Error:', error));
});
function addComputerToList(brand, model, year) {
const computerList = document.getElementById('computerList');
const row = document.createElement('tr');
row.innerHTML = `
<td>${brand}</td>
<td>${model}</td>
<td>${year}</td>
`;
computerList.appendChild(row);
```
### Paso 4: Código HTML (index.html)
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 `index.html`, `styles.css`, `script.js`, y
`register.php` en la carpeta correspondiente del servidor.
4. Abre `index.html` 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!
