En éste blog se van a realizar diferentes publicaciones para demostrar como se ahorra tiempo con ésta metodología.
En éste caso, queremos mostrar como realizar acciones dinámicas en un formulario. Como ejemplo tenemos una empresa de turismo que desea registrar los pedidos. Cuando se ingresa un nuevo pedido, dependiendo del servicio y de la cantidad de integrantes nos da el costo total. La figura 1 muestra el resultado deseado y al final un pequeño video para verlo en funcionamiento.
Primero creamos el proyecto
Luego creamos el formulario "Servicios", posee dos campos, uno para registrar en nombre del servicio y el otro el costo.
Para el formulario "Pedidos" tenemos:
Nombre | sirve para identificar el pedido. |
---|---|
Descripción | para realizar las aclaraciones que crea conveniente. |
Servicio | se puede seleccionar de los servicios ingresados en el formulario Servicios. |
Costo | éste campo sirve para guardar un historial de los costos en los momentos que se realizaron los pedidos. |
Fecha | sirve para cargar la fecha del pedido. |
Integrantes | se ingresa la cantidad de integrantes que van a utilizar el servicio. |
Total | si bien éste valor se puede calcular automáticamente por medio del costo del servicio y la cantidad de integrantes (por lo tanto no sería necesario cargarlo en la base de datos), lo vamos a registrar para el caso en que el usuario que carga la información quiera modificar el total y luego aclarar en la parte de descripción. |
Creamos un reporte para Pedidos.
Creamos otro reporte para servicios.
Ajustamos el menú
Cargamos un par de grupos de usuarios, para diferenciar permisos.
Cargamos un par de usuarios como ejemplo, un para usuario corriente y otro para administrador.
Luego de descargar el proyecto, cuando lo publicamos en nuestro computador o servidor está casi completo como lo queremos, sin ser la parte de la visualización de los pedidos. No queremos que el usuario tenga que cargar siempre el total (calculándolo a mano). También queremos que el costo aparezca cuando seleccionamos un servicio.
Hasta aquí es lo que podemos hacer con DynProj, en pocos minutos realizamos los abm de Servicios, Pedidos, sus respectivos informes, control de usuario, grupos de usuario y menú. También la gestión de usuarios y grupos. Para completar, ahora debemos trabajar en el producto descargado:
Vista de Pedidos
Archivo: views/pedidos.php
Aquí vamos a cambiar la visualización de la toma de pedidos, creando también la cuenta automática cuando se selecciona un servicio o se agregan integrantes.
- Cambio en el combobox de servicios, se agrega:
onSelect: function(rec){ obtenerCosto(rec.id); }
Código resultante:
<input id="servicio" class="easyui-combobox" style="width:300px" name="servicio" url="<?php echo base_url()."servicios/dataFullToSelect/"; ?>" data-options="valueField:'id',textField:'text', onSelect: function(rec){ obtenerCosto(rec.id); }" style="width:250px"> |
- Agregar las siguientes funciones JavaScript:
function obtenerCosto(id){ jQuery.post("<?php echo base_url()."servicios/costo"; ?>",{ id:id, <?php echo $this->config->item("csrf_token_name"); ?>: csrf_token_value },function(result){ if(result.success){ $('#costo').numberbox('setValue', result.costo); calcular(); } else { $('#costo').attr('value', ''); $('#total').attr('value', ''); jQuery.messager.show({ title: "Error", msg: result.msg }); } },"json"); } function calcular(){ if ((!isNaN($('#costo').numberbox('getValue'))) && (!isNaN($('#integrantes').numberbox('getValue')))){ var resultado = $('#costo').numberbox('getValue') * $('#integrantes').numberbox('getValue'); $('#total').numberbox('setValue', resultado); } } |
Controlador de Servicios
Archivo: controllers/servicios.php
Cuando se selecciona un servicio en el combo de la vista de pedidos, se solicita el costo por medio de Ajax, éste controlador es el que responde. Su acción principal es derivar la solicitud al modelo de servicios.
Agregar el siguiente código:
public function costo($id=null) { if (!isset($_POST)) show_404(); $id = intval(addslashes($_POST["id"])); $result = $this->servicios_model->costo($id); if ($result >= 0) echo json_encode(array("success" => true, "costo" => $result)); else echo json_encode(array("msg" => "Error al cargar el registro.")); } |
Modelo de Servicios
Archivo: models/servicios_model.php
Aquí se realiza la consulta, dado el identificador del servicio, devuelva el costo.
Agregar el siguiente código:
public function costo($id) { $sql = "SELECT costo FROM servicios WHERE id = ".$id.";"; $query = $this->db->query($sql); foreach ($query->result_array() as $data) { return $data["costo"]; } return 0; } |
Estilos
Archivo: css/dynproj.css
Se realiza un ajuste en el input del total para resaltar su valor:
Código:
#total{ font-weight: bold; text-align: right; } |
Y ahí queda pronto, a continuación un pequeño video que demuestra su funcionamiento.
No hay comentarios:
Publicar un comentario