Share
Me complace presentarle la primera parte de una serie de dos partes sobre la creación de un sitio de fotos con PHP, jQuery y AJAX. Originalmente, tenía la intención de encajar todo el tutorial en un screencast, pero eso rápidamente se convirtió en un sueño imposible cuando me di cuenta de que simplemente había mucho que cubrir. Sin embargo, incluso si solo ves este primer video, deberías aprender mucho..
Recuperaremos imágenes de una base de datos, crearemos un formulario de inicio de sesión simple con autenticación y luego permitiremos que nuestra base de datos se actualice de forma asíncrona. ¿Suena bien? Si es así, entremos.
Para esta lección, nuestro objetivo es crear una sección de administración de fotos donde un administrador pueda recuperar fotos de una base de datos y actualizar el título de sus fotos simplemente haciendo clic en el texto correspondiente. Para hacer que esta página sea más segura, también crearemos un sistema de membresía simple. En los siguientes tutoriales, ampliaremos estos conceptos..
Abra PHPMyAdmin y cree una base de datos llamada "db". Dentro de esta base de datos, tendremos que agregar dos tablas: "fotos" y "usuarios".
En lugar de codificar nuestras imágenes en nuestro documento, las almacenaremos en una base de datos. Aunque podríamos hacer que esta tabla sea tan sofisticada como queramos, solo lo haremos simple por ahora.
Para editar nuestras fotos, necesitamos crear un sistema de membresía simple que permita a nuestro usuario iniciar sesión y editar sus fotos. Obviamente no queremos dar a todos ese derecho!
Cree un nuevo documento php y agregue lo siguiente en su documento.
Mi sitio de fotos
No te preocupes demasiado por algo de lo que hay aquí. Repasaremos todo a tiempo. Pero como una descripción general rápida, estamos importando nuestra biblioteca jQuery, un complemento de jQuery lightbox y nuestros scripts personalizados (que crearemos pronto). Tómese unos segundos para revisar el archivo CSS. No lo repasaré demasiado en este artículo escrito, ¡ya que es lo suficientemente largo! Consulte el screencast para más información. Pero, les aseguro que son cosas bastante estándar y simples..
Lo principal en lo que necesitas concentrarte ahora mismo es:
Esta será la sección donde recuperaremos nuestras fotos de la base de datos. Vamos a trabajar en eso ahora mismo. Crear una nueva página
llamado "getPhotos.php".
Repasemos rápidamente lo que necesitamos lograr con este código.
Pegue el siguiente código en su documento:
consulta ($ consulta) o morir (mysqli_error ($ mysqli)); if ($ result) echo "
\ n "; eco"Lo primero que debemos hacer es crear una conexión a nuestra base de datos. Sin embargo, lo haremos muchas veces a lo largo de este proyecto. Así que vamos a crear otra página llamada "database.php" y almacenar la información allí. De esa manera, solo necesitamos editar un archivo, si es necesario. Agregue el siguiente código en su archivo database.php.
Estamos creando una variable llamada "$ mysqli" y la estamos configurando en una nueva instancia del objeto "MySQLi". Necesitamos pasar en cuatro parámetros:
Para mantener las cosas limpias, colocaremos esos valores en variables y los referenciaremos. Si no se realiza la conexión, le diremos que "muera"..
Ahora volvamos a nuestro archivo "getPhotos.php". El siguiente paso, es consultar la base de datos..
$ query = "SELECCIONAR ID, título, fuente de fotos"; $ result = $ mysqli-> query ($ query) o die (mysqli_error ($ mysqli));
Nuestra consulta es extremadamente simple. Básicamente estamos recuperando todo de la base de datos. Es posible que desee modificar este
consulta para adaptarse a su propia aplicación. Pasamos la consulta usando "$ mysqli-> consulta ($ consulta)".
Si la consulta se realizó con éxito, crearemos nuestra lista desordenada y agregaremos nuestras imágenes.
eco "
\ n "; eco"Creamos una variable llamada $ row que será igual a cada instancia de una fila en la base de datos. Mientras haya filas
para ser recuperado, esta variable contendrá la información de esa fila específica.
Almacenaremos toda la información que necesitamos en variables. Por ejemplo, digamos que en una fila, tenemos los siguientes datos.
Al realizar $ row-> title, podemos tomar ese valor y almacenarlo en nuestra variable $ title. Entonces, en este caso, $ title = "Mi foto favorita"; $ src = "10.jpg"; $ id = 4;.
Todo lo que tenemos que hacer ahora es agregar esa información en nuestras etiquetas de imagen y ancla. La última línea agregará un campo de entrada. Esto permitirá al usuario actualizar el título de la imagen de forma asíncrona..
Si ejecuta "index.php" en su navegador, debería ver lo siguiente:
Ahora que tenemos el diseño básico de nuestro sitio, ¡ajaxify it! Comenzaremos resumiendo lo que necesitamos que haga nuestro PHP. Encuentro que esto ayuda mucho cuando se trabaja..
Cree un archivo PHP llamado "changePhotoTitle.php" y pegue el siguiente código:
?
consulta ($ update_query) o die (mysqli_error ($ mysqli)); if ($ result) echo "Success!
"; echo" El título de esta foto ha sido cambiado a: $ titulo";?>
Hemos requerido el archivo de base de datos de nuevo. (¿No estamos contentos de haberlo guardado en un archivo separado?) A continuación, estamos creando dos
variables $ título es igual a lo que el usuario ingrese en ese campo de entrada. $ id es igual a su respectivo campo de id en
la base de datos.
Para evitar alguna inyección de SQL, envolveremos esos valores de publicación con mysql_real_escape_string ().
La actualización es bastante sencilla. Actualice la tabla de fotos y cambie el campo de título a lo que ingresen los usuarios en ese cuadro de texto; Pero solo cambia el campo de título que tiene una id igual a $ id. (Consulte el screencast para una mejor comprensión.)
Si la actualización se ha realizado con éxito, repetiremos un mensaje de felicitación..
Para realizar la actualización sin devolución, usaremos jQuery. Cree un nuevo archivo Javascript llamado "scripts.js" y
pegar en el siguiente:
Accentsconagua
$ (function () $ ('h4'). click (function () $ (this) .slideUp (). next ('input'). slideDown ();); $ ('ul # photos input' ) .change (function () var id = $ (this) .parent ('li'). find ('img'). attr ('id'); var thisParam = $ (this); var title = $ ( this) .val (); $ .ajax (type: 'POST', url: 'changePhotoTitle.php', data: 'title =' + title + '& id =' + id, success: function (response) $ ('input'). slideUp (); $ (thisParam) .prev ('h4'). text (title) .slideDown (); $ ('# response'). fadeIn (1000) .empty (). append ( respuesta) .prepend ('X'); $ ('span # x'). click (función () $ ('div # response'). fadeOut ('slow');); ); ); ); Usando "$ .ajax", llamaremos la actualización. $ .ajax aceptará cuatro parámetros.
Ahora, obviamente, no queremos que nadie pueda editar los títulos de estas imágenes. Por lo tanto, vamos a crear un sistema de membresía simple.
Crea una nueva página llamada "login.php" y agrega el siguiente código:
Inicia sesión para editar fotos
Dentro de la etiqueta del cuerpo, tenemos un formulario simple que tiene dos campos: uno para el nombre de usuario y otro para la contraseña. Cuando el usuario haga clic en el botón "Iniciar sesión", la información de esos cuadros de texto se publicará en "confirmLoginCredentials.php". Adelante, crea esa página ahora mismo y agrega lo siguiente.
consulta ($ q) o die (mysqli_error ($ mysqli)); if (! mysqli_num_rows ($ result) == 1) header ("Location: login.php"); else setcookie ('autorizado', 1, 0); encabezado ("Ubicación: index.php"); ?> Como de costumbre, estamos almacenando los valores de esos cuadros de texto en variables llamadas $ username y $ password, respectivamente. Una vez más tiramos en nuestro archivo database.php. Nuestra consulta recupera la fila de la base de datos donde el nombre de usuario y la contraseña son iguales a lo que se ingresó en esos dos cuadros de texto. Sólo se debe devolver una fila. Si eso no sucede, el usuario volverá a redirigir a "login.php". De lo contrario, los enviaremos a la página principal "index.php" y estableceremos una cookie..
setcookie ('autorizado', 1, 0); El nombre de nuestra cookie será "autorizado"; el valor será igual a 1; y la fecha de caducidad será 0. 0 significa esencialmente que cuando el usuario cierre su navegador, esa cookie caducará.
Cuando el usuario se dirige a la página index.php, debemos escribir un poco de código que garantice que existe la cookie requerida en la computadora del usuario. Vuelva a index.php y agregue el siguiente código en la parte superior de su documento.
Si el usuario tiene una cookie llamada "autorizada" en su computadora, y esa cookie tiene un valor igual a 1, entonces muestra la página. Pero si no lo hacen, devuélvalos a login.php.
El último paso en este tutorial es permitir que el usuario cierre la sesión. Encuentra la etiqueta en tu página index.php que se ve así:
cerrar sesión
Estoy agregando un par clave-valor a esta url. Ese valor se pasará a 'login.php'. Vaya a esta página y agregue su último bit de código a la parte superior.
Si, en la cadena de consulta, la clave de 'cerrar sesión' es igual a 1, configure una cookie que tenga una fecha de caducidad de hace una hora. Esto eliminará la cookie de la computadora del usuario..
Así que hemos creado bastante. Desafortunadamente, para hacer todo lo que me gustaría tomaría páginas y páginas. Tal vez la próxima semana, la Parte 2 será lanzada. En la Parte 2, implementaremos lo siguiente:
Muchas gracias por ver el vídeo y revisar el artículo. Hay más por venir!
