Making a live edit contact list with Coldbox REST & Vue.js

Size: px

Start display at page:

Download "Making a live edit contact list with Coldbox REST & Vue.js"

Leon Willis
5 years ago
Views:

1 Tweet Making a live edit contact list with Coldbox REST & Vue.js Scott Steinbeck Mar 28, 2016 Today we will be making a contact database that you can quickly and easily manage using ColdBox and Vue.js. We will be using bootstrap in our project to make it the UI look a little better but it is completely optional if you want to use this in your own project. For this project I will be using CommandBox to generate all my files. TL;DR: View the repo here Lets Begin. Step 1: You can skip this step if you already have a project set up. From CommandBox run: coldbox create app name=cbvue skeleton=rest --installcoldbox This will give us a minimal project with a handlers\basehandler.cfc (needed to make our life easy when creating a REST API) and an handlers\echo.cfc which is an example usage to get you started. Now that we have our project started we need to tweak a few things.

2 First, since this is a template that is expecting to be setup for REST only, the Echo.cfc is set to be the default entry point. Since we want to create a view that accesses a REST API we need to point that to a view. Step 2: Create you default Layout & View. coldbox create layout Main This is going to create our default layout. A layout is the outer template that you content will go inside. The layout will be created in layouts/main.cfm. Navigate to that folder and replace the content with this: <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initialscale=1"> <title>coldbox & Vue.js</title> <link rel="stylesheet" href=" n.css"> <script type="text/javascript" src=" <script type="text/javascript" src=" </head> <body> <main> <cfoutput>#renderview()#</cfoutput> </main> <script src=" "></script> <script

3 src=" js"></script> </body> </html> This contain some boilerplate code to get our page setup and includes all of our libraries that will be needed. Again, the only libraries needed for this project are vue.js & vue-resource, everything else is just for UI. coldbox create view main\index --helper This will create 2 files: view/main/index.cfm, view/main/indexhelper.cfm. index.cfm will contain the HTML table and form we will be interacting with. indexhelper.cfm (a file automatically included when we load index.cfm) will contain all of our code for vue.js. The helper file is a connivence provided by ColdBox to help organize your code into separate files. Now before we go too far, we need to change the default entry point to be our new index so that we will see the correct view. Navigate to config/coldbox.cfc. In our settings we are going to change: defaultevent = "Main.index", From this point is is time to start your server start --rewritesenable --force As a side note if your on CommandBox latest stable version you can also create a server.json file in the root of your project which will enable you to store all of your settings so when you want to start your server up in CommandBox you just type:

