Mobile Campus Travel Assignment

Click to view these instructions outside of WordPress.

Instructions for Campus Travel Mobile App Project in Ionic Creator

In this project you are going to create a mobile app version of the Campus Travel website like this. Click to watch video instructions.

The app's functionality is the same as the other Campus Travel applications you may have been assigned. A ficticious travel agency has several offices around Hawaii each with one or more agents. Agents sell travel to several destinations.

The completed app can display two reports. It can add agents and sales. It can also search, modify and delete sales.

Your mobile app will require a set of APIs to carry out the database functions on the server. Your assignment is to use APIs you created on your own server, however you can use these APIs for testing.

API File Documentation
Database Connection Include File /campus_api/_global.php Listing
Add Agent /campus_api/add_agent.php Listing Execution
Add Sale /campus_api/add_sale.php Listing Execution
Create Tables /campus_api/create_tables.php Listing Execution
Delete Sale /campus_api/delete_sale.php Listing Execution
Error Log /campus_api/error_log Listing Execution
List /campus_api/list.php Listing Execution
Update Sale /campus_api/update_sale.php Listing Execution

For these APIs to work on your server you will need to create a MySQL database, user, and password. Then you need to add these credentials in the _global.php file. (See _global.php Listing.)

To initialize the database, execute the create_tables.php program with query string "today=yyyy-mm-dd" where yyyy-mm-dd is today's date (e.g., create_tables.php?today=2018-11-19). You can always run this program to reinitialize the database.

This assignment requires you to sign up for the Creator.ionic.io free plan. Once you have created all your pages, you can upgrade to the Pro version and complete Part 2 in Creator. If you choose not to upgrade, you can export your project to your desktop and complete Part 2 using a text editor. The final step of the assignment is upload your working app to your web server so it is accessible on the Internet and I can grade it.


1. Sign up for Creator.Ionic.io.
2. Create a new project named "Campus Travel"
  1. Click +New Project
  2. Name your project: Campus Travel
  3. Click Tabs project type
  4. Click Create Project
3. Change existing pages to Home, Agent Bookings and Sales.
  1. Click the "Tabs Controller" page in the upper left box. The Routing URL should be "/page1"
    Change the Title to "Campus Travel"
  2. Click to the "Camera Tab Default Page." The Routing URL should be "/page2"
    Change the Title to "Home"
  3. Click to the "Cart Tab Default Page." The Routing URL should be "/page3"
    Change the Title to "Agent Bookings"
  4. Click to the "Cloud Tab Default Page." The Routing URL should be "/page4"
    Change the Title to "Sales"
  5. Click to return to the "Campus Travel" tabs controller. The Routing URL should still be "/page1"
  6. Click on the "Camera Tab" on the bottom.
    Change the Title to "Home"
    Change the Icon to something more appropriate. (e.g., searching for "home" suggests "ion-ios-home-outline")
  7. Click on the "Cart Tab" on the bottom.
    Change the Title to "Agent Bookings"
    Change the Icon to something more appropriate. (Searching "book" suggests "ion-ios-book-outline")
  8. Click on the "Cloud Tab" on the bottom.
    Change the title to "Sales"
    Change the Icon. (Searching "cash" suggests "ion-cash")
  9. To run your App, first make sure you are on the Home screen by clicking on the Home page in the Pages panel. Then click the Preview icon at the top.
    Test to see that the tab navigation works.
4. Add new pages Add Agent, Add Sale, Search Sales, Search Results and Update Sale.
  1. Click on "Add Page" above the Pages panel on the left. Add a Blank page. The Routing URL (in the Page panel on the right) should be "/page5"
    Change the Title to "Add Agent"
  2. Click on "Add Page" above the Pages panel on the left. Add a Blank page. The Routing URL (in the Page panel on the right) should be "/page6"
    Change the Title to "Add Sale"
  3. Click on "Add Page" above the Pages panel on the left. Add a Blank page. The Routing URL (in the Page panel on the right) should be "/page7"
    Change the Title to "Search Sales"
  4. Click on "Add Page" above the Pages panel on the left. Add a Blank page. The Routing URL (in the Page panel on the right) should be "/page8"
    Change the Title to "Search Results"
  5. Click on "Add Page" above the Pages panel on the left. Add a Blank page. The Routing URL (in the Page panel on the right) should be "/page9"
    Change the Title to "Update Sale"

All the blank pages for the app have now been created.

5. Add Home Screen Navigation.
  1. Click on the Home screen in the Pages panel on the left. The Routing URL (in the Page panel on the right) should be "/page2"
  2. On the Components panel on the left, find the Icon List Item. It is near the bottom with a star on the left. Drag the component on to the Home screen.
  3. With the Icon List Item selected, the List Item properties panel should appear on the right.
    For the Link Type, click the Page (first) icon. Select Agent Bookings - /page3.
    For the Style Type, select Icon.
    For Left Icon, you can choose ion-ios-book-outline to represent agent bookings, or anything appropriate.
    For Text Content, enter Agent Bookings.
    For Right Side Icon, you can choose ion-ios-arrow-right or anything appropriate.
  4. Click on the Duplicate icon in the upper right corner of the Agent Bookings List Item four (4) times.
    Next you will modify the duplicate List Items to route to the Sales, Add Agent, Add Sale and Search Sales pages.
  5. Click on the Second List Item. The List Item properties panel should appear on the right.
    Change the Link page to Sales - /page4.
    For Left Icon, you can choose ion-cash to represent Sales, or anything appropriate.
    Change Text Content to Sales.
  6. Click on the Third List Item. The List Item properties panel should appear on the right.
    Change the Link page to Add Agent - /page5.
    For Left Icon, you can choose ion-ios-person-outline to represent an agent, or anything appropriate.
    Change Text Content to Add Agent.
  7. Click on the Fourth List Item. The List Item properties panel should appear on the right.
    Change the Link page to Add Sale - /page6.
    For Left Icon, you can choose ion-ios-barcode-outline to represent a sale, or anything appropriate.
    Change Text Content to Add Sale.
  8. Click on the Fifth List Item. The List Item properties panel should appear on the right.
    Change the Link page to Search Sales - /page7.
    For Left Icon, you can choose ion-ios-search to represent Search Sales, or anything appropriate.
    Change Text Content to Search Sales.

The home page is now complete.

6. Add content to the Agent Bookings page.
  1. In the Pages panel in the upper left, click Agent Bookings to select the Agent Bookings page.
  2. On the Components panel on the left below the Pages panel, find the dotted rectangle Container icon near the top.
    Drag the Container component on to the Agent Bookings screen.
    With the container selected, on the right properties panel, in the Styles section, enter "row" for Classes. The Tag input should contain "div."
  3. From the Components panel, drag another Container component into the inside the first container.
    With the container selected, on the right properties panel, in the Styles section, enter "col-25" for Classes. The Tag input should contain "div."
  4. From the Components panel, drag a Paragraph component into the inside the second container.
    With the paragraph selected, on the right properties panel, in the Content panel, enter "**Name**"
  5. Select the div col-25 container that contains the paragraph.
  6. With the div col-25 container selected, click the Duplicate icon in the upper right three (3) times.
    There should now be 4 div col-25 containers within the div row container.
  7. Change the paragraph text in the second column to "**Office**"
    Change the paragraph text in the third column to "**#**"
    Change the paragraph in the fourth column to "**Total**"
    For the fourth column (**Total**) click the third Align icon to Align Right.
  8. Click and change the third div col-25 container to col-10. Click and change the first col-25 container to col-33.
  9. Click above the Properties panel to select the div row container (that contains the four column containers).
    Click the Duplicate icon in the upper right once.
  10. Change the paragraph text of the second row first column from **Name** to "{{ booking.AgentName }}"
    Change the paragraph text of the second row second column from **Office** to "{{ booking.OfficeLocation }}"
    Change the paragraph text of the second row third column from **#** to "{{ booking.NumSales }}"
    Change the paragraph text of the second row fourth column from **Total** to "{{ booking.Total | currency }}"

