Subdominios del estilo de Basecamp con CodeIgniter

CodeIgniter es un marco PHP sencillo y ligero que se utiliza para crear aplicaciones web potentes. Hoy vamos a hacer algo ingenioso: combinaremos nombres de usuario y subdominios para hacer que la experiencia del usuario sea más cohesiva.

Si estás un poco confundido, esta función les permite a los usuarios acceder a sus cuentas escribiendo una URL personalizada, que se asigna a su nombre de usuario, como harbinger.yourapp.com.

Visión general

En este tutorial, vamos a crear tanto una vista frontal como una vista de aplicación de fondo, similar a la configuración utilizada en Basecamp, donde visitar basecamphq.com muestra la página de inicio, pero al visitar un subdominio muestra la página de inicio de sesión.

Usaremos la dirección ficticia nettutsapp.com y crearemos una página de "panel de control" de muestra; sin embargo, podrías incorporar esto en un proyecto existente con relativa facilidad.

Antes de comenzar, asegúrate de tener un servidor web con PHP instalado. También es necesario descargar CodeIgniter; en el ejemplo, estoy usando CodeIgniter 2.0, pero el código debería funcionar en 1.7.2. ¡Entonces empecemos!

Paso 1: Configuración de DNS

Primero, debemos configurar nuestra configuración de DNS para que todos los subdominios se resuelvan en una sola dirección. Si estás trabajando en un servidor en vivo, entonces tendrás que cambiar la configuración de tu DNS con la compañía que maneja tu DNS. Esto es más comúnmente tu host web o registrador de dominio.

Para cubrir cada configuración en este tutorial tomaría demasiado tiempo. En su lugar, pídele ayuda a tu host para configurar subdominios comodín. Podrías esperar agregar algo como la línea a continuación a tu configuración de DNS.

*.nettutsappapp.com.      IN  A    91.32.913.343

En cambio, si estás trabajando en un servidor local, agregar un subdominio comodín al archivo hosts es bastante complicado. Lo que prefiero hacer es agregar entradas individuales para propósitos de prueba. Estos pueden ser eliminados después de que hayas terminado. Para nuestro dominio, necesitamos agregar cuatro entradas de la siguiente manera:

• 127.0.0.1 nettutsapp.com
• 127.0.0.1 user1.nettutsapp.com
• 127.0.0.1 user2.nettutsapp.com
• 127.0.0.1 user3.nettutsapp.com

Configuración de hosts de Mac

Para hacer esto en una Mac, abre Terminal y escribe sudo nano / etc / hosts. Usa las teclas de flecha para moverte a la parte inferior del documento y agrega las entradas a la parte inferior del archivo. Una vez hecho esto, presiona Ctrl + X e Y para confirmar el guardado.

Configuración de hosts de Windows

Si estás utilizando Windows, ve al directorio C: \ Archivos de programa \ system32 \ drivers \ etc y abre el archivo de hosts en el Bloc de notas o en tu editor de texto preferido. Agrega cuatro entradas, que se muestran arriba, y guarda el archivo.

Si has realizado cambios de DNS en un servidor activo, tomará un tiempo antes de que notes algún efecto. Si realizaste cambios en tu archivo de hosts, los cambios serán inmediatos.

Paso 2: Configuración de Apache

El objetivo aquí es configurar dos hosts virtuales en la configuración de Apache: uno sirve para la página de inicio (página de inicio de Basecamp) y el otro para la página que se ve cuando se accede a través de un subdominio (página del panel).

Para agregar nuevas entradas, debes abrir el archivo httpd.conf, que se encuentra en el directorio de instalación de Apache. Se encuentra a menudo en la carpeta bin / apache / conf. Sin embargo, dependiendo de la configuración de tu servidor, la ubicación puede variar.

Una vez abierto, debes agregar las dos entradas, que se muestran a continuación. Asegúrate de cambiar el DocumentRoot a una ubicación de tu elección, que hayas creado.

Nota: Recuerda el comodín y la ruta diferente del directorio en el segundo VirtualHost.

Usuarios de WAMP: recomiendo leer esta publicación, que describe cómo configurar VirtualHosts. También puedes encontrar problemas de permiso; así que recomiendo colocar tus directorios de VirtualHost dentro del directorio www.

	<VirtualHost *:80>
		DocumentRoot "/Users/densepixel/Sites/MAMP PRO/nettutsappfront"
		ServerName nettutsapp.com
		ServerAlias nettutsapp.com
	
		<Directory "/Users/densepixel/Sites/MAMP PRO/nettutsappfront">
			Options -Indexes 
			Options FollowSymLinks
			AllowOverride All
		</Directory>
	</VirtualHost>
	
	<VirtualHost *:80>
		DocumentRoot "/Users/densepixel/Sites/MAMP PRO/nettutsapp"
		ServerName nettutsapp.com
		ServerAlias *.nettutsapp.com
	
		<Directory "/Users/densepixel/Sites/MAMP PRO/nettutsapp">
			Options -Indexes 
			Options FollowSymLinks
			AllowOverride All
		</Directory>
	</VirtualHost>

Una vez que hayas guardado el archivo, debes reiniciar Apache para que los cambios surtan efecto.

Asegúrate de haber creado los directorios que especificaste en el archivo httpd.conf antes de iniciar el servidor.

Paso 4: Probando la configuración de nuestro servidor

Antes de probar la configuración, coloca una página html básica en cada uno de los directorios que creaste anteriormente. Tal vez agrega una sola línea de texto a cada uno, para que puedas diferenciarlos. He copiado un ejemplo para que lo uses.

<!DOCTYPE html>
<html lang="">
<head>  
	<meta charset="utf-8">
	<title>NetTuts App Front</title>
</head>
<body>
	NetTutsApp Front
</body>
</html>

A continuación, abre tu navegador favorito y primero verifica la dirección nettutsapp.com. Si todo funciona, deberías estar mirando la página que colocaste en el directorio 'nettutsappfront'.

A continuación, comprueba un subdominio, por ejemplo. user1.nettutsapp.com; Esto debería mostrarte la otra página que creaste en el directorio.

Puedes continuar para verificar los otros subdominios que especificaste en el archivo de hosts, que deberían mostrar la página guardada en nuestro directorio.

Paso 5: Instalación de CodeIgniter

Este tutorial asume que sabes cómo instalar CodeIgniter. Si no es así, deberías echar un vistazo a este video tutorial de Jeffrey Way, que explica el proceso en detalle.

Coloca los archivos CodeIgniter en nuestro directorio después de eliminar la página html que creamos anteriormente. Si estás utilizando CodeIgniter 1.7.2, es posible que desees sacar la carpeta de la aplicación de la carpeta del sistema.

Prueba la instalación explorando la URL user1.nettutsapp.com, y deberías ver la Página de bienvenida de CodeIgniter.

Paso 6: Configuración de CodeIgniter

Configura CodeIgniter como lo harías normalmente, como se describe en este tutorial. Es posible que desees eliminar el index.php de la URL, cargar automáticamente algunas bibliotecas o ayudantes, etc. Para los fines de este tutorial, necesitamos cargar automáticamente la biblioteca database y el ayudante de url. Abre el archivo autoload.php en el directorio de config y agrega las entradas relevantes.

También necesitamos cambiar el controlador predeterminado a uno que haremos, llamado panel de control. Este valor se puede cambiar dentro del archivo /config/routes.php.

Base_url

Para los subdominios de usuario, debemos hacer que la variable base_url sea dinámica, ya que la aplicación recibirá solicitudes de varios subdominios potenciales.

La forma más sencilla de hacerlo es mediante el uso de la variable HTTP_HOST. Abre el archivo config.php, busca la variable $ config ['base_url'] y reemplázala con el siguiente código:

if(isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == "on"){$ssl_set = "s";} else{$ssl_set = "";}
$config['base_url'] = 'http'.$ssl_set.'://'.$_SERVER['HTTP_HOST'];

Este código permite las conexiones HTTPS; sin embargo, si nunca piensas utilizar HTTPS, puedes simplificarlo a base_url = $ _SERVER ['HTTP_HOST'].

Configuración de la base de datos

Antes de continuar y agregar la configuración de la base de datos en nuestra aplicación CodeIgniter, debemos crear tanto la base de datos como una tabla de muestra.

Esta aplicación de ejemplo utiliza una base de datos y una tabla. Esta tabla contendrá todos los subdominios asignados actualmente, y cierta información básica sobre ellos. Si has decidido utilizar este código en tu propia aplicación, generalmente deberás asignar varios usuarios a un solo subdominio, sin embargo, el esquema de la base de datos está fuera del alcance de este tutorial.

La tabla se llama nt_subdomains, dentro de la base de datos ntapp, y tiene cuatro campos:

• subdomain_id(primary, auto_increment)
• subdomain_name
• user_fname
• user_sname

También he completado la tabla con dos registros, que coinciden con los subdominios que hemos agregado a nuestro archivo de hosts:

Ahora podemos abrir la configuración de la base de datos, el archivo que se encuentra en /application/config/database.php, y editar los siguientes valores para que coincidan con tus ajustes de configuración personales.

$db['default']['hostname'] = 'localhost';
$db['default']['username'] = 'root'; //MAMP default
$db['default']['password'] = 'root'; //MAMP default
$db['default']['database'] = 'ntapp';

Y hemos terminado de configurar nuestra instalación CodeIgniter. Vamos a empezar a usar los subdominios en nuestra aplicación.

Paso 7: Creando Nuestros Controladores y Vistas

Para esta aplicación, vamos a crear dos controladores. El primero es un controlador de error, que muestra un error si el subdominio no se ha registrado para su uso en la aplicación. El otro controlador es nuestro controlador de tablero principal, que es lo que el usuario ve si el subdominio se ha agregado a nuestra base de datos.

Controlador de error

Sigamos adelante y creamos nuestro controlador de errores. Primero, crea un nuevo archivo en el directorio / application / controllers, y llámelo error.php. Nota: el nombre del archivo es importante

<?php

class Error extends Controller {

	function Error()
	{
		parent::Controller();
	}

	function index()
	{
		$this->load->view('error');
	}
}

Agrega el código de arriba a nuestro nuevo archivo error.php. La función de index carga una vista llamada 'error', que crearemos más adelante.

Controlador de tablero

Ahora necesitamos crear el controlador del tablero principal, que se cargará cuando un usuario ingrese a uno de los subdominios. El controlador luego verificará si el subdominio ha sido registrado y lo redireccionará según sea necesario. Agregaremos este código más adelante, pero primero, debemos crear el controlador básico.

Crea un nuevo archivo dentro del directorio de los controllers y asígnale el nombre dashboard.php. Dentro de este archivo, necesitamos crear el controlador y cargar la vista del tablero. Copia el código de abajo y guarda el archivo.

<?php

class Dashboard extends Controller {

	function Dashboard()
	{
		parent::Controller();
	}

	function index()
	{
		$this->load->view('dashboard');
	}
}

Vista de error

La página de error se mostrará cuando un usuario intente acceder a un subdominio, que la aplicación no ha registrado para su uso. Para los fines del tutorial, simplemente crea una página básica, mostrando el mensaje Subdominio no registrado. Agrega el código a continuación a un nuevo archivo llamado error.php y guárdalo dentro de la carpeta de aplicaciones / vistas.

<html>
<head>
	<title>Application Error : Nettuts App</title>
</head>
<body>

	<h1>Nettuts Application Error</h1>

	<p>Subdomain Not Registered</p>

</body>
</html>

Vista de tablero

Por el momento, solo crearemos una página de tablero básico. Puedes usar la misma estructura que la vista de error y simplemente cambiarla para leer Nettuts Dashboard, o algo parecido. Guarda la página como dashboard.php, dentro de la carpeta de aplicaciones / vistas.

Prueba las dos vistas visitando las URL:

• user1.nettutsapp.com/index.php/error
• user1.nettutsapp.com/index.php/dashboard

¿Funciona? Vamonos.

Paso 8: Extendiendo nuestro controlador de tablero (Parte 1)

El siguiente paso es extraer el nombre del subdominio en nuestro controlador para que podamos usarlo en una consulta de base de datos.

Vamos a insertar nuestro código de verificación de subdominio en la función de construct dentro del controlador del tablero. (Debajo de parent::Controller()). Esto significa que el subdominio se verificará cuando se acceda a cualquiera de las funciones dentro del controlador del tablero.

La forma más fácil de extraer el nombre del subdominio es usar la función de explode de PHP y configurar el delimitador en '.' Como solo necesitamos la primera parte, podemos dividirla en dos partes y luego asignar la primera parte (el nombre del subdominio) a una variable.

Para probar esto, podemos hacer echo de la variable en el controlador. Observa el código a continuación:

<?php

class Dashboard extends Controller {

	function Dashboard()
	{
		parent::Controller();
		
		$subdomain_arr = explode('.', $_SERVER['HTTP_HOST'], 2); //creates the various parts
		$subdomain_name = $subdomain_arr[0]; //assigns the first part
		echo $subdomain_name; // for testing only
	}


}

Accede a las URL de sus subdominios y verás el subdominio correcto en tu página, como se muestra a continuación.Nota: Puedes eliminar la declaración de eco ahora.

Ahora que tenemos acceso al nombre del subdominio en nuestro controlador, podemos verificar si se ha agregado la tabla que creamos anteriormente.

Utilizaremos la clase ActiveRecord de CodeIgniter para construir nuestras consultas, que verificará la tabla para el subdominio al que se accede. Si está presente, el usuario podrá acceder a la página del panel. Si, por otro lado, no se ha ingresado al subdominio, entonces se les niega el acceso y luego se los redirige a la página de error que creamos anteriormente.

Para este tutorial, no usaremos modelos, ya que hace que el tutorial sea mucho más fácil de seguir. CodeIgniter es bastante flexible ya que no te obliga a usarlos.

Primero, debemos ensamblar la consulta como se muestra a continuación. Este código solo funcionará en PHP5, ya que utiliza el encadenamiento de métodos; Sin embargo, puedes cambiarlo a tu gusto.

// adds on from rest of construct //
$this->db->from('nt_subdomains')->where('subdomain_name', $subdomain_name);
$query = $this->db->get();

Podemos usar la función CodeIgniter row () para verificar si ese subdominio existe en la tabla. Si no es así, entonces necesitamos usar la función de redirección para redirigir a nuestros usuarios al controlador de error. La siguiente parte del código está abajo:

// adds on from previous code //
if($query->num_rows() < 1)
		{
		redirect ('error');
		}

Probemos esto accediendo a user1.nettutsapp.com, que debería dirigirte a la página del panel. Ahora, intenta user3.nettutsapp.com, que debería redirigirte a la página de error, ya que no se ingresó en la tabla.

Paso 9: Extendiendo nuestro Controlador de Tablero (Parte 2)

Ahora podemos usar la información de la tabla para mostrar información específica para cada subdominio.

Agregaremos a la función de index en nuestro controlador de tablero. Primero, copia el código del nombre del subdominio y la consulta de la base de datos que usamos antes.

function index()
	{
		$subdomain_arr = explode('.', $_SERVER['HTTP_HOST'], 2);
		$subdomain_name = $subdomain_arr[0];
		
		$this->db->from('nt_subdomains')->where('subdomain_name', $subdomain_name);
		$query = $this->db->get();
		
	}

Estamos utilizando la función row () de CodeIgniter para recuperar el resultado de la consulta. La función de row devuelve una sola fila de resultados, lo que significa que no necesitamos usar un bucle foreach; es innecesario

// adds on from rest of index function //
$subdomain_info = $query->row();

Luego, asigna los valores de columna de user_fname y user_sname a la array, $ data, que luego se pasa a la view.

$data['fname'] = $subdomain_info->user_fname;
$data['sname'] = $subdomain_info->user_sname;
$this->load->view('dashboard', $data);

Podemos usar estos valores dentro de nuestra vista usando las variables $ fname y $ sname. Abre la vista del tablero y edítala para leer:

	<p>Welcome to your dashboard 
	<b><?php echo $fname; ?> <?php echo $sname ?></b>
	</p>

¡Y hemos terminado! Vamos a probarlo.

Paso 10: Pruebas

Prueba todas las URL y, con suerte, si todo fue de acuerdo con el plan, los resultados deberían ser los siguientes:

• nettutsapp.com → Front End Page
• user1.nettutsapp.com → Panel de control (John Doe)
• user2.nettutsapp.com → Panel de control (Steve Smith)
• user3.nettutsapp.com → Página de error

Controlador y código de vista

Aquí está la referencia completa utilizada para nuestros controladores y vistas:

Controlador de tablero

<?php

class Dashboard extends Controller {

	function Dashboard()
	{
		parent::Controller();
		
		$subdomain_arr = explode('.', $_SERVER['HTTP_HOST'], 2);
		$subdomain_name = $subdomain_arr[0];
		
		
		$this->db->from('nt_subdomains')->where('subdomain_name', $subdomain_name);
		$query = $this->db->get();
		
		if($query->num_rows() < 1)
		{
		redirect ('error');
		}

	}

	function index()
	{
		$subdomain_arr = explode('.', $_SERVER['HTTP_HOST'], 2);
		$subdomain_name = $subdomain_arr[0];
		
		$this->db->from('nt_subdomains')->where('subdomain_name', $subdomain_name);
		$query = $this->db->get();
		
		$subdomain_info = $query->row();
		$data['fname'] = $subdomain_info->user_fname;
		$data['sname'] = $subdomain_info->user_sname;
		$this->load->view('dashboard', $data);
	}
}

Controlador de error

<?php

class Error extends Controller {

	function Error()
	{
		parent::Controller();
	}

	function index()
	{
		$this->load->view('error');
	}
}

Vista de tablero

<html>
<head>
	<title>Dashboard : Nettuts App</title>
</head>
<body>

	<h1>Nettuts Dashboard</h1>

	<p>Welcome to your dashboard 
	<b><?php echo $fname; ?> <?php echo $sname ?></b>
	</p>
	
</body>
</html>

Vista de error

<html>
<head>
	<title>Application Error : Nettuts App</title>
</head>
<body>

	<h1>Application Error</h1>

	<p>Subdomain Not Registered</p>

</body>
</html>

Conclusión

Por supuesto, este tutorial describe solo una forma de obtener esta ingeniosa funcionalidad. Estoy seguro de que hay muchos más; así que siéntete libre de participar con tus pensamientos y opiniones en la sección de comentarios a continuación.