Last year was very eventful at FOEX, which kept me occupied and kept me from blogging. Thankfully I managed to attend a few conferences and stay in touch with the community through Twitter and Slack on apex.world.

FOEX is growing a lot and needed a new website design, so we had a brainstorming meeting and decided to again build it in APEX.

Last week we finally decided everything for the website was ready (as much as possible) and we released it. Please go to www.tryfoexnow.com and tell me if you like it.

In this post I want to give some background info how we built it and why we decided to do it this way.

Our initial meeting turned out to be very productive, we were able to decide on content and design right away.

More important was the tool choice: should we use a CMS system like Joomla, Drupal or even WordPress ?

Those tools are built exactly for this purpose, right?

But then we also have the requirement to connect data entered on the website to our CRM tool, to Mailchimp and other services. Also we want to be able to centralize all data and to whatever analysis on that.

Since we are all Oracle APEX people and have no clue whatsoever of the before mentioned CRM tools, we decided to implement the website in APEX to have full control of everything and store the data in our Oracle DB.

Only the Blog would continue to run on WordPress, but the website itself would be APEX.

Although the new APEX 5 Universal Theme is awesome, it is mostly targeted towards business applications. We had higher requirements on the design itself and decided to go to Themeforest and purchase a custom design there. We bought the same design once as HTML and once as WordPress template, which totaled in less than 100 USD. So no point in doing the groundwork ourselves, right?

The Start

The purchased HTML design comes with a bunch of example .html files for different page types and layouts, like homepage, landing page, contact page, and so on.

Together with our CMO, Cristian, we used these examples and started to build our website in HTML files. To be frank, actually Cristian did most of the work there.

After a while we all agreed on the proposed structure, layout and content. Theoretically the website was ready, now all we had to do was move that to APEX.

Move the template to APEX

Based on the before created .html files we now had to dump that into APEX. To do that we created a new APEX 5 application using the universal theme.

In this application we created a new page template to hold our basic HTML structure and a bunch of list and region templates. In total we ended up with 19 custom templates which are used across the twenty something pages of our website.

Now, of course, you’ll ask: How does that work? How do you know which APEX templates you need to create?

This is actually pretty easy to do: let’s take for example the starting page at www.tryfoexnow.com/en/foex/home. When you scroll from the top to the bottom you’ll find different sections.

Each of those sections will be a region in APEX. Some regions just contain text, so they will be APEX static regions (before APEX 5 they have been called HTML regions).

Other, more complex sections, consist of multiple repeating elements. This is ideal for an APEX list region, based on a static list to begin with. Later on this could be moved to a table in the DB.

I’ll not go into more detail here, that would need a whole series of articles, but I think you get the idea. Just keep in mind this is a lengthy and iterative process, so don’t expect to get it right on the first attempt. There is a lot of work involved to set all that up as clean templates and APEX regions without too much HTML code “hardcoded”.

Nice URLs

After everything works and everyone is happy, the links had to be improved. Instead of using the regular APEX links, e.g. f?p=112334:238, we wanted to have nice URLs. Luckily we already know which options are out there (if you don’t, please read up in this article series) and decided to go with ORDS and RESTful services.

So we renamed ords.war to en.war and deployed that on our tomcat server. The workspace for our homepage is called “foex”. Putting it all together leads us to www.tryfoexnow.com/en/foex.

Now clean up all links within APEX (menu, branches, …) and you’re good to go.

Conclusion

With some work we got a (hopefully) good looking and responsive website built in APEX, which use SEO friendly links.

A good side-effect of using a well structured page layout with regions and APEX lists is that our CMO can actually change the website content without knowing anything about APEX programming. All we needed to do is show him how to open the Application Builder, how to navigate the Page Designer and where to find APEX lists.

I hope you like our new website and got inspired to use APEX even for usecases like a company website.