Per fer que el codi enmagatzemi la informacio a una base de dades he agregat mysql.connector i os per vincular donant-li usuari y contrasenya creat per aquest proposit nomes al igual que la base de dades
Pàgina amb Menú i Iframe
//codi de la pagina superior
<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Web amb Menú i Iframe</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
display: flex;
flex-direction: column;
height: 100vh;
}
h2 {
background-color: #333;
color: white;
padding: 1rem;
text-align: center;
}
.menu-nivell-1 {
display: flex;
flex-wrap: wrap;
justify-content: center;
background-color: #333;
color: white;
}
.menu-nivell-1 > div {
position: relative;
margin: 0.5rem;
cursor: pointer;
}
.menu-nivell-2 {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #555;
min-width: 150px;
z-index: 1;
}
.menu-nivell-2 div {
padding: 0.5rem;
cursor: pointer;
}
.menu-nivell-2 div:hover {
background-color: #666;
}
.menu-nivell-1 > div:hover .menu-nivell-2 {
display: block;
}
iframe {
flex: 1;
width: 100%;
border: none;
}
@media (max-width: 768px) {
.menu-nivell-1 {
flex-direction: column;
align-items: stretch;
}
.menu-nivell-1 > div {
text-align: center;
}
}
</style>
<script>
window.addEventListener('DOMContentLoaded', () => {
const iframe = document.getElementById('contingut');
if (iframe) {
iframe.addEventListener('load', () => {
console.log("carregat");
console.log("URL assignada:", iframe.src);
});
} else {
console.warn("No s'ha trobat l'iframe amb id 'contingut'");
}
});
</script>
</head>
<body>
<header>
<h2>Pàgina amb Menú i Iframe</h2>
</header>
<nav>
<div class="menu-nivell-1">
<div>
Secció 1
<div class="menu-nivell-2">
<div onclick="canviaIframe('https://www.example.com')">Pàgina 1.1</div>
<div onclick="canviaIframe('https://www.wikipedia.org')">Pàgina 1.2</div>
</div>
</div>
<div>
Secció 2
<div class="menu-nivell-2">
<div onclick="canviaIframe('https://www.google.net')">Pàgina 2.1</div>
<div onclick="canviaIframe('https://www.openai.com')">Pàgina 2.2</div>
</div>
</div>
<div>
Formulari
<div class="menu-nivell-2">
<div onclick="canviaIframe('https://ilecina.inscastellbisbal.net/wp-content/uploads/2025/05/formulari2.html')">formulari POST</div>
</div>
</div>
</div>
</nav>
<iframe id="contingut" src="about:blank"></iframe>
<script>
function canviaIframe(url) {
document.getElementById('contingut').src = url;
}
</script>
</body>
</html>
window.addEventListener('DOMContentLoaded', () => {
const iframe = document.getElementById('contingut');
if (iframe) {
iframe.addEventListener('load', () => {
console.log("carregat");
console.log("URL assignada:", iframe.src);
});
} else {
console.warn("No s'ha trobat l'iframe amb id 'contingut'");
}
});<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="UTF-8" />
<title>Formulari i Llista d'Usuaris</title>
</head>
<body>
<h2>Envia les teves dades</h2>
<form id="formulari">
<label for="nom">Nom:</label><br>
<input type="text" id="nom" name="nom" required /><br /><br />
<label for="correu">Correu electrònic:</label><br>
<input type="email" id="correu" name="correu" required /><br /><br />
<button type="submit">Enviar</button>
</form>
<p id="resposta"></p>
<script src="formulari.js"></script>
</body>
</html>
document.getElementById('formulari').addEventListener('submit', function (e) {
e.preventDefault();
const nom = document.getElementById('nom').value;
const correu = document.getElementById('correu').value;
fetch('http://localhost:5000/rebre-dades', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ nom, correu })
})
.then(response => {
if (!response.ok) {
throw new Error("Error en la resposta del servidor");
}
return response.json();
})
.then(data => {
console.log(" Dades enviades correctament:", data);
document.getElementById('resposta').innerText = data.missatge;
})
.catch(error => {
console.error(" Error en l'enviament:", error);
document.getElementById('resposta').innerText = "Hi ha hagut un error en l'enviament.";
});
});
from flask import Flask, request, jsonify
from flask_cors import CORS
import mysql.connector
import os
# Crear aplicació Flask
app = Flask(__name__)
CORS(app)
# Paràmetres de connexió (usant variables per facilitar manteniment)
db_host = 'localhost'
db_user = 'usuari'
db_password = '1234'
db_name = 'basedades'
# Connectar a la base de dades
def obtenir_connexio():
try:
connexio = mysql.connector.connect(
host=db_host,
user=db_user,
password=db_password,
database=db_name
)
return connexio
except mysql.connector.Error as error:
print(f"error en la connexió: {error}")
return None
# Ruta per rebre dades via POST
@app.route('/rebre-dades', methods=['POST'])
def rebre_dades():
dades = request.get_json()
nom = dades.get('nom')
correu = dades.get('correu')
if not nom or not correu:
return jsonify({'error': 'Falten dades'}), 400
# Inserir dades a la base de dades
connexio = obtenir_connexio()
if connexio:
cursor = connexio.cursor()
try:
consulta = "INSERT INTO usuaris (nom, correu) VALUES (%s, %s)"
cursor.execute(consulta, (nom, correu))
connexio.commit()
print(f" Dades desades: {nom}, {correu}")
return jsonify({'missatge': 'Dades desades correctament'}), 200
except mysql.connector.Error as error:
print(f" Error al guardar les dades: {error}")
return jsonify({'error': 'Error al guardar les dades'}), 500
finally:
cursor.close()
connexio.close()
else:
return jsonify({'error': 'No s\'ha pogut connectar a la base de dades'}), 500
# Iniciar servidor
if __name__ == '__main__':
app.run(debug=True, host='0.0.0.0')
CREATE USER 'usuari'@'localhost' IDENTIFIED BY '1234';
CREATE DATABASE basedades;
GRANT ALL PRIVILEGES ON basedades.* TO 'usuari'@'localhost';
FLUSH PRIVILEGES;
//per veure la taula amb la informacio recopilada:
USE basedades;
CREATE TABLE usuaris (
id INT AUTO_INCREMENT PRIMARY KEY,
nom VARCHAR(100),
correu VARCHAR(100),
);
SELECT * FROM usuaris;