[Contribution] Une nouvelle page d'accueil pour Wamp [Sources]

**Benjamin Delespierre** · 28/07/2011, 12h25

Bnjour à tous

Juste pour partager mes outils avec vous, je vous propose une page d'accueil pour WAMP modifiée de façon à mettre les outils sous forme d'onglets plutôt qu'en liste (ce qui nous obligeait à scroller pour trouver nos projets).

Cette page intègre également un codepad pour faire des test PHP rapides.

Voilà, je vous la mets en pièce-jointe.

**kdmbella** · 28/07/2011, 13h00

je vient de tester cette parge d'accueil et je la trouve très ergonomique
si je peut me permettre de faire des propositions, je pense que le design peut être amélioré afin de donner plus de plaisir côté visuel
mais déja beau travail

**Benjamin Delespierre** · 28/07/2011, 13h36

Envoyé par kdmbella

je vient de tester cette parge d'accueil et je la trouve très ergonomique
si je peut me permettre de faire des propositions, je pense que le design peut être amélioré afin de donner plus de plaisir côté visuel
mais déja beau travail

Pourquoi pas. Qu'est ce que tu as en tête ?

**kdmbella** · 03/08/2011, 18h56

je pense a carément changer le style les couleurs et tous çà histoire d'avoir un nouveau design mais tout en gardant l'esprit de la nouvelle disposition

**grunk** · 04/08/2011, 08h49

Très sympa cette page ! Je l'ai adopté

Je l'ai légèrement modifié pour la réduire encore un peu plus (genre supprimer le logo et passer les versions des services dans le header)

**Benjamin Delespierre** · 04/08/2011, 10h17

Envoyé par kdmbella

je pense a carément changer le style les couleurs et tous çà histoire d'avoir un nouveau design mais tout en gardant l'esprit de la nouvelle disposition

J'ai pas le temps en ce moment de pondre un design pour ça, mais si tu te sens l'âme d'un artiste, je te propose de soumettre un patron et je l'intègrerai un de ces 4 matins.

Au passage j'ai oublié de le mentionner mais cette page charge dynamiquement la librairie jQuery à travers l'API Google donc il faut une connection internet pour pouvoir l'utiliser correctement

**Benjamin Delespierre** · 19/01/2012, 18h07

Nouvelle version tout juste sortie du four.

Au menu:

Changement de couleur sur l'onglet actif
Ajout de la liste des fonctions PHP et leurs liens en ordre alphabétique
Ajout d'un filtre sur la liste des fonctions PHP
Ajout d'un codepad JavaScript
Les codepad supportent désormais la touche "tab"
Les codepad s'agrandissent avec le contenu

Le fichier est en PJ. Merci à Stealh35 de m'avoir donné l'idée

