Crear una página web donde las personas puedan subir fotos, y también calificar y comentar las fotos que suban otros usuarios. Cada semana, se seleccionará automáticamente la mejor foto según las calificaciones recibidas. Esta foto destacada será mostrada en la página principal o en una sección especial como "Foto de la semana". Dame el codigo completo
Aquí te dejo un ejemplo de código completo para crear una página web con las características que mencionaste. Este ejemplo utiliza HTML, CSS y JavaScript, y utiliza la biblioteca jQuery para simplificar la interacción con el DOM. **index.html** ```html <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Foto de la semana</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <h1>Foto de la semana</h1> </header> <main> <section id="foto-de-la-semana"> <h2>Foto de la semana</h2> <img id="foto-seleccionada" src="" alt=""> <p id="comentarios-seleccionada"></p> </section> <section id="subir-foto"> <h2>Subir foto</h2> <form id="formulario-subir-foto"> <input type="file" id="foto" name="foto" accept="image/*"> <button type="submit">Subir foto</button> </form> </section> <section id="galeria"> <h2>Galería</h2> <ul id="lista-fotos"> <!-- Fotos se mostrarán aquí --> </ul> </section> </main> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="script.js"></script> </body> </html> ``` **styles.css** ```css body { font-family: Arial, sans-serif; } header { background-color: #f0f0f0; padding: 1em; text-align: center; } main { display: flex; flex-direction: column; align-items: center; padding: 2em; } section { background-color: #f0f0f0; padding: 1em; margin-bottom: 1em; border: 1px solid #ddd; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } h1, h2 { margin-top: 0; } #foto-de-la-semana { display: flex; flex-direction: column; align-items: center; } #foto-seleccionada { width: 100%; height: 200px; object-fit: cover; border-radius: 10px; } #comentarios-seleccionada { margin-top: 1em; } #subir-foto { display: flex; flex-direction: column; align-items: center; } #formulario-subir-foto { display: flex; flex-direction: column; align-items: center; } #foto { margin-bottom: 1em; } #galeria { display: flex; flex-direction: column; align-items: center; } #lista-fotos { list-style: none; padding: 0; margin: 0; } #lista-fotos li { margin-bottom: 1em; } #lista-fotos img { width: 100%; height: 150px; object-fit: cover; border-radius: 10px; } #lista-fotos p { margin-top: 1em; } ``` **script.js** ```javascript $(document).ready(function() { // Inicializar variables var fotos = []; var fotoSeleccionada = null; var comentariosSeleccionada = []; // Función para subir foto $('#formulario-subir-foto').submit(function(e) { e.preventDefault(); var foto = $('#foto').get(0).files[0]; var formData = new FormData(); formData.append('foto', foto); $.ajax({ type: 'POST', url: 'subir-foto.php', data: formData, processData: false, contentType: false, success: function(data) { var fotoSubida = JSON.parse(data); fotos.push(fotoSubida); mostrarFotos(); $('#foto').val(''); } }); }); // Función para mostrar fotos function mostrarFotos() { $('#lista-fotos').empty(); fotos.forEach(function(foto) { var li = $('<li>'); var img = $('<img>').attr('src', foto.url).attr('alt', foto.descripcion); var p = $('<p>').text(foto.descripcion); var button = $('<button>').text('Calificar').attr('data-id', foto.id); button.on('click', function() { calificarFoto($(this).data('id')); }); li.append(img).append(p).append(button); $('#lista-fotos').append(li); }); } // Función para calificar foto function calificarFoto(id) { var calificacion = prompt('Ingrese su calificación (1-5)'); if (calificacion >= 1 && calificacion <= 5) { $.ajax({ type: 'POST', url: 'calificar-foto.php', data: {id: id, calificacion: calificacion}, success: function(data) { var fotoCalificada = JSON.parse(data); fotos.forEach(function(foto) { if (foto.id === fotoCalificada.id) { foto.calificaciones.push(calificacion); foto.promedio = calcularPromedio(foto.calificaciones); } }); mostrarFotos(); seleccionarFoto(); } }); } } // Función para calcular promedio function calcularPromedio(calificaciones) { var suma = calificaciones.reduce(function(a, b) { return a + b; }, 0); return suma / calificaciones.length; } // Función para seleccionar foto function seleccionarFoto() { var fotoMasCalificada = fotos.reduce(function(a, b) { return a.promedio > b.promedio ? a : b; }, fotos[0]); fotoSeleccionada = fotoMasCalificada; comentariosSeleccionada = fotoMasCalificada.comentarios; $('#foto-seleccionada').attr('src', fotoMasCalificada.url); $('#comentarios-seleccionada').text(comentariosSeleccionada.join(', ')); } // Mostrar fotos al cargar la página mostrarFotos(); // Seleccionar foto al cargar la página seleccionarFoto(); }); ``` **subir-foto.php** ```php <?php // Conectar a la base de datos $servername = "localhost"; $username = "usuario"; $password = "contraseña"; $dbname = "base_de_datos"; $conn = new mysqli($servername, $username, $password, $dbname); // Verificar conexión if ($conn->connect_error) { die("Conexión fallida: " . $conn->connect_error); } // Obtener la foto subida $foto = $_FILES['foto']; // Guardar la foto en la base de datos $sql = "INSERT INTO fotos (url, descripcion) VALUES (?, ?)"; $stmt = $conn->prepare($sql); $stmt->bind_param("ss", $foto['name'], $foto['name']); $stmt->execute(); // Obtener el ID de la foto subida $fotoId = $conn->insert_id; // Guardar la foto en el servidor move_uploaded_file($foto['tmp_name'], 'fotos/' . $foto['name']); // Cerrar la conexión $conn->close(); // Devolver la foto subida en formato JSON echo json_encode(array('id' => $fotoId, 'url' => 'fotos/' . $foto['name'], 'descripcion' => $foto['name'])); ?> ``` **calificar-foto.php** ```php <?php // Conectar a la base de datos $servername = "localhost"; $username = "usuario"; $password = "contraseña"; $dbname = "base_de_datos"; $conn = new mysqli($servername, $username, $password, $dbname); // Verificar conexión if ($conn->connect_error) { die("Conexión fallida: " . $conn->connect_error); } // Obtener la calificación $calificacion = $_POST['calificacion']; $id = $_POST['id']; // Guardar la calificación en la base de datos $sql = "UPDATE fotos SET calificaciones = calificaciones + ?, promedio = (calificaciones + ?) / COUNT(*) WHERE id = ?"; $stmt = $conn->prepare($sql); $stmt->bind_param("iii", $calificacion, $calificacion, $id); $stmt->execute(); // Cerrar la conexión $conn->close(); // Devolver la foto calificada en formato JSON echo json_encode(array('id' => $id, 'calificaciones' => array($calificacion), 'promedio' => $calificacion)); ?> ``` Ten en cuenta que este es solo un ejemplo básico y que debes adaptarlo a tus necesidades específicas. Además, debes asegurarte de que la base de datos esté configurada correctamente y que los archivos PHP estén en el servidor correcto.