The Agent Bookings page now contains all the components. The exported file will be templates/agentBookings.html.
In Part 2 we will add the Angular directive ng-repeat="booking in bookings" to repeat the second div row to display each agent's bookings.

7. Add content to the Sales page.
  1. In the Pages panel in the upper left, click Sales to select the Sales page.
  2. On the Components panel on the left below the Pages panel, drag a Container component on to the Sales screen.
    In the Styles section, enter "row" for Classes. The Tag input should contain "div."
  3. From the Components panel, drag another Container component into the inside the div row container you just added.
    With the container selected, on the right properties panel, in the Styles section, enter "col-33" for Classes.
  4. From the Components panel, drag a Paragraph component into the inside the div col-33 container.
    With the container selected, on the right properties panel, in the Content panel, enter "**Date**"
  5. Select the div col-33 container that contains the paragraph. Click the Duplicate icon in the upper right twice (2 times).
    There should now be 3 div col-33 containers within the div row container.
  6. Change the paragraph text in the second column to "**Agent/ Office**"
    Change the paragraph text in the third column to "**Amount/ Destination**"
    Also for the third column, click to Align Right.
  7. On the Components panel on the left below the Pages panel, drag a Container component on to the Sales screen underneath the first row.
    In the Styles section, enter "row" for Classes. The Tag input should contain "div."
  8. From the Components panel, drag another Container component into the inside the div row container you just added.
    With the container selected, on the right properties panel, in the Styles section, enter "col-33" for Classes.
  9. From the Components panel, drag a Html component into the inside the div col-33 container.
    With the Html component selected, on the right properties panel, replace the HTML code with:
    <p>
    {{ sale.SaleDate | date:'mediumDate' }}
    </p>
  10. Select the div col-33 container that contains the Html component. Click the Duplicate icon in the upper right twice (2 times).
    There should now be 3 div col-33 containers with Html components within the div row container.
  11. Change the HTML code in the second column to:
    <p>
    {{ sale.AgentName }}
    <br>
    {{ sale.OfficeLocation }}
    </p>

    Change the HTML code in the third column to:

    <p>
    {{ sale.Amount | currency }}
    <br>
    {{ sale.DestinationName }}
    </p>
  12. Select the third column div col-33 container and change the Style Classes to col-33 text-right.

The Sales page now contains all the components. The exported file will be templates/sales.html.
In Part 2 we will add the Angular directive ng-repeat="sale in sales" Angular directive to repeat the second div row to display sales records.

8. Add content to Add Agent page.
  1. In the Pages panel in the upper left, click Add Agent to select the Add Agent page.
  2. From the Components panel, drag an Input component on to the Add Agent screen.
    In the properties panel on the right, change both the Title and Placeholder to "Agent Name."
  3. From the Components panel, drag an Select component on to the Add Agent screen under the Agent Name Input.
    In the properties panel on the right, change the Title to "Office."
  4. From the Components panel, drag an Button component on to the Add Agent screen under the Select component.
    In the properties panel on the right, change the Text field to "Add Agent"
    Set Align to Centered.
  5. From the Components panel, drag an Paragraph component on to the Add Agent screen under the button.
    In the properties panel on the right, change the Content field to "{{ post.message }}"
    Set Align to Centered.

The Add Agent page now contains all the components. The exported file will be templates/addAgent.html.
In Part 2 we will

  1. Add the ng-model="data.agent" Angular directive to the Agent Name Input component
  2. Add the ng-model="data.office" ng-options="office.OfficeID as office.OfficeLocation for office in offices" Angular directives to the Office Select component
  3. Add the ng-click="addAgent()" ng-hide="hideButton" Angular directives to the Button component
