combinepdf.pdf

8 DHTML and Introduction to JavaScripts Lesson Introduction Now you have learned about CSS and their applications. During this week student will learn the concept of Dynamic HTML and applications of Dynamic HTML in web sites. The learners will be able to apply dynamic behaviors for...

8 DHTML and Introduction to JavaScripts Lesson Introduction Now you have learned about CSS and their applications. During this week student will learn the concept of Dynamic HTML and applications of Dynamic HTML in web sites. The learners will be able to apply dynamic behaviors for the web interfaces and write basic scripts to improve the appearance. The learner will be able to learn the script-programing concept with JavaScript. Learning Outcomes: After completion of this lesson, the learner will be able to design webpages with basic dynamic behaviors and inline scripts by using inbuilt in JavaScript functions. This lesson enables you to Describe dynamic behaviors of web interfaces Use dynamic html elements Identify the application of JavaScripts Write inline JavaScript using inbuilt functions Write inline JavaScripts to display text with calculations Write JavaScripts with html elements and attributes Lesson Outline What is DHTML? Inbuilt dynamic HTML elements Scripts and light weight interpreted programs How web scripts work? What is Javascripts? Client side programing Inline JavaScript sintax Basic functions and their usage Wrtite procedures with JavaScripts Variables, data types and calculations Buttons and Functions 8.1 What is DHTML? Up to the previous lesson, you learned about static web content designing. However, static web does not attract the audience. Dynamic behavior of web interfaces is categorized into two parts called server-side dynamic web interfaces and client-side dynamic web interfaces. Here we learn about client-side dynamic web interfaces. Dynamic behaviors such as displaying system time, verification of user inputs, user environment scanning etc., are done using client side scripts. A client-side dynamic webpage processes the web page using HTML script running in the browser as it loads. The way HTML page loads is determined by the JavaScript and other scripting languages, so outcome of HTML page is differ according to the Script. Dynamic HTML or DHTML is a collective term for a combination of Hypertext Markup Language (HTML) tags and options use collection of technologies together to create user interactive and animated web pages, that can make Web pages more animated and interactive. Much of dynamic HTML is specified in HTML 4.0. Simple examples of dynamic HTML capabilities include having the color of a text heading change when a user passes a mouse over it and allowing a user to "drag and drop" an image to another place on a Web page. Dynamic HTML can allow Web documents to look and act like desktop applications or multimedia productions. IT uses combination of static markup language (eg: HTML), client-side scripting language (Eg: JavaScript), presentation definition language (eg: CSS) and Document Object Model (DOM). 8.2 Inbuilt dynamic HTML elements When writing dynamic pages, there are several HTML elements use for dynamic output. 8.2.1 Changing the HTML Output Stream In JavaScript, document.write() can be used to write directly to the HTML output stream  Here document.write(Date()) prints current date dynamically document.write(Date()); Activity 8.1: Create the above web script and observe the output. 8.2.2 Changing HTML Content The easiest way to modify the content of an HTML element is by using the innerHTML property. To change the content of an HTML element, use this syntax document.getElementById(id).innerHTML = new HTML Here “Hello World!” has been replaced with “New text!” Hello World! document.getElementById("p1").innerHTML = "New text!"; Activity 8.2: Create the above web script and observe the output.  Here “Old Heading” has been replaced with “New Heading” Old Heading var element = document.getElementById("id01"); element.innerHTML = "New Heading"; Activity 8.3: Create the above web script and observe the output. 8.2.3 Changing the Value of an Attribute To change the value of an HTML attribute, use this syntax document.getElementById(id).attribute = new value This example changes the value of the src attribute of an element Here src attribute of myImage “smiley.gif” has been replaced with “landscape.jpg” document.getElementById("myImage").src = "landscape.jpg"; Activity 8.4: Create the above web script and observe the output. Provide an image appropriately. 8.3 Scripts and light weight interpreted programs A scripting or script language is a programming language that supports scripts: programs written for a special run-time environment that automate the execution of tasks that could alternatively be executed one-by-one by a human operator. Scripting languages are often interpreted (rather than compiled). An interpreted language is a type of programming language for which most of its implementations execute instructions directly and freely, without previously compiling a program into machine-language instructions. The interpreter executes the program directly, translating each statement into a sequence of one or more subroutines already compiled into machine code. 8.4 How web scripts work? Scripts are invisible to the visitor's eye but their availability within the code of a website defines how the website behaves in response to certain click requests sent by the user. Apart from the World Wide Web, scripts are also used for the automation of processes on a local computer. Each script represents a text document containing a list of instructions that need to be executed by a certain program or scripting manager so that the desired automated action could be achieved. This will prevent users from having to go through many complicated steps in order to reach certain results while browsing a website or working on their personal computers. The text nature of the scripts allows them to be opened and edited with the help of a basic text editor 8.5 What is Javascripts? JavaScript is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and many more. JavaScript allows you to implement complex things on web pages. Every time a web page does more than just sit there and display static information for you to look at displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video probably consist with JavaScript. 8.6 Client side programing Client-side scripting languages are scripts, which are executed in the client's browser (in the web users’ machine). The important thing about such scripts is that their source code is visible to the web users if they wish to see it. Users simply have to use the "View source" function of their web browser. This has helped a lot of novice programmers in their first steps and is a great way to learn the basics of client-side scripting including JavaScript. 8.7 Inline JavaScript syntax Inline JavaScript mean java script file is embedded on the HTML page (inside head or body) instead of external.js file. A script tag without a src (ie. with code directly in the HTML document) attribute is referred to as an inline script. In the following example, an onclick="..." attribute is called an inline event handler 8.7.1 Inline JavaScript embedded in Here is the JavaScript embedded in Head tag function myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed."; } Here “onclick” event call the “myFunction()” method in the JavaScript embedded in head tag A Web Page A Paragraph Try it Activity 8.5: Create the above web script and observe the output. 8.7.2 Inline JavaScript embedded in Here “onclick” event call the “myFunction()” method in the JavaScript embedded in body tag A Web Page A Paragraph Try it function myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed."; } Here is the JavaScript embedded in body tag Activity 8.6: Create the above web script and observe the output. 8.8 Basic functions and their usage A JavaScript function is defined with the function keyword, followed by a name, followed by parentheses (). Function names can contain letters, digits, underscores, and dollar signs (same rules as variables). The parentheses may include parameter names separated by commas: (parameter1, parameter2,...) The code to be executed, by the function, is placed inside curly brackets: {} function name(parameter1, parameter2, parameter3) { code to be executed }  function myFunction(p1, p2) { return p1 * p2; // The function returns the product of p1 and p2 } Example: JavaScript Functions This example calls a function which performs a calculation, and returns the result: JavaScript function, which returns product of p1 and p2 function myFunction(p1, p2) { return p1 * p2; } document.getElementById("demo").innerHTML = myFunction(4, 3); JavaScript function call with parameters 4 and 3 Activity 8.7: Create the above web script and observe the output. 8.9 Write procedures with JavaScripts A “procedure” is a term used in a variety of programming to define a series of steps, taken together, to achieve a consistent result, in this case process outputs. A simple process may be described by a single procedure. But a more complex process, like the Revenue Process, will have multiple procedures. Example (Real World): Procedure for make a tea (Step by step) 1. Pick your tea. This is by far the most important step to making perfect British tea.... 2. Boil the water.... 3. Get your tea or tea bags ready in the pot or mugs.... 4. Pour boiling water over the teabag, and stir briefly.... 5. Wait a few seconds... 6. Remove the teabag.... 7. Add milk and sugar to taste.... 8. Enjoy your tea Example (Programming): Assume that you want to add two numbers 10 and 20 and display the answer Here is the procedure to do the task. 1. Declare a variable “x” to hold 10 2. Declare a variable “y” to hold 20 3. Declare a variable “ans” to hold the addition of x and y 4. Assign the addition of “x” and “y” to “ans” 5. Display the answer. JavaScript Procedures This example guide you step by step procedure: var x=10;// step 1 var y=20;// step 2 var ans;// step 3 ans=x+y;// step 4 document.getElementById("demo").innerHTML = "Addtion of x and y is "+ans;//step 5  Activity 8.8: Create the above web script and observe the output. 8.10 Variables, data types and calculations JavaScript variables can hold many data types: numbers, strings, objects and more: var length = 16; // Number var lastName = "Saman"; // String var x = {firstName:"Saman", lastName:"Withanage"}; // Object these are some data types: Boolean Number String Object 8.10.1Boolean Pretty standard across all languages, booleans are true and false. They're often used for conditional statements. var raining = false; if(raining) { bringUmbrella(); } 8.10.2 Number The number data type covers integers and floats. That is, the number type can handle normal numbers (1, 2, 3, 4), but also negative numbers and decimal places. This is different from many languages that have multiple data types to support different numbers.  var num = 1; typeof num; // number var num = -2; typeof num; // number var num = 0.3; typeof num; // number 8.10.3 String As in most languages, JS strings are groupings of characters. "hello world"; "I like cats"; 'Testing "quotes'; I don’t think they're particularly interesting, but they are remarkably powerful. The main way we communicate with our users is the written word and string makes this possible. 8.10.4 Object Everything in JS that we didn’t discuss above is an Object. So objects are the most complex data type. They typically look like this: var cat = { sound: "meow" }; var fluffy = new Cat(); var whiskers = new function() { this.sound = "meow"; } But notice that we haven’t mentioned Array, Date, or even function that’s because, officially, they're all of type object 8.10.5 The Concept of Data Types In programming, data types are an important concept. To be able to operate on variables, it is important to know about the type. Without data types, a computer cannot safely solve this: var x = 16 + "Volvo"; Does it make any sense to add "Volvo" to sixteen? Will it produce an error or will it produce a result? JavaScript will treat the example above as: var x = "16" + "Volvo"; When adding a number and a string, JavaScript will treat the number as a string. Example: var x = 16 + "Volvo"; Try it Yourself » (click the text) Example var x = "Volvo" + 16; Try it Yourself » (Click the text) JavaScript evaluates expressions from left to right. Different sequences can produce different results: JavaScript: var x = 16 + 4 + "Volvo"; Result: 20Volvo Try it Yourself » (Click the text) JavaScript: var x = "Volvo" + 16 + 4; Result: Volvo164 Try it Yourself » (Click the text) In the first example, JavaScript treats 16 and 4 as numbers, until it reaches "Volvo". In the second example, since the first operand is a string, all operands are treated as strings. 8.10.6 JavaScript Types are Dynamic. JavaScript has dynamic types. This means that the same variable can be used to hold different data types: Example var x; // Now x is undefined x = 5; // Now x is a Number x = "John"; // Now x is a String Try it yourself » (Click the text) 8.10.7 JavaScript Strings A string (or a text string) is a series of characters like "John Doe". Strings are written with quotes. You can use single or double quotes: 8.10.8 Example var carName = "Volvo XC60"; // Using double quotes var carName = 'Volvo XC60'; // Using single quotes Try it yourself » (Click the text) You can use quotes inside a string, as long as they don't match the quotes surrounding the string: Example var answer = "It's alright"; // Single quote inside double quotes var answer = "He is called 'Gamini'"; // Single quotes inside double quotes var answer = 'He is called "Gamini"'; // Double quotes inside single quotes Try it yourself » (Click the text) 8.10.9 JavaScript Numbers JavaScript has only one type of numbers. Numbers can be written with, or without decimals: Example var x1 = 34.00; // Written with decimals var x2 = 34; // Written without decimals Try it yourself » (Click the text) Extra large or extra small numbers can be written with scientific (exponential) notation: Example var y = 123e5; // 12300000 var z = 123e-5; // 0.00123 Try it yourself » (Click the text) 8.10.10 JavaScript Booleans Booleans can only have two values: true or false. Example var x = 5; var y = 5; var z = 6; (x == y) // Returns true (x == z) // Returns false 8.11 Buttons and Functions A JavaScript can be executed when an event occurs, like when a user clicks on an HTML element. To execute code when a user clicks on an element, add JavaScript code to an HTML event attribute onclick=JavaScript Here this “onclick” event replace the text “Click on this text!” with “Ooops!” Click on this text! Not try the above example with function call. Use following code segment.  Here this “onclick” event call the changeText(id) function with it’s ID Click on this text! function changeText(id) { This JavaScript function change id.innerHTML = "Ooops!"; the text of the HTML to “Ooops!” } Activity 8.9: Create the above web script and observe the output.  9 JavaScript Programming Concepts Lesson Introduction Previous lesson, you have leaned about the use of client side script and how to write various client side scripts by using JavaScript. During this week you will learn the JavaScript programing structures. Here, you will be able to write codes including conditional statements, selection statements and functions with parameters. You will be able to learn main programming constructs behind JavaScript with examples. Learning Outcomes: After completion of this lesson, the learner will be able to apply programing structures into JavaScript programs. This lesson enables you to  Write programs with conditional statements  Write programs with Select statements  Functions and passing parameters  Write JavaScript with Input popups Lesson Outline  Conditional statements o IF … ELSE o Nested Structures o Ternary Operators  Multiple options and selections statements o Switch  Basic Input of data  Data Type Conversions  Functions with parameters  Iterative functions 8.1 Conditional statements Very often when you write code, you want to perform different actions for different decisions or situations. These operations are enabled in JavaScript through the conditional statements. In JavaScript, we have following types of conditional statements:  Use if to specify a block of code to be executed, if a specified condition is true  Use else to specify a block of code to be executed, if the same condition is false  Use else if to specify a new condition to test, if the first condition is false  Use switch to specify many alternative blocks of code to be executed 8.1.1 IF … Use if statement to specify a block of JavaScript code to be executed if a condition is true. if (condition) { block of code to be executed if the condition is true } if (hour < 18) { greeting = "Good day"; } Example: Conditional Display "Good day!" if the hour is less than 18:00: statement, if current Good Evening! hour less than 18, “Good Evening!” if (new Date().getHours() < 18) { document.getElementById("demo").innerHTML = "Good day!"; } Activity 9.1: Write above web script and observe the output. Then understand the behavior of IF condition. 8.1.2 IF … ELSE Use the else statement to specify a block of code to be executed if the condition is false. else block executes when the given condition is false. if (condition) { block of code to be executed if the condition is true } else { block of code to be executed if the condition is false } if (hour < 18) { greeting = "Good day"; } else { greeting = "Good evening"; } Example: Here button onclick Click the button to display a time-based greeting: event call the “myFunction” Try it This “myFunction” is the function name function myFunction() { var hour = new Date().getHours(); var greeting; IF hour Click "Try it". Wait 3 seconds, and the page will alert "Hello". Try it function myFunction() { alert('Hello'); } Activity 11.3: Write above web script and observe the output with button click event. Then understand the time control function setTimeout(). To stop the execution of function specified in setTimeout(). window.clearTimeout() function can be written without the window prefix. The clearTimeout() function uses the variable returned from setTimeout(). myVar = setTimeout(function, milliseconds); clearTimeout(myVar); If the function has not already been executed, we can stop the execution by calling the clearTimeout() function. The following example uses both setTimeout() and clearTimeout() functions to execute and stop. Click "Try it". Wait 3 seconds. The page will alert "Hello". Click "Stop" to prevent the first function to execute. (You must click "Stop" before the 3 seconds are up.) Try it Stop it function myFunction() { alert("Hello"); } Activity 11.4: Write above web script and observe the output with button click event. Then understand the time control function clearTimeout(). 11.3.2 The setInterval() function The setInterval() method repeats a given function at every given time-interval. window.setInterval(function, milliseconds); window.setInterval() function can be written without the window prefix. First parameter is a JavaScript function to be executed. Second parameter indicates the length of time-interval between each execution. Following example shows the execution of a function called “myTimer” once every second. Example: Display the current time. A script on this page starts this clock: var myVar = setInterval(myTimer, 1000); function myTimer() { var d = new Date(); document.getElementById("demo").innerHTML = d.toLocaleTimeString(); } Activity 11.4: Write above web script and observe the output with time control event. Then understand the time control function setInterval(). To stop the execution of function specified in setInterval(). window.clearTimeout() function can be written without the window prefix. The clearTimeout() function uses the variable returned from setInterval(). myVar = setInterval(function, milliseconds); clearTimeout(myVar); The setInterval() function can be used to change the web content dynamically and periodically. This is a very good event to change the appearance of web pages. The following example shows with an added “Stop Time” button.  A script on this page starts this clock: Stop Time var myVar = setInterval(myTimer ,1000); function myTimer() { var d = new Date(); document.getElementById("demo").innerHTML = d.toLocaleTimeString(); } Activity 11.5 Create following HTML form with JavaScript to display employee name and net salary. Upload your web script to the given link in the moodle. Note: Net Salary = (Working Hours*250) – (Working Hours*250*0.08) 11.4 Introduction to JQuery library jQuery is JavaScript Library(Framework). It simplified usage of JavaScript. It has a bunch of inbuilt functionalities on call. Some of those functionalities are: 1. Access parts of a page Some cases using CSS 2. Modify the appearance of a page 3. Alter the content of a page 4. Change the user’s interaction with a page 5. Add animation to a page 6. Provide AJAX support It is a lightweight “write less, do more” JavaScript library. The purpose of jQuery is to make it easier to use JavaScript on our web site. jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish and wraps them into functions that we can call with a single line of code, where it enhances the reusability of code. jQuery library contains following features: 1. HTML element selections 2. HTML element manipulation 3. CSS manipulation and HTML event functions 4. JavaScript effects and animations 5. HTML DOM traversal and modification 6. AJAX 7. Utilities 11.5 Use of Jquery Library There are two ways to start using jQuery on our web site. They are Ø Download the jQuery library from jQuery.com Ø Include jQery from Content Delivery Network (CDN), like Google Downloading jQuery There are two versions of jQuery available for downloading. 1. Production version It is for live web sites because it has been minified compressed. 2. Development version This is for testing and development. It has been uncompressed and readable code. Both versions can be downloaded from - http://jquery.com The jQuery library is single JavaScript file. It is linked with tag inside the section of HTML code. Example is given below. The downloaded jQuery library file should be placed inside the same directory of other html files, otherwise the page cannot load the library. jQuery CDN We can use the CDN to reference jQuery library, instead of downloading it. You can find the latest version of jQuery in Google's or Microsoft’s Hosted Libraries. To load a hosted library, copy and paste the HTML snippet for that library from the official website in your web page. Google CDN is shown in the following code snippet (versions can be changed time to time): Microsoft CDN is shown in the following example: By comparing a simple "Hello World!" program in both JavaScript and jQuery, we can see how jQuery differ from JavaScript. JavaScript Program: document.getElementById("Test").innerHTML = "Hello World!"; jQuery Program: $("#Test").text("Hello World!"); Activity 11.6: Try the above JQuery example after downloading the jQuery library. Then understand the ease of use of jQuery. 11.5.1 jQuery Syntax The jQuery syntax is tailor-made for selecting HTML elements and performing some action on the element(s). Basic syntax is: $(selector).action() Ø A $ sign to define/access jQuery Ø A (selector) to "query (or find)" HTML elements Ø A jQuery action() to be performed on the element(s) Examples: $(this).hide() - hides the current element. $("p").hide() - hides all elements (paragraphs). $(".test").hide() - hides all elements with class="test". $("p.test").hide() – hides all elements (paragraph) with class="test". $("#test").hide() - hides the element with id="test". Selecting part of a document is fundamental operation. A jQuery object is a wrapper for a selected group of DOM (Document Object Model) nodes. $() function is a factory method that creates jQuery objects. $(“XX”) is a jQuery object containing all the “XX” elements in the document..addClass() method changes the DOM nodes by adding a ‘class’ attribute. The ‘class’ attribute is a special CSS construct that provides a visual architecture independent of the element structures. $(“dt”).addClass(“emphasize”) will change all occurrences of to To make this change, it is put in a function. function doEmph() {$(“dt”).addClass(“emphasize”)} It is called when the document has been loaded and the DOM is created. Structure and appearance should be separated. Also, onLoad waits until all images etc. are loaded. jQuery provides an independent scheduling point after DOM is created and before images are loaded. $(document).ready(doEmph); HTML modifications are not required. All modifications are done in script. Following example is given a better solution for document ready event. $(document).ready(function(){ $(“dt”).addClass(“emphasize”) }); The following example can be used to observe the functionality and embedded power of jQuery functions where it saves large number of code writing time. Example 1: Hide the text, when user clicks it. $(document).ready(function(){ $("p").click(function(){ $(this).hide(); });}); click on me to hide me. Example 2: All elements will be hidden, when user clicks the button. $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); This is a heading This is a paragraph. This is another paragraph. Click me to hide paragraphs Example 3: Hide the button, when user clicks the button. $(document).ready(function(){ $("button").click(function(){ $(this).hide(); }); }); Click me Example 4: An element with id= "test" will be hidden, when user clicks the button. $(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); }); This is a heading This is a paragraph. This is another paragraph. Click me Example 5: An element with class= "test" will be hidden, when user clicks the button. $(document).ready(function(){ $("button").click(function(){ $(".test").hide(); }); }); This is a heading This is a paragraph. This is another paragraph. Click me Activity 11.7: Try the above JQuery examples 1-5 and understand the variety of functional execution models in use of jQuery. 1.5.2 jQuery Selectors jQuery selectors allow us to select and manipulate HTML elements as a group or as a single element. jQuery selectors are required at every step while using jQuery. Selectors allow you to get the exact element/attribute you want from your HTML document. jQuery supports the existing CSS Selectors, and in addition, it has some own custom selectors. All type of selectors in jQuery, start with the dollar sign and parentheses: $(). Table 11.3 shows some examples of jQuery Selectors.  Table 11.3. Some examples of jQuery Selectors Syntax Description $("*") Selects all elements. $("p") Selects all elements. $("p.intro") Selects all elements with class="intro". $("p#intro") Selects all elements with id="intro". $("p:first") Selects the first element. $(":animated") Selects all elements that are currently animated. $("[href]") Selects all elements with a href attribute $(":button") Selects all elements and elements of type="button". $(":even") Selects even elements. $(":odd") Selects odd elements. Example 6: Here the text will be hidden, when user clicks the “Hide” button. Then text will be displayed, when user clicks the “Show” button. $(document).ready(function(){ $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); }); If you click on the "Hide" button, I will disappear. Hide Show  Activity 11.8: Try the above JQuery examples 6 and understand how event listeners are operating in JavaScript functional execution models in use of jQuery. 11.5.3 jQuery Form Validation JQuery libraries are extensively used in form feed data validation and input validations which helps programmer to detect incompleteness of input data before sending it to the server. The above HTML form validation code is given below. Activity 11.9: Create the above HTML form and link the following JQuery script for the input validation. You have to be creative and investigative to use the following script. Please upload your final code into the given link of Moodle. // Wait for the DOM to be ready $(function() { // Initialize form validation on the registration form. It has the name attribute "registration" $("form[name='registration']").validate({ // Specify validation rules rules: { // The key name on the left side is the name attribute of an input field. Validation rules are // defined on the right side firstname: "required", lastname: "required", email: { required: true, // Specify that email should be validated by the built-in "email" rule email: true }, password: { required: true, minlength: 5 } }, // Specify validation error messages messages: { firstname: "Please enter your firstname", lastname: "Please enter your lastname", password: { required: "Please provide a password", minlength: "Your password must be at least 5 characters long" }, email: "Please enter a valid email address" }, // Make sure the form is submitted to the destination defined // in the "action" attribute of the form when valid submitHandler: function(form) { form.submit(); } }); }); Reference: https://www.sitepoint.com/basic-jquery-form-validation-tutorial/ Activity 11.10 Create an html page to display the following table with jQuery script to hide all even table rows. Upload your final web script in to the moodle. Summary Now you have completed learning lesson 11. We have discussed about Passing form data into JavaScripts, Form events and event handling, Time control functions, JQuery library and Use of JQuery Library.  12 Web Hosting and Maintenance Lesson Introduction In the previous lesson you have learnt about event driven JavaScript functions and use of JavaScript Libraries such as JQuery. This week you will lean on web server systems for hosting web sites and maintaining websites remotely and dynamically. This week focus on various hosting platforms, frameworks and maintenance facilities commonly in use. Learning Outcomes: After completion of this lesson, the learner will be able to host websites in remote locations and maintain the sites. This lesson enables you to Describe Web hosting platforms and methods Use remote login methods for hosting sites Create and maintain web content on remote sites Apply ftp, sftp and ssh clients Lesson Outline UNIX and Windows hosting Web servers, Server Packages and utilities (Apache, IIS, WAMP, LAMP etc..) Domain name registration and hosting options Web server ports and configurations Remote login protocols and facilities GUI web server control and cPanel File permissions, indexing and structuring Web maintenance client applications 12.1 Web Servers and hosting In previous lessons you have learnt about event driven JavaScript functions and their libraries. So, in this lesson, we will discuss how to host websites on different platforms with maintenance facilities. 12.1.1 Web Hosting In generally, the term Web hosting is refers to the activity or service of providing storage space to individuals or organizations, for their websites that are accessible via World Wide Web. Any website to be available for viewing on the World Wide Web, it has to be on a computer that is connected to the Internet. The computer your site is on is known as its host. A web host, or hosting service provider, is a business that provides the technologies and services needed for the website or webpage to be viewed in the Internet. Websites are hosted, or stored, on special computers with special software service called servers. You have to pay to an organization to put your documents on their webserver, which called as web hosting. Hosting service providers are hosting your site on their servers. When Internet users want to view your website, all they need to do is type your website address or domain into their browser. The DNS ensures you get associated with the correct computer. Their computer will then connect to your server and your webpages will be delivered to them through the browser. In the world of web site hosting there are two main types of operating system platforms on which you may host your web site, namely: UNIX and Windows (UNIX hosting and Windows hosting). 12.1.2 Windows Hosting Windows hosting means hosting of web services that runs on the Windows operating system and design their own sites using Microsoft technology means Windows-specific technologies such as ASP,.NET, Microsoft Access and Microsoft SQL server (MSSQL). You should choose Windows hosting if you plan to use ASP (Active Server Pages) or ASP.net as server scripting, or if you plan to use a database like Microsoft Access or Microsoft SQL Server. Some of the Windows-specific technologies such as ASP,.NET, Microsoft Access and Microsoft SQL server (MSSQL) are listed below. ASP.net - Active Server Pages Active Server Pages is a server-side scripting technology developed by Microsoft. With ASP you can create dynamic web pages by putting script code inside your HTML pages. Commonly used language is C#. The web server executes the code before the page is returned to the browser. Here on ASP.net, HTML, JavaScript, CSS and XML types of web languages are enabled. ASP is a standard component in current Windows OS’s. It can be activated on all computers running Windows. Many web hosting providers are offering ASP, as it is becoming a more and more popular technology. Currently ASP.net is more popular among Microsoft community. MySQL MySQL is also popular database software for web sites. MySQL is an inexpensive alternative to the expensive Microsoft and Oracle solutions. 12.1.3 Unix Hosting and Linux Hosting Unix hosting means hosting of web services that runs on the Unix operating system. Unix was the first (original) web server operating system, and it is known for being reliable and stable. It is less expensive than Windows. Linux hosting means hosting of web services that runs on the Linux operating system. Linux also belongs to same family of Unix, there are other variants like, FreeBSD, OpenBSD, Fedora (linux version) and CentOS. We run a derivative of Unix called Linux. We run 64-Bit Enterprise Linux servers. Linux servers are known for their value, stability and wide feature set. You do not have to be running Linux to use a hosting provider with Linux Servers. It is simply the software used by the server to share out a website. 12.2 Web servers, Server Packages and Utilities Here we discuss the particular software called a web server that responds to client side requests that comes from a web browser, by giving resources like XHTML Pages. Through this section you will get to know about two web servers the open source Apache HTTP Server and Microsoft’s Internet Information Services (IIS) which you can install on your own computer for testing your web pages and web applications. Web server is a computer where the web content is stored. Basically web server is used to host the web sites but there exists other web servers also such as gaming, storage, FTP, email etc. Web server responds to the client request (browser) in one of the following two ways: Sending the file to the client associated with the requested URL Generating response by invoking a script and communicating with database When client sends request for a web page, the web server search for the requested page if requested page is found then it will send it to client with an HTTP response. If the requested web page is not found, web servers will the send an HTTP response: Error 404 Not found. If client has requested for some other resources then the web server will contact to the application server and data store to construct the HTTP response. 12.2.1 What is ISP? An Internet service provider (ISP), also sometimes referred to as an internet access provider (IAP), is a company that offers its customers to access to the internet. The ISP connects to its customers using a data transmission technology appropriate for delivering internet protocols such as dial –up, DSL, cable modem, wireless or dedicated high-speed interconnections. ISP may provide Internet email accounts to users, which allow them to communicate with another by sending messages through their ISP servers. In the following section it discusses how to install the software you need for running web apps using Apache HTTP Server, Apache is a powerful web server supports in both windows and Unix platforms. It is open source software and freely available. There are packages, which could install Apache with other components such as PHP, Python, etc. 12.2.2 Apache web server on Linux Generally, Apache web server bundle is delivered with most Linux variant installation packages. Here, in the following video you can learn how to install it from scratch. Here it uses Ubuntu as the operating system and apache2 web server package where it is more similar in other Linux/Unix variants and webservers as well. Further the next video shows how to configure it from Operating System bundle. Apache2 installation Demo: https://www.youtube.com/watch?v=-q8Jj4aAWYw Apache web server configuration Demo: https://www.youtube.com/watch?v=UrPNg4tWjUI 12.2.3 IIS (Internet Information Server) Internet Information Services (IIS) is the Windows Web service that means IIS is web server that can be installed on Microsoft windows computers, once you installed IIS server to your own computers you can publish your web pages and web applications on your local computers. Internet Information Services is not installed on current Windows OS’s by default. The following video IIS Installation Demo: https://www.youtube.com/watch?v=I32AnqJzD58 Publishing web site in IIS Create a home page for your Web site. Name your home page file Default.htm or Default.asp.  Copy your home page into the default Web publishing directory for IIS (wwwroot). The default Web publishing directory is also called the home directory, and the location provided by Setup is \Inetpub\wwwroot. If your network has a name resolution system (typically DNS), then visitors can simply type your computer name in the address bar of their browsers to reach your site. If your network does not have a name resolution system, visitors must type the numerical IP address of your computer. Publish content on your FTP site Copy or move your files into the default FTP publishing directory. The default directory provided by Setup is \Inetpub\Ftproot. If your network has a name resolution system (typically DNS), then visitors can type ftp:// followed by your computer name in the address bar of their browsers to reach your site. If your network does not have a name resolution system, visitors must type ftp:// and the numerical IP address of your computer. Activity 12.1: Write the differences and similarities of Windows hosting and Linux hosting. 12.3 Domain name registration and hosting options 12.3.1 What is a Domain Name? A domain name is a unique name for a web site, like microsoft.com and w3schools.com. A domain name is a unique name that people type in the browser to open a particular website. For example, domain name for w3schools is w3schools.com. It's the name by which your site will be known on the web and the way individuals can discover it. It is the primary thing that your clients will type in their program to get to your site or on the other hand find it through web search tools, for example, Google or Bing. Your domain name should be important because it is the name that people have to remember and type in to get to your website. Domain names must be registered. When domain names are registered they are added to a large domain name register, and information about your site - including your internet IP address which is stored on a DNS server. DNS stands for Domain Name System. A DNS server is responsible for informing all other computers on the Internet about your domain name and your site address. 12.3.2 Registering a Domain Most people will register their domain name with their web host in an "all-in-one" hosting solution. Domains can be registered from domain name registration companies such as http://www.dotdnr.com or GoDaddy etc. These companies provide interfaces to search for available domain names and they offer a variety of domain name extensions that can be registered at the same time. Domain Name Registration provides registration services for.com.net.org.biz.info.us.nu.ws.cc and.tv domains. 12.3.3 Different Types of Web Hosting Options In tins section basically we discuss about 3 main hosting options. These are Shared Servers, Virtual Private Servers, and Dedicated Server. Shared Server Option: A Shared Server is a computer managed by your web facilitating organization that enables numerous sites to be hosted on one computer. One basic preferred standpoint is monthly rental fee that is being charged to the end client. In the event that you have a web site that is quite straightforward and utilized for the most part to advertise, at that point this might be the best choice cost aspect. A particular one web site completes a considerable measure of handling, gets huge amounts of guests, it can viably back off alternate sites on the web server. The computer assets are being shared among everybody. Dedicated Server: This is heading off to the total outrageous contrasted with a shared server and is likewise the most costly approach. You are basically paying a huge monthly rental fee to leased line for your own particular computer every month. This alternative is ideal on the off chance that you are doing on the web mission basic activities and your site is acquiring a considerable measure of cash basic to the business task. Virtual Private Server Hosting: This is another option for hosting a web site that might be a center ground between a “shared Server” and a “dedicated Server”. This is essentially taking the web server and cutting into a settled number of virtual servers with dispensed computer assets for each. Along these lines you don't need to stress on the off chance that another person is hindering the web server for you are just utilizing a piece of it. It is more costly than a shared server yet more affordable than a dedicated server. 12.4 Web server ports and configurations Previously on Linux Webserver configuration video you may have seen how to configure the webserver with their ports and IP addresses. In this section we discussed about Web server ports and configurations further. When considering any server machine that makes its services available to the Internet using numbered ports, one for each service that is available on the server. Most of the time the default port is used as 80. Each of the most well known services is available at a well-known port number. The following video demonstrates the on how to configure windows port for apache web server. Next video demonstrate on configuring both IIS and XAMP together. Configure Apache ports on windows: https://www.youtube.com/watch?v=St49oetWUMI Configure IIS ports: https://www.youtube.com/watch?v=62eAVotw9F4 12.5 Remote login protocols and facilities Remote login that allows users to login to host machines on a network and users can act like they were physically at the host machine location. According to the user’s authority level they can read, add, edit and delete files. There are two remote login protocols are TELNET and SSH. TELNET: The protocol TELNET is a TCP/IP standard for setting up a connection to a remote machine. TELNET enables a user’s to sign in to a remote machine over the Web by first making a TCP connection and pass the detail of the application from the user to the remote machine. Using TELNET protocol, an application program on the client's machine turns into the customer. The client's console and its screen likewise append specifically to the remote server. The remote logging activity depends on timesharing, whereby an approved client has a user name and a password to Logging to Remote Servers. SSH: The protocol Secure Shell abbreviate as SSH, it is another remote login protocol, which is based on UNIX programs. SSH protocol utilizes TCP for communications but is more powerful and flexible than TELNET and allows the user to more easily execute a single command on a remote customer. SSH utilizes encryption to secure the connection between a customer and a server. All client confirmation, outputs, commands, and documents transfers are encrypted to protect against attacks in the network. The following video demonstrate the use of secure shell client for remote server access and for ftp. Remote server access through secure shell: https://www.experts- exchange.com/videos/633/Using-Secure-Shell-SSH.html Activity 12.2: Self study about SFTP software and compare and contrast the features of SFTP and SSH protocols while distinguishing their facilities. 12.6 GUI web server control and cPanel To manage hosting environment most of the website owners use different kind of web hosting control panels. These control panels facilitates the server administration and allows users to manage multiple websites easily. There are some of the activities that most of the control panels support. Web server administration DNS management Email management Database administration FTP management 12.6.1 cPanel cPanel is one of the most widely used control panels for web hosting. It is a web-based interface and it is an online Linux-based web hosting control panel that provides a graphical interface and automation tools designed to simplify the process of hosting a web site. One of the widely used and well-known control panels is cPanel. There are also other alternatives that you could consider such as Plesk, ISPConfig, etc., cPanel provides a 3 tier structure that utilizes capabilities for administrators, resellers, and end-user website owners to control the various aspects of website and server administration through a standard web browser. It is easy to use, highly customizable and majority of the hosts are configured to serve its multiple layouts that are available. It comes with various pre-installed options, and from it you can manage email and FTP accounts, your add-on and subdomains, MySQL database, applications, security, and statistics. Everything that we’ve talked about in this guide you can find in cPanel. After installing and answering a few questions to customize your cPanel, you are ready to use it. It has an interface for website owners and server owners. Besides the already mentioned pre-installed options, you can add almost anything you want to. In  the Web Host Manager part of the cPanel, you can do all things that are related to administrative server hosting. There you can add and manage your accounts, create hosting plans, reseller accounts, change security features, configure server, scale your hosting capabilities and much more. While it is easy and intuitive enough for beginners, cPanel is powerful enough to meet the needs of more advanced users. 12.7 File permissions, indexing and structuring Files that are on machines with Unix and Linux operating systems can have file permission that means operating system knows how to deal with request to access the files. Read, Write and Execute are the three access types. Read - Indicate as r, users can only read files that have read access, these files are displayed to the users. users can’t do any modifications to these files Write - Indicate as w, users can do any modifications according to their requirements to the files that have write permission Execute - Indicate as x, files with execute access can be executed as programs by the user. There are three types of user groups associated with these access types. User - The owner of the file. Group - Other files, which are in the same folder or group. World - Everyone else. cPanel can use to manage file permission 12.8 Web maintenance client applications Website Maintenance includes all the activities expected to ensure the operational integrity of a website. Whatever these activities don't happen, the outcomes can be embarrassingly obvious. It is important to maintain your web site or keep updated all the activities of your web application to any business. Website is a worldwide window into your business and it can have a big impact on how the value of your product or service is perceived. A well- maintained website is critical for real-time service industries. All businesses need regular website maintenance to attract and retain customers, maintain search engine rankings and present new information, products and services to the public. Website maintenance is also required to maintain the value of the website over time. Owning a site, accompanies have certain obligations. You can’t just build it and forget it. Well you have to do regular website maintenance, it is a must if you want your site to be successful and up to date without any fault. Please refer the video and the content of the following site to obtain more information on web maintenance. http://www.diffily.com/articles/maintenance.htm Activity 12.3: Download and install FileZilla software and get familiar with the web maintenance facilities supported by the software. Summary Now you have completed learning lesson 12. We have discussed about Web hosting, web servers and configurations, remote management of websites and maintenance of websites.  13 JavaScript Libraries for DOM integrations and SPA Lesson Introduction In the previous lesson you have learnt to host and maintain web sites in web server systems. This week you will lean on Single Page Application development with JavaScript framework such as AngularJS. This week focus on various structural components on web to build responsive web widgets. Learning Outcomes: After completion of this lesson, the learner will be able to create Single Page Applications with dynamic interaction libraries. This lesson enable you to Describe DOM and elements Use AngularJS library functions Create Single Page Applications (SPA) using AngularJS library Lesson Outline Document Object Model (DOM) Data Binding UI Logic and controllers Single Page Applications AngularJS Syntax and directives Event driven programing with AngularJS AngularJS APIs AngularJS Animations AJAX 13.1 Document Object Model (DOM) The Document Object Model (DOM) is considered as an application programming interface (API) for HTML and XML documents. In web designing, a web page is loaded, the browser creates itself a Document Object Model of the relevant page. Document Object Model provide these facilities to the programmers. Build documents Navigate their structure Add, edit, or delete functions The HTML DOM model is structured as a tree of Objects: Document Root Element: Element: Element: Element: Attribute: Element: Element: “href” Text: Text: Text: “W3Schools” “Document” “DOM Tree” Using the object model, JavaScript can change all the HTML elements, attributes and CSS styles in the page as well as add or remove existing HTML elements and attributes. JavaScript can react to all existing HTML events and create new events to create dynamic HTML. 13.1.1 HTML DOM Methods There are HTML DOM methods and properties. DOM methods are actions, which can perform on HTML Elements. DOM properties are values, which can set or change of HTML Elements. The following example changes the content (the innerHTML) of the element with id="message". Example: document.getElementById("message").innerHTML = "Welcome to SPA!"; Easiest way to access the HTML element is by using the id of the element. In the above example, getElementById method is used id="message" to find the element. For getting the content of HTML elements we can use the innerHTML property. 13.1.2 JavaScript HTML DOM Document The document object is representing the web page in a structured arrangement. To access any element in the web page, easily start with accessing the document object. The following url provide an explanation with activities on DOM. Please refer the online material. https://www.w3schools.com/js/js_htmldom_document.asp 13.1.3 JavaScript HTML DOM Elements DOM elements provide access to HTML elements in an HTML page. We can find these elements by id, tag name, class name, CSS selectors and HTML object collections. To do more exercises refer the w3schools activities in the following link. https://www.w3schools.com/js/js_htmldom_elements.asp 13.1.4 JavaScript HTML DOM - Changing HTML The Document Object model allows JavaScript to change the content of HTML elements by changing the HTML output stream or changing the HTML content. In JavaScript, document.write() can be used to write directly to the HTML output stream. We can modify the content of an HTML element is by using the innerHTML property. 13.2 UI Logic and Controllers 13.2.1 MVC Architecture MVC architecture is a software design pattern, which can be used for developing web applications. In a simple manner, the controller receives all requests and works with the Model to prepare the data, which is needed by the View. The view used the data prepared by the Controller to the purpose of presentation. The Model: The model is maintaining the data of the web application. It responds to the request from the view (UI) and to the instructions from the controller (Logic). The View: View is a user interface (UI). View display data using model to the user and let users to modify the data. The Controller: Controller handles the user request or operation. Normally, user interacts with the View, using a URL request, this request will be handled by the Controller (logically). The controller extracts the appropriate view with the model data as a response. MVC Architectural Operation Introduction to AngularJS: AngularJS is a structured, JavaScript framework used for dynamic single page applications. As a framework it uses code components written in HTML in order to operate particular function. The data binding and dependency functionalities of Angular JS saves time invested in writing lengthy codes. All these features are packaged in a browser that makes it a suitable server technology. The following video clips provide an introduction and features of Angular. https://www.youtube.com/watch?v=WAZTZUgeLhQ https://www.youtube.com/watch?v=BTF5WrKj2mY 13.3 Data Binding 13.3.1 Two-way Binding Data binding in AngularJS is the synchronization between the model and the view. When data in the model changes the view reflects the change wise-versa when data in the view changes the model is updated. This happens automatically and makes sure that the model and the view is updated all times. Perform the following example and observe the way of operation of AngularJS. Example: Name: Name: {{firstname}} {{lastname}} var app = angular.module('myFirstApp', []); app.controller('myCtrl', function($scope) { $scope.firstname = "Loch"; $scope.lastname = "Rana"; }); Activity 13.1: Study the operation of above angular web page and identify the specialty with respect to the normal JavaScript functionality. Develop a web page to obtain personal details and display those details when they type it. 13.4 Single Page Applications What is a Single Page Application? Single-page application (SPA) is a web application, which offers more dynamic interactions. It interacts with the user by dynamically rewriting the requested page rather than loading entire new pages from a server. In an SPA, all the necessary code such as HTML, JavaScript, and CSS is retrieved with a single page load. Otherwise the relevant resources are dynamically allocated to the page as necessity, for the response to user actions. What is the difference between a regular website and an SPA? Major difference between regular web site and SPA is the reduced amount of page refreshes. SPAs have a heavier usage of AJAX (AJAX is a significant way to communicate with back-end servers without refreshing the entire page to get details loaded into the application.). What are the major benefits of SPAs? One is there is no page change when clicking on a link. In an SPA, the navigation controls and main interface normally stay on the page by clicking a link, only the piece of content (elements) to be changed actually gets changed. Next benefit is getting a lighter server response payload compare to the load of whole page data from the server. This is a major advantage when considering the network traffic. Popular JavaScript Frameworks for Building SPAs There are a lot of open source JavaScript frameworks that help with building SPAs, such as: Angular React Ember Aurelia Vue.js Cycle.js Backbone 13.5 AngularJS Features, Syntax and directives 13.5.2What are the features? AngularJS is a powerful web development framework to create RICH Internet Application(RIA) It facilitates to write client side application using MVC architecture AngularJS automatically handles JavaScript code fit for each browser AngularJS is open source framework and it is licensed under the Apache License version 2.0. Core Features Refer the following link for the core features. https://www.tutorialspoint.com/angularjs/angularjs_overview.htm 13.5.3Advantages of AngularJS Able to create Single Page Application (SPA) in a proper way Has data binding capability which is giving user a rich and responsive experience Code is unit testable It uses dependency injection and make use of separation of concerns Provides reusable components Write less code and get more functionality Applications can run on all major browsers and smart phones 13.5.4 Disadvantages of AngularJS Not Secure Not degradable 13.5.5 AngularJS Expressions AngularJS expressions can be written inside double braces like below. {{ expression }} AngularJS expressions can also be written inside a directive like this. ng-bind="expression" AngularJS can resolve the expression, and return the result exactly where the expression is written. AngularJS expressions are much like JavaScript expressions. They can contain literals, operators, and variables. Example: {{ 5 + 5 }} or {{ firstName + " " + lastName }} My first expression: {{ 5 + 5 }} If you remove the ng-app directive, HTML will display the expression as it is, without solving it: Example My first expression: {{ 5 + 5 }} You can write expressions wherever you like, AngularJS will simply resolve the expression and return the result. Example: Let AngularJS change the value of CSS properties. Change the color of the input box below, by changing its value, the relevant code snippet is given below. lightblue Activity 13.2: Design a web page with a text box to change the color of text according to the entered color in the text box by using the above code snippet. AngularJS Numbers AngularJS numbers are like JavaScript numbers: Example Total in dollar: {{ quantity * cost }} Same example using ng-bind: Example Total in dollar: Using ng-init is not very common. Activity 13.3: Develop a single page web application to calculate a bill according to a list of stored items, unit prices and when entering the quantity in item wise input boxes, to automatically calculate the bill. AngularJS Strings AngularJS strings are like JavaScript strings: Example The name is {{ firstName + " " + lastName }} Same example using ng-bind: Example The name is AngularJS Objects AngularJS objects are like JavaScript objects: Example The name is {{ person.lastName }} Same example using ng-bind: Example The name is AngularJS Arrays AngularJS arrays are like JavaScript arrays: Example The third result is {{ points }} Same example using ng-bind: Example The third result is Activity 13.4: Create test applications for the above given code snippet to observe the behaviors of above example starting from Angular Strings. 13.6 AngularJS Directives AngularJS has a set of built-in directives. These directives provide functionality to the web applications. User defined directives also acceptable. AngularJS directives are extended HTML attributes with the prefix ng-. The ng-app directive initializes an AngularJS application The ng-init directive initializes application data The ng-model directive binds the value of HTML controls (input, select, textarea) to application data Example Country: You wrote: {{ country }} The ng-app Directive The ng-app directive defines the root element of an AngularJS application and it will automatically initialize when the web page is loaded. The ng-init Directive The ng-init directive defines initial values for an AngularJS application. The ng-model Directive The ng-model directive binds the value of HTML controls (input, select, textarea) to application data. The ng-model directive can also: Provide type validation (number, email, required) for application data. Provide status (invalid, dirty, touched, error) for application data. Provide CSS classes for HTML elements and bind HTML elements to HTML forms. Repeating HTML Elements Consider this ng-repeat directive, it repeats an HTML element. Example {{ x }} Activity 13.5: Create test applications for the above given code snippet to list down an array of names with their indexes. Create New Directives Angular provides facilities to create your own directives. New directives are created by using the.directive function. Make an HTML element with the same tag name as the new directive. You must consider that, when naming a directive, you must use a camel case name such as simpleTestDirective, but when invoking it, you must use -separated name such as simple-test-directive. The following example shows one application. var app = angular.module("myFirstAngularApp", []); app.directive("simpleTestDirective", function() { return { template : "Made by a directive!" }; }); You can invoke a directive by using: Element name Attribute Class Comment The legal restrict values are: E - Element name A - Attribute C - Class M - Comment By default the value is EA, meaning that both Element names and attribute names can invoke the directive. By adding a restrict property with the value "A", the directive can only be invoked by attributes. Example var app = angular.module("myFirstAngularApp", []); app.directive("simpleTestDirective", function() { return { restrict : "A", template : "Made by a directive!" }; }); 13.7 Event driven programing with AngularJS Events driven programming is modeled on human application dialog. Interaction controls the flow of the program which determined by the occurrence of events. These events are monitored by code known as an event listener that, if it detects that its assigned event has occurred, runs an event "handler", typically a callback function or method. Improved responsiveness and flexibility Just like CURD (Create, Retrieve, Update and Delete), it has focused on data presentation and two-way data binding. Thus, AngularJS happens to be classically well suited as the frontend framework for the web application developed over RESTful API. Using AngularJS makes setting up an event-driven architecture to augment an underlying data API a very straightforward process. It makes it easy to enforce application’s data integrity and ensure that all changes are present in the underlying data store when it happens, rather than at a future synchronization point. For more details go through the content of the following links https://www.letsnurture.com/blog/making-web-applications-angularjs.html Activity 13.6: Perform the exercise activities given in the following tutorial. https://www.w3schools.com/angular/angular_intro.asp 13.8 AngularJS APIs The documentation is organized into modules, which contain various components of an AngularJS application. These components are directives, services, filters, providers, templates, global APIs, and testing mocks. There is also a guide with articles on various topics, and a list of external resources. You can follow up angularJS API from this link. https://docs.angularjs.org/api 13.9 AngularJS Animations AngularJS provides animated transitions, with help from CSS. AngularJS provides animation facility for common directives such as ngRepeat, ngSwitch, and ngView, as well as custom directives via the $animate service. These animation facilities are set in place to trigger animations during the life cycle of various directives and when triggered, will attempt to perform a CSS Transition, CSS Keyframe Animation or a JavaScript callback Animation For more details and exercises please refer below links. https://www.w3schools.com/angular/angular_animations.asp https://docs.angularjs.org/tutorial/step_14 13.10 AJAX When obtaining some kind of information from a database or send user details to a server we have to make an HTML form and GET or POST data to the server. Client has to click the “Submit” button to send or get the relevant information also wait for the server to respond and finally a relevant page will load as the results. The server returns a new page each time the user submits input therefore, web applications can run slowly it means less user-friendly. With AJAX JavaScript communicates directly with the server through the JavaScript XMLHttpRequest object. With an HTTP request, a web page can make a request and get a response from a web server, without reloading the page. The client will stay on the same page and does not notice that scripts request pages as well as send data to a server in the background. AJAX stands for Asynchronous JavaScript and XML. For an example, when you type something in google search, it suggests a list according to the changes you do in your typed text. This happens through AJAX. How AJAX works? AJAX communicates with the server using XMLHttpRequest object. These are the steps that you can learn how AJAX works? 1. User sends a request from the UI and a javascript call goes to XMLHttpRequest object. 2. HTTP Request is sent to the server by XMLHttpRequest object. 3. Server interacts with the database using JSP, PHP, Servlet, ASP.net etc. 4. Data is retrieved. 5. Server sends XML data or JSON data to the XMLHttpRequest callback function. 6. HTML and CSS data is displayed on the browser. AJAX stands for Asynchronous JavaScript and XML. AJAX is a new technique for creating better, faster, and more interactive web applications with the help of XML, HTML, CSS, and Java Script. Ajax uses these things to display dynamic content - XHTML for content, CSS for presentation, along with Document Object Model and JavaScript. After hitting submit, and getting directed to a new page with new information from the server. With AJAX, when you press submit button, JavaScript will make a request to the server and take the results then update the current screen. So, the user would never know about the back end process. XML is used for receiving server data. AJAX is a web browser technology independent of web server software. A user can continue to use the application while the client program requests information from the server in the background. Clicking is not required, mouse movement is a sufficient event trigger. Data-driven as opposed to page-driven. Activity 13.7: Do the following tutorial on AJAX with the given interactive examples. https://www.w3schools.com/xml/ajax_intro.asp Summary Now you have completed learning lesson 13. We have discussed about creating dynamic, responsive Rich Web Applications with AngularJS.  14 HTML5 and Web Content Management Systems Lesson Introduction In previous weeks you have gained the basic HTML, DHTML, JavaScript and all the other related knowledge regarding web designing. During this week, you will learn the semantic web design elements cooperated in HTML5 and to apply CMS to host websites. Modern businesses industries are require customizable web systems to manage the content with their dynamic changes. Hence, Web CMSs are capable of providing user-friendly customizable environments for web developers with most frequent functionalities. Learning Outcomes: After completion of this lesson, the learner will be able to create websites using HTML5 and also construct web systems by using popular CMSs. This lesson enables you to Describe the extensions of HTML5 Differentiate facilities and functionalities of CMSs Install and deploy CMSs Customize CMSs based on requirements Lesson Outline HTML5 directives RIA development Popular CMSs and their Features Design content for the CMS Installation and configuration of CMSs Customization of CMS Migration of Content and versioning Administration of CMS 14.1 HTML5 directives HTML5 stands for Hypertext Markup Language version 5.This is the latest version of HTML. HTML as well is not a programming language; it is a markup language published in October 2014 by World Wide Web Consortium (W3C). It introduces a number of new powerful elements and attributes that can help you in building websites. No browsers have full HTML5 support. Lets see some of the most prominent features introduced in HTML5. 1. Semantic Elements: A semantic element clearly describes its meaning to both the browser and the developer. Examples of non-semantic elements: and - Types of tags caries only formatting instructions and nothing about its content. Examples of semantic elements: , , and - Clearly defines its content HTML5 provides semantic elements to define different parts of a web page. Defines an article Defines content aside from the page content Defines additional details that the user can view or hide Defines a caption for a element Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. Defines a footer for a document or section Specifies a header for a document or section Specifies the main content of a document Defines marked/highlighted text Defines navigation links Defines a section in a document Defines a visible heading for a element Defines a date/time Specifies a list of pre-defined options for input controls Defines the result of a calculation Draw graphics, on the fly, via scripting (usually JavaScript) Draw scalable vector graphics Defines sound content Defines a container for an external (non-HTML) application  Defines multiple media resources for media elements ( and ) Defines text tracks for media elements ( and ) Defines video or movie New input types color range date search datetime tel datetime-local time email url month week number New input attributes autocomplete min and max autofocus multiple form pattern (regexp) formaction placeholder formenctype required formmethod step formnovalidate formtarget height and width list The above list of new elements and attributes and their descriptions can be found in the following web link: https://www.w3schools.com/htmL/html5_semantic_elements.asp Usage of Semantic Elements: : An article element make identity on its own, and it can be read independently from the rest of the web site. element can be used for Forum post, Blog post, Newspaper article. : The element should be used as a container for introductory content. :A footer typically contains the information about its child elements such as the author of the document, copyright information etc. Activity 14.1: Go through the tutorial content and the exercises given in the following link step by step. https://www.w3schools.com/htmL/html5_semantic_elements.asp 2. WebForms 2.0: To enhance the features of HTML web forms, a set of new attributes have been introduced for tag. Form elements and attributes in HTML5 provide a greater degree of semantic mark-up and it is simple. 3. Persistent Local Storage: To achieve without resorting to third-party plugins. 4. WebSocket: A next-generation bidirectional communication technology for web applications. 5. Server-Sent Events: HTML5 introduces events, which flow from web server to the web browsers and they are called Server-Sent Events (SSE). 6. Canvas: This supports a two-dimensional drawing surface that can program with JavaScript. 7. Audio & Video: Facility to embed audio or video on webpages without resorting to third-party plugins. 8. Geolocation: Visitors can choose to share their physical location when accessing web application. 9. Microdata: It lets developer to create their own vocabularies beyond HTML5 and extend web pages with semantic elements. 10. Drag and drop: Drag and drop the items from one location to another location on the same webpage. HTML5 elements and attributes: The following example shows basic structure of any HTML5 web page. Welcome Welcome to HTML5! HTML5 simplifies the declaration and it gives all the HTML4 elements to work accordingly. Therefore, inner content of given HTML4 content will work as usual inside HTML5 declaration. 14.2. RIA (Rich Internet Application) A rich Internet application (RIA) is a Web application designed to deliver the same features and functions normally associated with desktop applications. RIAs generally split the processing across the Internet/network divide by locating the user interface and related activity and capability on the client side, and the data manipulation and operation on the application server side. An RIA normally runs inside a web browser and usually does not require software installation on the client side to work. However, some RIAs may only work properly with one or more specific browsers. One specific feature of an RIA (compared to general web applications) is the client process that acts between the user and the application server. The client app downloads when the RIA launches. The app can be augmented during subsequent operation with additional downloads in which the app acts as a browser extension to handle the user interface and server communications. Watch the following video for your additional references: https://www.youtube.com/watch?v=UQI66j8jmQM 14.3 Popular CMSs and their Features What is Content Management System? CMS is a tool that enables you to create, edit, delete and finally publish in a variety of formatted and variety of content (such as text, graphics, video, documents, etc) while being governed by a set of rules, processes and workflows that ensure validated electronic content and coherency of the data. Benefits of CMS Consistent website design Availability of site modules and templates. An open source community (for support). Content and structure can easily be adapted. Content is well organized and searchable. You can assign different webmasters to administer the content. Content management systems (CMS) allows you to make changes to a website without need of a single touch to line of code. WordPress, Joomla and Drupal all offer great features, tons of customizations, ease-of-use, and strong security. Wordpress : especially well for small to medium sized websites, blogs and smaller e-commerce stores. Joomla : Great for e-commerce or social networking websites, but requires a basic understanding of technical skills Drupal : The most difficult, but also the most powerful. It requires a familiar understanding of HTML, CSS and PHP. 14.3.1 Wordpress WordPress is the world’s most popular content management system and there is lot of features to become as the most popular one as follows, Easy to Install Customizable Free Community Support 14.3.2 Joomla Joomla is the second most popular CMS. It’s like the compromise between WordPress and Drupal. The features of Joomla includes, Social Networking Commerce Sites Not too technical Help Portal Free 14.3.3 Drupal Drupal is the third most popular content management system available today, used by sites both large and small Technically Advanced Improved Performance Customizable Free 14.4 Design content for the CMS Content Management System' quite literally allows you to control and manage the content within your web site - without technical training. Using this uncomplicated system you can very easily add, delete images and edit text in your web site on the fly. You can also have an unlimited number of pages and a full site-search engine. Compared to designing for static content (print or web), designing for CMS-output is an entirely different discipline. It requires a big-picture systems-thinking approach that might best be described as architecture. What is good CMS design? Accommodates the needs of content and navigation regardless of length. Considers not just the present, but future needs and growth. Exemplifies page-to-page consistency in element placement, type, colors, and imagery. Defines a set of standards that are broad enough to accommodate current and future content needs, but strict enough to maintain strong site-wide consistency.  Navigation that makes it clear where you are, where you came from, what’s related, and how to go elsewhere. Retains its identity and consistency regardless of what text it contains or how it’s scaled. Understands and uses the limitations of XHTML/HTML5 as an asset. Developed in an accessible, web standards-friendly way that properly defines and uses markup. What is bad CMS design? Layouts designed as if they were for print. Layouts that make assumptions about the maximum and minimum length of copy. Headlines, navigation or copy requiring [non-dynamic] images or flash. Layouts with ambiguous navigation. Design that fails to accommodate the stylistic needs of future content, forcing the client to come up with his/her own (often inappropriate) solutions. Layouts that don’t consider the effects of text-wrapping. Designs that are poorly developed (this can make or break it, no matter how good the actual design is). Designs output by a CMS that gives the client too much stylistic control. 14.5 Installation and configuration of CMSs Step 01: choose a platform to build your website Step 02: get a domain & web hosting from web hosting and domain registrar. Step 03: Choose Website Hosting Plan of your choice Step 04: Pick a Domain Name and create your account Step 05: Check Your “Package Information” and Finish Registration Step 06: Create Your Password. Step 07: Once you’ve bought your domain name and set up your hosting it’s time to get your website up and running. Step 08: Since we are going to use wordpress here you’ll need to do is install WordPress to your domain. To create a website with wordpress (or joomla & drupal), use one click installation. Here are the steps you should follow (should be similar/same on all the major web hosting companies – Ex: www.GoDaddy.com). 1. Log in to your hosting account. 2. Go to your control panel. 3. Look for the “WordPress” or “Website” icon. 4. Choose the domain where you want to install your website.  5. Click the “Install Now” button and you will get access to your new WordPress website. If for some odd reason (some hosting companies don’t provide one-click-install for WordPress) you don’t have the option to install WordPress automatically, then use this manual installation. Installing WordPress Manually. 1) Download WordPress from here: https://wordpress.org/download 2) Create a new folder on your desktop and unzip WordPress in it 3) Look for a file named wp-config-sample.php and rename it to: wp-config.php 4) Now open the wp-config.php (with notepad for example) and fill the following lines: define(‘DB_NAME’, ‘database_name_here’); – Database name (if you don’t know it, ask this from your hosting support) define(‘DB_USER’, ‘username_here’); – Your hosting username define(‘DB_PASSWORD’, ‘password_here’); – Your hosting password After you have filled the gaps, save the file. 5) Now log into your hosting ftp (download FileZilla for that). The FTP address is usually ftp.yourdomain.com, username and password are the same that you used to register to your host. 6) If there is any file named “index” – delete it. After that upload all the files from your WordPress folder to your FTP server. You can use “drag n drop” function in FileZilla. 7) Once you have completed the previous steps, go the URL: yourdomain.com/wp- admin/install.php  This is the page you should see: 14.6 Customization of CMS Once you have installed wordpress to your domain need to choose a Theme/Template for your site. Theme means a design template that tells WordPress how your website should look. how to find a theme 1. Log into your WordPress dashboard 2. Once you have found a theme you like, installing it is as simple as clicking “Install” followed by “Activate”. 3. adding content and create new pages. 4. Adding pages to the menu (If you want your new page to be linked to in your navigation bar) Save any changes you’ve made to the page by clicking “Update” Click “Appearance” -> “Menus” in the sidebar of the WordPress Dashboard. Find the page you created and add it to the list by clicking the checkbox next to it and then “Add to Menu”. 5. Editing sidebar Go to “Appearance -> Widgets” in the WordPress Dashboard. From here, you can use drag and drop to add different “boxes” to your sidebar, or remove the items you don’t want. 6. Installing Plugins to Get More out of WordPress.  “Plugins” are extensions that are built to expand WordPress’ capabilities, adding features and functions to your site that don’t come built-in. To start installing plugins, go to “Plugins -> Add New” and simply start searching. If you’ve followed the steps in this guide, you should now have a fully-functional WordPress website! 14.7 Migration of Content and versioning Whether moving content to an upgraded CMS version, or changing vendors, you need to plan your migration early on to avoid unexpected costs and delays. There are several steps to follow to migrate the content. 1. Start planning early. Delaying content migration until the end of the project sets you up for failure. Content migration can easily take weeks of technical work since you want that work to be completed well before launch. Planning should be part of the initial content strategy phase, and extend into the design phase when you know a bit more about your new content models. 2. Allocate sufficient budget and client resources. Investing in a thorough content strategy is a given for any successful migration project. In due time, developers will also provide an estimate for the technical side of the content migration, so that's another thing to budget for. But the client should also budget for a significant amount of internal resources throughout the migration. The client will need to contribute in the auditing process to determine which parts stay and go. Even when using automated migration tools, the client needs to get involved afterwards to make sure content is still relevant and complete. Let's not forget, the client is also responsible for producing new content, which is another frequently underestimated task. 3. Do content and SEO audit. Migration is faster when the amount of content is reduced to the essentials. To arrive there, we first need to inventory all the content on the old site - pages, blocks (or equivalent), media files and metadata. A content strategist can help decide when to cut or merge existing content, and when to write all-new stuff. 4. Research automatic vs manual migration. Various automatic migration tools exist (, but don't expect them to be a magic cure. While running the migration script might be a matter of clicking a button, the main bulk of this approach is the mapping and configuration of your old and new content models.  5. Handle your SEO Deleting, moving and renaming your old content will mess up your sitemap. If you launch without handling it properly, inbound traffic will plummet, search spiders won't find your stuff, and users will grow annoyed by all your broken links. Be sure that your new site generates a sitemap.xml file to tell search spiders about all your content, rather than relying on them to discover it all on their own. The sitemap should be re-generated frequently to reflect the up-to-date state of your content structure. 14.8 Administration of CMS The usage of a content management system (cms) offers a lot of advantages to every web presence since contents are stored and edited separately from design and structure. The software consistently adjusts the content to the layout. Thus, texts, images, and files are rearranged on their own to the web site view, even if changes increase the extend of your web site considerably. Just as easy, the cms regulates the creation and reorganization of pages, or the deletion of pages and content. All formats relevant for Internet publication can be handled easily. Activity 14.2: Study the operation of above installations and download one of the popular CMS and install it on a web server. Summary Now we have completed learning Lesson 14. During this lesson, we have mainly focused on creating websites using HTML5 and also construct web systems by using popular CMSs. Now you should be able to describe the extensions of HTML5, differentiate facilities and functionalities of CMSs, install and deploy CMSs, customize CMSs based on requirements.