[Java + AngularJS] Une application de gestion d’élèves partagée avec Eclipse, AngularJs et Java,Jersey,Maven + Mysql en Back end. Un Français Intégral pour ce système CRUD à Services WEB!

maisonSommaire


  • Introduction
  • Une photo de la micro application
  • Le but de l’application
  • Le matériel nécessaire
  • Les liens utiles en Anglais
  • On crée le projet dans Eclipse
  • On construit le Front End
  • On crée notre table SQL  » eleves »
  • On crée notre classe Pojo « eleve »
  • On construit la classe Back End des Web Services CRUD (Lire, Créer, Editer, Supprimer)
  • On construit la classe Back End DAO(Data Access Object) qui actionne MYSQL
  • On construit la classe connexion qui permet la connexion à la base  de données.
  • On teste l’application
  • Points non traités dans cette doc.
  • Conclusion .

Introduction javalogo-mysql-170x170_400x400angularjs


Vous l’attendiez depuis longtemps, voici enfin une micro-application CRUD (Lire, Créer, Editer, Supprimer) totalement exposée, en Français intégral, combinant  Angularjs en Front End, et Java en Back end, le tout pointant sur une base de données relationelle  Mysql.

L’autre nom utilisé pour cette technologie Back end serveur est « Service Web » ou « Web Services » en Anglais.

Elaborée suite à l’analyse de plusieurs forums en Anglais, cette solution entièrement Francophone est simple et robuste et s’ajoute aux solutions Full Stack AngularJs + Php Sql(Le système le plus fiable et clair) ainsi que Angularjs + noSql

Avec cette solution, on bénéficie d’une part de l’organisation très structurée de Java pour le Back End avec les classes, et d’autre part  de la facilité d’AngularJS ( Avec par exemple le Super 2 ways binding et la multitude de librairies Front end de AngularJs pour le front end).

Java étant très utilisé dans l’embarqué, cette technique permet une communication optimisée entre le navigateur et divers matériels (Domotique, robotique etc …)

Ceci nous donne un couple gagnant pour les applications à sgbd relationels. AngularJs étant d’une flexibilité et d’une simplicité extrême. Aucune limitation dans ce système, Jointures SQL, librairiesde type NVD3.js pour les graphes, Bootstrap pour les CSS, Elaboration de Statistiques  et j’en passe !

exp Comme d’habitude, j’utilise les mots les plus simples ainsi que l’état initial des choses pour expliquer le fonctionnement de cette micro application, cependant, les concepts sont ensuite expandables à l’infini pour de grosses applications complexes.

Il faut rappeler qu’un CRUD se doit d’être réduit à sa plus simple expression lorsqu’il est expliqué, ainsi qu’à ses 4 fonctions primaires :

Lire, Créer, Editer, Supprimer.

Une photo de la micro application


 microapp.jpg

target_bulls_eye_target_goal_hit_icon-icons.com_59974Le but de l’application


Dans notre navigateur, on veut pouvoir :

  • Lister les élèves.
  • Créer un élève.
  • Editer les informations de chaque élève.
  • Supprimer un élève.

travailLe Matériel nécessaire :


On utilise 

  • 51831.pngEclipse version Néon 3: Une application qui permet de coder notre application Web.
  • angularjsLa librairie AngularJs version 1.6 pour le Front End (Dans le navigateur) : AngularJs est un framework Mvc qui permet de structurer d’une façon incroyable le code Javascript et d’accélérer et simplifier les développements professionnels comme une formule 1. Il est possible de coder presque intégralement en Français, avec un format d’échange JSON très flexible et simple. A noter qu’il sera bon de tester Angular v4 avec ce système également.
  • maven-logo.pngLa librairie Maven pour le Back end Java(Sur le serveur) : Elle permet de télécharger automatiquement d’autres librairies additionelles Java ainsi que de les tenir à jour. Pour cela, on copie-colle un simple lien de type dans le fichier pom.xml. Les liens sont tout simplement à copier-collé à partir du site web  ‘repository’. de Maven, une fois qu’on a choisi sa librairie. La mise à jour est ensuite automatique, en tâche de fond !
  • Jersey_logoLa librairie Jersey pour le Back end Java(Sur le serveur) : Elle permet d’effectuer le Mapping OBJET-RELATIONNEL, nécessaire pour que JAVA comprenne le format d’échange JSON (Javascript object notation). Dit plus simplement, elle traduit les mots de Javascript en Java, ça fonctionne très bien. Dit autrement, elle permet le dialogue entre le Front-End et le Back-End, et oui, c’est bi-directionnel !
  • logo-mysql-170x170_400x400Mysql et Mysql Workbench. Mysql est un SGBD, c’est là qu’on va stocker notre table SQL qui contient les élèves. Mysql WorkBench est un fantastique logiciel qui nous permet d’administrer notre base de données en mode graphique.

