Mitsubishi Strada Triton

Internet Banking Data Sync




Enjoy Jakarta

Jquery CSS Gradient Generator

Dekbed Expert

Journals of Universitas Indonesia

Newer posts

Spectral Jquery Gradient Generator This is a jquery plugin which are able to generate CSS gradient lengthy script. This tool was meant to be used by theme designer who want to incorporate customizable CSS gradient within their theme. It's built using jQuery UI and jQuery Colorpicker. Github page: https://github.com/emkamal/Spectral-Jquery-Gradient-Generator Demo page: http://kamalabs.com/Spectral-Jquery-Gradient-Generator/
dekbed-scrSoon after I close my own startup, Univind (web design agency), I got a job offering from a similar firm in Netherland: YaviDesign. They have office both in Netherland and in Bogor, Indonesia. They gave an option for me either to move to Bogor and work on their Indonesian office, or to work remotely from home. I chose to work from home. In there I was being tasked to handle several projects with their clients, one of the most prominent client was Dekbed Expert. It was all Magento based online shop. Below are some of my job responsibilities:
  • Design a Magento template to be used by their clients
  • Create proprietary template framework to be used company-wide on future theme design project.
  • Develop some Magento plugin
  • Do a test and some bug fixing to some of their templates / plugins

Project Challenge

All my work here was done remotely. We used SVN as the versioning control and Redmine as collaboration and project management tool. This was my first time doing a fully remote software development project. Initially, there were many mistakes I did here and there with the collaboration tools. But as the time goes by, I was becoming used to the whole remote collaborative project.
enjoy-jakarta-11 The client of this project is DISPARBUD DKI Jakarta. It's an abbreviation of "Dinas Pariwisata dan Kebudayaan DKI Jakarta". In English, it is translated loosely to "Tourism and Cultural Office of Jakarta". It's a local government institution which deals with tourism and cultural issue. My responsibility in this project was to rebuild their website. Their old website was developed using a custom built PHP CMS. Unfortunately, this custom built CMS has too many fault in it. It had too many bugs. It's slow and unsafe. The design was clumsy. The code was a mess. At first we planned to annihilate this old website and rebuilt a new on with better CMS, but then I ended up fixing it instead.

Project Challenge

In the middle of the project, there were a succession of the leadership in Jakarta. We were finalizing an election and just got a new governor in Jakarta: Mr Joko Widodo (Jokowi). Jokowi did some reshuffle to his officials, including officials at the Tourism Office. So, at that time, the PIC of the project moved to another person. This turned out to be a big dilemma for the project. We were halfway through our project and then there was someone new "in town" and she wants everything changed. The institution didn't have a good succession mechanism to make sure that the works which were still running, could still run smoothly. The new official demanded so many new things from us that we ended up being brought back to the beginning of the project. And all of a sudden, we were finally just brought back the old website and fixed what's wrong it instead of continuing to develop the half-finished new website. Of course we're familiar with the fact that fixing someone else's code is harder than writing a new one. But, in this case, where there's already too much miscommunication between us and the recently-changing client, doing whatever the client wants is better than just dumping the whole project. For the sake of our integrity and credibility, we chose the hard way to fix the broken web. Thankfully, we managed to finish the project with client somewhat satisfied (although I wasn't ;) ).
Bappenas is abbreviation of "Badan Perencanaan dan Pembangunan Nasional", in English it means "National Development Planning Agency". It is a government institution with the same level of ministry. Its main purpose is obviously to make and evaluate planning for Indonesia's national development, as the name suggest. The scope of the project was quite big, here are some of it:

Rebuild the old Drupal based website using a more modern Concrete5 CMS

Their old website was made using an old un-maintained version of Drupal. They didn't maintain it very well because the don't know how, the developer of the old website could no longer be contacted for help. So they decided to hire a new developer to build a completely new website. The choice of Concrete5 CMS was made by them. They thought that since their old website use a lot of block styled component, usage of Concrete5 would be a bliss since Concrete5's main selling point is it's ability to manage the website by drag-and-drop-ing block component. To match all the requirements of the new website, we made several custom built plugin for Concrete5 CMS.

Migrate massive amount of data from the old website to the new one

