DWS


Benvinguts al curs de Desenvolupament Web en entorn Servidor
Mòdul en Anglès 2018-19

Questions: 
Kico Borràs Palmer



Criteris d'avaluació:
nota:
80 % part d'en Kico (mínim treure un 5)
20% part d'en Joan  (mínim treure un 5)

 Llengua vehicular del curs (part d'en Kico) obligatòria: Anglès.
➢ Exàmens (2 o 3 per trimestre): 60 % de la nota. Mínim treure un 4.
➢ Pràctiques obligatòries: 40 % de la nota (1-2 per trimestre). Mínim treure un 5.
➢ Actitud, assistència i feina a classe en Anglès: 0 % de la nota. Mínim treure un 5.
➢ Per aprovar el curs s’han de tenir totes les pràctiques i la mitjana de les avaluacions
aprovades. Per fer mitjana, s'ha de tenir com a mínim un 4 de nota de cada avaluació.
➢ Els treballs entregats fora de plaç, puntuen com a màxim amb un 5.

➢ Un mes abans de final de curs es fa una recuperació obligatòria del 1r trimestre per als suspesos. La nota del trimestre recuperat es un 5.

➢ Si un alumne suspèn el curs, entre Abril i Juny se li faran classes de reforç dels trimestres suspesos per aprovar els examens/pràctiques pendents. La nota del trimestre recuperat es un 5.
Aquestes classes/examens/pràctiques NO seran necessàriament en Anglès.

Miniprogramació del curs
la major part del temari la farem dins les pràctiques llargues trimestrals, de forma molt pràctica.

1r Trimestre:
  • Pràctica de la Biblioteca en PHP + mySQL 


PROPER CURS 2019-20: entrega parcial (15 de novembre): Funcionalitat parcial: Login, gestió de llibres i gestió d'usuaris

entrega (10 desembre): Funcionalitat acabada: manual d'usuari, manual tècnic, codi PHP i taules mySQL.


2on Trimestre:
  • Pràctica de Servlets i JSPs (J2EE)
  • Pràctica de Web Services 

Google Classroom to send activities to the teacher. Use your Ramis gmail account.
code to subscribe: 70m61x


 Resources:
HF - book PHP
W-Book
D-Book
B-Book
HF Book Servlets
Used for the J2EE part of the term
Podcast by Marc Alier - teacher at FIB-UPC
Good overview in english of part of the content of the course

Bible! -Book
Used for Web Services

More ICT Resources in Catalan:
Material IOC del mòdul
Material IOC de tots els mòduls del Cicle

English Resources:
 Word Reference (English dictionary, you can listen how  to say the words)

Introduction:
1- Listening: (not course 2018-19)
Linux Torvalds video (fill in the gaps)

2- Your first experiences with computers  (only if you have not done it before with Kico)
You have to write a document about your first experiences with computers. Where have you started? With whom? Which Operating System have you used? Please describe in at least two pages your first days with computers. Then you can write about your learning and how is your level now: what you can and cannot do, what you would like to learn, etc

Goal: To give the teacher some feedback about your knowledge both in English and in ICT (Information and communication technology)
You have to use the spell checker in English.
sample by the teacher

1st Term

Library Project:
1.- php project: Library management web 
     Project description in Spanish with old technologies
     You will update it!

     Project requirement and evaluation method
    (download the file to read it)

User Manual Sample1
User Manual Sample2
Technical manual Index
Technical manual Sample (from a student, it can contain errors)

Task to do by October 15th: 
Show it to the teacher or send it to the Google Classroom.
  • Read the previous Library project information
a) Review your UML practical done some years ago about that the Library project in ED or adapt the one you did to this topic.

Create the DB dessign:
  • Entity- relationship model (Chen)
  • Create the Database in mySQL 
  • Create a prototype of the Library web application in HTML5. If you want you can use a web editor.
optional: have a look/ use for the prototype the software library Bootstrap
Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.
Build responsive, mobile-first projects on the web with the world's most popular front-end component library.

Interesting to review before you dessign your Library DataBase.

Extra information for your Login

Sticky forms: forms that when you have to re-enter some information they remember the previously given fields

Self-referencing form: A form that contains both the form HTML tags and the php code that processes it.

-->See them at page 239 of the HF- Book !


Jumping to another php page:
If you don't have a self-referencing form, you might need to use the following command when you have an error in a Login page and have to ask the user to try with his credentials again:
header("Location: page-where-you-jump.php")
example: header("Location: script/script1.php")
Download a Sample


PHP programming 

php exercises
You can do it in the order you prefer, first the ones you find easier. I recommend to do them all before you work a lot in your Library project.

logical operators in php (for exer 2)

1.- PHP  introduction
Other PHP resources:
2-  Install XAMPP (php and mySQL)
      Go to the page 157 of your W book: create a form for "Hello world"
      Experiment to do more interesting similar forms

3.- include vs require to incorporate common files to applications
      Consider also include_once and require_once

4.- Examples of Classes:
sort
try it running at my server


5.- Working with Forms  W-Book: form samples  
You can read the W-Book, from page 156
try it online (if server still works...)


6.- Working with a DataBase
Sample to connect to mySQL


7.- Passing information to other pages
setcookie ("name","value","expiring date");
sample:
Cookies and sessions
Test it with cookies enabled/disabled. See how to disable in Firefox here  Disable chrome here
test it on a free server

Sessions using SID when cookies disabled 
test it



8.- Global, local and static variables

single and double quotes:
<?php
$txt = "00Gluten.com";
echo "I love $txt!";
echo 'I love $txt!';
?>

 Will output:
I love 00Gluten.com!
I love $txt!



9.- Table Class exercise 
sample running
solution (for the teacher only)

10.- Editing the DB: W-Book chapter 6
version 2017 with fix
try it

11. Recommendations to do good presentations
Steve Jobs presenting the 1st iPad:


12. SQL Review

SQL quiz

13.- Sample to upload files to the server. Useful for images, profiles, etc.
       Theory explained in w3schools.com 

14.- D-Book Page 437: creation of a Form class. Use it to extend your Table class. Optionally you can use it in your php practical
code to call the form class
solution (teacher only)

solution (open)


Video Khan Accademy about HTTP protocol

more similiar videos at:
Khan Academ: how internet works videos


 Programming at the Server concepts 
Questions about the B Book 

solution (teacher only)



15. The mySQL Catalog:
samples

catalog exerc
catalog exerc - sol (teacher only)

16.- Theory variable variables
Sample
Exercise
Solution (teacher only)


problems with accents and Spanish/Catalan characters:
info: web with the explanation
Summary that in my case works:
Just add this line after the DB connection.
$foo = $conexion->query("SET NAMES 'utf8'");


17.- Filters in PHP 

Note: You will see that it uses === to compare. It gives true if both sides have the same value and both data types are also the same.
 example that gives false
 example that gives true
 
Complete filter reference

18.- Error Handling The default error handling in PHP is very simple. An error
                                   message with filename, line number and a message describing
                                   the error is sent to the browser.

19.-  Exception Handling - Exceptions are used to change the normal flow of a script if
                                            a specified error occurs.
        HF-Book page 719 also covers Exceptions.

More info to read:
http://sce2.umkc.edu/BIT/burrise/pl/design-patterns/

Patterns Game
Patterns Sol (teacher)
http://sce2.umkc.edu/BIT/burrise/pl/design-patterns/qanda.html

More info about Dessign Patterns (HF)




21.- Testing postgreSQL from php
Compare some DBMS: SQLite, MySQL and postgreSQL
ACID DBMS
Sample php to query a table in postgreSQL

22.- Optional task: try a know website API (Facebook. Twitter, IMDB) and from PHP paint some of the data you can get.
sample about IMDB 
api key: ffe7f7a2 

