numero contact

Contact

AC WebDesign

19 rue de la Glaise

37110 Le Boulay

09 72 36 97 18 - 06 61 15 30 90

mail : contact@acwd.fr

Nos Tutoriaux

Quelques astuces pour les développeurs débutants ou confirmés

01/10/12 - Utilisation de polices de caractères via google

03/09/12 - Mettre une image en fond de page qui s'adapte à toutes les résolutions

Il existe presque autant d'affichages différents d'un site qu'il existe d'utilisateurs.

Les différents paramètres qui influent sur le rendu d'un site donnent de multiples combinaisons possibles :

- Le navigateur (IE, FF, Safari, Chrome,...)

- La version du navigateur (IE5, 6, 7,...)

- La plateforme (PC, mobile, tablette,...)

- Le système d'exploitation (Windows, Mac, IOS, Android, Symbian,...)

- La résolution d'écran

- La taille de l'écran

- Les toolbars du navigateurs

...bref, un vrai casse-tête pour les développeurs.

Une fonction javascript simple permet au moins de faciliter l'affichage d'un background.

Il faut pour cela une image d'assez bonne résolution que l'on insère dans le code juste après la balise body :

<body>

La classe superbg est importante car elle va nous permettre de récupérer l'image avec le javascript :

// Au chargement initial
redimensionnement();

// En cas de redimensionnement de la fenetre
$(window).resize(function(){
redimensionnement();
});

});
//]]>
</script>

et on finit avec un peu de css :

img.superbg {
position:fixed;
top:0;
left:0;
z-index:-1000;
}

Bien évidemment, il faut que le javascript soit activé par l'utilisateur...

19/03/12 - Lecture de video en HTML5

14/02/12 - Ajout du bouton "J'aime" de Facebook sur votre site

16/01/12 - Personnaliser la police de votre site internet

02/11/11 - Lecteur audio mp3 intégré à votre site

25/10/11 - Insertion d'une image dans mysql en php sous la forme d'un emplacement ou dans un champ type BLOB

Il y a 2 façons de traiter ses images à afficher sur son site en php/mysql.

La première qui est aussi la plus répandue est de stocker le lien vers l'image dans un champ texte.

ATTENTION : le code est volontairement simplifié au maximum. a vous de le compléter avec les vérifs nécessaires et mise en sécurité!

Donc on crée le formulaire :

</form>

On récupère le nom de l'image et on définit le dossier d'upload :

//on vérifie qu'il y a bien une image

if ($_FILES['image']['size'] != 0)
{

//on définit le dossier d'upload (à créer avec les droits 0755 sur le serveur) - ici c'est un chemin relatif!
$chemin_destination = "upload/";

//on met le nom de l'image dans une variable

$image = $_FILES['image']['name'];

//on liste les extensions autorisées
$extensions_autorisees = array(".jpeg", ".jpg", ".gif",".png",".pdf",".JPEG",".JPG",".GIF",".PNG");

//on récupère l'extension de l'image
        $extension_image = strrchr($_FILES['image']['name'], '.');
//on vérifie qu'elle est autorisée
            if (in_array($extension_image, $extensions_autorisees))
            {
// Copie dans le repertoire avec un nom
            move_uploaded_file($_FILES["image"]["tmp_name"],$chemin_destination.$image);
            }

   }

Ensuite on met la base à jour :

mysql_query("INSERT INTO table SET image='$image'");

Donc le fichier est uploadé et le lien vers l'image est dans la base.

Il faut maintenant l'afficher :

//requete sql de selection

        $req = "SELECT * FROM table";
       $res = mysql_query($req);
       $db = mysql_fetch_array($res);

Affichage de l'image

L'intérêt de cette méthode est d'avoir une base allégée qui va donc réagir plus rapidement.

Idéal pour des bases contenant plusieurs milliers d'entrées.

L'inconvénient vient de la gestion des fichiers image qui restent sur le serveur même après suppression du lien dans la bdd, il faut donc jouer du ftp pour supprimer les images obsolètes.

La deuxième methode est donc l'insertion de l'image DANS la base.

Pour celà il faut créer un champ de type BLOB, adapté au stockage de fichier.

Le formulaire html reste le même.

Le premier changement est dans la façon de traiter l'image en php :

//on vérifie toujours la présence d'une image

if ($_FILES['img']['size'] != 0)
{
//on lit l'image en mode binaire
$image = file_get_contents($_FILES['img']['tmp_name']);

//on récupère le type, très important pour l'affichage ensuite
$image_type = $_FILES['img']['type'];
}

Pour le stockage dans la base 2 points changent.

Tout d'abord on pense à echapper les caractère spéciaux que l'image contient avec addslashes et on stocke le type dans un champ de la base :

mysql_query("INSERT INTO table SET image='".addslashes($image)."', image_type='$image_type'");

Vient maintenant la joie de l'affichage.

Il faut bien comprendre que l'image est stockée dans la base sous forme de code et qu'il va falloir expliquer au navigateur qu'il doit traduire ce code en image.

Il faut pour celà utiliser un header content.

Les initiés sauront que le header doit se mettre avant tout autre code dans la page.

Problème, si je mets en haut de ma page le header précisant que le code est une image, tout le reste de ma page sera mal interprété...

Il faut donc créer une autre page qui ne servira qu'à traiter l'image et dans la balise img, au lieu d'appeller un emplacement dans src, on appelle cette page.

La page pour afficher l'image donne donc : (on l'appellera image.php)

if ( isset($_GET['image']) )
{
$image = ($_GET['image']);
include ("_connexion.php");
$req = "SELECT id,img_type,img ".
"FROM table WHERE id = ".$image;
$res = mysql_query ($req) or die (mysql_error ());
$db = mysql_fetch_row ($res);

//si la colonne id ne renvoit rien
if ( !$dbl[id] )
{
echo "Id d'image inconnu";
}
else
{
//on place ici le header et on lui donne le type d'image (jpeg, gif, png,...)

header ("Content-type: ".$db[img_type]);

//on affiche l'image
echo $db[img];
}
}

//si l'id est mal passé en GET, on affiche un message
else
{
echo "Mauvais id d'image";
}

et pour afficher cela sur notre page principale après la requete sql :

Ici encore le code est volontairement épuré, l'essentiel étant de comprendre le fonctionnement.

L'intérêt de cette méthode est que les images sont supprimée automatiquement en cas de suppression ou modification de la ligne dans la base.

Le poids pour le serveur est identique pour les 2 méthodes car l'image qu'elle soit soit dans un dossier ou dans la base sera sur le serveur.

Par contre la base est plus longue à lire car plus de données.

Webmaster : AC WebDesign | Photos D.R. | Mentions légales | Demande d'Information

Imatec

US Tours Rugby

Val de Loire reservations

Contact

Nos Tutoriaux

Quelques astuces pour les développeurs débutants ou confirmés