Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Web Development
Code

Lancez la Création de Votre Blog Avec Parse.js

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Building Your Blog with Parse.js.
Get Started Building Your Blog with Parse.js: Working with Data

French (Français) translation by Willy Touomi (you can also view the original English article)

Final product image
What You'll Be Creating

Avez-vous déjà été excité par l'idée d'un projet web, pour ensuite vous trouver dans la misère au moment de le faire fonctionner et le mettre en ligne sur un serveur web? Avec Parse.js, toute personne qui comprend les bases du HTML, CSS et JavaScript peut facilement créer des sites dynamiques et des applications web qui fonctionnent bien.

Dans ce tutoriel, je vous conduirai à travers tout le processus de création d'un système de blog avec Parse.js, à partir de zéro. Vous utiliserez tous les outils de bootstrapping, mettrez véritablement en pratique le prototypage rapide, la refactorisation et le framework MVC. A la fin de cette série, vous serez capable de créer n'importe quel CMS par vous même.

Bien qu'il essaiera d'être aussi détaillé que possible, ce tutoriel considère que vous avez des connaissances de base en HTML, CSS, JavaScript / Jquery, et aussi sur l'utilisation GitHub. Si vous n'êtes pas familiarisé avec l'un des outils ci-dessus mentionnés, Tut+ regorge de nombreux tutoriels de qualité traitant de ces sujets. N'hésitez pas à les consulter.

Installation de l'environnement de développement

Commencons tout d'abord par mettre en place notre environnement de développement. Vous aurez besoin pour ce faire d'un serveur de test en local, d'un serveur web, d'un serveur de données, et d'un système de contrôle de version. Comme mentionné précédemment, le présent tutoriel ne requiert aucune connaissance à propos du backend. Je vous y conduirai pas à pas. Sentez vous libre de sauter cette partie si vous avez déjà ces outils en place.

Etape 1: Installation de XAMPP

Après avoir essayé diverses solutions, XAMPP demeure le moyen le plus facile que j'ai trouvé pour mettre en place un serveur de test local. Par conséquent, j'utiliserai XAMPP comme serveur de test local dans ce tutoriel.

Commencez donc par télécharger XAMPP si vous ne l'avez pas encore fait, choisissez la version qui correspond à votre système et installez la.

XAMPP website

Puisque moi j'utilise un Mac, c'est donc lui que je prendrai en exemple dès maintenant. Si vous avez un système différent, le processus devrait être assez similaire.

Après avoir installé XAMPP, lancez le et démarrez "Apache Web Server".

XAMPP - Manage Servers - Start Apache Web Server

Dès lors, si vous visitez http://localhost/ dans votre navigateur, vous devriez voir cette page affichée par défaut par XAMPP. Ca signifie que tout est ok et fonctionne normalement.

Localhost when XAMPP is running

Etape 2: Créer une nouvelle page GitHub

Pour avancer, créeons un nouveau dépôt git sur GitHub. Moi je le nomme blog afin qu'il soit court et sans abiguïté pour moi. Pour que notre dépôt git fonctionne comme un serveur web, nous devons le configurer en tant que Page GitHub.

Premièrement, ajoutez une nouvelle branche, gh-pages.

Add a new branch gh-pages

Ensuite, allez dans les paramètres et configurez gh-pages comme branche par défaut.

Set gh-pages as the default branch

Bien. Passons maintenant en ligne de commandes, et clonons cette branche depuis GitHub vers le repertoire local htdocs de notre installation XAMPP.

Naviguez dans le dépôt git que vous venez de cloner, et créez un simple fichier index.html. Ecrivez-y simplement Hello World.

Accédez à http://localhost pour être sûr que tout fonctionne bien.

Localhost - hello world

Super. Mettons maintenant notre fichier sur GitHub.

Patientez quelques instants, puis allez à http://votreusername.github.io/nomdepot et vous constaterez que votre fichier index.html est désormais en ligne.

GitHub Page - hello world

Etape 3: Créer votre compte sur Parse.com

Il est vraiment simple d'héberger du contenu statique à l'aide des pages GitHub; mais lorsqu'il s'agit du backend, les choses peuvent devenir compliquées avec une page GitHub. Heureusement, nous avons maintenant Parse.js. Nous pouvons utiliser Parse.com comme notre serveur de données et communiquer avec lui via JavaScript. De cette façon, nous avons juste besoin d'héberger les fichiers HTML, CSS et JavaScript sur GitHub.

Allez-y, inscrivez-vous sur Parse.com si ce n'est pas encore fait.

Parsecom website

Voilà, vous avez votre serveur de données dans le cloud.

