Elaboración de un periódico digital mediante XHTML, CSS, PHP y MYSQL con servidor Apache

PROYECTO FINAL DE CARRERA Josep Sellés i Jover Ingenieria Téc. en Informática de Gestión Elaboración de un periódico digital mediante XHTML, CSS, PHP y MYSQL con servidor Apache 2 3 0. Tabla de contenido 1. Introducción 1.1 Punto de partida ………………………………………………………………………….5 1.2 Contexto y objetivos……………………………………………………………………..5 2. Descripción funcional de la aplicación 2.1 Portada y secciones……………………………………………………………………...8 2.2 Barra de navegación……………………………………………………………………..9 2.3 Página de visualización de artículos……………………………………..……….10 2.4 Archivo histórico, ediciones anteriores ………………………………..……....12 2.5 Búsqueda de artículos en el archivo………………………………………..…….12 2.6 Página de sindicación RSS……………………………………………………………12 2.7 Página de publicaciones………………………………………………………………13 2.8 Página de registro………………………………………………………………………14 2.9 Enlaces según el rol de usuario………………………………………………….…14 2.10 Subir artículos al sistema (Redactor).…………………………………………15 2.11 Maquetación de las secciones (Administrador).……………………………16 2.12 Otras funciones del administrador.……………………………………………..17 3. Diseño 3.1 ¿Programación orientada a objetos o no?...……………………………………19 3.2 Diseño de la Base de Datos…………………..……………………………………..20 3.3 Diagrama de la base de datos relacional…………………..……………………22 3.4 Diagrama de Usuarios...…………………….…………………..……………………23 3.5 Mapa navegacional del administrador……………………………………………23 3.6 Mapa navegacional del lector registrado…………….…………………..…….25 3.7 Mapa navegacional del redactor…………….…………………..…………………28 4. Lenguajes y tecnologías utilizadas …………………………………………………………….....…………………………………….30 5. Plataforma de desarrollo …………………………………………………………….....…………………………………….31 4 6. Implementación 6.1 XHTML 1.0….…………………………………….....…………………………………….32 6.2 Acceso a la base de datos ….…………………………………….....…………..….32 6.3 Registro y administración de usuarios………………….….……………………34 6.4 Seguridad: evitar inyección SQL……………………………….....…………..…..36 6.5 Formulario de maquetación…….…………………………………….....……..….37 6.6 Puntuar artículos……………..…….…………………………………….....……..….38 6.7 Comentar artículos…………..…….…………………………………….....……..….39 6.8 Caja de contenido variable…………………………………………….....……..….40 6.9 Librería “Validation” de jQuery……..……………………………….....……..….40 6.10 Sindicación: archivos RSS..………………………………………….....……..….41 6.11 Sentencias SQL para realizar una búsqueda en elementos de texto..41 6.12 Subir ficheros al servidor…………………………………………….....……..….43 6.13 Envío de correo a través de la función mail()……………..….....……..….43 6.14 Editor de texto Tiny MCE…….……………………………………….....……..….44 6.15 Diseño y maquetación de la estructura WEB con CSS.…….....……..….46 7. Conclusiones …………………………………………………………….....…………………………………….48 8. Referencias bibliográficas …………………………………………………………….....…………………………………….49 5 1.Introducción 1.1 Punto de partida Cuando empezó este proyecto se partía prácticamente desde cero en lo que respecta a la creación de aplicaciones WEB. Se tenían algunas nociones de HTML y lo aprendido en programación a lo largo de la carrera, aunque se desconocían las características singulares del lenguaje de PHP. El desarrollo de este proyecto ha ido avanzando paralelamente a un proceso de aprendizaje de todas las tecnologías utilizadas en las aplicaciones WEB, como son los estándares de XHTML y CSS, el lenguaje del lado del servidor PHP, la estructura DOM y la programación del lado del cliente de Javascript, RSS, etc… lo cual ha servido para tener un cierto grado de especialización en esta rama de la informática relacionada con el entorno WEB. A la hora de crear este periódico digital, en primer lugar, se han tenido en cuenta los elementos que hacen posible la función básica de un periódico, que es hacer llegar noticias e información al lector. Se han observado otras aplicaciones similares para ver qué se podía utilizar de ellas y qué características nuevas se podían introducir. Se ha implementado la capacidad de publicación de los artículos a través de un formulario que usarán los redactores y el elemento más significativo de esta aplicación que es una interfaz dinámica de gestión del contenido, administrable por un usuario del sistema. Se han trabajado también todos los aspectos visuales de los que se detallarán algunas características, aunque no correspondan al campo de la Ingeniería de Informática, ya que se han utilizado elementos gráficos, en combinación con la programación, para implementar algunas de las funcionalidades. 1.2 Contexto y objetivos El principal objetivo que inició el desarrollo de este periódico digital, ha sido utilizar Internet como plataforma para hacer llegar una información independiente de los grandes monopolios informativos que existen en España y que represente la voz y el sentir de la mayoría de la gente de este país. Información que se ha estado difundiendo a través de las publicaciones escritas durante muchos años y que ahora con el periódico digital, da un salto cualitativo en cuanto a la capacidad de difusión, ya que puede llegar a todo los rincones del planeta. Este proyecto pretende llegar a ser un referente informativo en Internet y como su nombre indica, mostrarnos la verdad. Esa verdad que muchas veces queda oculta por los medios de comunicación masivos, que son alimentados por los poderes económicos que deciden sobre que se puede hablar y sobre que no. 6 Una barrera que consigue salvar esta aplicación derivada de las características de Internet y que también es un objetivo que cumple, es la posibilidad de que redactores dispersos por la geografía española y de todo el mundo, puedan publicar sus artículos desde sus ordenadores personales. Cosa que cambia completamente la forma de trabajar que se tenía anteriormente. También se ha tenido en cuenta que la mayoría de usuarios no tienen conocimientos de HTML, ni de base de datos, por lo que se ha de realizar un formulario sencillo para que todo el mundo con conocimientos básicos de informática y acceso a Internet puedan subir los artículos, introducir en el contenido etiquetas HTML a través editores de texto con marcado que lo enriquezcan y ser capaces administrar el contenido de todo el periódico. La gran oferta informativa que existe en Internet, obliga a crear un producto de calidad, que sobresalga del resto o que aporte algo novedoso que no exista ya en otras aplicaciones, para que tenga éxito. En el caso de un periódico, la calidad del contenido es esencial, pero la parte externa, el aspecto del que se encarga el diseño gráfico, también es un factor que puede ser determinante para que un internauta permanezca en una WEB y no en otra. El aspecto visual nos crea de entrada una impresión positiva o negativa según sea su calidad, e igual que en una WEB corporativa, un buen diseño puede dar prestigio, confiabilidad y otros atributos positivos, pero si no se cuida la imagen, puede provocar el efecto contrario. Por esto, se ha partido de crear un entorno gráfico agradable e intuitivo, para que el usuario se encuentre a gusto y pueda realizar todas las funciones que quiera sin sentirse frustrado por no ser capaz de llevarlas a cabo. Si se hubieran utilizado colores muy estridentes, si no se hubiera mantenido una homogeneidad en el contenido y en la forma en que se realizan ciertas funciones, el usuario se incomodaría y abandonaría en pocos segundos la WEB, sin haber si quiera leído ningún artículo, o haciéndolo a medias. Echando por el suelo todo el esfuerzo y dedicación volcado en el contenido. Por otra parte, aprovechando las características de interacción de este medio, se ha buscado añadir el máximo de funcionalidades al periódico para enriquecerlo y que los usuarios participen, creando una constante retroalimentación de la información. El usuario no es simplemente un receptor, sino que se siente parte del proyecto valorando y comentando los artículos, lo que también provoca una fidelización de los usuarios que participan activamente. Este aspecto favorece el primer objetivo mencionado de llegar al máximo de gente posible, ya que conforme van apareciendo usuarios habituales, se va difundiendo el periódico entre sus familiares, amigos y conocidos de forma exponencial. Por eso otro aspecto que 7 se ha implementado, es que los lectores puedan recomendar artículos enviando correos electrónicos a sus amigos. Se busca que se estimule la participación de los usuarios pero también se quiere controlar el contenido que éstos suban en forma de comentarios. No se quiere coartar la libertad de expresión, no se van a eliminar comentarios, sino que serán sometidos a la opinión pública. El resto de los usuarios registrados podrán valorar los comentarios de otros usuarios puntuándolos entre una escala del -10 (totalmente en contra) al 10 (totalmente a favor). De este modo, un comentario que esté completamente fuera de lugar, quedará totalmente denunciado por el resto de usuarios. La aplicación está disponible, aunque a la fecha de entrega de este documento aún no está en funcionamiento, a través de la URL http://www.deverdaddigital.com/Nuevo. En breve ya estará completamente en funcionando. 8 2. Descripción funcional de la aplicación 2.1 Portada y secciones Los rasgos principales del periódico digital implementado, son en primer lugar, la división del contenido en distintas secciones (Nacional, Internacional, Ciencia, Cultura, Movimiento Obrero y Teoría). Todas las secciones tienen una misma estructura que consiste en la división en tres columnas del espacio. Captura de pantalla de la sección de portada. División del espacio en tres columnas. Dentro de cada una de estas secciones, se muestra una presentación de los artículos consistente en el antetítulo, el titular, una pequeña introducción del contenido y una fotografía opcional. La página de “Portada” es una sección especial, que sirve de resumen de los artículos más destacados de la edición y que contiene varios subapartados para las distintas secciones. Los artículos se clasifican según a la sección que pertenecen y a parte existen unos artículos especiales que se muestran sólo en la portada como es el caso de la “selección de prensa” internacional o nacional, el “dato del día”, la “frase del día” y la viñeta del “humor gráfico”, los cuales tienen una cabecera que nos índica a cual de estos apartados corresponde. 9 Captura de pantalla de las subsecciones de la portada. 2.2 Barra de navegación La mayor parte de la navegación dentro del periódico, se concentra en la barra superior situada debajo del logotipo. Entre los diferentes enlaces que aparecen, en primer lugar aparece el número de edición, que a parte de servirnos de indicador de la edición en la que nos encontramos, a través de él se accede a un formulario donde se puede seleccionar entre las distintas ediciones anteriores del archivo histórico. Una vez seleccionada una edición relacionada con su fecha de publicación, se cargan todas las secciones con sus artículos correspondientes. Vista general de la barra de navegación. Detalle de los enlaces. El siguiente elemento, la caja de texto, sirve para buscar artículos de la base de datos. Una vez que pulsamos sobre el icono de búsqueda se accede a un formulario que permite una búsqueda más exhaustiva, donde se pueden indicar una o varias palabras, la sección y el mes de publicación del artículo. No hace falta rellenar todos los campos, con uno de ellos es suficiente, pero cuantos más se indiquen, más precisa será la búsqueda. El enlace que está después de la fecha, sirve para acceder a la página de sindicación a los distintos canales RSS. Se ha creado un canal por cada sección para que cada usuario decida sindicarse al que más le interese. El de portada tiene los artículos más destacados de todas las secciones. A continuación encontramos el enlace a la página de información de las diferentes publicaciones escritas antecesoras al periódico digital y un enlace de contacto a través del correo electrónico para que los lectores envíen comentarios y sugerencias a la redacción. 16 2.11 Maquetación de las secciones (Administrador) Una de las características que diferencia esta implementación de la anterior versión de éste periódico digital, es la posibilidad de configuración de la visualización del contenido dentro de unos márgenes establecidos. La figura del administrador o maquetador es quien decide en qué posición y cómo se va a visualizar cada artículo dentro de cada una de las secciones. En primer lugar, se decide en qué columna y en qué posición dentro de ésta va a ir ubicado el artículo. También se puede definir el tamaño del titular entre tres distintas medidas: grande, mediano y pequeño, así hacer que resalte más o menos. Se elige si la fotografía se va a visualizar o no y dónde va a aparecer; a la izquierda, a la derecha o arriba (en este caso se puede intercalar entre el titular y el texto o ponerla encima del titular). También se puede poner un marco a un artículo y un fondo azul claro para destacarlo sobre los demás. El último de los campos (un checkbox) nos sirve para decidir qué artículos serán destacados de sección y aparecerán en el fichero RSS correspondiente y cuando se esté visualizando algún artículo de una determinada sección, también se mostrarán éstos destacados en la columna derecha. En el caso de la portada, a parte de las tres columnas, hay seis columnas más para cada una de las secciones. Todas estas posibles configuraciones visuales nos dan una herramienta ideal para cambiar por completo el aspecto de las secciones y que se destaquen más o menos algunos artículos según su importancia. Se ha hecho un cambio completo al anterior enfoque estructural y de diseño, donde cada artículo quedaba encorsetado dentro de un diseño que se repetía una y otra vez. Configuración aplicada a la sección que se muestra en la imagen anterior. 17 A continuación del formulario de visualización de las secciones, aparece una vista previa de cómo quedará la distribución y visualización de los artículos, se pensó que así sería más sencillo hacer las modificaciones ya que se visualiza en el mismo momento que se realiza el cambio. Visualización de un mismo artículo con diferentes configuraciones. 2.12 Otras funciones del administrador El administrador, dentro de la página del “panel de administración” tiene cuatro opciones nuevas. Para crear una “Nueva edición”, sólo hay que pulsar en el botón correspondiente. Esta función guarda en el archivo histórico la edición actual y crea una copia de ésta que será sobre la que se edite la nueva edición, añadiendo 18 nuevos artículos y conservando otros. Una vez pulsado sobre el icono de nueva edición, aparece otro enlace de confirmación. Al pulsar sobre maquetar secciones, aparecerá el siguiente formulario, en el que tendremos que elegir la sección y nos mostrará el formulario correspondiente para realizar los cambios visto en el apartado anterior. Si se pulsa sobre el enlace de actualizar RSS, se mostrará este mensaje: Para introducir un nuevo redactor, se utiliza este formulario. Se distingue entre nuevo redactor y asociar redactor, ya que se parte de la antigua base de datos. En caso de ser nuevo, se necesita introducir el nombre y el seudónimo que utiliza como usuario registrado del periódico. En caso de asociar el redactor, se introduce el número de identificación usado en la base de datos anterior. 19 3. Diseño 3.1 ¿Programación orientada a objetos o no? A la hora de realizar la implementación, se optó por una programación no orientada a objetos. Se partió de esto porque se consideró redundante e innecesaria la creación de objetos sección que cargaran todos los artículos correspondientes y estuvieran siendo enviados de página en página, según fuera navegando el usuario por la aplicación. Lo más normal es que no se vayan a leer todos los artículos y se consideró más eficiente cargar solamente la sección de portada y las que seleccione el usuario navegando, y que se carguen completamente de la base de datos sólo los artículos que el usuario quiera leer, enviando su identificador a la página de artículos. La imagen siguiente muestra el diagrama de clases UML que se realizó y que nos sirve para ver la funcionalidad de la aplicación. 20 3.2 Diseño de la Base de Datos La estructura de la base de datos se realizó utilizando el programa MySQL workbench de distribución gratuita que utilizando una interfaz gráfica o a través de comandos SQL crea las tablas de una base de datos relacional. Se empezó por crear las tablas de los datos más representativos de la aplicación como son el artículo, los usuarios, los redactores y la visualización de las secciones. Luego, partiendo de las funcionalidades que se querían implementar se fueron creando las tablas que representaban las relaciones entre los datos como son Usuario Comenta Artículo, Usuario Puntúa Artículo, Usuario Puntúa Comentario Anónimo Puntúa Articulo y Artículo Tiene Foto Se decidió separar los elementos de las fotografías del artículo para poder incluir varias fotografías en un mismo artículo, cosa que no se ha implementado todavía pero que con unos cambios en el formulario de subida de artículos, en la tablas Foto y Artículo Tiene Foto se puede realizar fácilmente. Elementos de los artículos Datos de las fotografías y la tabla que relaciona con cardinalidad de uno artículo a una fotografía. La forma puede ser horizontal o vertical. Tanto idArticulo como idFoto son claves primarias. En la tabla de articulosSubidos se guardan los idArticulo de los últimos artículos subidos al sistema para que estén diferenciados y sean más accesibles dentro del formulario de maquetación. 21 Tabla utilizada para guardar la configuración de visualización de los artículos de la edición actual. Se modifica mediante el formulario de maquetación. Sirve para guardar la visualización de todas las distintas ediciones anteriores. Es igual que la tabla anterior, pero no es posible modificar sus parámetros. Las ediciones tienen un número y su fecha de creación. Datos guardados de los usuarios que se registran. No pueden haber dos nombres de usuarios iguales, también se restringe tener dos cuentas con el mismo correo. Interacción de los usuarios con los artículos y con otros usuarios a través de comentarios y puntuaciones de artículos y comentarios. La única capacidad que tienen los usuarios no registrados es puntuar los artículos. Se obtiene la IP para evitar que un usuario vote dos veces. Tablas que recogen los datos de los países de los usuarios. Si es de España se requiere que también inserte la provincia. Una edición esta relacionada con la fecha de creación. 22 3.3 Diagrama de la base de datos relacional Todas las relaciones tienen una cardinalidad de muchos a muchos pero hay algunas restricciones. En la relación entre Artículo y Foto representada a través de Artículo Tiene Foto, un artículo sólo puede tener una fotografía. Igual pasa en Usuario Puntúa Articulo, Anónimo Puntúa Articulo y en Usuario Puntúa Comentario donde cada usuario sólo puede puntuar una vez un mismo artículo o comentario de otro usuario. Estas restricciones se han realizado mediante controles de los datos en el código. 23 3.4 Diagrama de Usuarios En el diagrama de usuarios se ven dos líneas diferentes, por un lado el administrador que no comparte ninguna funcionalidad con los otros roles dentro del sistema. Por otro lado tenemos al “Lector”, “Lector Registrado”, “Redactor”. Cada uno de ellos acumula las funcionalidades del anterior más otras propias. 3.5 Mapa navegacional del administrador 24 A continuación se muestran el diseño de cada nodo de exploración y secuencia relacionados con el mapa navegacional anterior. Se ha utilizado una herramienta de modelado UML y para representar las vistas de clase se han utilizado las cajas de clase. La flecha que va de la vista de clase “Sección” a la de “Portada” no define navegabilidad, sino la especialización de la clase. Ocurrirá siempre que estén Sección y Portada en un mismo contexto. Solo se mostrará el formulario correspondiente a los atributos de la portada cuando vaya a modificar esta. 25 3.6 Mapa navegacional del lector registrado 32 6. Implementación 6.1 XHTML 1.0 Se utilizó el estándar XHTML 1.0 ya que nos proporciona una mayor eficiencia a la hora de cargar las páginas WEB. Es un estándar que todos los navegadores reconocen y las reglas definidas en su fichero DTD, hacen que la lectura de los documentos escritos con ellas, sea mucho más rápida que los que no están así definidos. Esto nos proporciona una carga rápida de nuestras páginas y que el sitio WEB sea mucho más eficiente, sobretodo cuando tiene mucho contenido. También, XML es una tecnología en aumento y con muchas potencialidades y aunque en esta versión no se han aprovechado, en un futuro si se pueden utilizar sus características para mejorar la página. Por ejemplo se podría haber realizado un documento de transformación XLST para que una página del artículo que está en XHTML se transforme en un documento PDF, o guardar todos los artículos en documentos XML. Con esto, se podría realizar por ejemplo una versión “portable” de cada edición del periódico en PDF, que podríamos imprimir o llevar con el portátil o con un ebook y leer desde cualquier sitio donde no hubiera conexión a Internet. Las características del XHTML son la mezcla de HTML con las reglas del XML: todas las etiquetas deben cerrarse, las etiquetas vacías tienen que llevar la barra invertida, las propiedades tienen que llevar comillas dobles, los elementos anidados tienen que cerrar sus etiquetas en cierto orden, etc… Cabecera de todos los documentos que define la <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> ... 6.2 Acceso a la base de datos Para realizar las conexiones a la base de datos sí que se ha creado una clase llamada “BaseDeDades” que ha sido de mucha utilidad ya que se necesitaba de forma recurrente acceder a la base de datos y consultar, modificar e insertar datos. Se generaba el objeto y se realizaba la conexión a la base de datos MySQL definida en el constructor. 33 Código: <?php class BaseDeDades { private $servidor; private $usuari; private $clau; private $baseDades; private $descriptor; private $resultat; public function __construct(){ $this->servidor = "localhost"; $this->usuari = "root"; $this->clau = "basededades"; $this->baseDades = "digital"; $this->conectarBaseDeDades(); } public function conectarBaseDeDades() { $this->descriptor = mysql_connect($this->servidor, $this->usuari, $this->clau)or die("Error de conexión:".mysql_error()." !!!"); mysql_select_db($this->baseDades, $this->descriptor); } public function consulta($consultaSQL) { $this->resultat = mysql_query($consultaSQL, $this->descriptor); return $this->resultat; } public function extraureRegistre() { try{ if($fila = @mysql_fetch_array($this->resultat, MYSQL_ASSOC)) { return $fila; } else return 0; }catch(Exception $e){} } public function mostrarResultat() { return $this->resultat; } public function contarFiles() { return @mysql_numrows($this->resultat); } public function tancarBaseDeDades() { mysql_close($this->descriptor); } } ?> 34 6.3 Registro y administración de usuarios El lenguaje PHP tiene unas variables llamadas $_SESSION que sirven para el manejo de las “sesiones”, donde a cada usuario al acceder, se le asigna un identificador distinto durante todo el tiempo que está conectado a la aplicación. Todas las variables $_SESSION[‘nombre_variable’] que se creen estarán asociadas al identificador de usuario hasta que se destruyan. Para ello tenemos que usar la función session_start() , que se encarga de administrar los usuarios al principio de cada documento php y se declara antes de cualquier etiqueta HTML. A través de un formulario situado en la barra superior, el usuario registrado introduce su nombre de usuario y su contraseña. Una función llamada registro administra los accesos de los usuarios y muestra el formulario en caso de que no se haya realizado el registro. Cuando un usuario hace “login”, esta función contrasta tanto el nombre como la contraseña (cifrada con el algoritmo MD5, para tener mayor seguridad) en la base de datos y si coincide, asigna una variable sesión que contiene los permisos según el tipo de usuario (lector, redactor, administrador). Haber implementado los accesos de los distintos tipos de usuarios por un mismo formulario ha evitado crear diferentes interfaces visuales para cada uno de ellos, pero se ha tenido que crear un código más enrevesado al tener que darle un tratamiento distinto (comprobación del tipo de usuario, links de acceso a distintas funcionalidades, etc…) a cada uno de ellos. También hubiera sido más fácil administrar el acceso de los usuarios en una página separada y no en la “barra de herramientas” común a todas las páginas de la aplicación. Por otra parte hay una página de registro para dar de alta a los usuarios que aún no se han registrado en el sistema. A través de ésta página, donde se introducen a través de un formulario el nombre, la contraseña, el correo y otros datos, se realizan distintas comprobaciones. Antes de mandar los datos para realizar el registro, se comprueba que se hayan rellenado todos los campos y que el correo electrónico esté bien formado. También se requiere introducir de nuevo la contraseña, para que no haya errores. Todas estas comprobaciones se realizan a través de javascript, mediante una librería de jQuery llamada Validation, ya que nos evita tener que mandar los datos al servidor y que este los compruebe. Así los enviamos listos para que se registren sin ningún error. También a través de javascript, se ha implementado un script para que si en el selector de país, se ha seleccionado España, se active el selector de provincia y sea obligatorio escoger una de ellas. Esto se ha realizado poniendo a true o false la propiedad “disabled” del elemento select asociado a las provincias. 35 Ejemplo del código utilizado: <?php $nom = $_POST['nom']; $password = $_POST['pwd']; $_SESSION['usuari'] = $nom; $BD = new BaseDeDades(); /* Se comprueba que exista el usuario introducido y se comprueba que la contraseña introducida sea la correcta */ if(existeixCampTaula("Usuario","idUsuario",$nom,$BD) && $nom != '') { $_SESSION['usuariOK'] = 1; $clauEncriptada = md5($password); $usuariRegistrat = "SELECT idUsuario, pwd, cuenta FROM Usuario WHERE idUsuario = '$nom' AND pwd = '$clauEncriptada'"; $BD->consulta($usuariRegistrat); $pwdOK = $BD->contarFiles(); $registre = $BD->extraureRegistre(); $compte = $registre['cuenta']; $_SESSION['estatCompte'] = $compte; /* Si la cuenta esta activa, se establecen los permisos */ if($pwdOK && $compte == 'activa') { $_SESSION['pwdOK'] = 1; $_SESSION['permisos'] = 'LECTOR'; $consulta = "SELECT idRedactor FROM UsuarioEsRedactor WHERE UsuarioEsRedactor.idUsuario = '$nom'"; $BD->consulta($consulta); $registre = $BD->extraureRegistre(); $idRedactor = $registre['idRedactor']; if($idRedactor != '') { $_SESSION['redactor'] = $idRedactor; if($idRedactor == 1) $_SESSION['permisos'] = 'ADMIN'; else $_SESSION['permisos'] = 'REDACTOR'; } } } if($_GET['sessio'] == "desconecta") { $_SESSION['usuariOK'] = 0; $_SESSION['pwdOK'] = 0; $_SESSION = array(); session_destroy(); #mostrarMissatge("Hasta la próxima"); echo '<script type="text/javascript"> setTimeout("redireccionar()", 1000); </script>'; } ?> 36 6.4 Seguridad: evitar inyección SQL Para evitar la “inyección” mediante los inputs de los formularios con el uso de las comillas (' o “) que cortan las sentencias SQL y pueden ocasionar que se muestre información de la base de datos, se ha utilizado la función addslashes(). Ésta, pone una barra invertida antes de cada comilla insertada, así nos evitamos que haya algún usuario malintencionado que quiera acceder sin permiso como usuario registrado. También es posible que no se realicen correctamente las inserciones de datos en la base de datos si en un input de texto se introducen las comillas. Al ejecutar la sentencia SQL se produce un error ya que se corta la misma y el servidor no la reconoce. Por ejemplo si la consulta para comprobar la contraseña de los usuarios fuera la siguiente: SELECT * FROM ususario WHERE id = 'root' AND pwd = '$pwd' y el usuario hubiera introducido el password como ' OR '' = ', tendríamos la siguiente consulta: SELECT * FROM ususario WHERE id = 'root' AND pwd = ' ' OR '' = ' ' Esta sentencia siempre devuelve el usuario introducido como válido, por lo que acaba de acceder al sistema un usuario a través de una cuenta ajena, o lo que es peor como administrador. Es posible que el servidor esté configurado para automáticamente introducir las barras invertidas y corregir este error. Por si acaso, hay que comprobarlo y tratar las variables introducidas si es necesario. Código: <?php /* Si get_magic_quotes_gpc() nos devuelve 1 es que ya esta configurada la función para introduci r barras invertidas antes de las comillas, si no es así, tenemos que hacerlo con addslashes() */ if(!get_magic_quotes_gpc ()) { $password = addcslashes($password); $nom = addcslashes($nom); } ?> Hemos añadido esta función en todas partes donde el usuario introduzca datos que serán insertados en la base de datos. Si se tiene acceso a la configuración de PHP en el servidor se pude modificar la línea correspondiente a magic_quotes_gpc = Off y ponerla a “On”. 37 6.5 Formulario de maquetación Este apartado fue uno de los más complejos de realizar, ya que el nivel de abstracción requerido para imaginar este tipo de formulario no fue nada sencillo. Se resolvió numerando los artículos con una combinación del número de la columna y una numeración interna de cada columna más el atributo de visualización de cada artículo. Con esto, se consiguió diferenciar cada artículo de forma inequívoca. Se creó una función para cargar el formulario de maquetación desde la tabla PosiciónVisualización y otra que cargara el formulario a partir de la página anterior con las modificaciones realizadas a través del anterior formulario y que guardara los cambios en la base de datos. Para ello, había que recorrer todos atributos de visualización de los artículos e ir mostrando y guardando las modificaciones. <?php function mostrarFormulariMaquetacio($seccio) { $refArticles = InicialitzarIobtenirArrayArticles($seccio,1); if ($seccio == "PORTADA") $columnes = 9; else $columnes = 3; for($i = 1; $i <= $columnes ; $i++) { $numArticles = $_POST["numArticles$i"]; $columna = "Col $i"; mostrarTitolColumna($i); for($num = '1'; $num <= $numArticles; $num ++) { $numeracio = $i.$num; $articleSel = $_POST["article$numeracio"]; $posicioColumnaSel = $columna; $posicioNumSel = $_POST["numero$numeracio"]; $estilSel = $_POST["estil$numeracio"]; $marcSel = $_POST["marc$numeracio"]; $fotoMostrarSel = $_POST["foto$numeracio"]; $fotoPosicioSel = $_POST["posicioFoto$numeracio"]; $fotoInter = $_POST["fotoInter$numeracio"]; $destacatSel = $_POST["destacat$numeracio"]; mostrarElementsFormularis(…,…,…,…,…); #GUARDAR LOS CAMBIOS if($articleSel != 0) guardarEnLaBD(…,…,…,…); } echo "<center><input name=\"numArticles$i\" type=\"text\" value=\"$numArticles\" size=\"1\" /> Número de articulos en columna $i </center>"; } tancarFormulari($seccio); } ?> 38 6.6 Puntuar artículos El sistema de estrellas para realizar la puntuación, se ha realizado combinando programación Javascript junto con CSS para generar el efecto de las estrellas que se rellenan conforme pasa el ratón por encima. Cada una de las estrellas es independiente y tiene una numeración asociada en su propiedad “id” de la etiqueta. Si se sitúa el ratón por encima de la estrella tres, tiene que colorearse la número tres y las que la preceden. Cuando se pulsa en una estrella, se hace una llamada a la página del artículo, pasándole en la URL el identificador del artículo y la puntuación realizada. Esto se registra en la base de datos junto con el identificador del usuario o la IP (según se haya registrado el usuario o no) para que un mismo usuario no pueda puntuar dos veces el mismo artículo. Se corrigió un error para que si se pulsa el botón de refrescar la página, no se vuelva a registrar la puntuación del artículo. Para ello se introdujo una función que comprobara si esa misma puntuación había sido realizada anteriormente. Si un usuario accede a un artículo que ya ha sido puntuado por él, le aparecerá la puntuación realizada anteriormente y no podrá volver a puntuar. <?php <div id="estreles" onmouseout="javascript:mostrarEstreles(0)"> <div id="estrela1" class="oculta" onmouseover = "javascript:mostrarEstreles(1)" onclick = "javascript:puntuarArticle($idArticulo,1)"> </div> <div id="estrela2$" class=\"oculta\" onmouseover=\"javascript:mostrarEstreles(2)\" onclick=\"javascript:puntuarArticle($idArticulo,2)\"> </div> </div> ?> La siguiente parte del código es activada por el manejador de eventos de Javascript al pulsar el ratón sobre una de las estrellas y redirige a la página de artículo pasando los datos de la puntuación realizada a través de la URL. <script type="text/javascript"> function puntuarArticle(idA,n) { window.location = "pagArticle.php?articulo="+idA+"&puntua="+n; } </script> 39 Una vez se redirige, se guarda la puntuación en la base de datos: <?php function puntuarArticle($idA, $punts){ $BD = new BaseDeDades(); if(isset($_SESSION['usuari'])) { $usuari = $_SESSION['usuari']; if($BD->contarFiles() == 0) { $insertarPuntuacio = "INSERT INTO UsuarioPuntuaArticulo(idUsuario, idArticulo, Puntuacion) VALUES('$usuari', '$idA', '$punts')"; $BD->consulta($insertarPuntuacio); contabilitzarVotsArticle($idA,$punts); } } ?> 6.7 Comentar artículos A todos los usuarios les aparece un formulario al final de cada artículo para que puedan comentarlo, aunque aparece deshabilitado en el caso de los que no están registrados, mostrándoles un aviso para que lo hagan. Se ha implementado un sistema de puntuación a través de un selector, para que se puedan puntuar los comentarios de otros usuarios del periódico digital. Se puede entre una escala de menos diez a diez (totalmente en contra o totalmente a favor). <?php function mostrarFormulariComentar($idA,$pag) { /*Comprueba si el usuario esta registrado o no para activar o desactivar el formulario */ if(isset($_SESSION['usuari'])) { $disabled = ''; $missatge =""; } else { $disabled = 'disabled="yes"'; $missatge ="Sólo los usuarios registrados pueden comentar."; } $mostrar=' <form id="comentar" action="direcciónDeEnvio" method="post"> <div class="textComentar">Haz un comentario...</div> <textarea name="comentari" rows="5" .$disabled.'> '.$missatge.' </textarea> <input type="submit" value="Enviar comentario"'.$disabled.'> </form> '; echo $mostrar; } ?> 40 Los usuarios solamente pueden puntuar una sola vez cada comentario al igual que los artículos y también se ha realizado una comprobación para que no se puntúe de nuevo al refrescar la página y volverse a enviar los datos. 6.8 Caja de contenido variable Este sistema de recuadro puede mostrar diferente contenido según la pestaña que se seleccione, se ha realizado también utilizando programación Javascript que modifica las propiedades de visibilidad de CSS, creando el efecto de intercambio de información. En realidad, se carga el contenido de las tres opciones, se deja visible solamente una y el resto se establecen a “hidden”. Cuando se pulsa en alguna de las pestañas, se modifican estas propiedades para que se muestre el contenido de la seleccionada. 6.9 Librería “Validation” de jQuery Para utiliza esta librería, simplemente se tienen que referenciar los archivos de la librería y definir en un documento el listado de atributos “name” de los inputs de los formularios sobre los que se aplicarán las funciones de validación, los patrones o reglas que se le aplicarán y el mensaje que mostrarán en caso de no cumplir con las especificaciones. $(document).ready(function() { $("#registre").validate({ rules: { usuari: "required", correu: {required: true, email: true}, clauAntiga: "required", clau : "required", clau2: { required: true, equalTo: "#clau" }, pais: "required", ciutat: "required", correuNueva: {email: true} }, messages: { usuari: "Es necesario un nombre", correu : "Email no Valido", clauAntiga: "Es necesaria una clave", clau2 : "Reescribe la clave", clau : "Es necesaria una clave", pais : "Selecciona un país", ciutat: "Introduce una ciudad" } }); }); Para el funcionamiento de la librería de validación, especificamos el formulario que se quiera, en este caso #registre, que es la propiedad id del 41 formulario sobre el que se aplicaran las reglas asociadas al “name” de cada input y para el que se mostrará un mensaje en caso de no cumplirse las reglas. 6.10 Sindicación: archivos RSS Este tipo de archivos basados en XML, son muy importantes en páginas WEB que se actualizan constantemente como es el caso de éste periódico digital. Las ventajas que nos proporciona esta tecnología, es que se pueden ver la última información actualizada en una WEB sin necesidad de acceder a ella. Los programas de sindicación integrados en la mayoría de navegadores, descargan automáticamente la información de los ficheros RSS a los que se está sindicado, mostrando un link de acceso al nuevo contenido. Ejemplo de fichero RSS estándar (hay otras tags, pero estas son las comunes): <?xml version="1.0" ?> <?xml version="1.0" ?><?xml version="1.0" ?> <?xml version="1.0" ?> <rss version="2.0"> <rss version="2.0"><rss version="2.0"> <rss version="2.0"> <channel> <channel><channel> <channel> <title> <title><title> <title> Nombre del Canal </title> </title></title> </title> <link> <link><link> <link> Dirección URL </link> </link></link> </link> <description> <description><description> <description> descripción...</description> </description></description> </description> <image> <image><image> <image> <url> <url><url> <url>http://www.xul.fr/xul-icon.gif</url> </url></url> </url> <link> <link><link> <link>http://www.xul.fr/en/index.php</link> </link> </link> </link> </image> </image> </image> </image> <item> <item> <item> <item> <title> <title> <title> <title> Título del artículo </title> </title></title> </title> <link> <link> <link> <link> Dirección URL </link> </link></link> </link> <description> <description> <description> <description> Introducción al artículo </description> </description></description> </description> </item> </item> </item> </item> <item> ... <item> ...<item> ... <item> ... </item> </item></item> </item> </channel> </channel></channel> </channel> </rss> </rss></rss> </rss> 6.11 Sentencias SQL para realizar una búsqueda en elementos de texto Una parte importante para el periódico, era tener un buen motor de búsqueda para encontrar artículos dentro de la base de datos, para ello se decidió que se hicieran búsquedas sobre los campos título, introducción y palabras clave. Para realizar la búsqueda de artículos dentro de la base de datos se ha utilizado el método LIKE, que nos sirve bien en caso de que sólo se este buscando una palabra, ya que si se trata de dos o más palabras, sólo encuentra resultados exactos. Si 48 7. Conclusiones Al finalizar este proyecto, podemos afirmar que los lenguajes y tecnologías utilizados en el desarrollo de una WEB dinámica como ha sido este periódico digital, han cumplido, sin duda alguna, con todas las necesidades y expectativas que se habían creado en torno a esta aplicación antes de su creación y se han podido realizar todas las funcionalidades e interacciones requeridas han podido ser creadas sin ningún problema. La decisión tomada de no utilizar un modelado orientado a objetos ha sido la acertada, aunque siempre se pueden ver pros y contras. Se ha creado un sistema modulado con funciones atomizadas y específicas, con el fin reutilizar el código lo máximo posible que es una de las características de la POO. Esta modularidad nos permite corregir errores y añadir nuevas funcionalidades de forma sencilla, interfiriendo lo mínimo en el código ya creado. Quizás la forma de realizar el login es el más enrevesado y más complejo a la hora de realizar modificaciones, pero como ya se comentó, se prefirió realizar así para que todos los usuarios pudieran acceder desde un mismo formulario que se muestra en todas las páginas. En cuanto al diseño, se han conseguido crear un aspecto agradable, una diferenciación de los distintos apartados de la WEB, concentrando la navegación a través la barra con enlaces y pestañas de la muestra del contenido. Se ha creado un interfaz sencillo e intuitivo para que cualquier usuario pueda usarlo. Las funcionalidades para los redactores y para el administrador también son sencillas de realizar y en concreto la maquetación de las secciones ha significado un cambio cualitativo a la forma de mostrar el contenido de forma dinámica y completamente configurable. Aún salvando la mayoría de problemas surgidos con los estándares CSS distintos navegadores ha habido algunos que no se han podido corregir y se muestran de forma diferente, aunque son cosas que pasan desapercibidas. Desde luego que el futuro ha de ir por conseguir que las distintas compañías cumplan los estándares y no tengamos que ser los desarrolladores los que nos tengamos que preocuparnos de estas cosas. El desarrollo de este proyecto ha sido todo camino lleno de obstáculos, que se han ido superando poco a poco conforme se aprendían a utilizar los distintos lenguajes y tecnologías. Ha sido un proceso muy enriquecedor y en el que se han puesto sobre la mesa todos conocimientos adquiridos durante la carrera para conseguir una aplicación, eficiente y de calidad. Espero que esta documentación sirva de ayuda a otros alumnos que se planteen realizar una aplicación similar. 49 8. Referencias bibliográficas Para realizar este proyecto, para el cual he partido básicamente de cero en conocimientos de HTML, CSS, Javascript y PHP. Me han sido de muchísima ayuda varios libros y un sinfín de páginas y blogs de Internet especializados en programación. Quiero agradecer desde aquí a todo el mundo que desinteresadamente escribe tutoriales en la red, ya que son de mucha ayuda para gente que no tiene conocimientos al respecto. Internet se ha convertido en una universidad a distancia, sobre todo para todo lo relacionado con las nuevas tecnologías y la programación. Voy a listar aquí algunas de las páginas que he consultado, auque se quedan muchas por el camino, ya que no guardé registro de todas ellas. Libros Utilizados: Manual Imprescindible de PHP 5 Luis Miguel Cabezas Granado Anaya Multimedia Introducción a Javascript Javier Erguíluz Pérez LibrosWEB Introducción a CSS Javier Erguíluz Pérez LibrosWEB CSS avanzado Javier Erguíluz Pérez LibrosWEB Página web con libros de HTML, CSS, Javascript, Ajax… http://www.librosweb.es/ Instalación de un entorno LAMP http://www.elmodem.com/archivo/2007/01/15/como-instalar-un-servidor-lampen-ubuntudebian/ Función de paginación de resultados: http://elrincondetolgalen.wordpress.com/software/paginador_php/ Función de obtención de la dirección IP real del usuario: http://www.eslomas.com/index.php/archives/2005/04/26/obtencion-ip-real-php/ Realización de un buscador con PHP y MySQL: http://blog.zumbe.net/?p=10 Algunos aspectos de seguridad en PHP: http://blog.zumbe.net/?p=10 Las siguientes WEBs han sido utilizadas de manera recurrente para solucionar múltiples dudas de HTML, PHP, CSS y Javascript entre otros: http://www.forosdelweb.com/ http://www.desarrolloweb.com/ http://www.webtaller.com/