CRUD PESONAS FOTOS document.getElementById

hazme un codigo de formulario para cargar foto con nombre y dni con fetch api json con php mysql javascript puro metodo insert de sql metodo pdo usar document.getElementById("foto") document.getElementById("nombre") document.getElementById("dni")

Para crear un formulario que permita cargar una foto junto con el nombre y el DNI de una persona usando Fetch API y JSON con PHP, MySQL y JavaScript puro, usando el método PDO y las funciones getElementById() del DOM de HTML, puedes seguir los siguientes pasos:

Crear una tabla en la base de datos MySQL para almacenar los datos de la persona, incluyendo el nombre, DNI y la ruta de la foto.

SQL

Copy code

CREATE TABLE personas (

id INT(11) AUTO_INCREMENT PRIMARY KEY,

nombre VARCHAR(255) NOT NULL,

dni VARCHAR(8) NOT NULL,

foto VARCHAR(255) NOT NULL

);

Crear un archivo HTML que contenga el formulario de carga de fotos y enviar los datos usando el método POST. Asegúrate de incluir el atributo "enctype" en el formulario y establecerlo como "multipart/form-data" para permitir la carga de archivos.

HTML

Copy code

<!DOCTYPE html>

<html>

<head>

<title>Carga de fotos</title>

</head>

<body>

<br>

<br>

<br>

<button type="submit">Cargar foto</button>

</form>

</body>

</html>

Crear un archivo JavaScript (por ejemplo, "script.js") para manejar la carga de la foto usando Fetch API. Para ello, debemos crear un objeto FormData para enviar los datos y la foto, y luego enviar una petición POST al servidor.

JavaScript

Copy code

const form = document.getElementById('form');

