Creando los Formularios de un Componente en Joomla!

5 05 2008

Si estamos creando un componente debemos diseñar una manera en que este pueda tratar la información que mostramos (a menos que hagamos un mambot o algo más avanzado en materia de integración con Joomla!). Para esto creamos los formularios que son una de las últimas partes de un módulo básico.

La programación de los formularios no es tán distinta de la de las tablas, en la parte en que nos comunicamos con la base de datos con el objeto database, por ejemplo. Es más que todo la organización que ya llevemos en nuestro componente la que ayudará a que sepamos como armar la lógica del formulario.

En el componente que desarrollé segui la lógica siguiente:

URL: index2.php?option=com_reservations&act=cars&task=edit&id=Mazda+323

Paso 1: Crear una función que seleccione al elemento seleccionado y ejecute la función para mostrar el formulario:

function editCar( $car_model, $option, $act, $task )
{
    global $database;
    if ( $car_model != NULL ) {
        $query = “SELECT * FROM #__reservations_cars WHERE car_model = ‘$car_model’”;
        $database->setQuery( $query );
        $car = $database->loadObjectList();
        $car = $car[0];
    }
    $query = “SELECT id_cartype, cartype_description_en FROM #__reservations_cars_type ORDER BY cartype_description_en ASC”;
    $database->setQuery( $query );
    $car_types = $database->loadObjectList();
    Reservations_HTML::editCars( $car, $car_types, $option, $act, $task );
}

Paso 2: Mostrar el formulario con los datos enviados:

function editCars( $car, $car_types, $option, $act )
{
    mosCommonHTML::loadOverlib();
    ?>
    <script type = "text/javascript">
        function submitbutton(pressbutton) {
            var form = document.adminForm;
            if (pressbutton == 'cancel') {
                submitform( pressbutton );
                return;
            }
            if (form.car_model.value == "") {
                alert("Car Information must have a Car Model");
                return;
            } else {
                submitform( pressbutton );
            }
        }
    </script>
    <table class = "adminheading">
        <tr>
            <th class = "edit">
                Car Repository: <small><?php echo ($car == NULL) ? "New" : "Edit"; ?></small>
            </th>
        </tr>
    </table>
    <br />
    <form action = "index2.php" enctype = "multipart/form-data" method = "post" name = "adminForm">
        <?php if ( $car->car_model ) { ?>
        <input name = "old_car_model" type = "hidden" value = "<?php echo $car->car_model; ?>" />
        <?php } ?>
        <table class = "adminform">
            <tr>
                <th colspan = "4">Item Details</th>
            </tr>
            <tr>
                <td width = "75">Car Model:</td>
                <td width = "250"><input class = "text_area" maxlength = "128" name = "car_model" size = "30" type = "text" <?php if ( $car->car_model ) { ?>value = "<?php echo $car->car_model; ?>"<?php } ?> /></td>
                <td width = "75">Car Type:</td>
                <td>
                    <select class = "inputbox" name = "car_type">
                    <?php
                        for ($i = 0, $n = count( $car_types ); $i < $n; $i++) {
                            $cartype = &$car_types[$i];
                            mosMakeHtmlSafe($cartype);
                        ?><option <?php if ( $car->car_type == $cartype->id_cartype ) { ?> selected = “selected” <?php } ?> value = “<?php echo $cartype->id_cartype; ?>”><?php echo $cartype->id_cartype ?></option><?php
                        }
                    ?>
                </select>
            </td>
        </tr>
        <tr>
            <td>Car Published:</td>
            <td>
                <select class = “inputbox” name = “car_published”>
                    <option <?php if ( $car->car_published === 1 ) { ?> selected = “selected” <?php } ?> value = “1″>Published</option>
                    <option <?php if ( $car->car_published === 0 ) { ?> selected = “selected” <?php } ?> value = “0″>Unpublished</option>
                </select>
            </td>
            <td>Car Preview:</td>
            <td>
                <input type = “file” name = “car_preview” />
            </td>
        </tr>
        <tr>
            <td colspan = “4″>
                Car Description (required): <br /><br />
                <?php
                    // parameters : areaname, content, hidden field, width, height, rows, cols
                    editorArea( ‘car_description’, $car->car_description, ‘car_description’, ‘100%;’, ‘350′, ‘75′, ‘20′ ) ;
                ?>
            </td>
        </tr>
    </table>
    <input name = “option” type = “hidden” value = “<?php echo $option;?>” />
    <input name = “act” type = “hidden” value = “<?php echo $act;?>” />
    <input name = “task” type = “hidden” value = “” />
    <input name = “boxchecked” type = “hidden” value = “0″ />
    <input name = “hidemainmenu” type = “hidden” value = “0″>
    <input name = “<?php echo josSpoofValue(); ?>” type = “hidden” value = “1″ />
    </form>
    <?php
}

Es importante que los últimos elementos INPUT estén presentes, pues estos preservan el nombre del módulo, el ACT y el TASK pues todo va al archivo INDEX2.PHP vía POST. Los demás sigo sin comprender cual es su cometido, pero es mejor dejarlo.

Asi mismo, tambien es posible controlar y validar en la misma página del formulario que los datos ingresados son correctos. Dependiendo del botón presionado, así la función actuará. En este ejemplo la función JavaScript submitbutton permite controlar el envio de los datos a la siguiente función y validar que un valor dentro de los datos requeridos, haya sido ingresado.

Paso 3: La función receptora se encarga de tratar los datos ingresados y de redireccionar a donde es debido.

Como podemos darnos cuenta, es bastante sencillo construir un componente de Joomla!. En la siguiente parte del tutorial, veremos el manejo de parámetros nativo en Joomla!, que aunque no implemente en el componente que cree, si es posible de utilizar para crear áreas de configuración con una cuantas líneas del archivo de instalación.