You are on page 1of 8

Shift Automation Engineers Homepage

Lee Zheng Xun

Information Communication and Technology
Universiti Teknologi Petronas
Tronoh, Perak
This paper presents the development of Shift Automation
Engineers homepage. This system will be used by all the team
members so that it could assist in their daily routine in
troubleshooting all the problems in the production of Intel
Malaysia. Originally, the responsibility of the author as an intern
trainee in the ITM SAE department is to provide full support to
the daily operation of SAE team in helping Intel Malaysia to
ma!imi"e productivity. In this point of view, the SAE homepage
portal will function as a platform for all the team members to
facilitate their daily routine, such as updating their latest
activities, use the fre#uent lin$s as boo$mar$s, publishing their
contact information for the ease of other department to as$ the
for help, record their list of inventories to ma$e ordering easier,
provide direction for the new hires to e!ecute their A%s, perform
visible recognition by using the star rating system or e&certificate,
and as an entertainment center for uploading photos. 'efore this,
there are several problems with the current practice of SAE team
members that will cause inefficiency and time consuming in
performing all of the abovementioned features. Therefore, SAE
homepage is the solution that the author came out that has the
graphic&user&interface to integrate with the current SAE share
point to serve different purposes in the web and at the same time
facilitates the SAE operations. The author uses the ()ardcoding*
approach to complete this pro+ect. ,otepad-- was used as a tool
for the coding of )TM., /)/, 0avaScript, and A0A1.
Shift automation engineers; SAE homepage project; internet
2or the first wee$ of the author3s internship in Intel
Malaysia, the Intel supervisor has assigned to him to develop an
application for the SAE team to gather all the useful tools and
save the time of the team members. At the same time, since Intel
has a strong internet connection, the author suggests that the
software to be developed in the web based system to ma$e
everyone easier to access it. 2or the solution, the author needs to
come out with a graphic&user&interface to integrate with the
current SAE share point to serve different purposes in the web to
facilitate the SAE processes. Thus, this is assigned as the main
pro+ect of the author together with another intern from 4T/,
Eddy 5oh in the same team.
After some discussion with the team members, the
author has discovered a few problems and inefficiency with the
IT management of SAE team. /roblems that are listed for further
improvement are as follow6 &
Inefficiency in lin$ searching
2re#uently visited lin$s is entered in the browser manually
by memori"ing the addresses. This is very inefficient and
time consuming as they need to memori"e complicated web
addresses in the Intel website.
SAE new hires have no direction
,ew hires, trainees, or interns for the SAE team has no idea
on what to do during the first few wee$s as the team
members are busy e!ecuting their daily routine and have no
time to manage the new hires. As new hires of Intel are
supposed to attend numerous trainings and tal$s, the buddy
assigned to the new hires does not $now their progress in
doing all those mandatory activities.
%eachability of SAE members
Since SAE plays a crucial part in the production floor and
the wor$ on shifts, the team members changes every wee$.
Sometimes when an engineer from the factory see$s
assistance, he does not $now who is responsible for the IT
issue, or who to see$ help with. Even among the team
members, if there is no team building at the current team,
new hires has absolutely no chance in meeting all the team
members at one time.
Messy information on training pac$ages
The SAE team members always attend trainings to $eep
them updated about the latest technology in the production
floor and how to troubleshoot them. )owever, countless
training has their own training pac$ages and not all of the
team members $eep the training pac$ages accordingly.
Therefore, new hires have no chance of getting the training
material from the team mates but have to attend the
trainings themselves.
.ac$ of visible recognition
7hen SAE team members accomplished something,
recognition is made during the wee$ly SAE meeting. A more
visible recognition should be made to ma$e the team
members proud of what they are doing and raise the morale
and motivation of their +ob in the production floor.
The main ob+ective of developing this pro+ect is to
increase the performance of SAE team, new hires, and basically
enhance the manufacturing process. 'y doing so with the pro+ect,
the overall productivity can be improved and thus impact the
team positively. Therefore, the solutions for each problem stated
/rovide a portal where all the important lin$s are
Important lin$s are boo$mar$ed in the author3s webpage to
enable easy surfing and saves time.
A coo$boo$ to guide the new hires
,ew hires and refer to the coo$boo$ to $now what trainings
to attend and what action need to be ta$en. 'uddy can trac$
the progress through the coo$boo$.
reate an interactive page of SAE team members
An interactive page that contains all the information of SAE
team members so that people from all over Intel $now who to
search for when they are having IT issues. Thus, improve the
efficiency of the manufacturing department.
reate a page that stores all the training pac$ages
Enable other team members to refer to the training material
when they need revising. Thus, efficiency of daily routine is
reate a page and web function that speciali"ed in
recognition of team members
The page can perform all the recognition with +ust a clic$,
which facilitates the recognition process and improves
'efore the author starts developing the pro+ect,
discussion was done with his team members during a staff
meeting. The information of each team members, permission
level and the interface were suggested by the technical lead of
SAE team, 0oey han.
The methodology used in developing this SAE
)omepage is the Agile Software 8evelopment Model, which
based on iterative and incremental development, where
re#uirements and solutions evolve through collaboration between
self&organi"ing and cross&functional teams.

