Tutoriel : Créer votre premier projet

Dans ce tutoriel vous découvrirez comment créer votre premier projet, personnaliser votre site et ajouter vos premières pages spécifiques

Modules

Personnalisez votre site

Apres avoir installer puzzle App vous allez découvrir comment personnaliser votre site, le design , mais aussi comment vous pouvez réadapter le design des autres applications.

1. Le système de template

Puzzle App utilise un système de template qui permet une meilleur organisation du code et la séparation entre le code métier et le design. Ainsi cela permet par exemple à un développeur back de s'occuper de tout le codage métier pendant que le développeur front s'occupera lui du rendu html final. Le détail de l'utilisation du système de template seront décris dans un projet chapitre.

Il y a généralement deux types de template. 

Le master.tpl : 

ce template est le layout général du site il comprend :

  • le header avec tous les liens pour les scripts et les css
  • le content : qui lui est dynamique
  • le footer : avec des informations 

Les templates par page

par exemple : index.tpl, contact.tpl qui seront injectés dans la partie content du template général.

Un bout de code pour mieux comprendre avec les fichiers brut

 

Master.tpl

<html>
	<head>
		<title>Mon titre</title>
	</head>
	<body>
		//Mon contenu dynamique
		{{content}}
	</body>
</html>

 

index.tpl

<h1>Hello world</h1>
<p>
	Je suis sur la page d'accueil
</p>

 

contact.tpl

<h1>Contactez-nous</h1>
<form>
	Email : <input type="email" />
	Message : <textarea></textarea>

	<button >Envoyer</button>
</form>

 

Et le rendu final après génération et en naviguant sur http://votresite/index.html

 

<html>
	<head>
		<title>Mon titre</title>
	</head>
	<body>
		//Mon contenu dynamique
		<h1>Hello world</h1>
		<p>
			Je suis sur la page d'accueil
		</p>
	</body>
</html>

 

 

et http://votresite/contact.html

<html>
	<head>
		<title>Mon titre</title>
	</head>
	<body>
		//Mon contenu dynamique
		<h1>Contactez-nous</h1>
		<form>
			Email : <input type="email" />
			Message : <textarea></textarea>

			<button >Envoyer</button>
		</form>

	</body>
</html>

 

 

2.La surchage des templates 

PuzzleApp posséde donc ces propres templates de base pour le rendu global mais aussi pour chaque bloc ou fonctionnalité.Vous pouvez surcharger ces templates afin de créer votre style mais sans toucher au coeur du framework. Ainsi vous pourrez mettre à jour le coeur de votre site sans problème.

3. Mise en pratique 

Dans la configuration standard c'est l'application base qui est configuré. Les templates utilisés sont donc le répertoire correspondant Apps/Base/Module/Front/View

 

Il suffit donc de modifier ces fichiers alors ?

 

Faux modifier ces fichiers là consisterais à modifier le coeur du système et vous empecherais toute montée de version. Rappellez vous on l'a dit plus haut.

Pour surcharger et utiliser vos propres fichiers il faut les ajouter dans le dossier View de la racine et garder la même arboresence en partant de View au lieu de Apps View/Base/Module/Front/View

 

Enfin si vous l'avez bien compris si vous souhaitez utiliser l'application blog mais que la mise en page ne vous convient pas, vous pouvez les surchager en ajoutant dans View/Blog/Module/Front/View/

  • master.tpl
  • index.tpl
  • article.tpl
  • categorie.tpl
  • subscribe.tpl

Vous n'êtes bien sur pas obligé de tous les surcharger,que seul ceux vous souhaitez changer la mise en page sont utiles.

4. Mise en cache 

Il est possible de mettre en cache certains templates ( notament les masters) afin d'accélerer les temps de génerations des pages.

 

Allons plus loin dans le code et découvrez dans le projet chapitre l'architecture et l'organisation de votre code.