Cómo colocar un archivo en una carpeta y guardar datos en una base de datos
En este tutorial, explicaremos cómo colocar un archivo en una carpeta y guardar sus datos en una base de datos.
Creación de la base de datos
Para empezar, necesitamos crear una base de datos en MySQL. Ejecute la siguiente sentencia SQL:
CREATE DATABASE test;
Creación de la tabla de usuarios
Ahora, vamos a crear una tabla llamada "usuarios" en la base de datos. Esta tabla tendrá dos campos: "nombre" y "imagen". Utilice el siguiente SQL:
CREATE TABLE IF NOT EXISTS usuarios (
id INT AUTO_INCREMENT PRIMARY KEY,
nombre VARCHAR(255) NOT NULL,
imagen VARCHAR(255)
);
...
Creación del proyecto
Para este tutorial, vamos a crear un proyecto dentro de XAMPP en la carpeta "htdocs". Siga estos pasos:
- Cree una carpeta con el nombre de su proyecto, por ejemplo, "MiProyecto".
- Dentro de la carpeta del proyecto, cree un archivo llamado "index.php" (la extensión ".php" se utiliza porque trabajaremos con PHP).
¡Ahora está listo para comenzar a trabajar en su proyecto y guardar datos en la base de datos que hemos configurado!
Creación de la estructura HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Colocación de los CDN de Bootstrap
Si quieres un poco de estilo en tu página, lo mejor y más rápido es usar los estilos predefinidos de Bootstrap.
Tienes la alternativa de hacer tus propios estilos colocando la ruta de los estilos en la cabecera.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="mis_estilos.css">
</head>
<body>
</body>
</html>
O como te comenté anteriormente, si no quieres perder tiempo con los estilos, usa los de Bootstrap y ya está, así que yo voy a usar los de Bootstrap.
Esta es la estructura básica de Bootstrap con los CDN de Bootstrap, los CSS y los scripts.
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS v5.2.1 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
</head>
<body>
<header>
<!-- place navbar here -->
</header>
<main>
</main>
<footer>
<!-- place footer here -->
</footer>
<!-- Bootstrap JavaScript Libraries -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"
integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.min.js"
integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous">
</script>
</body>
</html>
Creación del formulario
Creamos un formulario en Bootstrap.
<div class="container mt-5">
<h2>Formulario con Bootstrap</h2>
<form enctype="multipart/form-data" action="procesar.php" method="POST">
<div class="mb-3">
<label for="nombre" class="form-label">Nombre:</label>
<input type="text" class="form-control" id="nombre" name="nombre" required>
</div>
<div class="mb-3">
<label for="imagen" class="form-label">Imagen:</label>
<input type="file" class="form-control" id="imagen" name="imagen" accept="image/*" required>
</div>
<button type="submit" class="btn btn-primary">Enviar</button>
</form>
</div>
Crear carpeta
Si no existe una carpeta la podemos crear con código o manualmente.
Vamos a necesitar una carpeta para guardar las imágenes. Le pondremos de nombre "img_usuario", e como te dije anteriormente, la podemos crear manualmente dentro de nuestro proyecto o con el siguiente código.
<?php
// Crear la carpeta si no existe
$carpeta_imagenes = "img_usuario";
if (!file_exists($carpeta_imagenes)) {
mkdir($carpeta_imagenes, 0777, true);
}
?>
La conexión
Al trabajar con bases de datos necesitamos una conexión para conectarnos con la base de datos.
En este blog existe una conexión en PDO que es la que me gusta usar, aquí dejo el link.
Creamos entonces un archivo con el nombre conexion.php y colocamos el código dentro.
Si no quieres buscar, aquí te dejo el código completo de la conexión.
OJO: hay que cambiar el nombre de la base de datos.
<?php
$servidor = "localhost";
$usuario = "root";
$password = "";
$bd = "test";
try {
$pdo = new PDO("mysql:host=$servidor;dbname=$bd", "$usuario", "$password");
// set the PDO error mode to exception
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
echo "Connected successfully";
} catch (PDOException $e) {
echo "Connection failed: " . $e->getMessage();
}
?>
Procesar los datos
Para procesar los datos del formulario usamos un archivo llamado procesar.php.
En ese archivo primero recibimos los datos que vienen del formulario a través del método POST.
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$nombre = $_POST["nombre"];
$imagen_nombre = $_FILES["imagen"]["name"];
$imagen_temporal = $_FILES["imagen"]["tmp_name"];
$ruta_imagen = "img_usuario/" . $imagen_nombre;
}
Seguidamente insertamos los datos en la base de datos y si se insertan, movemos la imagen a la carpeta reservada para el efecto.
// Insertar datos en la tabla de usuarios usando consultas preparadas
$sql = "INSERT INTO usuarios (nombre, imagen) VALUES (:nombre, :ruta_imagen)";
$stmt = $pdo->prepare($sql);
$stmt->bindParam(':nombre', $nombre);
$stmt->bindParam(':ruta_imagen', $ruta_imagen);
if ($stmt->execute()) {
// Mover la imagen a la carpeta destino
move_uploaded_file($imagen_temporal, $ruta_imagen);
echo "Registro exitoso.";
} else {
echo "Error al registrar: " . $stmt->errorInfo()[2];
}
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias