Pour commencer mon dashscreen j’ai installé la version de Mediablog que j’ai essayé de comprendre (au début pas facile il y avait longtemps que j’avais pas fait de code) et ensuite j’ai enlevé tout ce qui m’était inutile.
Pour le principe de base je vous invite a regarder cette page : Principe de base. Tout est très bien expliqué et j’ai gardé la même structure.
A chaque fois que je veux rajouter une nouvelle fonction sur mon écran je fais un test sur une page à part et ensuite j’ajoute une DIV dans mon index.php, le nouveau style du DIV dans style.css, la fonction javascript dans javascript.js, le code exécuté lors de la requête ajax dans ajax.php et mon nouveau code dans une fonction dans le fichier inc.php.
Donc le plus difficile c’est de faire le code test ensuite c’est du copier coller en changeant les noms des fonctions. 🙂
Pour l’heure et la date :
Dans mon index.php :
</p>
<div id="horloge"></div>
<p>
Dans mon style.css : j’ai surtout changé la police et le fond du DIV soit être transparent pour voir le fond général et tableau. « background-color : rgba(0, 0, 0, 0); »
/* horloge */
div#horloge
{
left : 30px;
top : 0px;
position : absolute;
overflow : hidden;
background-color : rgba(0, 0, 0, 0);
color : #FFF;
font-weight : bold;
text-align : center;
}
div.horloge_heure
{
font-size : 180px;
background-color : rgba(0, 0, 0, 0);
font-family : 'eraserregular';
}
div.horloge_date
{
font-size : 50px;
background-color : rgba(0, 0, 0, 0);
font-family : 'eraserregular';
}
span.horloge_grey
{
color : #888;
font-family : 'eraserregular';
font-size : inherit;
}
Et dans mon javascript.js : Ce module n’utilise pas de fonction AJAX. Pas besoin de retourner chercher des infos sur le serveur pour afficher l’heure et la date. Et bien sur on relance la fonction toutes les secondes avec « setTimeout(« horloge() », 1000); »
/* horloge */
var horloge_timeout;
function horloge()
{
dows = ["dimanche", "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi"];
mois = ["janv", "fév", "mars", "avril", "mai", "juin", "juillet", "août", "sept", "oct", "nov", "déc"];
now = new Date;
heure = now.getHours();
min = now.getMinutes();
sec = now.getSeconds();
jour_semaine = dows[now.getDay()];
jour = now.getDate();
mois = mois[now.getMonth()];
annee = now.getFullYear();
if (sec < 10){sec0 = "0";}else{sec0 = "";}
if (min < 10){min0 = "0";}else{min0 = "";}
if (heure < 10){heure0 = "0";}else{heure0 = "";}
horloge_heure = heure + ":" + min0 + min;
horloge_date = "<span class='horloge_grey'>" + jour_semaine + "</span> " + jour + " " + mois + " <span class='horloge_grey'>" + annee + "</span>";
horloge_content = "
</p>
<div class='horloge_heure'>" + horloge_heure + "</div>
<p><br /></p>
<div class='horloge_date'>" + horloge_date + "</div>
<p>
";
$("#horloge").html(horloge_content);
horloge_timeout = setTimeout("horloge()", 1000);
}
Voilà maintenant vous avez l’heure comme ceci : 
