PO RTFO LIO

OF
M.
SAAD SH AFIQ
 CO NTENTS

WEBSI
TES
PERSONALI
TYBASEDE-
RECRUI
TMENTANDCVRANKI
NG SYSTEM

LI
BRARYMANAGEMENTSYSTEM

WEBSI
TETHEME

ANDROI
DAPPLI
CATI
ONS
PHANTOM GUARD

YOGA APPLI
CATI
ON

HCICOURSEPROJECT
SMARTCLASSROOMSUI

FREELANCEWORK
POSTERDESI
GNS
Fi
nalye
arpr
oje
ctc
our
sei
sama
nda
tor
ycour
sef
ort
hec
ompl
et
ionofaBa
che
lorof
Sc
ienc
e(Hons
)inComput
erSc
ienc
e.Thepr
oje
ctwa
sdi
vide
dint
otwopa
rtsapor
t/
the
-
s
ispa
rta
nda
nimpl
eme
nta
ti
on(
progr
ammi
ng)pa
rt.
Thepr
oje
cti
smos
tl
ydonei
npa
irs
.

AboutThePr
oject
Wede
vel
ope
dawe
bsi
tet
hatma
kest
hewhol
ere
crui
ti
ngpr
oce
sse
ffi
ci
ent
.Thi
swe
bsi
te
r
ankst
her
esume
ssubmi
tt
edbypot
ent
ia
lca
ndi
dat
esa
ccor
dingt
othe
ire
xpe
rie
ncea
nda
t
rai
nedma
chi
nel
ear
ningmode
lpr
ovi
dest
her
ecr
uit
erwi
tht
hepe
rsona
li
tyt
rai
tsoft
hea
ppl
i-
c
ant
sonl
yift
hea
ppl
ic
antf
il
lsape
rsona
li
tyt
estThepe
rsona
li
tyt
esti
s16pft
hatc
los
elyc
or-
r
espondst
otheba
sic“
Big5pe
rsona
li
tyt
rai
ts
”.La
stl
y,weha
vede
signe
dfor
mss
ucha
s
r
esumea
ndj
obpos
ti
ngf
ormt
oma
ket
hepr
oce
sse
ffi
ci
enta
nde
ffe
cti
vebye
li
mina
ti
ngr
e-
dunda
nti
nfor
mat
ion.
 WEBSI
TE PAGES
Logi
nandRegi
str
ati
on

Si
gnupa ndlogi
npa ge
sarea nint
egra
lpar
tofanywebsi
te
.SoItri
ed
t
oma kethedesi
gnsuser-
frie
ndlyandfor
ma l
.Iuse
dBootst
rapl
ibr
ary
toma kethe
mr espons
ivethustheycane
asil
ybeusedonanydevi
ce
ofanyscre
ensi
ze.
 WEBSI
TE PAGES

LANDI
NG PAGE DASHBOARD

TheLa ndi
ngpageisthev er
yf ir
stpagethattheuserseeswh e
ntheyv is
itt
he
s
it
e.Iint
enti
onal
lyputtwob ut
tonsonthet opsothatthefre
quentusersdonot
ha
vetoscrol
lthr
oughth ewh ol
ewe bs
it
e.Th elandi
ngp agehasalargeBo ot
st
rap
c
arous
elanddif
fere
n tinfor
ma ti
onregardingtheservi
cesprovi
dedb ythe
websit
e.
FortheDashboar
dlayo ut
,Ih aveused"Ad minLTE"wh i
chisanope nsourc
e
desi
gn.Ihaveint
egrat
ed“ Swe etale
rt”inthewe bsi
tesot ha
ttheuserint
erfa
ce
c
anb ema demo reinter
acti
ve.
Boots
tra
pl i
bra
ryhasma deallthepagesrespons
iveh e
n ce
,ma ki
ngthep ages
adapttod i
ff
e r
entdevicesandscreensizes
.
 HTML
CSS
Javascr
ipt
JQuer
y
Boot
str
ap

USEFULLI
NKS

SOURCE CODE
ht
tps:
//bi
tbucket
.or
g/saadshaf
iq1/f
yp-
3.0-
recr
uit
er-
syst
em/
DEMO OFTHE WEBSI
TE
htt
ps://dri
ve.
googl
e.com/f
ile/d/1bz
VPvGAbz
Pj3t
hSRr
HjOLmt
N-
bqvfNe8O/vi
ew?usp=shari
ng

REPORT/THEI
SIS
htt
ps://dr
ive.
googl
e.com/f
il
e/d/1vhYP0vbOI
STCawHYS_Qt
Atf
cSpYH-
cKiO/vi
ew?usp=sharing
 Landi
ng/Si
gnuppage

AboutThePr
oject
Thiswasmyf ir
stever
yprojectf orthecourse" Weba ppli
cat
ion"thecours
e
isanelec
ti
veandthisproj
ectisa ne ss
enti
a lpartofit
.
Thiswebsit
eisbasi
cal
lysimilart othepointofs al
esystem(POS).Some
fea
ture
sforthewebsit
ea r
eaddi ng,de l
et
ing,bor r
owinga ndrequest
ingof
books.Analer
tisgener
atedifbor rowingtimee xceedstheli
mi t
.We bs
itei
s
part
ia
llyres
ponsi
ve,mediaque riesareusedf orthi
spur pos
e.
 LOGI
NPAGE DASHBOARD

“
Admi
nLTE” t
hatanopensour
cewebt
empl
atei
sint
egr
atedi
ntot
hepr
oject
andi
sbei
ngusedast
hemai
ndashboar
d.Feat
uresl
ikeaddi
ng,del
eti
ng,
r
equest
ingofbookshavebeenaddedt
othesi
depanelf
orqui
ckaccess.
Thedashboar
dbydef
aul
tisr
esponsi
veanduser
-fr
iendl
y.Ichangedt
he
col
ourt
hemef
rom f
ort
hepanelt
omakei
tmor
eappeal
ing.

LANGUAGESAND LI
BRARI
ESUSED

SOURCE CODE LI
NK :
htt
ps:
//bi
tbucket
.or
g/saadshaf
iq1/l
ibr
ary-
management
-syst
em
 LI
VE DEMO: ht
tps:
//t
heme12.
000webhost
app.
com/

ABOUTTHE THEME

Thi
sthemewascr
eat
edasasi
depr
ojectsot
hatIcanshowcasemyf
ront
-end
anddesi
gni
ngski
ll
s.Thi
sisaf
ull
-fl
edgedr
esponsi
vet
heme,i
tcanbeusedf
or
E-
commer
ceorpor
tfol
iopur
pose.Thet
hemeusesHTML5,CSS,Javascr
ipt
,and
JQuer
y.Medi
aQuer
yand Boot
str
apar
eusedt
omaket
hesi
ter
esponsi
ve.

SOURCE CODE LI
NK
ht
tps:
//gi
thub.
com/mohammadsaadshaf
iq/hexa
ABOUTTHE PROJECT
Thispro j
ectisamo b i
lephoneba s
eda ppl
ica
tio
nwh i
c ha l
lowstheusertocontr
olthe
mo bilephon emo deswithoutact
uallyhavi
ngth emo bil
ep honeinhand .Mobil
ep hon
e
mod esincl
u dev o
lumemo des,r
ingingmo de
s,locki
ngs c r
een,t
racki
ngmo bi
lephone,
et
c.Th isapplic
a t
ionaidstheusertoloca
tethei
rmo bilep hone
swh enth e
irphoneo na
si
lentorDoNo tDistur
bmo de,byr i
ngi
ngt he
ird e
viceth r
oughat e
xtme ssagesent
fr
oma nyo t
h e
rmo bilephonetotheirdevi
ce.Th i
sfeatureisal
sop r
ovidedb yGoogle
pl
ays ervic
e sandAp ple'
sFindMyi Phoneser
viceb uttheseser
vice
sa reint
erne
tdepen-
dent.Mya p pl
icat
ionu se
smo bil
esGPSs er
viceswh i
c hareavai
labl
ea tallt
imesonp er
-
sonalmo bil
ed evic
e stochangethemo bi
lephon e’
smo detoloc
atethed e
v i
ce.
 APPLI
CATI
ON DESI
GN

LOGI
N PAGE FEATURE PAGE

LANDI
NG PAGE FOR WEBSI
TE LOGI
N PAGE FOR WEBSI
TE
 LANGUAGES& TOOLSUSED

