Projet web en attente de développeur sur codeur.comPosté par Guiral antoine le avril 16, 2008
Pfiou! Vacances de folies qui ne me laissent pas autant de temps que je voudrais pour blogger …Au programme : pas mal de boulot pour l’école, récéption de mon nouvel ordinateur portable (j’en parlerais dans un prochain billet) avec tout mon espace de travail à reconfigurer…
Mais j’ai quand même pensé à vous! Je suis en train de préparer deux tutoriels basé sur : l’ajax non-intrusif avec jquery : Lisez la suite de cette entrée »
Publié dans tutoriel | Taggé: ajax, concept, javascript, jquery, php, tutoriel | 1 commentaire »
Posté par Guiral antoine le mars 9, 2008
Ce tutoriel est disponible sur mon nouveau blog (lien direct). Afin d’eviter le duplicate content je vais tronquer une partie de l’article…
Ça y est, la suite est enfin là! Dans la première partie de ce tutoriel nous avions vu comment faire un drag’n drop avec jQuery. Maintenant nous allons voir comment effectuer notre sauvegarde automatique grâce à l’AJAX. Il y a deux modifications majeures à apporter à notre code. La première est la partie base de données : création des tables, des requêtes,etc… La seconde est l’ajout d’un traitement lors d’un drop d’ingrédient dans une recette. Autrement dit, effectuer les requêtes au bon moment.
Notre base sera composée de 3 tables :
- la table recette sera composé d’un identifiant (id_recette) et d’un nom de recette (recette).
- la table ingrédient avec un identifiant (id_ingredient) et du nom de l’ingrédient (ingredient).
- la table recette_ingredient qui contiendra les compositions de nos recettes sous la forme de couple id_recette,id_ingredient.
Cette organisation vient de nos cardinalités : un ingrédient peut être dans plusieurs recettes et une recette peut contenir plusieurs ingrédients.
Voici le code SQL pour créer les tables :
CREATE DATABASE `tuto_drag` ;
CREATE TABLE `recettes` (
) ENGINE = innodb;
CREATE TABLE `ingredients` (
) ENGINE = innodb;
CREATE TABLE `recette_ingredient` (
) ENGINE = INNODB CHARACTER SET latin1 COLLATE latin1_swedish_ci
ALTER TABLE `recette_ingredient` ADD PRIMARY KEY ( `id_ingredient` , `id_recette` )
INSERT INTO `ingredients` ( `id_ingredient` , `ingredient` )
VALUES (NULL,’oeuf’),(NULL,’sucre’),(NULL,’farine’),(NULL,’sel’),(NULL,’lait’);
INSERT INTO `recettes` ( `id_recette` , `recette` )
VALUES (NULL,’Pâte à crêpe’),(NULL,’Pâte brisée’);
Maintenant que nous avons une base de données il faut créer les scripts qui vont nous permettre d’interagir avec elle. Nous devons pouvoir ajouter une recette, un ingrédient et faire nos sauvegarde de composition de recette. Appelons notre fichier “traitement.php”.
La suite du tutoriel est disponible sur mon nouveau blog (lien direct). Désolé pour la gêne occasionnée ^_^’
Publié dans tutoriel, web 2.0 | Taggé: ajax, css, internet, javascript, jquery, php, tutoriel, web, xhtml | 26 Commentaires »
Posté par Guiral antoine le février 24, 2008
Ce tutoriel est disponible sur mon nouveau blog : http://antoine.guiral.info/2008/02/24/tuto-jquery-drag-n-drop-avec-sauvegarde-automatique-en-base-de-donnees-12/
Bonjour!
Je profite d’un peu de répit ce dimanche pour terminer la première partie de ce tutoriel. Nous allons voir comment faire des drag’n drop (glisser déposer) avec JQuery. Dans un second temps nous verrons comment sauvegarder les modifications directement en base de donnée avec de l’ajax. Pour voir un exemple je vous propose d’aller faire un tour sur mon site de gestion d’une équipe de rugby (projet en cour) : teamManagerXV.
Bon allez on attaque?!
Comme d’habitude le code puis les explications 
<html>
<head>
<title>Tuto drag’n drop</title>
<meta http-equiv=”Content-type” content=”text/html; charset=utf-8″ />
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript” src=”interface.js”></script>
<script type=”text/javascript” src=”script.js”></script>
<link rel=”stylesheet” type=”text/css” href=”styles.css” media=”all”/>
</head>
<body>
<div>
<h1>Waouuuuuuuhhhhhh</h1>
<div class=”ingredient”>
<div id=”1″ class=”drag”>sucre</div>
<div id=”2″ class=”drag”>lait</div>
<div id=”3″ class=”drag”>farine</div>
<div id=”4″ class=”drag”>oeuf</div>
<div id=”5″ class=”drag”>sel</div>
</div>
<div class=”recette” id=”r_1″>
<h3>Pâte à crêpe</h3>
<div class=”recette_ingredient”>
</div>
</div>
<div class=”recette” id=”r_2″>
<h3>Pâte brisée</h3>
<div class=”recette_ingredient”>
</div>
</div>
</div>
</body>
</html>
Alors rien de particulier pour le moment en terme de structure du document. Vous pouvez remarquer que nous avons 3 divs “principaux” : un pour les ingrédients et un pour chaque recette. Celui pour les ingrédients contient nos éléments draggables tandis que ceux pour les recettes contiennent nos récepteurs (zone de drop).
div{border:1px solid black}
.drag,.recette_ingredient{height:20px;width:60px}
Pas grand chose ici! Juste des bordures pour que ce soit “compréhensible” et un largeur/hauteur définie pour les zones de drop et les drags.
Afin de ne pas concurrencer mon nouveau blog, je suis obliger de tronquer l’article. Pour un meilleur confort je vous conseil de lire la suite ici : http://antoine.guiral.info/2008/02/24/tuto-jquery-drag-n-drop-avec-sauvegarde-automatique-en-base-de-donnees-12/
Publié dans tutoriel, web 2.0 | Taggé: 2.0, ajax, concept, creation, css, internet, javascript, jquery, tutoriel, web, xhtml | 13 Commentaires »
Posté par Guiral antoine le janvier 26, 2008
Je commence un nouveau projet! En plus de ceux en cours…mon cv, ma seconde version de gestion de cave à vin en ligne, ce blog enfin bref des journées à rallonges quoi! Cependant cela va me permettre d’expliquer au fur et à mesure comment j’organise mon travail. Ça pourra peut être vous servir ou peut être aurez vous des suggestions à me faire!
Ce sera l’occasion pour moi de faire quelques tutoriel sur ma façon de faire de l’ajax, ou sur les drag’n drop avec JQuery. Plein de choses intéressantes!
L’origine du projet est simple : je joue au rugby et comme je suis capitaine il m’arrive d’assister à la composition des équipes. Et quelle fût ma surprise en voyant que ces composition étaient faites sur excel. Donc pas très pratiques pour faire des stats sur les différents matchs ou encore quand il s’agit de retaper les noms des joueurs. J’ai donc proposer à mon coach de lui faire un outil qui lui permettra de créer ses feuilles de matchs très rapidement. Après quelques discussions d’autres besoins sont apparus : présence aux entraînements, fiche de joueur détaillé, historique des temps de jeu, plusieurs “rôles” au niveau de l’administration afin de pouvoir déléguer certaines tâches…Bref un projet relativement complet et intéressant.
J’ai réalisé un premier jet sur la composition de l’équipe. J’ai utilisé JQuery pour faire les drag’n drop et je vous expliquerais très prochainement comment j’ai fait.
Pour réaliser Gest’XV (oui c’est le ptit nom que je lui donne pour le moment lol) je vais utiliser XHTML 1.1, PHP, MySQL, Javascript avec JQuery et les CSS. Je vais essayer de créer un design sympa avec photoshop. MEs objectifs sont presque tout le temps les mêmes quand je commence un projet : aller vite, faire du code valide, faire du code maintenable et apprendre des technologies (par exemple faire de l’ajax avec JQuery j’ai jamais fait 
). Je reviendrais sur le XHTML 1.1 parce que HTML 5 vient de sortir et j’aurais pu faire ce choix là.
Tout ça pour exprimer mon enthousiasme! C’est mon premier projet qui associe mes 2 passions : le rugby et le développement web. Je vous ferais suivre l’évolution du site ! N’hésitez surtout pas à me faire des suggestions d’améliorations!
Vous aussi vous avez des projets en cours? Je serais ravi d’en parler sur ce blog! A bientôt!
Publié dans découverte, projet | Taggé: ajax, antoine, blog, but, creation, css, internet, javascript, jquery, php, presentation, projet, web, xhtml | Laisser un commentaire »
