Experiencias de un informático en software libre: Mi primer formulario en CodeIgniter

En esta nueva entrada, vamos a ver como crear nuestro primer formulario en CodeIgniter.

CodeIgniter, pone a la disposición de los desarrolladores, librerías y helpers para hacernos la vida muchisimo mas fácil. Entre alguna de las librerías propias del framework podemos encontrar: database (para manejo de base de datos) y session (para sesiones); y entre alguno de los helpers: url, form, file, entre muchos otros.

La lista de los helpers y librerías las pueden encontrar en la página del framework www.codeigniter.com y en la guia de usuario http://codeigniter.com/user_guide/.

Por defecto, y para que el framework sea ligero, mucha de estas librerías y helpers no vienen cargados, por lo tanto debemos cargarlas nosotros mismos. Existen ( o conozco dos formas de poder hacerlo); la primera es desde el archivo autoload, ubicado en application/config, hay indicamos que librerías y/o helpers queremos que se carguen al momento de que la pagina sea invocada. La ventaja de esta forma, es que siempre van a estar a la disposición del programador; la desventaja, es que si no siempre se usa, se estarían cargando librerías y helpers innecesarias, haciendo las paginas un poco mas lentas.

La segunda forma, es cargarlas desde el código, y sería de la siguiente forma
$this->load->helper('form');
en este caso estoy cargando el helper form para el diseño de formularios. Las ventajas de esto, es que solo se cargan cuando las necesitemos; desventajas, es que debemos acordarnos de cargarlas.

Ahora empecemos a escribir algo de código.

Primero vamos a nuestro archivo autoload, y cargamos nuestro helper form, esto lo hacemos colocando 'form' dentro del array del helper.

Una vez hecho esto, en el controlador creado en la entrega anterior, creamos una nueva función de nombre formulario, y en ella colocaremos lo siguiente:

public function formulario(){
        $datos['titulo'] = "Prueba en CodeIgniter"; // titulo de la pagina
        $this->load->view('formulario_view',$datos);
    }

Es una función muy sencilla, en donde guardamos como queremos que se llame la página, e invocamos a nuestra vista.

Ahora vamos a crear nuestra vista, que como vimos, se llama formulario_view (ubicada en application/view), y escribiremos lo siguiente:

<html>
    <head>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <title><?php echo $titulo;?></title>

    </head>

    <body>
        <div id="formulario">
        <?php
            $attributes = array('class' => 'form', 'id' => 'usuarios');

            echo form_open('prueba/guardar', $attributes);

            echo "<div>";
            echo form_label("Nombre: ");
            $attributes = array('id' => 'txtnombre', 'size' => '20','name' => 'txtnombre', 'maxlength' => '20');
            echo form_input($attributes);
            echo "</div>";

            echo "<div>";
            echo form_label("Usuario: ");
            $attributes = array('id' => 'txtusuario', 'size' => '20','name' => 'txtusuario', 'maxlength' => '20');
            echo form_input($attributes);
            echo "</div>";

            echo "<div>";
            echo form_label("Clave: ");
            $attributes = array('id' => 'txtclave', 'size' => '20','name' => 'txtclave', 'maxlength' => '20');
            echo form_password($attributes);
            echo "</div>";

            echo "<div>";
            $attributes = array('id' => 'sbGuardar','name' => 'sbGuardar', 'class' => 'boton');
            echo form_submit($attributes,'Guardar');
            echo "</div>";

            echo form_close();
        ?>
        </div>
    </body>
</html>

La parte importante de todo este código, es la creación del formulario mediante el helper form. Como pueden ver es muy sencillo, los valores que se colocan en el arreglo (attributes), son los mismo que colocarían si lo hicieran a mano en html. El primer parámetro que se le pasa al form_open, es a donde va a ir cuando ocurra un submit, en este caso al controlador prueba, función guardar (la cual veremos en la próxima entrega).

Y para darle un poco de color al formulario, creamos una carpeta css en view, y dentro de ella creamos un archivo de nombre estilos.css, y colocamos lo siguiente:

@CHARSET "UTF-8";

body{
    font-family: serif;
    font-size: 12px;
}

#formulario{
    border: 2px solid olive;
    border-radius: 7px;
    width: 300px;
    margin-left: 20px;
    padding: 10px;
}

#formulario div label {
width: 20%;
float: left;
}

/* Estilo para elementos de formulario */

label{
    color:#3a454d;
    margin:15px 10px 0 0;
    display:block;
    float:left;
    font-weight: bold;
}

input {
    border:1px solid #899caa;
    border-radius:3px;
    -moz-border-radius:3px;
    box-shadow:inset 0px 1px 3px #bbb;
    -webkit-box-shadow:inset 0px 1px 3px #bbb;
    -moz-box-shadow:inset 0px 1px 3px #bbb;
    padding:8px;
    font-size:12px;
    color:#3a454d;
    font-weight:bold;
    float:none;
    margin-top: 5px;
}

.boton {
    margin-top: 10px;
    margin-left: 35%;
}

/* ---------------- */

Y para que se incluya este estilo en nuestra pagina colocamos en nuestro head
<link rel="stylesheet" href="../../application/views/css/estilos.css" type="text/css" media="screen">

Y con esto ya tenemos listo nuestro primer formulario de registro.

Experiencias de un informático en software libre

martes, 14 de agosto de 2012

Mi primer formulario en CodeIgniter

2 comentarios: