NOV 2021/SWC3113/SWC3403

LAB TEST

COURSE : INTRODUCTION IN MOBILE APPLICATION

/ INTRODUCTION IN MOBILE
APPLICATION DEVELOPMENT

COURSE CODE : SWC3113/SWC3403

DURATION : 2 HOURS

1 This lab test aims to fulfil CLO2 - Apply appropriate functions, requirements and
. methods in mobile solution implementation. (C3, PLO2).

2 The marks allocated for this lab test is 25% of total marks.
.
3 This lab test consists of ONE (1) question.
.
4 Submit the answer sheet document which include code, screenshot of interface and
. recorded demo video link through LMS or Google Classroom.
5 This is a close book lab test. You are not allowed to refer to any resources such as
. Internet and Books.
6 Any plagiarism will be penalized.
.

DO NOT OPEN THIS QUESTION PAPER UNTIL YOU ARE TOLD TO DO SO

This question paper consists of 4 printed pages including the front page
 NOV 2021/SWC3113/SWC3403

QUESTION 1: MY BIODATA APPS

You are assigned to create a My Biodata Apps for an introduction class. This application
should contain only 4 pages. Design the application creatively by including appropriate
information and multimedia element such as image, audio or video.
The following are examples of interface design for each page. You shall design your own
application based on the given interface design.
You might use: sidemenu bar, tab bar or your own design button. All button must navigate to
the related pages.
Your apps should include:
● Text
● Image
● Button
● Link
● Video

2
 NOV 2021/SWC3113/SWC3403

Page 1 - Home

home.page.html
<ion-header>

<ion-toolbar>

<ion-title></ion-title>

</ion-toolbar>

</ion-header>

<ion-content>

<p class="ion-text-center"> WELCOME </p>

<p class="ion-text-center">

<img src="assets/pic1.jpeg" width=50%>

</p>

<p class="ion-text-center"> MY </p>

3
 NOV 2021/SWC3113/SWC3403

<p class="ion-text-center"> BIODATA APP </p>

<ion-grid fixed>

<ion-row class="ion-align-items-center">

<ion-col class="ion-text-center" size="12">

<ion-button class="ion-text-center" [routerLink]="['/myself']"

shape="round">

ABOUT MY SELF

</ion-button>

</ion-col>

<ion-col class="ion-text-center" size="12">

<ion-button color="primary" [routerLink]="['/family']"

shape="round">

ABOUT MY FAMILY

</ion-button>

</ion-col>

<ion-col class="ion-text-center" size="12">

<ion-button class="ion-text-center" [routerLink]="['/gallery']"

shape="round">

GALLERY

</ion-button>

</ion-col>

</ion-row>

</ion-grid>

</ion-content>

4
 NOV 2021/SWC3113/SWC3403

home.page.scss
*{

font-family: 'Sansita Swashed', cursive;

5
 NOV 2021/SWC3113/SWC3403

Page 2 – About Yourself

myself.page.html
<style>

@import
url('https://fonts.googleapis.com/css2?family=Sansita+Swashed:wght@600&dis
play=swap');

</style>

<ion-header>

<ion-toolbar color="primary">

<ion-title>Myself</ion-title>

<ion-buttons slot="start">

<ion-back-button></ion-back-button>

6
 NOV 2021/SWC3113/SWC3403

</ion-buttons>

</ion-toolbar>

</ion-header>

<ion-content>

<p class="ion-text-center">

<img src="assets/pic2.jpeg" width=50%>

</p>

<ion-text>

<p>Name: Muhammad Ezral Redzuan Bin Azlee</p>

</ion-text>

<ion-text>

<p>TelePhone: 0176829407</p>

</ion-text>

<ion-text>

<p>Address: 3, jalan mutiara 1, desa mutiara salak, 43900, sepang,

selangor, malaysia, Sepang, 43900, Selangor</p>

</ion-text>

<ion-text>

<p>Course: Diploma In Computer Sciences</p>

</ion-text>

<ion-text>

<p>Semester: Semester 5</p>

</ion-text>

<ion-text>

<p>Section: Section 5</p>

7
 NOV 2021/SWC3113/SWC3403

</ion-text>

</ion-content>

myself.page.scss
*{

font-family: 'Sansita Swashed', cursive;

8
 NOV 2021/SWC3113/SWC3403

Page 3 – About Your Family

family.page.html

<style>

@import
url('https://fonts.googleapis.com/css2?family=Sansita+Swashed:wght@600&dis
play=swap');

</style>

<ion-header>

<ion-toolbar color="primary">

<ion-title>My Family</ion-title>

<ion-buttons slot="start">

<ion-back-button></ion-back-button>

</ion-buttons>

9
 NOV 2021/SWC3113/SWC3403

</ion-toolbar>

</ion-header>

<ion-content>

<p class="ion-text-center">

<img src="assets/pic5.jpeg" width=100%>

</p>

<ion-text>

<p>Family Member: <br>

- Azlee Bin Ismail (Father), <br> - Rusni Binti Che Adnan(Mother),

<br>

- Afiq Redzuan Bin Azlee(First Oldest Brother), <br> - Muhammad

Aliff Redzuan Bin Azlee(Second Oldest Brother), <br>

- Muhammad Ezral Redzuan Bin Azlee(Me), <br> - Muhammad Isyraf

Redzuan Bin Azlee(Little Brother), <br> - Nur Azyyati Redza Binti
Azlee(Younger Sister), <br>

- Nur Izyani Redza Binti Azlee(Youngest Sister)

</p>

</ion-text>

<ion-text>

<p>Name's Father: Azlee Bin Ismail</p>

</ion-text>

<ion-text>

<p>Name's Mother: Rusni Binti Che Adnan</p>

</ion-text>

<ion-text>

<p>No. Of Sibling: 6 Siblings</p>

10
 NOV 2021/SWC3113/SWC3403

</ion-text>

</ion-content>

family.page.scss

*{

font-family: 'Sansita Swashed', cursive;

11
 NOV 2021/SWC3113/SWC3403

Page 4 – Gallery

gallery.page.html

<style>

@import
url('https://fonts.googleapis.com/css2?family=Sansita+Swashed:wght@600&dis
play=swap');

</style>

<ion-header>

<ion-toolbar color="primary">

<ion-title>Gallery</ion-title>

<ion-buttons slot="start">

<ion-back-button></ion-back-button>

</ion-buttons>

12
 NOV 2021/SWC3113/SWC3403

</ion-toolbar>

</ion-header>

<ion-content>

<ion-card>

<video

height="300"

width="100%"

controls="controls"

preload="metadata"

autoplay="autoplay"

webkit-playsinline="webkit-playsinline"

class="videoPlayer">

<source src="assets/vid1.mp4" type="video/mp4" />

</video>

</ion-card>

<ion-grid>

<ion-row>

<ion-col size="6">

<p class="ion-text-center">

<img src="assets/pic1.jpeg" width=100%>

</p>

</ion-col>

<ion-col size="6">

<p class="ion-text-center">

<img src="assets/pic2.jpeg" width=100%>

13
 NOV 2021/SWC3113/SWC3403

</p>

</ion-col>

</ion-row>

<ion-row>

<ion-col size="6">

<p class="ion-text-center">

<img src="assets/pic3.jpeg" width=100%>

</p>

</ion-col>

<ion-col size="6">

<p class="ion-text-center">

<img src="assets/pic4.jpeg" width=100%>

</p>

</ion-col>

</ion-row>

</ion-grid>

</ion-content>

gallery.page.scss

*{

font-family: 'Sansita Swashed', cursive;

(Total marks: 100 MARKS)

END OF QUESTION PAPER

14