Berner Fachhochschule Haute école spécialisée bernoise Berne University of Applied Sciences 2

Transcription

1 Table of Contents 6) Overview: web applications Emmanuel Benoist Spring Term 2018 Presentation Server Side Programming Client Side Frameworks JQuery AngularJS Google Web Toolkit - GWT JSON Conclusion Berner Fachhochschule Haute école spécialisée bernoise Berne University of Applied Sciences 1 Berner Fachhochschule Haute école spécialisée bernoise Berne University of Applied Sciences 2 What is a web application? Presentation For the user: it is displayed on a Web browser 1 Firefox (40%), Google Chrome (37%), Safari (12%), Microsoft Edge (3%), Mozilla (2%), Opera (2%),... Hosted on an HTTP server 2 Apache (httpd) (37%) Microsoft IIS (Internet Information Server) (10%) nginx (26%) Uses mainly HTTP HyperText Transfer Protocol and a secure version https (using a TLS tuneling) Berner Fachhochschule Haute école spécialisée bernoise Berne University of Applied Sciences 3 1 Source: statistics of the web site March Source: Market share of the top million busiest sites february-2018-web-server-survey.html February 2018 Berner Fachhochschule Haute école spécialisée bernoise Berne University of Applied Sciences 4

2 Basic Web Architecture Client / Server architecture Firefox Google Chrome Safari Edge Client HTTP / HTTPS Internet Server Apache nginx IIS Client User s computer Runs a browser Evaluate HTML files Generates the Document Object Model (DOM) Client executes JavaScript Scripts are downloaded from the server(s) They are executed inside the browser They manipulate the DOM They can communicate with one or many other servers Server execute server side programming Can server files Can generate files with data from DataBase or data from backend architecture. Files generated or served: HTML pages (DOM), JavaScript programs, images, style sheets (CSS) Technologies used server side PHP, Java,.NET, JavaSript server side (NodeJS)... Berner Fachhochschule Haute école spécialisée bernoise Berne University of Applied Sciences 5 Web Application Architecture Berner Fachhochschule Haute école spécialisée bernoise Berne University of Applied Sciences 6 JavaScript Manipulates DOM DataBase Server Side Programming HTTP / HTTPS HTML / CSS / JavaScript / JSON PHP / Java / C# / Ruby / Python to generate documents Client Server File Server Berner Fachhochschule Haute école spécialisée bernoise Berne University of Applied Sciences 7 Berner Fachhochschule Haute école spécialisée bernoise Berne University of Applied Sciences 8

3 Server Side Programming Programs are executed inside the server Access to resources on the server (files) Access to other servers (Databases, file-servers, storages,... ) Programs generate files to be sent Generate HTML (Document Object Model - DOM), send CSS (Cascading Style Sheet), send JavaScript programs, generate JavaScript programs based on databases (data for JS). Server Side Frameworks Frameworks to generate pages Tasks are very repetitive, every web site contains the same features Layout = template engine A template engine must be used to generate pages with the same layout Define a HTML layout, insert menus, insert data in a page, display forms and results Connection to the data base Define a system for accessing persistant objects stored inside the DB. Easy implementation of daily business tasks Login, CRUD (Create, Read, Update, Delete) items in the DataBase. Berner Fachhochschule Haute école spécialisée bernoise Berne University of Applied Sciences 9 Server Side Frameworks Berner Fachhochschule Haute école spécialisée bernoise Berne University of Applied Sciences 10 Laravel Laravel PHP based frameworks Django Based on Python Ruby on Rails (RoR) Using Ruby Express For NodeJS servers Straight forward to create a default application Code for sending forms For validation of inputs For testing the types of inputs For executing a function Model View Controler Design Pattern The application handels the form and selects the page to be displayed accordingly Berner Fachhochschule Haute école spécialisée bernoise Berne University of Applied Sciences 11 Berner Fachhochschule Haute école spécialisée bernoise Berne University of Applied Sciences 12