Googl e’sAndr i
odStudi owasusedt odeveloptheAndroid
appl icat i
on.Thef ront-enddevelopmentwasdoneusi ngXML
andf orback- enddevel opment ,JAVAlanguagewasused.
Websi tef orthisapplicationwasonl ybuilttoprovi
delocati
on
servicesi ncaseoft heftori fmobilewasl ost
.Thelanguages
andl ibr ariesusedt obui l
dt hewebsitewereHTML,Javascr ipt
,
JQuer yandBoot str
ap.PHPwasusedf orback-enddevelop-
mentoft hewebsit
e.

MAPSUPPORTPAGE

LI
NK
ht
tps:
//gi
thub.
com/mohammadsaadshaf
iq/Phant
om-
Guar
d
 Si
gnuppage

ABOUTTHE PROJECT
Thisapplicationwasmysemest erproj
ectforMobil
eAppl i
ca-
tioncourse.I’vebui l
tani nteracti
veAnAndr oid-
basedappl i
-
cati
onthataddr essestheni cheofamobi leyogainstruct
or,a
marketspacet hatIf eelisimmensel yunderesti
mated.Wi th
thisappli
cation,Ipl annedonbr ingi
ngallthefuncti
onali
tyof
aconstr
uct i
veappl icati
ont othemobi l
ehandsetofmyt arget
audience.
 APPLI
CATI
ON DESI
GN

Loadi
ngPage I
nfor
mat
ionPage Mai
nPage

Over
view ofPages
Thea pplic
ationiniti
a t
eswi thregistra
tionorlogi nme nuwhi chwi l
lbes elect
eda spertheus er’
s
predic
ame nt.Ther egistr
a t
ionme nuisus errespons eba se
d;s pi
nne rme chanismsa reprovided
whi chtodisplaysmul ti
pleopt i
ons .The ntherei sar ecyclerviewtha tisshowi ngdiffer
entyoga
posesande xercises.Clickingthef ragme ntr
es ultsinade script
iondi aloguewhi chguidesyou
t
hrought hewhol eproc edure,ont hese le
c t
edyogapos e.Facebooki ntegrat
ioni sdonetoa ccom-
moda t
ea nalter
na ti
vea ndqui ckwa yofl oggi
ngi n.Iha veusedf i
rebases ervic
ea saba ckendr e
-
al-
ti
meda t
abasef orwor kingwi thintens i
veda tatransmi s
siontoa ndf rommymobi leapplica
tion.Cus t
omt hemea nda cti
onba rme nua r
ea dde dwi thmul t
ipleopt i
onsa nda ct
ivit
ies,f
ort he
usertoe xplor
e .PHPa ndXMLa rethema i
nl a
ngua gesus ed.
SOURCECODELI
NK:ht
tps
:/
/bi
tbuc
ket
.or
g/s
aads
haf
iq1/
yoga
-app-
mobi
le
-appl
ic
ati
on
 DI
GITALPROTOTYPESCREENSHOTS

ABOUTTHE PROJECT
Thi sprojectwasdoneasapar tof“Human- Comput erInt er
act i
on”cour se.I
andmygr oupmember swor kedonaSmar tClassRoom syst em t hatwoul d
pr ovideabet t
erlear ningexper ienceforspecialstudent sint hecl assrooms.We
developeda useri nter
facet hatwasuser -
fri
endly,pr ovidedspeechai dfor
blindandsubt it
lesf ordeafstudent s.Thissystem hel pedt hem i nr ealtimein
classroomsaswel lasathomes.I talsoaidedstudent swhi l
er egisteringnew
courses.Thepr ot
ot ypewentt hroughnumer ousiterations.Ini t
iall
y,wedi d
paperpr ot
ot ypingandt hendi gitalprotot
yping.Userf eedbackswer et akenand
ther efinedversionwasusedi nthepr esent ati
on.
Di
git
alPrototypeLink ht
tps
://
dri
ve.
googl
e.
com/
fi
le
/d/
1YS1LbvDgCmAq9SFwMZXSU8RNT2Oc
0J24/
vie
w?us
p=s
har
ing
Pa
perPrototypeLink ht
tps
://
dri
ve.
googl
e.
com/
fi
le
/d/
1b8j
v9X4
ZKl
8NJ0
dnuOpuSCoe
oD06x7
pP/
vie
w?us
p=s
har
ing
POSTER DESI
GNS
LOGO DESI
GNS

PROFI
LE LI
NK :ht
tps:
//www.
fi
ver
r.com/mohammadsaad1