Administrateur Systèmes d'Information mais aussi Développeur Web.
Passionné par plein de choses :)

Arnaud Bosquet

Administrateur Systèmes d'Information / Dev Web / Tennis

Faire tourner IIS et Apache sur le même serveur

Quand on a des scripts ASP qui tournent dans les même dossiers que du PHP, c’est un peu la galère. Sur le même serveur tourne un serveur Apache (pour le PHP)  & un serveur IIS (pour l’ASP).

L’astuce consiste à faire écouter le serveur d’IIS sur le port 81.

On fait ensuite une règle de redirection d’url dans un fichier .htaccess qui retranscrit l’url si c’est une page ASP. Ce qui donne :

  • Fichier .htaccess :

Options +FollowSymlinks
RewriteEngine on
RewriteRule ^(.+.asp)$ http://votredomaine:81/conges/$1

Voilà

Importer un dump Mysql sous MAMP (Mac OSX)

Imaginons que vous avez un MAMP qui tourne sous votre Mac et que vous souhaitez importer un dump SQL d’une autre base.

Voici ce qu’il faut faire :

  1. Ouvrir un Terminal (Applications -> Utilitaires -> Terminal)
  2. Lancer la commande suivante :

    cd /Applications/MAMP/Library/bin/

  3. Puis :

    ./mysql -u USER -p DBNAME < sql.dump

En veillant bien à remplacer :

  • USER par l’utilisateur ayant les droits sur la base (bien souvent l’utilisateur root)
  • DBNAME par le nom de la base dans lequel vous souhaitez importer votre dump

Si votre dump se trouve dans le dossier téléchargement vous pouvez y accéder avec le chemin suivant : /Users/VOTRENOM/Downloads/sql.dump

Ce qui donnera avec la commande suivante :

./mysql -u USER -p DBNAME < /Users/VOTRENOM/Downloads/sql.dump

Un lecteur MP3 en AS3 (avec classes)

Même si nous avons eu que très peu de cours de Flash cette année, nous devions rendre à la fin du trimestre un lecteur MP3 codé en AS3 avec des classes.

Celui-ci devait prendre en compte une playlist gérée par à un fichier xml et pleins d’option que l’on trouve sur un tas de player identique. Je mets mes sources à disposition car j’ai bien commenté le code et je me dis que ça pourra peut être servir à quelqu’un.

Si vous voulez tester mon lecteur, c’est par là

Pour télécharger mes sources, (fichiers .as, .fla,…) c’est par ici
Les sources sont aussi dispo dans la suite…
Lire la suite…

2/2 #Rollover – Comment faire un menu rollover en CSS

C’est à la suite d’une visite sur le site d’Apple que je suis tombé sur leur barre de menu (très réussi, au passage). Par curiosité, j’ai affiché l’image de fond et je suis tombé sur ça :

Menu Rollover Apple

Menu Rollover Apple

Une image qui réunit les différents « états » (classique, survol, clic) du menu. Ca ma donné une idée de tuto pour créer des menus rollover en CSS. L’intérêt de celui-ci, c’est qu’il ne fait pas appel au javascript et qu’il sera donc affiché sur tous les navigateurs.

¤ Etape 1 : Préparer le terrain

On commence par lier notre feuille de style avec notre page HTML grâce à la balise :

<link rel="stylesheet" type="text/css" href="./style.css">

Ensuite, on va ajouter un conteneur pour notre menu. Celui-ci sera tous simplement un div :

	<!--Début du conteneur menu -->
<div class="menu">
</div>
<!--Fin du conteneur menu-->

Dans notre feuille de style, on va initialiser les marges et centrer notre conteneur :

BODY{
margin:10px;
padding:10px;
}
p,ul,a{
margin:0px;
padding:0px;
}
.menu{
width:982px;
margin:0 auto 0 auto; /* Pour centrer horizontalement notre menu */
height:36px;
border:1px solid black; /* Pour vérifier le centrage */
}

