Todos nos hemos visto en algún momento con la necesidad de recorrer un objeto JSON en PHP.
Imaginar que tenemos una consulta a base de datos y lo que nos devuelve la función es un JSON.
Por ejemplo:
[
{"name":"Madrid","y":"58"},
{"name":"Granada","y":"21"},
{"name":"Segovia","y":"12"},
{"name":"La Rioja","y":"3"},
{"name":"Toledo","y":"3"}
]
Lo primero que tenemos que hacer para trabajar fácilmente con esta estructura en PHP es decodificar el JSON. Para ello usaremos la función json_decode(). El JSON lo tenemos en una variable, donde hemos recogido el resultado de nuestra función que accede a la base de datos.
$resultados = recuperaInfoDeLaBaseDeDatos(.....); esta función la tenéis que desarrollar vosotros.
Después de ejecutar la función, en nuestra variable $resultados tendríamos guardado el objeto JSON. Algo así sería:
$resultados = [{"name":"Madrid","y":"58"},{"name":"Granada","y":"21"},{"name":"Segovia","y":"12"},{"name":"La Rioja","y":"3"},{"name":"Toledo","y":"3"}]
Aplicamos la función json_decode() a nuestra variable $resultados.
$array = json_decode($resultados, true);
Esta función, según la documentación oficial de PHP, lo que hace es «Convierte un string codificado en JSON a una variable de PHP». Básicamente convierte un JSON en un objeto Array.
Y ahora lo que hacemos es recorrer la variable $array.
foreach ($array as $value) {
$cadena = "El nombre de la provincia es: '". $value['name'] ."', y su puntuación es: ". $value['y'] ."},";
print ($cadena);
}
El resultado sería:
El nombre de la provincia es: Madrid, y su puntuación es: 58
El nombre de la provincia es: Granada, y su puntuación es: 21
El nombre de la provincia es: Segovia, y su puntuación es: 12
El nombre de la provincia es: La Rioja, y su puntuación es: 3
El nombre de la provincia es: Toledo, y su puntuación es: 3
El código completo sería:
$resultados = recuperaInfoDeLaBaseDeDatos(.....);
$array = json_decode($resultados);
foreach ($array as $value) {
$cadena = "El nombre de la provincia es: '". $value['name'] ."', y su puntuación es: ". $value['y'] ."},";
print ($cadena);
}
He encontrado esta WEB la traducción al Español del libro “97 Things Every Programmer Should Know”. Que contiene todo tipo de consejos y recomendaciones para los profesionales de la programación informática: refactorización, código limpio, pruebas, aprendizaje contínuo, etc.
Cuando tengas un rato, echa un vistazo, nunca está de más.
Castellano
Inglés
Cuando empiezas a desarrollar sitio en WordPress, te puedes encontrar un poco perdido. No te preocupes, nos pasa a todos.
En mi caso, uno de los temas que más costaba era saber que template se cargaba y por qué.
WordPress tiene una jerarquía de los archivos de plantillas, y es este artículo lo explica bastante bien. http://codex.wordpress.org/es:Template_Hierarchy.
Espero que os sirva de ayuda, a mi me ha aclarado bastante el tema de que página y cuando se carga en WordPress.
Esto seguro que nos ha pasado a muchos cuando empezabamos a trabajar con WordPress.
Tenemos una instalación de wordpress ya terminada, hemos modificado el tema, cambiándole el CSS y algunos php para que quede todo como queremos. Una vez hecho todo, la web queda como queremos y estamos satisfechos y muy contentos por nuestro trabajo.
Pasan algunos meses, y existe una nueva versión del tema. Sin darnos cuenta, actualizamos el tema y todo lo que hemos hecho se pierde. ¿Por qué?.
Bueno, vamos por partes…
Los themes en una instalación de wordpress se guardan dentro de la carpeta /wp-content/themes/ y aquí, por cada tema que tenemos instalado hay una carpeta con su nombre, tal como se muestra en la siguiente imagen.
Como podeis ver, hay dos temas instalados, el Twenty Seventeen, tema que se instala por defecto en el WordPress y el tema Nirvana que es el que tenemos activado.
Si las modificaciones las hacemos en los ficheros del directorio nirvana (el style.css, algún php como el header.php o el footer.php….) cuando se actualiza este tema, todo se pierde. ¿Porqué?. Bueno, de manera rápida, la actualización de un theme, lo que hace es eliminar su directorio de la carpeta themes y descargarse el nuevo, con lo que todo lo que hayamos modificado se pierde.
Y después de esto, tirones de pelo, subimos el nivel de alerta a DEFCON-2, empezamos a buscar copias de seguridad, no las encontramos…… vamos, lo que viene siendo un pandemónium (confusión ruido, y a veces gritos)
Pero para casi todo en esta vida hay solución. Para este problema crearemos un theme child (tema hijo) del theme Nirvana.
Lo primero, es crear una carpeta dentro de la carpeta /wp-content/themes/, para lo cual necesitaremos acceso FTP a nuestro servidor. Lo que yo recomiendo es que el nombre de la nueva carpeta tenga algúna relación con el tema padre. En nuestro ejemplo, el tema padre se guarda en el el directorio nirvana, así que la nueva carpeta la voy a llamar nirvana-child (imaginación al poder 😆 ).
Despues de crear este directorio, hay que crear la hoja de estilos (style.css). Puedes copiar la cabecera del fichero style.css del tema padre y modificar, o crear una desde cero con las lineas justas. Esto último es lo que voy a hacer, y el fichero style.css quedaría así:
/*
Theme Name: Mi tema hijo
Theme URI:
Version: 1.0
Description: Tema hijo del tema Nirvana
Author: Yo mismo
Author URI: http://www.midominio.com
Template: nirvana
*/
@import url("../nirvana/style.css");
/*----------------- Empieza a añadir cambios aquí abajo -----------------*/
¿Que es lo que he cambiado?¿que es lo importante de este fichero?
@import url("../nirvana/style.css");, es donde le indicamos a nuestro tema de donde heredar la hoja de estilos del tema padre. En este ejemplo, le digo que busque en el directorio del tema padre (nirvana)También puedes guardar en el directorio una imagen llamada screenshot.png otra del mismo tamaño que la que tiene el tema padre. Yo recomiendo en este screenshot.png colocar una captura de como luce el tema, pero puedes poner lo que quieras en este png. Esta será la imagen que veras cuando abras el menú de WordPress Aparienica->Temas.
Y lo más importante: Al final hay que activar el tema hijo. Por cierto, hay que tener en cuenta que internamente el tema realmente se sigue llamando nirvana.
Con eso, se ha creado un tema hijo para una instalación de WordPress sin necesidad de saber nada de 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.
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.
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");
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
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="https://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
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 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 |
 |
 |
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
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