The author is not alone in developing this pro+ect as he
has a partner intern, Eddy 5oh in e!ecuting pair programming in
the process. They wor$ together at one wor$station and the
(driver* writes the code while the (observer* reviews each line
of code and corrects the error. 2or us, the driver observer role is
switch fre#uently so that the observer can considers the strategic
direction of the wor$, and thus coming up with more ideas for
improvements, or future problems to address. This is very
effective as programmers wor$ing in pairs produce more efficient
programs, with better designs and fewer bugs, than programmers
wor$ing alone.
A survey is carried out online for the 4T/ students in
order to produce a greater result for the pro+ect. The #uestions
as$ed in the survey are mainly about the web design ergonomics
and accessibility features.
4.1 Pro#e$% A$%&'&%&es
In the process of developing this pro+ect, the author is
being introduced to Agile Software 8evelopment that delivers
incremental shippable products in each wee$ly sprint cycle 9as
shown in 2igure : ; below<. In each sprint cycle the author is
able to demonstrate a wor$able prototype to the supervisors or
technical lead team 9Mr. S .ai=0oey han< for their instant
4.2 Key M&(es%o)e
The $ey milestone for this pro+ect will be the wee$ly
inspection of the Intel supervisor. Since he is chec$ing the
progress and giving suggestion every wee$, the author must
develop some new functions for his supervisor to review it.
Therefore, this is driving a faster completion to the pro+ect as
deliverables or prototypes were done every wee$.
4.3 !*)%% $+*r%
A 5antt chart was created after the discussion with the
SAE technical lead. ,umber of wee$s to implement this pro+ect
in the system was decided on the day. And the duration of the
pro+ect was initially decided as > months.
'ecause of the time implications, the author and his
team have to revise the 5antt chart and ma$e changes for better
time frame. This is because the SAE team has decided to e!pand
the pro+ect to a bigger scale, add in more functionality, ma$e it
sustainable and editable in the future, and record the
documentations for future reference. Therefore, the duration of
the pro+ect was e!panded to ?&months instead of > months. At the
same time, since the author is using Agile System 8evelopment
ycle, he is introduced to a whole new way of planning his
system development lifecycle. Since the agile method doesn3t
have a 5antt chart, a 'urn 8own chart is introduced instead.
'elow is the revised 'urn 8own chart in the timeline point of
view where the system is directly developed at the starting phase,
,& 1/ T+e *-&(e so0%w*re de'e(o12e)% (&0e$y$(e
,& 2/ So0%w*re De'e(o12e)% S1r&)% Cy$(e
planning and meetings were held wee$ly to speed up the whole
4.4 De'e(o12e)% Too(s A'*&(*3(e
The author3s supervisor has provided him a laptop for
the ease of e!ecuting tas$s at office or home. Software and tools
can be downloaded from the Intel Software Supply 9ISS< which
Intel has bought the enterprise license for them and Intel
employees can use it for free. Software that the author obtained
from the ISS includes6
(,otepad--* @ (A free source code editor and ,otepad
replacement that supports several languages.* A:B It is
used by the author for hard coding in internet
programming language such as 1)TM., /)/, and
0avaScript language.
Internet Information Service @ (An app server
application and set of feature e!tension modules
created by Microsoft for use with Microsoft 7indows.*
A>B It is used as server to host the pro+ect website.
Microsoft SC. Server @ 4sed by the author to store the
data and information of the website using SC.
Adobe /hotoshop /ortable SD @ (A graphics editing
program developed and published by Adobe
Systems.*AEB It is used by the author to design the
template, buttons, and images for the website.
'esides, Intel also provides some user friendly software that is
available to all the employees to facilitate their daily tas$s, such
Microsoft Outloo$ & It is e#uipped with all the security
and custom plugins that integrates with every file on
the computer.
Microsoft ommunicator 9Microsoft .ync< & 4se as
instant messenger among the employees.
In order to get the best result in web developing, the
author had conducted an online survey in 4T/ and also Intel to
get the feedbac$ on how the web page should be developed. The
4T/ survey done by Eddy 5oh, and all the results and analysis
are referred from his report. The results of the survey are as
Survey conducted in 4T/
:. 8oes website act as a good platform to share, save and
bac$up all important information in a groupF
>. 8o you thin$ that by using a proper website and
sharing center will increase the productivity of wor$
while eliminate data redundancyF
E. 8o you have some obstacles to adapt to a new
environment during internshipF
Survey conducted in Intel Malaysia
:. 8oes the SAE team need a portal to show their contact
information and details when you want to get them to
>. Are you having difficulties when it comes to manage
training pac$ages and slidesF
E. Are you having a difficult time trying to do recognition
to the SAE team members that helped youF
4.1 D*%* A)*(ys&s
'ased on the survey conducted among the DG samples
in 4T/ and another :GG samples in Intel Malaysia, the results
had been identified and analy"ed by the author. Three different
#uestions were as$ed to both 4T/ and Intel employees to get >
different points of view.
5.1.1 Data Analysis for UTP Responents
2or the first #uestion which was as$ing the respondent
whether they agree or not a website can act as a good platform to
share, save and bac$up all important information in a group.
HGI of the 4T/ respondents agree with the statement, JI not
agree and > I were not sure about that. 'ased on the number,
students agree that a website can ease the information
management of a student. Most of the students use online
application such as 5oogle 5roup, 2aceboo$ and 8rop bo! to
share information with their teammates. Some of the comments
state that they cannot complete their assignment or pro+ect very
well without these tools that aid them for pro+ect integration.
2or #uestion number > which was as$ing the 4T/
respondent whether they agree that by using a proper website and
sharing center will increase the productivity of wor$ while
eliminate data redundancy. H>I of the respondents agree with
the statement, KI disagree and >I were not sure. The author
conclude that ma+ority of the students agree that a website act as
sharing center will increase the productivity of their wor$ on
assignments, pro+ects and researches. This shows that the data
center is the $ey point to eliminate data redundancy and increase
the efficiency use of resources.
2or #uestion number E which was as$ing the 4T/
respondents whether they have some obstacles to adapt to a new
environment during internship. ?KI of them agree with the
statement, >GI disagree and ;I of them not sure about the
#uestion. 2rom the e!tra comment, students said that they have
no proper guide or documentation on understanding the basic and
fundamental rules and regulation of the company. 7hat they
normally do is +ust refer to another friend or colleague in the
company. A;B
,& 3/ 5B.r)6dow)7 !*)%% $+*r% 0&)*( dr*0%.
5.1.! Data Analysis for "ntel #alaysia
The first #uestion as$ed the respondent whether the
SAE team need a portal to show their contact information and
details when you want to get them to troubleshoot. HGI of the
respondents agree with that statement, HI does not agree and the
minorities of :I are unsure about the decision. The statistics
shows that ma+ority are agreeing with the action that SAE team
needs a centrali"ed portal to show their contact information so
that they $now who to contact to when they need troubleshooting
regarding the IT issue instead of as$ing other people for the
The second #uestion as$ed the respondent whether if
they are having difficulties in $eeping all the training pac$ages
after they have attended a training provided by Intel. 'ased on
the results, JGI of respondents agreed that they are having
difficulties arranging with their training pac$ages for future
references, >GI does not have any difficulties storing and
managing their training slides and materials. According to the
results shown, it clearly shows that Intel employees do not have a
proper system to manage all their training materials.
2or the final #uestion in the survey, which as$ed about
are the respondents having a difficult time trying to do
recognition to the SAE team members that helped them before.
The statistics shows that ?KI of respondents agreed with that,
:;I are not having difficulties and the other :GI are unsure.
The result shows that most of the respondents are having
difficulties in producing recognition message for the SAE team
that helped them before.
After ? months of coding, development, revise and
testing, the author and his pro+ect partner finally come out with
the deliverables with the complete version with the system.
8uring the development phase, all the suggestion and results are
emphasi"ed and focused on it so that the users can en+oy what
they had re#uested earlier. This complete version of webpage has
been presented to the SAE team at :st of 8ecember >G:> during
the wee$ly staff meeting. They had commented on the web page
as very user&friendly and easy to understand the configurations.
8.1 SAE 9e31*-e e*der
The webpage header design is based on the Intel
Employee ircuit design and the code implemented is 0avaScript
for the dynamic frame changing that does not re#uire the refresh
of page. The main specialty of this header is that6
.oad each tab without reloading the page.
Increase the efficiency of the page by saving the load
Tabs can be easily add=delete by only changing one line of
code, easy for future updates.
8.2 SAE o2e P*-e
The SAE )ome page contains all the information of
SAE which includes vision, mission, ob+ectives, and latest
activities. It is an interactive page where all the information can
be easily edited by the administrator by clic$ing on the edit
button and change information on the 0avaScript popup bo!.
Employees from other department can $now what is currently
happening in the SAE department easily. This homepage part is
done by Eddy 5oh as the (8river* and the author as the
(Observer* in the pair programming process.
8.3 SAE Te*2 Me23ers P*-e
The SAE Team Members page contains all the
information of the SAE team members from both /enang and
Lulim site. Through this page, the employees from other
department can have the chance of $nowing the SAE team
members and see$ help from them easily by clic$ing on their
contact information. ADB
The members are added initially in the popup form
after clic$ing on the (Add more* button. The popup form re#uire
the user to insert their personal details such as 7orldwide I8,
I8SI8, full name, nic$ name, organi"ation manager, position,
email address, mobile number, and their photo. The popup form
is generated by the 0avaScript library called (Tiny'o!* which is
able to ta$e information from another html or /)/ page through
A0A1 re#uest. Therefore, the page does not re#uire refresh after
each clic$. After the submit button is pressed, the information
will directly update on the database and the new SAE team
member will be added on the list.
'esides, when the user clic$s on the picture of the SAE
team member, another popup will be shown on the page,
,& 3/ T+e SAE +o2e1*-e +e*der
,& 4/ T+e SAE +o2e1*-e
,& 4/ T+e SAE Te*2 Me23ers P*-e
displaying all the contact information and personal details of the
SAE member.
Some functions are provided only to the team members
but not the outsides. Those functions are such as, the (Edit*
button in case there is any information need to be edited by the
SAE users. It will turn the details in the popup bo! into an
editable form with all the previous information in it so that the
user +ust have to change a single field and update the database
with the submit button.
The (8elete* button is provided in case the SAE users
need to delete some user form the list. 0ust clic$ on the delete
and the member will be wiped out from the database with all the
records he has on this entire website.
'esides, the photos can be changed by clic$ing on the
photo and (Edit=Add Image* will come out, the user +ust has to
choose the path for the new image to be uploaded and it will be
done within a second. The figure is shown as below6
Apart from that, the position of each team members in
the page is inter&changeable. The user +ust has to clic$ on the
direction button located on the side of their image and the
position will be e!changed in the process.

Apart from all the functions, the one that stands out the
most will be the hierarchical view of the team members. This
function is suggested by the author3s supervisor, Mr. .ai and it
generates an organi"ational chart after the ()ierarchical Miew*
button is clic$ed.

The figure shown above is the organi"ational chart
generated by /)/ coding. All the positions are inter&changeable
by editing the position of each team member on the popup
information bo!. After updating the position of the designated
individual, the hierarchical table will update itself through the
database. A clearer overview of SAE team members can be
shown to the other department through this function.
8.4 SAE POR P*-e
SAE /O% stands for /urchase of %eceivables for all
the IT assets that the SAE team owns. The page contains all the
information on the assets that SAE manages in the production
floor. The entries include /4, Monitor, /rinter, Scanner, LMM
Switch, Leyboard, Mouse and ables. If the user clic$ on the
entry, it page will direct him to the list of assets that the SAE
have in the inventory, together will all the information of the IT
,& 8/ T+e 1o1.1 &)0or2*%&o) 3o:
,& ;/ T+e 1o1.1 ed&%&)- 0or2
,& </ T+e $+*)-e 1os&%&o) 3.%%o)
,& =/ T+e +&er*r$+&$*( %*3(e '&ew o0 SAE
7hen the (/4* is clic$ed, all the types and brands of
/4 will be displayed including all the information needed for
ordering new stoc$s. /ictures are attached with the name and
information of the machine, so that it is easier for recogni"ing the
appearance of e#uipment. If the user wants to edit the e#uipment
information, simply clic$ any part of the information belongs to
the e#uipment and a pop up bo! will appear for editing the
information. This part is also driven by the pair programming
partner and observed by the author.
8.4 SAE Coo> Boo> P*-e
The coo$boo$ page is a platform for new hires to $now
what they need to do when they first +oin Intel. This portion is a
reference from the author3s pair programming partner, Eddy3s
report as he is the (8river* for this portion of the pro+ect. The
figure shows the overview of the coo$boo$ page.
7hen the new hire has done some part of his=her +ob,
the tas$s can be mar$ as done and subse#uently update the
database via an A0A1 re#uest to ensure the page does not reload.
,ew hires can view their own progress report by clic$ing on the
(Miew /rogress* button and ta$e an overview on their progress.
The date and time completion of each of the tas$s done will be
shown on the table. On the other hand, their buddy can monitor
their progress and advice accordingly. AKB
2ive different levels of permission were implemented
on the coo$boo$ page to cater all different $inds of user. Each
user has their own access limits so that the information is not
e!ploited by the others. The figure shows the five different levels
of permissions in coo$boo$ page6
Another feature of the coo$boo$ is to notify the SAE
team member about the e!piry of accesses and trainings refresh.
As SAE team members always apply for access in different part
of building in the production floor for wor$ purpose, the access
can be e!pired in different period. 'elow shows the table for
inserting dates of trainings and refresh period. The users can tic$
the chec$bo! at the bottom of the page email notification for the
reminder of registration on all access and trainings every #uarter.
Apart from that, the fre#uent visited lin$s are displayed
to the SAE team members to ensure they can save time and does
not need to enter the address manually. This function improves
the efficiency of SAE by giving them all the re#uired lin$s and
don3t have to search the lin$s through emails or files
8.8 SAE P+o%o !*((ery P*-e
The SAE /hoto 5allery was added by the SAE team
during the final review. It is suggested by the team members as
Intel does not allow photos of internal events to be posted up at
any social web page, the SAE team needs a photo gallery to store
all their photos for the department to view. Therefore, the author
developed a simple photo gallery page for them to upload the
photos and manage them. 2unctions provided for the photo
gallery include6
Multiple uploads at one time
,& 1?/ T+e POR &)'e)%ory &$o)s
,& 11/ T+e Coo>3oo> 1*-e
,& 12/ Per2&ss&o) (e'e(s &) $oo>3oo> 1*-e
,& 14/ U1(o*d&)- 1ro-ress 3*r
,& 14/ SAE P+o%o !*((ery P*-e
Multiple photos can be uploaded at once to save time and
each of the progress will be shown on the popup bo!.
Images are auto resi"ed by the server to save space and
load time.
The images will be auto resi"e to less than KGG pi!els width
or height by the 0avaScript included in the code. Thumbnails
with small si"es will also be created at the time the photos
finish upload.
Slideshow 'utton
7hen the slideshow button is clic$ed, a popup&slideshow
will be shown at the page with all the photos on trac$.
8elete 'utton
7hen the (8elete* trash can icon button is pressed,
chec$bo!es will appear ne!t to the thumbnail photos and +ust
simply chec$ all the unwanted photos and confirm delete will
do the deleting +ob. Multiple delete function can save time
and reduce unnecessary repetitive +ob.
8.; SAE 9*(( o0 ,*2e
The SAE 7all of 2ame is suggested by the SAE
manager, Lelvin .oh in providing a more visible recognition to
the SAE team members. Through this page, the other department
can give recognition to SAE in a more simple and user&friendly
way. The 7all of 2ame page is basically a star rating page that
anyone can vote stars on the SAE team members.
Each team members has their own star and the vote
count is recorded. The voting process is very easy as the user +ust
have to clic$ on the star to vote. The web page will then submit
an A0A1 re#uest to the database through the +Cuery script. Thus,
a user can vote each and every team members at once without
reloading the page.
The voting stars and voting counts can be reset by the
page administrator by clic$ing on the (%eset Mote* icon button.
That button will change all the voting counts of that particular
individual to "ero.
8.< E6Cer%&0&$*%&o)
E&certification is a function that enables the team
members or visitors to give recognition to employees by sending
the recognition receiver an email certification. The users need to
get the permission from SAE manager first before they are
authori"ed to use this function. 'y inserting the name at the input
form, it will generate a sample of the e&certificate by )TM. SS
positioning method for confirmation.
After confirmed on the details, the server will then
buffer the )TM. generated into a single file and sends an email
to the recipient automatically. The email is generated by the
(/)/Mailer* library and it re#uires authentication to connect to
the mail server of Intel Malaysia in order to run the process.
Email that contains the attachment will be received by the
recipient shortly after.
As a conclusion, this pro+ect satisfies all the SAE team
members in improving the productivity and effectiveness on their
daily routines. The system has met all re#uirements in the
(Software Cuality Triangle* characteristics, which are
Operational haracteristics, Transition haracteristics, and
%evision haracteristics. A?B
The Operational haracteristics covers6
orrectness, where the system met all specifications
stated by the SAE team member.
.earnability, where the amount of efforts or time
re#uired in learning how to use the software is low.
Therefore, the webpage is so user&friendly that IT&
illiterate people are able to use it.
Integrity, where the software does not have any side
effects such as affecting the +ob process of SAE team.
%eliability, because the software has been tested by
several team members to ma$e sure there is no defects
or fail in e!ecution during runtime.
The %evision haracteristics covers6
Maintainability, where the maintenance of the software
is very easy that does not re#uire any coding process to
maintain it.
,& 14/ SAE 9*(( o0 ,*2e
,& 18/ E6$er%&0&$*%e
2le!ibility, where all the information the author include
in the software is editable, the user does not have to
ma$e changes through coding.
The Transition haracteristics covers6
Interoperability, where the webpage can obtain the
I8SI8 of the user3s / in the bac$ground and applies
permission level on the user.
%eusability, where the photo gallery, team members,
and all the other tabs can be reused in other department
for the same purpose as well.
/ortability, since the pro+ect is done in web&based,
employees can access them from anytime, anywhere.
The portability function is important as SAE team
members always move around in the production floor.
Therefore, after the testing and documentation of this
pro+ect has been done, it will officially run in Intel Malaysia for
supporting the SAE in daily operations.
Across the +ourney of this ?&month internship program, the
author would li$e to than$ all his SAE team members in guiding
and supporting him all the way till the end. Special
ac$nowledgement to his supervisor, SAE team lead & S .ai,
Technical .ead @ 0oey han, and Manager, Lelvin .oh for their
willingness to feedbac$ on what he have done, give proper
guidance, and pass down on various e!perience and networ$ing
opportunities to him. The author would li$e recogni"e both 4T/
and Intel Malaysia for all the supports that enable him to finish
this Student Industrial Internship /rogram.
A:B )o, 8on >G::. A$out %otepa Plus Plus. %etrieved from
A>B "ntrouction to "nternet "nformation Ser&ices. %etrieved
AEB "ntrouction to Ao$e Photoshop. %etrieved from
A;B 5oh, Eddy >G:>. Data Analysis for UTP stuents. Intel
Malaysia SAE wee$ly report.
ADB 5oh, Eddy >G:>. 'eatures of SAE homepage. Intel Malaysia
SAE wee$ly report.
AKB 5oh, Eddy >G:>. 'eatures of SAE (oo)$oo) page. Intel
Malaysia SAE wee$ly report.
A?B Sparrow, /ena >G:>. (haracteristics of *oo Soft+are.
%etrieved from