The old drupal based website already had abundant amount of data both structured and unstructured, either inside the database or in downloadable PDF/DOC/JPG/etc. files format.  We had to migrate all those old data to the new Concrete5 website. There was huge amount of work of mapping Drupal database structure into the Concrete5 database structure. We made a lot of tests to validate each migrated data.

Implement a mailing newsletter system and integrate it to the website

They asked for a newsletter system which could be integrated into the website. We implemented it using PHPList and integrated it to the Concrete5 CMS.

Implement an SMS gateway system and integrate it to the website

In addition to the mailing and newsletter system, they also asked us to integrate the website with their ready-to-use SMS Gateway system. They want every comment/message to a department of their institution be notified via SMS to the corresponding official. For this task, we create a special plugin for concrete5 CMS to communicate with their Kalkun SMS Gateway API.

Implement and integrate an independent search engine system

Concrete5 CMS doesn't have stellar searching system. All it does is just a simple text search throughout it's own database. No ranking algorithm, no indexing. It's also unable to read anything from the plentiful amount of downloadable PDF/DOC files. Bappenas need it so much but there's no way to customize and extend Concrete5's searching functionality. Futhermore, Bappenas has many independent information system with their very own functionality such as data library system, GIS, etc. Each system has independent basic search engine of their own. This is also a problem for them. They want a unified search engine system which is able to crawl and index all of their internal data bank as well as their public web page. So, we built them one using Apache Nutch as the crawler and Apache SOLR as the indexer. We constructed a separate specialized server infrastructure for this search engine system.

Project Challenge

I am not the actual contractor of this project. I'm just a subcontractor. In the beginning of the project schedule, the main contractor couldn't handle the project very well since they didn't have the resource to do the work. Beside, they're not exactly an IT company, they're just a general contractor company. They thought that this project is not so complicated (IT-wise) and they believed they could just find someone who can do the entire job for them. They're wrong. Months goes by without any progress from them. That is where they contacted a friend of mine and myself for help. We started by re-evaluating the project requirements. We wanted to make everything clear between us (the subcontractor), the main contractor and the client itself. After that we realized that we'll gonna need more people into the project, so I convinced the main contractor to hire more people to join the project. We did it, after that, I was being promised that they, as the main contractor, would appoint one of their man as the project manager to coordinate us all. It turns out to be an empty promise. They didn't really do the role as project manager for us. So, we're (the subcontractor team) ended up being scattered and un-coordinated. Since I was the only team member who was a full time freelancer, I was the one who has the most available time to meet with the client. The client thought that I was the project manager. More or less, I took that role as the project manager indirectly.
strada This site was specifically built as a product showcase and that product is Mitsubishi Strada Triton. The client was PT Krama Yudha Tiga Berlian Motors (KTB), it is the official distributor of Mitsubishi vehicle in Indonesia from Mitsubishi Motors Corporation (MMC) dan Mitsubishi Fuso Truck & Bus Corporation (MFTBC). They asked me to built a cool looking site which can really emphasize all the good aspect of this Strada Triton car. I built it manually with PHP without any CMS or framework. Since this site was not meant to be updated regularly, it doesn't need any CMS backend admin to manage content. With that in mind, I have the freedom to arrange any content anyway I like in a beatiful design. I manually wove the design alongside with its content, page by page.

Project Challenge

At that time, HTML5 and CSS3 weren't really ready yet for an actual website. The browser support was still limited. So I tweaked all those design elements manually with many images. Something that could easily be achieved nowadays with just a couple lines of codes of CSS/JS. This condition also became a performance challenge. I had to minimize the number of images being used, so that we don't need to use too much HTTP request which obviously hinders website performance.
mikalu Mikalu.com is a bedding online shop. Mikalu sells bed sheet and bed cover throughout Indonesia. Most of the sales are done with dropshipping scheme. The dropshipping scheme works as follows: Reseller promote Mikalu's product as their own, when their customer order the product, the reseller purchase it from Mikalu. Mikalu would then process the order and ship the product directly to the reseller's customer. My job was to build a system for that dropship scheme. So, it is not just a basic usual traditional e-commerce system where they sell the products directly. It's more of an e-commerce with sales channeling system. The system was built using customized Wordpress + WP E-Commerce plugin. Beside the e-commerce system, I also designed the logo and developed the theme. I've make sure that the whole design pattern follows company's orientation. The logo design and color choice were chosen to reflect it's main target market, that is middle age woman. I made sure that the theme is search engine friendly enough to make it's content easily crawled and indexed by search engine bot.
Universitas Indonesia (UI) is a state university in Depok, West Java and Salemba, Jakarta, Indonesia. Universitas Indonesia is the oldest tertiary-level educational institution in Indonesia (known as the Dutch East Indies when UI was established). UI is generally considered as the most prestigious public university in Indonesia, along with Bandung Institute of Technology andGadjah Mada University. Despite having the recognition as the most prestigious public university in Indonesia, their online academic journals was somewhat fall behind. They're using open source journal application named Open Journal System (OJS) to serve their online journal. But it wasn't maintained very well. They kept using a very old version of OJS. This old version of OJS is so far behind any latest web technology. The design was clumsy, admin UI was confusing and the code was overlapping here and there. My job was to fix it all, I had to upgrade the system, crafted better design, fixed all the UI loophole. UI asked me to modernize below journals:

