• +34 - 607 571 659
  • info@oscarperez.es

Author Archive Oscar Pérez Gómez

Problemas con las eñes, acentos y demás caracteres cuando usas mysql y php

Con esto nos hemos pegado todos los que trabajamos con PHP.

El problema viene dado por que la configuración del cotejamiento de los caracteres especiales como acentos, eñes y demás símbolos no es el mismo entre la base de datos (MySQL), el lenguaje de servidor (PHP) y el servidor (Apache).

El cotejamiento (esta palabra tan rara) indica qué tipo de codificación queremos usar para los valores de estos campos.

Busqué y busqué, probé y probé y al final me hice un pequeño esquema con lo que yo hago para solucionarlo.

1. Creación base de datos

Al crear la base de datos MySQL, asegúrate que los campos string y demás esten en utf8_spanish_ci y el cotejamiento de las tablas en utf_unicode_ci

ejemplo:

CREATE TABLE IF NOT EXISTS `table` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(45) CHARACTER SET utf8 COLLATE utf8_spanish_ci NOT NULL,
`autotimestamp` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Si usas phpMyAdmin se puede modificar en el apartado “Operaciones” de la tabla.

2. En la web

En las páginas de nuestra web, también hay que indicar el conjunto de caracteres que queremos usar.

Coloca en el <head> de todos los archivos HTML:

<meta charset="UTF-8">

Y en los que únicamente llevan PHP (llamadas de AJAX, APIs, XML, …) colocar en la primera linea el siguiente código:

header("Content-Type: text/html;charset=utf-8");

3.  Cuando se crea la conexión de PHP con MySQL.

Yo estoy usando MySQLi, así que te indico lo que yo hago

$mysqli = new mysqli($BD_SERVIDOR, $BD_USUARIO, $BD_PASSWORD, $BD_NOMBRE);
$mysqli->set_charset("utf8");

Pero si utilizas  mysql_connect (aunque esta extensión fue declarada obsoleta en PHP 5.5.0 y eliminada en PHP 7.0.0.) debes incluir también mysql_set_charset, que te permite establecer el conjunto de caracteres del cliente.

$conn = mysql_connect($BD_SERVIDOR, $BD_USUARIO, $BD_PASSWORD);
mysql_set_charset("UTF8", $conn);

Tanto $BD_SERVIDOR, $BD_USUARIO, $BD_PASSWORD, $BD_NOMBRE son variables donde yo guardo la configuración de mi base de datos

Con esto he solucionado el engorroso problema de los acentos y las eñes, y me evito usar el htmlentities

Añadir un icono a los pdf que insertamos en una entrada de WordPress

En algún momento nos hemos visto en la necesidad de insertar un pdf, doc, xls… dentro de una entrada en nuestro wordpress.
Usando al botón de “Añadir Objeto” en el menú de edición de entradas es sencillo. Lo que ocurre, es que a veces, y cada vez más, queremos que al lado del enlace aparezca un icono tal como aparece en la imagen adjunta.

Seguro que hay plugins que lo puede hacer, pero yo prefiero usar jQuery y Css3.

Lo primero es crear en nuestro style.css las clases necesarias para decorar estos enlaces.

Yo voy a crear tres clases nuevas, una para documentos pdf’s, otra para doc’s y otra para xls’s. Si necesitas más lo único que tienes que hacer es ir añadiendo las que vayas necesitando.

El código es el siguiente:

.icon_pdf { padding: 2px 2px 0 20px; background: transparent url('images/icons/icon_pdf.png') no-repeat center left }
.icon_doc { padding: 2px 2px 0 20px; background: transparent url('images/icons/icon_doc.png') no-repeat center left }
.icon_xls { padding: 2px 2px 0 20px; background: transparent url('images/icons/icon_xls.png') no-repeat center left }

Ten en cuenta que seguramente debas cambiar el path donde se encuentran los iconos y poner la ubicación donde se encuentran los tuyos.

Y ahora viene lo divertido.
¿Cómo añadimos estas clases a los distintos tipos de documentos que hay en la nueva entrada del wordpress?
Para ello vamos a usar jQuery, y por ello tienes que tener “cargado” el javascript jQuery antes. Una manera muy sencilla de cargar jQuery es poner en nuestra pagina el siguiente código:

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

