30-50% off hundreds of digital assets! WordPress themes, video, music and more 30-50% Off Go to Sale
Advertisement
  1. Code
  2. PHP
Code

AngularJS y Laravel: Comienza a Construir un CRM (Sistema de Gestion de Clientes)

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called Building a Customer Management App Using AngularJS and Laravel.
AngularJS and Laravel: Finishing Building a CRM

Spanish (Español) translation by Schopenhaur (you can also view the original English article)

Al crear un 'app' de solo una pagina, debemos usar un armazon (framework) que nos ayude con parte de la tarea, para que mas facil nos enfoquemos en el aspecto funcional. AngularJS se coloca muy bien en este aspecto debido a que contiene inyeccion de dependencias y la atadura bidireccional de datos. A menudo tambien se necesita un servidor. Si has escogido PHP puede ser que Laravel sea tu mejor opcion, ya que es facil de manejar y ampliamente poderoso.

Inicio

En el siguiente tutorial, vas a construir un sistema de gestion sencillo de clientes/transacciones. Es muy possible que esto no es algo que diseñes a menudo, pero sera util para demostrar como manejar los atributos de ambos armazones.

Antes de iniciar sera necesario preparar una base de datos MySQL que vamos a utilizar. No vas a necesitar un servidor web ya que vamos a utilizar el que ya viene incorporado en PHP (pero recuerda que esta solucion es solo para entorno de desarrollo y no deberias usarlo en entorno de produccion. Para llevar acabo esto, vamos a necesitar la version 5.4.0 de PHP.

La Preparacion

Lo primero que vamos hacer es instalar Laravel. Los pasos completos estan detallados en el sitio web de Laravel. Despues de la instalacion, tendras tu directorio de proyecto ya formado y conteniendo todos los documentos de Laravel. Usando tu linea de comandos, navega hacia ese directorio y despues de haber llegado, ejecuta el siguiente mandato:

Si todo va bien, vas a mirar que el servidor local de desarrollo se inicio en localhost:8000. Abre tu navegador web y navega a localhost:8000, vas a mirar la pagina de bienvenida de Laravel.

first_run

Ya podemos proceder a la aplicacion actual.

Migraciones y Modelos

Los modelos en Laravel son como en cualquier otro armazon MVC. Esta usando Eloquent ORM para aligerar tu trabajo - tal vez jamas sera necesario que escribas otra consulta de datos SQL (a lo menos que desees algo que Eloquent no proporciona). Usando migraciones podras cambiar la estructura de la base de datos y a la vez tendras la capacidad de retroceder esos cambios si algo va mal. Puedes leer mas sobre migraciones en la documentacion.

En este nuestro 'app' vamos a disponer de dos modelos.

  • Customer - va a contener la informacion del cliente.
  • Transaction - va contener la informacion de la transaccion.

Comenzamos por creando las migraciones de ambos. Si no lo has hecho, cierra el servidor que anteriormente iniciamos (Ctrl + C).

Clientes

Primero, invoca este mandato.

Al hacerlo, esto te va a crear un documento de migracion con una estructura basica. Ahora navega hacia app/database/migrations. Ahora debe haber un documento cual nombre comienze con un fecha-tiempo y termine con "create_customers_table". Laravel automaticamente creo esta estructura basica para tu beneficio. El metodo up() es invocado cuando se aplica la migracion, y el de nombre down() cuando se retrocede lo que se aplico.

Primero invoca el metodo Schema::create(). Este toma dos argumentos - el nombre de la esquema y la funcion que sirve come devolucion de llamada.

La devolucion de llamada es invocada cuando la tabla es creada. El objeto tabla es pasado como el variable $table y a este lo usamos para manejar la estructura de la tabla. Vamos añadirle un campo id de tipo autoincremento.

Luego va haber tres campos de tipo cadena (texto), que vamos a usar para el primer nombre, apellido, y correo electronico.

Haremos el campo email a tipo unico al invocarle el metodo unique().

El ultimo metodo es para los fecha-tiempos:

Esto va a crear dos campos de tipo fecha en el esquema: created_at y updated_at. Ambos los usara Eloquent para almazenar los fecha-tiempos que marcan cuando un elemento es creado y cuando es actualizado.

Finalmente, el codigo debe parecerse a lo suigiente:

El metodo down() es mas sencillo - este simplemente aniquila el esquema.

Transacciones

Este codigo sera muy parecido al codigo de los clientes. Primero invoca este mandato:

Luego localiza el documento correspondiente en app/database/migrations y habrelo. Como anterior, comienza por creando el esquema.

Ahora añade los campos que le corresponden al id, el titulo o nombre de la transaccion, su costo, y el cliente al cual le pertenece.

Y claro, tambien los fecha-tiempos.

Al final, el codigo debe parecerse a lo siguiente:

Y ahora el metodo down().

Configuracion de Base de Datos

Ahora, antes que apliques las migraciones tienes que configurar la conexion a tu base de datos. Abre el documento app/config/database.php y procede al renglon numero 55. Aqui tenemos los datos para configurar MySQL (hay otros cuantos mas, por ejemplo, puedes usar SQLite o Postgres.

Despues de llenar los datos, estaras listo para seguir adelante. Asegurate de haber guardado el documento y invoca este mandato desde el directorio principal de tu 'app' (aquel que contiene el documento artisan):

Y eso es todo. Si no hubo errores quiere decir que tuviste exito formando las tablas. Puedes conectarte a tu base de datos usando, por ejemplo, phpMyAdmin, para verificarlo de forma manual.

Modelos

En Laravel, el crear un modelo despues de haber configurado tu base de datos por medio de migraciones es algo muy rapido. Navega a app/models y borra el documento de ejemplo User.php. Ahora crea dos documentos llamados Customer.php y Transaction.php.

Vamos a comenzar con Customer.php. Cada modelo en Laravel debe extender la clase Eloquent.

Ahora vamos a definir una relacion entre el cliente y sus transacciones. Esto se lleva acabo definiendo un metodo publico adentro del modelo con nombre igual a la propiedad que nosotros deseamos que tenga (en este caso transactions):

Ahora, adentro de la funcion solo habra un renglon.

Este renglon le informa a Eloquent que debe de proporcionar todas las transacciones con el customer_id del cliente por medio de una propiedad llamada transactions.

Ahora vamos hacer lo mismo con las transacciones, pero vamos a invertir la relacion para tener acceso al dueño de la transaccion por medio de la propiedad customer.

Esto se lleva a acabo usando un metodo, perteneciente al modelo, llamado $this->belongsTo().

Controladores

Bien, para actualmente usar los modelos tenemos que crearles controladores.  Dirijete al directorio app/controllers y solamente borra al documento HomeController.php.  BaseController.php es importante porque nuestros controladores lo van a extender. Ahora vas a crear dos documentos: CustomerController.php y TransactionController.php.

ControladorDeCliente

Este controlador se encargara de todo relacionado a los clientes - el añadir, quitar, y presentar una lista de ellos. Comienza por definir la clase:

Estaremos usando una caracteristica de Laravel llamada controladores RESTful (Transferencia de Estado Representacional). Esta hace la creacion de rutas mas facil porque solo tenemos que definir la base del URI (Nombre de Rucurso Uniforme) y Laravel se encargara de todo para nuestro beneficio. Esto te require que los nombres de tus funciones inicien con el verbo apropiado de tipo HTTP y prosigan con el nombre de la subruta (siempre usando el estilo de nombrar minisculaMayuscala conocida como casoCamello). Por ejemplo, si el metodo es nombrado getNames y la base del URI es /customers, entonces el metodo sera accesible con /customers/names.

Los metodos getIndex(), postIndex(), deleteIndex() etc. seran mapeados a la ruta predeterminada (que en este caso es /customers).

Ahora vamos a definir nuestra primer ruta - el obtener un cliente por medio de su id:

Sigamos a obtener el id por medio de los parametros de consulta (Laravel nos proporciona una muy agradable clase llamada Input para tratar con esto, asi es que no tienes que usar $_GET, $_POST, y $_FILES);

Y buscaremos al cliente en la base de datos usando el id:

Cada metodo en el controlador tiene que regresar un valor de tipo cadena o que incorpore el metodo __toString(). En el caso presente, el modelo Customer que es regresado en la respuesta, sera convertido a tipo JSON antes de ser regresado.

Ahora, vamos y regresemos una lista de todos los clientes (sera accesible por medio de /customers/all:

Como puedes ver, podemos obtener a todos los clientes usando el metodo all() del modelo.

Ahora sigamos con la parte mas larga, el añadir un nuevo cliente.

Primero, vamos a verificar si toda la informacion pertinente fue proporcionada. Esto los podemos hacer usando el metodo Input::has().

Vamos y coloquemos todos los campos de entrada en el variable $input para evitar tener que invocar Input::get() vez tras vez. Esto se lleva acabo usando Input::all():

A continuación vamos a verificar si algunos de los campos de entrada estan vacios. Si esto es el caso, vamos a regresar un error HTTP 400 Bad Request con un mensaje mas verboso.

Debido a que deseabamos regresar un codigo de estado 200 en vez de simplemente regresar un mensaje tipo cadena, usamos Response::make(), cual toma los datos que vamos a mandar como el primer parametro y el codigo de estado como el segundo. Echa un vistazo a los docs si deseas saber mas sobre responses (respuestas).

Ahora por fin creamos un nuevo modelo Customer y lo llenamos con los datos proporcionados:

Despues de esto podemos guardar el modelo recien creado y con el mismo responder a la solicitud:

Aqui tratamos el caso cuando no todos los campos de entrada proporcionan informacion:

Finalmente, tambien vamos a necesitar la capacidad de quitar clientes. Este si que es corto.

Comenzamos por obteniendo el id del cliente que vamos a eliminar.

Luego, buscamos y eliminamos al cliente.

Despues, respondemos a la solicitud con el id que se nos proporciono.

Ahora antes de poder acceder a las rutas, tenemos que engancharlas. Abre el documento app/routes.php, borra todo menos el comentario y añade este renglon al final del documento.

Esto servira para informarle a Laravel a que encamine todo despacho a /customers hacia nuestro CustomerController. Ahora puedes usar CURL para experimentar con el. Primero inicia el servidor con php artisan serve y luego podras, por ejemplo, crear un cliente.

Luego puedes obtener una lista de todos los clientes.

ControladorDeTransacciones

Este, como el modelo es muy parecido al CustomerController. Primero crea la clase:

Luego vamos a definir el metodo para obtener todas la transacciones del usuario: 

Como puedes ver estamos usando la relacion que definimos anteriormente para obtener las transacciones.

Lo siguiente va ser el crear transacciones:

Como anteriormente, estamos verificando si toda la informacion que se requiere se nos fue proporcionada:

Si es asi, asignale el valor al variable $input:

Verifica si alguno de los valores proporcionados son valores vacios y si eso es el caso, regresa un error:

Ahora crea la transaccion y abastecela con toda la informacion proporcionada.

Ahora tenemos que añadirla al cliente apropriado. Vamos y encontremos al cliente por el id proporcionado y añademosle la transaccion a su lista de transacciones. 

Esto se lleva acabo por medio del metodo transactions->save() que nos proporciona Laravel. Ahora responderemos con la transaccion que fue creada.

Y podemos tratar con el caso donde ningun o no toda la informacion fue proporcionada.

Despues de esto tambien hay un metodo para borrar la transaccion en la misma manera que borramos a un cliente.

Ahora agrega la ruta y podras probar al controlador usando CURL:

Conclusion.

Bueno, llegamos al final de la primer parte - en la segunda parte de este tutorial, vamos a crear la estructura anterior de la aplicacion usando AngularJS. Sientete libre de añadirle mas aspectos funcionales a tu app (como el redactar o ordenar), y si acaso no encontraste la informacion que buscabas, echa un vistazo a la documentacion de Laravel.

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.