> Accueil > Annuaire > Internet > Webmasters > Dreamweaver Gratuit : dreamgratuit.canalblog.com

JPierre, créateur du site ultradream et rédacteur d'ASP-PHP.net, a procédé à son propre test de la version Beta de Dreamweaver CS4. Des captures écrans et des infos inédites : à découvrir absolument. Pour lire les résultats, c'est par ici !

La première tâche à effectuer pour faire l'URL rewriting avec des mots-clés va consister à intégrer à votre base de données, pour la ou les tables qui vous intéressent, une nouvelle colonne qui contiendra les mots clés "url friendly" de votre URL.

Que signifie "url friendly" ? Pour être "acceptable", une URL ne doit pas contenir de caractères accentués, ni d'espace, ni de caractères spéciaux tels que les points d'interrogation, d'exclamation, etc. Si vous ne pouvez utiliser l'espace comme séparateur de mot, Olivier Duffez recommande le tiret "-" (et surtout pas le underscore "_" !), voire la virgule, la barre verticale ou le slash "/".

Pour créer ces URL friendly, vous avez deux possibilités :

• renseigner "à la main" la colonne dans votre base de données qui contiendra l'URL en ajoutant un champ à votre formulaire PHP
• créer automatique ces url en reprenant le titre de vos articles qui sont en principe susceptibles de contenir les mots clés les plus pertinents pour votre article

Nota : cette deuxième solution est disponible en standard pour Wordpress lorsqu'on active l'URL Rewriting et c'est celle qui est expliquée ici.

Ce qui suit vous explique comment insérer automatiquement un contenu à une colonne url_friendly lors de l'insertion de nouveaux articles dans une table "actualités" .Si votre base de données contient déjà des enregistrements, il vous faudra peupler cette colonne manuellement ou créer un script vous permettant de le faire.

Entrons maintenant dans le vif du sujet? Ouvrez PHPMyAdmin et ajouter à votre table une colonne que vous nommerez URL_FRIENDLY. Voici quant à moi, la requête SQL que j'ai utilisé pour cet exemple :

ALTER TABLE `actualite` ADD `url_friendly` VARCHAR( 255 ) AFTER `id_actu` ;

Ouvrez maintenant la page de votre site contenant le formulaire d'insertion d'articles dans votre table "actualite".  Placez votre curseur avant la ligne $insertSQL = [?]. Nous allons d'abord créer une fonction pour substituer aux caractères accentués leur équivalent non accentués :

// URL Rewriting : ajout de l'URL dans URL_FRIENDLY
// ************************************************
// D'abord fonction pour ôter les accents
function suppAccents($url) {
return( strtr( $url,
"ÀÁÂÃÄÅàáâãäåÒÓÔÕÖØòóôõöøÈÉÊËèéêëÇçÌÍÎÏìíîïÙÚÛÜùúûüÿÑñ",
"AAAAAAaaaaaaOOOOOOooooooEEEEeeeeCcIIIIiiiiUUUUuuuuyNn" ) );
}

Nous allons maintenant appliquer différent traitement à l'URL pour qu'elle soit conforme à notre attente :

// Puis on applique les traitements
$nomPage = $_POST['titre']; // ici on définit la variable $nomPage avec le contenu du champ titre de la page
$nomPage = suppAccents($nomPage); // suppression des accents par le truchement de la fonction citée plus haut
$nomPage = strip_tags($nomPage); // ce traitement permet de supprimer d'éventuelles insertions malveillantes de code HTML ou PHP dans le cas ou le formulaire est public.
$speciaux = array("?","!","@","%","&","*","(",")","=","+"," ",";",":","'","."); // Mettez ici les caractères spéciaux qui seraient susceptibles d'apparaître dans les titres. La liste ci-dessus est indicative
$nomPage = str_replace($speciaux, "-", $ nomPage); // les caractères spéciaux dont les espaces sont remplacés par un tiret
// Fin Url Rewriting

Allez maintenant dans la portion de code permettant l'insertion des données et modifiez comme suit :

