Sesiones en PHP $_SESSIONS[];

Tener siempre en cuenta la experiencia de usuarios.

Imaginaos un formulario con muchos campos para rellenar. El usuario los ha rellenado todos, y al presionar el botón de enviar, resulta que hay un error en un campo y ha de volver a rellenar el formulario.

Ningún campo ha sido guardado de forma temporal y por lo tanto al refrescar la página los campo vuelven a estar vacíos y el usuario ha de volver a rellenar cada uno de los campos del formulario.

Esto sucede sobre todo si se validan los campos en el lado del servidor, por lo que es recomendable validarlos del lado del cliente con JavaScript, y prevenir que la página envíe los datos hasta que no estén todos los campos bien rellenados.

Vale, si somos de los que validamos en el servidor, ya sea por exigencias o por el método de trabajo que se requiera, existe un método muy sencillo para que estos datos no se pierdan hasta que no sean todos los campos validados y se ejecute la función de envío de los datos al servidor.

El recurso es trabajar con sesiones ($_SESSIONS[] ), pues puedes guardar los campos del formulario en la sesión del usuario y hasta que no se envíen los datos correctamente, éstos permanecerán almacenados.

En el ejemplo siguiente vemos como obtener los datos por método POST (sirve para ambos, GET y POST), los guardamos en variables. Estas variables las almacenamos en Elementos de la Sesión, y trabajamos con ellos.

Una vez que hemos realizado las funciones que se ha de ejecutar con estos datos, pues los eliminamos. Dejando la sesión libre de valores innecesarios.

if($_SERVER['REQUEST_METHOD'] == 'POST') {
    // Obtenemos los datos y guardamos en variables
    $m_name = strip_tags($_POST['idName']);
    $m_email = strip_tags($_POST['idEmail']);
    $m_tel = strip_tags($_POST['idTelefono']);

    // Ahora guardamos los datos en variables de la sesión
    $_SESSION['m_name'] = $m_name;
    $_SESSION['m_email'] = $m_email;
    $_SESSION['m_telefono'] = $m_tel;

    // Ejecutamos el las funciones con estos valores
    echo $_SESSION['m_name'];
    echo $_SESSION['m_email'];
    echo $_SESSION['m_telefono'];

    // Eliminamos las variables de sesión y sus datos
    unset($_SESSION['m_name']);
    unset($_SESSION['m_email']);
    unset($_SESSION['m_telefono']);
}

En el ejemplo anterior no están las validaciones de los campos del formulario, crearé un post sobre cómo hacerlo desde el backend (próximamente).

Espero que hayan entendido el procedimiento, como ven es muy sencillo, y sólo es cuestión de usar una variables (las de sesión) en vez de las otras (las de captura de los datos por método post).

También podemos convertir las de sesión en variables, por si nos es más cómodo trabajar con ellas:

$name = $_SESSION['m_name'];
$mail = $_SESSION['m_email'];
$tel = $_SESSION['m_telefono'];

Bueno gente espero que lo usen y le den buena práctica.

Mis Scripts más usados en PHP

Función para imprimir los errores cuando validamos campos en los formularios.

Lo pimero es la función:

function resultBlock($errores){
		echo "<div id='error' class='alert alert-danger text-center' role='alert'>		
		<a href='#' onclick=\"$('#error').addClass('d-none')\">[X]</a>
		<ul>";		
		echo "<li>".$errores."</li>";		
		echo "</ul>";
		echo "</div>";
}

Luego el uso de la variable $errores.

if (filter_var($email, FILTER_VALIDATE_EMAIL)) {
        echo "El email es correcto";
    } else {
        $errores = "El email no es válido.";
    }

Ahora sólo nos toca ejecutar el código que estamos creando y mostrar los errores en caso que existan. Para ello validamos que no hay errores haciendo uso de if() {} y los errores los mostramos si existe alguno con else {}.

if($errores < 0) { 
//codigo a ejecutar sin no hay errores<br>
} else {
//mostramos los errores
echo resultBlock($errores); 
}

Y por último el css. Que en mi caso he usado bootstrap, así que ya lo tengo pero podéis poner el que ustedes quieran.

Listo!

Crear una ventana modal sólo con CSS

Hay varias formas de crear una ventana modal o pop-up, o cómo quieras llamarlo.

Se puede hacer con herramientas de javascript, usando jQuery o simplemente con CSS. Vamos a hacer con CSS puro y después podemos introducir algo de JavaScript si por ejemplo usas BootsStrap.

Creamos la llamada a la venta modal con un enlace <a href=»»></a>.

<a href="#miModal">Abrir Ventana</a>

Ahora creamos el código que mostrará la modal.

<div id="miModal" class="modal">
      <div class="modal-content">
        <a href="#" class="close">X</a>
        <h2>Contenido del Modal</h2>
        <h4>¡Pon ritmo a la vida!</h4>
      </div>  
</div>

Pues ya tenemos nuestra ventana modal. Vamos a darle forma con CSS.

.modal {
    background-color: rgba(0,0,0,.8);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    transition: all 1s;
    z-index: 9;
    padding-top: 2em;
}

Si te das cuenta el elemento opacity está en 0, por lo que no se muestra. Para conseguir que se vea usamos la pseudo-clase :target que se lo aplicamos al enlace que llama a la modal. Le aplicamos la pseudo-clase a través del id de la modal con el elemento css de almohadilla #. Así:

#miModal:target {
    opacity: 1;
    pointer-events: auto;
}

Y hasta aquí estaría todo para hacer que funcione nuestra modal. Ésta se cerrara cuándo le des a la «X» que es un enlace que no lleva a ninguna parte.

