Telecommunications And Internet Technologies

1 Short introduction in a Web Application

First of all the World Wide Web (WWW) is a big set of interlinked documents created with a group of simple protocols. In the begging it was just HTML, a simple mark-up language. A big and revolutionary step was when the server-side scripting languages appear, and the most notable was PHP. This innovation was just the first step, after that in time scripting languages acquired numerous features which made from internet a indispensable tool in our current generation.
If we check the definition, a web application or a web app is any application software that runs in a web browser or it's created in a browser-supported programming language and relies on a common web browser to render the application. We can say that because of the omnipresence of web browsers and because using a browser is very convenient for a user, web applications became in the last years more and more popular.
Nowadays, we can demonstrate that web applications are behaving more like any other desktop application. We can distinct lesser page loads and more user interaction and effects. Every day the web technology became faster and as a result we can say that Facebook have given a new meaning to web apps. Other mainstream languages like Java and C# rivals with PHP for web application development. But anyway the new trend in this field seems to be PHP on the server side and jQuery, a JavaScript library, on the client side, next to the HTML5 and CSS3. All of these are a perfect combination for developing interactive web applications.

2 Server Side Technology - PHP

As a short introduction PHP is a general-purpose scripting language which is especially used to server-side web development where PHP generally runs on a web server. PHP is the leading language of choice among web developers and the reasons for this are clear: PHP has found the right combination of an easy-to-learn language and powerful features.
It is certain that PHP make a good team with frond end technologies like HTML5, CSS and JavaScript. There are functions and modules in this scripting language that make it easy to integrate with in our case JQWidgets, a common JavaScript framework. PHP also performs well with JavaScript's libraries like the extremely popular jQuery library.
In my case, if I have to enumerate some points why I chose PHP and not other language these will be: easy to start with, easy to use, integrated database support, cheap hosting, great performance, clear code and many others.
I used PHP as a full-fledged obiect-orientated programming language. With PHP, OOP started to became posible with the release of PHP3, they improve it in the release of PHP4 but the object handling was completely rewritten for PHP5. As a short resume, PHP5 introduced private and protected member variables and methods, along with abstract classes, final classes, abstract methods, final methods and many others like constructors and destructors.
For creating this application I used WAMP. This acronym refers to first letters of the four components of a solution stack, composed entirely of free and open-source software, suitable for building high-availability heavy-duty dynamic web sites, and capable of serving tens of thousands of requests simultaneously. So this acronym means Windows-Appache-MySQL-PHP, more exactly Windows is my operating system, Appache is the server, MySQL the database and PHP my scripting language.

2.1 MVC Pattern
In this part I will explain why I chose to use a Model-View-Controller (MVC) Pattern in my server side. We can say that MVC is the most useful development pattern for all PHP developers. This pattern, in theory, allows you to structure your web application and allows a font-end developer and a back-end developer to work on the same system without any interfering, sharing or editing files.
We have to know that the purpose of the MVC pattern is to separate the model from the view so that changes to the view can be implemented without having to change and work in the model.

[1] Figure ' Explaining the MVC pattern
From this image we can understand the single flow layout of data, how it's passed between each part and at the end how the relationship between each component works.
In my web application, every page of the application has its own Controller. Every Controller is extended from a base controller in my case called 'CBase.php'. Every controller extends its own View. Every table or view from the database has its own model.

[2] Figure - Print screen with my Controllers, Models and Views from app

The View is where data, maybe requested from the Model, is generated and displayed. The view part also can collect reactions and information from user, who then goes on to interact with the Controller. If you want to understand that, a simple example could be a button, displayed in a view, which when is pressed triggers an action in the Controller. In my application I have 10 Views, so 10 main screens.
Views are located in: app/view/default/. where "default" it the application SKIN_NAME, aka layout. To access variables in view simple add them in controller method with: $this->my_var = "lorem ipsum"; and access it with echo $this->my_var; As standard a view file starts with V and has the phtml extension.
About the model, we can say in general that it's sole purpose is to process data into its permanent storage or seek and prepare data to be passed along to the other parts. In my case, concrete, the database information are taking here in the Model files, and here are also the methods for writing/saving in the database. In this files I bring all the data, and after that I send it in the View or in the Controller. I have a model file for every table of my database and also for every view. More details about my database you will see later in the next chapter.
In my web application Models are located in "app/model" folder . Each Model class will start with "M" letter. Each Model class will extend MBase witch also extends MMain. MBase is the base class for each model in this application. MMain is the driver class for communicate with the database, MySQL database in my case. As a standard coding, each model has a "mname" variable witch define the table name.
The last element of this triad is the Controller. It has a lot of jobs like handling data that user inputs or submits, or making the validations for the saving methods. Theoretical this is the single part with who a user should interact. The Controller is connected to a single View like I said before.
In my application Controllers can be found in app/controller/ folder. Each controller extendsCBase. CBase.php it's the common controller for each controller in application.
CBase extends CMain witch extends also the Registry class. As a standard each Controller name starts with "C" and must implement the init method. Each Controller must have a variable named: "cname". Cname is the alias for that controller and it's a unique name.
In this project I also used Helpers. A helper is a class which can be "shared" between projects. For example a validation class, a file manipulation class can be used as helper. You can copy that class from a project to another, without affect anything else. It's similar to a business object, but the difference is: if a business class represent a entity from your project, from your model, a helper it's just a colection of methods, dedicated to a common task. Each helper class starts with "H" letter. Same usage as a model can be use.