$insertSQL = sprintf("INSERT INTO actualite (date_actu, titre, texte, image, auteur, url_friendly) VALUES (%s, %s, %s, %s, %s, %s)",
                       GetSQLValueString($_POST['date_actu'], "date"),
                       GetSQLValueString($_POST['titre'], "text"),
                       GetSQLValueString($_POST['texte'], "text"),
                       GetSQLValueString($_POST['image'], "text"),
                       GetSQLValueString($_POST['auteur'], "text"),
                       GetSQLValueString($nomPage, "text")); 

C'est fini pour la partie création de l'URL. Faites un test d'insertion, ça devrait marcher  !

La version beta de Dreamweaver CS4 est à disposition dans le Lab d'Adobe et c'est ici :
http://labs.adobe.com/technologies/dreamweavercs4/

Attention : c'est une version d'évaluation et seulement une version d'évaluation disponible pour Windows XP SP 2, Vista et Mac OS 10.4.11 et sup. Vous ne vous sentez pas assez casse-cou pour installer cette version beta, visionnez les vidéos d'Adobe disponibles plus bas.

Voici un aperçu des nouvelles fonctionnalités du logiciel pensées pour gagner en productivité :

• Vue Live : elle permet de tester ses pages dans différents environnements dans l'interface Dreamweaver sans ouvrir les navigateurs correspondants. A noter : par sécurité Live View est "read only" : aucun risque donc de générer du code par erreur de manipulation.
• Code navigator : sélectionnez n'importe quel élément ou ensemble d'éléments de votre page et visualisez le code associé dans une pop-up
• Fichiers associés : affichage de tous les fichiers associés à la page en cours (css, javascript, includes, etc...) accessibles automatiquement par onglet afin de pouvoir modifier la page "mère" aisément.
• Bonnes pratiques CSS : panneau permettant de connaitre TOUTES les propriétés CSS d'un élément de la page ainsi qu'explication de ces propriétés au survol de la souris.
• Amélioration de Spry : afin de rendre plus accessible au commun des développeurs les fonctionnels Spry, Adobe s'est attaché à simplifier l'intégration Spry notamment via les sources de données qui sont maintenant définies dans un wizard. Il n'y a plus qu'à se laisser guider ! La source de données peut-être une simple page HTML statique de données tabulaires, sous forme de liste voire même de calques !
• Support javascript : outil de suggestion de codage javascript.

Tout cela semble, ma foi, fort prometteur. Reste à savoir si les extensions que nous utilisons avec CS3 restent compatibles avec cette nouvelle version...

Vous pouvez voir la vidéo Adobe sur la nouvelle vue Live ci-dessous (en anglais mais très accessible !) et le reste des vidéos ici. A noter, en bonus, la vidéo 4 sur les Widgets Spry permet d'avoir un aperçu sur le nouvel Extension Manager !!

Je commence ici un tutorial qui vous permettra d'améliorer le référencement de votre site grâce à la réécriture d'URL. Voici quelques éléments nécessaires à votre réflexion avant de vous lancer dans ce travail.

1. L'URL rewriting, est-ce vraiment utile ?

L'URL rewriting, s'il n'est pas nécessaire au référencement d'un site, le facilite beaucoup s'il est judicieusement utilisé.

Il est certain que transformer une URL avec des paramètres du type www.monsite.com/article.php?id=7786 en URL de type www.monsite.com/article-7786.htm ne vous apportera pas grand chose du point de vue du référencement. Google et consorts référencent maintenant sans problème les URL qui ont un, voire deux paramètres. Inutile donc de vous lancer dans cette aventure pour si peu. En revanche si vos URL possède 3 paramètres ou plus, vous devriez sérieusement vous y mettre.

L'URL rewriting est surtout un grand atout lorsque vous pouvez intégrer à vos URL réécrites des mots clés. Google se sert en effet des mots-clés qui font liens vers une page pour déterminer sa pertinence pour ces mots clés. Or ce sont souvent les URL elles-mêmes qui servent de texte aux liens vers les pages : ainsi vous augmentez naturellement la pertinence de vos pages pour les mots-clés choisis pour l'URL.

2. Quels sont les préalables techniques à l'URL rewriting ?

Assurez-vous auprès de votre hébergeur que celui-ci accepte l'URL rewriting. Pour cela vous devez avoir la possibilité technique de transférer via FTP un fichier .htaccess. Si vous êtes chez un hébergeur gratuit, transférez via FTP une page PHP contenant l'instruction phpinfo(); et vérifiez dans le navigateur que la ligne mod_rewrite est bien à On. Olivier Duffez explique très simplement ici comment tester l'URL rewriting sur votre serveur avant de se lancer dans un travail de grande envergure.