Template HTML Statique

Maintenant, préparons une version statique du système de blog que nous allons créer. Pour vous montrer comment vous pouvez démarrer rapidement, j'utiliserai le template d'exemple de blog de Bootstrap. Encore une fois, si vous êtes familier de Bootstrap, ou si vous avez déjà conçu un site web statique, sentez-vous libre de faire à votre manière. Mais si vous êtes nouveau sur Bootstrap, suivez-moi.

Etape 1: Télécharger Bootstrap

Tout d'abord, commencez par télécharger Bootstrap (dans ce tutoriel, nous utilisons la version 3.2.0), décompressez le, et mettez son contenu dans votre dossier local XAMPP/xamppfiles/htdocs/blog.

Put Bootstrap in blog folder

Etape 2: Commencez avec le template basique de Bootstrap

Editez maintenant index.html et mettez-y le code du template basique de Bootstrap. Il fournit une structure HTML de base, avec des liens vers bootstrap.min.css, bootstrap.min.js, et jquery.min.js. Commencer avec un template comme celui-ci vous fera économiser beaucoup de temps.

Rafraîchissez votre page en local et rassurez-vous que tout fonctionne.

Add Bootstrap basic template

Etape 3: Copier tout le template du blog d'exemple

Continuons. Ouvrez-maintenant l'exemple de blog fourni par Bootstrap http://getbootstrap.com/examples/blog/.

Sur cette page web, faites un clic droit et cliquez sur "voir la source". Nous souhaitons copier tout le contenu de <body> dans notre fichier index.html et remplacer le texte <h1>Hello, world!</h1> de notre template de base.

Ne copiez surtout pas les balises <script>, puisque nous avons déjà tout le javascript nécessaire.

Vous devez maintenant aller à la page suivante:

Add example blog template

Etape 4: Copier le style du blog d'exemple vers index.html

Vous avez sûrement noté que les styles ne sont pas encore corrects. C'est parce que nous avons besoin du fichier blog.css, qui est la feuille de style spécifique au blog et qui surcharge les styles par défaut de Bootstrap.

En utilisant la méthode montrée précédemment, ouvrez le code source de votre page et trouvez la feuille de style http://getbootstrap.com/examples/blog/blog.css.

Copiez le fichier et enregistrez le dans votre dossier local blog/css.

Ajoutez-le dans votre fichier index.html, en-dessous de bootstrap.min.css:

A présent, les styles devraient être corrects. Notre template statique est fin prêt.

Static template

Mise en place et connection à la base de données de Parse

Afin que notre blog statique devienne dynamique, nous aurons besoin de configurer sa base de données sur Parse.com.

Etape 1: Créer une nouvelle application

Allez dans Parse.com dashboard, et cliquez sur "Create New App".

Pour l'instant, appelons notre application Blog.

Create a blog app on Parsecom

Une fois qu'elle est créée, allez dans "Quickstart Guide - Data - Web - Existing project"

Parse Quickstart Guide

Etape 2: Ajouter Parse.js dans index.html

Suivez les instructions du guide de démarrage rapide (Quickstart Guide), et ajoutez Parse.js à votre fichier index.html, pour commencer. Mais plutôt que de le mettre dans la section <head>, mettez-le juste en dessous de JQuery:

Etape 3: Tester le SDK de Parse

Ensuite, créez un fichier blog.js dans votre dossier blog/js, dans lequel on mettra l'ID de votre application Parse, votre clé JavaScript et un peu de code. Toutes ces informations peuvent être trouvées dans le guide de démarrage rapide:

Enregistrez, et ajoutez ce fichier dans index.html en-dessous de bootstrap.min.js.

Actualisez encore index.html sur votre serveur local, et vous devriez voir ce message d'erreur:

Success alert message

Cela signifique que vous êtes connecté avec succès à la base de données cloud de votre blog :)

Si vous vérifiez votre "Data Browser" sur Parse.com maintenant, vous verrez l'objet TestObject que vous venez de créer.

Parse Data Browser

Conclusion

Aujourd'hui, nous avons mis en place tous les serveurs dont nous avions besoin: XAMPP comme serveur de test local, GitHub Pages comme notre serveur web, et Parse.com comme notre serveur de base de données. Nous avons également un template de blog statique qui est maintenant connecté à la base de données.

Dans la prochaine session, je vous montrerai comment ajouter des articles de blog depuis le navigateur de données de Parse, les récupérer avec JavaScript et les afficher sur votre blog.

N'hésitez pas à consulter le fichier source si vous êtes bloqué. Et, s'il vous plait, laissez un commentaire si vous avez du mal à suivre.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.