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,
|