3 MySQL Database

If we look over the definition, MySQL means a relational database management system , and it is the world's second most widely used open source RDBMS. MySQL is a popular choice of database for use in web applications, and is a central component of our widely used WAMP open source web application software stack.
In this application I decided to use MySQL as a database because my app requires a full-featured database management system. It is well known that many of the world's largest and fastest-growing organizations including Facebook, Google, Adobe, and more others are using MySQL databases to save time and money powering their high-volume Web sites, business-critical systems and packaged software. If I have to enumerate some of MySQL's qualities I would say: high performance, strong data protection and the fact that it is an open source.

3.1 My Database structure

[3] Figure - Print screen with my database structure

As you can see above, the database for my application is quite big. My database has 12 tables, and I create 5 more views from them. For every entity I created a table. In a very short resume I save here user's login data, user details, his company details, the other's users who work in his company details, their roles, details about company's clients, details about company's services, details about the appointments which are between a user and a client, and the details after a user 'confirm' an appointment.

[4] Figure ' Example of a view

I used views like this one to generate a report from a certain period about company's financial results depends on every service. In this application you can also generate reports for clients or you can check one's appointment history. You can see reports about your favourite clients and you can see who's birthday is next and send him a birthday text. I really hope that this application will bring something good, something that will make the hairdressers to use it.

4 Front end technologies

If we look over the definition again, in computer science, the front end is responsible for collecting input in various forms from the user and processing it to conform to a specification the server side can use. We can say that the front end is an interface between the user and the back end. Here I will present some technologies like HTML, CSS, JavaScript, Ajax, jQuery, FullCalendarJS and JQWidgets. We met thins technologies in my application, some of them are indispensable and some of them I just chose for various reasons.

4.1 HTML5 and CSS3

For sure that at the base it's HTML4 but HTML5 is a revision of the HTML markup specification, which contains a lot of good improvements. Over the past few years, HTML5
has gone from mythical creature to reality. Now, HTML5 is ready for use with all modern browsers, including IE9.
As I previously mentioned, the new HTML5 tags are supported in all modern browsers. Where it gets complicated is when you begin to implement HTML5 native browser features and canvas elements, many of which still need JavaScript to be fully supported. There are still problems with the video and audio files because every browser adept HTML5 in it's own mode.
CSS3 is always put near to HTML5 and it is the latest standard for CSS. CSS3 is completely backwards-compatible with earlier versions of CSS but it has some improvements and features that are not allways supported.

[5] Figure 'How are Forms Attributes supported

In my application I tried to use the new technology as much as I can, but just if I consider that it's the best choise for the user experience. For example in the forms, I prefered to create the inputs, or to put placeholders inside, with JQWidgets, because with this JavaScript framework I am sure that the majority of the browsers will recognise and display the input exactly like I want. Another good example are datepickers. They shoud be a new feature in HTML5 but the problem is that the user inferface when you open a <input type='date'> is diferent depinding on the browser. I wanted all and everywhere to be the same so again I prefered to use JQWidgets.

4.2 JavaScript
Nowadays we can say that JavaScript is the programming language of the Web. The majority of modern websites use JavaScript, and all modern web browsers ' on desktops, game consoles, tablets, and smart phones ' include JavaScript interpreters. All of these are making Java-Script the most used programming language in history. I consider that JavaScript is part of the triad of technologies that all Web developers must learn: HTML to specify the content of web pages, CSS to specify the presentation of web pages, and JavaScript to specify the behavior of web pages. JavaScript is a high-level, dynamic, untyped interpreted programming language that is well-suited to object-oriented and functional programming styles.
It is certain that I also used a lot of JavaScript in my application. I as said before I used some frameworks like JQWidgets and some libraries like jQuery or FullCalendarJS.
In my application, I also used a lot AJAX. If I have to give a definition, the best one is that with Ajax, web applications can send data to, and retrieve data from, a server asynchronously (in the background) without interfering with the display and behavior of the existing page. In my cases I prefered to retrive data using JSON instead of XmlHttpRequest object. I consider that more practical and clean.