Project Challenge

UI has several online journals using the same installation of OJS. Many of them reside on the same server. UI asked me to modernize only some of their journals, not all of them. This was a dilemma, since I couldn't upgrade the core system of OJS installation on UI's server because it would affect all other journals which are assigned to me. The IT administrator refused my suggestion to upgrade the system with the fear that it would gone broken regarding backward compatibility with their own custom plugins. So, my only option was to fox the site-specific theme and plugins. I had to rewrite thousands of lines of code on all my themes which were meant to be used on the latest version of OJS.
TUT WURI HANDAYANIDIKTI is an abbreviation of "Direktorat Pendidikan Tinggi". In English, it means Higher Learning Directorate. It is a subordinate body of the ministry of education, Republic of Indonesia. This government institution deals with any occasion about higher learning education in Indonesia. Prior to my entrance, their website is somewhat mediocre and obsolete. It's slow, lousy, not well-organized and resource hogger. My job was to fix it all.   The first thing that I did was to give several suggestion regarding what kind of modernization needed for DIKTI's website. I, mainly highlighted on the information architecture. DIKTI has distinctive type of visitor to its website, those are:
  1. Student. They visit DIKTI's website mostly to look for scholarship opportunities, either domestic or foreign.
  2. Professor. They visit DIKTI's website to find information about lecturer certification, international conference opportunities etc.
  3. University officials. They visit DIKTI's website to check on new regulations, registering for a new field of study etc.
Old DIKTI's website didn't have easy to navigate information architecture to accommodate those 3 type of visitor. They simply just threw out any so-called "important pages" to the main menu. I fixed it by reformatting the navigational structure of the entire website along with the development of the new design template. Another thing that I emphasized is the performance. It was so slow that the connection dropped most of the time. They had problem with their obsolete CMS, conflicting plugins, and un-optimized server configuration. I dealt with all those issues. I upgraded the CMS, re-arranged all the plugins and optimized the server configuration. Beside rebuilding their main website, I also developed two subsite: the English version of the site and one other site to unify all of their public service under one roof (SatuLayanan Dikti). Those two subsite were built using the same engine: Wordpress. While upgrading their Wordpress installation, I also configured their old Wordpress to have multisite functionality. The English version of the site is using the same template as the main site for uniformity reason. While SatuLayanan Dikti use another metro-style theme design to facilitate easier finding of their public service information by the visitors.
PHP Application to crawl, retrieve, archive and compile several internet banking raw data from different Indonesian local banks. This application was scheduled to routinely get internet banking raw data using cURL. Those raw data would then be parsed using PHP Simple HTML DOM Parser to convert raw HTML data (mostly in the form of traditional HTML table) into a structured data. Finally, these structured data would be saved and archived to the database (using MySQL database) for later use. This application is able to automatically categorize each transaction by examining the sender name and the pattern of the transaction description. This automatic categorization is very useful for me to analyze my own incomes and expenses.

The Challenge

The main challenge with building this kind of application is of course tackling any kind of restriction from the banks. Many banks implement many kinds of restriction on their internet banking system to prevent robot to grabs the data. They might implement sophisticated Captcha, session based URL, HTML obfuscation etc. Also each bank has their own presentation of raw html data. This require me to build a special parser for each one of them.