9. Add content to Add Sale page.
  1. In the Pages panel in the upper left, click Add Sale to select the Add Sale page.
  2. From the Components panel, drag a Select component on to the Add Sale screen.
    In the properties panel on the right, change the Titleto "Agent."
  3. From the Components panel, drag an Input component on to the Add Sale screen under the Agent Select.
    In the properties panel on the right, change the Title to "Date."
    Change the Type to Date.
  4. From the Components panel, drag a Select component on to the Add Sale screen under the Date input.
    In the properties panel on the right, change the Titleto "Destination."
  5. From the Components panel, drag an Input component on to the Add Sale screen under the Destination Select.
    In the properties panel on the right, change the Title to "Amount."
    Change the Type to Number.
    Change the Placeholder to "$ Sale Amount."
  6. From the Components panel, drag a Button component on to the Add Sale screen under the Amount input.
    In the properties panel on the right, change the Text field to "Add Sale"
    Set Align to Centered.
  7. From the Components panel, drag an Paragraph component on to the Add Agent screen under the button.
    In the properties panel on the right, change the Content field to "{{ post.message }}"
    Set Align to Centered.

The Add Sale page now contains all the components. The exported file will be templates/addSale.html.
In Part 2 we will

  1. Add the ng-model="data.agent" ng-options="agent.AgentID as agent.AgentName for agent in agents" Angular directives to the Agent Select component
  2. Add the ng-model="data.saleDate" Angular directive to the Sale Date Input component
  3. Add the ng-model="data.destination" ng-options="destination.DestinationID as destination.DestinationName for destination in destinations" Angular directives to the Destination Select component
  4. Add the ng-model="data.amount" Angular directive to the Amount Input component
  5. Add the ng-click="addSale()" and ng-hide="hideButton" Angular directives to the Button component
10. Add content to Search Sales page.
  1. In the Pages panel in the upper left, click Search Sales to select the Search Sales page.
  2. From the Components panel, drag a Select component on to the Search Sales screen.
    In the properties panel on the right, change the Titleto "Agent."
  3. From the Components panel, drag a Select component on to the Search Sales screen under the Agent Select.
    In the properties panel on the right, change the Titleto "Destination."
  4. From the Components panel, drag an Input component on to the Search Sales screen under the Destination Select.
    In the properties panel on the right, change the Title to "Amounts Above $."
    Change the Type to Number.
    Change the Placeholder to "0.00."
  5. From the Components panel, drag an Input component on to the Search Sales screen under the Amounts Above input.
    In the properties panel on the right, change the Title to "Amounts Below $."
    Change the Type to Number.
    Change the Placeholder to "0.00."
  6. From the Components panel, drag a Button component on to the Search Sales screen under the Amount input.
    In the properties panel on the right, change the Text field to "Search Sales"
    For the Link Type, click the Page (first) icon. Select Search Results - /page8.
    Set Align to Centered.

The Search Sales page now contains all the components. The exported file will be templates/searchSales.html.
In Part 2 we will

  1. Add the ng-model="data.agent" ng-options="agent.AgentID as agent.AgentName for agent in agents" Angular directives to the Agent Select component
  2. Add the ng-model="data.destination" ng-options="destination.DestinationID as destination.DestinationName for destination in destinations" Angular directives to the Destination Select component
  3. Add the ng-model="data.above" Angular directive to the Amounts Above Input component
  4. Add the ng-model="data.below" Angular directive to the Amounts Below Input component
  5. Add arguments to the campusTravel.searchResults function call in the ui-sref attribute in the Search Sales Button component.
    Arguments (AgentKey, DestinationKey, AmountsAbove and AmountsBelow) are passed as properties in a JSON object: ({"agent":""+ data.agent +"","destination":""+ data.destination +"","above":""+ data.above +"","below":""+ data.below +""}).
    campusTravel.searchResults({&quot;agent&quot;:&quot;&quot;+ data.agent +&quot;&quot;,&quot;destination&quot;:&quot;&quot;+ data.destination +&quot;&quot;,&quot;above&quot;:&quot;&quot;+ data.above +&quot;&quot;,&quot;below&quot;:&quot;&quot;+ data.below +&quot;&quot;})
  6. Add the ng-click="searchSales()" Angular directive to the Button component