3. Choses et autres à savoir avant de vous lancer...

- Il est plus facile de planifier l'URL rewriting à la conception d'un site qu'après plusieurs milliers de pages créées. D'autant que les sites qui font liens vers le vôtre auront vos anciennes URL en lien...
- Il va vous falloir retravailler les liens à l'intérieur même de votre site.
- Dans notre tutorial, nous allons modifier la table de la base de données contenant les articles pour y ajouter une colonne contenant le titre sous forme "URL friendly". Il faudra donc peupler cette colonne si votre base contient déjà des articles.

Vous êtes prêt à vous lancer malgrès tout ? Rendez-vous donc pour la 2e partie de ce tutorial URL rewriting de A à Z.

Vous désirez intégrer le contenu de sites tiers au sein de votre site via les flux RSS proposés par ces derniers ? Pour cela, il vous faut « parser » le flux RSS. De nombreuses classe PHP vous offrent cette possibilité (par exemple Magpierss : http://magpierss.sourceforge.net/ ) mais vous ne pourrez bénéficier des fonctionnalités graphiques de Dreamweaver.

Tecnorama (grâce lui soit rendue !) propose une extension gratuite permettant d?intégrer un flux RSS externe au sein de vos pages. Vous pouvez la télécharger ici : http://www.tecnorama.org/descargas/descargar.php?archivo=rss_reader_130.mxp

Vérifiez tout d?abord via la fonction < ?php phpinfo() ?> que le module XML est bien activé chez votre hébergeur et dans votre environnement de développement. Vous devez ensuite vous assurez dans que les éléments suivants sont à On :

allow_url_fopen
allow_call_time_pass_reference

Installez l?extension RSS Reader et redémarrez Dreamweaver pour qu?elle prenne effet. Un nouvel onglet apparaît maintenant dans votre barre ainsi qu?un nouvel item dans le panneau des comportements serveur.

Dans la page où vous souhaitez installer le lecteur, procédez comme suit :

1. Définir la source xml du flux à afficher dans la page
Cliquez sur New RSS Channel ou la petite icône équivalent dans l?onglet. Donnez un nom au flux et renseignez l?URL du flux. Mémorisez le nom du flux qui sera réutilisé.

2. Préparez le design de l?affichage du flux RSS
Voici le code du design CSS que j?ai créé pour afficher mes propres flux.

La feuille de style :
<style media="screen" type="text/css">
body {
      font: 11px Arial, Helvetica, sans-serif;
      color:#666;
}
ul {
      padding: 0;
      margin: 0 12px;

}
li {
      margin: 7px 0;
      list-style-type:none;
      padding-left: 20px;
      background: url(img/fleche-bleue.png) no-repeat 0 4px;
      line-height:15px;
}

li a {
      color: #000;
      text-decoration:none;
}
li a:hover {
      color: #f60;
      text-decoration:none;
}
#widget {
      border: 1px solid #01B5D5;
      width: 250px;
      overflow: auto;
      height: 350px;
}
.w {
      background-color: #01B5D5;
      color: #fff;
      font: bold 1.4em Georgia, "Times New Roman", Times, serif;
      margin:0;
      padding: 5px 10px;
      width: 232px;
}
.wbis {
     margin: 0;
      background-color: #01B5D5;
      color: #fff;
      padding: 3px 10px;
      width: 232px;
}
</style>

Le code HTML :
<h1 class="w">Dernières infos de monsite.com</h1>
<div id="widget">
<ul>
<li></li>
</ul>
</div>
<h2 class="wbis">Plus d'informations sur <a href=" http://www.monsite.com">www.monsite.com</a></h2>

Attention : l?encodage de votre page doit être UFT-8 pour que le flux s?affiche correctement.

3. Intégrez les variables PHP permettant l?affichage des éléments d?item via le panneau de comportement serveur ou les icônes de l?onglet.

Pour ma part, je souhaitais la date, le titre, l?auteur, la catégorie. Par ailleurs je ne voulais pas de la date au format « brut » mais un format plus lisible par un internaute français.