23.- Optional task: download and install the CMS prestashop to build online stores.
prestashop demo website

24.- Optional task: upload your Library project to a free server. For example to AwardSpace.com


PHP quiz


Preparació d'un presupost per la Web de la Biblioteca:
Exemple pressupost senzill (pendrive anys 2000)
Exemple de pressupost Web (real)
Exemple de pressupost James  (real)
Comentaris James (real)

Sumary of Jame's talk (2016?)

Exemple pressupost ben presentat en quan al seu format:
word
drive

Task to do by January 18th: 
Send it to the Google Classroom
1.- Preparació d'un pressupost d'una Web en PHP amb BD.
descripció de la tasca


26.- MVC for PHP book : POO y MVC en PHP por Eugenia Bahit 

Download and test:
Sample to create clean HTML file good for designers (page  36)
Change any of your php files of the library into a template like that. Is it cleaner?
pag. 43 of the book

27.- MVC sample from book (page 36 theory, sample page 42)
run it online

ver 2018


27.a Exercise to do: insert and implement a new option to the menu: "Lista Usuarios"
End of the book material


27.b Do it using the Table class adapted: instead of writting html with echos, it produces a string with all html code that the application can manipulate to send it to the View.
tableclass2

Run how it looks like 

solucion of MVC with User List


2nd Term:

Disseny Orientat a Objectes:
veure més info a llibre HF
presentació problema del Rock @ Roll
sol.lució (nomès profe)

INDEX:
1.- Programming with J2EE: Servlets and JSPs
2.- Bonus Material: Java annotations concept, EJB3 concept, Introduction to Dependency Injection
3.- IDE Menorca Seminar
4.- Web Services
5.- Introduction to Laravel (to be confirmed)
6.- .NET overview (to be confirmed)

HF Book Servlets
Uset for the J2EE part of the term

Platform comparison

Practicals to be done:
  • Servlets practical (with Maps -to be confirmed)
  • Web Services Practical
  • .NET practical (?)

1.- Programming with J2EE: Servlets and JSPs
Eclipse EE installation:

When asked, select "Eclipse EE for Java EE Developers"

For Mac or Ubuntu, download it here

  
1.- Programming with J2EE
We are going to follow the theory of the HF-Book and do our practicals in Eclipse EE with the application server Tomcat.


 
chapter 1: Why use Servlets & JSPs: an introduction (all: pages 35 - 69
chapter 2: Web App Architecture: hig-level overview (all: pages 71 - 99)
chapter 3: mini MVC tutorial: hands-on MVC (all: pages 101 - 125)
chapter 4  GET vs POST and "Idempotent" concept - pages 142-156
chapter 5  Not to be seen but ok to read if you have time 
chapter 6: Session management Mostly pages 260-288
chapter 7: Being a JSP: using JSP mostly pages 315-331
chapter 8: scriptless JSP pages 387..386 (not pages: 387-392) 
           pages 393-416 Carefull: changed on February 11th


Remember many things done using Eclipse, not exactly as in the book. 


For example: Deploy description or deployment paths!





Exercises from the Book





Chapter 1 is explained by the students, as it is not really new material: 

Each student has to choose one part from the following. 



1.-What web servers and clients do. Pag 37-40  

2.-2 min guide to html pag 41-43 

3.-what is the http protocol p 44 - 48

4.-anatomy of the Get and post request p. 49-53 

5.-Locating web pages with url p 54-57 

6.-web seervers, static and dynamic pages p 58-63 

7.-servers desmystified p 64-67 

8.-jsp is what happened...p 68  

9 -Butlet points pag 69 



Chapter 2

Solution exerc pag 74 (teacher only)

Solution table pag 93 (teacher only)

Students will find it at the book page 96



Chapter 3

You have to do the chapter BeerSelection project in Eclipse.

When it works: how can you improve it?

examples:

- add as input if you want a Beer with or without alcohol.

- change the model to be more "intellligent" not depending only on the colour and also providing a greather selection of beers.



teacher's solution



Chapter 4 



General idea of a GET: to fetch  something from the server

General idea of a POST: to update something, give form fields to the server



The GET has to be Idempotent

=> it has to produce no negative issues at the server



but it can:

- return different results in different calls to it (ex: counting hits)

- it can have side effects





The default of a form is a GET, when it is not specified at the <form>



Chapter 7:



solucion exerc pag 324 (teacher only)

JPS options summary:
- Java code (scriptlet): <% ...%>
- directive: <%@ ...%>
    a) page <%@ page import= "..."%>
    ex:  <%@ page import= "foo.*,java.util.*" %>
    b) include
    c) taglib

