&D Website conception in PT Gajah Tunggal Tbk. 3rd year of General Engineering internship

Maxime Choulet

13 th of April 2015 - 23rd of September 2015

Ecole´ Centrale Marseille mentors Ms. Anne Gelly 13/04/2015 - 31/07/2015 Ms. Catherine Jazzar 01/08/2015 - 23/09/2015

PT Gajah Tunggal Tbk. mentors M. Singgih Aji Wibowo 13/04/2015 - 18/05/2015 M. Agung Nugroho 30/06/2015 - 23/09/2015 This page intentionally left blank Abstract

This document is a report concerning the internship I performed for the company PT Gajah Tunggal Tbk. in order to validate my third year of engineering studies in Ecole´ Centrale Mar- seille. A specific format for this document was required by Ms. Ita Mariza (director of Politeknik Gajah Tunggal).

Having followed computer science based electives during these three years and already having theoretical and practical knowledge in the field of web development, I was assigned the concep- tion of a website that would be used by the R&D department.

When my internship begun, specifications were not yet clearly defined because the concept of a website granting specific services to R&D members was brought by M. Tuan Pham-Dang, Head of R&D department, from his recent observations about the availability of R&D data.

My internship was divided into two scopes. First, I was asked to transform an already existing data management application, called DMS, into a website. After the nullification of this scope, I was assigned the migration from a SharePoint-based document management service also used by the Quality department to a more modular technology exclusively used by R&D. Both these scopes included a part of the website visible to everyone displaying non-sensitive information about R&D.

Having no clear specifications during any of these scopes, my method remained the same: under- standing the needs > prototyping > checking against expectations with a competent authority being either the DMS main or a team of R&D members > starting again.

The 11th of September, the website was not yet online. However, the document management technology was found, validated and in testing. Moreover, the structure and the content of the website were nearly finished. Finally, the regulations for the use of the document management technology were being created but were not yet validated.

This report being requested by my school before the 11th of September, the results reported in this document might differ from the results at the end of the internship the 23rd of September. This page intentionally left blank Contents

1 Introduction 4 1.1 Internship program ...... 4 1.1.1 Background of the internship program ...... 4 1.1.2 Objectives of the internhsip program ...... 4 1.2 About PT Gajah Tunggal Tbk...... 6 1.2.1 PT Gajah Tunggal Tbk...... 6 1.2.2 Company business ...... 8 1.2.3 IT department description ...... 8

2 Data Management System 10 2.1 Method ...... 10 2.1.1 Role description ...... 10 2.1.2 Working procedure ...... 10 2.2 Findings and analysis ...... 11 2.2.1 Findings ...... 11 2.2.2 Validation of the findings by the mentors ...... 17

3 SharePoint 20 3.1 Method ...... 21 3.1.1 Role description ...... 21 3.1.2 Working procedure ...... 21 3.2 Findings and analysis ...... 22 3.2.1 Findings ...... 22 3.2.2 Validation of the findings by the mentors ...... 24

4 Conclusions 26 4.1 Conclusion ...... 26 4.2 Recommandations ...... 26 4.2.1 R&D website recommandations ...... 26 4.2.2 Data Management System recommandations ...... 27 4.2.3 General recommandations ...... 27

Appendix 28 Code samples ...... 28 List of Figures ...... 38 Thanks ...... 40 Glossary ...... 42 References ...... 44 This page intentionally left blank Chapter 1

Introduction

1.1 Internship program 1.1.1 Background of the internship program At the beginning of my internship, the situation concerning the management of data in the R&D department of Gajah Tunggal was as follow: • an application, the DMS1, was available to manage the test results and specifications of R&D on any computer on which both Visual FoxPro and the application had been installed and that could access the company’s intranet; • the sensitive documents of this department were accessible using a Microsoft SharePoint2 based intranet website owned by the Quality department to a selected few R&D members that got a license for SharePoint; • these documents were protected using the DLP3. Eager to provide an online access to these data and documents, R&D Director M. Tuan Pham- Dang originated the idea of an online website that could provide these services. The ownership of the project would be transferred to M. Singgih Aji Wibowo both in its DMS phase and in its Microsoft SharePoint phase.

1.1.2 Objectives of the internhsip program Overall objectives During my internship, the overall principal objective was to create an online website that would provide specific services to the R&D department of Gajah Tunggal as well as non-sensitive infor- mation about the aforementioned department to the public. Two services were considered, the migration of a data management application called the DMS developped by the IT4 department

1Data Management System: a software developped by Gajah Tunggal in order to keep track of the lifecycle of their documents such as tests and specifications from creation to checking and validation 2A Microsoft tool used by the Quality department to create an intranet website providing a document man- agement service 3Data Leakage Protection software: all the files on the computers of the company are encrypted and can be read only by another computer of the company. In order to decrypt and read the files on an external computer, a special authorization must be delivered. 4Information & Technology

4 of Gajah Tunggal and the extraction of sensitive R&D documents from a Microsoft SharePoint document management service owned by the Quality department and maintained by the IT de- partment into an online secured document management service owned by the R&D department and maintained by the IT department. Of course, any solution suggested should be sustainable and maintanable by the IT department of Gajah Tunggal.

