Micro Application 6 : Mon Petit Stock avec Angular.js

Introduction monpetitstock


Aujourd’hui, je vais créer à partir de zéro une application de gestion de stock avec angular.js qui s’appelle « Mon petit Stock ». Pour le testing, c’est ici. Je pense travailler dessus une ou deux semaines mi-temps. Je ne publie qu’une partie du code. Caractéristiques à début du codage+6heures :

  • Lorsque le stock est < à 5 : la ligne est colorée en orange, lorsque le stock est < à 0 : la ligne devient rouge.
  • Lors du tri dans le stock(En cliquant sur les titres des colonnes.), le programme continue à fonctionner, à l’aide des IDS.

Synopsis


Un utilisateur privé, ou de petite entreprise requiert une application monoposte pour gérer ses stocks et les revendre.

Lire la suite

Publicités

Micro Application 5 : Sondagilitis avec Angular.js

Introduction sondagilitis :


Aujourd’hui, je vais créer une micro-application de sondage avec Angular.js. à tester ici Je pars de zéro.

Après une  conception sur la papier de 7 minutes, j’initialise bien toutes les données dans des tableaux en début de script, le reste vient logiquement.

J’ai décidé de récupérer les valeurs des inputs radio avec Jquery, j’aurais pu les récupérer avec Angular.

Une fois de plus, angular démontre la force du live binding avec la création d’un tableau des réponses de l’utilisateur à la volée.

J’ai tout fait en 2h00, ce qui est pas mal. Bien sur, il est possible de l’améliorer énormément, avec inclusion d’images, timer, etc …

Pour le back end, on récupère les donnnées au choix, soit au format numérique, soit au format alphabétique. Bien sur, on peut envisager des statistiques sur les données récupérées ( En graphiques, en pourcentages, en moyennes, et j’en passe … et tout cela rapidement…)

Description :


Langage : Angular.js, Html5.0, Css3.0, Jquery

Temps de réalisation : 2h00

Type : Micro-Application Front office

Back-end possible : Php, Java.

Lire la suite

Micro Application 4 : PorticZone avec Angular.js

Introduction portic


Aujourd’hui, je vais créer une micro application de portique de supermarché, à tester ici.

Voici ce que l’application permet au jour 1:

  • On Décompte les clients par tranche horaire, automatiquement, lors du passage dans le portique.
  • Le passage d’une personne est simulée par un clic souris, sans cela il faudrait utiliser l’api dune caméra infrarouge.
  • Vision de Pourcentages des clients passés par tranche horaire du Jour.
  • Moyenne des clients passés dans la journée.

Le code est inventé de zéro. A noter que le temps de réalisation du premier jour peut être longue, mais dans les prochains projets, ce sera plus court.

Description :


Langage : Angular.js, Html5.0, Css3.0, Jquery

Temps de réalisation : 6h00

Type : Micro-Application Front office

Back-end possible : Php, Java.

 

Photo


porticzone

Le code

<html lang="fr" ng-app="GestionPortique">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
		<!-- -----------------------------------------------DEBUT DU CHARGEMENT DES LIBRAIRIES------------------------ -->
		<!--	APPEL LIB ANGULAR -->
		<script	type="text/javascript" 	src="angular-1.3.13/angular.min.js"></script>
		<!--	APPEL LIB JQUERY -->
		<script	type="text/javascript" 	src="librairies/jquery.js"></script>
		<!-- -----------------------------------------------FIN DU CHARGEMENT DES LIBRAIRIES------------------------ ----->
		<script>
			
var myApp = angular.module('GestionPortique',[]);
				
// Controleur Angular
myApp.controller('NameCtrl', function($scope) {
				
	//Initialisation des Variables
	$scope.Math=Math;
	$scope.clients	= [0,0,0,0,0,0,0,0,0,0,0,0,0,0,20,10,10,50,5,5,0,0,0,0];	// Initialisation du Nombre de client par heures(données exemples sur 24h, 1 par heure)
	$scope.prcts	= [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];	 	// Initialisation des pourcentages par heure sur 24h

	// Action sur Clic/Flash client
	$scope.augmente	= 	function(){
						date = new Date;
						var h = date.getHours();
						$scope.clients[h] += 1;// Incrémente de 1 le nb de client l'heure ou le Flash a été fait.
						colorDetecteur();
						$scope.getPourcentage(); // Mets à jour le pourcentage de clients après un Flash
						}

	// Total des clients Flashés
	$scope.getTotal = function(){
						var total=0;
						for (x=0;x<24;x++){
						total += $scope.clients[x];
						}
	return total;
	};

	// Pourcentage des clients flashés par heures
	$scope.getPourcentage = function(){
						var total=0;
						var y=$scope.getTotal();
						for (x=0;x<24;x++){
						$scope.prcts[x] = ($scope.clients[x]/y*100).toFixed(2);
						}
	};
	
	$scope.getPourcentage(); // Mets à jour les pourcentages lors de l'initialisation.

	// Design et animation du Flash Portique
	function colorDetecteur(){
		affClient();
		$("#infos").empty();
		$("#infos").append('Flash d\'un Client');
		$(".detecteur").css( 'background-color', 'red' );
		setTimeout(function() {
			console.log("Timeout");
			$("#infos").empty();
			$("#infos").append('Pas de Client');
			$(".detecteur").css( 'background-color', 'blue' );
		}, 700);
	};	
		
	// Apparition de l'image du Client.
	function affClient(){
		$(".client").show();
		setTimeout(function() {
			$(".client").hide();
			}, 700);

	}

	$(".client").hide();// Par défaut, l'image du client est cachée.

	
// Fin du Controleur Angular
});		

</script>
</head>

<body ng-controller="NameCtrl" >

<div id="logo"><img src="portic.jpg" class="logo"></div>


<div id="a_cliquer" ng-click="augmente()"> 
	<div id="client" class="client"><img src="client.png"></div>
	<button ng-click="heure()" class="btn">Flash Client</button>
	<img src="portique.jpg" style="width:300px;height:300px;"></img>
	<h1><span id="infos">{{infos}}</span></h1>
</div>



<div id="detecteur" class="detecteur" > 
	<img src="detecteur.jpg" class="img"></img>
</div>



<br>
<div id="stats">
	<table class="CSSTableGenerator ">
		<tr>
			<td>	<img src="horloge.jpg" class="img"></td>
			
			<td>0h</td>
			<td>1h</td>
			<td>2h</td>
			<td>3h</td>
			<td>4h</td>
			<td>5h</td>
			<td>6h</td>
			<td>7h</td>
			<td>8h</td>
			<td>9h</td>
			<td>10h</td>
			<td>11h</td>
			<td>12h</td>
			<td>13h</td>
			<td>14h</td>
			<td>15h</td>
			<td>16h</td>
			<td>17h</td>
			<td>18h</td>
			<td>19h</td>
			<td>20h</td>
			<td>21h</td>
			<td>22h</td>
			<td>23h</td>
			<td>Total</td>
			<td>Moyenne</td>
			
		</tr>
		<tr >
			<td><img src="client.png" class="img"></td>
			<td>{{clients[0]}}</td>
			<td>{{clients[1]}}</td>
			<td>{{clients[2]}}</td>
			<td>{{clients[3]}}</td>
			<td>{{clients[4]}}</td>
			<td>{{clients[5]}}</td>
			<td>{{clients[6]}}</td>
			<td>{{clients[7]}}</td>
			<td>{{clients[8]}}</td>
			<td>{{clients[9]}}</td>
			<td>{{clients[10]}}</td>
			<td>{{clients[11]}}</td>
			<td>{{clients[12]}}</td>
			<td>{{clients[13]}}</td>
			<td>{{clients[14]}}</td>
			<td>{{clients[15]}}</td>
			<td>{{clients[16]}}</td>
			<td>{{clients[17]}}</td>
			<td>{{clients[18]}}</td>
			<td>{{clients[19]}}</td>
			<td>{{clients[20]}}</td>
			<td>{{clients[21]}}</td>
			<td>{{clients[22]}}</td>
			<td>{{clients[23]}}</td>
			<td>{{getTotal()}}</td>
			<td>{{Math.round(getTotal()/24,2)}}</td>
		</tr>
		<tr>
			<td>	<img src="pourcent.png" class="img"></td>
			<td>{{prcts[0]}}%</td>
			<td>{{prcts[1]}}%</td>
			<td>{{prcts[2]}}%</td>
			<td>{{prcts[3]}}%</td>
			<td>{{prcts[4]}}%</td>
			<td>{{prcts[5]}}%</td>
			<td>{{prcts[6]}}%</td>
			<td>{{prcts[7]}}%</td>
			<td>{{prcts[8]}}%</td>
			<td>{{prcts[9]}}%</td>
			<td>{{prcts[10]}}%</td>
			<td>{{prcts[11]}}%</td>
			<td>{{prcts[12]}}%</td>
			<td>{{prcts[13]}}%</td>
			<td>{{prcts[14]}}%</td>
			<td>{{prcts[15]}}%</td>
			<td>{{prcts[16]}}%</td>
			<td>{{prcts[17]}}%</td>
			<td>{{prcts[18]}}%</td>
			<td>{{prcts[19]}}%</td>
			<td>{{prcts[20]}}%</td>
			<td>{{prcts[21]}}%</td>
			<td>{{prcts[22]}}%</td>
			<td>{{prcts[23]}}%</td>
			<td>100%		</td>
			<td>			</td>
		</tr>
	</table>