- expression  <%= ... %>
- declaration <%! ... %>  It can declare attributes and methods from the servlet/JSP class

  Ex1: <%! int count = 0; %>
  Ex2: <%! int doubleCount() {
          count = count*2;
          return count;
          }
      %>


Note not ";" in the directives and expressions, yes in declarations and scriptlets.



Chapter 8: 

 JavaBeans: In computing based on the Java Platform, JavaBeans are classes that encapsulate many objects into a single object (the bean). They have to be classes that are:

1- serializable

2- have a zero-argument constructor

3- allow access to properties using getter and setter methods. They have to follow the standard naming for getters/setters.

4- All attributes have to be private.



- And also, tobe used with JSP:








For use with JSPs, the property type SHOULD be a type that is either a String or a primitive. If it isn’t, it can still be a legal bean, but you won’t be able to rely only on standard actions, and you might have to use scripting.





The name "Bean" was given to encompass this standard, which aims to create reusable software components for Java.

Also explained at the end of pag 386 (HF-Book)  

More info in Spanish



If you don't want Java or the less as possible in a JSP you can:

a) use standard actions 

ex:

<html><body>
<jsp:useBean id=”person” class=”foo.Person” scope=”request” />
Person created by servlet: <jsp:getProperty name=”person” property=”name” />
</body></html>



b) use the Expression Language (EL) HF-Book page 402

ex:

<html><body>
Dog’s name is: ${person.dog.name}
</body></html> 



Practicals: 

1.1 - Install Eclipse EE and Tomcat

1.2 - Servlet Hello World

1.3 - Showing POST data in a Servlet

1.4 - Calling a Servlet with a link (with and without parameters)  

1.5 - Redirecting to  another page in a Servlet

1.6 - Using Servlets/JSPs, create a main form asking for username/password and: 

    1) save the data in cookies to control in other pages that you have logged in 

    2) idem with sessions



 You don't need to use a DataBase. Simulate the correct username/password with constants



 Cookies:

 // creating the cookies 

 Cookie cookie = new Cookie(“username”, name);

 cookie.setMaxAge(30 * 60); // it will be valid 3O minutes 

 response.addCookie(cookie); // cookie send to the client



// Getting the cookies from the client request

Cookie[] cookies = request.getCookies();

for (int i = 0; i < cookies.length; i++) {
    Cookie cookie = cookies[i];
    if (cookie.getName().equals(“username”)) {
      String userName = cookie.getValue();
      out.println(“Hello “ + userName);
      break;
      }
}



Sessions:



// Setting session variables

HttpSession session = request.getSession();

session.setAttribute("sessionName", "value");



// Retrieving session values

HttpSession session = request.getSession(false); //don't create it 

if (session != null) {

       String sessionName = session.getAttribute("sessionName"); 

       }





Show the program to the Teacher to mark it as DONE.

cookies teacher

sessions teacher



Calling a JSP from a Servlet:



At Servlet:



...



request.setAttribute("nom", "Kico"); // data to pass JSP



RequestDispatcher view = request.getRequestDispatcher("myView.jsp");













view.forward(request, response); // here it jumps to JSP



...







At JSP myView.jsp:



...