Data Management System scope The DMS is an application still being developped that allows the management of many kinds of R&D document such as test results, specifications and ongoing tests. This application also allows to easily generate reports about these tests, results and specifications. The DMS includes features such as user management, interaction, report creation and file downloads that are combined to create a multitude of features, making it quite complex to use and to understand. It is developped in Visual FoxPro which contains a reporting utility, a once powerful engine as well as an IDE5 allowing the fast creation of a complex GUI6. The aim of the migration of this application to a website was to allow the members of R&D man- agement team to access these tests and specifications while travelling abroad for fast-validation and reports-availability-during-meeting purposes without the need to have a computer connected to the company’s intranet and on which the latest version of the application is installed. The aforementioned databases are stored on a server that can only be reached using the company’s intranet and using an outdated version of the DMS could corrupt some data (i.e.: if the database structure has changed in the latest version). The newly created website should be easy to understand and to use as well as quite fast and secured enough to protect the confidentiality of the tests performed by the R&D department. After a one-month feasibility study, it was decided that this scope would be nullified and that I would create a website to replace the Microsoft SharePoint document management service and come back to the optimization of the DMS in terms of processing speed if I had enough time.

Microsoft SharePoint scope The Quality department of Gajah Tunggal uses a SharePoint based intranet website to store and access their files as well as the sensitive files of the R&D department. This website can only be accessed by users which Windows username has been associated to a valid Microsoft SharePoint license and thus is accessible only by a selected few people in R&D. In order to remove the dependency on the Quality department and the cost of buying many licenses, I was asked to create a website that could be accessed over the internet as well as over the intranet of Gajah Tunggal that would allow them to store, access, download and keep track of versions of their files for free by using a secured enough way for sensitive files. To summarize, the objective of this scope was to deploy a cloud technology free, fast and secured. Having neither the skills nor the time to create a technology meeting these requirements, I had to find an already existing one that could fit the purpose of R&D.

5Integrated Development Environment: software providing a set of tools to ease the work of including but not limited to a debugger and a source code editor. 6Graphical User Interface: term used to describe all of the visual elements displayed to the user of an appli- cation.

5 1.2 About PT Gajah Tunggal Tbk. 1.2.1 PT Gajah Tunggal Tbk. “Gajah Tunggal’s operationnal development is guided by its vision and mission that help to keep the Company’s performance and strategy focused towards target achievements and success as a Good Corporate Citizen. The vision and mission help Gajah Tunngal to always strive for its ideals by guiding the management and employes as they work together for commmon goals that will contribute to the long-term success of the Company.”[1]

Company vision Roughly translated in English, Gajah Tunggal means “The best elephant”. This name shows the ambition of this company that is well reflected by its vision: “to be a Good Corporate Citizen with Solid Financial Standing, Market Leadership in Indonesia and an established Global Reputation as a Manufacturer of Quality Tires.”[1]

Company mission Gajah Tunggal has made its mission “to be a leading and dependable producer of an optimal range of competitively priced, superior quality tires while also pursuing brand equity and corporate social responsibilities as well as delivering profitability and returns to shareholders and values to stakeholders.”[1]

6 Company motto The spirit of Gajah Tunggal is based on six great principles:

Service “We do something that is expected of us to bring satisfaction to our customers both internal and external. • Strive to meet stakeholders’ expectations • Communicating and understanding • Build mutual trust” [1]

Passion “We pursue excellence because we are emotionally and intellectually engaged in our work. That makes our results extraordinary and build up our dignity within.

• Inspire with enthusiasm for work • Drive action for accomplishment • Strive to excel in everything we do” [1]

Integrity “Our relationships are built on a foundation of trust, honesty and account- ability. • Deliver our promise • Demonstrate honesty and sound ethical behavior in all activities • Take responsibility for our actions” [1]

Respect “We care and support the local communities in which we operate. • Treat people with the greatest degree of care • Care for nature and environment • Respect the laws and regulations” [1]

Innovation “Innovation is the key to sustain GT’s growth and profitability. • Continuous improvement • Forward-looking and explore possibilities • Challenge the limit, be curious, be creative and develop new ideas for a more efficient future“ [1]

Teamwork ”We enjoy a collaborative work environment that fosters open communica- tion, learning and sharing of ideas, opinions and points of view.

• Commitment to common goals • Active participation • Open communication“ [1]

7 1.2.2 Company business “The Company’s principal businesses include the development, manufacturing and sale of radila tires, bias tires, motorcycle tires, inner tubes, flaps and rim tape, The Company also manufacture and sell tire cords and synthetic and processed rubber, which are key components used in the manufacturing of tires. The Company derives the majority of its revenue from the sale of tires in Indonesia and overseas. It also derives revenue from the sale of tire-related products, comprising tire cord and synthetic rubber. Through its tire-related product division, in addition to third party sales, the Company also manufactures tire cord and synthetic rubber for its own tire production as part of its strategy of vertically integrating it’s production facilities to rationalize its production costs.“ [1]

1.2.3 IT department description For the structure of the IT department, please see the figure 1.1.

Djony Widarto S.

Dept Head

Joko Mulyanto Agung Nugroho Nungkat Damanik

System Analist Network Admin Factory Office Network Admin Production

Gunawan, Arif Budiman, Herman P. Robert S. Edy Sujiwo, Sulistiyono

Analyst/Analyst Programmer Asst Network Admin Asst Network Admin

Hero Yudi W., Pandu Kiki Susilo, Yusuf Junjunan S, Dwi Wahyudi, Ajie Siti Hodijah Wartanto Kusumawardhany Timothy A, Moh Udayana, Agiwiranova

Support Programmer Technical Support Technical Support Admin

Figure 1.1: IT department structure

8 This page intentionally left blank Chapter 2

Data Management System

2.1 Method 2.1.1 Role description During this part of the internship, my role was to try and find a way to convert the existing application programmed in Visual FoxPro into a website as well as perform such a convertion if it were possible. This meant gaining perfect knowledge of the features, strengths and weaknesses of the application in a limited amount of time which will turn out to be a difficult task.

2.1.2 Working procedure To find this possible way of convertion, I explored the following trails: • does Visual FoxPro itself allow the creation of web based applications?

• does an application, software or tool exist that could allow the convertion of a Visual FoxPro application into a web based application? • does an application, software or tool exist that could perform the translation from Visual FoxPro to another language that allows the creation of web based application?

The answer to the last question is quite obvious as such a tool exists and is called a programmer. However, this raises the following question: how long would this translation take? To answer this question, we should keep in mind that similarly to a translation between texts written in different human languages, a translation between programs written in different programming languages is never simply a translation and always implies a part of rewriting as well as interpretation in order to keep the meaning -or features- of the text -or program. I will explain in 2.2.1 how it happened that the last of the aforementioned questions was the only one with a satisfying answer. However, I will now explain the steps I followed during the translation from Visual FoxPro to a set of web programming languages -HTML, CSS, PHP and Javascript 1.

1These languages are the common web languages used to create websites. HTML, CSS and Javascript are executed by the user’s web browser and therefore can be accessed or tampered with by the aforementioned user. However, PHP code is executed by the server hosting the website and will not be displayed to the user.

10 Features understanding The first step in this translation was the global understanding of the existing application and its features that was achieved by discussions with R&D members frequently using this application as well as experimentating the said features. For this occasion, I was given access to a set of databases specially designed for testing the application in order to avoid manipulation or disclo- sure of sensitive R&D documents. During my experimentations, I used the latest development version of the software but not the latest stable version.

Language understanding The next step was the understanding of the language used to create the DMS. Visual FoxPro being totally unknown to me, I was expecting some troubles but I had not foreseen what were to happen to me. As I will explain it in 2.2.1, some surprises arose from the use of Visual FoxPro because of the IDE used itself as well as some features added to the meant to simplify the programmer’s work but that can make the code more difficult to understand.

Program understanding After the language, came the dreaded step of understanding another programmer’s code. Each programmer has his/her own programming habits regarding the organization of features, the naming of variables and the interaction of components. Understanding a program written by another programmer using an unknown language is always a tricky process leading to various misunderstandings as well as many hours of great despair for the major part of programmers.

Translation Finally, once everything or so was understood, I translated the application. I decided to start by taking care of the security. For this matter, I had to learn a lot about web security and formed myself by cross-checking the advices of multiple experienced programmers in this field. After that, I started translating and testing the application feature by feature until the fateful meeting of the 18th of May 2015 that put an end to the DMS translation project.

2.2 Findings and analysis 2.2.1 Findings Features understanding During my talks with R&D members using frequently the DMS, it appeared that none of them had complete knowledge of the software but each only had knowledge of the part they use. The DMS main programmer being a member of the IT department, it means that there was no real expert of the DMS among the R&D members. This can be a downside for productivity as it rises the need to call for the DMS main programmer from another department when issues appear from the use of the DMS. In that case, I am not talking about the bugs that should be fixed by the DMS programmer but about misuse of the software or unclear features.

Language understanding After having a rather clear view of the features of the DMS, I tackled the understanding of Visual FoxPro and its ability to provide a sustainable way of creating websites. We should “Note that

11 Visual FoxPro 9.0 is the last version and was published in 2007” [2] and that support is currently stopped except for the Service Pack according to the Lifecycle Support Policy of Microsoft [3]. Therefore, keeping Visual FoxPro appeared compromised to me. However, I decided to still try and answer all my previously unanswered questions without rulling them out because of the fate of Visual FoxPro.

First question To answer the first question: does Visual FoxPro itself allow the creation of web based applications?, it is possible to create .NET web applications using Visual FoxPro. However, the base of the DMS was not thought as a and it would require to rewrite the entire application as a web application. This raises another question: is it worth rewriting the whole application in a soon-to-be-dead language?. As a part of the feasibility study, I decided to keep this option in mind but to push it aside in the first place.

Second question About the second question: does an application, software or tool exist that could allow the convertion of a Visual FoxPro application into a web based application?, an open source language that allows to use Visual FoxPro code inside webpages as if it were PHP code exists and is named ActiveVFP. However, this method requires the same rewriting of the DMS than using PHP would because of the similarities in these languages and provides less features as well as much less support and documentation than PHP does especially concerning the security features.

Third question Only the last question could then bring a satisfying answer: does an application, software or tool exist that could perform the translation from Visual FoxPro to an- other language that allows the creation of web based application?. Yes, it does. This “tool” is a programmer. Indeed, given that a web application and the current DMS application are very different in substance, an automatised translation could not give any good results or at least not in a reasonnable computing time.

After these answers, I was confronted to a choice regarding the language that I would use to rewrite the application: • use Visual FoxPro to create a .NET web application; • use ActiveVFP to include Visual FoxPro code in web pages; • use PHP. Looking for the most sustainable solution and regarding the fate of Visual FoxPro, I decided to try the last two choices.