4.2.1 jQuery

This clever JavaScript library, jQuery, aims to change to way that developers think about creating rich functionality and dynamic effects in their pages. If you want to add dynamic functionality to your web application, you will find that you are following a pattern of selecting an element or group of elements and operating upon those elements in some fashion. With jQuery you could easely hiding or revealing the elements, you can add them a CSS class, modifying their attributes or animating them.
I can say that the real advantage of jQuery statement is the selector, an expression for identifying target elements on a page. This selector allows you to easily identify and grab the elements we need. After that is simple because you just have to perform some operations for those elements. Also jQuery places a high priority on ensuring our code will work in the same manner across all major browsers.
In my project I used a lot jQuery. Every Controller has also its own JavaScript class, and for every popup window which is used more than 1 time I also create a separate class for using the same code. Every selector and almost all JavaScript code is written using the jQuery library.

Figure [6] ' Grid example
A big component of my application is the grid. I used a grid instead of a table. This grid in my application has a jQuery base, and it delivers advanced data visualization features and built-in support for client and server-side paging, editing, sorting and filtering. It Is very useful and very fast. It became a custom version and it is exactly what I need from a grid.

4.2.2 JQWidgets

Until now I said JQWidgets as a JavaScript framework many times but now it is time to define it. The definition from their web page is: 'jQWidgets is a feature complete framework with professional touch-enabled jQuery widgets, themes, input validation, drag & drop plug-ins, data adapters, built-in WAI-ARIA accessibility, internationalization and MVVM support.'.
Why I chose to use it? The main point was because it works across devices and browsers. They would say that jQWidgets takes the JavaScript & HTML UI development to a new level because it provides built-in device and browser detection and automatically adjusts itself for optimal user experience. So this is the main reason for using it. Another reason is that it is optimised for performance. Another plus is that it is open source.
JQWidgets includes more than 40 UI Widgets. So I used those in all my pages. I can say that this in the main structure of my web application interface. For exampIe I used JQWidgets for generating a tooltip which is called 'jqxTooltip'. But it will take too long to present here all the widgets that I used from this framework so I will just make a list of them: 'jqxTabs', 'jqxChart', 'jqxComboBox', 'jqxInputs', 'jqxTooltip', 'jqxDateTimeInut' and 'jqxWindow'.

[7] Figure - One screen from the application where you can see some of my JQWidgets.
In this print screen you can observe some of the Widgets that I used n my application. You can see a 'jqxComboBox' in the right and up corner, which can help you to change the theme for the application in another colour. Also you have 'jqxTabs'with is the menu part, you have 'jqxWindow' which are the popup windows, you can distinct the date picker and also the inputs and the buttons. When I chose to use this Framework, also a big advantage was that elements look the same even when you are on a browser from a Tablet, even from a desktop, and this framework is also optimised for the touch screen usability.

4.2.3 FullCalendarJS

First of all this FullCalendarJS is a jQuery plugin which can provide a full-sized, drag & drop calendar. I used it in two of my pages. The page for Weekly Time Planner and the Home Page where you can see the activity for your curernt day, next to many others. This plugin uses AJAX to fetch events on-the-fly for each week and is easily configured to use your own feed format. It is almost as google calendar, same style, you can use it in a single day view, or you can choose to see the hole week or month. It is visually customizable and exposes hooks for user-triggered events for clicking or dragging an event. For my application I customised this plugin and I configured it like I wanted for my app's desires.

[8] Figure - Schedule Screen in the left and Home Screen in the right.

5 My web app's goal

Since I have started to implement my idea, my goal was clear: 'This application should replace in some years the Salon Appointment Planner, the old notebook'. I realise that is really difficult to arrive here. But if this application will offer the best support, and a lot of many other advantages, the hairdressers will have no reasons for not using it. What I want to see now is that some hairdressers will start to use it, all day, they will like or not, but I want to recive a feedback from them to know if they need it.
Before I started to implement it, i spoke with some people who work in salons. They helped me to make a plan, they told me what is it important for them, what they will like to see as a report, what informations they would like to keep about a client and many others. Now they will start to use, to test it it, and I will receive a daily feedback from them.
If this application is something useful, is something that is good for them, and they will use it, I will be really happy. It is already a multilingual application, now just in English and Romanian, but from now on it is very easy add another new language,I just have to translate a XML file. So if this application will be a success in this form, this will give me courage, and I will make from it a real project. I will make this web application bigger, faster and with a better design and more security. But I will speak lately about these new things. The main goal of this project is that 'This application will try to offer the best electronic support for hairdressers schedule and for their business'.

