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

Criteris d'avaluació:
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

entrega (10 desembre): 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

HF - book PHP
HF Book Servlets
Used for the J2EE part of the term

Bible! -Book
Used for Web Services

Sample free web server:

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)

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:
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");
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:
$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:

catalog exerc
catalog exerc - sol (teacher only)

16.- Theory variable variables
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.
$kk = $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:

Patterns Game
Patterns Sol (teacher)

More info about Dessign Patterns (HF)

21.- Testing postgreSQL from php
Compare some DBMS: SQLite, MySQL and postgreSQL

Sample php to query a table in postgreSQL
Connect to the teacher's computer and test this script at:   (old)

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 

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

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

Exemple pressupost ben presentat en quan al seu format:

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)

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.

Laravel course 2017
We will cover it during the 2nd Term, after seen MVC with J2EE.


2nd Term:

1.- Programming with J2EE: Servlets and JSPs
     Patrons de disseny en Java (Joan Grimalt - 7 sessions en dilluns)
2.- Introduction to Dependency Injection
3.- IDE Menorca Seminar
4.- Web Services
5.- Introduction to Laravel
6.- .NET overview

HF Book Servlets
Uset for the J2EE part of the term

Platform comparison

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

Eclipse EE installation:

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

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
chapter 2: Web App Architecture: hig-level overview
chapter 3: mini MVC tutorial: hands-on MVC
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 mostly pages 393-410 (not pages: 388-390)

Remember many things done using Eclipse, not exactly as in the book. 
For example: Deploy description or deployment paths!

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)

Chapter 4 
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:
- serializable
- have a zero-argument constructor
- allow access to properties using getter and setter methods. They have to follow the standard naming for getters/setters.
- All attributes have to be private.
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 286 (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 
<jsp:useBean id=”person” class=”foo.Person” scope=”request” />
Person created by servlet: <jsp:getProperty name=”person” property=”name” />


b) use the Expression Language (EL) HF-Book page 402
Dog’s name is: ${person.dog.name}

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

 // 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);


// 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 viewrequest.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 whish is the best sport for you. Develop it using Servlets/JSPs. More information in one of the exercices of the list at point 1.8.

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
Info in Google (start with the sample at the end of the page)

Send your practical to Google Classroom.

2.- Dependency Injection Introduction

3.- Seminar by Marc Rosés

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

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.
¿Cómo sabe el GPS qué ruta recomendarnos? - El Pais

4.- Web Services

Create a Web service Server and its client for a Java application you already have or a simple one you might create quickly.
Agree with someone else in the classroom to test his/her Web Service.

Create a program to exchange between diferents degrees units (Celsius, Farenhait and Kelvin)  and expose it as a Web Service.

Show it to the teacher in your Computer. It does not need to be uploaded.

Watch this video about RESTful web services, and answer

Other interesting articles 

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:

visor web

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

Extra tasks to do:

Task 1: The seven bridges of Königsberg

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.

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?



  1. This comment has been removed by a blog administrator.


Post a Comment