Program understanding After knowing how I would proceed to try and translate the DMS, I decided to study the program and break it down to its most basic server-side features in order to check against my different solutions to assess their suitability to the translation. It was not an easy process as Visual FoxPro is not case sensitive about its keywords and allows their shortening. Combined, these two features can produce very irregular code not easy to understand -ie: “DELETE” is the same as “dele” and “release” is the same as “RELE”. What I call the basic server-side features of a website are the smallest operations that need to be

12 Figure 2.1: DMS Main display performed by the server in a website. Let’s take the example of a website that could allow you to login and download files based on rights bestowed upon you. For this example, the basic server- side features would be the ability to interact with a database to check your login credentials and your rights as well as the ability to serve a specified file to the user. I voluntarly omitted the storage of values, the ability to check equality of values, the ability to create loops, etc. as these abilities are really common ones. For the DMS application, the basic features are a complete interaction with database -create, research, update and delete actions- as well as the ability to serve files from a remote file server. Both ActiveVFP and PHP provide these basic server-side features, the distinction between these solutions would not be done on this point. However, ActiveVFP is much less widely spread than PHP, benefits from less support, less features and less documentation. Furthermore, the member of the IT department that was going to maintain the website after me already knew about PHP programming but not about ActiveVFP. That’s why, even if these languages are very similar, I decided to use the PHP language. Code comparison between ActiveVFP and PHP can be found in appendix (4.2.3).

Translation As you can see in figure 2.1, the DMS main page is quite complicated and would not easily fit on a website in terms of User Experience. This added me the task of redesigning completly the GUI. The online version of DMS I created is incomplete and focuses mostly on features and not on User Experience2. It uses HTML 5, CSS 3, JavaScript 1.8 and PHP 5.6. I could have used a language such as Java, ++ or Python to create the application, however the programmer in charge of maintaining the application does not have knowledge of these languages and that would contradict the principles of maintainability and sustainability asked for by R&D.

2It bundles all the feelings expressed by the user, from the frustration of using a slow application to the joy of seeing a unicorn run on the bottom of their screen. Each user will have a different User Experience.

13 Regular login

Non matching username and password Empty submitting

User locked

Figure 2.2: Login page

Login page First, the user would arrive on a simple login page used to enter credentials in order to access the application. As seen on figure 2.2, in the first version, nothing was intended to recover a forgotten password or a corrupted account except asking the database administrator. This login form provides the security feature of locking a user account if more than 10 login attempts fail in less than 1 minute. In that case, an email will be sent to the website administrator as well as to the email address associated to the locked account if any. Once logged in, several information will be stored in PHP variables about the user such as: his username, his login string (encrypted concatenation of his encrypted password with his http-user- agent), his email and several parameters that will determine what components he can access in the website. Every page will check if the user is correctly logged in using the login string and if he has the right to see the aforementioned page. After login, the user will be redirected to the main page.

14 Hidden account management Shown account management

Figure 2.3: Main page

Main page The main page can be seen on figure 2.3 and provides the user the ability to change his password. The group, segment, subsegment (not displayed to the user) and ap- proval lvl will later determine what a user can see and can do. There was the possibility that other applications would be translated into a website version, that’s why I decided to not include the account management as part of the DMS website but to create a part for the account and a part for each application.

Data Management System page The DMS page is divided into several parts that are presented in figure 2.4. Do not worry, it is not intended for the reader to remember the parts nor their content as these information will not be used afterwards. The important points are the following: • In a User Experience-improvement attempt, I tried to identify input fields that could be grouped together; • The values available in dropdown menus or text fields depend on other information on the page and are updated dynamically without refreshing the page. However, these values being stored in a database, it required a PHP to JavaScript communication; • The lists give access to search pages that will find specifications or test results in different databases; • Each tab should contain different input fields, specification lists, file upload forms, etc. that were not yet included in the website; • Each tab can be saved independantly or all the information can be saved at once; • Each tab should behave independantly from the rest of the page in a dynamic way.

15 Part 1- Design number

Part 2- Utils- Find Part 2- Utils- List

Part 3- Code

Part 4- Other information

Part 5- Size

Part 6- Tabs

Figure 2.4: DMS page

16 Search form

Results display

Figure 2.5: Search page

Search pages As all the search pages are similar except for a few changing input fields, only one of them will be displayed on figure 2.5. These pages are classic search pages for elements in a database, you can fill some input fields and tick some boxes to select what caracteristics you want your results to have, it is then possible to select one of the results to display and act upon it in the main page described above.

2.2.2 Validation of the findings by the mentors This part of my internship did not get any per se validation of the findings from my mentors as it was decided it would be nullified. However, during the development of the web version as well as during the understanding of the program, I regularly checked my work and my understanding with the DMS main programer in order to be sure that my features were the same as the ones in the DMS and gave the same results. A few meetings were held with R&D members to justify what a web version would bring compared to the desktop version of the application (see figure 2.6) including the meeting of the 18th of May 2015 that decided that the time spent to create the web version would be better spent on other features for the R&D website. Thus was nullified my first topic

17 Figure 2.6: Desktop vs Web

18 This page intentionally left blank Chapter 3

Microsoft SharePoint

