Dissertation work [625450]

1

Dissertation work

Aquarium tools using web
technologies

Author: Alexandru -Dan URSACHI
Scientific coordinator: Conf. univ. dr. Livia SÂNGEORZAN

Brașov, 2018

Study program :
Master
Internet technologies (in English)

2

Table of contents

1. Introduction
2. Hardware – Raspberry Pi2

3. Backend Tech nical Specification
3.1. MySQL vs . SQLi te3
3.2. Composer
3.3. PHP & CakePHP
4. Frontend Technical Specification
4.1. HTML5
4.2. CSS3
4.3. Bootstrap3 vs . Bootstrap4
4.4. W3.CSS
4.5. W3.CSS vs . Bootstrap
4.6. Google charts
4.7. Charts.js
5. Conclusion
Bibliography

3

Chapter 1

Introduction

Web applications are the primary source of information over the internet and there is
always a high demand for continuously evolving web applications. The web industry foresees frequent shifts in the requirements and architecture of web applications througho ut their lifecycle.
A web application is an application that can be accessed by the users through a web browser. The browser creates HTTP requests for specific URLs that map to resources on a web server. The server renders and returns HTML pages to the c lient, to be displayed in
the browser. Server -side logic makes a web application more powerful and productive. It
contains several distinct layers.The three- layered architecture is the most common type of
software design pattern used when designing any web applications. [1]
Web technologies is a general term referring to the many languages and multimedia
packages that are used in conjunction with one another, to produce dynamic web sites such as future presented project. Each separate technology is fairly limited on it's own, and
tends to require the dual use of at least one other such technology. [2]
Of the many web technologies, I 've decided to use and compare some of the most popular
web-based applications to help debutant s in aquaristics .
The purpos e of this application is to guide the user to make s ilicone -sealed glass
aquariums, by obtaining optimal dimensions and wall thickness according to the available
space, and by providing with support in choosing fish species, taking into account their
socia l characteristics and the physical and chemical properties of the water.
The project enhances abilities to work in the backend development as well as frontend development and also requires knowledge of web- based application development and
system design and development.

4

Chapter 2

Hardware – Raspberry Pi

The Raspberry Pi has found its way in to the hobbyist market for computing, but it is also very capable for other business and personal use as well. An extremely low power draw, small form factor, no noise, solid state storage, and other features make it an attractive
solution for a small and lightweight server. [3]

Since the Raspberry Pi is a basically a mini -computer, I decided to use it as a mini server
for my web application, due to its many advantages:
• Affordable – compared to other similar alternatives, the Pi (revision B) offers the
best specs for the price. It is one of the few devices in its class that offers 512 MB of
RAM. The Pi has come down in price since it first arrived, and is final ly affordable as
a hobby, business use, or whatever need there is.

• Small form factor – The Raspberry Pi can be held in your hand. A comparable full –
size box cannot. This means the Pi can be integrated inside of devices, too.

5
• Power consumption – The Pi draws about five to seven watts of electricity. This is
about one tenth of what a comparable full -size box can use. Since servers are
running constantly night and day, the electrical savings can really add up. We can
consider that the basic Pi kit (Pi board, case, and power supply) will pay for itself
with about one year's worth of electricity savings if it's left to run 24x7x365.

• No moving parts – The Pi uses an SD card for storage, which is fast and has no
moving parts. There are also no fans and other things to worry about.

• No noise – The Pi is completely silent.

• Status lights – There are several status lights on the Pi's motherboard. With a clear
case you can see NIC activity, disk I/O, power status, etc.

• Expansion capabilities – There are numerous devices available for the Pi, all at
very affordable prices. Everything from an I/O board (GPIO) to a camera. The Pi
has two USB ports, however by hooking up a powered USB hub, more devices can
be added.

• Multiple uses – Having the storage on an SD car d makes it easy to swap with other
SD cards running other GNU/Linux distributions to quickly and easily change the functionality of the Pi. If you want to set up the Pi to run as a server to test it out, then later try something else, just swap the SD card and you're done. Using the "dd"
command on a GNU/Linux computer, a backup of the SD card can be created and
later restored if needed.

• Built -in HDMI capable graphics – The display port on the Pi is HDMI and can
handle resolutions up to 1920×1200, which is nice for making the Pi in to a video player box for example. There are some converters that can convert to VGA for
backwards compatibility.

• Huge community support – The Pi has phenomenal community support. Support
can be obtained quite easily for the hardware and/or GNU/Linux software that runs on the Pi mainly in user forums, depending on the GNU/Linux distribution used.

• Overclocking capability – The Pi can be overclocked if there are performance
problems with the application used, but it is at the user's risk to do this. [3]

6

Chapter 3

Backend Technical Specification

The back end of a website consists of a server, an application, and a database. A back -end
developer builds and maintains the technology that powers those components which,
together, enable the user -facing side of the website to even exist in the first place.
In order to make the server, application, and database communicate with each other, back –
end developer s use server -side languages like PHP, Ruby, Python, Java, and .Net to build
an application, and tools like MySQL, Oracle, and SQL Server to find, save, or change data and serve it back to the user in front -end code. [4]
3.1. MySQL vs SQLite3
Datab ases are logically modelled storage spaces for all kinds of different information (data).
Each database, other than schema- less ones, have a model, which provide structure for
the data being dealt with. Database management systems are applications (or libr aries)
which manage databases of various shapes, sizes, and sorts.
Relational Database Systems implement the relational model to work with the data. Relational model shapes whatever information to be stored by defining them as related entities with attributes across tables (i.e. schemas).
These type of database management systems require structures (e.g. a table) to be defined in order to contain and work with the data. With tables, each column (e.g. attribute) holds a different type (e.g. data type) of i nformation. Each record in the database, uniquely
identified with keys, translates to a row that belongs to a table, with each row's series of
attributes being represented as the columns of a table – all related together, as defined
within the relational model.

