The Conversion: Lay of the Landing Page - Part 1

In the last post the groundwork has been laid for real development to begin. The data service, router, and landing pages have been created and are ready for code. The last thing to add for this part of the process is the Coldfusion component.

A data folder has been added to store any cfcs relevant to the TRIPS application. The first is to write the CFFUNCTION that will return the list of trips. My development pattern for creating CF functions is fairly routine.  First, decide on a name, parameters and return type.  Sometimes the naming of a function is the hardest part.  I've settled on actionDataObject.  So in this case, the function will be named: getTrips.   

At moment, the landing controller (landing.js) is empty.

 angular.module('core').controller('LandingController',['$scope','dataService', function($scope,dataService){  
 }]);  

The basic task of this controller is getting the list of trips.  First is the establishment of an empty trips array and then the call to get the list of trips via the data service.  Because this call will not need to use any parameters, the generic call can be used.

 angular.module('core').controller('LandingController',['$scope','dataService', function($scope,dataService){  
   $scope.trips = [];  
   dataService.call('getTrips').then(function(data){  
     $scope.trips = data.data;  
   })  
 }]);  

Now to create the getTrips function in CF. The following code snippet is basically the development pattern that I use. Technically, rather than loop through the query results like this function is going to do, you can use serializeJSON(query,'struct') [CF11] which will turn the query into JSON.  But I prefer to roll my own in this case because there may be other processes I want to run or formatting applied that I don't want to have to do in the query. It may be a touch more work for the server and even the developer, but it's clear and easy to maintain.

 <cfcomponent>  
 <cfset _ds = 'myDataSource'>  
 <cffunction name="getTrips" returnformat="json" returntype="array">  
   <cfset _trips = arrayNew(1)>  
   <cfquery name="_qTrips" datasource="#_ds#">  
   </cfquery>  
   <cfloop query="_qTrips">  
     <cfset _trip = structNew()>  
     <cfset arrayAppend(_trips,_trip)>  
   </cfloop>  
   <cfreturn _trips>  
 </cffunction>  
 </cfcomponent>  

The next step is to decide on the fields to be returned. Thinking about the landing page, useful information would be the trip name, trip type, destination, departure date and return date. The query is going to need to look at two tables: trips and trip stops. Also, we want to only return those trips that are relevant to the user.

Fully realized, the function looks something like the following:

 <cffunction name="getTrips" returnformat="json" returntype="array">  
   <cfset _trips = arrayNew(1)>  
   <cfquery name="_qTrips" datasource="#_ds#">  
     select trip_name,  
         author_pidm,  
         destination,  
         trip_type,  
         (select stop_datetime from myschema.tripStops ts where ts.trip_id = t.trip_id and stop_type = 'DEPARTURE_OUTBOUND') departure,  
         (select stop_datetime from myschema.tripStops ts where ts.trip_id = t.trip_id and stop_type = 'ARRIVAL_INBOUND') arrival  
     from  myschema.trips t  
     where  t.author_pidm = <cfqueryparam value="#session.uid#" cfsqltype="cf_sql_integer">  
   </cfquery>  
   <cfloop query="_qTrips">  
     <cfset _trip = structNew()>  
     <cfset _trip.name = trip_name>  
     <cfset _trip.authorID = author_pidm>  
     <cfset _trip.destination = destination>  
     <cfset _trip.type = trip_type>  
     <cfset _trip.outboundDeparture = dateformat(departure,'YYYY-MM-DD')>  
     <cfset _trip.inboundArrival = dateformat(departure,'YYYY-MM-DD')>  
     <cfset arrayAppend(_trips,_trip)>  
   </cfloop>  
   <cfreturn _trips>  
 </cffunction>  

And one more thing with the function.  In CF, the function needs to know it's okay to be called remotely.  To do that, access="remote" is added into the CFFUNCTION tag.

So let's see if it works.

In reviewing the console, it looks like the function is golden.  Now it's time to fill out the landing template.  Part 2 coming up next.