1671.pngLes bon liens annexes en Anglais.


On ne peut créer une bonne procédure sans s’appuyer sur l’expérience des autres …

Voici de bons exemples en anglais qui m’ont permis d’élaborer la doc :

  • https://avaldes.com/restful-web-services-with-angularjs-bootstrap-and-java-using-jax-rs-and-jersey/
  • http://draptik.github.io/blog/2013/07/13/angularjs-example-using-a-java-restful-web-service/

On crée le projet dans Eclipse


Dans Eclipse Néon pour JavaEE, Aller dans « File/New/Maven Project. », cocher « Create a simple project », cliquer sur Next, dans group ID, écrire « crud » et dans artifact Id, écrire « crud », cliquer sur FINISH:

maven.jpg

Pour information, voici à quoi va ressembler l’arborescence de notre micro application une fois l’app terminée :

crudespace

Le paramétrage de base n’est pas terminé …

Il est temps de paramétrer MAVEN pour qu’il télécharge les librairies dont on a besoin automatiquement, on fait ça en collant une nouvelle dependency à chaque fois dans le fichier.
Ouvrir le fichier pom.xml et coller ce code à la place du code présent:

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"      xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>crud</groupId>
    <artifactId>crud</artifactId>
    <packaging>war</packaging>
    <version>1.0-SNAPSHOT</version>
    <name>ngdemo Maven Webapp</name>
    <url>http://maven.apache.org</url>

    <dependencies>

		 <!-- Le connecteur de MYSQL -->
		 <dependency>
    		<groupId>mysql</groupId>
    		<artifactId>mysql-connector-java</artifactId>
    		<version>5.1.39</version>
    	 </dependency>

        <!-- javax: XML binding -->
        <dependency>
            <groupId>javax.xml</groupId>
            <artifactId>jaxb-api</artifactId>
            <version>2.1</version>
        </dependency>

        <!-- RESTful web service: Jersey -->
        <dependency>
            <groupId>com.sun.jersey</groupId>
            <artifactId>jersey-server</artifactId>
            <version>1.17.1</version>
        </dependency>
        <dependency>
            <groupId>com.sun.jersey</groupId>
            <artifactId>jersey-servlet</artifactId>
            <version>1.17.1</version>
        </dependency>
        <dependency>
            <groupId>com.sun.jersey</groupId>
            <artifactId>jersey-json</artifactId>
            <version>1.17.1</version>
        </dependency>

        <!-- Unit testing -->
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>3.8.1</version>
            <scope>test</scope>
        </dependency>

    </dependencies>
    <build>
        <finalName>crud</finalName>
    </build>
</project>

Ensuite, Créer un répertoire WEB-INF dans le répertoire webapp, puis coller le fichier web.xml suivant :


<web-app id="WebApp_ID" version="2.4"          xmlns="http://java.sun.com/xml/ns/j2ee"          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"          xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee 	http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
    <display-name>Restful Web Application</display-name>

    <servlet>
        <servlet-name>jersey-serlvet</servlet-name>

        <servlet-class>
            com.sun.jersey.spi.container.servlet.ServletContainer
        </servlet-class>

        <init-param>
            <param-name>com.sun.jersey.config.property.packages</param-name>
            <param-value>crud.rest</param-value>
        </init-param>

        <init-param>
            <param-name>com.sun.jersey.api.json.POJOMappingFeature</param-name>
            <param-value>true</param-value>
        </init-param>

        <load-on-startup>1</load-on-startup>
    </servlet>

    <servlet-mapping>
        <servlet-name>jersey-serlvet</servlet-name>
        <url-pattern>/rest/*</url-pattern>
    </servlet-mapping>

</web-app>

La partie !init-param! doit pointer sur la classe qui autorise les accès REST.
Attention, la ligne !url-pattern! permet au web service de bien fonctionner, elle doit être bien paramétrée sous peine de tout foirer.

Dans le répertoire webapp, créer un répertoire js, et un répertoire lib.

Normalement les librairies doivent descendre dans le répertoire lib automatiquement grâce à MAVEN, si ce n’est pas le cas, se débrouiller pour avoir toutes ses libs dans le répertoire lib :

librsss.jpg

On construit le Front End …


Pour cette micro app, on utilise qu’une feuille index.html pour plus de simplicité :

  • Créer un fichier index.html en faisant un cli droit sur le répertoire webapp :

Coller le code suivant à l’intérieur de index.html,   puis, tester que cette page s’affiche en faisant un clic droit Run as/ Run on Server, dans Eclipse.


<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <head>
        <title>Crud Java Jersey pour AngularJS</title>
    </head>
 
<body ng-app="MonApp" ng-controller="Controleur1">
		    
<!-- LISTE DES ELEVES -->
		<div class="datagrid">
			 <table>
				<thead><tr><th>id</th><th>Prénom</th><th>Nom</th><th>Gérer</th></tr></thead>
				<tfoot><tr><td colspan="4"><div id="paging"><ul><li><a href="#"><span>Avant</span></a></li><li><a href="#" class="active"><span>1</span></a></li><li><a href="#"><span>2</span></a></li><li><a href="#"><span>3</span></a></li><li><a href="#"><span>4</span></a></li><li><a href="#"><span>5</span></a></li><li><a href="#"><span>Après</span></a></li></ul></div></tr></tfoot>
				
				<tbody>
					<tr ng-repeat="eleve in eleves">
						<td>{{eleve.id}}</td>
						<td>{{eleve.prenom}}</td>
						<td>{{eleve.nom}}</td>
						<td> 	
						<button ng-click="editer(eleve)">Modifier</button> 
						<button ng-click="supprimer(eleve)">Supprimer</button>
						</td>
					</tr>
				</tbody>
			</table>
		</div><br><br>
		
		
<!-- MODIFIER UN ELEVE		 -->
		<div class="datagrid">
			<table>
			<thead><tr><th>Modifier</th><tr></thead>
			<tfoot><tr><td colspan="4"><div id="paging" style="text-align:right"><button ng-click="validerEdition()">Modifier</button></button></div></tr></tfoot>
				<tbody>
					<tr><td><label>Id</label><br><input ng-model="eleve.id" disabled></input><br>
					<label>Prénom</label><br><input ng-model="eleve.prenom"></input><br>
					<label>Nom</label><br><input ng-model="eleve.nom"></input><br></td></tr>		
				</tbody>
			</table>
		</div><br><br>
		
		
<!-- CREER UN ELEVE		 -->
		<div class="datagrid">
			<table>
				<thead><tr><th>Creer</th><tr></thead>
				<tfoot><tr><td colspan="4"><div id="paging" style="text-align:right" ng-click="ajouter()"><button>Ajouter</button></button></div></tr></tfoot>
				<tbody>
					<tr><td>
					<label>Prénom</label><br><input ng-model="nouvelEleve.prenom"></input><br>
					<label>Nom</label><br><input ng-model="nouvelEleve.nom"></input><br></td></tr>		
				</tbody>
			</table>
		</div>
	
	</body>
</html>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<style>
.datagrid table { border-collapse: collapse; text-align: left; width: 100%; } .datagrid {font: normal 12px/150% Arial, Helvetica, sans-serif; background: #fff; overflow: hidden; border: 1px solid #A65B1A; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }.datagrid table td, .datagrid table th { padding: 3px 10px; }.datagrid table thead th {background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #A65B1A), color-stop(1, #7F4614) );background:-moz-linear-gradient( center top, #A65B1A 5%, #7F4614 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#A65B1A', endColorstr='#7F4614');background-color:#A65B1A; color:#FFFFFF; font-size: 15px; font-weight: bold; border-left: 1px solid #BF691E; } .datagrid table thead th:first-child { border: none; }.datagrid table tbody td { color: #7F4614; border-left: 1px solid #D9CFB8;font-size: 12px;font-weight: normal; }.datagrid table tbody .alt td { background: #F0E5CC; color: #7F4614; }.datagrid table tbody td:first-child { border-left: none; }.datagrid table tbody tr:last-child td { border-bottom: none; }.datagrid table tfoot td div { border-top: 1px solid #A65B1A;background: #F0E5CC;} .datagrid table tfoot td { padding: 0; font-size: 12px } .datagrid table tfoot td div{ padding: 2px; }.datagrid table tfoot td ul { margin: 0; padding:0; list-style: none; text-align: right; }.datagrid table tfoot  li { display: inline; }.datagrid table tfoot li a { text-decoration: none; display: inline-block;  padding: 2px 8px; margin: 1px;color: #FFFFFF;border: 1px solid #A65B1A;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #A65B1A), color-stop(1, #7F4614) );background:-moz-linear-gradient( center top, #A65B1A 5%, #7F4614 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#A65B1A', endColorstr='#7F4614');background-color:#A65B1A; }.datagrid table tfoot ul.active, .datagrid table tfoot ul a:hover { text-decoration: none;border-color: #7F4614; color: #FFFFFF; background: none; background-color:#A65B1A;}div.dhtmlx_window_active, div.dhx_modal_cover_dv { position: fixed !important; }
</style>

Ensuite, dans le répertoire js, créer le fichier app.js et coller ce code à l’intérieur (Note: pour la simplicité, on n’utilise pas de service ou de factory pour gérer les flux de données dans cette micro app) :

angular.module('MonApp', [])

.controller('Controleur1', function($scope,$http) {

	 	function rafraichirLeTableau(){
			$http.get('rest/eleves/totalEleves').then(function(data){
		        $scope.eleves = data.data;

		    })
	 	};

	    $scope.editer = function(eleve){
	    	$http.get('rest/eleves/getEleveParId/'+eleve.id).then(function(data){
		    	$scope.eleve = data.data;
			})
	 	 }

	 	$scope.validerEdition = function(){
	    	$http.post('rest/eleves/validerEdition/',$scope.eleve).then(function(data){
	    		alert('modifié');
	    		rafraichirLeTableau();
			})
	 	 }

	 	$scope.ajouter = function(){
 			$http.post('rest/eleves/ajouterEleve/',$scope.nouvelEleve).then(function(data){
 		    	alert('ajouté');
 		    	rafraichirLeTableau();
 			})
	 	 }

	 	 $scope.supprimer = function(eleve){
	     	$http.get('rest/eleves/supprimerEleveParId/'+eleve.id).then(function(data){
	 	    	alert('supprimé');
	 	    	rafraichirLeTableau();
	 		})
	  	 }

	 	 rafraichirLeTableau();
/* FIN DU CONTROLEUR */
});