Es aquí cuando podrías tener algún problema dependiendo de para dónde y cuándo estés utilizando este código. Lo que quiero decir es que al cerrar la modal, si estás en una página dentro de tu web, la url quedaría así: https://www.tupaginaweb.com/pagina#

Vale no hay ningún problema por esto, puedes seguir navegando en la página si, pero si estuvieras en una web-app, o en la página tienes un formulario o acciones que pase los valores por el método GET, la url ya te ha cambiado por lo que no va a funcionar bien.

¿Como lo podemos arreglar? pues con JavaScript en el enlace de cierre del modal, introducimos la función de JavaScript onclick(); y le añadimos una clase css que contenga display: none;

Añadimos la clase en nuestra hoja de CSS si aún no la tienes creada:

.noShow {
  display: none;
}

Listo ahora le agregamos la función al elemento de cierre <a href=»»></a>

<a href="#" class="close" onclick="$('#miModal').addClass('noShow')">X</a>

Listo. Ahora ya está todo.

Tips: si estás usando Bootstrap, este framework ya viene con esta clase por defecto, se llama «d-none», así que no hace falta que te creas la clase «noShow», usa la que trae el Bootstrap por defecto y no la lies. 😉

Puedes ver un ejemplo pinchando AQUÍ

X

Contenido del Modal

¡Pon ritmo a la vida!

Por cierto, si trabajas en wordpress espero que ya sepas como introducirlo, si no, como se muestra en la imagen destacada de este artículo de «wordpress» usa el bloque html para crear tu modal.

Sacar información del usuario registrado.

Se me ha presentado un caso, en el que tenía que imprimir el nombre del usuario registrado en wordpress.

WordPress cuenta con un número de ‘roles’ para los nuevos usuarios, entre ellos están el de Suscriptor, Colaborador, Autor, Editor y Administrador. A fecha de hoy estos son los que vienen por defecto en nuestro WordPress, aunque hay scripts para añadir o crear diferentes tipos de roles, aunque eso es ya otra historia, y no es a lo que voy.

¿Qué sería lo importante saber en estos casos? Bueno, pues los tipos de datos o registros que se hacen en la base de datos del WordPress. Si teneis acceso a vuestra base de datos estos se encuentran en la tabla de (wp_)users.

¿Qué es lo que se guarda en ella? Pues las columnas son, el ID, user_login, user_pass, user_nicename, user_email, user_registered, user_activation_key, user_status y el diplay_name.

El user_login y el display_name son los mismos, después está también el user_nicename que es el alias que se asigna cuando uno se registra.

A mí lo que me interesa, es mostrar en unas ciertas páginas sólo a los usuarios registrados en WordPress. Y en esta página mostrarle el nombre de usuario o si quisiera, todos los datos que ha rellenado a la hora de registrarse, pues ya sabemos que columnas son las que usa WP y le podremos pedir que nos muestre esos datos o valores.

Bien, en mi caso me he creado una plantilla para esta página. Así he comienzo el archivo.php con

<?php
/**
 * Template Name: usuarios 
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
 *
 * @package Go
 */

get_header();

// Start the Loop.
while ( have_posts() ) :
	the_post();
?>
<div class="content-area">

<?php 
the_content(); 

El nombre que le he puesto ‘Template Name’ es ‘usuarios’, así que cuando esté creando la página nueva en WP me aparecerá este nombre en la sección de ‘plantillas’.

El get_header(); por supuesto es para insertar los contenidos del archivo header. php, e iniciamos el Loop del WP por si queremos mostrar el contenido de la nueva página que creamos en el wordpress.

Vale, creo que me he enrollado, vamos al asunto.

Lo primero que debemos de hacer es comprobar si el usuario está registrado, el role o permiso que tiene el usuario es el de suscriptor, lo haremos con la función is_user_logged_in()

if ( is_user_logged_in() ) { 
   $args1 = array(
   'role' => 'subscriber',
   'orderby' => 'user_nicename',
   'order' => 'ASC'
);
$subscribers = get_users($args1);

.....

la función get_users() nos devolverá al usuario que esté en ese momento logeado, y le asigno una variable llamada $subscribers a ese arreglo (array).

Para rescatar el valor ejecuto un foreach()

foreach ($subscribers as $user) {
                            
    ?>

   <p><?php echo $user->display_name; ?></p>

   <?php
}

La variable $user nos devolverá los valores que obtiene de la base de datos, entonces que es lo que lo que queremos de la base de datos, osea del usuario, pues en mi caso es el display_name nada más sencillo que indicárselo al $user

Terminamos la función indicando que, si el usuario no está registrado le mostramos un mensaje.

} else {
                    
    echo "<h3>Tienes que estar registrado.</h3>";
                        
}
// Y continuamos con el resto de la plantilla

Listo, ya hemos impreso el nombre de nuestro usuario registrado.

Embed un archivo PDF

En el bloque de HTML escribir lo siguiente:

<object style="width:800px;height:400px;border:1px solid black;" data="
http://tu-bonita-pagina.com/url/archivo.pdf
?#zoom=85&amp;scrollbar=0&amp;toolbar=0&amp;navpanes=0" type="application/pdf">
<embed src="
http://tu-bonita-pagina.com/url/archivo.pdf
?#zoom=85&amp;scrollbar=0&amp;toolbar=0&amp;navpanes=0" type="application/pdf">
</object>

Y listos, de todas las formas esta es la que más me gusta, luego también puedes crear por un bloque con dos columnas, y añadir una imagen e incrustrar «archivos», colocamos el PDF ahí y en la opción del bloque lo ponemos como multimedia, eliminar el botón de descarga y activar que se habra en otra ventana, por lo que se leerá en otra ventana del navegador que use el lector en el formato pdf.