Specializarea Informatică aplicată în lb.germană [311381]
Universitatea TRANSILVANIA din Brașov
Facultatea de Matematicǎ și Informatică
Specializarea Informatică aplicată în lb.germană
Lucrare de licență
Autor: [anonimizat]: Conf.univ.dr. Sângeorzan Livia
Brașov
-2014-
Universitatea TRANSILVANIA din Brașov
Facultatea de Matematicǎ și Informatică
Specializarea Informatică aplicată în lb.germană
Developing a Hotel Web Application using ASP.NET MVC 4, JavaScript, HTML 5 and CSS 3
Autor: [anonimizat]: Conf.univ.dr. Sângeorzan Livia
Brașov
-2014-
Contents at a Glance
Introduction(English)………………….…….……………..………6
Introduction(Romanian)……….…………….……………..………7
Chapter 1- Technologies…………………………………………..8
1.1. World Wide Web (WWW)…….…………………………..8
1.2. HTML 5……………………………………………….…9
1.3. CSS 3……………………………………………..……14
1.4. Javascript………………………………………..……..16
1.4.2. JQuery…………………………………………….20
1.5. AJAX………………………………………..………….21
1.6. ASP.NET MVC 4…………………………..…………23
1.7. Search Engine Optimization (SEO)…………………….29
Chapter 2-Prezentarea aplicatiei dpdv informatic……………….30
2.1. General presentation…………………………………..30
2.2. UML Diagrams……………………………..…………31
2.3. Database…………………………………………………42
2.4. Applications sections…….………………………………46
2.5. Security…………………………………………………50
2.6. SEO Implementation…………………………..………56
2.7. Bilinguism………………..……………………….……58
Chapter 3- Application guide……………………………………60
3.1. Structure………………………………………………60
3.3.1. Public section……………………………………61
3.3.2. Member Section…………………………………64
3.3.2. Admin section………………………….……….65
3.2. Responsiveness…………………………………………70
3.3. Usability………………………………………………..72
3.4. Accesibility for people with visual disabilities………..73
Conclusion……………………………………………………….74Bibliography……………………………..………………………75
Cuprins
Introducere(engleză)………………………….……………..………6
Introducere(romană)………………………….……………..………7
Capitolul 1- Tehnologii………………….……….………………..8
1.1. World Wide Web (WWW)………………………………….8
1.2. HTML 5…………………………….……………………9
1.3. CSS 3……………………………………………..……14
1.4. Javascript..……………………………………..….…..16
1.4.2. JQuery…………………………………………….20
1.5. AJAX………………………………………..………….22
1.6. ASP.NET MVC 4…………………………..…………24
1.7. Optimizare pentru motoare de cautare (SEO)………….29
Capitolul 2-Prezentarea aplicatiei dpdv informatic…..………….30
2.1. Prezentare generală…..……………………..…………30
2.2. Diagrame UML…………………………………………31
2.3. Baza de date…………………………………………….42
2.4. Secțiunile aplicației…………….…….…………………46
2.5. Securitate…………………….…………………………50
2.6. Implementare SEO………………………………………56
2.7. Biligvism……………..…………………………………58
Capitolul 3- Ghidul aplicației………………………..…..………60
3.1. Structură……………………………………………….60
3.3.1. Secțiunea publică…………………..……………61
3.3.2. Secțiunea pentru membrii……..………………..64
3.3.2. Secțiunea administrative………………………..65
3.2. Responsive……………………………………………..70
3.3. Usability……………………………………………….72
3.4. Accesibilitate pentru persoane cu dificultăți vizuale……73
Concluzii…………………………………………………………74
Bibliografie………………………………………………….……75
Cuprins
Introducere(engleză)………………………….……………..………6
Introducere(romană)………………………….……………..………7
Capitolul 1- Tehnologii………………….……….………………..8
1.1. World Wide Web (WWW)………………………………….8
1.2. HTML 5…………………………….……………………9
1.3. CSS 3……………………………………………..……14
1.4. Javascript..……………………………………..….…..16
1.4.2. JQuery…………………………………………….20
1.5. AJAX………………………………………..………….22
1.6. ASP.NET MVC 4…………………………..…………24
1.7. Optimizare pentru motoare de cautare (SEO)………….29
Capitolul 2-Prezentarea aplicatiei dpdv informatic…..………….30
2.1. Prezentare generală…..……………………..…………30
2.2. Diagrame UML…………………………………………31
2.3. Baza de date…………………………………………….42
2.4. Secțiunile aplicației…………….…….…………………46
2.5. Securitate…………………….…………………………50
2.6. Implementare SEO………………………………………56
2.7. Biligvism……………..…………………………………58
Capitolul 3- Ghidul aplicației………………………..…..………60
3.1. Structură……………………………………………….60
3.3.1. Secțiunea publică…………………..……………61
3.3.2. Secțiunea pentru membrii……..………………..64
3.3.2. Secțiunea administrative………………………..65
3.2. Responsive……………………………………………..70
3.3. Usability……………………………………………….72
3.4. Accesibilitate pentru persoane cu dificultăți vizuale……73
Concluzii…………………………………………………………74
Bibliografie………………………………………………….……75
Introduction
My Bachelor thesis theme is based on Web technologies – developing a Web Application based on Web 2.0, using the newest technologies like HTML 5 and CSS 3 for visual part of the app, JavaScript, jQuery (and some related libraries) and AJAX (Asynchronous Java-Script and XML) for client-side scripting, ASP.NET MVC 4 for server-side and SQL Server for the database of the application.
The main reason I chose this theme for my Bachelor thesis is that the Internet is being much more popular during last 10 years. Nowadays, over 34% of the world population are connected to the Internet and this number is still growing [1]. Therefore, every bussineses must have a website in order to make them more known and popular, so the need for web developers is also increasing and the website should be also available for mobile phones and tablets (responsive).
My Thesis is structured in 3 chapters. Chapter 1 contains theoretical informations and presentations of the technologies I used to build the practical application.
In Chapter 2 I described the structure of my Web application, in terms of computer science and Chapter 3 contains the guide of the App. It is called “Hotel Modran” and is a secure, responsive and bilingual(available in Romanian and English) hotel web site that allows tourist to login in their account, book rooms and download the invoice as PDF document, post reviews about the rooms, view photos and other information about the hotel and ask questions via the contact form. The application has three sections (a public one, one for registered users and the last one for the site administrator), access to each one depending on the type of user. Unlike many other hotel websites I’ve seen, in my Web most of the informations are read from the database, and can be easily changed by the administrator using the implemented CRUD methods in admin section. I’ve also added some invoative features to my web application, such as the following: custumers can get a discount if the’ve made at least one booking before or if they book with at least 120 days in advance. Furthermore, other functionalities will be described in Chapter 2. Also, my website is optimized for search engines, it is also accesible for people with visual disabilities and is secured against most common types of attacks, such as cross-site request forgery (CSRF), cross-site scripting (XSS), SQL Injection, overposting attacks and spam posting.
[1]Source: http://www.internetworldstats.com/stats.html
Introducere
Tema lucrării mele de licență este Tehnologiile Web – crearea unei aplicații web bazată pe Web 2.0, folosind cele mai noi tehnologii, cum ar fi HTML 5 și CSS 3 pentru partea vizuală, JavaScript, jQuery (și unele librării) și AJAX (Asynchronous Java-Script and XML) pentru client-side scripting, ASP.NET MVC 4 pentru server-side și SQL Server pentru baza de date.
Motivul principal pentru care am ales acestă temă este faptul că internetul a devenit foarte popular în ultimii 10 ani. Astăzi, peste 34% din populația planetei este conectată la Internet, și acest numar este încă în creștere[1]. De aceea, orice afacere trebuie să aibă un web site pentru a se promova, astfel că și numărul dezvoltatorilor web este în creștere. Deoarece smartphone-urile și tabletele sunt foarte populare, site-urile trebuie sa fie disponibile și pentru aceste dispozitive, adică ori să fie responsive ori să includa o versiune mobilă.
Lucrarea de față este structurată în 3 capitole. Capitolul 1 conține o scurtă prezentare a tehnologiilor folosite pentru realizarea aplicației practice.
În capitolul 2 am prezentat structura aplicației din punct de vedere informatic, iar capitolul 3 conține ghidul aplicației. Aplicația se numește “Hotel Modran” și este un site web securizat, responsive și bilingv (disponibil în Română și Engleză), care oferă turiștilor posibilitatea să se logheze în contul lor (fie local,fie prin Facebook sau Twitter), să rezerve camere și să descarce factura ca document PDF, să posteze recenzii, să vadă fotografii și alte informații despre hotel și să trimită întrebări sau nelămuriri prin formularul de contact. Aplicația are 3 secțiuni (una publică, una pentru utilizatorii înregistrați și una pentru administrator), accesul la acestea depinzând de tipul utilizatorului. Spre deosebire de multe alte site-uri de hotel, majoritatea conținutului aplicației mele este citit și afișat din baza de date, iar baza de date poate fi foarte ușor modificată de administrator prin metodele de tip CRUD din secțiunea administrativă. Am adăugat aplicției mele și cateva elemente inovative, cum ar fi: clienții pot beneficia de reduceri dacă au mai făcut vreo rezervare sau dacă rezervă cu cel puțin 120 de zile în avans. Mai multe funcționalități vor fi descries în capitolele 2 și 3. În plus, web site-ul este optimizat pentru motoarele de căutare, este accesibil și pesoanelor cu dificultăți vizuale și este protejat împotriva celor mai frecvente tipuri de atacuri, cum sunt cross-site request forgery (CSRF), cross-site scripting (XSS), SQL Injection, atacuri de tip overpost și postările spam.
[1]Sursă: http://www.internetworldstats.com/stats.html
Chapter 1-Technologies
. World Wide Web(WWW)
The World Wide Web (abbreviated as WWW or W3), commonly known as the web, is a system of interlinked hypertext documents accessed via the Internet. Everyone who has a web browser can view a web page and navigate between them using hyperlinks. Usually, a web page contains text, images, videos, and other multimedia objects.
On March 12, 1989, Tim Berners-Lee, a computer scientist from UK, wrote a proposal for what become later the World Wide Web. At the time, Tim was a software engineer at CERN, a famous large particle physics laboratory, situated near Geneva, Switzerland. In that year, a few scientists participated in a series of experiments at CERN for long periods of time, and then returned to their laboratories all around the world. These scientists were wishful to exchange results and data, but it was very difficult to do so. Tim understood this need, and saw the unrealized potential of millions of computers connected together through the Internet. He documented then what become the World Wide Web with the submission of a proposal to his management at CERN, later in that year. That proposal specified a set of technologies that would make the Internet truly accessible and useful to people. Howerver, Tim’s initial proposal was not directly accepted. Nevertheless, Tim persevered. In October 1990, he had specified the three fundamental technologies that remain the foundation of today’s Web (which can be seen on every Web browser):
HTML (HyperText Markup Language) is the publishing format for the Web, including the ability to format documents and link to other documents and resources
URI (Uniform Resource Identifier) is a kind of “address” that is unique to each resource on the Web
HTTP (Hypertext Transfer Protocol) is a protocol that allows the retrieval of linked resources from across the Web
Nowadays, the Web is far from reaching its full potential as an agent of empowerment for everyone in the world. The work of the Web Foundation aims to have a substantial, positive impact on all of these factors, and on the future history of the Web. The new Web technologies will offer the possiblity for billions of people (currently excluded from the Web community) to join it.
1.2. HTML 5
HTML5 is a markup language used for structuring content for the World Wide Web (WWW) and an important technology of the Internet. It is the fifth revisioned vesion of the HTML standard (created in 1990 and standardized as HTML 4 as of 1997) and, as of December 2012, is a candidate for recommendation of the World Wide Web Consortium (W3C).
In 1998, the W3C decided that they would not continue to evolve HTML. They belive that future of the Web was XML. Therefore they decided to froze HTML at version 4.01 and released in 2000 a specification named XHTML 1.0, which was a stricter version of HTML that required XML syntax rules such as proper nasting. A small group at Opera, however, was skeptical that XML was the future for all web authors. They began extracurricular work on a proof-of-concept specification that extended HTML forms without breaking backward-compatibility.That spec eventually became Web Forms 2.0, and was subsequently folded into the HTML5 specifications.
Behind HTML5 is a series of stated design principles.There are three main aims to HTML5:
Evolving the language for easier authoring of web applications
Defining error handling for the first time
Specifying current browser behaviours that are interoperable
New Elements in HTML 5
HTML 5 comes with a new introductory line, <!DOCTYPE html>, which tells the browser that the document uses HTML 5. The HTML5 syntax is no longer based on Standard Generalized Markup Language (SGML) despite the similarity of its markup. It has, however, been designed to be backward compatible with common parsing of older versions of HTML.
HTML5 was first released in 2011 and it adds many new syntactic features and it also introduced MathML for mathematical formulas. These features are designed to make it easy to include and handle multimedia and graphical content on the web without having to resort to proprietary plugins and APIs.Other new elements, such as <header>, <nav>, <section>, <article>, <aside> and <footer> are used to enrich the semantic content of documents. These new attributes have been introduced for the same purpose, but some deprecated elements and attributes form HTML 4.01 have been removed. Some elements, such as <menu>, <a> and <cite> have been changed, standardized or redefined. The APIs and Document Object Model (DOM) are no longer afterthoughts, but are fundamental parts of the HTML5 specification. HTML5 also defines the required processing for invalid documents, which ensures that syntax errors will be treated uniformly by all compatible browsers and all the others user agents.
New elements and attributes that reflect typical usage on modern websites were also introduced by the HTML 5 standard. Some of them are semantic replacements for common uses of common block (<div>) and inline (<span>) elements, for example <video> and <audio> instead of the generic <object>, <header>( usually referring to top of web page), <nav> (website navigation menu), <footer> (bottom of web page or to last lines of HTML code),etc. Some deprecated elements from HTML 4.01 have been dropped, including purely presentational elements such as <font>, <frame>, <frameset> and <center>, whose purposes have long been superseded by the more capable Cascading Style Sheets(CSS) standards. There is also a renewed emphasis on the importance of Document Object Model(DOM) scripting (e.g.JavaScript,Dart,CoffeScript) in Web behavior.
Figure 1.1-Typical HTML 4 page structure
As it can be seen on these images, HTML 5 new semantic elements can be used to replace the classical “div”s in the Web Pages design process.
Figure 1.2-HTML 5 typical page structure
HTML 5 Forms
A big problems with HTML 4 forms is that they’re just dumb fields. Validation is required on the server also, but it should be duplicated in the user’s browser with JavaScript to give the user the seamless experience he deserves. Considering that almost every web page has some kind of form, which can be a sign-up, contact, search, comments form and so on, browsers that support HTML 5 had built-in validation for most common data types that a form can collect.
HTML5 new input types and attributes makes developing forms quicker. There are some nice goodies like the new two HTTP types of form action (delete and update) to go with the current get and post methods. But the most important features for developers—which is transparent to everyone, but they make things much more easier— are new form input types which can give special UIs and built-in error reporting. The new form fields are the origin of the specs that became HTML5, and this is where it can be seen the principle of specifying backwards-compatible extensions to the language. These extensions are mostly new values of the type attribute of the input element. HTML 4.01 specifies that browsers should assume <input type=text> if the type attribute is don’t specifed, or you use an unknown type. Therefore, legacy browsers that don’t know the new extensions will fall back to the default and allow the user to enter data in a plain text field. This fallback can be detected in a script and polyfilled, if it’s required, so also the old browsers can simulate the new behaviours.
The new input types are:
Number-used to validate a numeric field
Range-the range input renders in modern browsers as a slider. Previously, in HTML 4, sliders needed to be faked by hijacking an input and using JavaScript and images for the pointers
Email – tells the browser that it should not allow the form to be submitted if the user has not entered what looks like a valid email address
URL- causes the browser to ensure that the value entered in the field is a valid URL
Date-specify a date.Because there are many date formats(like DD-MM-YYY or MM-DD-YYYY) developers can specify the date format via JavaScript validation
Tel –used for telephone numbers.There is no special validation and it doesn’t even enforce numeric-only input, as many phone numbers are written with extra characters(country code), for example +40 (0) 736508408
Search –this type of input expects a search term
HTML 5 also added for the <input> element several new attributes: datalist (used to specify a list of predefined options for an <input> element), autofocus, placeholder (offers a short hint about the input) and required(used for specify if an <input> is required or not).
HTML 5 Geolocation
The HTML5 Geolocation API was created by the W3C rather than the WHATWG is used to get the geographical position of a user. Because this can compromise user privacy, the position is not available until the user approves it. Actually, it’s a key API when it comes to applications and adding some wicked social interaction. The API is very simple to work with, and it can easily enhance a web apps if they make use of any geo data by plugging this API into the app and saving users from having to finger or scroll all over your map to find themselves.
The geolocation API offers two main methods for getting the geographical information about the user:
1. getCurrentPosition()–this method grabs the user’s current location.
2. watchPosition() method is used to keep an eye on the user’s position and track, at regular intervals, the location to see is the position was change. WatchPosition mirrors getCurrentPosition’s functionality, but if the user’s position changes, it will also tell your code.
HTML 5 Canvas and SVG
The HTML5 <canvas> element is used to draw graphics in a Web Application via web-scripting (usually JavaScript, but there can be used also other scripting languages, like Dart or CoffeScript). The <canvas> element is only a container for graphics, and it must be used also a script to actually draw the graphics in the Web Page.
The Canvas element has several methods for drawing lines, circles, squares, text and adding images. It provides an API for two-dimensional drawing—lines, shapes, images, text, and so on. The API already has been used in a huge sclae of situations, including backgrounds for websites, graphing tools navigation elements, full-fledged applications, emulators and games. Conceptually, canvas is a lower-level API compared to Scalable Vector Graphics(SVG).
SVG is an earlier standard for drawing shapes in browsers. Unlike Canvas, which is raster-based, SVG is vector-based, that means that each drawn shape is stored as an object in a graph or Document Object Model, which is aftter rendered to a bitmap image. This imply that if attributes of an SVG object are replaced, the browser can automatically re-render the scene. SVG images are made in XML and complex scenes can be created and changed with XML editing tools.
HTML 5 Web Storage
Web storage and Document Object Model storage (DOM storage) are web application methods and protocols,which used for storing data in a web browser. Web storage is being standardized by the World Wide Web Consortium (W3C). It is part of the HTML 5 specification.It is supported by most new browsers, which support HTML 5 specifications.Web storage supports persistent data storage, similar to cookies but with a greatly enhanced capacity and is more secure,because no information is stored in the HTTP header.
1.3. CSS 3
Cascading Style Sheets (CSS) is a style sheet language which is mostly used for describing the formatting and look of Web pages. While most often used to style web pages and interfaces written in HTML or XHTML, the language can be applied to any type of XML document, including SVG, plain XML and XUL. CSS is a foundation stone specification of the web and almost all web pages use Cascading style sheets(CSS) documents to describe and change their look. The CSS specifications are maintained by the World Wide Web Consortium (W3C).
CSS can also be used to allow the same markup page to be presented in various styles for different rendering methods, such as, in print, on-screen, by voice (when read out by a speech-based browser) and on Braille-based, tactile devices for blind people. It can also allow the web page to display differently depending on the screen size or device on which it is being viewed, making the Web Application to be responsive. While the developer of a document typically links that document to a CSS file, readers can use another style sheet, which can be on their own computer, to override the one the author has specified. However if the author or the reader did not link the document to a specific style sheet the default style of the browser will always be applied.
CSS is firstly designed to enable the separation of document content from document presentation, including elements such as the position, colors, layout and fonts. This separation improves content accessibility, enable multiple pages to share formatting, provide more flexibility and control in the specification of presentation characteristics and, most important, reduce the complexity and repetition in the structural content (such as by allowing for tableless web design,which was mostly used before).
CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element.So the In this so-called „cascade”, weights or priorities are calculated and assigned to rules, so that the results are predictable.The priority rules in CSS are:
The weight/priority of a tag is 1
The weight/priority of a class is 10.
The weight/priority of an ID is 100.
The weight/priority of a style attribute is 1000.
In CSS, selectors are patterns used to select the element(s) a user wants to modify or style.
The most used used CSS selectors are:
Id(„#”)-an id can be applied only to one element
Class(„.”) – a class can be used for elements that has something in common
Wildcard(„*”) – applies for all elements
Elements(e.g input,p,span,div,etc) –applies for elements of the same type
Nested elements(e.g ul li,li a)
Pseudo elements(e.g p:first-line , span:first-letter)
Pseudo-classes(e.g a:link,a:hover) are used to add special effects to some selectors
New Funcionalities in CSS3
CSS3 is a new version and an extension of CSS 2.1 that adds innovatively new functionality, but it’s not anymore a single specification. Instead, it’s been segregated up into more modules. Each module is a standalone specification for a subsection of CSS, like backgrounds, text or selectors and it has its own timetable and its own set of authors. The main advantage is that the entire CSS3 specification doesn’t have to be held up waiting for each little bit—only the module that that bit must wait, while the rest can move forward.
Much of CSS3 is copied form CSS 2.1, although there are many additions and revisions. There are too many changes to list all here—but i will present an overview of the most popular and useful best-supported to CSS from level 2.1 to level 3.These are:
Powerful selectors. CSS3 also introduces a dozen of new selectors , such as many new pseudo-classes and attribute selectors. They allow you to target specific pieces of your HTML without needing to add IDs or classes.
Unique fonts. The Fonts module introduces the @font-face rule that allows you to link to a font file on your server or on the internet and use it to display the text on your page, instead of being limited to the „Web-safe” fonts. This makes beautiful typography so much more attainable.
Multiple-column layouts. CSS3 includes some new modules that make multi-column layouts much more easier to handle. The Multicolumn Layout module deals with flowing the text of a single block into multiple columns, similar to magazine or newspaper layout. The Flexible Box Layout module is linked with making blocks align vertically or horizontally with each other and making them more flexible to the available space than positioning or floats can be. There are also some more experimental layout modules, such as Template Layout and Grid Positioning.
Box transformations. Another category of visual effects that CSS3 makes possible are those that manipulate the box’s position and shape in 2D or 3D space, such as scaling, rotating or skewing it. These new effects are called in CSS3 transforms.
Transitions and animations. CSS3 transitions are a simple type of animation that allow the user to easily change from one style on an element to another, such as gradually changing the color of a button when someone hovers over it. Full-fledged CSS3 animations, are used to make more complex style changes and movements possible without using JavaScript.The Media Queries introduces syntax for feeding styles based on the capabilities of the user’s display or device, such as the screen resolution, viewport width and how many colors it can display. Media queries are a great tool for creating mobile-optimized web sites.
Image-free visual effects. CSS3 includes many new properties which allows the user to create inovative visual effects that previously could be accomplished only with images or scripting, such as drop shadows rounded corners(with border-radius property), gradients, semi-transparent backgrounds, and border images. Many of these new properties are used to stylize the background and border properties.
1.4.1. JavaScript
JavaScript (JS) is a dynamic computer programming and scripting language and the programming language of the Web. The stunning majority of modern websites use JavaScript, and all modern web browsers—either on PCs, tablets, game consoles and smart phones—include JavaScript interpreters, making it the most spread programming language in history. JavaScript is part of the triad of technologies that all Web developers must know: HTML is mostly used to specify the content of web pages, CSS to specify the presentation and layout of web pages, and JavaScript to specify the behavior of web pages. The name “JavaScript” is usually linked with Java, but except for a superficial syntactic resemblance, these 2 programming languages are totally different and they have nothing in common. JavaScript has long since outgrown its scripting-language roots to become a robust and efficient general-purpose language. The latest version of the language defines new features for serious large-scale software development. Earlier, JavaScript concentrated on client-side form validation and working with images on webpages to provide helpful, but rudimentary, interactivity and feedback to the visitor. When a user filles up a form within a web page, JavaScript validates instantly the contents of the web form rather than sending it to the server and waiting for the response. Especially in the days before broadband was pervasive, preventing the round-trip to the server was a great way to make an applications more responsive and a little bit quicker.
Being not a compiled language, JavaScript looks and feels like a language without much power, but, after short time, everyone came to realize its usefulness and strengths for creating and simulating interactivity on the World Wide Web (WWW). Up until that realization, programmers developed many websites using only simple Hypertext Markup Language (HTML), Cascading Style Sheets (CSS) and graphics that often lacked both visual appeal and the ability to interact with the site’s content. In Microsoft Windows 8 operating system, JavaScript has now an important role in creating awesome applications that don’t rely anymore on the web browser.
The DOM
A very important standard relevant to the JavaScript programming is the DOM (Document Object Model), which is being developed by the World Wide Web Consortium (W3C). The W3C consortium defines the DOM as being “a platform- and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of documents.”. That means that anyone can work with a specification to which web browsers accede to develop a webpage in a dynamic style. The DOM creates a tree structure of objects for HTML and eXtensible Markup Language (XML) documents and also enables scripting of those objects. JavaScript interacts frequently with the DOM for many important things.
Like JavaScript, the DOM is interpreted differently by every browser, making JavaScript usage more difficult. Earlier versions of Netscape and Internet Explorer 4.0 included support for an early DOM, which was known as Level 0. The Level 0 DOM it’s supported in all the browsers that came after.
Javascript use the following selectors to select HTML elements:
document.getElementById()-selects the element that has the chosen ID
document.getElementsByClassName()-select the elements that have the chosen class
document.getElementsByTagName()-select the elements of the chosen type
Figure 1.3-DOM basic example
JavaScript usage
JavaScript represent the „J” part in the acronym AJAX (Asynchronous JavaScript and XML), the darling of the Web 2.0 prodigy. However, beyond that, JavaScript is an everyday language providing the interactivity expected, maybe even demanded, by today’s web users. JavaScript can do many tasks on the client side part of an Web application. For example, it can add the required interactivity to a web page by changing the text on a page creating drop-down menus, helping with form entry and adding dynamic elements.
Numerous operations that JavaScript can’t perform are the consequence of JavaScript’s usage, which is limited to a web browser environment. JavaScript relies on another interface or host program for its functionality. That program is the user’s web browser, which is also known as a user agent.
Because JavaScript is run wholly on the client, the developer must learn to let go. As it is expected, letting the control over the program to go has serious involvements. After the script is on the client’s computer, the user can do many undesirable things to the data before sending it back to the server. As with any other web programming, the data coming back from the server should never be trusted. Even if the content of a form is validated using JavaScript functions, the data must also be validated again when it gets to the server, because a user with JavaScript disabled could send back garbage informations through a web form. Some innocent users could believ that client-side JavaScript function has already checked the data to ensure that it is valid, but the invalid data might find get back to the server, causing unforeseen and possibly dangerous consequences.
A few people are still using older browsers that don’t support JavaScript at all. Other people won’t be able to take advantage of several JavaScript’s fancy features because of accessibility text readers, programs and other add-on software that increas the browsing experience. On the other hand, some people might just choose to disable JavaScript because of the poor reputation.
Browser Object Model(BOM)
The Browser Object Model(BOM) creates a tree-like hierarchy of objects, many of which provide properties and methods for the JavaScript programmer. The browser itself is represented by one object, which is called the window object.The window object is a global object that represents the currently window opened in the browser. The window object is the parent of several child objects, such as: document, history, location, frames, navigator, screen . The window object has several methods, properties and child objects. Most used methodes are alert() and prompt(). Because the window object is a global object , the user don’t need to preface its properties and methods with window. Instead, he can call them directly, like in the call of the alert() method..
Figure 1.4-The window object and its children.
1.4.2. jQuery
jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of Hyper Text MarkUp Language (HTML). It was released in January 2006 by John Resig. jQuery's syntax is designed to make it faster and easier to select DOM elements, create animations, handle events, and develop asynchronous applications. jQuery also offer capabilities to create and develop plug-ins on top of the JavaScript library. jQuery provides a general-purpose layer for common web scripting, and is therefore useful in every scripting situation. The core features, though, assist web developers in accomplishing the following tasks:
Access elements in a document: Using jQuery, developers have a robust and efficient selector mechanism at their disposal, making it easy to retrieve the exact right of the document that needs to be changed or manipulated.
e.g: $('.main').find('h1');
Alter the content of a document: Not limited only to cosmetic changes, jQuery can alter the content of a document itself with a few keystrokes. jQuery can reorder lists, change or insert text and images or rewrite the entire structure of the HTML.
e.g: $('#main).append('<a href="index.html">more</a>');
Modify the appearance of a web page: CSS offers a powerful method of influencing the way a document is rendered, but it falls short when not all web browsers support the same standards. jQuery can change also the classes or individual style properties applied to a portion of the document even after the page has been rendered.
Animate changes being made to a document: To effectively implement such interactive behaviors, a designer must provide also a visual feedback to the user. The jQuery library facilitates this by providing an array of effects such as fades and wipes.
e.g: $('div.list1).slideDown();
Respond to a user's interaction: The jQuery library offers an elegant way to intercept a wide variety of events, such as clicking on a link or changing an input element, without the need to clutter the HTML code itself with event handlers.
Retrieve information from a server without refreshing a page: The jQuery library allows developers to focus on the server-end functionality, removing the browser-specific complexity of AJAX.
e.g: $('div.list).load('more.html #content');
1.5. AJAX
Ajax (acronym for Asynchronous JavaScript and XML) encapsulates much more than the technologies that make up this catchy acronym. The term Ajax describes, in general, the usage of various Web technologies to transform the batch submission of traditional Web applications into a highly responsive user experience. However, such a dramatic improvement does increase significant the program complexity and propose new user experience design challenges. The concepts behind Ajax it’s not very complicated to understand and, in the following paragraph, I will describe the differences between a „normal” and an AJAX request.
In a „normal” request, first the page is loaded. Afterwards the user performs some action such as filling out a form or clicking something on the page. Those activities are submitted to a server, which process the request while the user is waiting until the server returns a result, which reloads the entire page. This technique is simple to implement, but the down side with this is that it can be very slow, because it needs to retransmit the whole data.
AJAX-style applications use a very different model where user actions trigger behind the scenes communication to the server fetching just the data needed to update the page in response to the respective actions. This process generally happens asynchronously (in the background), allowing the user to perform other actions within the same page while data is returned, but only the relevant portion of the page is changed.
Alternatively, other techniques such as <script> tag fetching remote .js files, inline frames (i-frames), image requests, or Adobe Flash plugin can be used in an AJAX request. After receiving a request, a server can generate the response in either XML, HTML fragments or JavaScript Object Notation (JSON), which is nowadays being used more frequently.
Figure 1.5- Ajax applications may vary in implementation
At the heart of Ajax stands the XMLHttpRequest (XHR) object, because it can be used to solve nearly most of AJAX implementation problems. This object enables generalized HTTP and HTTPS access for client-side scripting and is not limited only to XML using, as its name could suggest. The facility was first implemented in Internet Explorer 5 and this object has come to be widely supported in all major desktop browsers.Given the ubiquity of the object, the W3C aims to standardize its syntax, but there also exists some browser variations.
XML (eXtensible Markup Language)
XML stands for eXtensible Markup Language and it is designed to transport and store data.XML is a markup language like HTML, but XML doesn’t contain predifined tags, so the developer must define it’s own tags, as that XML is designed to be self-descriptive.
The main difference between XML and HTML is that those languages have different goals:while XML was designed to transport and store data, with focus on what data is, HTML was designed to display data, focusing on how data looks. One of the most time-consuming challenges for developers is to exchange data between incompatible systems over the Internet. XML greatly reduces this complexity of transfering data, since the data can be read by different incompatible applications.
Also, upgrading to new systems (can be either hardware or software platforms), is always time consuming. Large amounts of data must be converted and incompatible data is often lost. XML has the advantage of storing data in text format and that makes it easier to expand or upgrade to new operating systems, new applications, or new browsers, without losing data.
XML have much more stricter rules than HMTL.The main rules are the following:
XML documents must have a root element
XML tags are case sensitive
all XML elements must have an closing tag
XML elements must be properly nested
XML attributes must be quoted
1.6. ASP.NET MVC 4
ASP.NET is a Web applications platform which provides all the services required in building server-based Web apps. Web applications created with ASP.NET are executed by the .NET Framework, which makes the Web applications safer and enables the automatic memory garbage collector. Furthermore, the .NET Framework offers structured multithreading support and error handling. Finally, information about users, members, classes, and all of the source code in general is stored as metadata during code compilation. It is also important that ASP.NET supports object-oriented programming (OOP), which involve that the entire code will have full access to all objects in the .NET Framework, and the developer can implement all the goodies of the OOP (like encapsulation, inheritance and polymorphism).
ASP.NET MVC is built on top of the ASP.NET Framework, which contains the security APIs, membership enabling, state management, caching, and many more. In ASP.NET MVC, many improvements to ASP.NET have been covered in the framework itself.
MVC Pattern
The main purpose of this MVC pattern is to isolate user interface from business logic in to increase the maintainability, testability, and to offer a cleaner structure for the application. Every ASP.NET MVC application is divided into three parts: models, views, and controllers. The model consists of all the classes that handle business logic and data. Data processing using model classes is initiated by the controllers that handles the user requests. After the data processing is complete the controller returns a response to the user by sending the results to a View who produces the HTML page rendered in the browser.
Figure 1.6-Model-View-Controller Pattern
In MVC pattern, the model represents the parts of the application that implement the database and domain logic. The operation of the model can come from generating the classes that represents objects in the database (such as in Entity Framework).
Views are the visible elements in the application. They typically shows users data from the model. A view page normally receives a view-model object from the controller (the view doesn’t concern about how this data was obtained, as that is the controller’s duty). The view page contains HTML (can additionally include some UI-related elements) to decide how and when to render the model data into the browser.
The controllers are classes that interact with the model, collect the user requests and renders a selected view to the browser.
ASP.NET it’s the best option for those developers who need the following:
Separation of concerns: In ASP.NET MVC 4 all aspects of the system are clearly separated one from another. Because of the MVC pattern, an application which implements it is divided into discrete parts (in this case model, views, and controllers), which makes the app easier to maintain and upgrade.
A high level of control over the generated HTML: In a ASP.NET MVC application, the Views render the exact HTML you tell. Recently, Web Forms have been improved in that, but still isn’t as good as MVC is.
Easier unit testing: With ASP.NET MVC, it is very easy to follow testing patterns such as test-driven development (TDD).
One of the most significant concepts in a MVC applications is that it doesn’t exist a relationship between physical file inside the web server and a page request. In a normal Web Form application, every page request is interpreted into a call to a physical file in the webserver. For example, if the user requests something like this http://localhost:50/index.aspx, the web server translate the request by looking at the root of the application for a file named index.aspx, and only then process the file and returns the generated HTML.
In an MVC application, when the user makes a request, a routing engine component matches the request to a proper route. A route defines requests using a string pattern and then establishes the controller and the proper method in the controller class that must process the request. After the route is identified, the routing component build a request handler that creates the controller object that will process the request. Then, the controller calls the method in the proper controller class that will process the request. Those methods that process requests are known as action methods. Usually the result is a HTML code (rendered by a View) the user will see in the browser. Figure 7 shows the entire server-side processing life cycle in an ASP.NET MVC 4 web application.
Figure 1.7- ASP.NET MVC request process
ASP.NET MVC 4 Features
Through the features in ASP.NET MVC 4 is the Web API, a powerful framework for building HTTP and RESTful applications. ASP.NET MVC 4 includes a mobile template so that the mobile browsers support is out of the box. In MVC 4, asynchronous controllers can be implemented using tasks and it includes implementation of OAuth and Easy Facebook for creating a friendlier authentication methode.
ASP.NET MVC 4 is built on top of the many features of its previous versions and include new features like:
jQuery , jQuery Mobile , other mobile features
Minification or bundeling of JavaScript and CSS files in order to reduce the size and amount of HTTP requests
Twitter, Facebook, Oauth and OpenId authentification
ASP.NET Web API, a new framework for building RESTful services
A Mobile App project template and a new HTML5 default template
Asynchronous controllers support
Microsoft Windows Azure SDK support for deploying ASP.NET MVC 4 applications to Windows Azure
Razor View Engine is the new view engine that Microsoft introduced with MVC 3 and upgraded it in MVC 4 (notwithstanding the changes are minor). A view engine is used to process ASP.NET content and looks for instructions, to dynamically insert HTML content into the output sent to a browser. Microsoft uses two view engines—the old ASPX engine, recognized by the <% […] %> tags that have been the mainstay of .NET development for last years and the new Razor engine that works on regions of content denoted with the @ character. The syntax of those two view engines are very similar, although there are some new rules.
SQL Server &ADO.NET
SQL Server is a relational database management system (RDBMS) developed by the Microsoft company. As a database, it is a software product having the main function to store and obtain data requested by other application, that can either be on the same computer or on another computer across a network or across Internet. There are at several different variants of Microsoft SQL Server aimed at different audiences and for workloads ranging from small single-machine applications to large Internet-facing applications with many concurrent users.
Entity Framework(EF) is an object-relational mapping (ORM) framework for ADO.NET, part of .NET Framework. The Entity Framework is a set of technologies in ADO.NET that support the development of data-oriented web or soft applications. Data-oriented applications developers have contended with the need to achieve two different objectives. They must model the relationships , entities , solving business logic problems, and and work with the data engines used to obtain and store data. The data can include multiple storage models , each one having its own protocols; even an app working with a single storage system must equilibrate the requirements of the storage system and the requirements of writing adaptinve source code.
The Entity Framework offers developers the posibility to act with data in the form of specific properties or objects , such as clients and their addresses, without needing to preoccupy with creating and editing database tables and columns where the application data is stored. Using EF, developers can work at a high level of abstraction when they handle data, and can create and edit data-oriented applications writing less code than in normal applications. Entity Framework applications can run on any machine that has minimum .NET Framework version 3.5 SP 1.
Entity Framework uses a different version of the Structured Query Language, named Entity SQL, which is used at writing, at the conceptual level, database queries and updates over entities or entity relationships. It differs from SQL in that it does not have an explicit constructs for the joins clause , as the EDM is designed to abstract partitioning data across tables. Querying for the conceptual model is facilitated by EntityClient classes, which accepts an Entity SQL query. The query pipeline parses the Entity SQL query into multiple parts, dividing the query into multiple
tables. A Connection object is used to initialize the EntityClient provider, which in advantage to the usual parameters of authentication info and data store, requires the SDL schema and the mapping information. The EntityClient provider turns then the Entity SQL tree into an SQL query and, afterwards, the execution of the query returns an object named ResultSet, which is not limited to a tabular structure, in contradistinction to ADO.NET ResultSets.
Entity SQL enhances SQL by adding intrinsic support for:
EntitySets , being treated as collections of entities
Types , because ADO.NET entities are fully typed
Composability , removing the restrictions where subqueries could be used
The Language Integrated Query(LINQ) to Entities provider allows LINQ to be used to query various RDBMS data sources..Linq is part of.NET Framework and it offers native querying capabilities to .NET components .LINQ extends the programming language by adding query expressions, which are related to normal SQL statements, and can be easily used to obtain and handle data from relational databases, classes, arrays, XML documents and any other supported data sources. LINQ can be also used for other purposes which use query expressions as a general framework , like as constructing event handlers or monadicparsers.
ASP.NET MVC 4 Security
A Web application form should be validated in two places: first in the client browser (client side validation), and other on in the server (server side validation). The steps in the validation are as following:
1. Client side validation, occurs in the client browser, when the user submits data:
Verify that all required fields are filled
Checks that the data format is correct. For example, to verify that the data sent is an e-mail address , the deveoper should use regular expressions (RegEx) to check if the e-mail format is valid(containing a username, followed by the symbol @, followed by another name, and ending with a dot and a few characters in the end).
When it is possible, checks data types (for example, that a date field has an actual date)
If something went wrong at this point, the user receives immediate feedback about how to correct the problem, and the information is not sent to the server. The user can then properly revise the form.
2. After client-side validation succeed or when JavaScript is disabled, the data is sent to the server.
3. In the server, a second round of validation is performed to enforce business rules and to ensure that the submitted request is not a malicious attack.
When an error occures at this step , the request is not processed and information about the error is sent back to the browser so the user can make the necessary corrections.
4. Once server-side validation tests succeed, the request is processed and a result is produced (like rendering a view, downloading a file, sending an e-mail, etc.).
Securing a web application is a very important task, so it cannot be taken lightly. It must be implemented to prevent the stored information from being hacked. Developers need to assure that certain security measures have been implemented to keep the web site well working. Also, access to sensitive parts of the web site should be restricted to only certain users, such site admin or moderator. ASP.NET MVC is built on top of ASP.NET and has access to the security features in the framework.
In a web application, the authentication process refers to identifying the user, whereas authorization refers to define the actions that a user is allowed to do. In addition to users, roles enabling is another concept that is often implemented to identify a group of users. Instead of attributing permissions to individual users, authorizations are assigned to a role, and all users within the same role inherit all that permissions. When a user begin to use a web application, that application becomes vulnerable to attacks. Compromised browsers, malicious users, accidental misuses, and more facts can expose vulnerabilities in the web application. Such vulnerabilities can be exploited, which could provoke many problems. In the end, a developer have to assure that his web application is as secure as possible, by implementing best practices security. ASP.NET MVC 4 includes many features that help prevent the most common types of attacks, which aim to exploit some vulnerabilities in the application such as cross-site request forgery (CSRF) and cross-site scripting (XSS).
1.7. Search Engine Optimization (SEO)
Search Engine Optimization (SEO) is a set of methods and techniques used to a website to increase the traffic, rank, and visibility of a Web application in a search engine’s(such as Google , Bing , Yahoo , etc.) results page. The main advantage of optimising a website it’s that it has a much more bigger chance to apper in the most used search engines top results, increasing subsequently the traffic of that website. The process of optimization includes several methods and techniques that are applied to the respective website or other sites that are related to that website’s content. For understanding the SEO process, the web developer must learn about how the search engine processes are working, about the search page layout, and about the different search engines that should be included in the process.
The most important benefits of SEO are mostly focusing on increasing rankings, but the breadth of the effects of SEO also includes:
Increased visibility and branding
Expanded branding occasions
Increased traffic and number of visitors
Increased number of sales, customers, or other marketing elements
Long-term positioning
Exposure to new audiences or markets
Search engine traffic is one of the greatest factors for a succesful website, because that can turns the website traffic into potential clients or new visitators. The SEO process includes also a few techniques that can be applied in parallel in order to move the website to the top of the search engine rankings. These SEO techniques include different off-site or on-site strategies, also known as Off-page and On-page methods. The methods should be implemented because each one is required to achieve successful SEO.
In SEO, a “keyword” can be either a single word or multiple words (as in a “keyword phrase”). There are no limits to the number of words that keyword phrase can contain , and over the years people keep using an increased number of descriptive search terms for obtaining much more specific results. Nowadays, a lot of users depend on search engines results, such as Google or Bing , to find what they are searching for, so that the optimization process is vital in order to create a succesful website.
Chapter II
2.1. General presentation
As I also mentioned in Introduction , my ASP.NET MVC 4 web application is called “Hotel Modran” and is a multilingual(available in Romanian and English), responsive hotel web site that allows customers to view informations and photos, book rooms(if there are rooms available for the selected period), write reviews(but the review will appear on the web site only if it is approved by the site administrator), ask questions via the contact form, and they also cancel bookings if they are logged in their account.
The application has the following three sections, access to each one depending on the type of user. There are three types of users: application administrators, registered members, and anonymous users.
Administrative section: This section is accessible only to application administrators.The admin can, if he is logged in, acces, create, read, update, and delete (CRUD) facilites for the enitire database, approve and delete reviews, see booking.
Public section: This section is accessible to everyone (to registered members and also to anonymous users) and displays photos and additional information about the hotel. They can book rooms and get an early-booking discount, write reviews and ask questions
Members section: This section is accessible to registered members and enables them to manage their bookings (they can cancel the bookings and download the invoice as PDF document) and they can get also a fidelity discount up to 10%.
I will explain more about these sections in Subchapter 2.4 and in Chapter 3.
In the first part of this chapter, I’ve describe the application structer and functionalities using UML diagrams. Then I will present the web app’s database structure and, afterwars I’ll present the back-end part of the application and how it works. I will also talk about how my application is secured against internal or external threats and, in the end of this chapter, I will explain how I’ve implemented Search Engine Optimization (SEO).
2.2. UML Diagrams
Use Case Diagram
In my application,there are 3 main actor:
1.) Anonymous user-can acces only the public section of the web site (the uses case diagram for this actor can be seen in Figure 2.1).
An anonymous user can do the following actions:
he can create an account in order to acces the members section
can book a room, if it’s available, and download the invoice for the booking
write reviews
ask qustions via the contact form
Figure 2.1 – Anonymous user Use Case diagram
2.) Registered user (Figure 2.2)-can acces both the public and the registed section of the web site. They can do the following actions:
book rooms
download invoice
write reviews
ask qustions via the contact form
cancel bookings
change the password for their account
Figure 2.2 – Registered user Use Case diagram
2.) The site administrator (Figure 2.3)-can acces the administrative section of the web site and he can initiate the following actions:
make CRUD operations(they can create, read, update, delete rooms,photos and reviews)
view bookings
approve reviews
delete reviews
Figure 2.3 – Administrator Use Case diagram
Class Diagrams
As in my web application there are 5 contollers I’ll create for each controller a UML class diagram.
Home Controller class diagram (Figure 2.4)
The main role of the home controller is to render the views for the public section.The controller renders and updates the following views (represented in the middle of the diagram): Index, Photo, Facilities, Rooms, RoomPhotos, RoomReviews and Contact.
It also executes the events which occur when the user changes the URL, or when the user fill in the booking form, post a review or fill in the contact form.
The models (left side of the diagram) are the also the model for database tables, used for creating the tables using Entity Framework.
Figure 2.4 – Class diagram for Home Controller
In this figure are presented the controller (right), the views (in the middle) and the models (left).
Admin controller class diagram (Figure 2.5)
The admin controller renders the main pages (Index and Contact) of the administrative section. In the Index page, the admin can view all the bookings made having the check in date after today’s date and, in the Contact page, he can see all the question asked by customers and he can check also if the question was answered or not and modify the response status.
Figure 2.5 – Class diagram for Admin Controller
Room controller class diagram (Figure 2.6)
The room controller is also part of the administrative section and it offers the administrator the possibility to make CRUD operations (create, read, update, delete) on database tables represented by model classes (right side of Figure 2.6). Therefore, he can do the following actions: view, add, edit or delete rooms, view, add or delete room photos, view or delete room reviews (even after they’ve been approved), view, add or delete room numbers. These CRUD operations are made, when JavaScript is enabled, in jQuery UI dialog using AJAX or in a normal view, rendered in user’s browser only when JavaScript is disabled or when JavaScript is not supported by the browser (usually this can happen only in old browsers).
Figure 2.6 – Class diagram for Room Controller
Approve Review controller class diagram (Figure 2.7)
This contoller renders the view that contains the reviews that the administrator can either approve them or delete them form the database.
Figure 2.7 – Class diagram for Approve Review Controller
Account controller class diagram (Figure 2.8)
This controller handles the user accounts and contains also the views that can be seen only by the registered users, being part of members section.
The Bookings view is the view where the user can see the bookings he made, download the PDF invoice a booking or cancel a booking (and the controller delete it from the database). The Login view is rendered when the administrator wants to login into his account, otherwise the controller renders the LoginUsers view. The Register view is used for registering users and in the Manage view users can change their account password, and the controller save the changes in the database.
Figure 2.8 – Class diagram for Account Controller
Activity Diagrams
Figure 2.9 shows how the controller renders a view in the browser. When an user enters an URL into the browser, then the controller checks if the URL follows the pattern specified by the developer and if the entered view exists. When these conditions are fulfilled, the controller renders that view in the browser, else it returns a HTTP 404 status code (“Not found”).
Figure 2.9 – Activity Diagram View Rendering
Figure 2.10 shows how a booking is made. After the customer fills in the form and submit it, the controller checks if the submitted form is valid or not. If it’s not valid, the controller notifies the customer about this, and he must correct the wrong inputs, and when it’s valid the controller checks if there are rooms available for the chosen period and of the selected room type. If there are rooms available, the controller books the first room that it finds and confirms the booking to the user, else it informs the user about this and he must pick new dates for the booking or chose another room type.
Figure 2.10 – Activity Diagram Room Booking
In Figure 2.11 is described how a review is submitted. The first part of these procedure is the same as in the room booking procedure. When the user fills in the form and submits it, the controller checks if the submitted form is valid or not.
When the submitted form is valid, the controller saves the review in application’s database and confirm this to the user, but the review will not appear in the view until it it’s not been approved by the web site administrator. If the form is not valid, the controller does not save the input and ask the user to correct the errors.
Figure 2.11 – Activity Diagram Post Review
In Figure 2.12 is explained what happens when the contact form is successfully submitted. When the customer fills in the form and submits it, the controller checks if the submitted form is valid or not. When it’s valid, the controller send an e-mail to the mentioned e-mail address and, in the same time, saves the contact in application’s database and confirm these to the user. If the form is not valid, the controller does not save the input and ask the user to correct the errors.
Figure 2.12 – Activity Diagram Contact form
In the last 2 diagrams are explained the add-edit methods for adding/editing rooms, photos and room numbers and, in the last one, what happens when the administrator approves or deletes a review. When the administrator wants to add or edit an entity (Figure 2.13), it will be called the same method of the controller and after he submits the form, the controller verify the validity of that form and, if everything it’s ok, it saves the changes in the database.
Figure 2.13 describes the approve/delete review method. The admin can either select to approve or delete a review, which was submitted by a user. If he select to approve it, the controller changes the boolean attribute “approved” to true and saves the changes, but if he selects to delete it then the controller deletes that review.
Figure 2.13 – Activity Diagram Add-Edit methods
Figure 2.14 – Activity Diagram approve/delete review
2.3. Database
Hotel Database
My application’s database has 8 tables: Room, Room Photo, Review, Room Number, Booking, Customer, Hotel Photo and Contact. All these tables are created by Entity Framework using the models described before as a pattern and the DBContext model class, which implements the System.Data.Entity.DbContext interface (as it can bee seen in the code below).
namespace Hotel.Models
{
public class DBContext : DbContext
{
public DbSet<Room> Rooms { get; set; }
public DbSet<RoomNo> RoomsNo { get; set; }
public DbSet<RoomPhotos> Photos { get; set; }
public DbSet<Review> Reviews { get; set; }
public DbSet<Booking> Bookings { get; set; }
public DbSet<Customer> Customer { get; set; }
public DbSet<Contact> Contact { get; set; }
public DbSet<HotelPhotos> HotelPhotos { get; set; }
}
}
DBContext model class
Also, in my application, data migration process is enabled. These process consist in transferring data between storage types, formats, or computer systems and it represents a key consideration for any system implementation, consolidation or upgrade. The main reason I enabled data migration in my application is to achieve an automated migration, for freeing up human resources from tedious and tiring tasks. So each time someone wants to update the database, it will call the methods from the Migrations class, including Seed method, which adds some elements into the database. So, in my case, data migration occurs for the website consolidation reason.
In Figure 2.15 we can see the structure of the database, including tables and the relations between these tables.
Figure 2.15 – Hotel Database Structure
So, as we can see in the figure above my application’s database has the following tables:
Room (Id [PK], roomType, singleBeds, doubleBeds, price) – this table is used for storing informations about the rooms of the hotel. All attributes are required.
Room Photo (Id [PK], RoomId [FK from table Room], url) – used to store the room photos. Also, all attributes are required.
Review (Id [PK], RoomId [FK from table Room], date, username, title, rating, photo, message) – this table stores reviews. The following attributes are required: Id, RoomId, date, username, title and rating.
Room Number (Id [PK], RoomId [FK from table Room], number) – it is used to store the room numbers. All attributes are required.
Customer (Id [PK], name, surname, email, username) – used for storing the customers of the hotel. All attributes (except username) are required.
Booking (Id [PK], RoomNumber_id [FK from table Room Number], Customer_id [FK from table Customer], checkIn, checkout, price) – it stores stores all the bookings made. All the attributes are required.
Contact (Id [PK], name, telephone, email, message) – this table is used to store the data submitted via the contact form. The Id and email attributes are required.
Hotel Photo (Id [PK], url) – used for storing hotel photos. Also here, all attributes are required.
The source code below shows the LINQ database query for obtaining the rooms available for the chosen period and of the selected room type. As we can see, it is a little bit different from a normal SQL query, because it begins with the keyword “from” and ends with “select” instead of beginning with “select”. Also, in LINQ the keyword “in” from SQL doesn’t exists, and it is replaced by “contains”, as LINQ deals with collections.
var unavailableRooms = from t1 in db.RoomsNo
join t3 in db.Bookings on t1.id equals t3.RoomNoId where !(checkIn < t3.checkIn || checkIn >= t3.checkOut)
select t1.id;
var available = from t1 in db.RoomsNo
join t2 in db.Rooms on t1.RoomId equals t2.id
where t2.type.Equals(type) &&
!(unavailableRooms.Contains(t1.id))
select t1.id;
LINQ database query for selecting the rooms available
So, the unavailableRooms variable stores all rooms that are unavailable for the chosen period, while the available variable contains all rooms that are available and that are of the selected room type.
Account Database
The account database is used for storing informations about users, such as username, password, roles, and oher informations about last logging and password changing. For security reasons, I created a new database to store these informations.
The „Userprofile” table contains the username of the account and the „webpage_Membership” table stores the password for each account. Obviously, the passwords are not stored in plain text; they are hashed with the RFC 2898 algorithm using a 128-bit salt, a 256-bit subkey, and 1000 iterations.
The structure of the database can be seen in Figure 2.16 (containing the tables of this database and the relations between them).
Figure 2.16 – Account database structure
2.4. Applications Sections
As I also mentioned before, my ASP.NET MVC 4 application is called “Hotel Modran” and is a respnsive hotel web site that allows travelers and other customers to read informations about the hotel, to see photos with the hotel, to book romms and download the invoice as a PDF file, post reviews about the rooms and to ask questions about any problems they have. Furthermore, the register users can also cancel any booking they want or download the PDF invoice for each booking they’ve made before. The application has the following three sections, access to each one depending on the type of user. There are three types of users: application administrator, registered members, and anonymous users (any user which is not logged in).
Administrative section: This section is accessible only to application administrator
Public section: This section is accessible to everyone (anonymous users) and displays photos and additional information about the hotel. In this section the users can also book rooms, post reviews and submit a contact form
Members section: This section is accessible to registered members and enables them to manage their bookings(they can cancel them or download the invoice)
Figure 2.17 – User authorization mockup
Figure 2.17 describes what action each type of user is allowed to do. So, the anonymous user can book rooms, write reviews, submit the contact form and download the invoice. A registered user can also do these actions and, in addition to these, he also can cancel the bookings he made.The administrator can see each booking made and have to approve or delete each review submitted. He can also make basic CRUD operations for maintaing the hotel database, such as adding, editing and deleting rooms, adding or deleting room photos and room numbers and deleting reviews.
Public Section
The public section of the web site is accessible to anyone with a web browser and is the place where every user can do the following actions:
View facilities, offers and other informations about the hotel
See the rooms hotel, photos and reviews about them
Book a room. To book a room of this hotel, the customer has to fill in a form (that has the following inputs, all of them being required: name, surname, e-mail, check in date, check out date and room type). After he submits the form and it is valid, the controller checks in the „Booking” table from the database which rooms are unavailable for that period. Then, if it exists at least one room of the selected type which is not unavailable for that period, the controller finds the first room that meets these conditions and books that room for the customer, then saves the booking in the database and confirms that back to customer.
Write a review. To write a review for a room of the hotel, the user has to fill in a form (that has the following inputs: username, title, rating, photo and details). After the form is submitted and if it’s valid, the controller saves the review in the database, but it will not appear on the web site until it is not been approved by the site administrator.
Submit contact form. To ask a question or complain about something, a user has to fill in the contact form (that has the following inputs: name, telephone, e-mail adress and message. After the form is submitted and if it is valid, the controller sends an e-mail, containing the form’s data, to the hotel e-mail adress and also saves the contact in the database.
Login, if he already has an account, or register, if not, to gain access to the members section
The design of this section can be see in Figure 2.18.
Figure 2.18 – Public/members section of the website (English version)
Members Section
The members section is where customers can download a PDF invoice for their bookings or cancel the bookings he made. To access the members section, custumers are required to register an account to uniquely identify them. To facilitate the registration and authentication process, in my application the members section supports not only the classic username and password mechanism but also the OAuth and OpenID protocols using the DotNetOpenAuth. Furthermore, users can authenticate using a Facebook, Twitter, Google or Microsoft account, and that means they don’t have to create a new profile.
In the members section, registered users can do the actions a anonymous user can do and, in addition to these, they also can:
Update their password (for local accounts)
Cancel bookings
Download a PDF invoice for each booking the’ve made
Cancel their account
Administrative Section
The purpose of the administrative section is to provide a place for the owner or for the administrator of the web site to configure the general web site settings and perform administrative actions, such as:
See all the bookings made and the contact form submitted
Approve or delete room reviews. When he decides to approve a review, the controller will change the boolean attribute approved to true, but when he wants to delete it, the controller will remove it from the database. A review can be also deleted later, even if it was approved.
CRUD (create, read, update, delete) rooms, room number and room photos. To implement these action I used AJAX and jQuery UI dialog. These methods are found in the Room Controller (the UML diagram from Figure 2.6 describe it’s structure, while Figure 2.13 shows how these methods are implemented).
Update the application database
Suspend or even cancel member accounts
Figure 2.19 – Administrative section of the website
2.5. Security
Authentication and Authorization
In a web application, the process of authentication refers to identifying who the user is, whereas authorization refers to determining what the user is allowed do. In addition to this, roles is another concept that used for identifing groups of users. Instead of assigning permissions to individual users, permissions are assigned to roles, and all users within the same role have the same permissions.
ASP.NET MVC is capable of working with different schemes of authentication. The two most relevant are Windows Authentication and Forms Authentication. In my web application I used the forms authentication. This type of autentification is suitable for Internet-facing applications where users identify themselves with a username and a password. Alternatively, users can authenticate using their third-party accounts (Facebook, Twitter, Google, etc.).
To enable Forms Authentication, I’ve added the following code to the Web.config file:
<authentication mode="Forms">
<forms loginUrl="~/Account/Login" timeout="2880" />
</authentication>
In the code above, the loginUrl tells ASP.NET where the login page is to redirect the user when a request is made to access a secured area and timeout specifies a limited lifetime for the Forms Authentication session (in seconds).
One of the most important aspects of securing an application is to allow access to certain sections in the application only to specific users (or groups of users). This can be achieved only after users have been authenticated. In order to allow only authenticated users to access a certain sections in the application, the developer needs to specify those sections with the [Authorize], which can be applied either to the whole controller or to a single action. After the controllers and action methods are set to require users to be authenticated to access them, an anonymous user will be redirected to the login page. After the user is properly authenticated on the page, the MVC framework will redirect them back to the original, intended destination. This is done using a parameter in the URL named ReturnUrl that instructs the login page where to go after the user is authenticated.
In my web application, the Admin, Room and ApproveReview controllers are secured, so that only the web site administrator can acces them.
Securing against external attacks
When users begin to use a web application, it becomes susceptible to attacks. Compromised browsers malicious users, accidental misuses, and other facts can expose vulnerabilities in the web application. Such vulnerabilities can be exploited, causing all kinds of problems. Therefore, I need to make sure that my web applications is as secure as possible by implementing security best practices. To help us to secure a web applications, MVC4 includes a few features that helped me to prevent the most common types of attacks. These types of attacks can exploit some vulnerabilities in the application such as cross-site request forgery (CSRF) and cross-site scripting (XSS).
Preventing Cross-site scripting (XSS)
Cross-site scripting is a vulnerability in web applications that allows a hacker to inject JavaScript code in form fields whose values are not validated properly. These values can be then either displayed immediately in a web page of the application or saved to the database, to be executed later in the application. As defined by The Open Web Application Security Project (OWASP), these two types of attacks are classified as „stored XSS” and „reflected XSS” . In my web application, users are allowed to send messages to pet owners. At this point, if a user tries to add HTML tags to the message, the user gets an error, as shown in Figure 2.20, which shows an attempt to inject JavaScript code in the comment field of the review form.
Figure 2.20 – Server Error on XSS attack attempt
Preventing Cross-site request forgery (CSRF)
Cross-site request forgery (known as CSRF or, sometimes, XSRF) is another type of external attack in which a logged-in user (or anyone that has been authenticated and for whom a security cookie/token has been issued) is tricked into going to a malicious web site where their credentials are used to perform an unauthorized action. The Open Web Application Security Project (OWASP) defines CSRF in the following way: „Cross-Site Request Forgery (CSRF) is an attack that tricks the victim into loading a page that contains a malicious request. It is malicious in the sense that it inherits the identity and privileges of the victim to perform an undesired function on the victim’s behalf, like change the victim’s e-mail address, password, or purchase something.”[1]
To prevent this type of attack, ASP.NET MVC 4 includes the [ValidateAntiForgeryToken] attribute, that must be added to the action method so that a security token is saved to a cookie. Additionally, I also need to modify the view to include an anti-forgery token field using the @Html.AntiForgeryToken() helper, which creates a hidden field with the same token saved in the cookie. When the form is submitted, the controller compares the value in the hidden field to the value in the cookie, and the request is only accepted if both of them match.The AntiForgeryToken creates an new hidden input, who usually looks like the following:
<input name="__RequestVerificationToken" type="hidden" value="dYvHLMRm4uakJpbyhQSg
dT5wpBoCn3dK8xok3ZQvIvakVQ3gPUb_LJ1KDs1IFQYh6OLR-QRAnRrmnaHPBmJqXhB L_txCPHtfDvGQ”>
More concrete, in the context of my web application, I’ve included the anti-forgery token to the Login(), Logout(), Manage() and Register() actions from the Account Controller; Book(), PostReview() and SubmitContact() of the Home Controller .
Figure 2.21 – Server Error on CSRF attempt
[1]Source: https://www.owasp.org/index.php/Cross-Site_Request_Forgery_(CSRF)
Prevent SQL Injection
SQL injection is an attack where an executable query is inserted or injected with the input data. The injected code will then gets executed with the application identity and hence causing the damage. For example, an attacker can take advantage of this vulnerability to delete my application’s database or tables very easily.
In my web application, I used parameterized queries and an ORM (in this case – Entity Framework) in order to prevent SQL Injection. Parameters are passed to the server outside the actual SQL statement, as part of the Remote Procedure Call (RPC) call to the server. Most ORMs use parameterized queries for performance reasones, so they are not vulnerable to SQL injection. SQL Injection is possible only if I create a SQL statement by concatenating string values. Furthermore, I used Language-Integrated Query (LINQ) to perform my database queries, which eliminates that kind of SQL injection risks for my web application.
Preventing Over-Posting Attacks
A malicious user can alter a form in a page to include more elements that the developer added. When this happens in a strongly typed view, then it is to modify values of objects represented by the view model. This type of attack is known as over-posting. Over-posting happens because the default model binder doesn’t know which fields you actually included in the form and will try to map all the values in the request to an object. To prevent this type of attack, I added an annotation to classes to allow binding only on the. The annotation can either to include certain fields in the binding or to exclude certain fields from the binding.
Model Binding example: [Bind(Include="Attribute")]
Preventing Open Redirection Attacks
The Open Redirection attact consists in redirecting a user to a different web site as a result of calling the Redirect() method in an action method. The big problem is that users can be taken to a web site that can be used to steal information from them, such as credit card numbers or passwords.
MVC 4 you can prevent these type of attacks by checking the destination address before allowing the redirection, whith the IsLocalUrl(string address) method that returns true if the address exists within the web site and returns false if it is an external address.
Preventing Spam Posts
A CAPTCHA (an acronym for “Completely Automated Public Turing test to tell Computers and Humans Apart") is a type of challenge-response test used in computing to determine whether or not the user is human.
I used captcha to prevent bots from filling in and submitting forms to the server. For using captcha I created a method, which provides to the Home Controller a string of characters containing 6 random characters and this string is also saved as session object.
Account Security
The table named „Userprofile” from the Account database saves the username of the account, while the „webpage_Membership” table stores the password for each account. Obviously, the passwords are not stored in plain text, they are hashed with the RFC 2898 algorithm using a 128-bit salt, a 256-bit subkey, and 1000 iterations. This type of key derivation function that is part of RSA Laboratories' Public-Key Cryptography Standards and it applies a pseudorandom function to the password along with a salt value and repeats the process many times to produce a derived key, which can then be used as a cryptographic key in subsequent operations. The added computational work makes password cracking much more difficult, and is known as key stretching.
The table from figure 2.22 shows how a password encryption looks and it also demonstrates that, even if the plain password is the same, the ecrypted password will never be the same.
Figure 2.22 – Password RFC 2898 hashing example
Authentifing with external sources
The ASP.NET MVC 4 also includes support for authentication using the Open Authentication protocol (OAuth). This functionality is based on the DotNetOpenAuth open source library and is used for enabling users to log in with thir Twitter, Facebook, Google, or Microsoft accounts in my web application. Providing the ability to authenticate users using these well-established services is great for my web applications (and for every web site) because:
Users don’t need to authenticate themselves again (separately) in my application.
Users therefore don’t need to remember a separate set of username/password details in order
to use my app (that means they’re more likely to use it)
Guarantees storing (and securing) the credentials for all these users in my application
Form Validation
As I already mentioned before, in a Web application form should be validated in two places: first in the client browser (client side validation), and other on in the server (server side validation). The main reason for validation a form also on the server side is that in the client browser JavaScript could not work properly or it can be disabled, meaning that the form can contain junk data when it is submitted by a user.
For validating my model elements I used the data annotation validation. The idea behind using data annotations is to add constraints metadata to the properties in the view model. This metadata is then picked up by the default binder when executing the model-binding process and is used to include additional validations to the data in the form fields. One of the major benefits of using data annotations is that a developer can create his/her own custom annotations. This allows them to reuse the validation logic in different view models. It also allows them to keep the validation logic in a centralized place, making it easier to maintain.
So, when the form „passes” the client-side validation, it is being checked by the controller if the ModelState is valid or not. If it’s not valid, the controller adds errors to the ModelState, else it process the form data.
2.6. SEO Implementation
Being a Hotel website, SEO implementation is vital for my web application, in order to be visited by more people who want to find accoumondation.Search Engine Optimization (SEO) is a tried and true method for increasing rankings, traffic, and sales. Search engines, such as Google, Yahoo, and Bing, have developed an impressive ability to deliver relevant search results to a user’s queries.In order increase the SEO for my website I performed the following practices:
1.) Indicating page titles by using title tags This is important, because a title tag tells both users and search engines what the topic of a particular page is, so I’ve create an unique title for each page of my site. The content of the title tag will usually appear in the first line of the results user's search query. This can help users recognize if the page is likely to be relevant to their search.
2.) Using the „description” meta tag. A page's description meta tag gives both search engines and users summary of what the page is about. Description meta tags are important because Google might use hem as snippets for the web pages of my web site. I created also a unique description meta tag for each web page.
3.) Using simple-to-understand URLs. The result of this is that it will convey content information easily and this could also lead to better crawling of your documents by search engines. As the URL’s contain relevant words, this provides users and search engines with more information about the page. In a search engine, the URL to a document is displayed as part of a search result in, below the document's title and snippet.
4.) Another good practice for making the website more SEO-friendly is make the site easier to navigate, because navigation is very important for search engines. So, it is very simple to navigate on my website, and I also created an XML Sitemap file for your site to ensure that search engines discover the pages on my web site. Because users will occasionally come to a page that doesn't exists, either by following a broken link or typing in the wrong URL, I’ve created a custom 404 page that kindly guides users back to a working page for improve a user's experience.
5.) Writing better anchor text. Anchor text is the clickable text that users will see as a result of a link, and is placed within the anchor tag <a href="…"></a>.This text tells users and Google something about the page I’m linking to. So the better your anchor text is, the easier it is for users to navigate and for Google to understand what the page I’m linking to is about. Therefore, I used descriptive text for anchor tags.
6.) Optimize images use. Image-related information can be provided for by using the "alt" attribute. In my web site, all images have a distinct filename and "alt" attribute, both of which. The "alt" attribute allows specifies alternative text for the image if it cannot be displayed for some reason and it provides information about the picture. Also, all images are stored in a single directory.
7.) Using heading tags appropriately. Heading tags are used to present structure on the page to users. So, I used heading tags in my web site onlt to emphasize important text, not for other reasons like making the text bigger or bolder.
8.) Using robots.txt file effective. A "robots.txt" file tells search engines whether they can access
and therefore I used these file to crawl a few parts of my site, like the administrative.
User-agent: *
Disallow: /Admin/
Disallow: /Account/
Sitemap: ../Sitemap.xml
My Robots.txt file content
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url><loc>http://localhost:50802/home/index</loc>
<changefreq>always</changefreq><priority>1</priority></url>
<url><loc>http://localhost:50802/Home/Photo</loc>
<changefreq>rare</changefreq></url>
<url><loc>http://localhost:50802/Home/Facilities</loc>
<changefreq>frequent</changefreq></url>
<url><loc>http://localhost:50802/Home/Rooms</loc>
<changefreq>frequent</changefreq></url>
<url><loc>http://localhost:50802/Home/RoomPhotos/</loc>
<changefreq>rare</changefreq></url>
<url><loc>http://localhost:50802/Home/RoomReviews/</loc>
<changefreq>always</changefreq></url>
<url><loc>http://localhost:50802/Home/Contact</loc>
<changefreq>never</changefreq></url>
</urlset>
Sitemap.xml
2.7. Bilingualism
Because many tourist looking for a accomodation can’t speak or understand Romanian, my web application is available in 2 languages: Roamian and English. In order to make it bilingual, I’ve implemented in the Web.asax file a method that initialize the romanian as default culture, if the culture was not already initialized and in the Home Controller a method that, when users click on language icon link, the controller changes the culture.
protected void Application_AcquireRequestState(object sender,EventArgs e)
{
if (HttpContext.Current.Session != null)
{
CultureInfo cultureInfo = (CultureInfo)this.Session["Culture"];
if (cultureInfo == null)
{
string langName = "ro";
if (HttpContext.Current.Request.UserLanguages != null && HttpContext.Current.Request.UserLanguages.Length != 0)
langName = HttpContext.Current.Request.UserLanguages[0].Substring(0, 2);
cultureInfo = new CultureInfo(langName);
this.Session["Culture"] = cultureInfo;
}
Thread.CurrentThread.CurrentUICulture = cultureInfo;
Thread.CurrentThread.CurrentCulture =
CultureInfo.CreateSpecificCulture(cultureInfo.Name);
}
Initializing culture if it was not already initialized
The source code above shows the method for initializing romanian as default culture and in the code below is the method for changing cultures.
public ActionResult ChangeCulture(string lang, string returnUrl)
{
Session["Culture"] = new CultureInfo(lang);
return Redirect(returnUrl);
}
Changing culture method from Home Controller
The translation is made either using the defined terms from the Shared.resx and Shared.en-gb.resx resource files (see Figure 2.23) or by rendering different views or different partial views, as shown in next page examples.
Figure 2.23-English(left) and Romanian(right) resource files
public ActionResult Facilities()
{
if (ViewRes.Shared.Language.Equals("EN"))
{
return View("Facilities_En");
}
return View("Facilities_Ro");
}
Controller Action that renders different views for each language
@if (@ViewRes.Shared.Language.Equals("EN"))
{
@Html.Partial("_RoomDetailsEn",(ClaseModel.Room)ViewBag.Camera)
}
else{
@Html.Partial("_RoomDetailRo",(ClaseModel.Room)ViewBag.Camera)
}
Rendering different partial views in a View (for each language)
Chapter 3 – Application Guide
3.1. Structure
As I mentioned also before, this chapter contains the guide of my app, called “Hotel Modran”. It is a responsive, bilingual (available in Romanian and English) hotel web site that allows tourist to login in their account, book rooms and download the invoice as PDF document, post reviews about the rooms, view photos and other information about the hotel and ask questions via the contact form. The application has three sections (a public one, one for registered users and the last one for the site administrator); access to each of which depends on the type of user. In my Web application, most of the informations are read from the database, and can be easily changed by the administrator using the implemented CRUD methods in admin section. Furthermore, other functionalities will be described later in this chapter. Also, the website is optimized for search engines.
The application has the following three sections, access to each of which depending on the type of user. There are 3 types of users: the administrator, registered members, and anonymous users (any user which is not logged in).
Administrative section: This section is accessible only to application administrator
Public section: This section is accessible to everyone (anonymous users) and displays photos and additional information about the hotel. In this section the users can also book rooms, post reviews and fill in an submit the contact form
Members section: This section is accessible to registered members and enables them to manage their bookings(they can cancel them or download the invoice)
I will describe now what each type of user can do and how can he do that, also by using photos, images and print-screens.
3.1.1. Public section
The public section of the web site is accessible to anyone and in this section every user can do the following actions: view facilities, offers and other informations about the hotel, see the hotel rooms, photos and reviews about them, book a room, write a review, submit contact form and login, if he already has an account, or register, if not, to gain access to the members section.
The menu in the public section contains 5 pages: Home, Photos, Facilities, Rooms and Contact (Figure 3.1). In the Home page of the public section, users can see and read informations about the hotel, as well as informations about new offers and discounts. In the form on the right side of the page users can fill in the booking form to book a room. All fields are required and the form will not be processed if it’s not properly filled in. If a user book with at least 120 days in advance, he gets a 10% price-discount and another 5% or 10% fidelity discount (but only if they’re registered). If there aren’t rooms available, the customer will be asked to change the dates or pick another room type.
Figure 3.1 – Home page (public section)
The Photo page of this section (second link on the navigation bar from Figure 3.1) includes a photo slideshow gallery. In this page users can see and navigat through hotel photos.
The third page – Facilities – contains informations about facilities that the hotel offer, including also specials offers and deals, such as Christmas & New Year’s Eve offers and early-booking discount (applies if a customer books with at least 120 days in advance).
In the Room page a user can see a few informations (such as bed types, prices and photos) about the rooms that our hotel has. There are also two links to other pages, Photos and Reviews. The Photos page contains a slideshow photo gallery and more details about that room (information about the facilities that room has, area, TV, bathroom, etc).
Figure 3.2 – Rooms page (public section)
In the Reviews page (Figure 3.3), users can post and see reviews. To post a review, a user must fill in the review form and the captcha properly (User, Title and Rating fields are required), otherwise it will not bee processed and the user will be asked to correct the errors.If a custumer wants to upload a photo, it’s size must not be bigger than 2 MB. On the right side of this page can be seen the reviews posted by customers and approved by the administrator. In order to appear on this page, a review must be approved by an administrator.
Figure 3.3– Rooms review page (public section)
The last page of this section contains a contact form and contact details (adress, map of hotel's location, telephone and fax number). If a user has any type of question or issue he can fill in and submit the contat form (all fields are required), and he will receive an answer soon on the e-mail adress he gave.
3.1.2. Membership section
To login or register, an anonymous user should acces the Login link situated in the top-right side of the public section (see Figure 3.1).
If a user already has an account he can then fill in the Username and Password field and then click on the Log in button or he can also log in with his Facebook or Twitter account. If a customer wants to create an account he can either click on the Register link and fill in the register form by choosing an username and a password or chose to login via Facebook or Twitter, and he will be asked to choose an username to be used for this web site.
Figure 3.4– User login/register page (public section)
Figure 3.5– Manage Bookings page (public section)
In the Manage booking page users can see all the bookings where check in date is bigger than the day they acces the page (Figure 3.5). In this page they can also cancel one or more bookings (by clicking on the red button), download a PDF invoice for each booking (by clicking on the green button) and change their account password.
3.1.3. Administrative section
To acces the login page for the administrative section (Figure 3.6), the administrator have to type the following link:
Then the administrator will be redirected to the page shown in Figure 3.6, where it has to fill in properly his username and password to log in into his account.
Figure 3.6– Administrative section login page
After he fills in those fields, he should then click on the Log in button and, if everything went ok, he will be redirected to the administrative section main page. This webpage shows all the bookings having the check in date bigger than the date this page is been acccesed (or at least equal). The administrative section menu contains the following elements: Bookings (Rezervări), Rooms (Camere), Reviews (Review-uri), Contact and Photos (Poze). Under this navigation menu it is a welcome message containg links for changing the password and logging off.
The Rooms page shows all rooms that are in the Hotel Database. The administrator can add new rooms and edit or delete the existing rooms (see Figure 3.8). Futhermore, he can also view, add and edit or delete room photos, room numbers and reviews by clicking on one of the links displayed on the same line as the room he wants to edit. If the admin clicks one of these links he will be redirected to another page, where he can do these operations.
Figure 3.7– Administrative section main page
Figure 3.8– Rooms page (administrative section)
In the third page of the section, Reviews, the administrator have the choice either to approve or delete a review submitted by an user. If he decides to approve it and clicks on the Approve button, then the review will appear on the Room Reviews page of the public section, otherwise it will be deleted forever from the hotel database.
Figure 3.9– Approve reviews page (administrative section)
The administrator have the posibility to view the messages or questions, submitted by users via the contact form, in the Contact page of the administrative section. When a user sends the contact form, then the form data will be sent to the hotel e-mail adress and it will be also saved in the hotel database. In this page it will be shown the messages from the database and the web site administrator can click on the Respond button, if he already reply the message from a user, in order to know if there are new unanswered queries.
In the last page of the section, Photos, the administrator can see, add and delete photos with the hotel, which will be shown in the Photos page of the public section (see Figure 3.10).
Figure 3.10– Photos page (administrative section)
3.2. Responsiveness
As I already mentioned before, my web site is responsive and it has 3 different layouts:
one for desktop computers and laptops (Figure 3.11) – for displays having at least a width of 801 pixels
one for tablets (Figure 3.12) – for displays with a width between 501 and 800 pixels
the last one for smartphones or other devices with small screens (Figure 3.13) – displays having the width smaller than 500 pixels
For making my web site responsive, I used CSS media rules and I created different CSS stylesheets for each layout.
Figure 3.11– Home page (desktop version)
Figure 3.12– Home page (tablet version)
Figure 3.13– Home page (smartphone version)
3.3. Usability
These usability rules were proposed by Ben Shneiderman and are a collection of principles that are derived heuristically from experience and applicable in most interactive systems, including web applications, after being properly refined, extended, and interpreted.
To improve the usability of an web application it is important to have a well designed interface, so I used the following usability rules:
1. Strive for consistency. Consistent sequences of actions are required in similar situations, and, considering that, I used identical terminology in prompts and menus, as well as consistent commands.
2. Enable frequent users to use shortcuts. As the frequency of use increases, so do the user's desires to reduce the number of interactions and to increase the pace of interaction. Therefore, I used abbreviations and macro facilities, because there are very helpful to an expert user.
3. Offer informative feedback. In my application, for every operator action, there is a system feedback. For frequent and minor actions, the response is, in a few cases, modest, while for infrequent and major actions, the response is substantial.
4. Design dialog to yield closure. The informative feedback at the completion of a group of actions gives the operators the satisfaction of accomplishment, a sense of relief, the signal to drop contingency plans and options from their minds, as well as an indication that the way is clear to prepare for the next group of actions, so, in my system, the sequences of actions are organized into groups with a beginning, middle, and end.
5. Offer simple error handling. As much as possible, I designed my application so the user cannot make a serious error. Anyway, if an error is made, the application is able to detect the error and offer simple, comprehensible mechanisms for handling that error.
6. Permit easy reversal of actions. This feature relieves anxiety, since the user knows that errors can be undone; it thus encourages exploration of unfamiliar options. In my case, the units of reversibility are either a single action, a data entry or a complete group of actions.
7. Support internal locus of control. My system is designed to make users the initiators of actions rather than the responders, so experienced operators strongly desire the sense that they are in charge of the system and that the system responds to their actions.
8. Reduce short-term memory load. Because of the limitation of human information processing in short-term memory, I kept the displays very simple, I consolidate multiple page displays and I reduced window-motion frequency.
3.4. Accessibility for people with visual disabilities
People with visual disabilities are individuals who are blind, have low vision, or have colour blindness. People who are blind need text equivalents for the images used on the Web page, because they and their assistive screen reader technology cannot obtain the information from the image. A person who has a visual disability will not find the mouse useful because it requires hand and eye coordination. Instead, this person must navigate the Web page using only the keyboard. For example, the Tab key is used to move the focus to the item that needs to be selected. A screen reader then announces the item so the user knows where the focus is on the page. The user then presses the Enter key instead of “clicking” the mouse button. Those who have low vision need the assistance of a hardware or software magnifier to enlarge the text beyond simple font enlargement. People who are colour blind or who have low vision benefit from good contrasting colours.
The Royal National Institute of Blind People (RNIP) from UK considers that „With the help of synthesised speech and Braille display technology, even completely blind people can use the Web”.
I designed my website to be accessible to a blind or visually impaired person. So, I implemented the following general principles applying for blind or visually impaired users, but are just as relevant to all groups:
I provided text equivalents for all non-text objects on the page, because speech synthesisers can’t read graphics, and graphic text can’t be enlarged in the same way as ordinary text.
All graphics from my website have text labels, i.e. alternative attributes in HTML (Hyper Text Mark-up Language).
My web application is not designed in a way that stops the user from setting their own browser preferences, i.e. I didn’t specify exact sizes for fonts or layouts – I desiged almost everything using relative sizes.
I used descriptive Titles for every page.
I also used valid HTML – many access programs depend on the use of standard HTML – e.g. some software can give an overview of the page by extracting all the headers and links and presenting them on a single page. If the web page has no headers and all links say ‘click here’ then the accessibility of your website will be very low.
Conclusions
In conclusion, I developed a secure, bilingual and responsive web application based on Web 2.0, using the newest technologies like HTML 5 and CSS 3 for visual part of the app, JavaScript, jQuery (and some related libraries) and AJAX (Asynchronous Java-Script and XML) for client-side scripting, ASP.NET MVC 4 for server-side and SQL Server for the database of the application. I chose this theme for my Bachelor thesis because the Internet is been much more popular during last years, as that today over 34% of Earth population are connected to the Internet and this number is growing fastly.
As much more people are using smartphones and tablets, I made my web site responsive. It has 3 layouts: one for PC's, another one for tablets and the last one for smartphones or for devices with small screens. My web application is secure, meaning that it is protected against most common internal or external attacks, like cross-site request forgery (CSRF), cross-site scripting (XSS), SQL Injection, overposting attacks and spam posting. Being a hotel website, my web application is bilingual, being disponible in both Romanian and English languages.
My web site is called “Hotel Modran” and is a web site that allows tourist to login in their account, book rooms and download the invoice as PDF document, post reviews about the rooms, view photos and other information about the hotel and ask questions via the contact form. The application has three sections(a public one, one for registered users and the last one for the site administrator); access to each of which depends on the type of user. Unlike many other hotel websites I’ve seen, in my Web most of the informations are read from the database, and can be easily changed by the administrator using the implemented CRUD methods in admin section, and the admin can also change the HTML code without having to edit the file. I’ve also added some invoative features to my web application, such as the following: custumers can get a discount if the’ve made at least one booking before or if they book with at least 120 days in advance. Furthermore, other functionalities are described in Chapter 3. Also, the website is optimized for search engines (for more informations about this see Chapter 2.6) and it is also accessible for people with visual disabilities (see Chapter 3.4)
Bibligraphy
[1] B. Lawson and R. Sharp – Introducing HTML 5 , second edition, 2012, New Riders publishing house, ISBN: 978-0-321-78442-1
[2] Castro and B. Hyslop – HTML5 And CSS3 Visual Quick Start Guide , 7th Edition, 2012, Peachpit Press publishing house, ISBN: 978-0-321-71961-4
[3] Z. Mickley Gillenwater – Stunning CSS3: A project-based guide to the latest in CSS, 2011, New Riders publishing house, ISBN: 978-0-321-72213-3
[4] S. Suehring – JavaScript Step by Step, Third Edition, 2013, O’Reilly Media publishing house, Inc., ISBN: 978-0-7356-6593-4
[5] D. Flanagan – JavaScript: The Definitive Guide, Sixth Edition, 2011, O’Reilly Media publishing house, Inc., ISBN: 978-0-596-80552-4
[6] J. Chaffer and K. Swedberg – Learning jQuery, Fourth Edition, 2013, Packt Publishing house,
ISBN 978-1-78216-314-5
[7] T. A. Powell – Ajax-The Complete Reference, 2008, The McGraw-Hill publishing house
[8] J. R. Guay Paz – Beginning ASP.NET MVC 4, 2013, APRESS publishing house, ISBN: 978-1-4302-5752-3
[9] A. Freeman – Pro ASP.NET MVC 4, 4th Edition, 2012, APRESS publishing house, ISBN: 978-1-4302-4236-9
[10] R. Elmansy – Teach Yourself Search Engine Optimization, 2013, John Wiley & Sons, Inc. publishing house, ISBN: 978-1-118-47066-4
[11] *** History of the web, http://webfoundation.org/about/vision/history-of-the-web/
Copyright Notice
© Licențiada.org respectă drepturile de proprietate intelectuală și așteaptă ca toți utilizatorii să facă același lucru. Dacă consideri că un conținut de pe site încalcă drepturile tale de autor, te rugăm să trimiți o notificare DMCA.
Acest articol: Specializarea Informatică aplicată în lb.germană [311381] (ID: 311381)
Dacă considerați că acest conținut vă încalcă drepturile de autor, vă rugăm să depuneți o cerere pe pagina noastră Copyright Takedown.