P.D. Puedes usar la versión que más te guste de jQuery. Para ello lo único que tienes que hacer es cambiar la url en la linea anterior.

Pues una vez que estamos seguros que tenemos “cargado” correctamente el jQuery, añadimos el código que va a realizar la visualización del icono correspondiente al lado del enlace al documento que hemos insertado.

Este es el código:

<script type="text/javascript">    
    $(document).ready(function() {
        var fileTypes = {
          // extension:nombre de la clase
          doc: 'icon_doc', xls: 'icon_xls', pdf: 'icon_pdf'
        };

        $.each(fileTypes, function(extension, classname) {
            $('a[href$="' + extension + '"]').addClass( classname );
        });
    });
</script>

En la linea 2 creamos una variable cuyo nombre es ‘fileTypes‘ que es un array de registros de tipo clave/valor. Esto quiere decir, que el primer campo de cada registro es la clave y el segundo campo es el valor. Como clave usaremos la extensión del fichero (pdf, doc, xls) y en el valor guardarmos e nombre de la clase CSS que hemos creado en el fichero style.css.

En la linea 8, usamos la función .each(), para recorrer los elementos que están dentro del $(document), que es el elemento al que has hecho referencia en la linea 2.

En la linea 9, lo que hacemos es que dependiendo de la extensión que tiene el elemento que hay dentro de la entrada (el elemento que hemos insertado, ya sea el fichero pdf, fichero doc..) le añadimos la clase que le corresponde y que hemos definido dentro del array fileTypes.

Con un ejemplo, me explicaré un poco mejor:

1. El script recorre toda la entrada (o post), y encuentra un fichero pdf.
2. Con la extensión pdf, busca en la variable fileTypes el nombre de la clase que le corresponde a la extensión pdf. En este caso es ‘icon_pdf‘ ya que hemos definido la siguiente entrada dentro de fileTypes: pdf:’icon_pdf’.
3. A dicho elemento le añade la clase correcta en la linea 9: addClass( classname );

Espero que os sea útil

Ayuntamiento Real Sitio de San Ildefonso

Soy el responsable del departamento de Informática del Ayuntamiento del Real Sitio de San Ildefonso.

Mi cometido es mantener el parque informático y mantenimiento y desarrollo de todas las webs municipales.

La principal web es la Página oficial del Ayuntamiento del Real Sitio de San Ildefonso.

En esta web se refleja la información que se genera en el pueblo del Real Sitio de San Ildefonso (Segovia),  ya sean noticias propias del ayuntamiento o información cultural

EL CMS usado es WordPress. También se usa PHP y jQuery para diversas funcionalidades que se han implementado fuera del CMS, y tambien se han programado plugins específicos para mostrar información relativa al Ayuntamiento del Real Sitio de San Ildefonso.

El tema que se usa es un tema propio, es decir, construido integramente para este proyecto.

Para el diseño se ha usado HTML5 y CCS3, además el diseño es adaptativo y se puede visualizar en ordenadores, tablets y móviles

Pero la web oficial del ayuntamiento no es la única .  La lista de webs que desarrollo y mantengo se va incrementando poco a poco:

También diseño y desarrollo una intranet para uso interno de los trabajadores del Ayuntamiento

Estamos en fiestas

Estamos en fiestas es una aplicación para móviles, que permite llevar el programa de fiestas de los municipios a sus habitantes y visitantes, ofreciendo además una imagen innovadora acorde con el uso de las nuevas tecnologías.

Las nuevas aplicaciones móviles son potentes canales de comunicación con el ciudadano, el visitante y el turista, y también ayudan a dinamizar el comercio y el turismo de la ciudad.

Esta aplicación permite a los usuarios tener el horario, descripción e imágenes de los eventos en el móvil, que como todos sabemos, es un dispositivo que siempre va con nosotros pudiendo acceder en cualquier momento a la información y TOTALMENTE GRATIS PARA LOS USUARIOS.

Enlaces para descargar la aplicación:

 

También puedes escanear los códigos QR que se muestra a continuación dependiendo del sistema de tu dispositivo móvil.

