Ressources Magic Makers

EXPERIMENTER

J'apprends en me trompant.

EXPERIMENTER

J'apprends en me trompant.

PARTAGER

J'ai des idées et je les partage avec les autres.
partager

PARTAGER

J'ai des idées et je les partage avec les autres.

RAISONNER

Je suis fier de ce que je fais.

RAISONNER

Je suis fier de ce que je fais.

INVENTER

Je suis la pour créer.

INVENTER

Je suis la pour créer.

S'AMUSER

Je viens parce que j'en ai envie.

S'AMUSER

Je viens parce que j'en ai envie.
Menu
UP

Meteor avec HTML

On a vu comment fonctionnait Meteor, on a vu comment fonctionnait le HTML, maintenant comment les deux fonctionnent ensemble.

Bien structurer son projet !

Lorsqu’on crée notre projet on a une arborescence comme ça.

Tout en haut on a le dossier qui contient tout le projet et qui porte le nom de notre projet.

Il y a un dossier « client » qui contient trois fichiers, celui pour le CSS, celui pour le HTML, et celui pour le JavaScript.

Meteor de base exécute ce qui se trouve dans le dossier « client ».

Ajouter des fichiers

Maintenant qu’on a la base on ne va pas ajouter tout notre code JavaScript et tout notre HTML dans les deux fichiers. Il est important d’avoir des dossiers et des noms de fichier qui expliquent ce qu’il y a dedans.

On va donc créer un dossier « imports » différent avant de commencer à continuer à avancer dans notre projet. Et dans ce dossier on va en ajouter trois autres, l’un pour nos bases de données « bdd », l’un pour la configuration des utilisateurs « config » et le dernier pour tout ce qui sera fichier HTML et code JavaScript, « ui ».

Une fois qu’on a créé ça on va ajouter deux fichiers dans le dernier dossier créé « ui ». Et on va les nommer « body.html » et « body.js ».

Maintenant qu’on a une arborescence pour bien différencier les points de notre projet on peut commencer à créer. D’abord on va enlever ce qui se trouve dans les fichiers main.html et main.js dans le dossier client. Et remplacer par ce qu’on souhaite. 

client/main.htmlclient/main.jsimports/ui/body.htmlimports/ui/body.jsTout voir 
1
2
3
4
<head>
  <title>Portefolio !</title>
  <link rel="stylesheet" href="main.css">
</head>

1
import '../imports/ui/body.js';

1
2
3
4
5
<body>
    <header>
        <h1>Portefolio !</h1>
    </header>
</body>

1
2
3
4
5
6
//import utile
import { Meteor } from 'meteor/meteor';
import { Template } from 'meteor/templating';

//import html
import './body.html';
client/main.html : 
1
2
3
4
 


  <link rel="stylesheet" href="main.css">











client/main.js :










1




import '../imports/ui/body.js';










imports/ui/body.html :

1
2
3
4
5
<body>
    <header>
        <h1>Portefolio !</h1>
    </header>
</body>



imports/ui/body.js :










1
2
3
4
5
6




//import utile
import { Meteor } from 'meteor/meteor';
import { Template } from 'meteor/templating';

//import html
import './body.html';









                


            


        		

				

						

					

		

								

					

		

				

						

							

					

			

							

						

				

								

					
Maintenant on a une structure de projet qui est claire, on pourra rajouter nos différents templates dans des fichiers HTML qu’on créera avec un nom de fichier clair. On fera de même pour les fichiers JavaScript qu’on rajoutera.
					

						

				

						

					

		

								

					

		

				

						

							

					

			

							

						

				

								

					
La différentiation entre les fichiers HTML et ceux JavaScript :
  • Les fichiers HTML ont à la fin de leur nom le « .html », ils ont uniquement des balises HTML et ne peuvent pas avoir de condition.
  • Les fichiers JavaScript ont à la fin de leur nom un « .js », ils servent à gérer tous les événements qui se passent sur la page. Ils servent aussi à gérer les bases de données. Et il ne doit pas y avoir de HTML dedans !
					

						

				

						

					

		

								

					

		

				

						

							

					

			

							

						

				

			
Templates
		

				

						

					

		

								

					

		

				

						

							

					

			

							

						

				

								

					
On va pouvoir faire des pages dynamiques sans recharger la page, pour cela on va utiliser les templates.
Un template ? Qu’est-ce-que c’est ?
Un template est dans Meteor un moyen d’organiser sa page HTML comme on le souhaite et de programmer ensuite ce qu’il se passe à l’intérieur de ce template de manière beaucoup plus simple.
Imaginons on veut rajouter une catégorie « Informations » dans notre projet. On va donc créer un fichier « Informations.html »  dans le dossier « imports/ui ».
					

						

				

						

					

		

								

					

		

				

						

							

					

			

							

						

						

							

					

			

							

						

				

								

					body.html :


1
2
3
4
5
6
7
8
<body>
    <header>
        <h1>Portefolio !</h1>
    </header>
    <div>
        {{> information}}
    </div>
</body>


					

						

				

						

					

		

				

			

							

						

				

								

					
Informations.html :
1
2
3
<template name="information">
    
Informations
</template>
					

						

				

						

					

		

								

					

		

						

					

		

								

					

		

				

						

							

					

			

							

						

				

								

					
On a donc notre nouveau fichier et on a un peu changé notre fichier body.html parce qu’on voulait afficher notre nouveau Template qu’on a appelé information. Dans la balise template on peut ajouter maintenant tout ce qu’on souhaite en HTML.
Cool, mais à quoi ça nous sert ? 
On va pouvoir programmer notre Template en rajoutant un fichier JavaScript. Alors on va créer notre nouveau fichier : « informations.js ».
					

						

				

						

					

		

								

					

		

				

						

							

					

			

							

						

						

							

					

			

							

						

				

								

					body.js :

 

1
2
3
4
5
6
7
//import utile
import { Meteor } from 'meteor/meteor';
import { Template } from 'meteor/templating';

//import html
import './body.html';
import './informations.js';


					

						

				

						

					

		

				

			

							

						

				

								

					informations.js :

 


1
2
3
4
5
6
//import utile
import { Meteor } from 'meteor/meteor';
import { Template } from 'meteor/templating';

//import html
import './informations.html';


					

						

				

						

					

		

								

					

		

						

					

		

								

					

		

				

						

							

					

			

							

						

				

								

					
On change le fichier body.js pour importer le fichier informations.js et on ajoute les imports dont on aura besoin à chaque fois dans information.js et il ne faut pas oublier d’import notre fichier Information.html sinon il ne sait pas où se trouve le template information qu’on a crée avant.
Maintenant si tu souhaites programmer ton Template je te conseiller d’aller voir la partie sur le JS, tout sera expliqué là-bas !
					

						

				

						

					

		

								

					

		

				

						

							

					

			

							

						

				

			
Les Templates dynamiques
		

				

						

					

		

								

					

		

				

						

							

					

			

							

						

				

								

					
On peut maintenant ajouter différents Templates dans notre projet mais on aimerait pouvoir en cacher certain, en montrer d’autre et ainsi de suite. Pour ça on a : les templates dynamiques.
					

						

				

						

					

		

								

					

		

				

						

							

					

			

							

						

				

								

					
Pour cela, on va créer deux Templates et ajouter à notre fichier body.html une ligne qui explique comment ça va se passer. Et on va rajouter quelques lignes dans notre fichier body.js :
					

						

				

						

					

		

								

					

		

				

						

							

					

			

							

						

				

			            


                

                    body.htmlInformations.htmlcompetence.htmlbody.jsTout voir                


                

                    
1
2
3
4
5
6
7
8
<body>
    <header>
        <h1>Portefolio !</h1>
    </header>
    <button class="info">Informations</button>
    <button class="comp">Competence</button>
    {{> Template.dynamic template=currentPage}}
</body>

1
2
3
<template name="information">
    <h2>Informations</h2>
</template>



1
2
3
<template name="competence">
    <h2>Competences</h2>
</template>



 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
//import utile
import { Meteor } from 'meteor/meteor';
import { Template } from 'meteor/templating';

//import html
import './body.html';
import './informations.js';
import './competences.js';

//variable session
Session.set('page', 'information');


Template.body.helpers({

    //template dynamique
    currentPage: function(page){
        return Session.get('page');
    }
});

body.html :
1
2
3
4
5
6
7
    
        
 
Portefolio !
 
    
 
      {{> Template.dynamic template=currentPage}}
    
informations.html :
1
2
3
<template name="information">
    
Informations
competence.html :
1
2
3
<template name="competence">
    
Competences
body.js :
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
//import utile
import { Meteor } from 'meteor/meteor';
import { Template } from 'meteor/templating';

//import html
import './body.html';
import './informations.js';
import './competences.js';

//variable session
Session.set('page', 'information');


Template.body.helpers({

    //template dynamique
    currentPage: function(page){
        return Session.get('page')
    }
});

                


            


        		

				

						

					

		

								

					

		

				

						

							

					

			

							

						

				

								

					
Maintenant on a plus qu’un seul Template qui s’affiche sur notre page résultat. On va rajouter un peu de programmation pour changer la valeur de la variable Session.
					

						

				

						

					

		

								

					

		

				

						

							

					

			

							

						

				

			            


                

                    body.htmlbody.js                


                

                    
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<body>
    <header>
        <h1>Portefolio !</h1>
    </header>
    <button class="info">Informations</button>
    <button class="comp">Competence</button>
    <div>
      {{> Template.dynamic template=currentPage}}
    </div>
</body>



 21
 22
 23
 24
 25
 26
 27
 28
 29
30
31
Template.body.events({
    //bouton information
    'click .info'(event){
        Session.set('page', 'information');
    },

    //bouton competence
    'click .comp'(event){
        Session.set('page', 'competence');
    }
});

                


            


        		

				

						

					

		

								

					

		

				

						

							

					

			

							

						

				

								

					
Et cela donne :