Tp2 Emacs Développement Web

Tp2 Emacs Développement Web
Les indications ci-dessous donnent les grandes lignes du développement.
1/ Evenement Ajax Jquery:
Le code javascript jquery suivant permet d’afficher un message dans un span dont l’id est
message au lieu de mettre un message d’alerte. Mettez en place ce code.
$(document).ready(function(){
$("a").click(function(event){
$("span#message").append("Menu 1! ");
event.preventDefault();d
});
});
Ce bout de code en javascript permet de faire un appel en ajax au controleur avec la méthode
GET pour envoyer des données, lier ce code au fait de cocher ou de décocher la case à coche.
function doControleur() {
$.ajax( {
type : "GET",
url : "MainControleur",
dataType: "xml",
timeout : 1000,
data : { id : 1 , vue : "ajax" , action : "activate" },
success : function(xml) {
var reponse = $(xml).find("message").attr("success");
alert("Reponse XML: " + reponse );
},
error : function(xml) {
alert('Erreur Ajax');
}
});
}
Attention le renvoie de données depuis la Jsp doit comporter dans l’entête que c’est de l’Xml
qui est retourné :
<% response.setContentType("text/xml"); %><?xml version="1.0"
encoding="ISO-8859-1" ?>
<message success="true" />
2/ La base de données Mysql:
Démarrer Easyphp pour disposer d’une base de données Mysql .
Utiliser l’interface phpMyAdmin accessible via l’adresse suivante :
http://localhost/home/mysql/

L’outil phpMyAdmin permet de gérer le serveur de base de données installé sur votre PC.
Il utilise le serveur Apache Web Server et non Apache Jakarta Tomcat.
Apache Web Server est à l’écoute sur le port 80 alors que Tomcat est à l’écoute sur le port
8080.
Utiliser l’outil PhpMyAdmin pour créer un utilisateur de base de données (menu Privilèges) et
donner lui tout les droits sur une base de données unique.
Notez le nom de l’utilisateur, le mot de passe utilisé et le nom de la base de données.
Exécutez la requête SQL suivante pour créer une table :
CREATE TABLE todo (
id INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
texte VARCHAR( 100 ) NOT NULL ,
actif BOOL NOT NULL
)
Utilisez l’outil PhpMyAdmin pour insérer des données pour nos tests. Remarquez que le
champ id est automatiquement incrémenté.
3/ La connexion JDBC entre Java et Mysql:
Il faut télécharger le driver JConnector mysql-connector-java-5.1.26.zip
Il faut extraite le fichier mysql-connector-java-5.1.26-bin.jar et le copier dans le dossier
apache-tomcat \lib\
ou le placer dans le projet dossier WebContent/WEB-INF/lib/ pour un déploiement projet par
projet.
Ajouter le jar externe au projet eclipse : clic droit sur le projet > build path > Configure build
path > Libraries

La classe suivante dans le package dao va permettre de charger depuis la base de données les
todos.
package dao;
import metier.Application;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
public class ApplicationHelper {
private static Connection connection = null;
private static boolean mysqlConnection(){
try{
Class.forName("com.mysql.jdbc.Driver").newInstance();
connection = java.sql.DriverManager.getConnection(

"jdbc:mysql://localhost:3306/votrebasededonnee?user=votreutilisateur&passwo
rd=sonmotdepasse");
} catch(Exception e){
return false;
}
return true;
}
public static boolean load(){
if ( mysqlConnection()){
try {
PreparedStatement preparedStatement =
connection.prepareStatement("select * from todo");
ResultSet resultSet =
preparedStatement.executeQuery();
while (resultSet.next()) {
String texte =
resultSet.getString("texte");
boolean actif =
resultSet.getBoolean("actif");
Application.getInstance().addTodo(texte,
actif);
}
} catch (SQLException e) {
return false;
}
}else{
return false;
}
return true;
}
4/ Mettre à jours le champ actif à partir de l’identifiant de todo:
public static int updateTodo(boolean actif , int id){
if ( mysqlConnection()){
try {
PreparedStatement preparedStatement =
connection.prepareStatement("update todo set actif=? where id=?");
preparedStatement.setBoolean(1, actif);
preparedStatement.setInt(2, id);
return preparedStatement.executeUpdate();
} catch (SQLException e) {
return -1;
}
}else{
return -1;
}
}

5/ CRUD
A partir de la mise à jour ci-dessus, réalisez les fonctionnalités du CRUD (Create, Retrieve,
Update, Delete).
Cette mise à jour doit inclure le champ id dans la classe todo qui doit être lié à l’ID
automatiquement généré par Mysql.