Google Play

App Store

 

Web de la aplicación

Ramiro Ribas Narvaez

Página Web de Ramiro Ribas.  Un Artista Multidisciplinar (Escultura, Pintura, Literatura, Diseño, Proyectos Artísticos …)

EL CMS usado es WordPress, con el plugin Woocomerce y el tema Flastatic

ShoppinginMadrid

Este proyecto es el trabajo final del Master que realicé en CICE en 2014 sobre Desarrollo y Diseño de proyectos Web.

Es una página web de ámbito turístico-comercial, donde muestro información comercial (tiendas, centros comerciales, grandes almacenes…) de algunas zonas de Madrid. Una web para saber que tiendas hay en distintas zonas comerciales de Madrid.

En principio estas zonas son: Sol-Arenal-Mayor, Gran Vía, Fuencarral, Serrano-Goya. En resumen, será un listado de tiendas y está enfocada para los turistas que visitan Madrid.

Al estar enfocada al turista, se ha realizado un sistema de multilenguaje, que en principio está disponible en inglés y español, y donde el lenguaje por defecto es el inglés.

El desarrollo se ha hecho en J2ee (usando los frameworks Struts e Hibernate)Php, Mysql, Html5, Css3, Javascript, jQuery, Ajax y el CMS también es propio y desarrollado por mí.

Se implementan llamadas Ajax para recuperar la información de base de datos. Uno de los retos con los que me encontré fué precisamente como implementar las llamadas Ajax con el frameworks Struts. Cuando lo consigues parece fácil pero hasta que llega ese momento, te vuelves un poco loco.

Usé HTML5 y CSS3, y el diseño web es adaptativo, con lo cual se visualiza perfectamente en móviles y tablets, lo que facilita el uso de la web para el turista que se encuentra en la calle.

Si quieres ver el código lo puedes descargar de GitHub

Sociedad Castellarnau

Página de la Sociedad Castellarnau. Está online desde 2010. Url

La Sociedad Castellarnau, de la que soy miembro, me encargó la realización de su página web. En esta página web, se refleja las inquietudes, pensamientos y conocimientos de los miembros de este Sociedad. El nexo común de todos nosotros es el amor que tenemos por el entorno de La Granja, Valsaín y la Sierra del Guadarrama.

La tecnología usada en la primera versión fué Php, Mysql, Html, Css, Javascript y el CMS también era propio y desarrollado por mí.

La he renovado en octubre del 2016 y he usado como CMS WordPress, y como tecnologías de diseño y programación Php, Mysql, Html5, Css3, Javascript, jQuery, Ajax, adaptando el diseño para dispositivos móviles. Para algunas funcionalidades programé plugins propios para guardar información en la base de datos y después mostrarla en la web pública.

Eliminar “index-php” de la url de los “enlaces permanentes” de wordpress

Bueno, en mis primeras proyectos con WordPress me encontré con un problema con los “Enlaces Permanentes”. Resulta, que al instalar el WordPress en mi servidor de producción, se producía un error con los enlaces.

En mi página de Ajustes de “Enlaces Permanentes”, veía lo siguiente:

Cómo ves, en algunas opciones venía ya insertado en la dirección del enlace el /index.php/

Yo use, la opción “Estructura personalizada”, eliminando el index.php.
Guardar los cambios y probar.. y claro, no podía ser tan sencillo. Los enlaces a las diversas entradas no funcionaban. Obtenía la famosa y fatídica página


¿Que está pasando?. En mi servidor local de desarrollo funcionaba, pero en el servidor de producción, no lo hacía. Pues ya sabeis, a buscar en San Google.

Solución para el servidor web Apache

La solución es un fichero llamado .htaccess, que cuando se realiza la instalación nueva de WordPress, a veces no se crea. Este fichero tiene que estar en el directorio raíz de la instalación.

Si tu caso es este, lo que puedes hacer es crearlo manualmente, y poner el siguiente código:

# BEGIN WordPress
RewriteEngine On
RewriteBase /
RewriteRule ^index.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
# END WordPress

Importante: Este código únicamente es para solucionar el tema de los enlaces permanentes.

Solución para el servidor web lighttpd

