\chapter{IDE, SFTP and SSH configuration}
\section{NetBeans}
Download NetBeans from \url{https://netbeans.org/downloads}.

\noindent\includegraphics[width=\linewidth]{NetBeansDownload1}

If this is the first time you install NetBeans on your device, you need to install the Java Development Kit (JDK) first (point 1 on the screenshot). This will open the following screen:

\noindent\includegraphics[width=\linewidth]{JDKDownload1}

\noindent\includegraphics[width=\linewidth]{JDKDownload2}

Accept the license agreement and select the right JDK version for your operating system.

When the JDK is installed you can install NetBeans. For our purposes we only need the HTML5 + PHP version (point 2).

Alternatively you can install the NetBeans Java SE bundle (point 3), which includes the JDK and NetBeans. This will taker you to the following screen:

\noindent\includegraphics[width=\linewidth]{NetBeansJDKDownload1}

Accept the license agreement and select the right JDK version for your operating system.

\subsection{Portable installation}
If you want to install NetBeans on a portable device, you can download it as a zip file (point 4 on the first screenshot in the previous subsection.) This will taker you to the following screen:

\noindent\includegraphics[width=\linewidth]{NetBeansPortable1}

\subsection{HTML5 Project setup}
Click on \includegraphics[scale=0.42]{NetBeansNewProjectIcon} or File -> New Project... or Ctrl + Shift + N: \\

\noindent\includegraphics[width=\linewidth]{NetBeansHTML5Project1}
%\caption{\label{fig:NetBeansHTML5Project1}Create a new NetBeans HTML5 project}
\vspace*{\baselineskip}

\pagebreak
Specify the name of your project and where you'd like to save it: \\

\noindent\includegraphics[width=\linewidth]{NetBeansHTML5Project2}
%\caption{\label{fig:NetBeansHTML5Project2}Name and locate a new NetBeans HTML5 project}
\vspace*{\baselineskip}

We don't use site templates: \\

\noindent\includegraphics[width=\linewidth]{NetBeansHTML5Project3}
%\caption{\label{fig:NetBeansHTML5Project3}Site template selection}
\vspace*{\baselineskip}

\pagebreak
We also don't use a JavaScript library, so we can just click on Finish: \\

\noindent\includegraphics[width=\linewidth]{NetBeansHTML5Project4}
%\caption{\label{fig:NetBeansHTML5Project4}JavaScript library selection}
\vspace*{\baselineskip}

You can now see your new HTML5 project structure in the upper left corner. NetBeans has also opened the \texttt{index.html} file, which is the default name of the main project HTML5 file: \\

\noindent\includegraphics[width=\linewidth]{NetBeansHTML5Project5}
%\caption{\label{fig:NetBeansHTML5Project5}Our new HTML5 project}
\vspace*{\baselineskip}

The content of this file is defined in the corresponding template. See \ref{NetBeans templates} for guidance on how to change this.

\pagebreak
In order to add a new file to your project, right click on 
Site Root and select the file type: \\

\noindent\includegraphics[width=\linewidth]{NetBeansHTML5Project6}
%\caption{\label{fig:NetBeansHTML5Project6}Adding a new file to the HTML5 project}
\vspace*{\baselineskip}

\subsection{PHP Project setup}
Click on \includegraphics{NetBeansNewProjectIcon} or File -> New Project... or Ctrl + Shift + N. If you are using an older version of NetBeans (< 7.4), you may need to install the PHP plugin via Tools -> Plugins -> Available Plugins and select PHP. After restarting NetBeans, you should get the following screen when creating a new project: \\
\noindent\includegraphics[width=\linewidth]{NetBeans1}
%\caption{\label{fig:NetBeans1}Create a new NetBeans PHP project}
\vspace*{\baselineskip}

Specify the name of your project and where you'd like to save it. Choose the latest PHP version and keep UTF-8 as the default encoding. The latter makes sure, that non-English characters such as é or ä are handled correctly: \\

\noindent\includegraphics[width=\linewidth]{NetBeans2}
%\caption{\label{fig:NetBeans2}Name and locate a new NetBeans project}
\vspace*{\baselineskip}

If you want to run your project on your local web server, select the corresponding option. We'll run our projects on Foxi, thus we specify \texttt{Remote Web Site (FTP, SFTP)}: \\

\noindent\includegraphics[width=\linewidth]{NetBeans3}
%\caption{\label{fig:NetBeans3}NetBeans run configuration}
\vspace*{\baselineskip}

In order to be able to upload our files to Foxi, we need to define a remote connection, thus we need to click on Manage....

\noindent\includegraphics{NetBeans4a}

The host name is \texttt{foxi.ltam.lu}. The port number needs to be 22. Enter your IAM code as user name and your 11-digit matricule as password (cf. appendix \ref{HOWTOFoxi} to learn how to change your password). The initial directory should be set to \texttt{/www/your class/your IAM code}: \\

\noindent\includegraphics[width=\linewidth]{NetBeans4b}
%\caption{\label{fig:NetBeans4}Manage remote NetBeans connection}
\vspace*{\baselineskip}

Now click the connection test button. You should get the following prompt, which you should confirm: \\

\noindent\includegraphics[width=\linewidth]{NetBeans5}
%\caption{\label{fig:NetBeans5}Foxi certificate confirmation}
\vspace*{\baselineskip}

The following dialog should appear: \\

\noindent\includegraphics{NetBeans6}
%\caption{\label{fig:NetBeans6}Foxi connection success}
\vspace*{\baselineskip}

Now you can click on OK. We do not use any PHP framework, so you can click the Finish button in the final dialog. In the projects window (top left) you should now see your new PHP project. You can expand the project structure by clicking on the +-sign in front of it. Under Source Files you'll see your new PHP project: \\

\noindent\includegraphics[width=\linewidth]{NetBeans6a}
%\caption{\label{fig:NetBeans6a}New PHP project}
\vspace*{\baselineskip}

You can now start working on your project. When you save your changes, you'll have to confirm that you want to connect to Foxi. You'll then see confirmation in the output window that the file has been uploaded to Foxi: \\

\includegraphics[width=\linewidth]{NetBeans7}
%\caption{\label{fig:NetBeans7}NetBeans output window}
\vspace*{\baselineskip}

\noindent\parbox{\textwidth}{We can verify this using our SFTP client (cf. \ref{SFTP}): \\

\includegraphics[width=\linewidth]{NetBeans8}}
%\caption{\label{fig:NetBeans8}Check NetBeans file upload with WinSCP}
\vspace*{\baselineskip}

We can add a new file to our project by right clicking on Source Files and selecting New -> PHP File...: \\

\noindent\includegraphics[width=\linewidth]{NetBeans9.png}
%\caption{NetBeans project setup}

\subsection{Database connection setup}
In order to connect to MySQL on Foxi we need to open a secure shell (SSH) tunnel. Given that NetBeans does not provide a built-in tunnel functionality, we need to use an external SSH client, for instance Putty  (\url{http://www.chiark.greenend.org.uk/~sgtatham/putty/download.html}). \\

\pagebreak
Enter the tunnel data: \\

\noindent\includegraphics[width=\linewidth]{NetBeansDBTunnel1} \\

\pagebreak
Then add the tunnel: \\

\noindent\includegraphics[width=\linewidth]{NetBeansDBTunnel2} \\

\pagebreak
Save the session: \\

\noindent\includegraphics[width=\linewidth]{NetBeansDBTunnel3} \\

Create a new DB connection: \\

\noindent\includegraphics{NetBeansDBTunnel4} \\

\noindent\includegraphics[width=\linewidth]{NetBeansDBTunnel5} \\

\noindent\includegraphics[width=\linewidth]{NetBeansDBTunnel6} \\

Set the default DB: \\

\noindent\includegraphics{NetBeansDBTunnel7} \\

\noindent\includegraphics[width=\linewidth]{NetBeansDBTunnel8} \\

View table data: \\

\noindent\includegraphics{NetBeansDBTunnel9} \\

\noindent\includegraphics[width=\linewidth]{NetBeansDBTunnel10}

\subsection{\label{NetBeans templates}Template adjustment}

\hpic{\includegraphics[scale=0.33]{NetBeans10.png}}
\hpic{\includegraphics[scale=0.33]{NetBeans11.png}}
\hpic{\includegraphics[scale=0.33]{NetBeans12.png}}
%\caption{NetBeans template adjustment}

\subsection{Useful NetBeans shortcuts}
Pressing Alt + Shit + F or selecting Source -> Format will reformat the source code according to the settings in Tools -> Options: \\

\includegraphics[width=\linewidth]{NetBeansFormatting}
%\caption{\label{fig:NetBeansFormatting}Reformat the source code}
\vspace*{\baselineskip}


\section{PhpStorm}
PhpStorm is the ideal IDE for web app development. It provides full database and server integration.

\subsection{Portable installation}
To install PhpStorm on a portable drive, go to \url{http://www.jetbrains.com/phpstorm/download} and click the \verb|Get| button. Cancel the automatic download of the \verb|.exe| file and right click \verb|direct link|, select \verb|Copy Link Location|, paste the link into a new tab and replace the \verb|exe| extension with \verb|zip|, then press enter. This will download and open the zipped version of PhpStorm. Extract it to your portable drive.

\sloppypar Open the file \verb|bin/idea.properties|, replace the line starting with \verb|#idea.config.path| with \verb|idea.config.path=${idea.home}/.WebIde/config|,
\verb|#idea.system.path| with \verb|idea.system.path=${idea.home}/.WebIde/system|, \verb|#idea.plugins.path| with \verb|idea.plugins.path=${idea.config.path}/plugins| and \verb|#idea.log.path| with \verb|idea.log.path=${idea.system.path}/log|.

If you have settings from another PhpStorm installation that you'd like to import, you can do this via \verb|File -> Import Settings...|.

\subsection{Project setup}
First, we set all file encodings to UTF-8 in order to avoid any problems with special characters: \\

\noindent\includegraphics[width=\linewidth]{phpStorm0}
%\caption{File encodings}
\vspace*{\baselineskip}

\pagebreak
Now we configure a new project: \\

\noindent\includegraphics{phpStorm1}
\noindent\includegraphics[width=\linewidth]{phpStorm2}
\noindent\includegraphics[width=\linewidth]{phpStorm3}
\noindent\includegraphics[width=\linewidth]{phpStorm4}
\noindent\includegraphics[width=\linewidth]{phpStorm5} \\

\hpic{\includegraphics[width=\linewidth]{phpStorm6.png}}

\hpic{\includegraphics[width=\linewidth]{phpStorm7.png}}
\hpic{\includegraphics{phpStorm8.png}}
\hpic{\includegraphics[width=\linewidth]{phpStorm9.png}}

\hpic{\includegraphics[width=\linewidth]{phpStorm10.png}}
\hpic{\includegraphics[width=\linewidth]{phpStorm11.png}}
\hpic{\includegraphics[width=\linewidth]{phpStorm12.png}}

\hpic{\includegraphics[width=\linewidth]{phpStorm13.png}}
%\caption{PhpStorm project setup}

\subsection{\label{PhpStorm Db Setup}Database connection setup}
%\subsubsection{PhpStorm versions before 7.1}
%\hpic{\includegraphics[width=\linewidth]{phpStormDB.png}}
%
%\hpic{\includegraphics[width=\linewidth]{phpStorm14.png}}
%%\caption{PhpStorm database connection setup}
%
%\subsubsection{PhpStorm versions 7.1 and above}
First we need to make sure that the drivers are loaded: \\

\noindent\includegraphics[width=\linewidth]{createDB2}
\vspace*{\baselineskip}

\pagebreak
Then we need to create a data source: \\

\noindent\includegraphics[width=\linewidth]{createDB3}
\vspace*{\baselineskip}

Make sure to set the scope (upper right corner) to IDE, so that you don't need to configure it for each project: \\

\noindent\includegraphics[width=\linewidth]{createDB4}
\vspace*{\baselineskip}

\subsection{\label{PhpStorm templates}Template adjustment}
\hpic{\includegraphics[scale=0.25]{phpStorm15}}
%\caption{PhpStorm template adjustment}

\section{\label{SFTP}SFTP}
SFTP is the secure, i.e. encrypted, version of FTP, the file transfer protocol. As its name suggests, it is used to transfer files from our development machine to the server and vice versa.
There are a number of SFTP clients freely available, e.g. Filezilla. I prefer WinSCP (\url{http://winscp.net/eng/index.php}). Download the portable executable and unzip it to a folder of your choice. Set the configuration storage option on the storage page in the preferences dialog to \verb|INI file|. This will lead WinSCP to save its configuration in an ini file in the same folder where the program itself is located. If you have stored WinSCP on your USB stick, the configuration will also be stored there, so you won't have to reenter the server data every time you use the program: \\

\noindent\includegraphics[width=\linewidth]{WinSCP1.png}
%\caption{\label{fig:WinSCP1}Set WinSCP storage preferences}

Set up your server connection and click \verb|save|. Click \verb|login| to connect to the server and begin transferring your files: \\

\noindent\includegraphics[width=\linewidth]{WinSCP2.png}
%\caption{\label{fig:WinSCP2}Configure WinSCP login}

\section{SSH}
You can connect to Foxi using a secure shell (SSH) client such as Putty (\url{http://www.chiark.greenend.org.uk/~sgtatham/putty/download.html}).