MIGRATING AUTOLUX WEBSITE FROM MODX TO PHALCONPHP WITH FURTHER DEVELOPMENTS (Search Engine Optimization and Mobile Application Support Implementation

: Autolux Project is owned by DTT Multimedia B.V. Autolux is a platform for car lovers sharing their information about favorite or latest cars. The website was built in MODx (CMS framework) which considered being old and heavy by the company. With that very reason, a project to migrate the website from MODx into PhalconPHP (pure PHP framework) was started. Migrating website from MODx to PhalconPHP was a success, and to boost the website popularity, the first thing to do is to implement the SEO standards. Another demand by the company was for the website to be responsive and using OOP standarts. Responsive website can be reached by using the help of libraries. PhalconPHP already implemented OOP, thus the developer will follow the MVC pattern given and refine it by doing more separation of concerns. Later on, the developer also put more refinements on the website to boost the speed of page loading, support multilingual, and management system.


INTRODUCTION
Autolux is a platform for car lovers to share their information about favorite or latest cars.The website was built in MODx (CMS framework) which considered being old and heavy by DTT Multimedia B.V. With that very reason, a project to migrate the website from MODx into PhalconPHP (pure PHP framework) was started.
MODx and PhalconPHP run in entirely different environment.While MODx will only require to "drag and drop", PhalconPHP has to be typed (hardcoded).There are also several demands from the company to develop the website even further, such as adding a "user-generated content" feature and push notification.During the building of the website, the developer was always faced with the question "How to develop the website into the latest technology", which triggered many ideas to be implemented in the website.Even the "user-generated content" feature was upgraded into a plugin for flexibility and reusability reason.

PROBLEM STATEMENT
The Autolux website was in an unfinished and undesirable state."Undesirable state" was because it used MODx, whereas the company wants their entire website projects to use PhalconPHP.MODx is an open source content management system framework, while PhalconPHP is a high-performance pure PHP web framework based on MVC pattern.Those frameworks are totally different in both system and structure; therefore, it is a challenge on how to migrate the website into an entirely new pattern.The project was in "unfinished state" because in reality, it had been rebuilt in PhalconPHP, but then terminated in its development progress.Documentation is available in unclear state; thus no one was able to continue the project.

METHODOLOGY & PHASING
The building process was done as a solo project with SCRUM methodology.There were three main phases: planning, sprints (in cycle), and closure.Planning phase consisted of preparation and research.Preparation was the process for gathering the previous website information and project plan writing.Research was using the Library, Field, and Workshop strategies from DOTS framework, to gather new information to find the best solution in building the new website.The research was conducted several times in the Sprints phase because to fit the demands.

CHOOSING THE BASE FRAMEWORK MVC Framework Compared to CMS Framework
Autolux website was built using MODx, a Content Management System (CMS) framework, which available as free Open Source.CMS framework is more of an application rather than framework.It provides the user with an advance backend GUI.It is easy, fast, and so called all-in-one-package.The downside of using CMS is it has either limited or toobroad features depend on how complex the website is.
The website was rebuilt using PhalconPHP, which is pure PHP framework with Model-View-Controller (MVC) pattern and available as free Open Source.Model acts as the one that retrieve the data from database.View contains HTML code, and it acts as the interface showed in the web browser.Controller is connecting the Model into View.See   Beside the structure, MVC frameworks, in general, contain collections of classes and functions (in code), where users can freely use them to build their desired features almost from scratch.By using MVC framework, user has the basic structure of website that is neat and maintainable than just a plain PHP.MVC frameworks also support the building of as many plugins as possible.The downside of using MVC frameworks is they do not have any backend GUI.Also in practice, the knowledge about Object-Oriented Programming is required.

The Benefits of PhalconPHP
PhalconPHP is just one of many PHP MVC frameworks available.PhalconPHP is delivered as a C extension [1].Compared to PHP, C is considered as a low level language.Building an application using C will take longer time, but the bright side is that C has the ability to manage memory and the compiling speed is much faster because C is closer to machine language.With the idea to gain faster compiling time, Phalcon was built using C and able to interpret PHP.PhalconPHP also low consuming in memory and CPU compared to other frameworks [1].Other benefits of using PhalconPHP are:  To support database, Phalcon uses PHQL, where executing query will be faster [2].It also allows user to define the relations between tables. Volt is the template engine which is highly integrated with PhalconPHP.Volt is lightning fast, highly functional and well documented. Phalcon Forum is available for any questions regarding the framework.
The downsides of using PhalconPHP are:  The stable release (version 3.0.3)was published on December 24, 2016; which is just recently [3]. Unlike most PHP frameworks where user only need to copy-paste the files to server, Phalcon needs to be installed first in the server before using it.The reason is Zend Engine cannot interpret the Phalcon language. Phalcon is a joint of C and PHP.For PHP programmers who never experience C language, Phalcon will not be a good choice as a starter.

Database Problem
In the old website, the developer was unable to map the structure of the database, when it finally comes to realize that all the contents are saved into one table named "modx_site_content".It was unstructured and inefficient; therefore, MODx database cannot be reused and another study was conducted on the whole Autolux project (including the mobile application).In the end, it was decided that the current project will be using the mobile application database, and it will be extended to fulfill the demands.
The mobile application database was the normalized version of the old database, where each value was categorized based on its concern.Normalization was done in order to improve storage efficiency, data integrity and scalability [4].See the example of normalization in Fig. 5.The normalized database was extended by adding more attributes, for example "status" to add more features on the website.

User Interface Segregation
In the new website, the layout was separated into three parts: head, body, and foot.Head section is exclusively for <head>, while the <body> will be separated into body and foot.The content of body will be retrieved based on the action triggered from controller.While the content of the body will always change depending on which page is accessed, the content of head and footer will never change.

SEARCH ENGINE OPTIMIZATION (SEO)
SEO is a marketing discipline focused on growing visibility in organic (non-paid) search engine results.SEO encompasses both the technical and creative elements required to improve rankings, drive traffic, and increase awareness in search engines [3].Google will give site links to the good website, making users able to jump on certain page or section.However, these site links will only be automatically generated by Google if the website is really popular.Even if it is automatically generated, it does not mean impossible, the website just has to get more popular.By implementing SEO, the website will gain higher search traffic and be more noticeable to Internet users.
There are many ways of implementing SEO [6]

USER-GENERATED CONTENT
The user-generated content element was needed in order to enrich the keywords inside the website, thus increase the rating and ranking of the website.Therefore, this element was implemented as comment plugin.User may generate text, link, image, even video.The comments are stored using Adjacency List Method [7] in MySQL database, and secured from spam by using sanitizing and honeypot captcha [8].
Anonymous Feature was added later on to boost the enrichment of keywords.This feature can be turned off at any time.Also to provide flexibility and faster load, the plugin was delivered as jQuery plugin.Flexibly, for then the interface can be reused on other websites.Faster load, for it can be set as synchronized (load in the background).

OTHER DEVELOPMENTS Fast Loading
Two of the SEO standards given by the company are "Page speed must be high" and "Page loading time must be low".In order to reach these standards, the method chosen was the infinite scroll [10].A plugin named jScroll [9] is used.
What is considered as fast speed?Based on John Steven, in 2016, it would be the best to load between 0.5-2.0seconds Error!Reference source not found.. Several testing websites were used and the average time to load the homepage is 2.6378 seconds.A little bit over the target due to unoptimized images, but the company's demand for a good quality image so the website was kept as it was.

Multilingual Website
The method used to select the language is "subdomain" method.Each subdomain will redirect into its own directory of website files, with different translation.This the most advance and tidy method, but not all hosting services have their subdomain feature activated.This method was chosen by the company because the server can have subdomains and additional database system is added.Therefore, all subdomains were pointing on the same website files directory, but all the texts will be stored inside database.The view will retrieve the texts based on the current subdomain's name.

Push Notification
Push notification has been used these days to replace email notification.Compared to email which stays longer, the user feels the urgency to read the information on push notification.Sometimes emails are also trashing the inbox, making user mark the sender address as spammer, resulting in rejection of information, which is not good for the website owner.
Autolux will be using web push notification service provided by other server, for it is impossible to build our own push notification service without decent resources and planning.Because of the lack of resources, it was decided to use one of the free services available in the Internet.

API for Mobile Application
After migrating the API (in this project, API acts as service to provide JSON response), the test was conducted and proved to be synchronized.The only problem encountered is the URL for retrieval in the Android was written in wrong format (for example, "ForumStatus" should be called as "forum-status").The problem was solved by changing the methods in Android code into the right one.

CONCLUSIONS
As a result of conducting this research, there are several conclusions, they are:  Migration a website from MODx into Phalcon PHP was proven to be possible, but the whole PHP system had to be built from scratch.Even the database structure needs to be discarded.The only


Images should be optimally resized for fast loading, receive good titles, and automatic alt text. Add some text on homepage.The text should contain h1, <strong> (opt.), <em> (opt.) Set up keywords map in footer

Fig. 7 .
Fig. 7. Diagram of API workflow High page speed & low loading time  Registered in Google Webmaster Tools  Create sitemap.xml and robots.txt