On crée notre table SQL » eleves »


Aller dans Mysql Workbench et créer la table eleves suivante :

CREATE TABLE `test`.`eleves` (
  `id` INT NOT NULL AUTO_INCREMENT,
  `prenom` VARCHAR(45) NULL,
  `nom` VARCHAR(45) NULL,
  PRIMARY KEY (`id`));

La remplir en mode graphique avec quelques élèves.

On crée notre classe (pojo) « eleve »


Dans eclipse , dans notre projet, cliquer sur Java Ressources puis dans src/main/java, créer un package nommé « crud.modele ».

Ensuite, créer une classe nommée « Eleve », et coller ce code à l’intérieur :


package crud.modele;
import javax.xml.bind.annotation.XmlRootElement;

@XmlRootElement
// from http://www.vogella.com/articles/REST/
// JAX-RS supports an automatic mapping from JAXB annotated class to XML and JSON
public class Eleve {

	private int id;
    private String prenom;
    private String nom;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getPrenom() {
        return prenom;
    }

    public void setPrenom(String prenom) {
        this.prenom = prenom;
    }

    public String getNom() {
        return nom;
    }

    public void setNom(String nom) {
        this.nom = nom;
    }
}

On construit la classe Back End des Web Services CRUD (Lire, Créer, Editer, Supprimer)



Dans eclipse , dans notre projet, cliquer sur Java Ressources puis dans src/main/java, créer un package nommé « crud.rest ».

Ensuite, créer une classe nommée « Rest », et coller ce code à l’intérieur :


package crud.rest;

import crud.modele.Eleve;
import crud.dao.Dao;

