Un $t$ Information

localhost$/$idd$/$task$05/5\mathrm{.}4$d$-$lookup$2.$htm$|$#$/$She Q

Unit Information System

$\backslash$table$[[$Code$,$Descrirtion,More I$$fo$],[IC{T}^{10001},$Froklem Sching with ICT,show de:ails$],[cos100cs,$Vieb Development,show details$],[IN=10033,$Inticduction to Busiress Information Systems,show deralls$],[IN=100,$Catabase Anal$/$sic and Dasign,show dezails$],[cos100c0,$Introduction ts Programming,show dotails$],[IN=30029,$Informasicn Technobcy Frolect Maraqernent,show deralls$],[$IET$300$J$5,$Frofessibnal issuea $n$ Irformaticn Trehnology,show detalls$],[$ICT$300)1,$Informasicn Technols$$y Frojed,show dotall$]]$

Unit Code: COS$10009$

Cosianna

Introducion to Progranning

$1250$

CoreInterface Design and Development

Credit Task $5\mathrm{.}4$: Creating Router

Overview

In this task, you will create a router that will display unit information using a view template in your

web application.

Purpose: Learn how to use component and create router.

Task: Create a web app that allows users to click of a unit to show more information.

Time: This task should be completed before the start of week $7,$ but may be completed

later $($see following note$).$

Resources:

$$ Lecture notes #$3,$ #$4$ and #$5$

Submission Details

You must submit the following files:

$$ Unit information source code $(*.$html$).$

$$ Unit information component and router source code $(*.$js$).$

$$ Screenshot of the web app.

Please submit the html and js files as one zip file and submit the screenshot as a

separate file.

Make sure that your task has the following in your submission:

$$ The routing web application is HTML$5$ compliant.

$$ Demonstrates understanding in using the VueJS framework.

$$ Demonstrates use of VueJS component and router.

Note: If you are not currently up to date you should skip this task and return to it once you

are up to date with the Pass Tasks. Do not allow Credit Tasks to delay you in keeping up

with the unit's Pass Tasks.

Interface Design and Development Credit Task $5\mathrm{.}4$: Creating Router

$2$

Instructions

Implement the unit information web app that display detailed unit information. In this web

application, you will need to implement a route to show the detailed information of a selected unit.

$1.$ Start by creating a new HTML file in an editor.

$2.$ Implement the basic outline of an VueJS web app with the appropriate scripts.

$3.$ Create the web application HTML file with the following:

$$ Initialise the array of objects with the following unit information

Unit codes Units Credit points Type

ICT$10001$ Problem Solving with ICT $12\mathrm{.}5$ Core

COS$10005$ Web Development $12\mathrm{.}5$ Core

INF$10003$ Introduction to Business Information Systems $12\mathrm{.}5$ Core

INF$10002$ Database Analysis and Design $12\mathrm{.}5$ Core

COS$10009$ Introduction to Programming $12\mathrm{.}5$ Core

INF$30029$ Information Technology Project Management $12\mathrm{.}5$ Core

ICT$30005$ Professional Issues in Information Technology $12\mathrm{.}5$ Core

ICT$30001$ Information Technology Project $12\mathrm{.}5$ Core

Table $1$: Unit Information

$$ Display the table that list the unit information from Task $3\mathrm{.}2.$ Search and filter is optional

for this task.

Note: It is a good practice to write the component in a separate file.

Note: Mark up the code using Bootstrap is optional for this task.

Interface Design and Development Credit Task $5\mathrm{.}4$: Creating Router

$3$

$4.$ Create the unit detail view templates that will list the unit information. We will limit the

information to unit code, description, credit point and type.

$5.$ Create the component file applookup$2.$js with the template $($next page$).$

$6.$ Your web app should now be complete. Make sure you test it on the browser to make sure

that it works as you expect.

Note: The unit code is used as key to retrieve detailed information from the database. For

this task, we will retrieve the unit information from the model with the unit code as filter.

Interface Design and Development Credit Task $5\mathrm{.}4$: Creating Router

$4$

Web App: applookup$2.$js

$//$Defining the list of units in an array

var units $=[...]$;

$//$ creating a component for the units to pass in the router

const Unit $=\{$

data$()\{$ return $\{$ units $\}\},$

$//$define the template for the route results

template: $...,$

computed: $\{$

$//$filter function $($returns the selected unit object $)$

filteredUnits: function$()\{$

$...$

$\}$

$\}$

$\}$

$//$ Creating the VueRouter

const router $=$ new VueRouter$(\{$

routes: $[\{$

path: $\text{'}/$unit$/$:id$\text{'},$

component: Unit

$\}//$defining path and the component

$]$

$\})$

$//$ creating component for the lookup table

Vue.component$(\text{'}$app$-$lookup$2\text{'},\{$

data: function$()\{$

return $\{$

units

$\}$

$\},$

$//$defining template for the app

template: $...$

$\})$

$//$Creating new Vue instance

new Vue$(\{$

router, $//$passing router instance

el: $"$#app", $//$specifying the app

$//$passing the data to be used in the app

data: $\{$

id: $\text{'}\text{'},$

units

$\}$

$\})$;