Personalizando elementos del formulario con CSS

En este artículo quiero tratar el tema sobre cómo ubicar y personalizar los componentes html de un formulario mediante reglas CSS, para mejorar el aspecto visual de nuestra aplicación.
Hoy en día son pocos los sitios que no cuentan con algún formulario, ya sea para autenticación o algún dato que necesita entrar el usuario a la aplicación. Supón que tenemos el siguiente formulario y queremos darle una ubicación específica a las etiquetas con respecto a los campos de texto.

El código HTML del ejemplo anterior es el siguiente:

   1: <form class="my_form">

   2:                 <fieldset>

   3:                     <legend>Alta en el sistema</legend>

   4:                     <label for="nombre">Nombre</label>

   5:                     <input type="text" id="nombre" />

   6:                     <label for="apellidos">Apellidos</label>

   7:                     <input type="text" id="apellidos"/>

   8:                     <label for="dni">DNI</label>

   9:                     <input type="text" id="dni" maxlength="9" />

  10:                     <label for="contrasena">Contraseña</label>

  11:                     <input type="password" id="contrasena" />

  12:                     <input class="btn" type="submit" value="Registrarme" />

  13:                 </fieldset>

  14:             </form>

Si quisiéramos mostrar los <label> encima de los campos de texto aplicando unos estilos sencillos podríamos lograr el efecto mostrado:
Regla CSS:

   1: label { 

   2:      display: block; 

   3:      margin: .5em 0 0 0; 

   4: }

   5: .my_btn { 

   6:       display: block; 

   7:       margin: 1em 0; 

   8: }

Al botón también se le añade una regla CSS para mostrarlo como elemento de bloque y un margen para lograr el efecto deseado.
Si quisiéramos mostrar nuestros elementos <label> al lado izquierdo de los campos de texto, para lograr este resultado:

Código HTML:

   1: <form class="my_form">

   2:             <fieldset>

   3:                 <legend>Alta en el sistema</legend>

   4:                 <div>

   5:                     <label for="nombre">Nombre</label>

   6:                     <input type="text" id="nombre" />

   7:                 </div>

   8:                 <div>

   9:                     <label for="apellidos">Apellidos</label>

  10:                     <input type="text" id="apellidos"/>

  11:                 </div>

  12:                 <div>

  13:                     <label for="dni">DNI</label>

  14:                     <input type="text" id="dni" maxlength="9" />

  15:                 </div>

  16:                 <div>

  17:                     <label for="contrasena">Contraseña</label>

  18:                     <input type="password" id="contrasena" />

  19:                 </div>

  20:                 <input class="my_btn" type="submit" value="Registrarme" />

  21:             </fieldset>

  22:         </form>

A las reglas le agregaríamos:

   1: div { 

   2:      margin: .4em 0; 

   3: } 

   4: div label { 

   5:      width: 25%; 

   6:      float: left; 

   7: } 

   8: div input { 

   9:      width: 70%; 

  10: }

Combinando los ejemplos anteriores con otras reglas CSS además de posicionarlos se pueden cambiar el aspecto y comportamiento visual de los componentes utilizando pseudo-clases después de los selectores.
Espero les haya servido de ayuda.

{ Leer Más }

Alternando bases de datos sobre CodeIgniter

En este artículo mostraré como conectar manualmente a una base de datos, lo que resulta útil por ejemplo cuando se desea alternar entre dos o más bases de datos en una misma aplicación web.

Como es conocido, en el fichero application/config/database.php se especifica el nombre de la BD a la que nos conectaremos y la conexión se hará automáticamente. Pero hay situaciones en las que es posible desear manipular más de una base de datos, por ejemplo supongamos que se tienen dos sitios, uno de administración y otro con el contenido público, y que en determinado momento se desea consultar la BD de administración para mostrar algo en el sitio público.