import java.util.List;
import java.io.IOException;

import javax.ws.rs.Consumes;
import javax.ws.rs.FormParam;
import javax.ws.rs.GET;
import javax.ws.rs.POST;
import javax.ws.rs.Path;
import javax.ws.rs.PathParam;
import javax.ws.rs.Produces;
import javax.ws.rs.core.Context;
import javax.ws.rs.core.MediaType;
import javax.ws.rs.core.Request;
import javax.ws.rs.core.UriInfo;
import javax.ws.rs.*;
import javax.ws.rs.core.MediaType;

@Path("/eleves")
public class Rest {

//  OBTENIR LA LISTE DES ELEVES
    @GET
    @Path("totalEleves")
    @Produces(MediaType.APPLICATION_JSON)
    public List<Eleve> getTousEleves() {
    	 Dao dao = new Dao();

    	return dao.getTousEleves();
    }

//  OBTENIR l'ELEVE PAR ID
  @GET
  @Path("getEleveParId/{id}")
  @Consumes(MediaType.APPLICATION_JSON)
  @Produces(MediaType.APPLICATION_JSON)
  public Eleve getEleveParId(@PathParam("id") int id) {
	  Dao dao = new Dao();
      System.out.println(id);
      return dao.getEleveParId(id);
  }

// VALIDER L'EDITION DE L'ELEVE
	@POST
	@Path("validerEdition")
	@Produces(MediaType.APPLICATION_JSON)
	@Consumes(MediaType.APPLICATION_JSON)
	public Eleve validerEdition(Eleve eleve) {
		 Dao dao = new Dao();
	     dao.validerEdition(eleve);
	     return eleve;
	} 

// AJOUTER UN ELEVE
	@POST
	@Path("ajouterEleve")
	@Produces(MediaType.APPLICATION_JSON)
	@Consumes(MediaType.APPLICATION_JSON)
	public Eleve ajouterEleve(Eleve eleve) {
		 Dao dao = new Dao();
	     dao.ajouterEleve(eleve);
	     return eleve;
	}  

// SUPPRIMER UN ELEVE PAR ID
	@GET
	@Path("supprimerEleveParId/{id}")
	@Consumes(MediaType.APPLICATION_JSON)
	@Produces(MediaType.APPLICATION_JSON)
	public int supprimerEleveParId(@PathParam("id") int id) {
		Dao dao = new Dao();
	    dao.supprimerEleve(id);
	    return 1;
	}   

}

On construit la classe Back End DAO(Data Access Object) qui actionne MYSQL


Dans eclipse , dans notre projet, cliquer sur Java Ressources puis dans src/main/java, créer un package nommé « crud.dao ».

Ensuite, créer une classe nommée « Dao », et coller ce code à l’intérieur :


package crud.dao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;

import crud.connexion.Connexion;
import crud.modele.Eleve;

public class Dao {

	    public List<Eleve> getTousEleves() {

	    	try {
	         Connection con = Connexion.getConnection();
	         PreparedStatement ps = con.prepareStatement("select * from eleves");
	         System.out.println(ps);
	         List<Eleve> al = new ArrayList<Eleve>();
	         ResultSet rs = ps.executeQuery();
	         boolean found = false;

	         while (rs.next()) {
	             Eleve e = new Eleve();
	             System.out.println(rs.getString("nom"));
	             e.setId(rs.getInt("id"));
	             e.setPrenom(rs.getString("prenom"));
	             e.setNom(rs.getString("nom"));
	             al.add(e);
	             found = true;
	         }
	         System.out.println(al);
	         rs.close();
	         if (found) {
	             return al;
	         } else {
	             return null; // Pas de data trouvé
	         }
	    	 } catch (Exception e) {
	         System.out.println("Erreur avec  getTousEleves() -->" + e.getMessage());
	         return (null);
	     }
	    }

	    public Eleve getEleveParId(int id) {
	    	System.out.println(id);

	        try {
	        Connection con = Connexion.getConnection();
	        PreparedStatement ps = con.prepareStatement("select * from eleves WHERE id = ?");
	        ps.setInt(1, id);
	        Eleve e = new Eleve();
	        ResultSet rs = ps.executeQuery();

	        while (rs.next()) {

	            e.setId(rs.getInt("id"));
	            e.setPrenom(rs.getString("prenom"));
	            e.setNom(rs.getString("nom"));

	        }
	        rs.close();
	        return e;

	        }catch (Exception e) {
	            System.out.println("Erreur avec  getEleveParId() -->" + e.getMessage());
	            return (null);
	        }
	    }