Avec tous cela, on a maintenant une page avec un div centré et à la bonne dimension.
¤ Live démo de l’étape 1 là : http://www.arnaudbosquet.fr/tutos/css/etape1/

¤ Etape 2 : Mettre en place le menu

On va maintenant placer les différentes catégories du menu à l’aide de la balise <a>et leur attribuer une classe css. Notre code HTML ressemble à ça :

<div class="menu">
	<a class="m_accueil"></a>
	<a class="m_store"></a>
	<a class="m_mac"></a>
	<a class="m_ipod"></a>
	<a class="m_iphone"></a>
	<a class="m_telec"></a>
	<a class="m_support"></a>
	<a class="m_search"></a>
</div>

Tout le travail va être fait dans notre feuille de style. Pour chaque élément, on va placer l’image en background. L’attribut float:left, va quant à lui, nous permettre d’avoir les div sur une seule ligne. On simplifiera notre feuille de style plus tard. Et voici le travail :

.menu{
width:982px;
margin:0 auto 0 auto;
height:36px;
/*border:1px solid black;*/
}
.m_accueil{
background:url('./menu.png') no-repeat 0px 0px;
width:118px;
height:37px;
float:left;
}
.m_store{
background:url('./menu.png') no-repeat -118px 0px;
width:117px;
height:37px;
float:left;
}
.m_mac{
background:url('./menu.png') no-repeat -235px 0px;
width:117px;
height:37px;
float:left;
}
.m_ipod{
background:url('./menu.png') no-repeat -352px 0px;
width:117px;
height:37px;
float:left;
}
.m_iphone{
background:url('./menu.png') no-repeat -469px 0px;
width:117px;
height:37px;
float:left;
}
.m_telec{
background:url('./menu.png') no-repeat -586px 0px;
width:117px;
height:37px;
float:left;
}
.m_support{
background:url('./menu.png') no-repeat -703px 0px;
width:117px;
height:37px;
float:left;
}
.m_search{
background:url('./menu.png') no-repeat -820px 0px;
width:161px;
height:37px;
float:left;
}

Nos catégories sont placées, le menu est presque prêt, sauf qu’il est statique :D
¤ Live démo de l’étape 2 là : http://www.arnaudbosquet.fr/tutos/css/etape2/

¤ Etape 3 : Animation du menu

Ajoutons un peu de vie à ce menu. Pour cela, tout va se passer dans notre css. Grâce aux propriétés :hover et :active, on va pouvoir définir un style pour le survol ou le clique. Dans notre cas, le style sera le même mis à part le décalage sur la hauteur du background.
On va aussi simplifier notre css grâce à l’héritage. En effet, toutes nos catégories sont définies par des balises <a> et celles-ci sont à l’intérieur du div qui a la classe menu.

.menu a{
height:37px;
float:left;
}

Le bout de code ci-dessus va permettre d’attribuer ces mêmes propriétés pour toutes les balises <a> contenu dans le div qui a la classe menu.

Notre feuille de style complète et finie :