4 Laravel example of page 3 Django <body> <div class="flex center position ref full (Route::has( login )) <div class="top right <a href="{{ url( /home ) <a href="{{ route( login ) }}">Login</a> <a href="{{ route( register ) <div class="content"> <div class="title m b md"> Laravel </div> <div ($links as $link) <a href="{{ $link >url }}">{{ $link >title </div> </div> </div> </body> Framework based on Python Offers support For handling URL s (and navigation) For supporting the database For activating Models of the database Help publishing Management of the site is done easily 3 Source: Berner Fachhochschule Haute école spécialisée bernoise Berne University of Applied Sciences 13 Django template 4 Berner Fachhochschule Haute école spécialisée bernoise Berne University of Applied Sciences 14 Django View {% if latest_question_list %} <ul> {% for question in latest_question_list %} <li><a href="/polls/{{ question.id }}/">{{ question. question_text }}</a></li> {% endfor %} </ul> {% else %} <p>no polls are available.</p> {% endif %} from django.http import HttpResponse from django.template import loader from.models import Question def index(request): latest_question_list = Question.objects.order_by( pub_date )[:5] template = loader.get_template( polls/index.html ) context = { latest_question_list : latest_question_list, } return HttpResponse(template.render(context, request)) 4 Source: Berner Fachhochschule Haute école spécialisée bernoise Berne University of Applied Sciences 15 Berner Fachhochschule Haute école spécialisée bernoise Berne University of Applied Sciences 16

5 Client Side Frameworks Client Side Frameworks Written in JavaScript Framework is a JavaScript program It is included inside the page The page contains instructions for the framework One page applications The application is contained in one page The client runs the JavaScript program No direct access to resources of the server Database File system Communication with the server using API API = Application Programming Interface Offers data in JSON format Berner Fachhochschule Haute école spécialisée bernoise Berne University of Applied Sciences 17 Client Side Frameworks Berner Fachhochschule Haute école spécialisée bernoise Berne University of Applied Sciences 18 JQuery Not really a framework Just a library Makes Javascript easy to write Accessing to objects in the DOM is made easy Angular JS Framework for developing client side applications The application is contained in one page React.js A Framework with similar functionalities. Google Web Toolkit Program client side written in Java, compiled in a.class, translated into a JavaScript program. JQuery Berner Fachhochschule Haute école spécialisée bernoise Berne University of Applied Sciences 19 Berner Fachhochschule Haute école spécialisée bernoise Berne University of Applied Sciences 20

6 JQuery Uses Selectors to select elements in the DOM (same syntax as for CSS) $("p").hide() Demonstrates the jquery hide() method, hiding all <p> elements. $("#test").hide() Demonstrates the jquery hide() method, hiding the element with id="test". $(".test").hide() Demonstrates the jquery hide() method, hiding all elements with class="test". $(this).hide() Demonstrates the jquery hide() method, hiding the current HTML element. Berner Fachhochschule Haute école spécialisée bernoise Berne University of Applied Sciences 21 Modify the DOM Add elements in the DOM Append a child to a node $("p").append("some appended to each paragraph."); Add a child as first child $("p").prepend("some prepended text."); Add text before and after -after() or before() var txt1 = "<b>i </b>"; // Create element with HTML $("img").after(txt1); Berner Fachhochschule Haute école spécialisée bernoise Berne University of Applied Sciences 23 Add an Event handler You can define an event for any selector (all elements of one tag, one id, one class,... ) Add the function for each <p> element that hides the element when clicked. $("p").click(function(){ $(this).hide(); }); Add an alert on mouse over the element with id p1: $("p").click(function(){ $(this).hide(); }); Berner Fachhochschule Haute école spécialisée bernoise Berne University of Applied Sciences 22 Other Functions in JQuery Ajax Connect to the same server $("button").click(function(){ $.get("demo_test.asp", function(data, status){ alert("data: " + data + "\nstatus: " + status); }); }); or $("button").click(function(){ $.post("demo_test_post.asp", { name: "Donald Duck", city: "Duckburg" }, function(data, status){ alert("data: " + data + "\nstatus: " + status); }); }); Berner Fachhochschule Haute école spécialisée bernoise Berne University of Applied Sciences 24

7 Angular JS AngularJS Complete framework for developing web application From Templating (insert value in a HTML page) To Model View Controler design pattern Berner Fachhochschule Haute école spécialisée bernoise Berne University of Applied Sciences 25 Template Engine Berner Fachhochschule Haute école spécialisée bernoise Berne University of Applied Sciences 26 Model View Controler Write a loop in the list of phones <html ng app="phonecatapp"> <head>... <script src="bower_components/angular/angular.js"></script> <script src="js/controllers.js"></script> </head> <body ng controller="phonelistctrl"> <ul> <li ng repeat="phone in phones"> <span>{{phone.name}}</span> <p>{{phone.snippet}}</p> </li> </ul> </body> </html> Berner Fachhochschule Haute école spécialisée bernoise Berne University of Applied Sciences 27 Berner Fachhochschule Haute école spécialisée bernoise Berne University of Applied Sciences 28

8 Google Web Toolkit Google Web Toolkit - GWT What is GWT? A development environment in pure Java for rich web applications Provides Java for programming both client and server sides Advantages of GWT Homogenous environment Testing of a web application (using JUnit) Not integrated in JSF Concurent system developed by google Berner Fachhochschule Haute école spécialisée bernoise Berne University of Applied Sciences 29 Principle Berner Fachhochschule Haute école spécialisée bernoise Berne University of Applied Sciences 30 Hello World Application Write Java code Use Java on Server Side But also on a Client Side Communication is handeled conveniently Tests in a JVM Testing is done using JUnit Plugin in the browser Tests are conducted inside one JVM (based on Java Code) Compile into Javascript Creates different versions for different browsers Each browser receives only the right version Can be deployed on Java Servers Or any other server (if the server part is not Java) Download the GWT From Google Code Web site Create an application Execute./webAppCreator -out /home/bie1/test/ ch.bfh.awt.hello A default application is created Includes ant and Eclipse project files Test the Application Go to the directory execute ant devmode Install the plugin in your browser Test the application Berner Fachhochschule Haute école spécialisée bernoise Berne University of Applied Sciences 31 Berner Fachhochschule Haute école spécialisée bernoise Berne University of Applied Sciences 32

9 Directories created Source files: /src/ Package for client side application : /src/ch/bfh/awt/client Server side classes : /src/ch/bfh/awt/server The file /src/ch/bfh/awt/hello.gwt.xml contains the configurations for the GWT application Web Application: /war/ Contains html, css, javascript, gifs, and the like Contains the WEB-INF/ directory (where the server classes are automatically compiled The directory /war/ will receive the JavaScript files compiled from the client application At the end the content of this directory is copied to the server Hello World Hello.html: contains a real HTML Containing layout, References to images, JavaScript, CSS Reference to the script loading the files <script type="text/javascript" language="javascript" src=" hello/hello.nocache.js"></script> And it contains place-holders that will be manipulated from Java. <div id="namefieldcontainer"></div> <div id="sendbuttoncontainer"></div> <div style="color:blue;" id="responsecontainer" ></div> Berner Fachhochschule Haute école spécialisée bernoise Berne University of Applied Sciences 33 HTML FIle <!doctype html> <html> <head> <meta http equiv="content type" content="text/html; charset=utf 8"> <link type="text/css" rel="stylesheet" href="hello.css"> <title>web Application Starter Project</title> <script type="text/javascript" language="javascript" src="hello/hello. nocache.js"></script> </head> <body>... <h1>web Application Starter Project</h1> Please enter your name: <div id="namefieldcontainer"></div> <div id="sendbuttoncontainer"></div> <div style="color:blue;" id="responsecontainer"></div> </body> </html> Berner Fachhochschule Haute école spécialisée bernoise Berne University of Applied Sciences 35 Berner Fachhochschule Haute école spécialisée bernoise Berne University of Applied Sciences 34 Java File Contains the definition of the user interface Definition of the Widgets used, Panels, Text fields, buttons Extends the EntryPoint class Defines the onmoduleload() function. Defines the Event Handling Defines functions to be executed when an Event is fired. Berner Fachhochschule Haute école spécialisée bernoise Berne University of Applied Sciences 36

10 Hello.java package ch.bfh.awt.client; import... / Entry point classes define <code>onmoduleload()</code>. / public class Hello implements EntryPoint { public void onmoduleload() { final Button sendbutton = new Button("Send"); final TextBox namefield = new TextBox(); final Label responselabel = new Label(); RootPanel.get("nameFieldContainer").add(nameField); RootPanel.get("sendButtonContainer").add(sendButton); RootPanel.get("responseContainer").add(responseLabel); namefield.setfocus(true);... // Event Handling } } Berner Fachhochschule Haute école spécialisée bernoise Berne University of Applied Sciences 37 Example: StockWatcher 5 An interface to watch stock values Presentation (when deployed on localhost) localhost:8080/stockwatchergwt User Interface: One page One page A list containing the stocks A field to type the stock into A button to add a new stock Back-office No back-office today Communications with the servers are seen in the next course Communication available: Remote Procedure Call (RPC) in Java Call to JSON data on the same server (PHP for instance) Call to JSON data on another server (against the same origin policy). 5 Source:http: //code.google.com/intl/fr-fr/webtoolkit/doc/latest/tutorial/ Berner Fachhochschule Haute école spécialisée bernoise Berne University of Applied Sciences 39 Widgets List of default widgets Buttons: Button, PushButton, RadioButton,CheckBox,,, Calendar: DatePicker Lists : ListBox, CellList, Trees: MenuBar, Tree with CellTree, Panels: PopoupPanel, StackPanel, HorizontalPanel, VerticalPanel, latest/refwidgetgallery.html Possibility to write your own widgets: latest/devguideuicustomwidgets.html Composite components (composition of existing components) or from scratch in Java code Berner Fachhochschule Haute école spécialisée bernoise Berne University of Applied Sciences 38 JSON Berner Fachhochschule Haute école spécialisée bernoise Berne University of Applied Sciences 40

11 JSON interface server side Extern programs need to access data on the server Data from the database Data in files Data in storages (nosql,... ) External programs are JavaScript programs executed inside a browser, another server needed an API, application for a smart phone. Solution: send data in a standard format Format : JSON (JavaScript Object Notation) JSON Arrays are written with [] Example ["Emmanuel", "Reto", "Eric", "Olivier"] Objects are written with {} Objects are collections of key/values pairs. A key is a string, the value can be anything (incl. an array or an object) {"MRN" : " ", "name" : "Benoist", "firstname" : "Emmanuel", "age" : "35" } Berner Fachhochschule Haute école spécialisée bernoise Berne University of Applied Sciences 41 Example of JSON Berner Fachhochschule Haute école spécialisée bernoise Berne University of Applied Sciences 42 More complex example { } "location" : "my office", "keywords" : ["AJAX", "PHP", "JSP", "Servlets"], "books" : [ { "title" : "Ajax in Action", "authors" : [ { "name" : "Dave Crane", age= 45 }, { "name" : "Eric Pascarello", age="41" } ] }, {... } CDC Data (USA) Berner Fachhochschule Haute école spécialisée bernoise Berne University of Applied Sciences 43 Berner Fachhochschule Haute école spécialisée bernoise Berne University of Applied Sciences 44

12 Conclusion Conclusion Web Application Formerly: Pages displayed one after the other Now integrated applications, one page changes Technolgies used client side HTML to define the Document Object Model CSS to define the layout JavaScript for interacting with the user and the server Languages used server side Anything you want We started with PHP to show the principles Principles: Forms, sessions, DOM,... Berner Fachhochschule Haute école spécialisée bernoise Berne University of Applied Sciences 45 Berner Fachhochschule Haute école spécialisée bernoise Berne University of Applied Sciences 46 Bibliography / Sources february-2018-web-server-survey.html https: //docs.djangoproject.com/en/2.0/intro/tutorial03/ latest/tutorial/ Berner Fachhochschule Haute école spécialisée bernoise Berne University of Applied Sciences 47