4 start I have included my server.json in the repo if you want to take a look. Step 3. Creating the REST API We need a place to store our data so we will use a model, since we have been using CommandBox to generate our files we will continue to do so: coldbox create model name=contactservice properties=contacts,lastid -- accessors This will create 2 files: models/contactservices.cfc, tests/specs/unit/contactservicestest.cfc. Navigate to our models/contactservices.cfc, file and add this inside your init function: variables.contacts = { "1" : {"id": 1, "firstname": "Scott", "lastname": "Steinbeck", "phone": " ", " ": "scottsteinbeck@ .com" "2" : {"id": 2, "firstname": "Scott", "lastname": "Coldwell", "phone": " ", " ": "scottcoldwell@ .com" "3" : {"id": 3, "firstname": "Jon", "lastname": "Clausen", "phone": " ", " ": "johnclausen@ .com" "4" : {"id": 4, "firstname": "Eric", "lastname": "Peterson", "phone": " ", " ": "ericpeterson@ .com" "5" : {"id": 5, "firstname": "Andrew", "lastname": "Dixon", "phone": " ", " ": "andrewdixon@ .com" "6" : {"id": 6, "firstname": "Gavin", "lastname": "Pickin", "phone": " ", " ": "gavinpickin@ .com" "7" : {"id": 7, "firstname": "Brad", "lastname": "Wood", "phone": " ", " ": "bradwood@ .com" "8" : {"id": 8, "firstname": "Luis", "lastname": "Majano", "phone": " ", " ": "luismajano@ .com" "9" : {"id": 9, "firstname": "Jorge", "lastname": "Reyes", "phone": " ", " ": "jorgereyes@ .com" ;

5 variables.lastid = 10; This is just some default table rows to get us started seeing some data. Instead of adding a database into the mix i thought it would be easier to persist this in the singleton scope to make it simpler to walk though. This just makes it persist across refreshes and starts us at an increment number when we create new items. In case you are new to ColdBox you may be unfamiliar with the SINGLETON scope, it is one of the many scopes provided by WireBox to persist your data. For more detailed information check out: Wirebox Scopes BTW: This model can easily be modified to use a database instead, and the best part is you can do it without ever making any changes to the front end :) Now that our data is created lets create some helper methods for accessing & changing our data. Below your init function paste the following code: /** * Get all contacts */ struct function getall(){ return variables.contacts; /** * save and return all contacts The id to save/update The data record */ struct function save( required contactid, required data ){ // insert, move lastid if( arguments.contactid == 0 ){ arguments.contactid = variables.lastid; arguments.data.id = variables.lastid; variables.lastid++; // Store data variables.contacts[ arguments.contactid ] = arguments.data;

6 return variables.contacts; /** * Remove a contact The incoming ID */ struct function remove( required contactid ){ structdelete( variables.contacts, arguments.contactid ); return variables.contacts; The methods should be pretty self explanatory, they allow us to keep the logic of data manipulation in the model so when we access it we can just simply call getall(), save(), and remove(). This is extremely useful because all of your data logic is separated from the controller and in one place. Since we already had a handler created handlers/echo.cfc I decided to rename this handler to Contacts.cfc and changed its contents. Open up the file once you change the name and copy in the content below: /** * My RESTFul Contact Handler */ component extends="basehandler"{ // Dependency Injection property name="contactservice" inject="contactservice"; This is the base code that will extend our BaseHandler.cfc so we get all our RESTful helpers. Additionally, we inject our ContactService.cfc into our handler to use the helper methods we defined earlier. The first API action is view which will list all of the contacts we have in our data: /** * List All Contacts

7 */ any function view( event, rc, prc ){ prc.response.setdata( contactservice.getall() ); This will grab the data from the session and send it back as JSON Our next action is save which, as it suggests, will save an existing row or add a new one. /** * Save A Contact */ any function save( event, rc, prc ){ var requestbody = deserializejson( tostring( gethttprequestdata().content ) ); var scontacts = contactservice.save( requestbody.id, requestbody ); prc.response.setdata( scontacts ); You will notice something weird here event.gethttpcontent( json=true );, normally you would grab the data from the rc scope, but the vue-resource sends the data through the headers instead of the FORM or URL scope so we have to grab it from there. Once we have the data posted we send the contact data to the ContactService so we can check if it has an existing id, if it is 0 we know its a new record, so we will create the new record, otherwise we will just update the existing data, then we send back the new data. Lastly we will make it so you can delete a contact: /** * Delete An Existing Contact */ any function remove( event, rc, prc ){

8 var scontacts = contactservice.remove( rc.contactid ); prc.response.setdata( scontacts ); Now that our handler is done we need to add our routes for this handler so that we can map our functions to RESTful actions. Open up your config/routes.cfm file and add this line right above the route that says addroute(pattern=":handler/:action?"); -- the order is important. addroute(pattern = 'contacts/:contactid?',handler = 'contacts',action = {GET = 'view', POST = 'save', PUT = 'save', DELETE = 'remove'); Ok, now that we have our RESTful functions ready, we can start working on our front end. Step 4. Creating our view Open up your views/main/index.cfm that you created earlier. Inside you will copy in the html below <div id="app" class="container"> <div class="row"> <div class="col-sm-4"> <div class="panel panel-default"> <div class="panel-heading"> <strong>add/edit Contact</strong> </div> <div class="panel-body"> <div> <div class="form-group"><input v-model="contactitem.firstname" class="form-control" value="" placeholder="first Name"></div> <div class="form-group"><input v-model="contactitem.lastname" class="form-control" value="" placeholder="last Name"></div> <div class="form-group"><input v-model="contactitem.phone" class="form-control" value="" placeholder="phone"></div> <div class="form-group"><input v-model="contactitem. " class="form-control" value="" placeholder=" "></div>

9 <button class="btn <button class="btn </div> </div> </div> </div> <div class="col-sm-8"> <table class="table"> <thead> <tr> <th>first Name</th> <th>last Name</th> <th>phone</th> <th> </th> <th></th> </tr> </thead> <tbody> <tr v-for="contact in contacts"> <td>{{contact.firstname</td> <td>{{contact.lastname</td> <td>{{contact.phone</td> <td>{{contact. </td> type="button" class="btn btn-primary">edit</button></td> type="button" class="btn btn-danger">x</button></td> </tr> </tbody> </table> </div> </div> </div> This creates the html for our Contact Table & Contact Editor. You will notice some odd looking code if you are not familar with Vue.js or Angular JS: v-model="contactitem.firstname"

10 v-for="contact in {{contact. This is how Vue.js communicates with your code.. v-model="contactitem.firstname" v-model, which is part of the form, binds together the form field and the Vue.js controller so they are aware of eachother. v-for="contact in contacts" v-for, is how Vue.js loops through a list of data, this can be used for any type is basically equivalent to the onclick method, accept, this way the even is registered with the Vue.js controller so it can do something when you click it. {{contact. {{contact. is known as handlebar syntax. This is how you define variables so Vue.js knows to replace them with that contact for instance. Step 4. Continued The Vue.js Controller We will copy the following code into the views/main/indexhelper.cfm file. This file gets appended after our views/main/index.cfm. <script>

11 $( document ).ready(function() { new Vue({ // Where the app will be instantiated on the page el: '#app', // Variables that you want it to have access to or start out with data: { contactitem: { id:0, firstname:'', lastname:'', phone:'', '' contacts: [] // When this module is ready run this ready: function() { this.loadcontacts(); // All the methods you want the view to have access to, basically an object of functions methods: { loadcontacts: function() { var _this = this; // Get the list of contacts this.$http.get('/contacts').then(function(result) { // Update the list with the new data _this.$set('contacts', result.data.data); ); loadcontact: function(contact) { // Set the form with the contact row information this.contactitem = contact; savecontact: function() { var _this = this; // Save the new contact information

12 this.$http.post('contacts', _this.contactitem).then(function(result) { // Reset the form to detault _this.contactitem = {id:0, firstname:'', lastname:'', phone:'', ''; // Update the list with the new data return _this.$set('contacts', result.data.data); ); cancelsave: function(){ // Reset the form to detault return this.contactitem = {id:0, firstname:'', lastname:'', phone:'', ''; deletecontact: function(contact) { var _this = this; //Delete the contact this.$http.delete('/contacts/' + contact.id).then(function(result) { // Update the list with the new data _this.$set('contacts', result.data.data); ); ); ); </script> Lastly we have the controller. This is where all the magic happens... el: '#app', Tells Vue that all of our logic will be nested within the <div id="app"></div> data: { contactitem: { id:0,

13 firstname:'', lastname:'', phone:'', '' contacts: [] data is a struct of information it is pulling from, here we are providing defaults but you can also populate the data statically and it will use that information. // When this module is ready run this ready: function() { this.loadcontacts(); loadcontacts: function() { var _this = this; // Get the list of contacts this.$http.get('/contacts').then(function(result) { // Update the list with the new data _this.$set('contacts', result.data.data); ); ready is fired once the Vue Component is loaded. What we are doing here is calling the ajax function that will load our table with data from our ColdBox RESTful API. Gotcha** - Vue only knows about nested data changes if you use its built in functions (.$set,.$delete) otherwise you will be scratching your head for a while

14 _this.$set('contacts', result.data.data); Load Contact - will load in our contact data into the form for editing. Notice the this.contactitem is being set to contact. loadcontact: function(contact) { // Set the form with the contact row information this.contactitem = contact; Here the entire row of data is being sent as an argument when you click on the Edit button. type="button" class="btn btn-primary">edit</button></td> So we are setting the this.contactitem = contact; Now in our code we have the form set up with: v-model="contactitem.firstname" which means as soon as the this.contactitem has updated data it is going to update the v-model that is connected to that data. Once the data is populated in the form we can make edits to it and then click either the submit or the cancel button. The respective code is below.

15 savecontact: function() { var _this = this; // Save the new contact information this.$http.post('contacts', _this.contactitem).then(function(result) { // Reset the form to detault _this.contactitem = {id:0, firstname:'', lastname:'', phone:'', ''; // Update the list with the new data return _this.$set('contacts', result.data.data); ); cancelsave: function(){ // Reset the form to detault return this.contactitem = {id:0, firstname:'', lastname:'', phone:'', ''; Since the default data sends an id = 0 we can decide if we need to create a new item or edit an existing item. Last on our list for the Vue Controller is the Delete. Basically here we are just sending back the id to our API with the delete verb and our API will take care of deleting the entry and returning our new data set back to us. deletecontact: function(contact) { var _this = this; //Delete the contact this.$http.delete('/contacts/' + contact.id).then(function(result) { // Update the list with the new data _this.$set('contacts', result.data.data); ); So thats it. All you need is a few files (Most of which can be generated by CommandBox) and you have got yourself a fully functional contacts manager.

16 The Code: View the repo here Copyright Ortus Solutions, Corp.

Front-End UI: Bootstrap

Responsive Web Design BootStrap Front-End UI: Bootstrap Responsive Design and Grid System Imran Ihsan Assistant Professor, Department of Computer Science Air University, Islamabad, Pakistan www.imranihsan.com