After the aforementioned meeting, some ideas about my new topic existed but the new scope was still unknown. To confirm these ideas, a meeting was organised with the R&D management team. Due to the context of the R&D department at the time, this meeting could only be held the 30th June 2015. I used the time between the meeting of end of DMS and this meeting with R&D management team to perform several tasks: • deepen my knowledge of the common web languages;

• realise a comparative study of cloud technologies as I would probably need to use one; • deploy a “Windows Server 2012 R2” test server containing a WAMP1 architecture; • write several guides for the maintenance of the website 2

• deploy a chosen cloud technology (ownCloud); • prototype showcases with different frameworks (bootstrap, materializecss, polymer) in or- der to choose the best components • provide a formation and advices on git3 to the programmer who would maintain the website.

I presented the use of ownCloud during this meeting after several tests with some R&D members and the R&D management team agreed that this technology could be used to store and access their sensitive files. 1Windows Apache mySQL PHP: it is the basic architecture of an apache web server installed on Windows that allows the website hosted on the server to interact with databases 2I created the following guides: – WAMP server installation and configuration on Windows Server 2012 R2 – git usage for the deployment of the R&D website – ownCloud deployment on a WAMP server

3git allows to keep several versions of the same code on a remote server and to have different computers not at the same version. For exemple, it allows to have a development computer with a non working code while the production server still has the working version but keeps the possibility to be updated in seconds. For more information about the features provided by git, visit https://git-scm.com/

20 3.1 Method

When starting this part of my internship the 1st of July 2015, the situation was as follow: • the DMS website was no longer wanted by R&D; • a website with a public section containing non sensitive information about R&D and a private section used to access sensitive files was wanted by R&D;

• ownCloud could be used for the private section of the website; • I had not yet heard about an already existing FTP server for R&D use (which existence was ignored by a large part of R&D members) and did not yet study if it could be used instead of ownCloud;

• a team was created to work on the website project; • a test server could be accessed by the R&D team to check the progress of the website.

3.1.1 Role description As a member of the R&D team, I worked as a website advisor and creator. Indeed, my work was to inform the other members of the team of the current practices of the web, give them advice on the different elements available, their compatibility with browsers as well as provide some knowledge on common practices on web design to make the User Experience better. Moreover, I had to create prototypes for each choice made by the team. Finally, as any other member of the team, I had to help find what kind of content we could put on the website and later help create the regulations of the cloud technology used for R&D documents management.

3.1.2 Working procedure A special point about this project is that at the beginning, there were no specifications whatsoever about design or content. The team created some obvious specification as a starting point, some of which would later be modified at our surprise, such as : • not giving away any sensitive information; • making an appealing website;

• making a responsive website. It is quite obvious that the only specification that could be modified was the one about the responsive website. The working procedure was based on agile project management. At least one meeting with all the members of the team was held every week during which the work realised during the previous week was analysed and assessed to make sure the website was going in the right direction, the objectives for the following week would be decided and assigned to the members depending on their skills, availability and motivation. As the website creator, I had a constant objective that was: updating the website according to what was decided during the meetings. As a shadow objective, I had to form the programmer that would then maintain the website and the web server.

21 3.2 Findings and analysis 3.2.1 Findings Framework Concerning the responsiveness of the website and the framework used to achieve it, after the first meeting that decided what kind of elements we would use on the website and given the obvious specifications (3.1.2), I made the first prototypes of the website using the bootstrap1[4] framework. I would then move on to materializecss2[6] to provide a different design and allow the team to make their final choice. I was thinking about a polymer3[7] version of the website when the team decided that responsiveness was not a concern for the website. Indeed, the use of the website is intended mainly for R&D members to access their files and the aforementioned files are encrypted using the DLP software that is not available on any mobile phone or on Windows > 7. Moreover, the main website of the company http://www.gt-tires. com/indonesia/ provides a fixed design and keeping some coherence between both websites would be a plus. I then provided a fixed version of the website using the bootstrap framework as its components were the most attractive ones to the R&D team.

File Transfer Protocol server After a demonstration of ownCloud during the meeting of the 30th of June 2015, I provided the other members of the R&D team with a demonstration of the use of the FTP server and its web interface. After some testing, it was decided that this technology could be used as a replacement for ownCloud and would be presented to the staff meeting as soon as possible. After the staff meeting, the R&D team was assigned the task to create a quality system about the FTP server to make sure that it would be used well. The quality system included the following components: • what roles exist (administrator, common user, uploader, etc.); • what are the rights of each role; • the naming conventions of the files; • the kind of file that can be uploaded on the server; • the files that would be uploaded on the server and who would be able to see them; • the creation of an index containing a description of each file: • many parameters concerning IP limitations for access, bandwidth usage, password strength, etc.

Web server, maintenance and formation In order to form the programmer that would maintain the website and the web server, I provided him with: • a formation on how to use git;

1bootstrap is a mobile first framework providing responsiveness to a website 2materializecss is a mobile first framework providing responsiveness as well as material design[5] components to a website 3polymer is a framework made by Google Inc. to provide material design components to a website

22 • a guide on how to deploy a WAMP architecture on a Windows Server 2012 R2; • a guide on how to deploy the website from the repository on the production server; • the basic workflow of feature development with git (development > test > production).

I also gave him some advices during the deployment of the test server that I performed and put him in charge of the deployment of the full website on the production server as well as the integration of features based on the workflow development > test > production that I developped for the website. The choice of using git was quite obvious. About the kind of server to use, as the future maintainer of the website never used , I decided not to multiply what he had to learn so that he could focus on the most important things and that’s why a Windows Server 2012 R2 had been decided to be used.

Web browsers During the numerous meetings and tests with the R&D team members, it appeared that the main web browser used by the R&D computers is Internet Explorer and is not kept updated and the versions are sometimes very old. You can find a representation of this heterogeneity in figure 3.1. As the oldest versions of Internet Explorer are becoming less and less popular and do not provide support for the latest standards of web languages, it was decided with the IT department that the web browsers would be updated. However, the software used by the FTP server had a bug with Internet Explorer 11 giving random extensionless names to the files downloaded from the FTP server. As for the other browsers, they would be updated if requested by the users.

23 Figure 3.1: Web browsers usage in R&D

3.2.2 Validation of the findings by the mentors The validation of these findings was made weekly by the R&D team and by several staff meetings. During these meetings, the image of the R&D depicted by the information displayed was assessed as well as the appeal and the speed of the website. The quality of the regulations set for the FTP server and the protection these regulations give to the R&D sensitive documents were also assessed during these meetings.

24 This page intentionally left blank Chapter 4

Conclusions

4.1 Conclusion

This internship provided me with a clear view of the lifecycle of a project and its possible outputs. Indeed, I experienced the death of a project during its development due to a lack of analysis of needs as well as the positive outcome of a project thanks to the dedication of its team despite the problems that can arise from the lack of disponibility of the client. In terms of programming experience, aside from the deepening of my knowledge about web based languages, I was every day more convinced of the necessity of using code management tools such as git and keeping code organised, standardised, explained and as simple as possible for the people who will read it after me but also for me in order to have a more enjoyable and productive coding experience. I also experienced the creation of a very peculiar website as the R&D department is very restricted in terms of information that can be shared with the public. It was a very profitable and enjoyable experience to work on the definition of these information, the assessment of their value, the way of showing the R&D pride, the way of making these information appealing and the specifications for the protection of the sensitive documents of the R&D department as member of a dedicated and motivated team.

4.2 Recommandations

I was asked to provide some recommandations from my observations during this internship. I decided to divide these recommandations in three parts: the ones for the R&D website, the ones for the DMS and the general ones about programming.

4.2.1 R&D website recommandations For the R&D website, I would first recommand keeping every software up-to-date, this includes the Apache server, the mySQL version and the PHP version. This can be achieved by visiting regularly the websites delivering these softwares. The bootstrap framework should be updated as well as all the libraries it needs also by visiting regularly the websites delivering this framework and the librairies. I would recommand to keep in touch with the new standards set by W3C about web program- ming and to fully use the latest features of the languages even if it implies the rewriting of some parts of the website.

26 Finally, the most important recommandation is to follow the principle of the git workflow: ”de- velopment > testing > production”, by never making any change on the production server (this includes software updates, framework updates or website changes) without testing it abondantly on the test server.

4.2.2 Data Management System recommandations About the DMS on its desktop version, I would recommand to try and use git. However, I am not sure that the IDE provided by Visual FoxPro produces files that can be efficiently managed with git. If using git is not possible, I think that during development instead of commenting out some parts of the code that are stored only to be used outside of the production version, it could be better to store boolean variables in a file that would be changed depending on if the code is used for development or for production as well as a list of were there are used to find easily these parts of code. To conclude these recommendations, if having a version of the DMS accessible from the outside is still important, using a VPN1 could provide a good way to achieve this while waiting for the PLM 2 software to come and replace the DMS in the coming years.

4.2.3 General recommandations As general recommandations, I would advise to be careful about a few things when programming: conventions, indentation, uppercase/lowercase names, explicit variables naming and keeping in mind that any complex structure should be simplified as long as it does not diminish the unde- standing of the code by other programmers or should be divided into several smaller and simpler structures. Moreover, I would advice to avoid using languages in very bad shape as much as possible even if it’s not always possible and to read a lot of recent articles about the languages, the programming technics and the good practices for each language.

1Virtual Private Network: this is a method for the extension of a private network across a public network, such as the Internet. It enables users to send and receive data across shared or public networks as if their computing devices were directly connected to the private network, and thus are benefiting from the functionality, security and management policies of the private network. [8] 2Product Lifecycle Management: this is the process of managing the entire lifecycle of a product from inception, through engineering design and manufacture, to service and disposal of manufactured products. PLM integrates people, data, processes and business systems and provides a product information backbone for companies and their extended enterprise [9]

27 Code samples

28 <% * Requires rewriting when the driver changes. connectString = "DRIVER={MySQL ODBC 3.51 Driver};" + "SERVER=localhost;"; + "UID=root;"; + "PWD=;"; + "DATABASE=examples;"; + "port=3306;" conn = SQLSTRINGCONNECT(m.connectString)

DO CASE CASE (connect > 0) %> Connection successful <% actionRequested = oRequest.Form("actionRequested")

DO CASE CASE (actionRequested == "create") * see figure 3: ActiveVFP CRUD form- Create CASE (actionRequested == "research") * see figure 4: ActiveVFP CRUD form- Research CASE (actionRequested == "update") * see figure 7: ActiveVFP CRUD form- Update CASE (actionRequested == "delete") * see figure 8: ActiveVFP CRUD form- Delete ENDCASE CASE (connect < -1) %> Connection rejected <% CASE (connect == 0) %> Undocumented return value <% ENDCASE

