\chapter{Tutorials}
\section{WMOTU Lab}
\subsection{\label{WMOTULabv1}WMOTU Lab v1}
\href{\ft WMOTULabv1/index.html}{\noindent\includegraphics[width=\linewidth]{WMOTULab1}}

\subsection{\texttt{index.html}}
{\scriptsize \inputminted[tabsize=2, linenos=true]{html}{WMOTULabv1/index.html}}

\subsection{\texttt{html5.html}}
{\scriptsize \inputminted[tabsize=2, linenos=true]{html}{WMOTULabv1/html5.html}}

\subsection{\texttt{style.css}}
{\scriptsize \inputminted[tabsize=2, linenos=true]{css}{WMOTULabv1/style.css}}

\section{\label{WMOTUInvaders}WMOTU Invaders}
\href{\ft WMOTUInvaders}{\noindent\includegraphics[width=\linewidth]{WMOTUInvaders1}}
Developed in the context of the CLISS1 and CLISS2 modules, this game illustrates the simple functional structuring of the classic space invaders. 

The solution consists of three files and demonstrates array, canvas, event and collision handling. JSONP is used to read and save the scores to a MySQL database. \\

\subsection{\texttt{index.html}}
The HTML file provides the HTML content, the CSS styling and 
{\scriptsize \inputminted[tabsize=2, linenos=true]{html}{WMOTUInvaders/index.html}}

\subsection{\texttt{index.js}}
{\scriptsize \inputminted[tabsize=2, linenos=true]{javascript}{WMOTUInvaders/index.js}}

\subsection{\texttt{index.php}}
{\scriptsize \inputminted[tabsize=2, linenos=true]{php5}{WMOTUInvaders/index.php}}

\section{\label{WMOTUInvadersOO}WMOTU Invaders object-oriented}
In order to avoid polluting the global namespace, everything has been packaged into the \texttt{game} object. This illustrates basic object-orientation in JavaScript. \\
\url{\ft WMOTUInvadersOO}
\subsection{\texttt{index.html}}
{\scriptsize \inputminted[tabsize=2, linenos=true]{html}{WMOTUInvadersOO/index.html}}

\subsection{\texttt{index.js}}
{\scriptsize \inputminted[tabsize=2, linenos=true]{javascript}{WMOTUInvadersOO/index.js}}

\subsection{\texttt{index.php}}
{\scriptsize \inputminted[tabsize=2, linenos=true]{php5}{WMOTUInvadersOO/index.php}}

\section{\label{WMOTUAddressBook}WMOTU Address Book}
\href{\ft WMOTUAddressBookFoxi}{\noindent\includegraphics[width=\linewidth]{WMOTUAddressBook1}}

\noindent\includegraphics[width=\linewidth]{WMOTUAddressBook2}
WMOTU has been asked to develop a web app to manage an address book. The user needs to be able to add a new address, display all existing addresses as well as delete or edit them.

\subsection{\texttt{createDB.sql}}
The user probably does not want to reenter all the addresses each time he intends to use our address book, so we need to store them.
A MySQL database is the ideal container for this type of data.
So let's create our database with a MySQL script with all the required instructions.

{\scriptsize \inputminted[tabsize=2, linenos=true]{mysql}{WMOTUAddressBookFoxi/protected/createDB.sql}}

\label{DBCreation}In order to create the database, we can either run this script in the MySQL command line or we use phpMyAdmin.
\subsubsection{Using MySQL command line}
If you work on Foxi, open a SSH shell (using Putty for instance). On Windows, open a Windows command prompt in the project %\verb|restricted|
folder and execute the following:
\begin{enumerate}
\item \verb|mysql -u yourusername -p|
\item \verb|use your_DB_name;|
\item \verb|source createDB.sql;|
\end{enumerate}

\subsubsection{\label{Security}Security}
We create a folder \texttt{WMOTUAddressBookFoxi}, which will contain our app. This folder will be accessible to anyone on the Web. However, our SQL database creation script should not be visible to anyone, as it reveals the whole structure of our database. Therefore we'll put this file into a folder that we name \texttt{protected} and that is only accessible by ourselves. To do this, we will place a file named \verb|.htaccess| with the following contents into this folder:

{\scriptsize \inputminted[tabsize=2, linenos=true]{apacheconf}{WMOTUAddressBookFoxi/protected/.htaccess}}
The first 6 lines are all we need if we want to use the school's LDAP (cf. \url{https://en.wikipedia.org/wiki/LDAP}) service. Just replace the user with your login.
Outside of the school network, we'd use lines 7 - 10 instead.
Authentication type \verb|Basic| sends the user name and password unencrypted. In a production environment we should therefore make sure that all traffic is encrypted using SSL. The Apache \verb|mod_ssl| module would thus need to be configured and enabled.
Line 8 specifies the realm for which the authentication applies. In this case it applies to restricted files.
Line 9 specifies the file where the encrypted password(s) is/are stored.
Line 10 specifies which user(s) is/are authorized to access the restricted files.
For further information about \verb|.htaccess| files, see \url{http://httpd.apache.org/docs/current/howto/htaccess.html}.

Now we'll generate the \verb|.htpasswd| file using the Apache tool \verb|htpasswd|. Go to the \verb|bin| directory of your Apache installation and execute the command \verb|htpasswd -c .htpasswd xyz|, replacing \verb|xyz| with your login name. The tool will ask for the password, which you'll have to enter twice. If the two passwords you've entered are identical, you'll now have a file, which contains the name of the user and his encrypted password. Here is a sample:

{\scriptsize \inputminted[tabsize=2, linenos=true]{text}{WMOTUAddressBookFoxi/protected/.htpasswd}}

Move this file to the \texttt{protected} folder. Try to enter the restricted folder using your web browser. It should now ask for authentication.

Now the folder is protected against unauthorized access via the web, but we also need to protect it from villains on the server itself. Therefore we need to remove all right from other users, using the command \texttt{chmod -R o-rwx protected} in the main directory of our app, which contains the \texttt{protected} folder.

\subsubsection{Using phpMyAdmin}
If you run the script for the first in phpMyAdmin, you need to comment out lines 2 and 3 that drop the tables, as the tables do not yet exist, otherwise phpMyAdmin will stop executing the script.

\vspace*{\baselineskip}
\noindent\url{http://foxi.ltam.lu/phpmyadmin}
\vspace*{\baselineskip}

\hpic{\includegraphics[scale=0.25]{AB1}}
\caption{\label{fig:AB1}Create the DB using phpMyAdmin}
\vspace*{\baselineskip}

If all went well, you now have two new tables in your database. You can check this using \verb|desc AB_users;| and \verb|desc AB_addresses;| in the MySQL command line.
Let's take a closer look at what this script does.
Line 1 is a comment to briefly explain the purpose of the script. Lines 2 and 3 drop any existing tables with these names in our DB. We do this in order to be able to use the script to recreate our tables in case we make modifications. Be careful: lines 2 and 3 delete the tables, including any data they contain! 
Lines 4-8 create table \verb|AB_users|, which, as the name suggests, will hold our user data.
Lines 10-26 create table \verb|AB_addresses|, which will hold our addresses.
Lines 28-41 create dummy user and address data, so that we do not have to type those in manually.

By using a MySQL script we avoid having to retype the commands every time we make changes to our DB structure and we can easily look up the structure of our tables.

\subsection{\label{WMOTUABindex}\texttt{index.php}}
Our app should be usable by any number of users. Each user will be able to manage his own addresses. So we need a sign up and login system and this should be the first page anyone accessing our app sees, unless they are still logged in, in which case they should be taken automatically to the main page. 

The HTTP protocol is stateless, meaning that when a new page is loaded, there is no information left from the previous page. This is not acceptable, as we cannot ask the user to log in again on each page of our app! Sessions allow us to save state information and use it across scripts. Details can be found in the Head First book and the usual online resources (particularly \url{http://php.net}, cf. appendix \ref{Resources}).
 
{\scriptsize \inputminted[tabsize=2, linenos=true]{html+php}{WMOTUAddressBookFoxi/index.php}}

The user needs to be able to enter new or modify existing data. The ideal HTML element for this purpose is a \verb|<form>| (lines 22-35).

\subsection{\label{db_credentials}\texttt{db\_credentials.php}}
This file contains the credentials for accessing the DB. You need to replace these values with your own in order to access your DB. The \texttt{p:} in front of the hostname implies the use of a persistent DB connection (cf. \url{http://php.net/manual/en/mysqli.persistconns.php}).

\begin{scriptsize}
\begin{minted}[tabsize=2, linenos=true]{php}
<?php
	Database::set_credentials('p:localhost', 'your user name', 'your password', 'your DB name');
?>
\end{minted}
\end{scriptsize}

\subsection{\label{WMOTUDB}\texttt{database.php}}
The database class offers our app's DB interface. Thus all DB access takes place in one class and the rest of the app can reuse the functionality provided.

All the properties and methods of the database class are declared static, as they are not related to any specific object. This means we do not need to create a database object, we can simply use the class methods directly using \verb|Database::method|.

{\scriptsize \inputminted[tabsize=2, linenos=true]{php}{WMOTUAddressBookFoxi/database.php}}

\subsection{\label{bouncer}\texttt{bouncer.php}}
This script is used to make sure, that only logged in users can access the page. Everyone else is forwarded to the login and sign up page.

{\scriptsize \inputminted[tabsize=2, linenos=true]{html+php}{WMOTUAddressBookFoxi/bouncer.php}}

\subsection{\texttt{main.php}}
This is the main page, where the addresses of the current user are displayed.
{\scriptsize \inputminted[tabsize=2, linenos=true]{html+php}{WMOTUAddressBookFoxi/main.php}}

\subsection{\texttt{logout.php}}
{\scriptsize \inputminted[tabsize=2, linenos=true]{html+php}{WMOTUAddressBookFoxi/logout.php}}

\subsection{\texttt{header.php}}
To increase the ease of maintenance of our app, we put the parts occurring several times into external scripts. Future changes will only have to be done in a single script.

{\scriptsize \inputminted[tabsize=2, linenos=true]{html+php}{WMOTUAddressBookFoxi/header.php}}

\subsection{\texttt{footer.php}}
{\scriptsize \inputminted[tabsize=2, linenos=true]{html+php}{WMOTUAddressBookFoxi/footer.php}}

\subsection{\texttt{add.php}}
{\scriptsize \inputminted[tabsize=2, linenos=true]{html+php}{WMOTUAddressBookFoxi/add.php}}

\subsection{\texttt{edit.php}}
{\scriptsize \inputminted[tabsize=2, linenos=true]{html+php}{WMOTUAddressBookFoxi/edit.php}}

\subsection{\texttt{delete.php}}
{\scriptsize \inputminted[tabsize=2, linenos=true]{html+php}{WMOTUAddressBookFoxi/delete.php}}

\subsection{\texttt{style.css}}
{\scriptsize \inputminted[tabsize=2, linenos=true]{css}{WMOTUAddressBookFoxi/style.css}}

\section{WMOTU Tank}
We will develop a tank game, where the player battles against computer controlled tanks of increasing intelligence on different playing fields.

The tank body and gun have been created with Inkscape and saved as optimized SVG using the following settings:
\noindent\includegraphics[scale=0.5]{Inkscape_Optimized_SVG}

\noindent\url{\ft WMOTUTank}

\subsection{\texttt{index.html}}
{\scriptsize \inputminted[tabsize=2, linenos=true]{html}{WMOTUTank/index.html}}

\subsection{\texttt{tank.js}}
{\scriptsize \inputminted[tabsize=2, linenos=true]{js}{WMOTUTank/tank.js}}

%\section{WMOTU Book}
%In this tutorial we will develop a bare bones social network to illustrate how to have multiple clients sending complex data structures to the server and receiving either individual or broadcast complex data structures in return. We will focus on the core concepts and not spend much time on styling.
%
%\subsection{Problem description}
%After logging in, a user sees a list of individual messages and can send individual messages to another user, who may or may not be online. He can also join a chat room where each message is broadcast in real time to all users in the room.
%
%\subsection{Requirements analysis}
%\begin{itemize}
%\item We need a signup, login and logout facility.
%\item Messages need to be stored in and retrieved from the database.
%\item After login a user sees all his messages, a list of all users, including their online status, as well as a list of all chat rooms, including the number of people currently in each room.
%\item A user can join any chat room at any time. After joining he can leave the room.
%\item All users inside a room receive messages sent by any room participant in real time. All chat room messages are stored in the database.
%\item A user can send an individual message to any other user.
%\end{itemize}
%
%\subsection{Design}
%\begin{itemize}
%\item At a minimum we need a database table for users and one for messages.
%\item For signup, login and logout we can use the techniques applied in WMOTU Address Book, WMOTU Quack etc., meaning forms and sessions.
%\item JSON is well suited to represent the complex data structures we want to send to and receive from the server.
%\item Server-sent events allow near real-time broadcasting to any number of clients.
%\end{itemize}
%
%\subsection{Implementation}
%\subsubsection{\texttt{createDB.sql}}
%{\scriptsize \inputminted[tabsize=2, linenos=true]{mysql}{WMOTUBook/protected/createDB.sql}}
%
%\subsubsection{\texttt{index.php}}
%{\scriptsize \inputminted[tabsize=2, linenos=true]{html+php}{WMOTUBook/index.php}}

%\section{Solvo}
%\subsection{Requirements specification}
%We are going to develop a pedagogical platform that allows teachers to set up courses with gradable assignments and students to submit assignments.
%The following requirements need to be met:
%\begin{itemize}
%\item The system is only accessible through authentication via user name and password.
%\item Assignments can only be completed in sequential order and only the currently worked on assignment as well as the previous ones are accessible.
%\item The only way to advance is by submitting one or several solution files and/or a text that get(s) validated by the teacher.
%\item Students can see their current achievement level as well as their class ranking at any time.
%\item The system must be absolutely secure, meaning that a student can only access the assignments that he or she is authorized for.
%\end{itemize}
%
%\subsection{Analysis}
%\subsubsection{Security}
%The DB user table contains the login user names of the people (students and teachers) who may access the system. Users can change their password at any time.
%
%Each module has its own folder. Each assignment has a folder in the module folder, with its own \texttt{.htaccess} file.
%
%When a student achieves a pass grade on a submitted assignment, his user name and encrypted password will be added to the \texttt{.htaccess} file of the next assignment folder.
%
%\subsubsection{Teacher}
%After login, a teacher can do the following:
%\begin{itemize}
%\item Change his password.
%\item Select one of his modules, in order to:
%\begin{itemize}
%\item View or edit the content. Module content consists of HTML entered via an editor and/or documents that can be attached.
%\end{itemize}
%\end{itemize}
%
%\subsubsection{Student}
%
%\subsection{Design}
%\subsubsection{DB}
%We need the following tables:
%\begin{enumerate}
%\item \texttt{SOLVE\_users} with the fields \texttt{id}, \texttt{|user\_name}, \texttt{password}
%\end{enumerate}

\section{Web Note}
\href{\ft WebNote}{\noindent\includegraphics[width=\linewidth]{WebNote1}}

\subsection{Requirements specification}
We often come across information on the web that we would like to store in order to access it from anywhere at a later point in time. Web Note allows registered users to create timestamped notes with editable HTML content.

The following requirements need to be met:
\begin{itemize}
\item Secure user sign up, login, logout and password change.
\item Timestamps and names of all user notes are displayed. Clicking on one of them will display the note name and content together with edit and delete functionality.
\item A new note with name and HTML content can be added with the current timestamp generated automatically or the new note can be discarded.
\item High speed app with no page reload except for login/logout.
\end{itemize}

\subsection{Analysis}
This app consists of the following parts:
\begin{itemize}
\item A MySQL DB to store users and notes.
\item A PHP backend to manage the DB operations.
\item A PHP AJAX API, providing JavaScript access to the PHP backend.
\item A HTML5/CSS3/JavaScript frontend.
\end{itemize}

\subsection{Design and implementation}
\subsubsection{DB}
\noindent\includegraphics{dbWebNote1}

\noindent\url{\ft WebNote/createDB.sql}
{\scriptsize\inputminted[tabsize=2, linenos=true]{mysql}{WebNote/createDB.sql}}

\subsubsection{Backend}
The backend provides a \verb|Database| class with the following functionality:
\begin{itemize}
\item \verb|set_credentials|
\item \verb|connect|
\item \verb|get_user_name|
\item \verb|insert_note|
\item \verb|update_note|
\item \verb|delete_note|
\item \verb|get_note|
\item \verb|get_notes|
\item \verb|change_password|
\item \verb|login|
\item \verb|create_user|
\end{itemize}

\paragraph{\texttt{Database.php}}
{\scriptsize\inputminted[tabsize=2, linenos=true]{php}{WebNote/protected/Database.php}}

\subsubsection{API}
The API provides the following self-explanatory functionality:
\begin{itemize}
\item \verb|get_notes|
\item \verb|insert_note|
\item \verb|update_note|
\item \verb|delete_note|
\item \verb|logout|
\item \verb|change_password|
\end{itemize}

\paragraph{\texttt{API.php}}
{\scriptsize\inputminted[tabsize=2, linenos=true]{php}{WebNote/API.php}}

\subsubsection{Frontend}
First we have the usual login, logout and bouncer scripts:

\paragraph{\texttt{index.php}}
{\scriptsize\inputminted[tabsize=2, linenos=true]{html+php}{WebNote/index.php}}

\paragraph{\texttt{index.css}}
{\scriptsize\inputminted[tabsize=2, linenos=true]{css}{WebNote/index.css}}

\paragraph{\texttt{logout.php}}
{\scriptsize\inputminted[tabsize=2, linenos=true]{php}{WebNote/logout.php}}

\paragraph{\texttt{bouncer.php}}
{\scriptsize\inputminted[tabsize=2, linenos=true]{php}{WebNote/protected/bouncer.php}}

The frontend defines an object \verb|main|, with the following functionality:
\begin{itemize}
\item \verb|init| attaches event listeners and gets all notes from the DB.
\item \verb|AJAXFunctionCall| is a helper function to call the API asynchronously via AJAX.
\item \verb|getNotesFromDB| retrieves the user's notes from the DB via the API and displays them.
\item \verb|showNote| displays a specific note.
\item \verb|deleteNote| deletes the currently shown note.
\item \verb|editNote| opens the editor for the currently shown note.
\item \verb|cancelEdit| closes the editor without saving.
\item \verb|saveNote| closes the editor and saves the note.
\item \verb|newNote| opens an empty editor.
\item \verb|insertNote| saves the new note.
\item \verb|discardNewNote| closes the editor without saving.
\item \verb|changePW| displays the password change form.
\end{itemize}

The editor component CKEditor (\url{http://ckeditor.com}) is used.

\paragraph{\texttt{main.php}}
{\scriptsize\inputminted[tabsize=2, linenos=true]{html+php}{WebNote/main.php}}

\paragraph{\texttt{main.js}}
{\scriptsize\inputminted[tabsize=2, linenos=true]{js}{WebNote/main.js}}

\paragraph{\texttt{main.css}}
{\scriptsize\inputminted[tabsize=2, linenos=true]{css}{WebNote/main.css}}

\section{Feedo}
\subsection{Requirements specification}
Feedo is a RSS and Atom feed reader offering the following features:
\begin{itemize}
\item Import and export of OPML files.
\item User specific feed selection from a large list of stored feeds plus the option to add any feed to the DB.
\item 
\end{itemize}

\subsection{Analysis}
This app consists of the following parts:
\begin{itemize}
\item A MySQL DB to store users, feeds, items etc.
\item A PHP backend to manage the DB operations.
\item A PHP AJAX API, providing JavaScript access to the PHP backend.
\item A HTML5/CSS3/JavaScript frontend.
\end{itemize}

\subsection{Design and implementation}
\subsubsection{DB}
\noindent\includegraphics[width=\linewidth]{dbFeedo1}

\noindent\url{\ft Feedo/createDB.sql}
{\scriptsize\inputminted[tabsize=2, linenos=true]{mysql}{WebNote/createDB.sql}}

\subsubsection{Backend}
The backend provides a \verb|Database| class with the following functionality:
\begin{itemize}
\item \verb|set_credentials|
\item \verb|connect|
\item \verb|get_user_name|
\item \verb|insert_note|
\item \verb|update_note|
\item \verb|delete_note|
\item \verb|get_note|
\item \verb|get_notes|
\item \verb|change_password|
\item \verb|login|
\item \verb|create_user|
\end{itemize}

\paragraph{\texttt{database.php}}
{\scriptsize\inputminted[tabsize=2, linenos=true]{php}{WebNote/database.php}}

\subsubsection{API}
The API provides the following functionality:
\begin{itemize}
\item \verb|insert_note|
\item \verb|update_note|
\item \verb|delete_note|
\item \verb|logout|
\item \verb|change_password|
\end{itemize}

\paragraph{\texttt{API.php}}
{\scriptsize\inputminted[tabsize=2, linenos=true]{php}{Feedo/protected/API.php}}

\subsubsection{Frontend}
First we have the usual login, logout and bouncer scripts:

\paragraph{\texttt{index.php}}
{\scriptsize\inputminted[tabsize=2, linenos=true]{html+php}{WebNote/index.php}}

\paragraph{\texttt{index.css}}
{\scriptsize\inputminted[tabsize=2, linenos=true]{css}{WebNote/index.css}}

\paragraph{\texttt{logout.php}}
{\scriptsize\inputminted[tabsize=2, linenos=true]{php}{WebNote/logout.php}}

\paragraph{\texttt{bouncer.php}}
{\scriptsize\inputminted[tabsize=2, linenos=true]{php}{WebNote/bouncer.php}}

The frontend defines an object \verb|main|, with the following functionality:
\begin{itemize}
\item \verb|insert_note|
\item \verb|update_note|
\item \verb|delete_note|
\item \verb|logout|
\item \verb|change_password|
\end{itemize}

The editor component CKEditor (\url{http://ckeditor.com}) is used.

\paragraph{\texttt{main.php}}
{\scriptsize\inputminted[tabsize=2, linenos=true]{html+php}{WebNote/main.php}}

\paragraph{\texttt{main.js}}
{\scriptsize\inputminted[tabsize=2, linenos=true]{js}{WebNote/main.js}}

\paragraph{\texttt{main.css}}
{\scriptsize\inputminted[tabsize=2, linenos=true]{css}{WebNote/main.css}}