Relational databases have been in use for a long time. They became popular thanks to management systems that implement the relational model extremely well, which has proven to be a great way to work with data, especially for mission- critical applic ations. [5]
Server -based databases, such as MySQL, PostgreSQL, Microsoft SQL Server, and Oracle,
are designed to be used on servers instead of on a desktop, and they are meant to be shared by multiple users.
For my web- based application I've chosen to w ork with MySQL & SQLite because of my
previous experiences and also because MySQL is an open source Relational Database
Management System (RDBMS) that uses Structured Query Language (SQL).
The main features of using MySQL are that it is very user friendl y, easy to use, quickly
processing and flexible. Because it is a relational database, it stores data in different tables making it possible to use same data flexibly in different ways. MySQL server controls the access to project data and makes sure that multiple users can work parallel with the same data with fast and easy access. It also restricts to the authorized users who can have access to the data. [1]

7
MySQL

MySQL is the world's most popular open source database. With its proven performance, reliability and ease- of-use, MySQL has become the leading database choice for web- based
applications, used by high profile web properties including Facebook, Twitter, YouTube, Yahoo! and many more. [6]
Getting started with MySQL is relatively easy and developers have access to a massive array of information regarding the database on the internet. Also, given the popularity of the
product, there are a lot of third- party applications, tools and integrated libraries which help
greatly with many aspects of working with this RDBMS. [7]
Despite not trying to implement the full SQL standard, MySQL offers a lot of functionality to the users. As a stand- alone database server, applications talk to MySQL daemon process
to access the database itself – unlike SQLite.
MySQ L is able to store large amount of data, works with a broad range of compilers, and
supports many scripting languages and various platforms. MySQL has a large set of functions and supports several different client programs and libraries, administrative tools, and application programming interfaces. MySQL is also a standard interactive programming language for getting information from a database. It isvery good in organizing and managing large amounts of data. It also allows making queries about the informat ion in
the database along with data selection, insertion and updating. [8]
MySQL's Supported Data Types: TINYINT , SMALLINT , MEDIUMINT , INT or INTEGER ,
BIGINT , FLOAT , DOUBLE, DOUBLE PRECISION, REAL , DECIMAL, NUMERIC, DATE ,
DATETIME , TIMESTAMP , TIME , YEAR , CHAR, VARCHAR, TINYBLOB, TINYTEXT ,
BLOB, TEXT , MEDIUMBLOB, MEDIUMTEXT , LONGBLOB, LONGTEXT , and SET.
Advantages of MySQL:
• Easy to work with
• Feature rich
• Secure
• Scalable and powerful
• Speedy
Disadvantages of MySQL:
• Known limitations
• Reliability issues
• Stagnated development [5]
SQLite
SQLite is an amazing library that gets embedded inside the application that makes use of.
As a self -contained, file- based database, SQLite offers a set of tools to handle all sorts of
data with much less constraint and ease compared to hosted, process based (server)
relational databases.
When an application uses SQLite, the integration works with functional and direct calls made to a file holding the data instead of communicating through an interface of sorts. This makes SQLi te extremely fast and efficient, and also powerful thanks to the library's
underlying technology.

8
SQLite's Supported Data Types: NULL , INTEGER , REAL , TEXT and BLOB .
Advantages of SQLite:
• File based
• Standards -aware
• Great for developing and even testing
Disadvantages of SQLite:
• No user management
• Lack of possibility to tinker with for additional performance [5]

Google trends [9] comparation – Janaury 2018:

Considering the above aspects we can conclude that:
It is recomanded to use SQLite when:
• your wor king with applications that need portability, that do not require expansion
(e.g. single -user local applications, mobile applications or games)
• you need disk access replacement
(e.g. to read/write files to disk directly can benefit from switching to SQLite for
additional functionality and simplicity that comes from using the Structured Query Language (SQL).
• testing the application's main purpose
(functionality)
It is recomanded to use MySQL when:
• you need more than what SQLite can offer, including MySQL to your deployment
stack, just like any stand -alone database server, brings a lot of operational freedom
together with some advanced features
• the application requires reliable protection for data- access (and use) in a simple way
• you need a flexible and somew hat scalable tool which is easy to use and easy to
manage (very helpful in the long run)
• you are working on a highly specific and extremely custom solution (MySQL can tag
along easily and go by your rules thanks to its rich configuration settings and
operation modes) [5]

9
Below you find the MySQL database diagram for aquarium tools project :

3.2. Composer
Composer is a tool for dependency management in PHP. It allows you to declare the
libraries your project depends on and it will manage (install/update) them for you.
Composer is not a package manager in the same sense as Yum (Fedora Linux OS) or Apt
(Ubuntu Linux OS) are. Yes, it deals with "packages" or libraries, but it manages them on a
per-project basis, installing them in a directory (e.g. vendor) inside your project. By default it
does not install anything globally. Thus, it is a dependency manager. It does however support a "global" project for convenience via the global command.
This idea is not new and Composer is strongly inspired by node's npm and ruby's bundler .

10
Suppose:
You have a project that depends on a number of libraries.
Some of those libraries depend on other libraries.

Composer:
Enables you to declare the libraries you depend on.
Finds out which versions of which packages can and need to be installed, and installs them (meaning it downloads them into your project). [10]
Package management is clearly the right route forward for PHP. Languages such as Ruby
have shown how incredibly easy it is to use packages within projects so common problems can be solved once, and you can stop wasting time as a developer by constantly reinventing the wheel.
Many of the most popular frameworks have already positioned themselves to use
Composer, and many more individual developers are releasing code that is Composer ready from the get go. [11]
3.3. PHP & CakePHP
In order to use PHP in a web application, the web server m ust have a PHP installed. PHP
file ends always with ‘php’ extension, so it is easy for web server to automatically pass it to PHP processor. PHP can be included in side of HTML code, but the most recommended and useful approach is to store PHP code in a separate file so that it can be modified and reused easily in future. PHP is an object -oriented programming (OOP) language, which
makes building complex, modular and reusable web applications. [1]
PHP is a server -side scripting language designed for web development but also used as a
general -purpose programming language.
Originally created by Rasmus Lerdorf in 1994, the PHP reference implementation is now
produced by The PHP Group.

The abbreviation of PHP originally stood for Personal Home Page, but it now stands for the
recursive acronym PHP: Hypertext Preprocessor .
PHP code may be embedded into HTML code, or it can be used in combination with
various web template systems , web content management systems, and web frameworks .
PHP code is usually processed by a PHP interpreter implemented as a module in the web
server or as a Common Gateway Interface (CGI) executable. The web server combines the
results of the interpreted and executed PHP code, which may be any type of data, including
images, with the generated web page. PHP code may also be executed with a command –
line interface (CLI) and can be used to implement standalone graphical applications .
The standard PHP interpreter, powered by the Zend Engine, is free software release d
under the PHP License . PHP has been widely ported and can be deployed on most web
servers on almost every operating system and platform , free of charge. [12]
PHP is the ever popular and efficient scripting language and has proved to be a boon for developers to overc ome the challenges. It not only makes the development process easy
and efficient but also reduces the development cost and time. Thus, this scripting language
is gaining much of the popularity among the modern developers.

11

In the era of complex and challenging project requirement, where the development from scratch is not a good idea, PHP frameworks appear to ease the development process. To boost the web application development process top PHP frameworks are used widely as
they are easy to use and quick to implement. [13]
According to buildwith.com, the PHP language is used most often for web application
development (33.45%), followed by ASP.net (24.31%), J2EE (7.79%), and Ajax (7.75%).
Below you cand find the most popular PHP frameworks in 2017 :

Web Application Framework s
Web Application Framework (WAF) is an organized system which provides a foundation or substructure for web application development. It also assists other web- related fields in
custo mization, resource services and API -related tasks. The framework is a resource for
the development process and makes the development and maintaining process easier and convenient and saves time and effort.
In a traditional PHP development environment, the developer is required to create
interfaces for each aspect to the system, for instance an easy database access or user authentication. The framework is one kind of solution to this problem. In an application development environment, the reuse of code could play a vital role. The reuse enables efficiencies in the amount of new code required, which saves time and costs not only in coding section, but also in other tasks like design, coding and testing undertaken as part of the development life cycle. [14]
The stable interfaces provided by frameworks enhance reusability by defining generic components that can be reapplied to create new applications. Framework reusability

12
leverages the domain knowledge and prior effort of experienced developers in order to
avoid re- creating and revalidating common solutions to recurring application requirements
and software design challenges. Reuse of framework components can yield substantial improvements in programmer productivity, as well as enhancing the quality, performance, reliability and interoperability of software.
Mohamed Fayed defined a framework as a “reusable, ‘semi -complete‘ application that can
be specialized to produce custom applications”,”in order to reduce the cost and improve the quality of software” . [15]
He further divided frameworks into three application frameworks:
• system infrastructure frameworks,
• middleware integration frameworks
• enterprise application frameworks.
Accordingly, a web application framework is a reusable set of code libraries and to ols
designed to support the development of web applications. Web frameworks are created
from the general -purpose language by adding web components. A framework can consist
of many parts, including other frameworks and subsystems that are not frameworks .
The following table lists some popular web application frameworks, categorized by
programming language:
• PHP – Zend Framework, CakePhp, symphony, Seagull, etc
• RUBY – Ruby on Rails, Merb, Ramaze, Webby, etc
• Perl – Catalyst, Interchange, Mason, Jifty, etc
• Java – Struts, Hibernate, Java server faces, Spring, etc
• Python – Django, Pylons, Grok, web2py, CherryPy, etc
• JavaScript – Jquery, Dojo, MooTools, AJS, qooxdoo, etc.
• ColdFusion – ColdFusion on Wheels, ColdSpring, onTap, etc
• ASP.net — ASP.net MVC framework, DotNetNuke, MonoRail, etc [16]
Currently, there are a lot of frameworks to build web applications working with the
architectural pattern MVC (Model View Controller). One interesting approach is to use the
3-layer model, which allows identifying and separating the final application in different
layers that facilitates its construction and maintenance.
CakePHP
CakePHP is an open- source web framework that follows the model –view–controller (MVC)
approach and is written in PHP , modeled after the concepts of Ruby on Rails , and
distributed under the MIT License.
CakePHP uses well -known software engineering concepts and software design patterns ,
such as convention over configuration, model –view–controller , active record, association
data mapping , and front controller .
CakePHP started in April 2005, when a Polish programmer Michal Tatarynowicz wrote a minimal version of a rapid application development in PHP, dubbing it Cake. He published
the framework under the MIT license, and o pened it up to the online community of
developers.

13
In December 2005, L. Masters and G. J. Woodworth founded the Cake Software
Foundation to promote development related to CakePHP. Version 1.0 was released on May 2006. [17]
For my aquarium tools web appl ication I’ve worked with the newest version of CakePHP,
version 3.5.
CakePHP was designed to make common web- development tasks simple, and easy, by
providing an all -in-one toolbox to get you started the various parts of CakePHP work well
together or separ ately.
CakePHP provides a basic organizational structure that covers class names, filenames, database table names, and other conventions. While the conventions take some time to learn, by following the conventions CakePHP provides one can avoid needless configuration and make a uniform application structure that makes working with various projects simple. [18]

If we have a quick look on how a request cycle works in CakePHP (image above), we can identify the following layers:

• The Model layer represents the part of your application that implements the
business logic. It is responsible for retrieving data and converting it into the primary meaningful concepts in your application. This includes processing, validating, associating or other tasks related to handling data.

• The View layer renders a presentation of modeled data. Being separate from the
Model objects, it is responsible for using the information it has available to produce any presentational interface your application might need. This layer provi des a
number of extension points like View Templates, Elements and View Cells to let you re-use your presentation logic. The View layer is not only limited to HTML or text
representation of the data. It can be used to deliver common data formats like

14
JSON, XML, and through a pluggable architecture any other format you may need,
such as CSV.

• The Controller layer handles requests from users. It is responsible for rendering a
response with the aid of both the Model and the View layers. A controller can be
seen as a manager that ensures that all resources needed for completing a task are
delegated to the correct workers. It waits for petitions from clients, checks their validity according to authentication or authorization rules, delegates data fetching or processing to the model, selects the type of presentational data that the clients are
accepting, and finally delegates the rendering process to the View layer. [18]
Using CakePHP has a number of benefits that makes it unique from other frameworks. The main adv antages are:
• Compatible with a number of languages facilitating.
• Used to develop large- scale web applications including e- commerce and blogs.
• Specifically designed for large- scale web application
• Manages context and themes
• Has customized fields and templat es
• Easy to install and deploy on any kind of operating system
• Easy to test and debug
• Helps reduce web application development cost & time.
• Scaffolding code generation
• Easy to learn
There are many factors to consider when choosing the right tools for starti ng up with the
help of knowing and analyzing the needs and goals. This dependson the work
requirements, end product and current skills. Frameworks are created for common web
applications but not all should apply. [1]

15

Chapter 4

Frontend Technical Speci fication

The front end of a web application is the part that users interact with. Everything that you
see when you’re navigating around, from fonts and colors to dropdown menus and sliders, is a combo of HTML, CSS, and JavaScript.
Front -end developers are responsible for a website’s user -facing code and the architecture
of its immersive user experiences. In order to execute those objectives, front -end
developers can use one of the three main languages: HTML, CSS , and Javascript
programming . In addition to these languages, the front -end part needs also frameworks like
Bootstrap, Foundation, Backbone, AngularJS, and EmberJS, which ensure great -looking
content no matter the device, and libraries like jQuery and LESS, which package code into a more useful, time- saving form. [19]
4.1. HTML5
HTML (Hypertext Markup Language) is the standard markup language for creating web
pages and web applications . With Cascading Style Sheets (CSS) and JavaScript it forms a
triad of cornerstone technologies for the World Wide Web .
Web browsers receive HTML documents from a web server or from local storage and
render them into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
HTML elements are the building blocks of HTML pages. With HTML constructs, images
and other objects, such as interactive forms, may be embedded into the rendered page. It
provides a means to create structured documents by denoting structural semantics for text
such as headings, paragraphs, lists, links , quotes and other items. HTML elements are
delineated by tags, written using angle brackets . [20]
“HTML5 is the cornerstone of the W3C's open web platform – A framework designed to
support innovation and foster the full potential the web has to offer.” [21]
“It stands strong and true, resilient and universal as the markup y ou write. It shines as
bright and as bold as the forward- thinking, dedicated web developers you are. It's the
standard's standard, a pennant for progress. And it certainly doesn't use tables for layout.”
[22]
HTML5 is everywhere now days. HTML5 is the new and elegant standard for HTML that
provides web users and developers enhanced functionality. The older versions of HTML,
HTML 4.01, which came in 1999, and the web development have changed notably since then. HTML 4, XHTML, CSS and the HTML DOM Level 2 are now replaced with HTML5. It was brought to deliver rich content without the need for additional plug -ins and proprietary
technologies. The new power of HTML5 supplies the user everything from animation to graphics, music to movies, and can also be used to build complicated web applications and also supports cross -platform. HTML5 standard initiates the development of real -time
collaborations in web browsers, which leads to less work for web developers. [23]

16
With native tags for document structures, HTML5 allows a browser to display multi -media
documents without plugins or custom APIs. The intent is a single version of content being
rendered effectively, providing a common user experience across all compliant browsers
and platforms, including phones and tablets. If cloud computing technology is used for core functionalities and services, the device is using a “thin client” to deliver content, which improves performance and reliability of many applications.
The HTML5 standard incorporates a large variety of features that enhance the web
experience. Below are some of the most important:

• Audio/Video Tags
• Canvas (Vector drawing)
• Deprecated tags such as font, center, big, strike, frame, frameset, noframes
• Drag & Drop, Speech input, New Form Types (email, slider )
• Web Storage (improved cookies, larger storage, local SQL database)
• Geo-location
• Offline Web Applications/ Application cache
• Error Handling [21]
HTML5 introduces new elements and features that allow developers to improve interoperability, handling element s in a precise way saving time and costs. HTML5 is an
awesome technology and has the possibility to make the web even more predominant and extensive as it is today from desktop computers to mobile devices and in the future maybe even domestics appliances. The potential of HTML5 will soften the line between desktop
and online applications. [23]
First, we will look at HTML5, which is the major markup language used to define and structure content on web pages. All web pages in existence have implemented HTML in one way or another. For so many years, since 1997, HTML4 had been in use. In 2012, development of the latest version of HTML started, and a stable version was released by
the end of 2014. HTML5 is designed to primarily support more multimedia oriented w eb
pages while maintaining its simplicity. One of the big differences between HTML4 and HTML5 is enhanced adaptability. [24]
Perhaps the most important feature of HTML5 is its humility. While HTML was the central
language of the Internet, HTML5 is really about distributing control to other languages.
HTML5 is designed as a central glue that ties together many other technologies: CSS for visual layout, JavaScript for client -side programming, server -side languages like PHP for
server control, and databases etc. [25]
We now look at CSS which revolutionized how to define the layout of web pages, most of
which were built on HTML. By defining pages on a separate file called a style sheet, a great deal of consistency was brought about. All web developers had to do is to link their web pages to a given CSS file. This CSS file contains definitions for different web page elements such as headers, footers, sidebars, links, menus and even text. [24]
4.2. CSS3
CSS (Cascading Style Sheets) is a style sheet language used for describing the
presentation of a document written in a markup language. Although most often used to set
the visual style of web pages and user interfaces written in HTML and XHTML , the
language can be applied to any XML document, including plain XML , SVG and XUL, and is

17
applicable to rendering in speech , or on other media. Along with HTML and JavaScript ,
CSS is a cornerstone technology used by most websites to create visually engaging
webpages, user interfaces for web applications , and user interfaces for many mobile
applications.
CSS is de signed primarily to enable the separation of presentation and content, including
aspects such as the layout , colors , and fonts . This separation can improve content
accessibility , provide more flexibility and control in the specificati on of presentation
characteristics, enable multiple HTML pages to share formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and repetition in the structural content.
Separation of formatting and content makes it possibl e to present the same markup page in
different styles for different rendering methods, such as on- screen, in print, by voice (via
speech- based browser or screen reader ), and on Braille -based tactile devices. It can also
display the web page differently depending on the screen size or viewing device. Readers can also specify a different style sheet, suc h as a CSS file stored on their own computer, to
override the one the author specified.
Changes to the graphic design of a document (or hundreds of documents) can be applied
quickly and easily, by editing a few lines in the CSS file they use, rather than by changing
markup in the documents.
The CSS specification describes a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so -called cascade,
priorities (or weights) are calculated and assigned to rules, so that the results are predictable. [26]
CSS3 has some pretty advanced styling capabilities which enable the web designer to
manipulate backgrounds as well as font styles. With CSS3, you can also implement drop shadows easily and with all these styling from one file, you create a more clean- cut website
which is also light in terms of storage space and bandwidth consumption and load time.
Web Pages built on C SS3 can easily be made responsive using media queries. This
means that such web pages have an optimized look for different screen sizes and resolutions. This is of the most popular trends in web development in recent years. Modern websites have to adapt due to the variations in devices used to access the internet. These devices include smartphones, laptops, tablets and even gaming consoles. In order for people to accommodate all of the world’s internet users, responsive websites are a must. HTML5 makes development of such sites very easy.
When HTML5 and CSS3 work together, one get a powerful combination which enables to create feature rich websites while using a very simplified coding process. [24]
4.3. Bootstrap 3 vs. Bootstrap 4
Bootstrap was original ly created by a designer and a developer at Twitter in mid- 2010, and
in time has become one of the most popular front -end frameworks and open source
projects in the world.

Prior to being an open- sourced framework, Bootstrap was known as Twitter Blueprint . A
few months into development, Twitter held its first Hack Week and the project exploded as
developers of all skill levels jumped in without any external guidance. It served as the style

18
guide for internal tools development at the company for over a year before its public
release, and continues to do so today. [27]
Bootstrap is a sleek, intuitive, and powerful, mobile first front -end framework for faster and
easier web development. It uses HTML, CSS, and Javascript. [28]
It has a standard set of classes that allow developers to quickly create applications that scale to devices of all sizes, and incorporate common components such as dialog boxes and validation. Bootstrap has become a defacto standard for web design. [29]
The main advantages in working with bootstrap are:
• Mobile first approach: Bootstrap framework consists of Mobile first styles throughout the entire library instead of them in separate files.
• Browser Support: It is supported by all popul ar browsers.
• Easy to get started: With just the knowledge of HTML and CSS anyone can get
started with Bootstrap. Also the Bootstrap official site has a good documentation.
• Responsive design: Bootstrap's responsive CSS adjusts to Desktops,Tablets and
Mobile s.
• Provides a clean and uniform solution for building an interface for developers.
• It contains beautiful and functional built -in components which are easy to customize.
• It provides web- based customization. [28]
Bootstrap Framework history:
• In August 2011, Bootstrap was released as an open source product on GitHub
• On January 31, 2012, Bootstrap 2 was released, which added a twelve- column
responsive grid layout system, inbuilt support for Glyphicons, several new
components, as well as changes to many of the existing components.
• On August 19, 2013, Bootstrap 3 was released, which redesigned components to
use flat design , and a mobile first approach.
• The first alpha version of Bootstrap 4 was released on August 19, 2015, and the
first beta version was released on 10 August 2017. [30]
The important differences between the latest version of Bootstrap (4 beta version) and its
predecessors are:

• Navigation – In Bootstrap 4, Navigation component has been simplified to a great
extent. One is required to create a new list of elements employing the latest nav base class. There are some recent additions like nav -link class, nav -item class and
navigation bar styles also.

• Appearance & Outlook – Although there is not any drastic change in the
appearance. Yet, there are certain poignant changes like altered font implementation size, primary context colour, background colour. Moreover, Bootstrap 4 framework has stopped it’s shipping with Glyphicons. Hence, it is lightweight and also requires manual integration or some other alternative.

• Reboot – Bootstrap 3 had used Normalize.css in order to render all the HTML
elements their consistent appearance. Bootstrap 4 adopted an enhanced version of Normalize.c ss i.e., Reboot .

19
• Grid system – Bootstrap 4 positions a lot of emphasis on customization. Hence, it’s
new grid tier system lets the version 4 enjoy the presence of up to 5 grid ti ers. One
can easily say that Bootstrap 4 provides access to an improved grid system.

• Flexbox – Flexbox is one such layout model that permits the formation of complex
layouts with ease. It can be used in order to scale elements or apply advanced
alignment capabilities, horizontal as well as vertical. It does not replace the already
existing page layout. Bootstrap 4’s major step towards improvement is its movement towards adopting Flexbox.

• Form control – Bootstrap 4 offers an improved form control. It enabl es to deal with
the inconsistent input control and its appearance on different browsers. It provides custom forms too, in the form of custom checkboxes and radio inputs.

• Dropdown – In the version 4, dropdown item class needs to be applied to every
dropdow n item. In fact, the caret symbol is intuitively added to dropdown toggles that
have been added using drop- down toggle class.

• Pagination – In Bootstrap 3, a pagination component was created by applying the
pagination class to any ul element. Now, Bootstrap 4 demands one to properly
indicate pagination and link items using page -item as well as page- link class.

• Plugins – As in Bootstrap 3, plugins were divided into two categories, namely, a file
including style rules and a Javascript file. There aren’t any poignant changes as to
how the plugins are compiled in Bootstrap 4 either. In the latest version, style rules are composed using SASS. Whereas, plugins are available under global jQuery object as Javascript file contains a jQuery section.

• Browser support – Bootstrap 4 offers its immense support to all the major and
renowned browsers of all times, like, Safari, Chrome, Opera and Internet Explorer (i8, and above) etc.

• Utility classes – In Bootstrap 4, new utility classes have been included without
hampering any existing functionality, whatsoever. Such important additions are as
that of responsive text alignment classes, responsive floats, and responsive embedding. Apart from offering many shortcuts, these, respectively, allow for changing the alignment of th e text, floating of the elements and the scaling of the
aspect ratio of any embedded media. [31]
Comparison Table [32] of Bootstrap Version 3 and Version 4 :

Parameters Bootstrap 3 Bootstrap 4
Source CSS file LESS SASS
Grid Tiers 4 grid tier system 5 gid tier system
Dropdown Structure Can be created with <ul> and
<li> Can be created with <ul> or
<div>
Default Pagination .pagination needs to be added
to <ul> element .page -item must be added to to
each <li> element and .page-
link to each <a> element
Resp onsive Images Apply .img -responsive class Apply .img -fluid class
Responsive Tables .table -responsive class should
be added to parent <div>
element .table -responsive class to be
added to <table> element

20
Navbar Alignment Employ .navbar -right, .navbar –
left to align components Employ spacing utilities such
as .mr -auto, or flexbox
alignment utilities
Glyphicons Supported Not Supported
Media Objects Includes many different classes
for media objects, including
.media, .media- body .media-
object, .media- heading, .media-
right, .media -left, and .media-
list and .media- body. Uses just .media class. Margins
can be applied using spacer
utilities. Media objects are
flexbox enabled in Bootstrap 4,
so the various flexbox classes
can also be applied (such as
reordering, et c).
Progress Bars Doesn’t use the progress for
progress bars. Instead, applies
progress bar classes to nested
div elements. Using the progress element
was abandoned in Alpha 6.
Bootstrap 4 now uses the div
element again.

Google trends [9] comparation – Janaury 2018:

After analyzing the features that Bootstrap 4 offers, we can see there has been a lot of
work done in optimizing and cleaning up unnecessary elements and classes throughout the entire framework. Bootstrap 4 promises to be much quicker a nd streamlined for even greater flexibility and
ease when creating an awesome mobile- friendly website or web aplication.
4.4. W3.CSS
W3.CSS is a modern CSS (Cascading Style Sheet) framework, developed by
w3schools.com, with built -in responsiveness:
• Smal ler and faster than any other CSS frameworks.
• Easier to learn, and easier to use than any other CSS frameworks.
• Better cross -browser compatibility than any other CSS frameworks.
• Uses standard CSS only (No jQuery or JavaScript library).

21
• Supports modern resp onsive mobile first design by default.
• Provides CSS equality for all browsers: Chrome, Firefox, Edge, IE, Safari, Opera, …
• Provides CSS equality for all devices: desktop, laptop, tablet, and mobile.
• Speeds up and simplifies web development. [33]
Followin g are its some of the most important features of W3.CSS framework are :

Responsive Design
• W#.CSS has in -built responsiveness designing so that the website created using
W3.CSS will redesign itself as per the device size.
• W3.CSS has a 12 column mobile- first fluid grid with support of responsive classes
for small, large, and medium screen sizes.
• W3.CSS classes are created in such a way that the website can fit any screen size.
• Website created using W3.CSS are fully compatible with PC, Tablets and mobile devic es.
Standard CSS
• W#.CSS uses standard CSS only and is very easy to learn.
• There is no dependency on any external javaScript library such as jQuery.
Material Design
• W#.CSS is inspired from Google Material Design.
• It suports paper like design.
• It suports sha dows and bold colors.
• The colors and shades remains same across the various platforms and devices. [34]
4.5. W3.CSS vs. Bootstrap
Bootstrap and W3.CSS are the frameworks that can produce modern webpages and web applications. Especially, these frameworks are good at making webpages suited for browsing by devices with displays of different sizes. Webpages with these features are known as responsive web pages. [35]
W3.CSS is younger than Bootstrap, therefore W3.CSS is no well known. As a result of
searching on GitHub for each framework name, the keyword "bootstrap" gives 127,493 repository results and, the keyword "w3.css" returns just 146 repository results. The search was done in January 2018. [36]

Nowadays, Bootstrap is a main tool to develop responsive websites and aplications .
W3.CSS is a new instrument for the same purposes. Several studies mention that
responsive web design has an advantage in terms of Search Engine Optimization
(SEO).

Web technologies:
• Bootstrap is a framework utilizing HTML, CSS, and JavaScript
• W3.CSS uses only HTML and CSS and doesn’t need JavaScript
Flexible grid:
• Bootstrap and W3.CSS both support a grid layout (flexible grid). Each framework
can divide screen rows up to 12 virtual columns. The functionality of grid layout in
Bootstrap is almost same as in W3.CSS.

22
Flexible images :
• This are the function to fit the images into parent elements. If the size of the image is
fixed, image is not displayed appropriately on various devices.
CSS3 Media Queries:
• Media queries are the func tions written according to the CSS3 standard. They can
vary the layout and contents to display based on the device’s width. If the developer changes the layout according to the width without framework, media queries
condition should be written. Meanwhile, each framework has concrete media queries
condition by default.
Mobile SEO:
• Mobile SEO is web aplication optimization especially for the mobile users. Google
officially recommends responsive web design as the design pattern to optimize a web site or web ap plication.
• Google provides tool to check whether the website is mobile friendly or not. The
result showed that each framework is regarded as a mobile friendly.
Initialization:
• Each framework has the same way to deploy itself to the website. They are as
follows:
− Add the link to the officially provided configuration file as link element
− Download the configuration files to the user’s site directly

• Table below illustrates characteristics of framework components :
Bootstrap (v3.3.6) W3.CSS (v2.7)
File size 279 KB 28 KB
The number of files 16 1

• In addition, Bootstrap requires jQuery to be installed. To use W3.CSS, only one file
is needed as described above. It’s a CSS style sheet file.
• We can say W3.CSS is much easier for the developer to arrange compared to
Bootstrap.
Colors:
• Bootstrap has several classes to color texts or the background of the elements.
• W3.CSS has several color classes in a form of w3 -COLOR . The color palette like a
Google Material Design is adopted. To color some elements, the developer only has
to add the name of the color class to the class attribute.
Images:
• To decor the images, Bootstrap and W3.CSS have almost same functionality.The
developer only has to add a specific class to the class attribute. This operation doesn’t need time and e ffort.
• The only difference is the class name. Each framework generates the same result.
Tables:
• Making a table readable by using Bootstrap or W3.CSS is easy.
• Each framework has other classes to decor the tables.
We can conclude that b oth frameworks provide similar functionality and easy to use to
develop a webpage. Because W3.CSS is newer than Bootstrap, W3.CSS has some unique features to make a webpage viewable.

23
A key advantage of W3.CSS is in the following: It does not need any extra tool for its
functio nality. It is simple from the point of view of requirements and easy to use. [35]

View template for login in the web application using Bootstrap 4:

View template for login in the web application using W3.CSS:

24
Below screen shot represents the r esult for login in the application using Bootstrap 4:

Below screen shot represents the r esult for login in the application using W3.CSS:

25

4.6. Google charts

Google provides for free a pretty sophisticated set of tools for making cool int eractive
graphics. Google Charts is an interactive Web service that creates graphical charts from
user-supplied information. The user supplies data and a formatting specification expressed
in JavaScript embedded in a Web page; in response the service sends an image of the
chart. [37]

Google Charts provides a perfect way to visualize data on your website. From simple line
charts to complex hierarchical tree maps, the chart gallery provides a large number of
ready -to-use chart types. [38]

The concept of data visualization comes from visualization in scientific computing. It can reflect the information pattern, data relation, data change trend, and help scientific
researchers and government officers to view and analyze dat a in the style of direct graphs
to find the princ iples hiding behind the data. Not only does data visualization help us
communicate information better, it also allows us to detect patterns, trends and correlations
in our businesses that might otherwise go undetected . Currently, there are several open
source tools that can help to create data visualization, such as Google Charts, D3.js,
FusionCharts, etc. [39]

There are many advantages in using the Google Charts tool such as stable, up- to-date,
cross- platform, flexible and versatile.
For creating Google Charts, there are four steps are as follows:

1. Load the Libraries
Google Charts consist of codes for libr aries loading. Firstly, loading the AJAX A PI.
Secondly, loading the visualization API and the corechart pac kage. Finally, setting a
callback to run when the Google Visualization API is loaded. All steps must be included in the <head> of the web page.

2. Prepare the Data

26
This step is creates a data table. Google Charts require data to be wrapped in a JavaScript
class called google.visualization.DataTable. This class is defined in the Google
Visualization library. The data object is created to call the addColumn() method
andaddRows() method.

3. Customi ze the Chart.
Every chart has many customizable options, including title, colors, line thickness, background fill, and so on. All customize options are defined in the options variable.

4. Draw the Chart.
First Google Charts must instantiate an instance of t he chart class, and then call the draw()
method that takes two values: a DataTable object, and an optional chart options object.
Google Charts will be drawn in a division or a section of HTML document that was assigned with HTML element (typically a <div> ). [39]
4.7. Charts.js
Chart JS is one of the leading JavaScript libraries for data visualization which uses the
HTML5 canvas element to draw and render charts. The library is a perfect fit for small projects or projects with a limited usage of charts that has a bloated dataset. ChartJS is a
new and upcoming library, so it only uses six of the mainly uses chart types which are line, bar, radar, pie and donut, polar area and bubble charts. It is free and open source. It has a fairly dedicated community w hich had the second version of it up and running within a few
months. [40]

27

The advantages of using this tool for data visualization are:
• Open source – Chart.js is a community maintained project, contributions welcome!
• 8 chart types – each of them animated and customizable
• HTML5 Canvas – Great rendering performance across all modern browsers (IE9+).
• Responsive – Redraws charts on window resize for perfect scale granularity. [41]
Comparison of data visualization tools: [39]

28

Chapter 5

Conclusions

I can conclude that the aquarium tools web application was a true learning experience. The
principles of software development were well implemented throughout the system. The
application was made as user friendly as possible making it flexible and reliable.

The major goal of the research was to work with and compare two frameworks used for the front-end programming, meaning Bootstrap and W3.CSS.
This objective was achieved with the help of anal ysing and the literature review that provide
knowledge on the components of a web- based application.
The project involved the practical work of designing and developing the aquarium tools
application, and the main challenge of the project was the complexity of the whole system
architecture .
The use of the CakePHP fra mework as the backend tool was very beneficial because there
is a lot of online support. Another great feature of using CakePHP was that it is very easy to use with MySQL or SQLite , as the application depends on data manipulation the database
part of the a pplication was relatively easy to develop and manage with PHP and MySQL.
The biggest advantage of developing this application for debutants in aquaristics , using
W3CSS and Bootstrap was the learning end experimental phase and the satisfaction of
having cr eated a tool for this area that I have been passionate since childhood.

29

Bibliography and Webliography

1. Asim Ashraf – Job Portal Using CakePHP Framework , Helsinki – 2016
https://www.theseus.fi/bitstream/handle/10024/118049/Thesis.pdf?sequence=1

2. http://www.alphadevx.com/a/7 -The-Basics- of-Web-Technologies

3. http://www.zdnet.com/article/raspberry -pi-11-reasons -why-its-the-perfect -small -server/

4. https://blog.udacity.com/2014/12/front -end-vs-back -end-vs-full-stack -web-developers.html

5. https://www.digitalo cean.com/community/tutorials/sqlite- vs-mysql -vs-postgresql -a-
comparison -of-relational -database- management -systems

6. https://www.mysql.com/about/

7. Michael "Monty" Widenius, David Axmark, and Mysql AB – MySQL Reference Manual ,
O’Reilly Community Press
https://books.google.fi/books?id=9c –
pkLaNmqoC&pg=PA803&dq=Michael+%22Monty%22+Widenius,+David+Axmark,+and+My
sql+AB&hl=en&sa=X&redir_esc=y#v=onepage&q=Michael%20%22Monty%22%20Widenius
%2C%20David%20Axmark%2C%20and%20Mysql%20AB&f=false

8. Gaurav Sharma – Web application development for San Diego cricket club, San Diego –
2012
http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1 .1.456.3640&rep=rep1&type=pdf

9. https://trends.google.com/trends/explore?date=today%205-
y&q=%2Fm%2F04y3k,%2Fm%2F01kgq9

10. https://getcomposer.org/doc/00- intro.md

11. http://culttt.com/2013/01/07/what -is-php-composer/

12. https://en.wikipedia.org/wi ki/PHP

13. https://medium.com/@vishva.eleganzit/most -used -php-frameworks -in-2017- 73572e562fe9

14. Sujan Pandey – Development of a Web Application (iDomain) in the CodeIgniter Framework,
Helsinki – 2016
https://www.theseus.fi/bitstream/handle/10024/109032/Pandey_Sujan.pdf?sequence=1

15. Mohamed Fayad and Douglas C. Schmidt – Object -oriented application frameworks,
Ccommunications of the ACM – October 1997
http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.476.1533&rep=rep1&t ype=pdf

16. Changpil Lee – An Evaluation Model for Application Development Frameworks for Web
Applications, The Ohio State University – 2012
https://etd.ohiolink.edu/rws_etd/doc ument/get/osu1324663059/inline

17. https://en.wikipedia.org/wiki/CakePHP

18. CakePHP Cookbook Documentation, Release 3.5 – 2017
https://book.cakephp.org/3.0/_downloads/en/CakePHPCookbook.pdf

30
19. https://blog.udacity.com/2014/12/front -end-vs-back -end-vs-full-stack -web-developers.html

20. https://en.wikipedia.org/wiki/HTML

21. http://itaas.com/wp -content/uploads/HTML5%20- %20An%20Introduction.pdf

22. https://www.w3.org/html/logo/

23. Ch Rajesh, K.S. V Krishna Srikanth – Research on HTML5 in Web Development – 2014
http://ijcsit.com/docs/Volume%20 5/vol5issue02/ijcsit20140502328.pdf

24. http://templatetoaster.com/web -design -with-html5 -and-css3

25. http://www.dummies.com/web -design -development/html/the- relationship- between- html5 –
and-xhtml/

26. https://en.wikipedia.org/wiki/Cascading_Style_Sheets

27. https://getbootstrap.com/docs/3.3/about/

28. https://www.tutorialspoint.com/bootstrap/bootstrap_tutorial.pdf

29. https://courses.edx.org/asset –
v1:Microsoft+DEV203x+2015_T4+type@asset+block/Introduction_to_Bootstrap.pdf

30. https://en.wikipedia.org/wiki/Bootstrap_(front -end_framework)

31. https://blog.templatetoaster.com/bootstrap- 3-vs-bootstrap- 4-migrate -differences/

32. https://weblizar.com/blog/bootstrap -3-vs-bootstrap -4/

33. https://www.w3schools.com/w3css/

34. https://www.tutorialspoint.com/w3css/pdf/w3css_quick_guide.pdf

35. Kentaro Murai, Vitaly Klyuev – Comparison of Bootstrap and W3.CSS , Aizu, Japan – 2016
http://web -ext.u -aizu.ac.jp/labs/is -se/conference_proceedings/icait -16/icait -16-paper -54.pdf

36. https://github.com/

37. https://en.wikip edia.org/wiki/Google_Charts

38. https://developers.google.com/chart/interactive/docs/gallery

39. A Framework for Web -based Data Visualization Using Google Charts Based on MVC
Pattern, Thailand – 2016
http://ojs.kmutnb.ac.th/index.php/ijst/article/viewFile/763/pdf_88

40. Ermias Hailemicheal – Top Tools for Data Visualization in Web Development, Helsinki –
2016
https://www.theseus.fi/bitstream/handle/10024/119597/ermias_hailemicheal.pdf?sequence=
1

41. http://www.chartjs.org/