Develop an ABC Learning Centre in Visual Studio code

This website was designed purely using HTML, CSS, Javascript, jQuery. The website is for a training institute which provides programming courses and before development the Information Architecture and Storyboard are created.

Information Architecture

Storyboard

Storyboard

jQuery components such as the accordion and tabs was used in the website. The accordion is used to present information in limited amount of space while the tabs is used to separate information content into a separate panel.

Local Storage was also used to save data from user who register for courses in the lead generation form. The local storage store data locally within the browser and information is never transferred to the server. Using Javascript, local storage data can be displayed, edited, deleted and cleared in the admin page.

MCQ System Using Java

As part of Programming Foundations module, I have developed this MCQ System containing questions on the subject knowledge of Java Basics and Control Structures. User may choose between the 2 subjects and there can be multiple answers to a question.

After answering a total of 10 questions, user will be able to see their test result based on the number of right and wrong answers and final score.

Battle Ships Using Java

In this project, I have created a Battle Ships game where player will place 5 of their ships on a 10 x 10 grid. The player will compete against the computer and take turns in sinking each other's ship by randomly picking the X and Y coordinates. " ! " symbol is marked if player sink the computer ship while " x " symbol is marked if computer sink the player ship.

When either the player or computer is completely out of ships, then the winner and score is displayed.

Design ABC Community Portal User Interface using Axure RP 10

Before the community portal was developed, the wireframe representing the skeleton of the website was designed. Below shows, Registration page wireframe design in Axure RP 10.

After the wireframe is designed for each pages for the community portal, a prototype is created. In Axure RP 10, interactions can be added in terms of Page Interactions or Page loaded to simulate the real process flow of several scenarios, for example like registration.

The Registration prototype is possible in Axure RP 10 with the use of Global Variables where data like First Name, Last Name, Email and Password are accessible in every page.

Database Design for ABC Community Portal

Database design was the next module after completing the user interface design. A MySQL database is design and develop to organize data from user, adding security and integrity to data. The design starts with a conceptual design consisting only entities and relationships without the attributes using ERDPlus.

From the conceptual design, the Entity Relationship Diagram (ERD) includes the attributes. The ERD represents the relationship between User and other entities like Administrator, Job, Thread, User Profile and Message. Each entities has attributes or characteristics like job attributes are the job description, salary and company. Cardinalities define the relationship between entities which can be 1:1, 1:M or M:N

The logical design is done after normalization is done with primary key identified and underlined while the foreign key are marked as (FK) in the diagram below

The EERD or extended entity relationship diagram display in generalized class or known as super class and specialized class known as sub class. This diagram can be generated in MySQL Workbench through database reverse engineer which transform existing database into a logical and relational model consisting of attributes and table keys.

Portlet and Design Pattern in Liferay

Portlet or web apps can be created in Liferay. I have developed a Customer and Service Management portlet where the Administrator can add services, customer and performing CRUD operations of edit and delete.

The architecture in Liferay is high in complexity and once a module is created, many packages are generated automatically. The facade design pattern is identified where the complexity of accessing the service is hidden in order to implement CRUD operation. The facade class act as a universal interface.