Lista arrastrable con jQuery, jQuery UI, AJAX, PHP y MySQL

¡Hola! En esta ocasión voy a mostrar como crea una lista que pueda ser ordenada siendo arrastrada. Esto se realiza gracias a la función Sortable de jQuery UI. El orden será enviado a través de la función AJAX de jQuery, procesado a través de PHP y almacenado en MySQL.

El resultado es este:

Notas iniciales:

Para este ejemplo estoy usando una versión custom de jQuery UI (v1.11.4) que únicamente incluye UI Core e Interactions (ver en la web oficial), pero se puede usar la versión completa sin problema. La versión de jQuery es la 2.1.1 minificada.

¿Cómo crear una lista arrastrable?

Read More

Subir imágenes a MySQL en Blob con AJAX

Aunque el método estándar para subir imágenes (y en general archivos) a un servidor es tan simple como (en resumen) subir el archivo y moverlo a una carpeta, existe la posibilidad de subir las imágenes a la base de datos (MySQL) a través de AJAX y alojarla en binario en un campo Blob (longblob, en este caso, con 2^32 – 1 caracteres, o sea, 4.294.967.295 caracteres) de la tabla en la BBDD.

En resumen, es algo así lo que vamos a hacer hoy:

Los parámetros de la petición al script en PHP son algo como esto:

Bien, comencemos.

¿Cómo enviar imágenes a MySQL?

Seguimos con el desarrollo en local: XAMPP (Apache y MySQL con PHPMyAdmin) en Windows.

1 de 6: HTML

En un archivo .php tenemos que agregar un formulario que acepte UTF-8, con método POST, y enctype “multipart/form-data”. Además, añadiremos un ID que, en mi caso, se llamará enviarimagenes.

Dentro de este formulario debe haber un input de tipo file, al cual le pondré de nombre imagen. Además, incluiré un input de tipo texto con el nombre titulo y un textarea con el nombre descripcion (los nombres sin tildes). Y obviamente un botón de submit.

Debajo del formulario pondremos un contenedor donde se mostrarán los mensajes correspondientes.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Subir imagen</title>
</head>

<body>
<form accept-charset="utf-8" method="POST" id="enviarimagenes" enctype="multipart/form-data" >
<label>Titulo</label><br>
<input type="text" name="titulo" />
<br><br>
<label>Descripcion</label><br>
<textarea name="descripcion"></textarea>
<br><br>
<input type="file" name="imagen"/>
<br><br>
<button type="submit">ENVIAR</button>
</form>

<hr>
<div id="mensaje"></div>
<hr>

</body>
</html>

En esta ocasión no le pondré límite de caracteres a las entradas de texto, para no complicar innecesariamente el script de PHP.

Read More

Búsqueda instantánea con AJAX, PHP y MySQL

Hoy traigo un tutorial donde mostraré una manera de obtener y mostrar datos de una base de datos MySQL con PHP y AJAX sin necesidad de recargar la página. En la búsqueda haremos una consulta a la BBDD para que sea case-insensitive y pueda concatenar varias columnas.

Ejemplo del resultado y sus peticiones al servidor

¿Cómo crear una búsqueda instantánea?

Esta vez haré el desarrollo en local, por cuestiones de comodidad. Utilizaré XAMPP (Apache y MySQL con PHPMyAdmin) en Windows.

1 de 5: HTML

Lo primero que necesitamos es “un lienzo en blanco” en PHP, al cual llamaremos index.php (por ejemplo).

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
</head>

<body>
</body>
</html>

Después agregamos un formulario que acepte UTF-8 y con método POST. En el form debe haber un input del tipo texto (o búsqueda (search)) con nombre e ID “busqueda”. Opcionalmente se le puede añadir un valor y placeholder vacío, un máximo de 30 caracteres y el auto-completado apagado, además de un texto arriba del formulario.

Debajo de este vamos a crear un contenedor donde se muestren los resultados de la búsqueda:

Read More