Share
Hace unos meses, aprendió a crear un sistema de edición en el lugar. Hoy, vamos a llevar las cosas un paso más allá ya que creamos un backend simple, que permitirá que nuestro sitio web recuerda Los cambios que hemos hecho..
Con todo el zumbido en torno a la Web 2.0, la facilidad de uso es ahora mucho más importante que nunca. Ser capaz de editar algo de contenido sin tener que ir a otra página es algo que muchos usuarios realmente anhelan. Muchos nombres grandes ya están utilizando este patrón con gran efecto. Si has usado Flickr, probablemente lo hayas visto en acción..
Hoy vamos a mejorar la versión anterior: eliminamos algunos errores, agregamos algunas características y, lo que es más importante, guardamos todos los datos en una base de datos real para su retención. ¿Interesado? Empecemos de inmediato!
En primer lugar, necesitamos una base de datos para extraer la información y luego, cuando sea necesario, actualizar los datos que contiene. Por el bien de este ejercicio, configuremos una tabla con algunos datos aleatorios.
Ya tenía una base de datos llamada en su lugar con una mesa llamada datos en mi servidor de desarrollo. Para nuestro uso añadiremos otra tabla..
Normalmente prefiero usar phpMyAdmin para ejecutar mis consultas SQL. Haga clic en la pestaña SQL y pegue en la siguiente consulta:
Accentsconagua
CREAR TABLA SI NO EXISTE 'inplace' ('campo' varchar (120) NO NULO, texto 'valor' NO NULO, TECLA PRIMARIA ('campo')) MOTOR = MyISAM; INSERTAR EN 'inplace' ('campo', 'valor') VALORES ('nombre', 'soy Siddharth'), ('pasión', 'amar trabajar con la web'), ('profesión', 'soy un profesional independiente' ), ('work', 'write for Net Tuts'), ('url', 'se puede encontrar en www.ssiddharth.com'), ('punch', 'nunca te decepcionará ni te rendirá :) '), (' diseño ',' Obtener aprobación del diseño de Yusuf '), (' factura ',' Enviar una factura a Drew '), (' investigación ',' Iniciar investigación sobre el proyecto de Pallav '), (' discutir ',' Hablar con Harnish sobre nuevas ideas '), (' depurar ',' Comprobar el sitio de Aditya para detectar errores '), (' reunirse ',' Reunirse con Clintson para discutir un nuevo proyecto '); 
Si todo funcionó como debería deberías obtener la siguiente pantalla:
Una mirada más cercana a la mesa:
Ya que quise explícitamente mantener la simplicidad de la demostración y simplemente agregar el back-end que la gente solicitó, mantengo la estructura de la tabla muy simple. Siéntete libre de modificarlo y ampliarlo en tus proyectos..
Ahora que la tabla de muestra se ha creado y completado previamente con algunos datos de prueba, podemos pasar al back-end real.
Ya que accederemos a la base de datos a menudo para leer datos o para actualizar los datos que contiene, es prudente crear un archivo de configuración que contenga los datos relevantes. Crear un archivo llamado db.php y pega lo siguiente en ella.
Nada especial aquí. Definimos todos los detalles relevantes, nos conectamos al host utilizando la combinación de nombre de usuario / contraseña dada y luego seleccionamos la base de datos relevante para su manipulación en el futuro.
El editor se encarga de leer la base de datos y enviar los datos en un formato específico, por lo que es fácil para nosotros enviar detalles relevantes al servidor para informar qué registro actualizar. Hablaremos más de eso en un segundo..
El código no cambia significativamente del código estático HTML solo de la versión anterior. Sin embargo, sí necesitamos dinamizar los datos. Así que en el código HTML original, esto:
se sustituye por:
'. $ fila [' valor '].''; ?>
'. $ fila [' valor '].''; ?>
Como la tabla es pequeña, solo seleccionaremos todo de la tabla, pero le pediremos que devuelva solo los primeros 6 elementos. A continuación, acabo de recorrer e imprimir el li elementos. Tome nota especial del hecho de que cada li elementos obtiene su carné de identidad atributo establecido en el nombre del campo del que obtiene su valor. Esto se usará más adelante en los datos enviados al servidor para indicar qué registro debe actualizarse..
Soy consciente de que exponer el nombre del campo como este puede suponer una amenaza para la seguridad, pero en un entorno adecuadamente protegido, no creo que esto provoque problemas. De lo contrario, podría usar alias aquí y hacer una búsqueda inversa en el lado del servidor. Deja que tus jugos creativos fluyan allí. Para una demo muy sencilla, parecía bastante exagerado..
Además, no olvides incluir el db.php archivo que creamos anteriormente al editor. Esta línea se encargará de eso..
Después de realizar las ediciones, recuerde guardar el archivo con un .php extensión.
El controlador es donde la página publica los detalles para. Esto se encarga de verificar si los datos se enviaron realmente a la página y, de ser así, desinfecta los datos enviados y luego actualiza los valores relevantes.
Crea un archivo llamado handler.php y pegar en el siguiente:
Un asunto bastante sencillo. Déjame explicarte cada paso en detalle..
Ya que necesitaremos manipular la base de datos, primero incluimos db.php archivo que creamos anteriormente.
A continuación, comprobamos si nuestras dos variables requeridas, campo- valor que nos dice qué campo actualizar y valor - El valor para actualizar a, se envían como variables POST al controlador. Si es así, podemos proceder al trabajo real. Si no, no pasa nada.
Una vez que verificamos que se enviaron las variables, podemos seguir limpiando los datos para insertarlos en la base de datos. Para que sea lo más simple posible, usaremos el mysql_real_escape_string Función para sanear nuestros datos. Esta función escapa a los caracteres especiales presentes en la cadena pasada. Si se pasa sin sanear, nuestro código está sujeto a ataques de inyección de SQL.
Ahora que nos hemos asegurado de que los datos estén seguros, podemos actualizar el registro correspondiente. Supongo que esta parte no necesita explicación, ya que es un SQL muy simple. En términos sencillos, en el en su lugar mesa, cambio campos valor correspondiente a valor.
Si todo continúa según el plan, devuelva un valor de 1 que será capturado por nuestro script para determinar el resultado de la transacción para que pueda proceder en consecuencia. Voy a elaborar más adelante. Tenga en cuenta que en este caso, simplemente informo si el intento tuvo éxito o no. En su proyecto, es posible que desee devolver información mucho más detallada en caso de que ocurra algún error. No estás limitado a mi implementación extremadamente simple..
Ahora que se ha construido el back-end, es hora de editar la parte frontal del proyecto para permitir que se comunique con el servidor. También veremos la implementación de una nueva característica en el camino.
Una de las quejas de la versión anterior fue la corrupción de datos cuando ciertas acciones se realizaron en un orden específico. Esto se debió a mi extrema necesidad de simplicidad y concisión que finalmente me llevó a pasar por alto ese escenario específico. Sin embargo, hoy rectificaremos eso..
Supongo que tiene cerca el código JavaScript antiguo para comparar y editar.
La primera versión utilizó variables globales para mantener los datos originales, lo que dio lugar a resultados inesperados en ciertos casos. Vamos a rectificar esto primero.
La forma más fácil de corregir esto sería simplemente agregar una entrada oculta junto a la entrada original y usarla como búfer. Ya que se crea y destruye sobre la marcha y es específico para ese elemento solo, podemos editar / guardar / descartar tantos elementos como sea posible la mayor cantidad de tiempo posible sin ningún problema..
El viejo reemplazarHTML La función se actualiza a:
function replaceHTML () var buffer = $ (this) .html () .replace (/ "/ g," ""); $ (this) .addClass ("noPad") .html ("") .html (" Guardar cambios Descartar cambios ") .unbind ('dblclick', replaceHTML); No es una gran edición aquí. Primero creamos una variable interna llamada buffer para mantener el valor original. Luego, purgaremos el contenido HTML del elemento principal e inyectaremos el nuestro. Además del fragmento original, agregamos un cuadro de texto oculto que conserva el valor original. Nada mas se cambia aqui.
La iteración anterior unía funciones similares pero separadas para cada uno de los enlaces funcionales. Los unificaremos aquí.
manejador de funciones () selector de var; if ($ (this) .hasClass ("btnSave")) selector = "editBox" else else selector = "buffer" $ (this) .parent () .html ($ (this) .siblings ("form" ) .children ("." + selector) .val ()) .removeClass ("noPad editHover") .bind ("dblclick", replaceHTML); falso retorno; En lugar de usar funciones anónimas como la última vez, vamos a usar una función normal. Solo vamos a editar pequeñas partes de la función para que maneje las solicitudes de guardar y descartar.
Primero declaramos una variable llamada selector que mantiene el selector para utilizar mientras se actualiza el li elementos. editBox es la clase asignada el cuadro de texto visible y buffer es la clase asignada al cuadro de texto oculto que contiene el valor original.
Como estamos unificando los controladores de eventos, debemos verificar en qué enlace se hizo clic. Primero vemos si el enlace pulsado tiene una clase de btnSave. Si es así, entonces el usuario desea guardar las ediciones y así le asignamos el valor de editBox al selector variable. Si no, buffer es asignado.
El resto del controlador sigue siendo el mismo que en la versión anterior, excepto que el selector se inyecta dinámicamente en función de la acción en lugar de ser codificado en la función. Si parece perdido aquí, mire la primera parte de la serie para entender lo que hace el último bloque. Esencialmente, inyectamos el valor del cuadro de texto seleccionado en el padre li Elemento y rebindir el controlador de eventos original..
No olvide actualizar los controladores de eventos para cada enlace. El siguiente forro se encarga de eso:
$ (". btnSave, .btnDiscard"). live ("click", handler); Si te estás preguntando por qué usé el vivir Funciona aquí, por favor refiérase al artículo anterior..
Con todos los errores eliminados y el código generalmente ajustado un poco, podemos comenzar a trabajar en la implementación de la funcionalidad real..
Antes de que podamos enviar los datos al servidor, debemos encontrar una manera de enviar los detalles relevantes al servidor. En este caso, necesitamos 2 detalles para hacer una edición exitosa.
La primera parte es bastante sencilla ya que tenemos un cuadro de texto real que contiene los valores que se enviarán al servidor. La segunda parte necesita un poco de trabajo..
Al crear el editor, recuerde que usamos el ID primario de la tabla como carné de identidad atributos para cada uno li ¿elemento? Vamos a utilizarlo aquí. Solo crearemos otro cuadro de texto oculto que contendrá el valor que luego se enviará al servidor..
function replaceHTML () var buffer = $ (this) .html () .replace (/ "/ g," ""); $ (this) .addClass ("noPad") .html ("") .html (" Guardar cambios Descartar cambios ") .unbind ('dblclick', replaceHTML); los reemplazarHTML La función tiene que ser actualizada como tal. La única diferencia es la adición del cuadro de texto oculto con el nombre campo. Usamos jQuery attr función para acceder a la li atributo de ID del elemento y usarlo como valor del cuadro de texto.
A la implementación de AJAX entonces. Vamos a utilizar el estándar de jQuery. ajax funciona aquí.
manejador de funciones () // Código anterior if ($ (this) .hasClass ("btnSave")) var selector = "editBox"; var str = $ (this) .siblings ("form"). serialize (); $ .ajax (type: "POST", async: false, timeout: 100, url: "handler.php", data: str, success: function (msg) code = msg;,); if (código == 1) alert ("Success"); else alert ("Failure"); // Resto del código Dado que solo necesitamos enviar los datos al servidor cuando el usuario ha hecho clic en el enlace correspondiente, encapsulamos todo el código dentro del Si bloque que creamos anteriormente para comprobar en qué enlace se hizo clic.
Hago uso de la ajax Funciona ya que me parece la más robusta. En primer lugar, serializo los datos que contiene el formulario principal para que puedan publicarse en el servidor. A continuación, llamo a la ajax función que establece todos los detalles relevantes según sea necesario, que incluye el tipo de solicitud a realizar - ENVIAR y la URL para publicar. También especificamos que los datos que serializamos anteriormente deben enviarse al servidor.
Por lo general, usaría el incorporado. éxito y error devoluciones de llamada para realizar más cambios, pero he optado por no hacerlo aquí. En su lugar, solo estoy capturando el texto enviado por el servidor. Si devuelve 1, un valor que configuramos nuestro manejador para devolver si todo sucedió correctamente, alertamos al usuario para que le avise.
Las alertas son una forma bastante rudimentaria de actualizar al usuario con el estado de la acción. Con esto en mente, vamos a desechar el sistema de alerta y, en su lugar, implementar una barra de estado simple en la parte inferior que refleje estos cambios..
No necesitamos nada especial aquí. Solo necesitamos un simple div Elemento que podemos manipular. Solo vamos a tener que añadir eso directamente en el editor..
Tomar nota de la carné de identidad atributo. Lo usaremos despues.
En aras de la reutilización del código, crearemos una función auxiliar que actualiza la barra de estado según sea necesario..
función UI (estado) var status = ; status.Ready = "Listo"; status.Post = "Guardando sus datos. Espere ..."; status.Success = "Success! Sus ediciones se han guardado."; status.Failure = "Los intentos de guardar datos fallaron. Vuelva a intentarlo."; var background = ; background.Ready = "# E8F3FF"; background.Post = "# FAD054"; background.Success = "# B6FF6C"; background.Failure = "# FF5353"; $ ("# status"). animate (opacity: 0, 200, function () $ ("# status"). html (status [state]). css (background: background [state]). animar (opacidad: 1, 200)); La función, que hemos nombrado, UI, toma el estado de la barra de estado como su parámetro. Dentro de la función, creamos dos objetos: estado tiene el texto relevante y fondo mantiene los colores de fondo de la barra de estado.
Podríamos actualizar directamente el color de fondo y el texto de la barra de estado, pero aquí en Net Tuts, no es así como lo hacemos. :)
Vamos a hacer uso de jQuery. animar Función para animar con gracia la barra de estado. Primero, animamos su opacidad a cero. A continuación, actualizamos el texto y el color de fondo y luego lo animamos a visibilidad completa..
Tome nota especial del hecho de que la lógica utilizada para actualizar los valores se incluye dentro de una función anónima y se pasa como devolución de llamada a la animación original. De esta manera la barra animará a opacidad cero y luego todo se actualizará. Si las animaciones están encadenadas, los colores del texto y del fondo se actualizarán justo después de que comience la animación inicial, lo que lleva a un efecto muy perturbador..
Agregarlo a la interfaz de usuario y actualizar la barra de estado ahora es pan comido. En lugar de las alertas que usamos anteriormente, necesitamos usar el UI función.
El bloque anterior que sucedió a la llamada ajax ahora puede ser reemplazado por:
if (código == 1) UI ("Success"); else UI ("Failure"); Además, no olvides añadir UI ("Ready"); cuando la página se carga para que el usuario sepa que el sistema está listo para la manipulación y UI ("Post"); cuando los datos se están publicando en el servidor.
Cuando agregue sus propios estados a la barra de tareas, tome nota del hecho de que la cadena que enviamos como parámetro a la función se asigna directamente a la propiedad del objeto..
Lo último que debemos observar es el hecho de que si el intento de guardar los datos falló, el texto actualizado aún se conserva. Esto parece bastante contrario a la intuición. Si el intento de guardar los datos falla, debemos asegurarnos de que el texto original se vuelva a colocar para que el usuario sepa que los datos no se han guardado..
Para rectificar esto, necesitaremos cambiar la selector Variable en caso de que nos encontremos con un error..
if (código == 1) UI ("Success"); selector = "editBox"; else UI ("Failure"); selector = "buffer"; Si el valor se editó correctamente, cambiamos el valor de la variable relevante a editBox. Pero si el intento terminó en un fracaso, necesitamos intercambiar el nuevo valor con el valor anterior. Así que asignamos buffer a la variable para que el valor vuelva a su valor original.
Y ahí lo tienes. Cómo agregar una funcionalidad amigable para el usuario a tus proyectos. Esperemos que este tutorial te haya resultado interesante y te haya sido útil. Siéntase libre de reutilizar este código en cualquier otra parte de sus proyectos y toque aquí si tiene dificultades..
Tenga en cuenta que este sistema fue diseñado con la intención principal de enseñar las técnicas asociadas con esto, no como un sistema de producción diseñado para incorporarse a los sistemas existentes. Esta es más una base que animo a las personas a construir y mejorar..
Preguntas? Cosas bonitas que decir? Criticas? Pulsa la sección de comentarios y déjame un comentario. Feliz codificacion!
¿Sabía que puede ganar hasta $ 600 por escribir un tutorial PLUS y / o un screencast para nosotros?? Estamos buscando tutoriales detallados y bien escritos sobre HTML, CSS, PHP y JavaScript. Si tiene la habilidad, contacte a Jeffrey en [email protected].
Tenga en cuenta que la compensación real dependerá de la calidad del tutorial final y del screencast.
