Web_basics.pdf

Bicol University COLLEGE OF SCIENCE DEPARTMENT OF COMPUTER SCIENCE & INFORMATION TECHNOLOGY TOPIC: WEB APPLICATION BASICS This module explains some common web application terms and procedures used in the field or industry that you usually enco...

Bicol University COLLEGE OF SCIENCE DEPARTMENT OF COMPUTER SCIENCE & INFORMATION TECHNOLOGY TOPIC: WEB APPLICATION BASICS This module explains some common web application terms and procedures used in the field or industry that you usually encounter or have read. These key terms should be understood well so that you can meaningfully draw information from what you read. This lesson might be a superfluity to you but it pays to read it nonetheless. Your mastery of the terms (concepts) and procedures will enable you to have a functional command of web development principles, concepts and application that might be useful to you in your workplace, even in your daily life. At the end of this lesson, you are expected to: 1. Elaborate the basic concept of a web application. 2. Define and explain the common Internet terminologies. 3. Compare and contrast the different types of web application architectures. 4. Classify web development tools as either a client-side or server side. 5. Enumerate the characteristics of dynamic website and static website. TRY TO THINK In computing, a web application or web app is a client–server software application in which the client (or user interface) runs in a web browser. In another word, A Web application (Web app) is an application program that is stored on a remote server and delivered over the Internet through a browser interface. Simply put, Web Applications are dynamic web sites combined with server-side programming which provide functionalities such as interacting with users, connecting to back-end databases, and generating results to browsers. Some examples of web application are Online Banking, Social Networking, Online Reservations, eCommerce / Shopping Cart Applications, Interactive Games, Online Training, Online Polls, Blogs, Online Forums, Content Management Systems, etc. DISCUSSION Internet Terminologies The Internet is a worldwide network of computers that are connected (networked) and are using the communication method called TCP/IP. The Internet was named ARPANET in 1969 by the Advanced Research Projects Agency of the U.S. Department of Defense with just four computers connected together. a. World Wide Web - Also called web or www, it is a collection of information, resources, pictures, and sounds, multimedia on the internet that are linked and connected together. Using a software product such as Netscape makes accessing and linking to web pages containing information, easy. The World Wide Web was invented by Tim Bernes-lee in the CERN Laboratory in March 1989. b. Host - A computer that is used to transfer data on the Internet. c. Domain name - To store and make web pages available and ready for inquiries, or a computer that has a consistent connection to the Internet. e.g. www.google.com. d. DNS - DNS (Domain Name System) is a large database of domain names and their correspondent Internet (IP Addresses) for example: www.widget.com corresponds to its unique number 207.168.6.12. Page 1 of 7  Bicol University COLLEGE OF SCIENCE DEPARTMENT OF COMPUTER SCIENCE & INFORMATION TECHNOLOGY Request and response model Request–response, or request–reply, is one of the basic methods computers use to communicate with each other, in which the first computer sends a request for some data and the second computer responds to the request. Usually, there is a series of such interchanges until the complete message is sent; browsing a web page is an example of request–response communication. Request–response can be seen as a telephone call, in which someone is called and they answer the call. Request–response is a message exchange pattern in which a requestor sends a request message to a replier system which receives and processes the request, ultimately returning a message in response. This is a simple, but powerful messaging pattern which allows two applications to have a two-way conversation with one another over a channel. This pattern is especially common in client–server architectures. a. HTTP The Hypertext Transfer Protocol (HTTP) is an application protocol for distributed, collaborative, hypermedia information systems. HTTP is the foundation of data communication for the World Wide Web. Hypertext is structured text that uses logical links (hyperlinks) between nodes containing text. b. HTTP methods The primary or most-commonly-used HTTP verbs (or methods, as they are properly called) are POST, GET, PUT, and DELETE. These correspond to create, read, update, and delete (or CRUD) operations, respectively. There are a number of other verbs, too, but are utilized less frequently. Web Servers Web servers are computers that deliver (serves up) Web pages. Every Web server has an IP address and possibly a domain name. For example, if you enter the URL http://www.webopedia.com/index.html in your browser, this sends a request to the Web server whose domain name is webopedia.com. The server then fetches the page named index.html and sends it to your browser. The process is an example of the client/server model. All computers that host Web sites must have Web server programs. Leading Web servers include: a) Apache (the most widely-installed Web server) b) Microsoft's Internet Information Server (IIS) c) nginx (pronounced engine X) from NGNIX d) Novell's NetWare server e) Google Web Server (GWS) f) IBM's family of Domino servers. Any computer can be turned into a Web server by installing server software and connecting the machine to the Internet. There are many Web server software applications, including public domain software and commercial packages. Page 2 of 7  Bicol University COLLEGE OF SCIENCE DEPARTMENT OF COMPUTER SCIENCE & INFORMATION TECHNOLOGY Web Application Architectures A Web application is an application that can be accessed by the users through a Web browser or a specialized user agent. The browser creates HTTP requests for specific URLs that map to resources on a Web server. The server renders and returns HTML pages to the client, which the browser can display. The core of a Web application is its server-side logic. The application can contain several distinct layers. The typical example is a three-layered architecture comprised of presentation, business, and data layers. Figure 1 illustrates a typical Web application architecture with common components grouped by different areas of concern. Figure 1 The typical structure of a Web application The figure above shows the typical structure of a web application. The presentation layer usually includes UI and presentation logic components; the business layer usually includes business logic, business workflow and business entities components, and optionally a façade; and the data layer usually includes data access and service agent components. Tiers represent the physical separation of the presentation, business, services, and data functionality of your design across separate computers and systems. Common tiered design patterns are two-tier, three-tier, and n-tier. The following sections explore each of these scenarios. Page 3 of 7  Bicol University COLLEGE OF SCIENCE DEPARTMENT OF COMPUTER SCIENCE & INFORMATION TECHNOLOGY a. 2-tier architecture The two-tier pattern represents a basic structure with two main components, a client and a server. In this scenario, the client and server may exist on the same machine, or may be located on two different machines. Figure 2 illustrates a common Web application scenario where the client interacts with a Web server located in the client tier. This tier contains the presentation layer logic and any required business layer logic. The Web application communicates with a separate machine that hosts the database tier, which contains the data layer logic. Figure 2 The two-tier deployment pattern b. 3-tier architecture In a three-tier design, the client interacts with application software deployed on a separate server, and the application server interacts with a database that is also located on a separate server. This is a very common pattern for most Web applications and Web services. Figure 3 illustrates the three-tier deployment pattern. Figure 3. The three-tier deployment pattern c. N-tier architecture In this scenario, the Web server (which contains the presentation layer logic) is physically separated from the application server that implements the business logic. This usually occurs for security reasons, where the Web server is deployed within a perimeter network and accesses the application server located on a different subnet through a firewall. It is also common to implement a firewall between the client and the Web tier. Figure 4 illustrates the n-tier deployment pattern. Figure 4. The n-tier deployment pattern Page 4 of 7  Bicol University COLLEGE OF SCIENCE DEPARTMENT OF COMPUTER SCIENCE & INFORMATION TECHNOLOGY Dynamic and static web sites A dynamic website is a website that not only uses HTML and CSS, but includes website scripting as well. There are two main reasons why you’d want to use website scripting on your site: 1. you want an interactive web app that people can use, not just read 2. you want to be able to share HTML code between your pages. A static website is the simplest kind of website you can build. Static websites are written in HTML and CSS only, with no scripting. The only form of interactivity on a static website is hyperlinks. If you intend your website to be a small one (3 pages or less), then a static website might be the easiest way to go. But if you want to share elements between pages (such as logos or menus), you’ll have to duplicate the HTML on each page. Static websites are easier to make than dynamic websites, because they require less coding and technical knowledge. However, fully static websites are very uncommon these days, since there is so much that scripting can do. a. Advantages of static web sites Quick to develop Cheap to develop Cheap to host b. Disadvantages of static web sites Requires web development expertise to update site Site not as useful for the user Content can get stagnant c. Advantages of dynamic web sites Much more functional website Much easier to update New content brings people back to the site and helps in the search engines Can work as a system to allow staff or users to collaborate d. Disadvantages of dynamic web sites Slower / more expensive to develop Hosting costs a little more Client-side and server-side scripting languages There are two main categories of coding, scripting and programming for creating Web Applications: Page 5 of 7  Bicol University COLLEGE OF SCIENCE DEPARTMENT OF COMPUTER SCIENCE & INFORMATION TECHNOLOGY a. Client-Side Scripting / Coding - Client-Side Scripting is the type of code that is executed or interpreted by browsers. Client-Side Scripting is generally viewable by any visitor to a site (from the view menu click on "View Source" to view the source code). Below are some common Client-Side Scripting technologies: HTML (HyperText Markup Language) CSS (Cascading Style Sheets) JavaScript Ajax (Asynchronous JavaScript and XML) jQuery (JavaScript Framework Library - commonly used in Ajax development) MooTools (JavaScript Framework Library - commonly used in Ajax development) Dojo Toolkit (JavaScript Framework Library - commonly used in Ajax development) b. Server-Side Scripting / Coding - Server-Side Scripting is the type of code that is executed or interpreted by the web server. Server-Side Scripting is not viewable or accessible by any visitor or general public. Below are the common Server-Side Scripting technologies: PHP (very common Server-Side Scripting language - Linux / Unix based Open Source - free redistribution, usually combines with MySQL database) Zend Framework (PHP's Object-Oriented Web Application Framework) ASP (Microsoft Web Server (IIS) Scripting language) ASP.NET (Microsoft's Web Application Framework - successor of ASP) ColdFusion (Adobe's Web Application Framework) Ruby on Rails (Ruby programming's Web Application Framework – free redistribution) Perl (general purpose high-level programming language and Server-Side Scripting Language - free redistribution - lost its popularity to PHP) Python (general purpose high-level programming language and Server-Side Scripting language - free redistribution) Emerging trends in web applications Recent advancement in technology and new development tools for web developers. Motion UI New Challenges for Responsive Design The rise of Node.js Foundation for Apps Web UI components Web API New JavaScript features The rise of Instagram The Internet of Things (IoT) Page 6 of 7  Bicol University COLLEGE OF SCIENCE DEPARTMENT OF COMPUTER SCIENCE & INFORMATION TECHNOLOGY SUMMARY Web applications have become part of our daily lives in various aspects such as education, business and social media. It has greatly evolved over the years with respect to technologies used to develop such applications. Web applications has become a fundamental approach of businesses in leveraging their online presence and be able reach wide range of market. However, from a technical point of view, a web application requires diverse knowledge on web application architectures, development tools, security protocols and most importantly keeping abreast of the ever-changing requirements of the customers and stakeholders. Note: Your lesson assignment and exercise will be posted separately in the course site. Page 7 of 7