Si estás usando el servidor web lighttpd la solución es distinta, ya que este servidor no usa el fichero .htaccess.
Para solucionar te recomiendo que leas la siguiente entrada devirtual.berrydejager.com.
Yo en producción uso este servidor web, y lo único que hize fue seguir las instrucciones que se indican.

Configuración de los puertos de escucha del Tomcat en entorno Linux

En el desarrollo de un proyecto tuve que instalar un servidor Tomcat como servidor web, para dar soporte a servlets y JSPs.

Tomcat no es un servidor de aplicaciones, como JBoss o JOnAS. Incluye el compilador Jasper, que compila JSPs convirtiéndolas en servlets. El motor de servlets de Tomcat a menudo se presenta en combinación con el servidor web Apache. Existen varias aplicaciones o paquetes para instalar Apache en linux que ademas instalan también el interprete de php, el servidor MySql de base de datos y el entorno web phpMyAdmin, para gestionar la base de datos.

Además, como también estaba usando MySql como sistema de base de datos, instalé el phpMyAdmin sobre un servidor Apache.

En resumen:

  1. Si vas a trabajar con servlets y jsp (programación web con Java), necesitas un Tomcat.
  2. Si vas a trabajar con php, WordPress, Drupal… necesitas un servidor Apache.

Actualmente, el servidor Apache, viene intregado en un ‘sistema’ que se define como LAMP (Linux, Apache, MySql, Php). Tampoco quiero extenderme en este tema, ya que no es el tema de esta entrada.

Al tener los dos servidores web instalados en la misma máquina, tenía un problema: el puerto 80 estaba siendo usado por el Apache y el Tomcat usaba el 8080. Estos puertos vienen configurados por defecto en las instalaciones de los dos servidores.

Yo necesitaba que cuando se accediera al puerto 80 (el puerto que se usa generalmente en el tráfico web) se accediera al Tomcat, en lugar de acceder al Apache.
En resumén, hay dos cosas que tenemos que hacer:

  1. Cambiar la configuración del Apache para que responda en el puerto 8088 (por ejemplo)
  2. Cambiar la configuración del Tomcat para que responda en el puerto 80.

1. Cambiar la configuración del Apache para que responda en el puerto 8088.

Generalmente, en el entorno Linux, el apache se instala en el siguiente path: /etc/apache2.

Pues hay que cambiar el puerto 80 que viene definido por defecto en este archivo “/etc/apache2/ports.conf” en estas dos lineas donde se define el NameVirtualHost y el Listen, por el puerto que quieras (yo he usado el 8088). Debería de quedar así:

NameVirtualHost *.8088
Listen 8088

Y en /etc/apache2/sites-enabled/000-default cambias también el puerto en la linea VirtualHost, quedando la linea así:

VirtualHost *:8088

Y después de cualquier cambio en la configuración del Apache, hay que reiniciarlo:

sudo /etc/init.d/apache2 restart

Aunque a mi me gusta más parar y arrancar. ¿Por qué?. Por que a veces me he encontrado con problemas de caché o similares que me volvían loco y no se solucionaba hasta hacer un stop & start, y no un restart.

sudo /etc/init.d/apache2 stop
sudo /etc/init.d/apache2 start

Bueno, pues con esto, ya hemos cambiado el puerto de escucha del servidor Apache. Comprobamos que funciona.


Ha sido sencillo. Pues vamos a cambiar la configuración del Tomcat, que en principio parece igual de sencillo.

2. Cambiar la configuración del Tomcat para que responda en el puerto 80.

Si necesitamos cambiar el puerto del Tomcat (por defecto es 8080), lo podemos hacer fácilmente a través del archivo server.xml. Hay que buscarlo dentro de la instalación de Tomcat. En mi caso está en /etc/tomcat7, pero tambien lo puedes encontrar en /etc/tomcat7/conf. Esto depende de la instalación del Tomcat.

Cuando encuentres el fichero, debes buscar algo así:

 <Connector port="8080" ......

y cambiar el puerto al 80 (tal como indico a continuación):

 <Connector port="80" ......

Despues, reiniciar el tomcat (ya he comentado que prefiero el stop & start)

sudo /etc/init.d/tomcat7 stop
sudo /etc/init.d/tomcat7 start

Y con esto ya está. Bueno eso creía yo.
Me fui al Chrome y al intentar cargar mi página lo que me encontré fue lo siguiente:

Esto me dejo bastante perplejo, ya que buscara por donde buscara, siempre me encontraba que para cambiar el puerto del Tomcat, había que hacer lo que he descrito anteriormente.

¿Que hacer?. Pues pedir consejo. Todos tenemos un amigo, que es mucho más inteligente que uno mismo (y si no lo tienes, te recomiendo que lo busques). Así que después de comentarle mi problema, me lo solucionó.

El problema es que los puertos por debajo de 1024 en Ubuntu son puertos que sólo puedes ser usados por usuarios “privilegiados”, usuarios que tienen privilegios como root. ¿Que quiere decir? Que no todos los usuarios pueden ejecutar aplicaciones que usen puertos por debajo de 1024. La solución es permitir que el usuario propietario del tomcat, pueda usar el puerto 80. Para esto hay que instalar authbind.

Authbind es una utilidad que permite el uso de los puertos menores de 1024 a usuarios que no son root.

El servidor Tomcat, generalmente se instala con el usuario tomcat7. Pero para asegurarte puedes ejecutar la siguiente sentencia:

ps -def |grep java|grep tomcat

Esta sentencia lo que hace es buscar las palabras “java” y “tomcat” en los procesos que se están ejecutando en el Linux.

En mi caso, lo que obtengo es:

tomcat7  30957     1  0 Aug27 ?        00:13:41 /usr/lib/jvm/default-java/bin/java -Djava.util.logging.config.file=/var/lib/tomcat7/conf/logging.properties -Djava.awt.headless=true -Xmx128m -XX:+UseConcMarkSweepGC -Djava.net.preferIPv4Stack=true -Djava.util.logging.manager=org.apache.juli.ClassLoaderLogManager -Djava.endorsed.dirs=/usr/share/tomcat7/endorsed -classpath /usr/share/tomcat7/bin/bootstrap.jar:/usr/share/tomcat7/bin/tomcat-juli.jar -Dcatalina.base=/var/lib/tomcat7 -Dcatalina.home=/usr/share/tomcat7 -Djava.io.tmpdir=/tmp/tomcat7-tomcat7-tmp org.apache.catalina.startup.Bootstrap start

Como puedes ver, el usuario que ejecuta el servidor Tomcat es el usuario tomcat7.
Bueno, pues ya sabemos quien es el usuario. Ahora necesitamos saber cual es el UID de este usuario. Esta información se encuentra en el fichero passwd ubicado en la carpeta /etc. Para visualizarlo puedes utilzar el siguiente comando:

cat /etc/passwd |grep tomcat

Esto es lo que recupero en mi caso:

tomcat7:x:104:107::/usr/share/tomcat7:/bin/false

Los diferentes campos(7) estan separados por dos puntos (:). El UID es el tercer campo, en mi caso, el UID del usuario tomcat7 es 104.

Vamos a instalar ahora authbind (como he dicho anteriormente) y configurar el puerto 80 para que sea accesible por el usuario tomcat7.

sudo apt-get install authbind

Authbind se configura en /etc/authbind/ y dentro de este directorio encontramos tres subdirectorios que permiten granularidad en la configuración. Funciona así.

Paso 1. Authbind busca primero en el directorio /etc/authbind/byport/ ficheros llamados “[num_puerto]” es decir el fichero lleva el nombre del puerto, por ejemplo “80”. Si encuentra el fichero y este fichero es ejecutable por el usuario al que queremos permitir el uso del puerto, entonces se autoriza a ese usuario a usar ese puerto en particular, si no, deniega su uso y pasa al paso dos.

Paso 2. En segundo lugar busca en el directorio /etc/authbind/byaddr/ los ficheros con nombre “[ipaddress]:[num_puerto]”, por ejemplo “192.168.40.125:80”. Si el fichero es ejecutable para el usuario le permite su uso en la dirección especificada. Si no, deniega y pasa al punto tres.