11. Add content to the Search Results page.
  1. In the Pages panel in the upper left, click Search Results to select the Search Results page.
  2. From the Components panel, drag an Paragraph component on to the Search Results page.
    In the properties panel on the right, change the Content field to "{{ data.criteria }}"
    Set Align to Centered.
  3. On the Components panel on the left below the Pages panel, drag a Container component on to the Sales screen under the paragraph.
    In the Styles section, enter "row" for Classes. The Tag input should contain "div."
  4. From the Components panel, drag another Container component into the inside the div row container you just added.
    With the container selected, on the right properties panel, in the Styles section, enter "col-25 col-bottom" for Classes.
  5. With the div col-25 col-bottom container selected, click the Duplicate icon in the upper right twice (2 times).
    There should now be three div col-25 col-bottom containers within the div row container.
  6. Click to select the middle div col-25 col-bottom container. Changes the Style Classes to "col-33 col-offset-10 col-bottom."
  7. From the Components panel, drag a Paragraph component into each of three column div col- containers.
    Change the Content of the first Paragraph to "**Date**"
    Change the Content of the second Paragraph to "**Agent/ Office**"
    Change the Content of the third Paragraph to "**Amount/ Destination**".
    Also, click to Align Right the third paragraph.
  8. On the Components panel on the left below the Pages panel, drag a Container component on to the Search Results screen underneath the first row.
    In the Styles section, enter "row" for Classes. The Tag input should contain "div."
  9. From the Components panel, drag another Container component into the inside the div row container you just added.
    With the container selected, on the right properties panel, in the Styles section, enter "col-25 col-top" for Classes.
  10. With the div col-25 container selected, click the Duplicate icon in the upper right twice (2 times).
    There should now be three div col-25 containers within the second div row container.
  11. Click to select the middle div col-25 col-bottom container. Changes the Style Classes to "col-33 col-offset-10 col-top."
  12. From the Components panel, drag a Button component into the inside the first div col-25 col-top container.
    For the Link Type, click the Page (first) icon. Select Update Sale - /page9.
    With the Button component selected, on the right properties panel, replace the Text field with {{ sale.SaleDate | date:'mediumDate' }}.
  13. From the Components panel, drag an Html component into the inside of the second div col-33 col-offset-10 col-top component.
  14. Change the HTML code in the second column to:
    <p>
    {{ sale.AgentName }}
    <br>
    {{ sale.OfficeLocation }}
    </p>
  15. From the Components panel, drag an Html component into the inside of the third div col-25 col-top component.
  16. Change the HTML code in the second column to:
    <p>
    {{ sale.Amount | currency }}
    <br>
    {{ sale.DestinationName }}
    </p>
  17. Select the third column div col-25 col-top container and change the Style Classes to col-25 col-top text-right.

The Search Results page now contains all the components. The exported file will be templates/searchResults.html.
In Part 2 we will

  1. Add the ng-repeat="sale in sales" Angular directive to repeat the second div row to display sales records
  2. Add arguments to the campusTravel.updateSale function call in the ui-sref attribute in Button component.
    The saleId argument is passed as a property in a JSON object: ({"saleId":""+ sale.SaleID +""}).
    campusTravel.updateSale({&quot;saleId&quot;:&quot;&quot;+ sale.SaleID +&quot;&quot;})
  3. Add the ng-click="updateSale()" Angular directive to the Button component
