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 ..

Publicités

Modifier le design de tous les boutons d’un site

Introduction

Voici une méthode pour modifier le design de tous les boutons d’un site Web.

Comment faire ?

Etape 1: 

trouver un générateur de Css sur internet :

http://css3buttongenerator.com/

ou

http://www.bestcssbuttongenerator.com/#/Y9mh0kYQ7a

Etape 2 : Désigner le boutton puis copier coller le code généré sur la page du générateur

Exemple :


.button {
-moz-box-shadow:inset 0px 1px 3px 0px #91b8b3;
-webkit-box-shadow:inset 0px 1px 3px 0px #91b8b3;
box-shadow:inset 0px 1px 3px 0px #91b8b3;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #768d87), color-stop(1, #6c7c7c));
background:-moz-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
background:-webkit-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
background:-o-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
background:-ms-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
background:linear-gradient(to bottom, #768d87 5%, #6c7c7c 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#768d87', endColorstr='#6c7c7c',GradientType=0);
background-color:#768d87;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
border:1px solid #566963;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:11px 23px;
text-decoration:none;
text-shadow:0px -1px 0px #2b665e;
}
.button:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #6c7c7c), color-stop(1, #768d87));
background:-moz-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
background:-webkit-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
background:-o-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
background:-ms-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
background:linear-gradient(to bottom, #6c7c7c 5%, #768d87 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6c7c7c', endColorstr='#768d87',GradientType=0);
background-color:#6c7c7c;
}
.button:active {
position:relative;
top:1px;
}

Etape 3 : Coller le précédent dans le fichier style.css du site Web.

Etape 4  : Affecter la classe .button à tous les bouttons comme ceci (exemple):


<button class="button" type="button" id="enregistrerEtudiant" style="margin-left:50px" name="subscribeForm" >Enregistrer sa Fiche </button>

Résultat :

btn

vd