<% // Here it is Java code, callet "Scriptlet"



String nom = (String) request.getAttribute("nom"); // from Servlet














out.print("<br> hi " + nom + "(written at JSP)"); 



%>



... 









1.7 Create an Expert System to decide which is the best sport for you. Develop it using Servlets/JSPs. 



See here more information 



sample xml file for the Expert System about Sports

info about how to do it



Prototype of an expert system in Prolog: the Teacher will explain it

The
 previous file contains information about how to install and use it. It 
is a way to do the Expert System suggested to be done at class with 
Servlets/JSP.  

The beginning has comments that explain a bit how to install it in Ubuntu and run it with the Prolog interpreter.



1.8 -  JSP/Servlet list of Exercices



1.9 - Compulsary practical: Create a MVC application with Servlets and JSPs to find the best route between two towns in Menorca. Select your vehicle (bike, car, walking) and calculate the expected time to reach destination. Paint the route on top of the map.



2 options:

a) develop all of it, maybe using some of this theory:

Route Finding in Khan Academy

Info in Wikipedia



b) Use the API of GoogleMaps

You will need an id: read this

If you don't want to register, sent an email to the teacher and he will lend you his Key.

In the email you have to say that you will not:


    

  • upload the project to the web
    • 

  • use it for other projects different than this exercise.
    • 




Info in Google (start with the sample at the end of the page)



Google is using these names of towns:








String towns[] = {"Sant LLuis", "Es Castell", "Mahon", "Alaior", "Fornells", "Es Mercadal", "Es Migjorn Gran", "Ferreries", "Ciudadella"}; 









 

Send your practical to Google Classroom.





You will need something like this:


function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
    origin: start,
    destination: end,
    travelMode: 'DRIVING'
  };
  directionsService.route(request, function(result, status) {
    if (status == 'OK') {
      directionsDisplay.setDirections(result);
    }
  });
}

solution - teacher only







2.- Bonus material:



Java annotation:  (source: Wikipedia)

In the Java computer programming language, an annotation is a form of syntactic metadata that can be added to Java source code



This example demonstrates the use of the @Override annotation. It instructs the compiler to check parent classes for matching methods. In this case, an error is generated because the gettype() method of class Cat doesn't in fact override getType() of class Animal like is desired. If the @Override annotation was absent, a new method of name gettype() would be created in class Cat.




public class Animal {
    public void speak() {
    }

    public String getType() {
        return "Generic animal";
    }
}

public class Cat extends Animal {
    @Override
    public void speak() { // This is a good override.
        System.out.println("Meow.");
    }

    @Override
    public String gettype() { // Compile-time error due to mistyped name.
        return "Cat";
    }
}











EJB3, Spring and Dependency Injection Introduction





3.- Seminar by Marc Rosés



Escolta el Podcast del Besuricata a on van entrevistar a en Marc Rosés:



2019-20:

Cartografía de Menorca

Recursos - racó del programador

Anar al darrer: OpenLayers 3 i Leaflet...Exemples de codi font







2017-18:

Enguany farem ús de Phonegap Build, que és la versió cloud de Phonegap, molt útil per a contrsuir app sense haver d'instal·lar res. Només caldrà que tinguin instal·lat XAMPP (o similar) i un editor de textos correcte, alguna cosa un poc millor que el simple Notepad (Notepad++, Sublime, Brackets, Atom.io, etc.)



Material del seminari de Mapes



Correction to the material:

Find the text "I afegirem el següent codi d'estils al final l'arxiu css/index.css:"



From the code that follows, remove this line

#arView, {display:none;}





Resenya de la visita al Blog del Departament



OLD INFO: 

Sessió de phonegap i cartografia per en Marc Rosés 

You can also reach it going to the "racó del programador de la IDE menorca i selccionar el nou taller de Phonegap.

The missing route documentation is done.

Comments by Marc:

1.- Ens faltava crear la pàgina on mostrar la informació de la ruta òptima, per això no la mostrava. Aneu l'apartat "Routing: WebServices per a càlcul de rutes" i cap al final de tot, és quan crea la pàgina que mostra la informació de la ruta a l'arxiu index.htm (busca "PANTALLA INFO RECORREGUT").

2.- Pr si les mosques, torneu a copiar el codi de l'arxiu "js/routing.js" 

   

Instal.lació previa 



Resenya de la seva visita



If you want to use Phonegap Build instead of Phonegap, you don't need to install anything. 

http://cartografia.cime.es/WebEditor/Pagines/p14.htm 

¿Cómo sabe el GPS qué ruta recomendarnos? - El Pais





Servlets exercise to complete the Maps practical:

From the ORIGINAL practical you have done about distances between towns in Menorca you have to add the following changes:

a) Incorporate the list of towns you pass throught and a description of at least one touristic location

per route.

Example1:

If you go from St. Lluis to Ferreries, besides to what we have you put:




    

  • route: St. Lluis-Maó-Alaior-Mercadal-Ferreries
    • 

  • place to visit: El Toro – highest mountain in Menorca. To go take indications from inside Mercadal.
    • 




More info: http://www.disfrutamenorca.com/monte-toro



Example2:

If you go from Ciutadella to Es Migjorn, besides to what we have you put:




    

  • route: Ciutaddella-Ferreries-Es Migjorn
    • 

  • place to visit: Ferreries – Liorna nice restaurant at the old town with gluten free food
    • 




http://www.menorcainfo.net/LIORNA.html



You have to maintain the MVC way of working between your servlets and JSPs.





4.- Web Services

Web Services Material asbaprin (teacher only) 





5.- .NET overview

Resources about it: The "B-Book" 

Platform comparison2 (php vs .NET)



Questions about the previous article 

solution (teacher only) 



Ruby on Rails vs PHP





Install from here Visual Studio. Use the default installation



ASP.NET teacher's notes (profe only)



How to create a Login website









Web service in .Net/VB:








Creating a Web Service

Crearting a WS summary



Task: Using the previous document, create a Web Service in asp.Net. Something simple can be ok, like the example that translates betweeen different kinds of degrees.

Then publish it and connect to it developing a client using J2EE technology. Remember: wsimport, and using the downloaded classes find the way to access to the exposed methods.





Connect to teachers WS for Degrees conversions:



http://192.168.2.183:50340/WebService1.asmx?WSDL



visor web

http://192.168.2.183:50340/WebService1.asmx 



How to create a complete Solution in .Net (Microsoft seminar)



Extra tasks to do:



Task 1: The seven bridges of Königsberg





Question: 

Can you find a way through the city that crosses each bridge exactly once?



solucion (teacher only)

history (teacher only)



Task 2: Entscheidungsproblem

The Entscheidungsproblem asks for an algorithm that takes as input a statement of a first-order logic (possibly with a finite number of axioms beyond the usual axioms of first-order logic) and answers "Yes" or "No" according to whether the statement is universally valid, i.e., valid in every structure satisfying the axioms.

solution





The Turing Machine

A Turing machine is an abstract machine that manipulates symbols on a strip of tape according to a table of rules; to be more exact, it is a mathematical model of computation that defines such a device. Despite the model's simplicity, given any computer algorithm, a Turing machine can be constructed that is capable of simulating that algorithm's logic.


Turing Machine

The teacher will tell you how to see the presentation



Turing Machine description and samples



extra information: On computable numbers - original article by Alan Turing 1936



Task 3: DAFO

Think about your skills and create a table like the one bellow:









Which ones are your strengths? And your weaknesses? Threats? Opportunities?







HF-code







run a solution10



phpMyAdmin https://databases.000webhost.com

id3320127_markianet/password”



id3320127_db1































Comments









  1. Unknown6 May 2017 at 13:12
    This comment has been removed by a blog administrator.
    ReplyDelete











Post a Comment