Blog Details


How do I design the CMS platform for several websites? (SGIC)

This is the first project that I have been working on after I graduated from the University.

Before I join SGI, there’s no CMS exist. The way they manage the content was through directly changing the HTML. That’s horrible as we always know. If one linked been changed, you’ll have to visit all the places and change it.

1. Platform

The platform / framework / CMS that we use is called Liferay. I am totally new to Java development, not mention to portlet development. Then I spent about 1 months to learn the technology and 5 months to plan the whole platform. And eventually you can see the picture of what I come up with:

Instead of using the template generating the page, I use it to generate the json files. Almost all the static pages are based on json files. The content manager still works on the Liferay backend, where they can manage the content. Once they click the button publish the content, there will be a json file been updated. So that the page can reflect the changes made by the content manager.

This way it can help save lots of requests to the database. Most of the website is running totally static.

To get the Json files updated, I have created a hook called “content-update-hook”. This hook uses Java ModelListener which can monitor the database, and do actions after the changes.

2. How long it took to complete this project?

It almost took one year to complete this. One year is long, but we have to consider almost all the situations and implement it from there. For example, content manager wants to create a page, and control the access url, plus the several templates are serving our content, I have to create a very complex structure which can fit all the content.

Here is a peek of one of the most complex structures:

    "friendlyUrl" : "$Friendly_URL.getData()",
    "template" : "$Template.getData()",
    "display_date" : "$Display_Date.getData()",
    "display_time" : "$Time.getData()",
    "use_social_image" : "$Use_Media_Image.getData()",
    "social_image" : "$Social_Media_Image.getData()",
    "social_image_url" :"$Social_Media_Image_URL.getData()",
    "article_author" : "$Article_Author.getData()",
    "data" : 
        #if (!$Region_Abbr.getSiblings().isEmpty())
	        #foreach ($cur_Region_Abbr in $Region_Abbr.getSiblings())
		            "province" : "$cur_Region_Abbr.getData()",
		            "publish_to_home" : "$cur_Region_Abbr.Publish_to_homepage.getData()",
		            "font-awesome" : "$cur_Region_Abbr.Font_Awesome.getData()",
		            "button" : 
		                #if (!$cur_Region_Abbr.Button_Text.getSiblings().isEmpty())
		                    #foreach ($cur1 in $cur_Region_Abbr.Button_Text.getSiblings())
		                            "button_text" : "$cur1.getData()",
		                            "button_link" : "$cur1.Button_Link.getData()",
		                            "button_css" : "$cur1.Button_CSS.getData()"
		                        } #if($velocityHasNext ), #end
		            "informative_title" : "$cur_Region_Abbr.Informative_Title.getData()",
		            "informative_content" : "$stringUtil.replace($cur_Region_Abbr.Informative_Content.getData(), '"', '\"').replaceAll('(\r\n|\n|\t\n|\t)', '')",
		            "banner_info" : "$cur_Region_Abbr.Banner_Info.getData()",
		            "carousel_id" : "$cur_Region_Abbr.Carousel_ID.getData()",
		            "desk_banner_img" : "$cur_Region_Abbr.Content_Desk_Banner_Img.getData()",
		            "desk_banner_img_url" : "$cur_Region_Abbr.Content_Desk_Banner_Img_URL.getData()",
		            "mobile_banner_img" : "$cur_Region_Abbr.Content_Mobile_Banner_Img.getData()",
		            "mobile_banner_img_url" : "$cur_Region_Abbr.Content_Mobile_Banner_Img_URL.getData()",
		            "polls_id" : "$cur_Region_Abbr.Polls_Identifier.getData()",
		            "media_contact_id" : "$cur_Region_Abbr.Media_Contact.getData()",
		            "article_content" : "$stringUtil.replace($cur_Region_Abbr.Article_Content.getData(), '"', '\"').replaceAll('(\r\n|\n|\t\n|\t)', '')"
		        }#if($velocityHasNext ), #end

3. Site Url


You will get different templates based on your devices.

4. Projects developed

  • content-update-hook
  • detect-device-portlet
  • language-update-hook
  • sgic-common-theme
  • sgic-desktop-theme
  • sgic-mobile-theme
  • sgic-search-theme
  • sgi-refined-search-portlet
  • Short-Url-portlet
  • web-title-escape-hook