Instructions for Completing the Campus Travel Mobile App Project with the Ionic Creator Free Version
In this project you are going to finish a mobile app version of the Campus Travel website like this.
Click for a video on completing this exercise without upgrading to Creator Pro.
We assume you have completed Campus Travel Part 1. Click if you want to complete Part 2 using the Pro version.
We begin by exporting the finished user interface to your desktop to finish adding the code.
Exporting Your Mobile App to your Desktop
1. |
To Export your application to your desktop
|
Add Angular Directives to HTML files
2. |
addAgent.html
|
3. |
addSale.html
|
4. |
agentBookings.html
|
5. |
sales.html
|
6. |
searchResults.html
|
7. |
searchSales.html
|
8. |
updateSale.html
|
Add Parameter Passing to Page Routing
9. |
Next, locate and open the routes.js file in the js folder. Parameters passed from Search Sales to Search Results Page
Parameter passed from Search Results to Update Sale Page
|
10. | Save and Close routes.js. |
Adding Page Controller JavaScript
11. |
Add Page Controller JavaScript: Locate and open the js/controllers.js file. The first line of js/controllers.js should be: angular.module('app.controllers', [])
|
12. |
.controller('agentBookingsCtrl' for AgentBookings.html
|
13. |
.controller('salesCtrl' for sales.html
|
14. |
.controller('addAgent' for addAgent.html
|
15. |
.controller('addSaleCtrl' for addSale.html
|
16. |
.controller('searchSalesCtrl' for searchSales.html
|
17. |
.controller('searchResultsCtrl' for searchResults.html
|
18. |
.controller('updateSaleCtrl' for updateSale.html
|
19. | Save and Close controllers.js. |
Adding API Services JavaScript
20. |
Locate and open the js/services.js folder. The first line of services.js should be: angular.module('app.services', [])
Note that you will not be further testing your app on the Ionic Creator platform or hosting your app on a secure server host. Therefore it is not necessary that your APIs are accessed through a secure server. Just after the first line, insert the following 211 lines of code: .service('GetAgentBookings', function($http) { return { getPost: function() { var columns="AgentName, OfficeLocation, SUM(1) AS NumSales, SUM(IF(Amount IS NOT NULL,Amount,0)) AS Total"; var table=encodeURIComponent("AGENT LEFT JOIN SALE ON AgentKey=AgentID LEFT JOIN OFFICE ON OfficeKey=OfficeID"); var group="AgentID"; var order="Total DESC"; var query = '?columns='+columns; query += '&table='+table; query += '&group='+group; query += '&order='+order; return $http.get('http://secrdir.com/campus/ionic/list.php'+query) .then(function (response) { return response.data; }); } }; }) .service('GetSales', function($http) { return { getPost: function() { var columns = "SaleID, SaleDate, UNIX_TIMESTAMP(SaleDate)*1000 AS SaleTime, AgentKey, Amount, DestinationKey"; columns += ", AgentName, OfficeKey, OfficeLocation, DestinationName"; var tab = "SALE INNER JOIN AGENT ON AgentKey=AgentID INNER JOIN OFFICE ON OfficeKey=OfficeID "; tab += " INNER JOIN DESTINATION ON DestinationKey=DestinationID"; var table = encodeURIComponent(tab); var order="SaleID DESC"; var query = '?columns='+columns; query += '&table='+table; query += '&order='+order; return $http.get('http://secrdir.com/campus/ionic/list.php'+query) .then(function (response) { return response.data; }); } }; }) .service('GetOffices', function($http) { return { getPost: function() { var query = '?table=OFFICE&order=OfficeLocation'; return $http.get('http://secrdir.com/campus/ionic/list.php'+query) .then(function (response) { return response.data; }); } }; }) .service('GetAgents', function($http) { return { getPost: function() { var query = '?table=AGENT&order=AgentName'; return $http.get('http://secrdir.com/campus/ionic/list.php'+query) .then(function (response) { return response.data; }); } }; }) .service('GetDestinations', function($http) { return { getPost: function() { var query = '?table=DESTINATION&order=DestinationName'; return $http.get('http://secrdir.com/campus/ionic/list.php'+query) .then(function (response) { return response.data; }); } }; }) .service('AddAgent', function($http) { return { getPost: function(agent,office) { var query = '?AgentName='+agent; query += '&OfficeKey='+office; return $http.get('http://secrdir.com/campus/ionic/add_agent.php'+query) .then(function (response) { return response.data; }); } }; }) .service('AddSale', function($http) { return { getPost: function(agent,saleDate,amount,destination) { var query = '?AgentKey='+agent; query += '&DestinationKey='+destination; query += '&Amount='+amount; query += '&SaleDate='+saleDate; return $http.get('http://secrdir.com/campus/ionic/add_sale.php'+query) .then(function (response) { return response.data; }); } }; }) .service('SearchSales', function($http) { return { getPost: function(agent, destination, amountsAbove, amountsBelow) { var columns = "SaleID, SaleDate, UNIX_TIMESTAMP(SaleDate)*1000 AS SaleTime, AgentKey, Amount, DestinationKey"; columns += ", AgentName, OfficeKey, OfficeLocation, DestinationName"; var tab = "SALE INNER JOIN AGENT ON AgentKey=AgentID INNER JOIN OFFICE ON OfficeKey=OfficeID "; tab += " INNER JOIN DESTINATION ON DestinationKey=DestinationID"; var table = encodeURIComponent(tab); var order="SaleID DESC"; var query = '?columns='+columns; query += '&table='+table; query += '&order='+order; var where = ""; if(agent > 0 ) { where += " AND AgentKey="+agent ; } if(destination > 0 ) { where += " AND DestinationKey="+destination ; } if(amountsAbove > 0 ) { where += " AND Amount>='"+amountsAbove+"'" ; } if(amountsBelow > 0 ) { where += " AND Amount<='"+amountsBelow+"'" ; } if(where>'') { where = where.substr(4) ; where=encodeURIComponent(where); query += '&where='+where ; } return $http.get('http://secrdir.com/campus/ionic/list.php'+query) .then(function (response) { return response.data; }); } }; }) .service('GetSale', function($http) { return { getPost: function(saleId) { var columns = "SaleID, SaleDate, UNIX_TIMESTAMP(SaleDate)*1000 AS SaleTime, AgentKey, Amount, DestinationKey"; columns += ", AgentName, OfficeKey, OfficeLocation, DestinationName"; var tab = "SALE INNER JOIN AGENT ON AgentKey=AgentID INNER JOIN OFFICE ON OfficeKey=OfficeID "; tab += " INNER JOIN DESTINATION ON DestinationKey=DestinationID"; var table = encodeURIComponent(tab); var query = '?columns='+columns; query += '&table='+table; query += '&where='+encodeURIComponent("SaleID=" + saleId); return $http.get('http://secrdir.com/campus/ionic/list.php'+query) .then(function (response) { return response.data; }); } }; }) .service('DeleteSale', function($http) { return { getPost: function(saleId, originalAgent, originalSaleDate, originalAmount, originalDestination) { var query = '?SaleID='+saleId; query += '&Original_AgentKey='+originalAgent; query += '&Original_DestinationKey='+originalDestination; query += '&Original_Amount='+originalAmount; query += '&Original_SaleDate='+originalSaleDate; return $http.get('http://secrdir.com/campus/ionic/delete_sale.php'+query) .then(function (response) { return response.data; }); } }; }) .service('UpdateSale', function($http) { return { getPost: function(saleId, originalAgent, originalSaleDate, originalAmount, originalDestination, agent, saleDate, amount, destination) { var query = '?SaleID='+saleId; query += '&Original_AgentKey='+originalAgent; query += '&Original_DestinationKey='+originalDestination; query += '&Original_Amount='+originalAmount; query += '&Original_SaleDate='+originalSaleDate; var changes = 0; if(agent != originalAgent) { query += '&AgentKey='+agent; changes += 1; } if(destination != originalDestination) { query += '&DestinationKey='+destination; changes += 1; } if(amount != originalAmount) { query += '&Amount='+amount; changes += 1; } if(saleDate != originalSaleDate) { query += '&SaleDate='+saleDate; changes += 1; } if( changes == 0 ) { var message = { "message" : "Nothing to update" }; return message; } else { return $http.get('http://secrdir.com/campus/ionic/update_sale.php'+query) .then(function (response) { return response.data; }); } } }; }) |
21. | Change every occurrence of http://secrdir.com/campus/ionic/ in the services.js file to the URL path to your APIs. |
22. | Save and Close services.js. |
Exporting Your Mobile App to your Website
23. |
To export your app to your server,
|