Utiliser le codepad JS
Vous avez accès à la librairie jQuery. Pour afficher du texte, utilisez la fonction write et pour afficher des données, utilisez la fonction dump (j'ai essayé autant que possible de me calquer sur var_dump de PHP).

Exemple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
var a = "hello";
 
write( a.toUpperCase() );
dump( a );

**Bovino** · 19/01/2012, 18h16

Envoyé par Benjamin Delespierre

Nouvelle version tout juste sortie du four.

L'image est pas mal...

Tu n'aurais pas oublié un lien ? (Parce qu'elle m'intéresse moi, ta page !)

**Benjamin Delespierre** · 19/01/2012, 18h19

Désolé, j'ai dû l'enlever en éditant et j'ai oublié de mettre la dernière

**stealth35** · 19/01/2012, 18h54

en un peu plus sobre, ça fait un moment que je reste sur ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<?php
if(isset($_GET['phpinfo'])) {
    phpinfo();
    exit();
}
?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title><?php echo $_SERVER['SERVER_NAME'] ?></title>
        <style type="text/css">
        <!--
        html,body{font:120% "Arial";font-variant:small-caps;letter-spacing:.3em;color:#222}h1{margin:0}h2{margin:0;font-size:60%;color:#ed2024}a{text-decoration:none}pre{font:50% "Consolas";letter-spacing:0}#middle dl{float:left}.folders a{color:#8dc434}.folders a:hover{color:#a7df38}.extensions a{color:#00b6f0;font-size:85%}.extensions a:hover{color:#0cf}
        -->
        </style>
    </head>
    <body>
        <div id="content">  
            <h1><?php echo $_SERVER['SERVER_NAME'] ?></h1>
            <h2><?php echo sprintf('PHP %s | %s | %s', phpversion(), php_sapi_name(), php_uname('s')) ?></h2>
            <div id="middle">
                <dl class="folders">
                    <dt>Folders</dt>
<?php
foreach(new FilesystemIterator(__DIR__) as $file):
    if($file->isDir()):
?>
                    <dd><a href="<?php echo $file->getFilename() ?>"><?php echo $file->getFilename() ?></a></dd>
<?php 
    endif;
endforeach;
?>
                </dl>
                <dl class="extensions">
                    <dt>Extensions</dt>
<?php
$extensions = get_loaded_extensions();
natcasesort($extensions);
 
foreach($extensions as $index => $extension):
?>
                    <dd><a href="?phpinfo#module_<?php echo $extension ?>"><?php echo $extension ?></a></dd>
<?php 
endforeach;
?>
                </dl>
            </div>
        </div>
    </body>
</html>

**stealth35** · 19/01/2012, 19h02

ça serai un sympa un petit site ou on s’échange nos page d'accueil

(je vais faire ça demain, grosse mise a jours des serveurs j'aurai le temps

)

**Benjamin Delespierre** · 19/01/2012, 19h14

Ma foi pourquoi pas, contacte moi s'il te faut des doigts en plus

**grunk** · 20/01/2012, 11h29

Ca serait peut être pas idiot de proposer cette modification au gens de chez wampserver (anaska ?) non ?

l'idée du jscodepad est très bonne !

de mon coté j'ai fait un mini "fork" de la page de Benjamin :

http://pastebin.com/PyGbwPf5

J'ai retiré le chargement jquery via google par un fichier local (pas internet sur mon poste de dév

)
Supprimé le logo de l'entête et réduit la taille de cette dernière
Déplacé les numéros de version pour gagner en place.

**Bovino** · 20/01/2012, 11h41

Perso, j'aurais plutôt mis les deux consoles dans un onglet à part...

**Benjamin Delespierre** · 20/01/2012, 12h09

Je les ai mises l'une en dessous de l'autre pour que PHP puisse produire des éléments DOM que le codepad JS peut manipuler

Ex:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
// PHP
echo <<< HTML
<input type="button" id="btn" value="click me" />
HTML;
 
// JS
$('#btn').live('click', function () {
  $(this).after( $(this).clone() );
});

**Benjamin Delespierre** · 20/01/2012, 12h22

Envoyé par grunk

J'ai retiré le chargement jquery via google par un fichier local (pas internet sur mon poste de dév

)

J'ai entendu ta plainte et mis jQuery 1.7.1 dans index.php

Maintenant ça fonctionne en standalone sans connection internet

C'est même devenu un poil plus rapide à charger mais en conséquence le fichier index.php est plus lourd...

Enfin bon, le voici: http://poqisd.free.fr/dump/index.txt

**Benjamin Delespierre** · 20/01/2012, 14h28

C'est encore moi, j'ai ajouté encore quelque améliorations (surtout esthétiques).

Au menu de cette troisième version:

support des thèmes
mémorisation du thème et de la langue choisis sur cookie
ajout de raccourcis sur la liste des extensions
le support de jQuery à été internalisé, une connexion à internet n'est plus nécessaire pour utiliser la page

Ajouter des thèmes
Il vous suffit d'étendre la feuille de style (incluse directement dans le fichier) par vos propres règles CSS. Les thèmes sont à incorporer du coté de la ligne #544 mais AVANT la section // Definition des themes. Il apparaitra tout seul dans la liste des thèmes disponibles. Soyez créatifs !

E.G.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$themes['blue'] = <<< EOCSS
/** Mes règles pour un thème tout bleu **/
EOCSS;

Télécharger !

EDIT.

Je viens encore de mettre à jour pour corriger le bug du backspace dans les codepads et ajouter la numérotation des lignes.
Il reste à prendre en charge le CTRL+X et CTRL+V, mais j'en ai assez de me battre avec JS pour aujourd'hui...

**Benjamin Delespierre** · 26/01/2012, 10h26

La page est désormais disponible en téléchargement dans les outils: http://php.developpez.com/telecharge...-WAMP-Ameliore

Merci d'utiliser le nouveau sujet pour vos remarques.

**stealth35** · 03/07/2012, 18h44

Je partage la mienne

https://github.com/stealth35/localhost

dispo direct via composer

composer create-project stealth35/localhost

je vous invite à nommer aussi votre projet localhost pour pouvoir faire des recherches directs

composer search localhost

[Contribution] Une nouvelle page d'accueil pour Wamp [Sources]

EDI, CMS, Outils, Scripts et API PHP

Discussions similaires

Partager

Partager