SQLDISCONNECT(m.connectString) %>

Figure 1: ActiveVFP CRUD form- Structure

29

$server = "localhost"; $uid = "root"; $pwd = ""; $db = "examples";

$conn = new mysqli($server, $uid, $pwd, $db);

if ($conn -> connect_error) { die("Connection failed: " . $conn -> connect_error); } echo "Connection succesful";

$actionRequested = $_POST["actionRequested"];

switch($actionRequested){ case "create": // see figure 5: PHP CRUD form- Create break; case "research": // see figure 6: PHP CRUD form- Research break; case "update": // see figure 9: PHP CRUD form- Update break; case "delete": // see figure 10: PHP CRUD form- Delete break; default: break; }

$conn -> close(); ?>

Figure 2: PHP CRUD form- Structure

30 <% * Rustic way to prevent SQL injection by replacing semi-colons by an empty string * as nothing exists in Visual FoxPro to fit this purpose. createName = STRTRAN(oRequest.Form("createName"), ";", "") createAge = STRTRAN(oRequest.Form("createAge"), ";", "")

IF (!ISBLANK(createName)) sqlRequest = "INSERT INTO users(name,age) VALUES(’" + createName + "’,’" + createAge + "’)" SQLEXEC(connect, sqlrequest)

ENDIF %>

Figure 3: ActiveVFP CRUD form- Create

<% researchId = STRTRAN(oRequest.Form("researchId"), ";", "") researchName = STRTRAN(oRequest.Form("researchName"), ";", "") researchAge = STRTRAN(oRequest.Form("researchAge"), ";", "")

sqlrequest = "SELECT * FROM users WHERE "; + id LIKE ’%" + researchId + "%’"; + "AND name LIKE ’%" + researchName +"%’"; + "AND age LIKE ’%" + researchAge + "%’" *Visual FoxPro outputs the result of a query into a cursor using this construction. SQLEXEC(connect, sqlrequest, "researchCursor") %>

<% * We will scan the last opened cursor, here it is researchCursor. SCAN%> <%ENDSCAN %>
Id Name Age
<%=researchCursor.id%> <%=researchCursor.name%> <%=researchCursor.age%>

Figure 4: ActiveVFP CRUD form- Research

31

$createName = $_POST["createName"]; $createAge = $_POST["createName"];

if (!ISEMPTY($createName)) { $stmt = $conn -> prepare("INSERT INTO users(name, age) VALUES (?, ?)"); $stmt -> bind_param("si", $createName, $createAge); $stmt -> execute(); $stmt -> close(); // parameters value can be set after the preparation of the statement // in order to execute the same statement for different sets of parameters } ?>

Figure 5: PHP CRUD form- Create

prepare("SELECT * FROM users WHERE id LIKE ? AND name LIKE ? AND age LIKE ?); $stmt -> bind_param("sss", $researchId, $researchName, $researchAge);

$researchId = "%" . $_POST["researchId"] . "%"; $researchName = "%" . $_POST["researchName"] . "%"; $researchAge = "%" . $_POST["researchAge"] . "%";

$stmt -> execute(); $stmt -> bind_results($id, $name, $age);

?>

while($stmt -> fetch) { echo "

"; echo ""; echo ""; echo ""; echo ""; } ?>
Id Name Age
" . $id . "" . $name . "" . $age . "

Figure 6: PHP CRUD form- Research

32 <% updateId = STRTRAN(oRequest.Form("updateId"), ";", "") * The posted variables updateNewNameBoolean & updateNewAgeBoolean indicate if the user * requested update of these fields updateNewNameBoolean = oRequest.Form("updateNewNameBoolean") updateNewAgeBoolean = oRequest.Form("updateNewAgeBoolean")

IF (!ISBLANK(updateId) AND (updateNewNameBoolean OR updateNewAgeBoolean)) updateNewName = STRTRAN(oRequest.Form("updateNewName"), ";", "") updateNewAge = STRTRAN(oRequest.Form("updateNewAge"), ";", "")

sqlrequest = "UPDATE users SET " namerequest = "name=’" + updateNewName + "’" agerequest = "age=" + updateNewAge

* At this point, at least one of the two booleans is true IF (updateNewNameBoolean) sqlrequest = sqlrequest + namerequest IF (updateNewAgeBoolean) sqlrequest = "," + sqlrequest + agerequest ENDIF ELSE sqlrequest = sqlrequest + agerequest ENDIF

sqlrequest = sqlrequest + " WHERE id=’" + updateId + "’" SQLEXEC(connect, sqlrequest) ENDIF %>

Figure 7: ActiveVFP CRUD form- Update

<% deleteId = STRTRAN(oRequest.Form("deleteId"), ";", "")

IF (!ISBLANK(deleteId)) sqlrequest = "DELETE FROM users WHERE id=’" + deleteId + "’" SQLEXEC(connect, sqlrequest)

ENDIF %>

Figure 8: ActiveVFP CRUD form- Delete

33

if (!ISEMPTY($updateId) && ($updateNewNameBoolean || $updateNewAgeBoolean)) { $updateNewName = $_POST["updateNewName"]; $updateNewAge = $_POST["updateNewAge"];

$stmtname = $conn -> prepare("UPDATE user SET name=? WHERE id=?"); $stmtname -> bind_param("si", $updateNewName, $updateId); $stmtage = $conn -> prepare("UPDATE user SET age=? WHERE id=?"); $stmtage -> bind_param("si", $updateNewAge, $updateId); $stmt = $conn -> prepare("UPDATE user SET name=? AND age =? WHERE id=?"); $stmt -> bind_param("sii", $updateNewName, $updateNewAge, $updateId);

// At this point, at least one of the two booleans is true if ($updateNewNameBoolean && $updateNewAgeBoolean) { $stmt -> execute(); } else if ($updateNewNameBoolean) { $stmtname -> execute(); } else { $stmtage -> execute(); } $stmt -> close(); $stmtname -> close(); $stmtage -> close();

} ?>

Figure 9: PHP CRUD form- Update

if (!ISEMPTY($deleteId)) { $stmt = $conn -> prepare("DELETE FROM users WHERE id=?); $stmt -> bind_param("i", $deleteId); $stmt -> close(); } ?>

Figure 10: PHP CRUD form- Delete

34 Figure 11: Internship approval 1

35 Figure 12: Internship approval 2

36 This page intentionally left blank List of Figures

1.1 IT department structure ...... 8

2.1 DMS Main display ...... 13 2.2 Login page ...... 14 2.3 Main page ...... 15 2.4 DMS page ...... 16 2.5 Search page ...... 17 2.6 Desktop vs Web ...... 18

3.1 Web browsers usage in R&D ...... 24

Code samples ...... 28 1 ActiveVFP CRUD form- Structure ...... 29 2 PHP CRUD form- Structure ...... 30 3 ActiveVFP CRUD form- Create ...... 31 4 ActiveVFP CRUD form- Research ...... 31 5 PHP CRUD form- Create ...... 32 6 PHP CRUD form- Research ...... 32 7 ActiveVFP CRUD form- Update ...... 33 8 ActiveVFP CRUD form- Delete ...... 33 9 PHP CRUD form- Update ...... 34 10 PHP CRUD form- Delete ...... 34 11 Internship approval 1 ...... 35 12 Internship approval 2 ...... 36

38 This page intentionally left blank Thanks Name Position Relationship

Abdiwijaya Calvindoro Zeus R&D Industrialization R&D team member Aji Wibowo Singgih R&D Replacement Tires HoD Internship mentor Junjunan Yusuf Technical support IT staff Kurnia Willy R&D Industrialization HoD R&D team member Kusumawardhany Pandu Programmer Website admin Misbah Iwa R&D Operationnal Support HoD DMS team member Muhammadi Taufiq R&D Research R&D team member Mulyanto Joko System Analist DMS programmer Nugroho Agung Network Administrator Internship mentor Pham-Dang Tuan R&D Director Project initiator Purnomo Adi R&D Operationnal Support DMS team member Rizky Amanda R&D Compound Research R&D team member Saragih Robert Asst Network Administrator IT staff Widarto Djony IT Department Head IT staff Wintersteller Richard R&D Compound Research HoD R&D team member

40 This page intentionally left blank Glossary

DLP Data Leakage Protection software: all the files on the computers of the company are encrypted and can be read only by another computer of the company. In order to decrypt and read the files on an external computer, a special authorization must be delivered. 4, 22 DMS Data Management System- an application developped by Gajah Tunggal in order to keep track of the lifecycle of their documents such as tests and specifications from creation to checking and validation. 4, 5, 11–13, 17, 20, 21, 26, 27

FTP File Transfer Protocol: protocol used to transfer files between two hosts. 21–24 git git allows to keep several versions of the same code on a remote server and to have different computers not at the same version. For exemple, it allows to have a development computer with a non working code while the production server still has the working version but keeps the possibility to be updated in seconds. For more information about the features provided by git, visit https://git-scm.com/. 20, 22, 23 GUI Graphical User Interface: term used to describe all of the visual elements displayed to the user of an application. 5, 13

IDE Integrated Development Environment: software providing a set of tools to ease the work of programmers including but not limited to a debugger and a source code editor. 5, 11, 27

Microsoft SharePoint A Microsoft tool used by the Quality department to create an intranet website providing a document management service. 4, 5

User Experience It bundles all the feelings expressed by the user, from the frustration of using a slow application to the joy of seeing a unicorn run on the bottom of their screen. Each user will have a different User Experience. 13, 15, 21

WAMP Windows Apache mySQL PHP: it is the basic architecture of an apache web server in- stalled on Windows that allows the website hosted on the server to interact with databases. 20

42 This page intentionally left blank Bibliography

[1] Annual Report, PT Gajah Tunggal Tbk, Jakarta, Indonesia, 2014.

[2] msdn.microsoft.com/en-us/vfoxpro/bb190225.aspx, Microsoft Developer Network, January 23, 2015

[3] support.microsoft.com/en-us/lifecycle?p1=7992, Microsoft Corporation, last review: June 22, 2015

[4] http://getbootstrap.com/, Bootstrap framework website

[5] https://www.google.com/design/spec/material-design, Material design by Google

[6] http://materializecss.com, Materializecss framework website

[7] https://www.polymer-project.org/, Polymer framework website

[8] https://en.wikipedia.org/wiki/Virtual_private_network, Virtual Private Network explanation by wikipedia

[9] https://en.wikipedia.org/wiki/Product_lifecycle, Product Lifecycle Management explanation by wikipedia

44