Paso 3. En último lugar busca el en el directorio /etc/authbind/byuid/ un fichero llamado “[uid]”, es decir, con el nombre del número de identificación de usuario al que queremos permitir el uso de puertos. El fichero tiene permisos de lectura, escritura y ejecución para el usuario al que se le permite el uso y 0 permisos para el grupo y otros. Si se encuentra este fichero, entonces lee linea a linea y va autorizando las direcciones y rangos de puertos que pongan en cada linea al usuario con esa uid. Las lineas tiene el formato [ipaddress]/[netmaskprefix]:[puertoinicial],[puertodestino]. Por ejemplo, la linea 192.168.40.125/32:80,100 permite el uso de los puertos 80 a 100 en la dirección 192.168.40.125. Si no se encuentra el fichero o el fichero está vacío, se deniega el uso de puertos definitivamente.

Vamos a ejecutar los siguientes comandos, y hay que hacerlo como root.

sudo touch /etc/authbind/byport/80
sudo chmod 500 /etc/authbind/byport/80 
sudo chown tomcat7 /etc/authbind/byport/80

Lo que hemos hecho es:

  • Crear un fichero llamado 80, en el directorio /etc/authbind/byport/
  • Cambiar los permisos del fichero a 500
  • Cambiar el propietario del fichero. En mi caso, el usuario tiene que ser tomcat7

Con estos tres comandos hemos creado un fichero que cumple el paso 1 descrito anteriormente: un fichero llamado 80 y que es ejecutable por el usuario tomcat7. Con lo que permitimos al tomcat poder usar el puerto 80

Ahora hay que hacer que use IPv4 por defecto (authbind no admite actualmente IPv6).
En mi caso, he modificado el script de arranque del tomcat7 (/etc/init.d/tomcat7). (las lineas en amarillo son las que he añadido)

catalina_sh() {
        # Escape any double quotes in the value of JAVA_OPTS
        JAVA_OPTS="$(echo $JAVA_OPTS | sed 's/\"/\\\"/g')"

        AUTHBIND_COMMAND=""
        if [ "$AUTHBIND" = "yes" -a "$1" = "start" ]; then
                JAVA_OPTS="$JAVA_OPTS -Djava.net.preferIPv4Stack=true"
                AUTHBIND_COMMAND="/usr/bin/authbind --deep /bin/bash -c "
        fi

        # Define the command to run Tomcat's catalina.sh as a daemon
        # set -a tells sh to export assigned variables to spawned shells.
        TOMCAT_SH="set -a; JAVA_HOME=\"$JAVA_HOME\"; source \"$DEFAULT\"; \
                CATALINA_HOME=\"$CATALINA_HOME\"; \
                CATALINA_BASE=\"$CATALINA_BASE\"; \
                JAVA_OPTS=\"$JAVA_OPTS\"; \
                CATALINA_PID=\"$CATALINA_PID\"; \
                CATALINA_TMPDIR=\"$CATALINA_TMPDIR\"; \
                LANG=\"$LANG\"; JSSE_HOME=\"$JSSE_HOME\"; \
                cd \"$CATALINA_BASE\"; \
                \"$CATALINA_SH\" $@"

        if [ "$AUTHBIND" = "yes" -a "$1" = "start" ]; then
                TOMCAT_SH="'$TOMCAT_SH'"
        fi

        # Run the catalina.sh script as a daemon
        set +e
        touch "$CATALINA_PID" "$CATALINA_BASE"/logs/catalina.out
        chown $TOMCAT7_USER "$CATALINA_PID" "$CATALINA_BASE"/logs/catalina.out
        start-stop-daemon --start -b -u "$TOMCAT7_USER" -g "$TOMCAT7_GROUP" \
                -c "$TOMCAT7_USER" -d "$CATALINA_TMPDIR" -p "$CATALINA_PID" \
                -x /bin/bash -- -c "$AUTHBIND_COMMAND $TOMCAT_SH"
        status="$?"
        set +a -e
        return $status
}

Después de todo estos cambios, reinicar el tomcat (ya sabes: stop&start), y que funcione.

sudo /etc/init.d/tomcat7 stop
sudo /etc/init.d/tomcat7 start

En mi caso, y gracias a la ayuda recibida, funcionó.

12