</div>

</body>

<!-- Plus bas, tous les CSS -->
	<style> 
		.body{
			font-family:arial;
			font-size:0.8em;
			background-color:tan;
			max-width:1000px;
		}	
		 
		h1{
		
		font-size:1.2em;
		text-align: center;
		background-color:lightgrey;
		-webkit-border-radius: 10px 10px 10px 10px;
		border-radius: 10px 10px 10px 10px;
		-webkit-box-shadow:inset 2px 2px 2px 2px #635453;
		box-shadow:inset 2px 2px 2px 2px #635453;
		}
		
		p{
		margin-left:15px;
		}
	
		#a_cliquer{
		height:320px;
		width:350px;
		background-color:lightgrey;
		float:left;
		
		}
		
		.img{
		width:50px;
		height:50px;
		
		}
		
		.logo{
		width:80px;
		height:80px;
		}
		
		
		.detecteur{
		width:120px;
		height:120px;
		float:left;
		text-align:center;
		
		}
		
		#stats{
		width:383px;
		height:100px;
		position:absolute;
		margin-left:1px;
		margin-top:350px;
		 float:left;
		}
		
		#client{
		position:absolute;
		margin-height:20px;
		margin-left:100px;
		margin-top:20px;
		}
		
		#logo{
		position:absolute;
		margin-height:20px;
		margin-left:800px;
		margin-top:20px;
		height:100px;
		
		
		}
		

	.CSSTableGenerator {
	margin:0px;padding:0px;
	width:100%;
	box-shadow: 10px 10px 5px #888888;
	border:1px solid #000000;
	
	-moz-border-radius-bottomleft:0px;
	-webkit-border-bottom-left-radius:0px;
	border-bottom-left-radius:0px;
	
	-moz-border-radius-bottomright:0px;
	-webkit-border-bottom-right-radius:0px;
	border-bottom-right-radius:0px;
	
	-moz-border-radius-topright:0px;
	-webkit-border-top-right-radius:0px;
	border-top-right-radius:0px;
	
	-moz-border-radius-topleft:0px;
	-webkit-border-top-left-radius:0px;
	border-top-left-radius:0px;
}.CSSTableGenerator table{
    border-collapse: collapse;
        border-spacing: 0;
	width:100%;
	height:100%;
	margin:0px;padding:0px;
}.CSSTableGenerator tr:last-child td:last-child {
	-moz-border-radius-bottomright:0px;
	-webkit-border-bottom-right-radius:0px;
	border-bottom-right-radius:0px;
}
.CSSTableGenerator table tr:first-child td:first-child {
	-moz-border-radius-topleft:0px;
	-webkit-border-top-left-radius:0px;
	border-top-left-radius:0px;
}
.CSSTableGenerator table tr:first-child td:last-child {
	-moz-border-radius-topright:0px;
	-webkit-border-top-right-radius:0px;
	border-top-right-radius:0px;
}.CSSTableGenerator tr:last-child td:first-child{
	-moz-border-radius-bottomleft:0px;
	-webkit-border-bottom-left-radius:0px;
	border-bottom-left-radius:0px;
}.CSSTableGenerator tr:hover td{
	background-color:#cccc99;
		

}
.CSSTableGenerator td{
	vertical-align:middle;
	
	background-color:#cccccc;

	border:1px solid #000000;
	border-width:0px 1px 1px 0px;
	text-align:left;
	padding:1px;
	font-size:10px;

	font-family:Arial;
	font-weight:normal;
	color:#000000;
}.CSSTableGenerator tr:last-child td{
	border-width:0px 1px 0px 0px;
}.CSSTableGenerator tr td:last-child{
	border-width:0px 0px 1px 0px;
}.CSSTableGenerator tr:last-child td:last-child{
	border-width:0px 0px 0px 0px;
}
.CSSTableGenerator tr:first-child td{
		background:-o-linear-gradient(bottom, #003366 5%, #003f7f 100%);	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #003366), color-stop(1, #003f7f) );
	background:-moz-linear-gradient( center top, #003366 5%, #003f7f 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#003366", endColorstr="#003f7f");	background: -o-linear-gradient(top,#003366,003f7f);

	background-color:#003366;
	border:0px solid #000000;
	text-align:center;
	border-width:0px 0px 1px 1px;
	font-size:10px;
	font-family:Arial;
	font-weight:bold;
	color:#ffffff;
}
.CSSTableGenerator tr:first-child:hover td{
	background:-o-linear-gradient(bottom, #003366 5%, #003f7f 100%);	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #003366), color-stop(1, #003f7f) );
	background:-moz-linear-gradient( center top, #003366 5%, #003f7f 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#003366", endColorstr="#003f7f");	background: -o-linear-gradient(top,#003366,003f7f);

	background-color:#003366;
}
.CSSTableGenerator tr:first-child td:first-child{
	border-width:0px 0px 1px 0px;
}
.CSSTableGenerator tr:first-child td:last-child{
	border-width:0px 0px 1px 1px;
}	

.btn {
  background: #323c42;
  background-image: -webkit-linear-gradient(top, #323c42, #2980b9);
  background-image: -moz-linear-gradient(top, #323c42, #2980b9);
  background-image: -ms-linear-gradient(top, #323c42, #2980b9);
  background-image: -o-linear-gradient(top, #323c42, #2980b9);
  background-image: linear-gradient(to bottom, #323c42, #2980b9);
  -webkit-border-radius: 4;
  -moz-border-radius: 4;
  border-radius: 4px;
  text-shadow: 3px 6px 9px #666666;
  font-family: Arial;
  color: #ffffff;
  font-size: 12px;
  padding: 12px 18px 10px 20px;
  border: solid #1f628d 4px;
  text-decoration: none;

  position:absolute;

}

.btnspe{
  margin-top:200px; 
 margin-left:330px; 
}

.btnspe2{


}


.btn:hover {
  background: #fc6f3c;
  background-image: -webkit-linear-gradient(top, #fc6f3c, #d9349f);
  background-image: -moz-linear-gradient(top, #fc6f3c, #d9349f);
  background-image: -ms-linear-gradient(top, #fc6f3c, #d9349f);
  background-image: -o-linear-gradient(top, #fc6f3c, #d9349f);
  background-image: linear-gradient(to bottom, #fc6f3c, #d9349f);
  text-decoration: none;
}




	
</style>

</html>























 

 

Micro Application 3: StockVoiture avec Angular.Js (avec Optimisation Financière)

Introduction stockvoiture


Aujourd’hui, je vais créer une micro-application de gestion financière d’un garage avec Angular.js et un peu de Jquery. A tester ici .

Voici ce que l’application permet :

  • Enregistrer une nouvelle voiture avec son prix et le cout de ses réparations
  • Modifier une voiture enregistrée
  • Visionner les statistiques de ventes
  • Optimiser la revente Globale par pourcentage, en temps réel, et visionner les bénéfices, en tenant compte des frais de réparation sur tout le garage à un instant t.
  • Tout se mets à jour en temps réel avec Angular.js

Note : j’ai inventé le code de zéro, je ne l’ai pas repris. Bien sur, cette appli est « expandable » à l’infini

Description :


Langage : Angular.js, Html5.0, Css3.0, Jquery

Temps de réalisation : 5h30

Type : Micro-Application Front office

Back-end possible : Php, Java.

 

Notes :


Dans ma prochaine micro application, je vais ajouter des graphiques qui s’actualiseront en temps réel pour effectuer des stas en temps réel.

Ne pas trop regarder les css ici, car j’aurais pu les compresser bien plus en les rendant génériques.

Demain je reviendrais dessus pour ajouter d’autres « optimiseurs »… L’idéal à l’avenir serait carrément d’y ajouter le simplexe !

Note importante: avec Angular, on peut effecter des opérations sur des vars, directement dans le html avec les moustache.

Deuxième note : toutes les données tiennent dans un simple tableau, il est très facile de les stocker en BDD avec JAva ou Php, OU d’importer un fichier Json avec 1500 voitures.

 

Le Code


<html lang="fr" ng-app="achat">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
		<!-- -----------------------------------------------DEBUT DU CHARGEMENT DES LIBRAIRIES------------------------ -->
		<!--	APPEL LIB ANGULAR -->
		<script	type="text/javascript" 	src="angular-1.3.13/angular.min.js"></script>
		<!--	APPEL LIB JQUERY -->
		<script	type="text/javascript" 	src="librairies/jquery.js"></script>
		<!-- -----------------------------------------------FIN DU CHARGEMENT DES LIBRAIRIES------------------------ ----->
		<script>
			
			var myApp = angular.module('achat',[]);
				
			// Controleur Angular
			myApp.controller('NameCtrl', function($scope) {
				
				//Initialisation des Variables
				$scope.formtitre	= "Ajouter une Voiture";
				$scope.voitures 	= []; 
				$scope.nom			='Auto';
				$scope.marque		='Marque';
				$scope.serie		='Série';
				$scope.achat		=0;
				$scope.revente		=0;
				$scope.reparation 	=0;
				$scope.age			=1;
				$scope.etat			=50;
				$scope.esperance 	=50;
				$scope.optimise1	= 0;	
				var date = new Date();
				$scope.date		= date;
				$scope.alert	='Rien à signaler';
				
				//Initialisation des CSS
				document.getElementById("modif").disabled = true; 
				
					// Données de démonstration				
					$scope.voitures.push({
						nom: 		"Mondeo",
						marque: 	"Ford",
						serie:		"gs",
						achat:		10000,		
						revente:	10000,		
						reparation:	1000, 	
						age:		3,			
						etat:		75,			
						esperance:	15, 	
					});		
									
					$scope.voitures.push({
						nom: 		"Laguna",
						marque: 	"Renault",
						serie:		"D",
						achat:		12000,		
						revente:	12000,		
						reparation:	275.5, 	
						age:		7,			
						etat:		35,			
						esperance:	80, 	
					});	

					$scope.voitures.push({
						nom: 		"C3",
						marque: 	"Citroen",
						serie:		"D",
						achat:		22000,		
						revente:	13000,		
						reparation:	1253.5, 	
						age:		2,			
						etat:		90,			
						esperance:	80, 	
					});	
						
							
				$("#modif").hide();
				
			// Réinitialisation du formulaire
				$scope.init	= function(){
					$scope.formtitre	= "Ajouter une Voiture";
					$scope.nom			='Auto';
					$scope.marque		='Marque';
					$scope.serie		='Série';
					$scope.achat		=0;
					$scope.revente		=1;
					$scope.reparation 	=0;
					$scope.age			=1;
					$scope.etat			=1;
					$scope.esperance 	=1;
				
				}
				
				
				// Enregistre une voiture
				$scope.enregistrer	=	function(){
				
					if ($scope.nom == ''){
					$scope.alert='Le Champs nom de la Voiture est Vide';
					}
					
					if ($scope.voitures.length > 29){
					$scope.alert='N\'ajoutez pas plus de 30 Voitures';
					}
					
					else {
					// Ajoute le nom et le prix de l'objet au tableau
					$scope.voitures.push({
						nom: 		$scope.nom,
						marque: 	$scope.marque,
						serie:		$scope.serie,
						achat:		$scope.achat,		
						revente:	$scope.achat,		
						reparation:	$scope.reparation, 	
						age:		$scope.age,			
						etat:		$scope.etat,			
						esperance:	$scope.esperance, 	
					});
					
					$scope.alert='Voiture ajoutée';
					// Initialise le contenu des champs après un push de variables dans le tableau
					$scope.init();
					}
				}
					
				
				// Affiche les données d'une voiture enregistrée dans le formulaire et permet de Modifier .
				$scope.modifierClique	=	function(index){
					//Esthetique et css
					document.getElementById("modif").disabled = false; 
					$scope.init();
					$scope.formtitre="Modifier une Voiture"; 
					$(".modifboutton").css( 'color', 'red' );// Change le curseur en une main
					$("#modif").show();
					$("#btnr").hide();
					$(".formulaire").css( 'background-color', 'red' );
					$(".modifboutton").attr('disabled', 'disabled');
					//Variable index mise dans le scope global, pour faire rapide, mais non conseillé je crois.
					window.index = index;
					
					//Initialisation des curseurs avec les données de la voiture enregistrées dans le tableau voitures[]
					$scope.nom			= $scope.voitures[index].nom;
					$scope.marque		= $scope.voitures[index].marque	;
					$scope.serie		= $scope.voitures[index].serie;
					$scope.achat		= $scope.voitures[index].achat;
					$scope.revente		= $scope.voitures[index].revente;
					$scope.reparation 	= $scope.voitures[index].reparation;
					$scope.age			= $scope.voitures[index].age	;
					$scope.etat			= $scope.voitures[index].etat;
					$scope.esperance 	= $scope.voitures[index].esperance;
					$scope.alert		=	'Modifiez la voiture';
				}
				
				// Enregistre les données modifiées d'une voiture en RAM, dans le tableau voitures[] .
				$scope.rmodifs	=	function(){
					i=window.index;
					$scope.voitures[i].nom		=	$scope.nom;	
					$scope.voitures[i].marque	=	$scope.marque;
					$scope.voitures[i].serie	=	$scope.serie;
					$scope.voitures[i].achat	=	$scope.achat;
					$scope.voitures[i].revente	=	$scope.revente;	
					$scope.voitures[i].reparation=	$scope.reparation;
					$scope.voitures[i].age		=	$scope.age	;
					$scope.voitures[i].etat		=	$scope.etat	;
					$scope.voitures[i].esperance=	$scope.esperance ;
					$scope.alert				=	'Voiture Modifiée';
						
					// Esthétiques et Css
					$(".modifboutton").css( 'color', 'blue' );
					$(".modifboutton").prop('disabled', false);
					$(".formulaire").css( 'background-color', 'ivory' );
					document.getElementById("modif").disabled = true; 
					$scope.alert	='La voiture a été modifiée';
					$scope.init();
					$("#btnr").show();
					$("#modif").hide();
				}
				
				// Affiche combien il y a de lignes dans le tableau
				$scope.getTotalItems = function () {
					return $scope.voitures.length;
				};
				
				
				// Supprime une voiture dans liste
				$scope.supprimeClique = function (index) {
						$scope.voitures.splice(index, 1);
				};
			
			
				// Affiche le prix total 
				$scope.getTotal = function(){
					var total = 0;
					for(var i = 0; i < $scope.voitures.length; i++){
					total += $scope.voitures[i].achat;
					}
					return total;
				}
				
				// Affiche le prix total des réparations 
				$scope.getTotalReparation = function(){
					var total = 0;
					for(var i = 0; i < $scope.voitures.length; i++){
					total += $scope.voitures[i].reparation;
					}
					return total;
				}
				
				// Affiche le prix total des reventes 
				$scope.getTotalRevente = function(){
					var total = 0;
					for(var i = 0; i < $scope.voitures.length; i++){
						total += $scope.voitures[i].revente;
					}
				return total;
				}
			
				// Affiche le bénéfice total
				$scope.getTotalBenefice= function(){
					var total = 0;
					for(var i = 0; i < $scope.voitures.length; i++){
						total += $scope.voitures[i].revente;
					}
				return total;
				}
			
				// Optimise le prix de  vente du pourcentage choisi dans le curseur
				$scope.opt1= function(){
					var total = 0;
					$scope.optimise1 = parseInt($scope.optimise1,10);
					
					for(var i = 0; i < $scope.voitures.length; i++){
						var x=Math.round($scope.voitures[i].achat/100)*$scope.optimise1;
						$scope.voitures[i].revente = $scope.voitures[i].achat + x ;
					}
				}
			// Fin du Controleur Angular
			});
			
		</script>
		

	</head>

<body ng-controller="NameCtrl" class="body">
<div class="gauche">
	<div class="infos">	
		<h1><p>Informations<img src="stockvoiture.jpg" id="logo" ></p></h1>
		<p>{{alert}}</p>
	</div>	

	<div class="formulaire" ><h1><p>{{formtitre}}</p></h1>
		<p>
			<table class="CSSTableGenerator ">
				<tr>
					<th>	<img src="toto.jpg">					</th>
					<th><p>Votre voiture s'appelle <b>{{nom}}</b>	</th>
					<th><b>Prix d'achat </b>{{achat}} Euros 		</th>		
					<th><b>Age </b>{{age}}  ans						</th>		
				</tr>
			</table>
		
		<form>
			<table class="table">
				<td>
					<label >Nom :</label> 	<br>
					<input ng-model="nom" 		type="text" class ="champs" /><br>
					<label >Prix D'achat:</label>   <br>     
					<input ng-model="achat"  type="number"  class ="champs" /> {{achat}} Euros<br>
					<label >Couts de réparation:</label>     <br>   
					<input ng-model="reparation" type="number" class ="champs" />{{reparation}} Euros<br>	
				</td>
				<td>
					<label >Marque:</label> 	<br>
					<input ng-model="marque" type="text" class ="champs" /><br>
					<label >Age du véhicule:</label>   <br>     
					<input ng-model="age" type="range" min="0" max="50"class ="champs"  /> Ans<br>
					<label >Etat général:</label>        <br>
					<input ng-model="etat" type="range" min="0" max="100" class ="champs" /> %<br>
					<label >Esperance de revente :</label>     <br>   
					<input ng-model="esperance" type="range" min="0" max="100"   class ="champs" /> %<br>	
				</td>
			</table>
					<button class="btn btnspe" ng-click="enregistrer()" id="btnr"> Ajouter la Voiture</button>
					<button class="btn btnspe" ng-click="rmodifs($index)" id="modif" >Modifier la Voiture</button>
		</form>	
		</p>
	</div>	
		
	<div class="vision" > <h1><p>Statistiques du Garage</p></h1>
		<table class="CSSTableGenerator ">
			<tr>
				<td> Nb de voitures	</td>
				<td> Total Achat	</td>
				<td> Total Réparations	</td>
				<td> Total Reventes	</td>
				<td> Bénéfices</td>	
			</tr>
			<tr>
				<td>{{getTotalItems()}}</td>
				<td>{{getTotal()}}</td>
				<td>{{getTotalReparation()}}</td>
				<td>{{getTotalRevente()}}</td>
				<td>{{getTotalRevente()-getTotal()-getTotalReparation()}}</td>
			</tr>
		</table>
	</div>

	<div class="optimisation"><h1><p>Optimisations Financières</p></h1>
		<img src="euro.png" style="width:60px;height:60px;margin-left:10px;">
		<label >Gain de Revente Global:</label><br>
		 <p>  -<input ng-model="optimise1" 	type="range" min="-100" max="+100" class ="champs" />+ {{optimise1}}  %</p>
		<button ng-click="opt1()" class="btn btnspe">Augmenter les prix de revente</button>
	</div>	


</div>



<div class="droite">
<br>
	<div class="liste"><h1><p>Mon garage de Voitures({{getTotalItems()}})</p></h1>
		<input type="search" ng-model="q" placeholder="Rechercher une Voiture" />
		<table class="CSSTableGenerator " >
			<tr>
				<td>Photo</td>
				<td>Nom</td>
				<td>Prix d'achat</td>
				<td>Revente Prédictionnelle</td>
				<td><b>Age</td>
				<td></td>
				<td></td>
			</tr>
		   <tr  ng-repeat="voiture in voitures | filter:q as results" >
				<td><img src="toto.jpg"></img>	</td>
				<td>{{voiture.nom}} 			</td>
				<td>{{voiture.achat}} Euros		</td>
				<td>{{voiture.revente}} Euros		</td>
				<td>{{voiture.age}} ans			</td>
				<td><button ng-click="modifierClique($index)" class="modifboutton">Modifier</button></td>
				<td><button ng-click="supprimeClique($index)" >Supprimer</button></td>
			</tr>
		</table>	
	</div>	
</div>
</body>
		
	
		
<style>
.body{
	font-family:arial;
	font-size:1.2em;
	<!-- background:url("http://localhost/angular/fond.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0); -->
	background-color:tan;
}	

h1{
	font-size:1.2em;
	background-color:tan;
	-webkit-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
	-webkit-box-shadow:inset 2px 2px 2px 2px #635453;
	box-shadow:inset 2px 2px 2px 2px #635453;
}

p{
	margin-left:15px;
}

.gauche{
	min-width:800px;
	<!-- background-color:red; -->
	max-width:auto;
	max-height:auto;
	height:auto;
	float:left;
}

.droite{
	float:left;
	min-width:800px;
	margin-left:10px;
	float:initial;
}

#logo{
	<!-- position:absolute; -->
	height:80px;
	width:130px;
	margin-left: 10px;
	}label{
	margin-left:10px;
}

.table{
	font-size:0.8em;
	background-color:ivory;
	margin-left:auto;
	margin-right:auto;
}

.formulaire{
	height:390px;
	width:auto;
	background-color:ivory;
	float:center;
	margin-right: auto ;
	text-align:left;
	-webkit-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
	-webkit-box-shadow:inset 2px 2px 2px 2px #635453;
	box-shadow:inset 2px 2px 2px 2px #635453;
}

.modifboutton{
disabled:disabled;
}

.vision{
	margin-top:15px;
	height:140px;
	width:auto;
	background-color:ivory;
	float:center;
	margin-right: auto ;
	-webkit-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
	-webkit-box-shadow:inset 2px 2px 2px 2px #635453;
	box-shadow:inset 2px 2px 2px 2px #635453;
}

.optimisation{
	margin-top:15px;
	height:250px;
	width:auto;
	background-color:ivory;
	margin-top:;
	margin-right: auto ;
	-webkit-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
	-webkit-box-shadow:inset 2px 2px 2px 2px #635453;
	box-shadow:inset 2px 2px 2px 2px #635453;
	text-align:left;
}

.liste{
	min-height:20px;
	max-height:920px;
	height:auto;
	background-color:ivory;
	-webkit-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
	-webkit-box-shadow:inset 2px 2px 2px 2px #635453;
	box-shadow:inset 2px 2px 2px 2px #635453;$
	margin-left:510px;
	overflow:auto;
}

.infos{
	<!-- margin-top:100px; -->
	min-height:20px;
	height:auto;
	width:auto;
	background-color:ivory;
	-webkit-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
	-webkit-box-shadow:inset 2px 2px 2px 2px #635453;
	box-shadow:inset 2px 2px 2px 2px #635453;$
	margin-top:auto;
	<!-- margin-left:500px; -->
	margin-right:auto;
}

.champs{
	margin-top:5px;
	width:100px;
	align: left ;
	margin-left: auto ;
	margin-right: auto ;	
	-webkit-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
	margin-left:15px;
}

.CSSTableGenerator {
	margin:0px;padding:0px;
	width:100%;
	box-shadow: 10px 10px 5px #888888;
	border:1px solid #000000;
	-moz-border-radius-bottomleft:0px;
	-webkit-border-bottom-left-radius:0px;
	border-bottom-left-radius:0px;
	-moz-border-radius-bottomright:0px;
	-webkit-border-bottom-right-radius:0px;
	border-bottom-right-radius:0px;
	-moz-border-radius-topright:0px;
	-webkit-border-top-right-radius:0px;
	border-top-right-radius:0px;
	-moz-border-radius-topleft:0px;
	-webkit-border-top-left-radius:0px;
	border-top-left-radius:0px;
}

.CSSTableGenerator table{
border-collapse: collapse;
border-spacing: 0;
width:100%;
height:100%;
margin:0px;padding:0px;
}

.CSSTableGenerator tr:last-child td:last-child {
	-moz-border-radius-bottomright:0px;
	-webkit-border-bottom-right-radius:0px;
	border-bottom-right-radius:0px;
}

.CSSTableGenerator table tr:first-child td:first-child {
	-moz-border-radius-topleft:0px;
	-webkit-border-top-left-radius:0px;
	border-top-left-radius:0px;
}

.CSSTableGenerator table tr:first-child td:last-child {
-moz-border-radius-topright:0px;
-webkit-border-top-right-radius:0px;
border-top-right-radius:0px;
}

.CSSTableGenerator tr:last-child td:first-child{
	-moz-border-radius-bottomleft:0px;
	-webkit-border-bottom-left-radius:0px;
	border-bottom-left-radius:0px;
}

.CSSTableGenerator tr:hover td{
background-color:#cccc99;
}

.CSSTableGenerator td{
	vertical-align:middle;
	border-style:ridge;
	border-color:tan;
	background-color:#eeeeee;
	border:1px solid #000000;
	border-width:0px 1px 1px 0px;
	text-align:left;
	padding:7px;
	font-size:14px;
	font-family:Arial;
	font-weight:normal;
	color:#000000;
}

.CSSTableGenerator tr:last-child td{
	border-width:0px 1px 0px 0px;
}

.CSSTableGenerator tr td:last-child{
	border-width:0px 0px 1px 0px;
}

.CSSTableGenerator tr:last-child td:last-child{
border-width:0px 0px 0px 0px;
}

.CSSTableGenerator tr:first-child td{
	background:-o-linear-gradient(bottom, #003366 5%, #003f7f 100%);	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #003366), color-stop(1, #003f7f) );
	background:-moz-linear-gradient( center top, #003366 5%, #003f7f 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#003366", endColorstr="#003f7f");	background: -o-linear-gradient(top,#003366,003f7f);
	background-color:#003366;
	border:0px solid #000000;
	text-align:center;
	border-width:0px 0px 1px 1px;
	font-size:14px;
	font-family:Arial;
	font-weight:bold;
	color:#ffffff;
}

.CSSTableGenerator tr:first-child:hover td{
background:-o-linear-gradient(bottom, #003366 5%, #003f7f 100%);	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #003366), color-stop(1, #003f7f) );
background:-moz-linear-gradient( center top, #003366 5%, #003f7f 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#003366", endColorstr="#003f7f");	background: -o-linear-gradient(top,#003366,003f7f);
background-color:#003366;
}

.CSSTableGenerator tr:first-child td:first-child{
border-width:0px 0px 1px 0px;
}

.CSSTableGenerator tr:first-child td:last-child{
border-width:0px 0px 1px 1px;
}

.btn,modifboutton{
	background: #323c42;
	background-image: -webkit-linear-gradient(top, #323c42, #2980b9);
	background-image: -moz-linear-gradient(top, #323c42, #2980b9);
	background-image: -ms-linear-gradient(top, #323c42, #2980b9);
	background-image: -o-linear-gradient(top, #323c42, #2980b9);
	background-image: linear-gradient(to bottom, #323c42, #2980b9);
	-webkit-border-radius: 4;
	-moz-border-radius: 4;
	border-radius: 4px;
	text-shadow: 3px 6px 9px #666666;
	font-family: Arial;
	color: #ffffff;
	font-size: 14px;
	padding: 12px 18px 10px 20px;
	border: solid #1f628d 4px;
	text-decoration: none;
	width:200px;
}

.btnspe{
	align:right;
	float:right;
}

.btnspe2{
	align:right;
	float:right;
}

.btn:hover {
	background: #fc6f3c;
	background-image: -webkit-linear-gradient(top, #fc6f3c, #d9349f);
	background-image: -moz-linear-gradient(top, #fc6f3c, #d9349f);
	background-image: -ms-linear-gradient(top, #fc6f3c, #d9349f);
	background-image: -o-linear-gradient(top, #fc6f3c, #d9349f);
	background-image: linear-gradient(to bottom, #fc6f3c, #d9349f);
	text-decoration: none;
}
		
</style>
</html>

Se connecter à MongoDb avec Jquery

Introduction


Pour stocker un objet JSON dans une base de donnée relationnelle comme Mysql ou Oracle, il faut utiliser un langage annexe(PHP, JAVA), et « déconstruire l’objet » Json avant de l’enregistrer dans la base de donnée.

Pour rappel, JSON veut dire « javascript objet notation » et un objet Json ressemble à ça :


{"Nom":"Durand","Prenom":"Paul"}

Il vient donc qu’on pourrait imaginer une base de donnée qui stockerait directement des objets JSON, sans avoir à les modifier, ou à les « passer » à un autre langage.

Voilà pourquoi MongoDB existe. C’est une base de donnée non relationelle, qui stocke des objets JSON.

L’inconvénient est qu’on ne peut pas utiliser le langage SQL dessus, et que si on a besoin de filtrer, on doit utiliser Javascript.

L’avantage est qu’on a plus besoin de Java ou de PHP pour gérer les connexions etc…

J’adore le SQL qui permet d’appliquer des fonctions très puissantes comme sum(), avg() et de faire des jointures; néanmoins je vais donc commencer à me servir de MongoDb pour certains projets.

Comment se connecter à MongoLab et lire les données:


Etape 1 :

Mongolab nous permet de tester MongoDb en ligne, et de créer une base de donnée MongoDb.

Donc : Créer une base de donnée MongodDb gratuite sur le site Mongolab en suivant ce tuto en Anglais .

Ne pas suivre ses informations de la seconde partie concernant la connexion.Il existe 2 methodes de connexion : avec un driver, ou avec REST(en html) et nous allons utiliser cette dernière.

Etape 2 :

Dans un bête fichier  index.html, Utiliser la fonction habituelle Ajax de Jquery $.ajax() pour se connecter en ligne à notre base de donnée MONGODB.


<html ng-app="myApp">
	<head>
		<meta charset="iso-8859-15" >
		<!-- -----------------------------------------------DEBUT DU CHARGEMENT DES LIBRAIRIES------------------------ -->

		<!--	APPEL LIB ANGULAR -->
		<!-- <script	type="text/javascript" 	src="angular-1.3.13/angular.min.js"></script> -->

		<!--	APPEL LIB JQUERY -->
		<script	type="text/javascript" 	src="librairies/jquery.js"					></script>

		<!-- ----------------------------------------------FIN DU CHARGEMENT DES LIBRAIRIES------------------------ ----->

	</head>

<script>

			$.ajax({
				url: "https://api.mongolab.com/api/1/databases/superjojo/collections/Test?apiKey=GP50LkzEgoxBnZDP9N-jCkpO5xxxxxxx",
				contentType: "application/json",
				success: function (data) {
				console.log(data);
				alert(data);
				},
			}); 

</script>

Voilà, on peut visualiser le contenu de notre Base de donnée dans la console grâce à l’instruction

console.log(data);

Explication pour trouver l’URL de connexion à notyre base de donnée(Ils appelent ça « REST »): Dans l’interface de Mongolab, cliquer sur « user ».  On trouve alors l’url qui va nous permettre de nous connecter, il faut y coller son ID à la fin de l’url pour que ça marche.

mongo

Dans l’url, on peut modifier d’autres choses, comme le nom de notre « collection » qui est en fait le nom de notre database, pour pouvoir bien se connecter. En l’occurence, ma collection se nomme « Test ». Ma Sandbox s’appelle Superjojo, et apparait également dans l’URL.

[/sourcecode]

 Comment écrire les données dans MONGOLAB avec Jquery ?


A suivre ..

Micro Application 2 : SuperVache avec Angular.Js

Introduction : supervachelogo


C’est un exercice de Micro application d’enregistrement de vaches avec sliders, pourcentages, et modifications en temps réel avec Angular.js.

From Scratch, mais un peu inspiré par http://jsfiddle.net/7n8NR/3/

Pas de couche de persistance. Tout est en RAM. A tester ICI .

Description :


Langage : Angular.js, Html5.0, Css3.0

Temps de réalisation : 1h30

Type : Micro-Application Front office

vache1

Explication


On a un seul fichier Index.html qui est une single page application.

Dans ce fichier,

  1. On charge la librairie Angular.js,
  2. On a un contrôleur qui contient toutes les fonctions qui opérent sur la vue.
  3. On a une vue Html qui se mets à jour en temps réel automatiquement.
  4. On a les CSS en fin de fichier. (Ils ont été générés par des générateurs sur internet et copiés collés en 2 minutes)

Dans le contrôleur (Le js),

  • La fonction enregistrer() enregistre une vache dans le tableau vaches[].
  • La fonction modifierClique() charge dans la vue les données d’une vache préexistante.
  • La fonction rmodifs() (avec r pour record) enregistre une modification.

Dans la vue (Le html) :

  • Une div « Informations », pour informer l’utilisateur.
  • Une div « Formulaire » pour que l’utilisateur entre les données.
  • Une div « Vision » qui renseigne l’utilisateur en temps réel avec angular.
  • Une div « Liste » qui est le tableau des vaches enregistrées, et qui s’actualise en temps réel avec angular.

 Note : Le bouton « Modifier la vache » est désactivé si on ne clique pas sur « modifier » avant.(Faudrait changer le css d’un bouton désactivé.)

L’autre amélioration serait de créer une fonction inti() qui initialise les données d’une vache à un car là je réecris toutes les variables pour réinitialiser à chaque fois.

Le Code :



<html lang="fr" ng-app="achat">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
		<!-- -----------------------------------------------DEBUT DU CHARGEMENT DES LIBRAIRIES------------------------ -->
		
		<!--	APPEL LIB ANGULAR -->
		<script	type="text/javascript" 	src="angular-1.3.13/angular.min.js"></script>
		
		<!-- -----------------------------------------------FIN DU CHARGEMENT DES LIBRAIRIES------------------------ ----->
		<script>
			var myApp = angular.module('achat',[]);
				
			myApp.controller('NameCtrl', function($scope) {
				
				//Initialisation des Variables
				var date = new Date();
				$scope.nom		='Vache';
				$scope.laitage	='1';
				$scope.vivacite	='1';
				$scope.age		='1';
				$scope.date		= date;
				$scope.alert	='Rien à signaler';
				$scope.vaches = [];
				document.getElementById("modif").disabled = true; 
				
				// Enregistre une vache et ses caractéristiques en Mémoire Vive, dans un tableau js
				$scope.enregistrer	=	function(){
	
					if ($scope.nom == ''){
					$scope.alert='Le Champs nom de la Vache est Vide';
					}
					
					else {
					// Ajoute le nom et le prix de l'objet au tableau
					$scope.vaches.push({
						nom: $scope.nom,
						laitage: $scope.laitage,
						vivacite: $scope.vivacite,
						age: $scope.age,
					});
						$scope.alert='Elément ajouté';
						// Supprime le contenu des champs après un push de variables dans le tableau
						$scope.nom		='Vache';
						$scope.laitage	='1';
						$scope.vivacite	='1';
						$scope.age		='1';
						
					}
				}
					
				
				// Affiche les données d'une vache enregistrée en RAM et Modifie .
				$scope.modifierClique	=	function(index){
						document.getElementById("modif").disabled = false; 
						window.index = index;
						//Initialisation des curseurs avec les données de la vache
						$scope.nom 		= $scope.vaches[index].nom;
						$scope.laitage 	= $scope.vaches[index].laitage;
						$scope.vivacite = $scope.vaches[index].vivacite;
						$scope.age		= $scope.vaches[index].age;
						$scope.alert	='Modifiez la vache';
				}
				
				// Enregistre les données modifiees d'une vache en RAM .
				$scope.rmodifs	=	function(){
						
						i=window.index;
						
						$scope.vaches[i].nom 		= $scope.nom 	;
						$scope.vaches[i].laitage	= $scope.laitage ;
						$scope.vaches[i].vivacite 	= $scope.vivacite;
						$scope.vaches[i].age 		= $scope.age	;
						document.getElementById("modif").disabled = true; 
						$scope.alert	='La vache a été modifiée, boutton "Modifier la vache" désactivé';
						$scope.nom		='Vache';
						$scope.laitage	='1';
						$scope.vivacite	='1';
						$scope.age		='1';
				}
				
				// Affiche combien il y a de lignes dans le tableau
				$scope.getTotalItems = function () {
					return $scope.vaches.length;
				};
				
				
				// Supprime une vache dans liste
				$scope.supprimeClique = function (index) {
						$scope.vaches.splice(index, 1);
				};
			
			
				// Affiche le prix total des Vaches (optionnel)
				$scope.getTotal = function(){
					var total = 0;
					for(var i = 0; i < $scope.vaches.length; i++){
					total += $scope.vaches[i].prix;
					}
					return total;
				}
			});
			
		</script>
	</head>

<body ng-controller="NameCtrl" class="body">

	<div class="formulaire" ><h1><p> Ajouter une Vache</p></h1>
		<img src="vache.jpg" class="img"><br><br>
		<form>
			<label >Nom :</label> 	
			<input ng-model="nom" type="text" class ="champs" /><br>
			<label >Laitage:</label>        
			<input ng-model="laitage" type="range" min="0" max="100"class ="champs"  /> %<br>
			<label >Vivacité:</label>        
			<input ng-model="vivacite" type="range" min="0" max="100" class ="champs" /> % <br>
			<label >Age :</label>        
			<input ng-model="age" type="range" min="0" max="20"   class ="champs" /> Ans<br>	<br><br>
			<button class="btn" ng-click="enregistrer()" > Ajouter la Vache</button>
			<button class="btn" ng-click="rmodifs($index)" id="modif" >Modifier la Vache</button>
		</form>
	</div>	


	<div class="infos"><h1> <p>Informations:</p></h1>
		<p>
		{{alert}}
		</p>
	</div>	
		
	<div class="vision" > <h1><p> Description:</p></h1>
		<p>Votre vache s'appelle <b>{{nom}}</b><br>
		<b>Laitage </b>{{laitage}} % <br>
		<b>Vivacité </b>{{vivacite}}  % <br>
		<b>Age </b>{{age}}  ans<br>
	</div>

	<br>	

	<div class="liste"><h1><p>Liste({{getTotalItems()}})</p></h1>
		 <input type="search" ng-model="q" placeholder="Rechercher une Vache" />
		<table class="CSSTableGenerator " >
		   <tr>
					<td><b>Nom:</b></td>
					<td><b>Laitage:</b></td>
					<td><b>Vivacité:</b></td>
					<td><b>Age:</b></td>
					<td><b>Modifier:</b></td>
					<td><b>Supprimer:</b></td>
			</tr>
		   <tr  ng-repeat="vache in vaches | filter:q as results" >
					<td>{{vache.nom}} </td>
					<td>{{vache.laitage}} %</td>
					<td>{{vache.vivacite}} %</td>
					<td>{{vache.age}} ans</td>
					<td><button ng-click="modifierClique($index)" class="btn">Modifier</button></td>
					<td><button ng-click="supprimeClique($index)" class="btn">Supprimer</button></td>

			</tr>
		</table>	
	</div>	


</body>
		
<style>
.body{
	font-family:arial;
	font-size:1.2em;
			}
			
.img{
	height:200px;
	width:200px;
	float:left;
	margin-left:15px;
	-webkit-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
	-webkit-box-shadow:inset 2px 2px 2px 2px #635453;
	box-shadow:inset 2px 2px 2px 2px #635453;
}		
h1{
	font-size:1.2em;
	background-color:lightgrey;
	-webkit-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
	-webkit-box-shadow:inset 2px 2px 2px 2px #635453;
	box-shadow:inset 2px 2px 2px 2px #635453;
}
p{
	margin-left:15px;
}
.infos{
	min-height:20px;
	height:auto;
	width:auto;
	background-color:ivory;
	-webkit-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
	-webkit-box-shadow:inset 2px 2px 2px 2px #635453;
	box-shadow:inset 2px 2px 2px 2px #635453;$
	float:left;
	margin: 0px auto;
	margin: 0px auto;
	margin: 0px auto;
	margin: 0px auto;
}
.formulaire{
	height:360px;
	width:700px;
	background-color:ivory;
	text-align:center;
	-webkit-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
	-webkit-box-shadow:inset 2px 2px 2px 2px #635453;
	box-shadow:inset 2px 2px 2px 2px #635453;
}
.vision{
	margin: 0px auto;
	margin: 0px auto;
	margin: 0px auto;
	margin: 0px auto;
	height:150px;
	width:auto;
	background-color:ivory;
	margin-right: auto ;
	-webkit-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
	-webkit-box-shadow:inset 2px 2px 2px 2px #635453;
	box-shadow:inset 2px 2px 2px 2px #635453;
}
.liste{
	max-height:300px;
	min-height:20px;
	height:auto;
	width:auto;
	background-color:ivory;
	-webkit-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
	-webkit-box-shadow:inset 2px 2px 2px 2px #635453;
	box-shadow:inset 2px 2px 2px 2px #635453;$
	margin: 0px auto;
	margin: 0px auto;
	margin: 0px auto;
	margin: 0px auto;
	overflow:auto;
}
.champs{
	margin-top:5px;
	width:200px;
	align: center ;
	margin-left: auto ;
	margin-right: auto ;	
	-webkit-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
}
.CSSTableGenerator {
	margin:0px;padding:0px;
	width:100%;
	box-shadow: 10px 10px 5px #888888;
	border:1px solid #000000;
	-moz-border-radius-bottomleft:0px;
	-webkit-border-bottom-left-radius:0px;
	border-bottom-left-radius:0px;
	-moz-border-radius-bottomright:0px;
	-webkit-border-bottom-right-radius:0px;
	border-bottom-right-radius:0px;
	-moz-border-radius-topright:0px;
	-webkit-border-top-right-radius:0px;
	border-top-right-radius:0px;
	-moz-border-radius-topleft:0px;
	-webkit-border-top-left-radius:0px;
	border-top-left-radius:0px;
}
.CSSTableGenerator table{
	border-collapse: collapse;
		border-spacing: 0;
	width:100%;
	height:100%;
	margin:0px;padding:0px;
}
.CSSTableGenerator tr:last-child td:last-child {
	-moz-border-radius-bottomright:0px;
	-webkit-border-bottom-right-radius:0px;
	border-bottom-right-radius:0px;
}
.CSSTableGenerator table tr:first-child td:first-child {
	-moz-border-radius-topleft:0px;
	-webkit-border-top-left-radius:0px;
	border-top-left-radius:0px;
}
.CSSTableGenerator table tr:first-child td:last-child {
	-moz-border-radius-topright:0px;
	-webkit-border-top-right-radius:0px;
	border-top-right-radius:0px;
}
.CSSTableGenerator tr:last-child td:first-child{
	-moz-border-radius-bottomleft:0px;
	-webkit-border-bottom-left-radius:0px;
	border-bottom-left-radius:0px;
}
.CSSTableGenerator tr:hover td{
	background-color:#cccc99;
		
}
.CSSTableGenerator td{
	vertical-align:middle;
	
	background-color:#cccccc;
	border:1px solid #000000;
	border-width:0px 1px 1px 0px;
	text-align:left;
	padding:7px;
	font-size:1.2em;
	font-family:Arial;
	font-weight:normal;
	color:#000000;
}
.CSSTableGenerator tr:last-child td{
	border-width:0px 1px 0px 0px;
}
.CSSTableGenerator tr td:last-child{
	border-width:0px 0px 1px 0px;
}
.CSSTableGenerator tr:last-child td:last-child{
	border-width:0px 0px 0px 0px;
}
.CSSTableGenerator tr:first-child td{
	background:-o-linear-gradient(bottom, #003366 5%, #003f7f 100%);	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #003366), color-stop(1, #003f7f) );
	background:-moz-linear-gradient( center top, #003366 5%, #003f7f 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#003366", endColorstr="#003f7f");	background: -o-linear-gradient(top,#003366,003f7f);
	background-color:#003366;
	border:0px solid #000000;
	text-align:center;
	border-width:0px 0px 1px 1px;
	font-size:1.2em;
	font-family:Arial;
	font-weight:bold;
	color:#ffffff;
}
.CSSTableGenerator tr:first-child:hover td{
	background:-o-linear-gradient(bottom, #003366 5%, #003f7f 100%);	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #003366), color-stop(1, #003f7f) );
	background:-moz-linear-gradient( center top, #003366 5%, #003f7f 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#003366", endColorstr="#003f7f");	background: -o-linear-gradient(top,#003366,003f7f);
	background-color:#003366;
}
.CSSTableGenerator tr:first-child td:first-child{
	border-width:0px 0px 1px 0px;
}
.CSSTableGenerator tr:first-child td:last-child{
	border-width:0px 0px 1px 1px;
}
.btn {
	background: #d93484;
	background-image: -webkit-linear-gradient(top, #d93484, #b82b2b);
	background-image: -moz-linear-gradient(top, #d93484, #b82b2b);
	background-image: -ms-linear-gradient(top, #d93484, #b82b2b);
	background-image: -o-linear-gradient(top, #d93484, #b82b2b);
	background-image: linear-gradient(to bottom, #d93484, #b82b2b);
	-webkit-border-radius: 13;
	-moz-border-radius: 13;
	border-radius: 13px;
	text-shadow: 5px 3px 3px #666666;
	-webkit-box-shadow: 4px 8px 11px #666666;
	-moz-box-shadow: 4px 8px 11px #666666;
	box-shadow: 4px 8px 11px #666666;
	font-family: Arial;
	color: #ffffff;
	font-size:1.0em;
	padding: 21px;
	border: solid #d1047f 3px;
	text-decoration: none;
}
.btn:hover {
	background: #fcd63c;
	background-image: -webkit-linear-gradient(top, #fcd63c, #cc5414);
	background-image: -moz-linear-gradient(top, #fcd63c, #cc5414);
	background-image: -ms-linear-gradient(top, #fcd63c, #cc5414);
	background-image: -o-linear-gradient(top, #fcd63c, #cc5414);
	background-image: linear-gradient(to bottom, #fcd63c, #cc5414);
	text-decoration: none;
}
		
</style>

</html>

Micro-Application 1 avec Angular.js

Introduction


Voici une première micro application d’enregistrement d’objets, avec une liste qui s’alimente automatiquement et une div d’infos.

Le fait d’avoir un contrôleur qui gère tout est très agréable, $scope est facile d’utilisation, la vue qui se met à jour automatiquement est fantastique. La gestion MVC est très cool, de plus cela simplifie également la consultation et l’analyse de forums comme StackOverflow .

La durée de réalisation et la simplicité d’Angular est excellente.Angular mettant les vues à jour automatiquement, cela simplifie énormément le code.

Cliquez ici pour tester

app1

Description


Technologie : Angular.js

Temps de réalisation : 1H30

Explication


Il n’y a pas de contrôle d’inputs HTML ce n’est pas l’objet de l’appli, je n’ai pas poussé le truc, exprès.

Le but est seulement de voir le tableau[] s’incrémenter et $scope mettre à jour la vue, en fonction des données entrées, ce qui est tripant.

Tout tient dans un simple fichier Html!

Les css de la liste des objets ont été générés à l’aide d’un générateur de css sur internet.

La suite logique de cette micro application sera un enregistrement en couche de persistance(BDD) Mysql ou Oracle ou non relationelle MongoDb (->Objet Json) avec Java ou Php ou node.js.  Que je n’ai pas fait là. C’est super simple, car toutes les données sont déjà dans un tableau, il ne reste plus qu’à picorer, dedans …

Le code


<html lang="fr" ng-app="achat">
    <head>
        <meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
        <!-- -----------------------------------------------DEBUT DU CHARGEMENT DES LIBRAIRIES------------------------ -->
        
        <!--    APPEL LIB ANGULAR -->
        <script    type="text/javascript"     src="angular-1.3.13/angular.min.js"></script>
        
        <!-- -----------------------------------------------FIN DU CHARGEMENT DES LIBRAIRIES------------------------ ----->
        <script>
            var myApp = angular.module('achat',[]);
                
            myApp.controller('NameCtrl', function($scope) {
                var date = new Date();
                $scope.nom        ='';
                $scope.marque     ='';
                $scope.prix       ='';
                $scope.email      ='';
                $scope.date       = date;
                $scope.alert      ='Rien à signaler';
                $scope.tableau    = [];
                
                $scope.enregistrer    =    function(){
    
                    if ($scope.nom == ''){
                        $scope.alert='Champs nom Vide';
                    }
                    
                    else {
                    // Ajoute le nom et le prix de l'objet au tableau
                      $scope.tableau.push({
                      nom: $scope.nom,
                      prix:$scope.prix,
                      });
                
                    
                    $scope.alert='élément ajouté';
                    
                    // Supprime le contenu des champs après un push de variables dans le tableau
                    $scope.nom  = "";
                    $scope.prix = "";
                    console.log($scope.tableau);
                    }
                }
                
                $scope.getTotalItems = function () {
                    // retourne combien il y a de lignes dans le tableau
                    return $scope.tableau.length;
                };
                
                $scope.getTotal = function(){
                    var total = 0;
                    for(var i = 0; i < $scope.tableau.length; i++){
                        
                        total += $scope.tableau[i].prix;
                    }
                    return total;
                }
                
                   $scope.supprimeClique = function (index) {
                        $scope.tableau.splice(index, 1);
                    };
            
            
            
            
            });
            
        </script>
        

    </head>

<body ng-controller="NameCtrl" class="body">

<div class="infos"><h1>Informations:</h1>
<p>
{{alert}}
</p>
</div>    

<div class="formulaire" ><h1>Enregistrer un Objet</h1>
    <form    ng-submit="enregistrer()">
    Nom de l'objet<br>        <input ng-model="nom"          type="text"     class ="champs" /><br>
    Marque<br>                <input ng-model="marque"       type="text"     class ="champs"    /><br>
    Prix<br>                  <input ng-model="prix"         type="number"     class ="champs" step="0.01"    /><br>
    Email Constructeur<br>    <input ng-model="email"        type="email"     class ="champs" /><br>
    Date yyyy-mm-dd<br>       <input ng-model="date"         type="date"     class ="champs" /><br>
    <input type="submit" value="Ajouter l'objet ">
    </form>
</div>    
    
<div class="vision" > <h1>Description</h1>
    <p>Votre objet s'appelle <b>{{nom}}</b><br>
    Sa Marque est <b>{{marque}}</b><br>
    Son prix est de  <b>{{prix }}</b> Euros<br>
    Son email constructeur est <b>{{email}}</b><br>
    Nous sommes le <b>{{date}}</b><br></p>
</div>
    
<div class="liste"><h1>Liste({{getTotalItems()}})</h1>
    <p>Total: {{getTotal()}} Euros</p>
    <table class="CSSTableGenerator ">
            <tr ng-repeat="truc in tableau" >
                <td><b>Nom:</b> {{truc.nom}} </td>
                <td><b>Prix €:</b> {{truc.prix}} €  </td>
                <td>
            <button ng-click="supprimeClique($index)">Supprimer</button>
            </td>
        </tr>
    </table>    

</div>    
    
</body>
        



        
        
        
<style>
        .body{
            font-family:arial;
        }    
         
        h1{
        
        font-size:1.2em;
        text-align: center;
        background-color:lightgrey;
        -webkit-border-radius: 10px 10px 10px 10px;
        border-radius: 10px 10px 10px 10px;
        -webkit-box-shadow:inset 2px 2px 2px 2px #635453;
        box-shadow:inset 2px 2px 2px 2px #635453;
        }
        
        p{
        margin-left:15px;
        }
        
        .formulaire{
        
        height:330px;
        width:400px;
        background-color:ivory;
        float:center;
        margin-left: auto ;
        margin-right: auto ;
        text-align:center;
        -webkit-border-radius: 10px 10px 10px 10px;
        border-radius: 10px 10px 10px 10px;
        -webkit-box-shadow:inset 2px 2px 2px 2px #635453;
        box-shadow:inset 2px 2px 2px 2px #635453;
        }
        
        
        .vision{
        margin-top:30px;
        height:200px;
        width:400px;
        background-color:ivory;
        float:center;
        margin-left: auto ;
        margin-right: auto ;
        -webkit-border-radius: 10px 10px 10px 10px;
        border-radius: 10px 10px 10px 10px;
        -webkit-box-shadow:inset 2px 2px 2px 2px #635453;
        box-shadow:inset 2px 2px 2px 2px #635453;
        }
        
        
        .liste{
        margin-top:100px;
        min-height:20px;
        height:auto;
        width:280px;
        background-color:ivory;
        -webkit-border-radius: 10px 10px 10px 10px;
        border-radius: 10px 10px 10px 10px;
        -webkit-box-shadow:inset 2px 2px 2px 2px #635453;
        box-shadow:inset 2px 2px 2px 2px #635453;$
        position:absolute;
        margin-top:-500px;

        }
        
        .infos{
        <!-- margin-top:100px; -->
        min-height:20px;
        height:auto;
        width:500px;
        background-color:ivory;
        -webkit-border-radius: 10px 10px 10px 10px;
        border-radius: 10px 10px 10px 10px;
        -webkit-box-shadow:inset 2px 2px 2px 2px #635453;
        box-shadow:inset 2px 2px 2px 2px #635453;$

        margin-top:auto;
        margin-left:auto;
        margin-right:auto;
        }
        
        
        .champs{
        margin-top:5px;
        width:200px;
        align: center ;
        margin-left: auto ;
        margin-right: auto ;    
        -webkit-border-radius: 5px 5px 5px 5px;
        border-radius: 5px 5px 5px 5px;

        }
        
        .CSSTableGenerator {
            margin:0px;padding:0px;
            width:100%;
            box-shadow: 10px 10px 5px #888888;
            border:1px solid #000000;
            
            -moz-border-radius-bottomleft:0px;
            -webkit-border-bottom-left-radius:0px;
            border-bottom-left-radius:0px;
            
            -moz-border-radius-bottomright:0px;
            -webkit-border-bottom-right-radius:0px;
            border-bottom-right-radius:0px;
            
            -moz-border-radius-topright:0px;
            -webkit-border-top-right-radius:0px;
            border-top-right-radius:0px;
            
            -moz-border-radius-topleft:0px;
            -webkit-border-top-left-radius:0px;
            border-top-left-radius:0px;
        }.CSSTableGenerator table{
            border-collapse: collapse;
                border-spacing: 0;
            width:100%;
            height:100%;
            margin:0px;padding:0px;
        }.CSSTableGenerator tr:last-child td:last-child {
            -moz-border-radius-bottomright:0px;
            -webkit-border-bottom-right-radius:0px;
            border-bottom-right-radius:0px;
        }
        .CSSTableGenerator table tr:first-child td:first-child {
            -moz-border-radius-topleft:0px;
            -webkit-border-top-left-radius:0px;
            border-top-left-radius:0px;
        }
        .CSSTableGenerator table tr:first-child td:last-child {
            -moz-border-radius-topright:0px;
            -webkit-border-top-right-radius:0px;
            border-top-right-radius:0px;
        }.CSSTableGenerator tr:last-child td:first-child{
            -moz-border-radius-bottomleft:0px;
            -webkit-border-bottom-left-radius:0px;
            border-bottom-left-radius:0px;
        }.CSSTableGenerator tr:hover td{
            
        }
        .CSSTableGenerator tr:nth-child(odd){ background-color:#ffaa56; }
        .CSSTableGenerator tr:nth-child(even)    { background-color:#ffffff; }.CSSTableGenerator td{
            vertical-align:middle;
            
            
            border:1px solid #000000;
            border-width:0px 1px 1px 0px;
            text-align:left;
            padding:7px;
            font-size:10px;
            font-family:Arial;
            font-weight:normal;
            color:#000000;
        }.CSSTableGenerator tr:last-child td{
            border-width:0px 1px 0px 0px;
        }.CSSTableGenerator tr td:last-child{
            border-width:0px 0px 1px 0px;
        }.CSSTableGenerator tr:last-child td:last-child{
            border-width:0px 0px 0px 0px;
        }
        .CSSTableGenerator tr:first-child td{
                background:-o-linear-gradient(bottom, #ff7f00 5%, #bf5f00 100%);    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff7f00), color-stop(1, #bf5f00) );
            background:-moz-linear-gradient( center top, #ff7f00 5%, #bf5f00 100% );
            filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff7f00", endColorstr="#bf5f00");    background: -o-linear-gradient(top,#ff7f00,bf5f00);

            background-color:#ff7f00;
            border:0px solid #000000;
            text-align:center;
            border-width:0px 0px 1px 1px;
            font-size:14px;
            font-family:Arial;
            font-weight:bold;
            color:#ffffff;
        }
        .CSSTableGenerator tr:first-child:hover td{
            background:-o-linear-gradient(bottom, #ff7f00 5%, #bf5f00 100%);    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff7f00), color-stop(1, #bf5f00) );
            background:-moz-linear-gradient( center top, #ff7f00 5%, #bf5f00 100% );
            filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff7f00", endColorstr="#bf5f00");    background: -o-linear-gradient(top,#ff7f00,bf5f00);

            background-color:#ff7f00;
        }
        .CSSTableGenerator tr:first-child td:first-child{
            border-width:0px 0px 1px 0px;
        }
        .CSSTableGenerator tr:first-child td:last-child{
            border-width:0px 0px 1px 1px;
        }
        
</style>

</html>