Elements of web-based applications

- [Instructor] A web application is built using HTML and script code running on a web server that offers an HTTP or HTTPS protocol access, the more recent WS and WSS web socket protocols, or the experimental QUIC protocol. It will likely use a back-end database server or some form of flat file for content. The user will connect to the application from a browser which my be running on a desktop, a laptop, or a mobile device. The web application may want to authenticate the user and to do that use some form of back-end authentication system such as LDAP. It's good practice not to expose a web application server directly to the Internet, and so a web proxy will be placed between the user and the web application. The proxy server takes user requests and sends them to the web application and takes web application responses and returns them to the user. A web proxy is designed to be secure and is a much safer Internet-facing system than a full web server. There are two types of proxy server, a forward proxy and a reverse proxy. A forward proxy acts as a means of enabling an Internet user to connect through the corporate perimeter out to an external Internet server. And enables the proxy to monitor for data loss as well as blacklisting dangerous Internet sites. A reverse proxy acts as a means of controlling external Internet users connecting in through the corporate perimeter to an internal web server, and allows incoming traffic to be monitored for malicious content such as SQL injection, or support load sharing to an internal website farm. Early web applications tended to be mainly written on the server side with forms being used to request data. Nowadays much of the code is client-side, often supported with client-side data stores. There are many tools to choose from in order to develop web applications. The Mozilla Developer Network suggests using the Ember tools and what's known as a model-view-controller, or MVC architecture. This is one in which the application is split into three parts, the model, the view, and the controller. The model defines the data structure, and uses back-end systems such as SQLite. The view is the user interface implemented perhaps with HTML, CSS, and JavaScript. And the controller, the business logic, built perhaps with HTML and JavaScript. The Ember framework is used to create the three components and to integrate the libraries needed to support the generated web application. It also creates a standard directory structure to support the source code for the application, the built application to be distributed, and a public directory for fonts and images. AngularJS is another framework that can be used with similar characteristics to Ember.js. And Microsoft offers ASP.NET MVC. A simple deployment approach is to have three components on one platform linked to a database on a separate platform. An alternative would be to have the view component on its own server. The model and the controller are on a second platform supported with a database server on a third platform. As a tester you'll likely come across both deployment approaches. Sometimes a fourth component or layer is used. This is the service layer, and it's used to manage the interaction of the web application and other services and to exchange data using messages. SOAP and REST are two protocols often used at the service layer. REST is the representational state transfer protocol, and has a limited set of operations which apply to resources represented and addressable by URIs, HTTP addresses. REST is suited to services that can be accessed by unknown users and is implemented using JavaScript Object Notation, JSON, or similar message formats through HTTP GET and PUT calls. SOAP is the Simple Object Access Protocol and is much better suited to implementing procedural interactions such as the interface between layers of an application. SOAP isn't restricted to HTTP and provides basic messaging commonly using RPC to exchange calls and responses over networks using XML formatted messages. While MVC typically enforces a standardized folder structure specific to the framework, the folder structures for simple web applications are more ad hoc. However they'll often be four common folders. An images folder is used to hold all images for the application and any images the C use has data within the application such as profile pictures which were uploaded. A styles folder for CSS files. A classes folder for all classes used in the application. These classes group together like functions. An includes folder for those files which are included in the application source such as constant definitions.