En este caso lo primero sería modificar el fichero database.php de configuración y adicionar un nuevo grupo (o tantos como se desee), de la siguiente manera:

   1: $active_group = 'public';

   2: $active_record = TRUE;

   3:  

   4: $db['public']['hostname'] = 'localhost';

   5: $db['public']['username'] = 'root';

   6: $db['public']['password'] = '';

   7: $db['public']['database'] = 'my_public_db';

   8: $db['public']['dbdriver'] = 'mysql';

   9: $db['public']['dbprefix'] = '';

  10: $db['public']['pconnect'] = TRUE;

  11: $db['public']['db_debug'] = TRUE;

  12: $db['public']['cache_on'] = FALSE;

  13: $db['public']['cachedir'] = '';

  14: $db['public']['char_set'] = 'utf8';

  15: $db['public']['dbcollat'] = 'utf8_general_ci';

  16: $db['public']['swap_pre'] = '';

  17: $db['public']['autoinit'] = TRUE;

  18: $db['public']['stricton'] = FALSE;

  19:  

  20:  

  21: $db['admin']['hostname'] = 'localhost';

  22: $db['admin']['username'] = 'root';

  23: $db['admin']['password'] = '';

  24: $db['admin']['database'] = 'my_admin_db';

  25: $db['admin']['dbdriver'] = 'mysql';

  26: $db['admin']['dbprefix'] = '';

  27: $db['admin']['pconnect'] = TRUE;

  28: $db['admin']['db_debug'] = TRUE;

  29: $db['admin']['cache_on'] = FALSE;

  30: $db['admin']['cachedir'] = '';

  31: $db['admin']['char_set'] = 'utf8';

  32: $db['admin']['dbcollat'] = 'utf8_general_ci';

  33: $db['admin']['swap_pre'] = '';

  34: $db['admin']['autoinit'] = TRUE;

  35: $db['admin']['stricton'] = FALSE;

Nótese que se tienen dos grupos donde la primera llave especifica el nombre del grupo y la segunda el parámetro (por ejemplo $db['public']['database']… especifica el parámetro “nombre de base de datos” del grupo “public”). En el ejemplo de arriba he creado dos grupos, “admin” y “public”, y al inicio del código he declarado como grupo activo el public.

Automáticamente todas las consultas que se hagan en el modelo se harán sobre la BD “my_public_db” que es la activa por defecto, y se buscarán aquí las tablas, relaciones y consultas especificadas.

Ahora, la forma de cargar una BD determinada es usando la sentencia:

   1: $this->load->database('nombre_de_grupo');

Pero se puede usar de la siguiente forma:

   1: $this->db = $this->load->database(' nombre_de_grupo ', TRUE);

Donde el parámetro TRUE permite devolver el objeto DATABASE, que en este caso lo estamos guardando sobre la misma variable $this->db de CodeIgniter, así en los modelos podremos seguir utilizando esta variable transparentemente sin importar a cuál base de datos estemos conectados.

Sabiendo esto, para alternar momentáneamente entre bases de datos basta con poner a nivel de controladores algo como esto:

   1: $this->db = $this->load->database('admin', TRUE);

   2: $records = $this->my_admin_model->get_example_data();

   3: $this->db = $this->load->database('public', TRUE);

   4: //usar $records

En la primera línea se carga la configuración del grupo “admin” y por tanto la base de datos “my_admin_db”; en la segunda línea se consulta la misma; y en la tercera línea se restablece la configuración del grupo “public” con la base de datos “my_public_db”.

Como alternativa, se pueden conectar simultáneamente varias bases de datos, como ilustra el siguiente ejemplo de la documentación de CodeIgniter:

   1: $DB1 = $this->load->database('grupo_uno', TRUE);

   2: $DB2 = $this->load->database('grupo_dos', TRUE);

Y en lugar de usar el objeto $this->db se usarían los objetos $DB1 y $DB2:

   1: $DB1->query();

   2: $DB1->result();

   3: etc...

Es todo, espera les sea de utilidad e interés el tema.

{ Leer Más }