12. Add content to Update Sale page.
  1. In the Pages panel in the upper left, click Update Sale to select the Update Sale page.
  2. Delete Sale Form.
    From the Components panel on the left below the Pages panel, drag a Container component on to the Sales screen.
    In the Styles section, enter "row" for Classes. The Tag input should contain "div."
  3. From the Components panel, drag another Container component into the inside the div row container you just added.
    With the container selected, on the right properties panel, in the Styles section, enter "col-25" for Classes.
  4. With the div col-25 container selected, click the Duplicate icon in the upper right.
    There should now be two div col-25 containers within the div row container.
  5. With the first div col-25 container selected, in the properties panel on the right, change the Style Classes to col-75.
  6. From the Components panel on the left, drag a Button component into the inside of the div col-25 container on the right of the screen.
    In the properties panel, change the Text to Delete. Change the Theme to Assertive to give the button a different color.
  7. From the Components panel on the left, drag a Container component into the inside of the div col-75 container on the left of the screen.
    In the Styles section, enter "row" for Classes.
  8. From the Components panel, drag another Container component into the inside the div row container you just added.
    With the container selected, on the right properties panel, in the Styles section, enter "col-33" for Classes.
  9. From the Components panel, drag Paragraph component into the inside the div col-33 container you just added.
    With the container selected, on the right properties panel, change the content to "Agent:".
  10. With the div col-33 container (that holds the paragraph) selected, click the Duplicate icon in the upper right.
    There should now be two div col-33 containers (containing "Agent:") within the div row container.
  11. With the second div col-33 container selected, in the properties panel on the right, change the Style Classes to col-66.
  12. Replace "Agent:" in the paragraph in the div col-66 container with "{{ sale.AgentName }}".
  13. Select the div row container that is inside the div col-66 container and click the Duplicate icon in the upper right three (3 times).
    There should now be four div row containers within the div col-66 container.
  14. In the second row, replace "Agent:" with "Date:" and change {{ sale.AgentName }} in the second column to "{{ sale.SaleDate | date:'mediumDate' }}".
  15. In the third row, replace "Agent:" with "To:" and change {{ sale.AgentName }} in the second column to "{{ sale.DestinationName }}".
  16. In the fourth row, replace "Agent:" with "Amount:" and change {{ sale.AgentName }} in the second column to "{{ sale.Amount | currency }}".
    Done with Delete Sale form.
  17. From the Components panel, drag a Paragraph component below Delete Sale form div row container.
    With the container selected, on the right properties panel, Center Align the Text and change the Content to "**{{ post.message }}**".
  18. Update Sale Form.
    From the Components panel, drag a Select component under the paragraph.
    In the properties panel on the right, change the Title to "Agent."
  19. From the Components panel, drag an Input component under the Agent Select.
    In the properties panel on the right, change the Title to "Date."
    Change the Type to Date.
  20. From the Components panel, drag a Select component under the Date input.
    In the properties panel on the right, change the Titleto "Destination."
  21. From the Components panel, drag an Input component under the Destination Select.
    In the properties panel on the right, change the Title to "Amount."
    Change the Type to Number.
    Change the Placeholder to "$ Sale Amount."
  22. From the Components panel, drag a Button component under the Amount input.
    In the properties panel on the right, change the Text field to "Update Sale"
    Set Align to Centered.

The Update Sale now contains all the components. The exported file will be templates/updateSale.html.
In Part 2 we will

  1. Add the ng-click="deleteSale()" ng-hide="hideButton" Angular directives to the Button component
  2. Add the ng-model="data.agentKey" ng-options="agent.AgentID as agent.AgentName for agent in agents" Angular directives to the Agent Select component
  3. Add the ng-model="data.saleTime" Angular directive to the Sale Date Input component
  4. Add the ng-model="data.amount" Angular directive to the Amount Input component
  5. Add the ng-model="data.destinationKey" ng-options="destination.DestinationID as destination.DestinationName for destination in destinations" Angular directives to the Destination Select component
  6. Add the ng-click="updateSale()" ng-hide="hideButton" Angular directives to the Button component

Connecting Services and APIs to your Mobile App

13. Finishing the app involves adding Angular directives to your HTML pages and adding some additional code to three JavaScript files.

If you would like to finish the project without upgrading to Ionic Creator Pro, then continue with free version.

If you would like to upgrade to Ionic Creator Pro, then continue with Pro version. If you have a coupon to upgrade to the Pro version at a reduced monthly rate and are having trouble doing so, watch this video.