.menu{
width:982px;
margin:0 auto 0 auto;
height:36px;
/*border:1px solid black;*/
}
.menu a{
height:37px;
float:left;
}
.m_accueil{
background:url('./menu.png') no-repeat 0px 0px;
width:118px;
}
.m_accueil:hover{
background:url('./menu.png') no-repeat 0px -38px;
}
.m_accueil:active{
background:url('./menu.png') no-repeat 0px -76px;
}
.m_store{
background:url('./menu.png') no-repeat -118px 0px;
width:117px;
}
.m_store:hover{
background:url('./menu.png') no-repeat -118px -38px;
}
.m_store:active{
background:url('./menu.png') no-repeat -118px -76px;
}
.m_mac{
background:url('./menu.png') no-repeat -235px 0px;
width:117px;
}
.m_mac:hover{
background:url('./menu.png') no-repeat -235px -38px;
}
.m_mac:active{
background:url('./menu.png') no-repeat -235px -76px;
}
.m_ipod{
background:url('./menu.png') no-repeat -352px 0px;
width:117px;
}
.m_ipod:hover{
background:url('./menu.png') no-repeat -352px -38px;
}
.m_ipod:active{
background:url('./menu.png') no-repeat -352px -76px;
}
.m_iphone{
background:url('./menu.png') no-repeat -469px 0px;
width:117px;
}
.m_iphone:hover{
background:url('./menu.png') no-repeat -469px -38px;
}
.m_iphone:active{
background:url('./menu.png') no-repeat -469px -76px;
}
.m_telec{
background:url('./menu.png') no-repeat -586px 0px;
width:117px;
}
.m_telec:hover{
background:url('./menu.png') no-repeat -586px -38px;
}
.m_telec:active{
background:url('./menu.png') no-repeat -586px -76px;
}
.m_support{
background:url('./menu.png') no-repeat -703px 0px;
width:117px;
}
.m_support:hover{
background:url('./menu.png') no-repeat -703px -38px;
}
.m_support:active{
background:url('./menu.png') no-repeat -703px -76px;
}
.m_search{
background:url('./menu.png') no-repeat -820px 0px;
width:161px;
}

Pour ajouter des liens sur nos catégories, il suffit d’utiliser la propriété href comme ci-dessous :

	<a class="m_accueil" href="#"></a>

¤ Live démo du menu rollover en css c’est là : http://www.arnaudbosquet.fr/tutos/css/etape3/

A vous de jouer :D

1/2 #Rollover – Comment faire un menu rollover en Javascript

Je vais publier un bout de script qui pourra peut être servir à quelqu’un. Une chose est sûre, c’est que ce code, écrit il y a quelques années, est totalement dépassé :D Mais, ça peut toujours servir pour une base ou quelque chose.

Le but était de faire un menu rollover (l’image change au survol).  L’intérêt de celui-ci, c’est qu’il est en javascript, et mal codé… euh :D Si une personne a désactivé l’exécution du javascript, elle ne verra pas l’effet. L’intérêt, par contre, c’est qu’il tient en 6 lignes de code.

Pour commencer, il vous faut deux images, une classique, l’autre pour le survol. L’astuce est de nommer l’image pour le survol avec un « _roll » après le nom. Dans notre cas, on a celles-ci :

bouton2.gif
bouton2_roll.gif
bouton2.gif
bouton3_roll.gif
Et ainsi de suite…

Le code javascript qui sera appelé à chaque survol d’une image du menu :

<script language="javascript" type="text/javascript">
function roll(id) {
var d = document.getElementById(id);
 for (var i = 1; i<=10; i++) {
  if (document.getElementById('bouton'+i)) {document.getElementById('bouton'+i).src='./img/bouton'+i+'.gif';}
 }
if (d) {d.src='./img/'+id+'_roll.gif';}
}
</script>

Le code HTML pour le menu :

<img id="bouton2" onmouseover="javascript:roll(this.id);" src="./img/bouton2.gif" border="0" alt="" />
<img id="bouton3" onmouseover="javascript:roll(this.id);" src="./img/bouton3.gif" border="0" alt="" />
<img id="bouton4" onmouseover="javascript:roll(this.id);" src="./img/bouton4.gif" border="0" alt="" />

Voilà, le menu rollover est maintenant actif. Une live démo est dispo là : http://www.arnaudbosquet.fr/tutos/roll_javascript/

Bon, j’ai écrit ce code il y a 3 ans. Il n’est donc pas très optimisé.
On peut faire un menu rollover beaucoup plus complet uniquement en CSS mais ça sera dans le prochain article :D

SQL : les bases, les fonctions agrégats & les Group By

Ah les requêtes SQL parfois c’est génial, parfois on se prend la tête pour une petite requête. Ici, pas d’interaction avec un langage de programmation, uniquement des requêtes SQL.

logo-mysql Lire la suite…