J?ai donc du modifier le code comme suit. Pour la date :
$this->pubDates[]=trim(date("d/m/Y",strtotime($this->pubDate)));

Pour les catégories, déclarez la variable $category en haut de page :   
var $category="";
Puis dans la fonction startElement, intégrez la ligne :
$this->category="";
Dans la fonction endElement :
$this->categorys[]=trim($this->category);
Enfin dans la fonction characterData :
case "CATEGORY":
$this->category.=$data;       break;

5. Créez le lien vers le site d?origine via l?élément RSS Item Go to Detail Page du panneau de comportement.

6. Créez une région répétée via l?élément RSS Item Repeated Region du panneau de comportement.

C?est prêt. Il n?y a plus qu?à tester dans votre navigateur !

Voici un tutorial vidéo publié hier vous expliquant comment créer une table avec régions répétées imbriquées. Malheureusement en anglais :( !

Voici le sommaire de ce tutorial "Créer un sondage avec Dreamweaver et PHP/MySQL" afin de vous y retrouver plus facilement. Ce tuto est en 5 parties. Chaque lien ouvre une nouvelle fenêtre.

1. Création du formulaire d'insertion des votes
2. Calcul des résultats du sondage
3. Affichage graphique des résultats du sondage
4. Empêcher un internaute de voter plusieurs fois
5. Affichage conditionnel des résultats

Nous allons maintenant rendre conditionnel l'affichage des réultats du sondage. Pour voir ces résultats, il faudra avoir voté. Ainsi vos utilisateurs ne seront pas influencés par les résultats.

Créer un jeu d'enregistrement nommé RS_ip, en le paramétrant à "toutes les colonnes" et sans filtrage puis modifier comme suit :

mysql_select_db($database_mabase, $ma_connexion)
$ip = $_SERVER["REMOTE_ADDR"];
$query_RS_ip = "SELECT * FROM ip_tbl WHERE adr_ip ='" . $ip . "'";
$RS_ip = mysql_query($query_RS_ip, $ma_connexion) or die(mysql_error());
$row_RS_ip = mysql_fetch_assoc($RS_ip);
$totalRows_RS_ip = mysql_num_rows($RS_ip);

Positionnez votre curseur juste avant la ligne présentant les résultats et insérez :

<?php if($totalRows_RS_ip > 0) { ?>

Positionnez votre curseur juste après la balise fermante de la table présentant les résultats et insérez :

<?php } ?>

Le tour est joué, votre interface de sondage est terminée !

Nota : pour éviter de déclarer plusieurs fois la variable $ip dans la page, placez la en début de code.

Vous pouvez perfectionner cette interface en permettant le multi-sondage et créant donc une table questions_tbl comprenant l'intitulé de la question du sondage et son numéro d'ID ainsi qu'en complétant la table réponse avec une colonne id_question.

Joseph Lowery propose depuis le 28 avril dernier un tutorial en anglais sur un système de gestion d'abonnement thématique à des newsletters.

Dans cet article, vous apprendrez comment permettre à vos visiteurs de gérer eux-mêmes leurs abonnements. En bonus, comment incorporer un message d'erreur sur une page de login créée avec Dreamweaver.

Les pages créées avec ce tuto :

• Login.php: la page vérifie l'adresse e-mail et le mot de passe des visiteurs qui veulent modifier leurs paramètres d'abonnement. Affichage éventuel du message d'erreur sur la page.
• Manage_sub.php: gestion des abonnement via des cases à cocher.
• Thank_you.php: page de remerciements.
• Logout.php: script de déconnexion.

Pour découvrir ce tutorial en anglais :(( : http://www.adobe.com/devnet/dreamweaver/articles/sub_multiple.html

Nous allons dans la 4e partie de ce tutorial voir comment empêcher un internaute de voter plusieurs fois.
J?évoque ici les 2 méthodes (à ma connaissance !) permettant d?éviter les doublons de vote :

• Installer un cookie sur le poste utilisateur au moment du vote pour interdire le vote si le cookie existe déjà.
• Stocker en base l?adresse IP de l?utilisateur pour interdire le vote si cette adresse est déjà en base.

Chacune de ces deux méthodes a un inconvénient :

• le cookie : l?utilisateur peut supprimer le cookie
• l?adresse IP : les adresses IP partagées (notamment dans le cadre professionnel ou pour les FAI, les adresses IP flottantes) n?autoriseront le vote que d?une seule personne au sein d?une organisation ou plusieurs votes pour une personne.

Nous utiliserons ici la méthode de l?adresse IP, celle du cookie étant à la merci de l?astuce du votant, elle me semble moins sécure (l?adresse IP étant, elle, stockée sur VOTRE serveur)?

Pour stocker l?adresse IP de l?utilisateur, nous allons donc créer une table tb_ipl dans notre base de données.

CREATE TABLE ` tb_ip` (
`id_secur` int(11) NOT NULL auto_increment,
`adr_ip` varchar(20) default NULL,
PRIMARY KEY (`id_secur`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

Revenons maintenant à notre page PHP. Nous allons insérer l?adresse IP de l?utilisateur s?il vote. Intégrez le code suivant en dessous de la ligne $Result1 = mysql_query($insertSQL, $ nom_de_ma_connexion) or die(mysql_error()); (à l?intérieur du code indiquant que si le formulaire est posté, il faut insérer le vote dans la table tb_sondage) :

/* STOCKAGE IP POUR EVITER LES DOUBLONS DE VOTE */
$ip = $_SERVER["REMOTE_ADDR"]; //on recupère l'ip
$insertSQL2 = "INSERT INTO tb_ip (adr_ip) VALUES ('$ip')"; // On l'insère dans la table des IP
mysql_select_db($database_nom_de_ma_base, $nom_de_ma_connexion); // récupérez les noms de variables dans la ligne correspondante d?un jeu d?enregistrement de la page
$Result2 = mysql_query($insertSQL2, $nom_de_ma_connexion) or die(mysql_error());

Faite quelques tests de vote pour vérifier que votre adresse IP est bien insérée dans la base.

Maintenant il faut tester si l?adresse IP est présente dans la base avant d?autoriser de poster le vote. Pour cela nous allons utiliser le code de l?extension de FelixOne, Check New Element (disponible gratuitement en utilisant le lien dans la colonne de droite de ce site). Je vous donne ici le code tout préparé car les modifications que nous avons apportées précédemment au code de Dreamweaver et l?utilisation de la variable d?adresse IP rendent l?extension inutilisable ici. Il faut donc le copier/coller en l?état :

// *** TEST DES DOUBLONS DANS LES IP ***
$FX_flag = "MM_insert";
$FX_found = false;
if (isset($_POST [$FX_flag])) {
$FX_dupKeyRedirect = "erreur.php";
$FX_dupKeyValue = $_SERVER["REMOTE_ADDR"];
$FX_dupKeySQL = "SELECT adr_ip FROM tb_ip WHERE adr_ip = '" . $FX_dupKeyValue . "'";
mysql_select_db($database_nom_de_ma_base, $nom_de_ma_connexion); // récupérez les noms de variables dans la ligne correspondante d?un jeu d?enregistrement de la page
$FX_rsKey=mysql_query($FX_dupKeySQL, $nom_de_ma_connexion) or die(mysql_error());
if(mysql_num_rows($FX_rsKey) > 0) {
$FX_found = true;
$FX_dupValue = "IP (" . $FX_dupKeyValue . ") ";
}
if($FX_found) {
$FX_dupValue .= "Ce vote ne peut être pris en compte !";
$FX_qsChar = "?";
if ($FX_dupKeyRedirect == "") $FX_dupKeyRedirect = substr($_SERVER["PHP_SELF"], strrpos($_SERVER["PHP_SELF"], "/")+1);
if (strpos($FX_dupKeyRedirect, "?")) $FX_qsChar = "&";
$FX_dupKeyRedirect = $FX_dupKeyRedirect . $FX_qsChar . "FX_ReqValue=" . urlencode($FX_dupValue);
header ("Location: " . $FX_dupKeyRedirect);
exit;
}
mysql_free_result($FX_rsKey);
}

Il ne vous reste plus qu?à créer la page erreur.php avec le message indiquant à l?utilisateur qu?il a déjà voté et ne peut donc revoter !

Le prochain billet sera consacré à l?affichage conditionnel des résultats du vote.