form.addEventListener('submit', (e) => {

e.preventDefault();

const formData = new FormData(form);

const nombre = document.getElementById('nombre').value;

const dni = document.getElementById('dni').value;

const foto = document.getElementById('foto').files[0];

formData.append('nombre', nombre);

formData.append('dni', dni);

formData.append('foto', foto);

fetch('cargar_foto.php', {

method: 'POST',

body: formData

})

.then(response => response.json())

.then(data => {

console.log(data);

})

.catch(error => {

console.error(error);

});

Crear un archivo PHP (por ejemplo, "cargar_foto.php") para procesar los datos recibidos y guardar la foto en el servidor. Para ello, debemos mover el archivo temporal al directorio de destino, y luego insertar los datos en la base de datos usando una consulta INSERT.

hacerme solo el codigo cargar_foto.php

¡Claro! A continuación te muestro el código del archivo "cargar_foto.php" para procesar los datos recibidos y guardar la foto en el servidor, utilizando PDO y la función move_uploaded_file() para mover el archivo temporal al directorio de destino:

PHP

Copy code

<?php

if(isset($_FILES['foto'])) {

$nombre = $_POST['nombre'];

$dni = $_POST['dni'];

$foto = $_FILES['foto']['name'];

$tmp_name = $_FILES['foto']['tmp_name'];

$uploads_dir = 'uploads/';

$destination = $uploads_dir . $foto;

if(move_uploaded_file($tmp_name, $destination)) {

$dsn = 'mysql:host=localhost;dbname=basededatos';

$usuario = 'usuario';

$contraseña = 'contraseña';

try {

$pdo = new PDO($dsn, $usuario, $contraseña);

$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

$query = "INSERT INTO personas (nombre, dni, foto) VALUES (:nombre, :dni, :foto)";

$stmt = $pdo->prepare($query);

$stmt->bindParam(':nombre', $nombre);

$stmt->bindParam(':dni', $dni);

$stmt->bindParam(':foto', $foto);

$stmt->execute();

$response = [

'status' => 'success',

'message' => 'Foto cargada exitosamente'

];

echo json_encode($response);

} catch(PDOException $e) {

$response = [

'status' => 'error',

'message' => $e->getMessage()

];

echo json_encode($response);

}

} else {

$response = [

'status' => 'error',

'message' => 'No se pudo cargar la foto'

];

echo json_encode($response);

}

Este código primero verifica si el archivo "foto" se ha enviado con éxito mediante el método POST. Luego, se obtienen el nombre, DNI y nombre de archivo de la foto, así como la ruta temporal del archivo.

A continuación, se mueve la foto al directorio de destino especificado en la variable $uploads_dir, utilizando la función move_uploaded_file() de PHP.

Después, se establece la conexión a la base de datos utilizando PDO y se prepara una consulta INSERT para insertar los datos en la tabla "personas". Los datos se pasan como parámetros utilizando bindParam(). La foto se guarda en la base de datos como una cadena de caracteres que representa la ruta de la foto.

Si la consulta INSERT se ejecuta correctamente, se devuelve una respuesta JSON que indica que la foto se ha cargado exitosamente. Si se produce algún error, se devuelve una respuesta JSON que indica el error.

¡Claro! A continuación te muestro un ejemplo de cómo actualizar los datos de una persona y su foto en la base de datos utilizando PDO y Fetch API en JavaScript.

Aquí tienes el código HTML del formulario:

HTML

Copy code

<div>

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

</div>

<div>

</div>

<div>

</div>

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

</form>

Y a continuación, el código JavaScript para enviar los datos del formulario al servidor y actualizar la base de datos:

JavaScript

Copy code

const formulario = document.getElementById('formulario');

formulario.addEventListener('submit', (event) => {

event.preventDefault();

const id = document.getElementById('id').value;

const nombre = document.getElementById('nombre').value;

const dni = document.getElementById('dni').value;

const foto = document.getElementById('foto').files[0];

const formData = new FormData();

formData.append('id', id);

formData.append('nombre', nombre);

formData.append('dni', dni);

formData.append('foto', foto);

fetch('actualizar_persona.php', {

method: 'POST',

body: formData

})

.then(response => response.json())

.then(data => {

if (data.status === 'success') {

alert(data.message);

} else {

alert(data.message);

}

})

.catch(error => console.error(error));

});

hazme solo el codigo del actualizar_persona.php

¡Claro! A continuación te muestro el código PHP del archivo "actualizar_persona.php" para procesar los datos recibidos y actualizar la base de datos:

PHP

Copy code

<?php

if(isset($_POST['id'])) {

$id = $_POST['id'];

$nombre = $_POST['nombre'];

$dni = $_POST['dni'];

$foto = $_FILES['foto']['name'];

$tmp_name = $_FILES['foto']['tmp_name'];

$uploads_dir = 'uploads/';

$destination = $uploads_dir . $foto;

if(move_uploaded_file($tmp_name, $destination)) {

$dsn = 'mysql:host=localhost;dbname=basededatos';

$usuario = 'usuario';

$contraseña = 'contraseña';

try {

$pdo = new PDO($dsn, $usuario, $contraseña);

$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

$query = "UPDATE personas SET nombre = :nombre, dni = :dni, foto = :foto WHERE id = :id";

$stmt = $pdo->prepare($query);

$stmt->bindParam(':id', $id);

$stmt->bindParam(':nombre', $nombre);

$stmt->bindParam(':dni', $dni);

$stmt->bindParam(':foto', $foto);

$stmt->execute();

$response = [

'status' => 'success',

'message' => 'Datos actualizados exitosamente'

];

echo json_encode($response);

} catch(PDOException $e) {

$response = [

'status' => 'error',

'message' => $e->getMessage()

];

echo json_encode($response);

}

} else {

$response = [

'status' => 'error',

'message' => 'No se pudo cargar la foto'

];

echo json_encode($response);

}

} else {

$response = [

'status' => 'error',

'message' => 'No se proporcionó un ID válido'

];

echo json_encode($response);

}

Este código recibe los datos enviados por el formulario (el ID, nombre, DNI y foto), los actualiza en la base de datos y envía una respuesta JSON al cliente indicando si la operación fue exitosa o no.

hazme un codigo de formulario para cargar foto con nombre y dni con fetch api json con php mysql javascript puro metodo delete de sql metodo pdo usar document.getElementById("foto") document.getElementById("nombre") document.getElementById("dni")

Claro, a continuación te muestro el código HTML y JavaScript del formulario para eliminar una persona de la base de datos:

HTML

Copy code

<!DOCTYPE html>

<html>

<head>

<title>Eliminar Persona</title>

</head>

<body>

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

</form>

const formEliminar = document.getElementById('formEliminar');

const id = document.getElementById('id');

const nombre = document.getElementById('nombre');

const dni = document.getElementById('dni');

const fotoMostrar = document.getElementById('fotoMostrar');

// Función para cargar los datos de la persona a eliminar

function cargarDatos(idPersona) {

fetch('obtener_persona.php?id=' + idPersona)

.then(response => response.json())

.then(data => {

if(data.status === 'success') {

id.value = data.persona.id;

nombre.value = data.persona.nombre;

dni.value = data.persona.dni;

fotoMostrar.src = 'uploads/' + data.persona.foto;

} else {

alert(data.message);

}

})

.catch(error => {

console.log(error);

alert('Hubo un error al cargar los datos de la persona');

});

}

// Función para eliminar la persona

function eliminarPersona(event) {

event.preventDefault();

if(confirm('¿Está seguro que desea eliminar esta persona?')) {

const data = new FormData(formEliminar);

fetch('eliminar_persona.php', {

method: 'POST',

body: data

})

.then(response => response.json())

.then(data => {

if(data.status === 'success') {

alert(data.message);

// Redireccionar a la página principal

location.href = 'index.php';

} else {

alert(data.message);

}

})

.catch(error => {

console.log(error);

alert('Hubo un error al eliminar la persona');

});

}

// Obtener el ID de la persona a eliminar desde la URL

const urlParams = new URLSearchParams(window.location.search);

const idPersona = urlParams.get('id');

// Cargar los datos de la persona

cargarDatos(idPersona);

// Asociar la función "eliminarPersona" al evento "submit" del formulario

formEliminar.addEventListener('submit', eliminarPersona);

</script>

</body>

</html>

Este código utiliza el evento "submit" del formulario para llamar a la función "eliminarPersona", que se encarga de enviar los datos del formulario mediante una petición Fetch al archivo "eliminar_persona.php" en el servidor. Si la eliminación de la persona en la base de datos es exitosa, se muestra un mensaje de éxito y se redirecciona al usuario a la página principal. Si ocurre algún error durante el proceso, se muestra un mensaje de error al usuario. La eliminación de la foto de la carpeta "uploads"

hazme codigo eliminar_persona.php

¡Por supuesto! A continuación, te muestro el código PHP para eliminar una persona de la base de datos y su correspondiente foto de la carpeta "uploads":

php

Copy code

<?php

// Establecer la conexión con la base de datos

$host = "localhost";

$usuario = "tu_usuario";

$password = "tu_password";

$bd = "tu_base_de_datos";

try {

$conexion = new PDO("mysql:host=$host;dbname=$bd", $usuario, $password);

$conexion->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

} catch(PDOException $e) {

die("Error al conectar con la base de datos: " . $e->getMessage());

}

// Obtener el ID de la persona a eliminar

$id = $_POST['id'];

// Obtener los datos de la persona a eliminar

$consulta = $conexion->prepare("SELECT * FROM personas WHERE id = ?");

$consulta->execute([$id]);

$persona = $consulta->fetch();

if(!$persona) {

// La persona no existe en la base de datos

$response = array(

'status' => 'error',

'message' => 'La persona que intenta eliminar no existe en la base de datos'

);

echo json_encode($response);

exit();

}

// Eliminar la persona de la base de datos

$consulta = $conexion->prepare("DELETE FROM personas WHERE id = ?");

$consulta->execute([$id]);

if($consulta->rowCount() > 0) {

// La eliminación fue exitosa

// Eliminar la foto de la carpeta "uploads"

unlink('uploads/' . $persona['foto']);

$response = array(

'status' => 'success',

'message' => 'La persona fue eliminada correctamente'

);

echo json_encode($response);

} else {

// La eliminación no fue exitosa

$response = array(

'status' => 'error',

'message' => 'Hubo un error al eliminar la persona de la base de datos'

);

echo json_encode($response);

}

Este código recibe los datos enviados por el formulario de eliminación mediante el método POST y utiliza el ID de la persona a eliminar para buscar sus datos en la base de datos. Si la persona existe en la base de datos, se elimina su registro mediante una consulta SQL y se elimina su correspondiente foto de la carpeta "uploads" mediante la función "unlink()". Si la eliminación fue exitosa, se devuelve un mensaje de éxito al cliente en formato JSON. Si hubo algún error durante el proceso, se devuelve un mensaje de error al cliente en formato JSON

hazme el cdigo del obtener_persona.php?id=

¡Por supuesto! A continuación te muestro el código PHP para obtener los datos de una persona específica a través de su ID:

php

Copy code

<?php

// Establecer la conexión con la base de datos

$host = "localhost";

$usuario = "tu_usuario";

$password = "tu_password";

$bd = "tu_base_de_datos";

try {

$conexion = new PDO("mysql:host=$host;dbname=$bd", $usuario, $password);

$conexion->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

} catch(PDOException $e) {

die("Error al conectar con la base de datos: " . $e->getMessage());

}

// Obtener el ID de la persona a buscar

$id = $_GET['id'];

// Obtener los datos de la persona de la base de datos

$consulta = $conexion->prepare("SELECT * FROM personas WHERE id = ?");

$consulta->execute([$id]);

$persona = $consulta->fetch(PDO::FETCH_ASSOC);

if($persona) {

// La persona fue encontrada en la base de datos

$response = array(

'status' => 'success',

'data' => $persona

);

echo json_encode($response);

} else {

// La persona no fue encontrada en la base de datos

$response = array(

'status' => 'error',

'message' => 'La persona que intenta buscar no existe en la base de datos'

);

echo json_encode($response);

}

Este código recibe el ID de la persona a buscar a través de la variable "id" enviada por el método GET. Luego, se realiza una consulta SQL para buscar los datos de la persona en la base de datos. Si la persona existe, se devuelve un mensaje de éxito al cliente en formato JSON, junto con los datos de la persona encontrada. Si la persona no existe, se devuelve un mensaje de error al cliente en formato JSON..

obtener datos de la persona con foto haciendo click sobre boton en la fila del registro sobre una tabla para abrir en otro formulario con los datos cargados hacer codigo con fetch api json mysql metodo pdo metodo where del sql

Para obtener los datos de una persona junto con su foto haciendo clic en un botón en la fila de una tabla, puedes usar el siguiente código en HTML, JavaScript y PHP:

HTML:

html

Copy code

<thead>

<tr>

<th>Nombre</th>

<th>Acciones</th>

</tr>

</thead>

<tbody>

</tbody>

</table>

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

<br>

<br>

<br>

<br>

</form>

JavaScript:

javascript

Copy code

// Obtener la tabla y el formulario

const tablaPersonas = document.getElementById('tabla-personas');

const formularioPersona = document.getElementById('formulario-persona');

// Agregar un listener a la tabla para capturar el clic en los botones de "Editar"

tablaPersonas.addEventListener('click', function(e) {

if (e.target && e.target.classList.contains('boton-editar')) {

// Obtener el ID de la persona seleccionada

const id = e.target.dataset.id;

// Realizar la petición fetch para obtener los datos de la persona

fetch(`obtener_persona.php?id=${id}`)

.then(response => response.json())

.then(data => {

// Mostrar los datos de la persona en el formulario

const persona = data.data;

formularioPersona.nombre.value = persona.nombre;

formularioPersona.dni.value = persona.dni;

formularioPersona.id.value = persona.id;

formularioPersona.foto.src = `ruta/a/la/carpeta/donde/se/guardan/las/fotos/${persona.foto}`;

})

.catch(error => {

console.log('Error al obtener los datos de la persona:', error);

});

}

});

PHP (obtener_persona.php):

<?php

// Configuración de la conexión a la base de datos

$host = 'localhost';

$dbname = 'nombre_de_la_base_de_datos';

$username = 'nombre_de_usuario';

$password = 'contraseña_del_usuario';

// Conexión a la base de datos usando PDO

try {

$conn = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);

$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

} catch(PDOException $e) {

echo 'Error al conectar a la base de datos: ' . $e->getMessage();

}

// Obtener el ID de la persona desde la variable GET

$id = $_GET['id'];

// Consulta SQL para obtener los datos de la persona con el ID especificado

$sql = "SELECT * FROM personas WHERE id = :id";

$stmt = $conn->prepare($sql);

$stmt->bindParam(':id', $id);

$stmt->execute();

$persona = $stmt->fetch(PDO::FETCH_ASSOC);

// Comprobar si se encontró la persona

if (!$persona) {

// Si no se encuentra la persona, enviar una respuesta con un estado de error y un mensaje

$response = array(

'status' => 'error',

'message' => 'Persona no encontrada'

);

} else {

// Si se encuentra la persona, enviar una respuesta con un estado de éxito y los datos de la persona

$response = array(

'status' => 'success',

'data' => $persona

);

}

// Devolver la respuesta como objeto JSON

header('Content-Type: application/json');

echo json_encode($response);

hazme el codigo de cargar los datos y foto de la tabla persona <table id="tabla-personas">

Por favor, proporcione más información sobre la estructura de su tabla de base de datos y cómo está almacenada la foto de la persona. Sin esa información, no puedo brindar una respuesta precisa. Sin embargo, aquí hay un ejemplo básico que muestra cómo cargar los datos de la tabla de personas en una tabla HTML usando Ajax y JSON:

HTML:

php

Copy code

<thead>

<tr>

<th>Nombre</th>

</tr>

</thead>

</table>

JavaScript:

javascript

Copy code

const tablaPersonas = document.getElementById('tabla-personas');

fetch('obtener_personas.php')

.then(response => response.json())

.then(data => {

data.forEach(persona => {

const fila = document.createElement('tr');

const nombre = document.createElement('td');

const dni = document.createElement('td');

const foto = document.createElement('td');

const imagen = document.createElement('img');

nombre.textContent = persona.nombre;

dni.textContent = persona.dni;

imagen.src = persona.foto;

foto.appendChild(imagen);

fila.appendChild(nombre);

fila.appendChild(dni);

fila.appendChild(foto);

tablaPersonas.appendChild(fila);

});

PHP (obtener_personas.php):

php

Copy code

<?php

// Conexión a la base de datos

$pdo = new PDO('mysql:host=localhost;dbname=nombre_de_la_base_de_datos', 'usuario', 'contraseña');

// Consulta para obtener los datos de las personas

$statement = $pdo->query('SELECT * FROM personas');

// Obtener los resultados de la consulta

$personas = $statement->fetchAll(PDO::FETCH_ASSOC);

// Crear un array con los datos de cada persona

$response = array();

foreach ($personas as $persona) {

$response[] = array(

'nombre' => $persona['nombre'],

'dni' => $persona['dni'],

'foto' => $persona['foto']

);

}

// Devolver los datos en formato JSON

header('Content-Type: application/json');

echo json_encode($response);

hazme el codigo de cargar los datos y foto desde carpeta uploads de la tabla persona en una tabla html con fetch api json con php mysql

Claro, aquí te muestro un ejemplo de cómo podrías cargar los datos y fotos de la tabla persona utilizando fetch api json con PHP y MySQL:

index.html:

php

Copy code

<!DOCTYPE html>

<head>

<title>Cargar datos y fotos de personas</title>

</head>

<body>

<thead>

<tr>

<th>Nombre</th>

</tr>

</thead>

</table>

</body>

</html>

script.js:

javascript

Copy code

const tablaPersonas = document.querySelector('#tabla-personas tbody');

// función para cargar los datos y fotos de la tabla persona

function cargarDatosPersonas() {

fetch('obtener_personas.php')

.then(response => response.json())

.then(data => {

// vaciar la tabla

tablaPersonas.innerHTML = '';

// agregar los datos a la tabla

data.forEach(persona => {

const fila = document.createElement('tr');

fila.innerHTML = `

<td>${persona.id}</td>

<td>${persona.nombre}</td>

<td>${persona.dni}</td>

tablaPersonas.appendChild(fila);

});

})

.catch(error => console.error(error));

}

// cargar los datos y fotos al cargar la página

cargarDatosPersonas();

obtener_personas.php:

php

Copy code

<?php

// establecer la conexión con la base de datos

$host = 'localhost';

$dbname = 'nombre_de_la_base_de_datos';

$username = 'nombre_de_usuario';

$password = 'contraseña';

$dsn = "mysql:host=$host;dbname=$dbname;charset=utf8mb4";

$options = [

PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,

PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,

PDO::ATTR_EMULATE_PREPARES => false,

];

try {

$pdo = new PDO($dsn, $username, $password, $options);

} catch (PDOException $e) {

die('Error de conexión: ' . $e->getMessage());

}

// obtener los datos y fotos de la tabla persona

$stmt = $pdo->query('SELECT id, nombre, dni, foto FROM persona');

$personas = $stmt->fetchAll();

// enviar los datos como respuesta en formato JSON

$response = array(

'status' => 'success',

'data' => $personas

);

header('Content-Type: application/json');

echo json_encode($response);

Asegúrate de cambiar los valores de las variables $host, $dbname, $username y $password en el archivo obtener_personas.php para que coincidan con los de tu configuración. Además, asegúrate de tener una carpeta uploads en la misma ubicación que obtener_personas.php donde se encuentran las fotos de las personas.

agregar los botones de editar y boton de borrar en etiqueta td de la tabla <td> </td>

Para agregar los botones de editar y borrar en una etiqueta td de la tabla, podemos utilizar el siguiente código HTML:

html

Copy code

<td>

<button onclick="editarPersona(id)">Editar</button>

<button onclick="borrarPersona(id)">Borrar</button>

</td>

Donde id es el identificador único de la persona en la tabla.

Para utilizar este código en la función que carga los datos de la tabla con Fetch API y JSON, podemos reemplazar la línea correspondiente a la creación de la fila de la tabla con el siguiente código:

javascript

Copy code

let fila = tablaPersonas.insertRow();

let celdaFoto = fila.insertCell();

celdaFoto.innerHTML = '<img src="uploads/' + persona.foto + '" width="50"/>';

let celdaNombre = fila.insertCell();

celdaNombre.innerHTML = persona.nombre;

let celdaDNI = fila.insertCell();

celdaDNI.innerHTML = persona.dni;

let celdaBotones = fila.insertCell();

celdaBotones.innerHTML = '<button onclick="editarPersona(' + persona.id + ')">Editar</button>' +

'<button onclick="borrarPersona(' + persona.id + ')">Borrar</button>';

Donde editarPersona y borrarPersona son las funciones JavaScript encargadas de abrir el formulario de edición y de enviar la petición de borrado, respectivamente. También se incluye la creación de una celda para la foto de la persona, utilizando el elemento img de HTML y especificando la ruta relativa de la carpeta uploads.

miscodesdelchatgpt.blogspot.com

CRUD PESONAS FOTOS document.getElementById

Comentarios

Publicar un comentario

Entradas populares de este blog

Copia de Seguridad de Archivo MS Access (.mdb) a Pendrive con VB6

INSERTAR Y UPDATE FECHA CON PHP MYSQL EN FORMULARIO METODO POST CON JQUERY ETIQUETA DATE

DETECTAR DIRECCION IP CON PHP Y JS