	    public void validerEdition(Eleve eleve) {

	        try {
	        	System.out.println("Edition de l eleve avec le prenom: " + eleve.getPrenom());
	        	Connection con = Connexion.getConnection();

		     // L'insert avec mysql
		        String query = " UPDATE eleves SET prenom = ?, nom = ? WHERE id = ?";
		        System.out.println(query);
		        PreparedStatement ps = con.prepareStatement(query);
		        ps.setString (1, eleve.getPrenom());
		        ps.setString (2, eleve.getNom());
		        ps.setInt (3, eleve.getId());

		        ps.executeUpdate();
		        ps.close();
		        }catch (Exception e) {
		            System.out.println("Erreur avec validerEdition() -->" + e.getMessage());

	        }
	    }

	    public void ajouterEleve(Eleve eleve) {

	        try {
	        	System.out.println("Ajout de l eleve avec le prenom: " + eleve.getPrenom());
	        Connection con = Connexion.getConnection();

	     // L'insert avec mysql
	        String query = " INSERT INTO eleves (prenom, nom)" + " values (?, ?)";
	        PreparedStatement ps = con.prepareStatement(query);
	        ps.setString (1, eleve.getPrenom());
	        ps.setString (2, eleve.getNom());

	        ps.executeUpdate();
	        ps.close();
	        }catch (Exception e) {
	            System.out.println("Erreur avec ajouterEleve() -->" + e.getMessage());

	        }
	    }

	    public void supprimerEleve(int id) {

	        try {
	        Connection con = Connexion.getConnection();
	        PreparedStatement ps = con.prepareStatement("DELETE from eleves WHERE id = ?");
	        ps.setInt(1, id);
	        ps.executeUpdate();
	        ps.close();
	        }catch (Exception e) {
	            System.out.println("Error In supprimerEleveParId() -->" + e.getMessage());

	        }
	    }
}

On construit la classe connexion qui permet la connexion à la base  de données.


Dans eclipse , dans notre projet, cliquer sur Java Ressources puis dans src/main/java, créer un package nommé « connexion.dao ».

Ensuite, créer une classe nommée « Connexion », et coller ce code à l’intérieur :


package crud.connexion;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;

public class Connexion {
	public static Connection getConnection() {

        Connection dbConnection = null;

        String URL = "jdbc:mysql://localhost:3306/test";
        String USER = "root";
        String PASSWORD = "root";
        String DRIVER = "com.mysql.jdbc.Driver";

        try {

            Class.forName(DRIVER);
            dbConnection= DriverManager.getConnection(URL, USER, PASSWORD);
            System.out.println("Connection completed.");

        } catch (SQLException e) { 

            System.out.println(e.getMessage()); 

        }catch(ClassNotFoundException cnfe){

           cnfe.printStackTrace();
           System.out.println(cnfe.getMessage());
           System.exit(-1);

       }

        return dbConnection;
    }
}

On teste l’application


Cliquer droit sur index.html,Run As, Run on Server.
Le code a été testé 100 pour cent fonctionnel.
En cas de problèmes, controler les flux JSON avec Firebug dans le navigateur, et les problèmes de DAO dans la console Eclipse.

Points non traités dans cette doc.


Normalement, plutôt que de faire des appels Ajax dans le controleur Angularjs, il vaut mieux créer des factories ou service, on évite ainsi les doublons.

Conclusion .


Je préfère le back end PHP comme montré ici, au back end JAVA. Cependant, il est bon de savoir faire cette méthode en cas de serveur Tomcat.
Le Back end PHP est plus facile et rapide à mettre en place, et beaucoup plus flexible, de plus il ne faut pas sans cesse recompiler pour tester, il n’y a pas besoin de créer de POJO, de plus, les variables sont également typées et on utilise aussi les prepared statements et les try-catch, mais d’une façon beaucoup plus simple.

#7f4614, #a65b1a, #bf691e, #d9cfb8, #f0e5cc, #fff, #ffffff

Publicités