5.1 Client's needs
As I recently said, I put this plan into practice after I spoke with some hairdressers. It was very clear for me what they wanted. In this application they have the possibility to keep data and a history about their clients. They could manage their services, they could be part from a company, they can have access to the company's clients. They could make an appointment for a company colleague but just if they have this permission. Between all of these they have the possibility to see and generate many reports about their work, their clients and about the company's activity.
The feedback from the clients after their first week of use will count a lot. They are the ones who should decide what is good and what is not so good. With all of this, this application should be a general application, for every salon, so that means that I will develop just the general things, which can have a benefit for every hairdresser.

5.2 Promoting the application

If this application will generate some results, and I will see that those users who will test it, will like and use the application, or at least half of them, I will think more how to promote this project. Since now I have a presentation website but this is not enough. I should make it multilingual too. I should invest something in advertising, and for sure the next step will be to work with a sales man.
6 Future implementations

I know that this project is 'a try' but I will work to make from it more than that. Right now my functionality is good, the application works. What I have to do next it to make it more dynamical and secure. Also I have to finish the mobile interface, because this is really a big step for users.
The next main point is to change the database structure. I would like to have a single database for each company. That is possible and when someone will register for a new account, a new database with his username and his UserID will be created. Performance will be also a next step. I should work more and try to make the requests fewer and faster. I will try to use more local storage session storage and cookies, to save some data there, to keep a form structure there, to put there many other useful data, which now are reloaded every time.
Another next step will be an 'admin interface' for me. From there I would like to see everything and to have an image about the application and the errors that appears. I will stock all the errors in database, and after that I will check them to see what their cause is. In the next future I will take care of the website too.
I am open to every feedback because I really want to improve that application and I want to see it used by real users from all over the world. I don't want to imagine a application with more than 1000 unique users, and every one with more than 100 clients. This will mean a database with more than 100 000 emails, phone numbers and details about their services and appointments.

7 What I learned
Since October I have started to develop this application. It was a long road, because I didn't have a clear documentation. I improve it a lot in time, and I always tried to make it better. I changed some things during the implementation and I also change the JavaScript framework from ExtJS to JQWidgets.
I learned a lot during this project and it was a very good lesson for me. I already knew that I like what I'm doing and because of that it was also a pleasure. From now on, everything good that will happened with this project will be like a bonus for my work.
More exactly it was my first big project in PHP, using a framework that has a MVC pattern. I learned many things in PHP, and now I know to do it better than when I started. Maybe now I will do it a little different, but everything is a progress. I also learned better how to handle with jQuery.
JQWidgets Framework was something completely new for me, but now I really like it and I am sure that I will use this framework again. FullCalendarJS was also something new and I chose it because it was fast and clean. I don't regret at all. Everything was a good practice and now I am ready to make some serious things like working again as a programmer, at least for a period, while this application will be tested.


[1] Robin Nixon ' Learning PHP, MySQL and Javascript ' USA 2009.
[2] J.M. Gustafson - HTML5 Web Application Development by Example ' June 2013.
[3] Vijay Joshi ' PHP jQuery Cookbook, Birmingham ' December 2010.

[4] David Flanagan ' JavaScript, the definitve guide ' USA 2011.
[5] Kevin Tratoe, Peter MacIntyre, Rasmus Lerforf' Programming PHP ' February 2013.
[6] Richard Clark, Divia Manian ' HTML5 and CSS3 ' 2012.


[8] - JQWidgets JS Framework

[9] - FullCalendar jQuery plugin

[10] Martin Brampton ' PHP 5 CMS Framework Development

Source: Essay UK -

About this resource

This Information Technology essay was submitted to us by a student in order to help you with your studies.

Search our content:

  • Download this page
  • Print this page
  • Search again

  • Word count:

    This page has approximately words.



    If you use part of this page in your own work, you need to provide a citation, as follows:

    Essay UK, Telecommunications And Internet Technologies. Available from: <> [28-05-20].

    More information:

    If you are the original author of this content and no longer wish to have it published on our website then please click on the link below to request removal: