Implementation details - xhoelbano/mental_health_platform GitHub Wiki

Front-end (Client-side development)

The client-side of this web application is built using these scripting and stylesheet languages and technologies:

  1. HTML5 – a markup language used to structure, organize and display material on the WWW. It is used to build the front end's framework (backbone).
  2. CSS – a styling language, used for designing the pages, layout, font, and colors.
  3. JavaScript – a high-level, dynamic, reactive and interpreted programming language that makes the pages more interactive. Libraries:
  4. Bootstrap – the most popular HTML, CSS, and JavasScript framework for developing responsive web applications.
  5. jQuery – a JavaScript library that simplifies JavaScript usage concerning front-end tasks. I have utilized the following features from the jQuery library:
  • HTML/DOM manipulation
  • CSS manipulation
  • Event handling
  • Effects and animations
  • AJAX – makes HTTP requests to the server without reloading the page, receives, and works with data coming directly from the server. JSON objects are used to exchange data with the server.

Back-end (Server-side development)

The back-end of this web application is implemented using vanilla PHP: a fast, flexible, and pragmatic general-purpose scripting language suited to web development. XAMPP is used as the most popular PHP development environment (testing and development purposes not for production). As part of XAMPP, Apache HTTP Server is used. Apache is an HTTP cross-platform web server, used worldwide for delivering web content. The remote server of Apache delivers the requested files, images, and other documents to the user.

Database

The database used for this web application is MySQL, a relational database management system (more specifically the open-source MariaDB as part of XAMPP, a fork of MySQL). Using standard structured query language, being fast, reliable, compliable on several platforms, and easy to work with.

MVC architecture

MVC is used as an architectural pattern to implement the MH platform:

Model: the model classes have the single responsibility of communicating directly with the database. Inside each model, the respective functions that prepare the query statements are constructed. These functions return the results of database operations to the controllers. For example, a user object will retrieve a study/survey from the database and will manipulate its questions by giving answers and updating it back to the database.

View: the views from the front-end of the web applications contains all the page designs and respective dashboards. These are basic HTML files with UI components, which incorporate JS for an interactive experience. In this view, different UI components fire actions for the controllers to handle.

Controller: the controller acts as an interface between the Model and View components to process all the incoming requests, perform business logic, and manipulate data by using the Model and render the output into the views so it can be responded to user requests.