Mostrar vistas diferentes en CodeIgniter 4 segun dispositivo

Publicada el por

Cómo haremos en CodeIgniter 4 para mostrar diferentes vistas segun el dispositivo con el que visitemos la aplicación: móvil, monitor…

Añadimos un nuevo artículo al listado de tutoriales de programación de CodeIgniter 4. Esta vez, hablaremos de la librería User Agent que nos proporciona CodeIgniter 4.

Detectar quién y cómo nos visitan

La clase User Agent nos proporciona información respecto al navegador, móvil o robot que nos visita. Con esta clase podemos acceder a mucha información importante.

Cómo sabemos si nos visitan desde el móvil

Una de las funciones más interesantes es mostrar una vista diferente en monitor de PC a un dispositivo móvil. Así, se tratan los datos de igual manera, pero a la hora de mostrarse por pantalla, tendremos en cuenta si nos visitan desde un navegador o si lo hacen desde un móvil.

Veamos un ejemplo:

Tenemos en nuestra carpeta Views (vistas) los siguientes ficheros:

> Views
  > mobile
    > template_header.php
    > home.php
    > template_footer.php
  > desktop
    > template_header.php
    > home.php
    > template_footer.php

Si os fijáis, hay dos carpetas dentro de views, mobile con todas las vistas que utilizaremos para los móviles y la carpeta desktop para las vistas de los navegadores de ordenador.

Apunte: las carpetas pueden tener el nombre que queráis, no tienen que ser mobile o desktop.

Ahora veamos, dentro del controlador, como llamamos a unas vistas u otras, según cómo nos visiten:

class Home extends BaseController
{
  public function index() {

    [.. más codigo ..]

    if ( $this->request->getUserAgent()->isMobile() ){
	echo view('mobile/template_header');
	echo view('mobile/home');
	echo view('mobile/template_footer');
    } else {
	echo view('desktop/template_header');
	echo view('desktop/home');
	echo view('desktop/template_footer');
    }
  }
}

Cómo sabes si nos visita un robot

Lo mismo que hacemos para detectar si es un móvil o no, también podemos detectas si lo que nos visita es un robot. Includo podríamos trabajar según el robot que nos visite…

if ( $this->request->getUserAgent()->isRobot() ){
  echo "Hola Robot, eres R2D2? ";
}

Coger datos del navegador

La librería User Agent, también nos permite averiguar otros datos que nos pueden interesar como el navegador y su versión:

if ( $this->request->getUserAgent()->isBrowser() ){
  echo "El Sistema operativo es: ". $this->request->getUserAgent()->getPlatform();
  echo "El navegador es: ". $this->request->getUserAgent()->getBrowser();
  echo "la versión es es: ". $this->request->getUserAgent()->getVersion();
}

O también podemos capturar el Agent desde nos visitan, en formato string para poder trabajar:

$agent= $this->request->getUserAgent()->getAgentString();

echo $agent;

// resultado: Mozilla/5.0 (Macintosh; U; Intel Mac OS X; en-US; rv:1.8.0.4) Gecko/20060613 Camino/1.0.2

Espero que este pequeño artículo en forma de guía y ejemplos, os facilite el saber cómo en Codeigniter 4 visualizar diferentes vistas según el dispositivo con el que nos visiten.

Más información


Artículos relacionados: