Webmaster Hub > un emploi du temps interactif

Version complète: sur le forum Webmaster Hub : un emploi du temps interactif

Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS

titytwister

samedi 18 juin 2005 à 03:15

salut à tous
salut à tous
J'éspère avoir choisi le bon sous-forum....

Voilà je cherche à fair un site internet pour gérer une association de jeunes sapeur pompier et particulièrement pour ce qui est de l'emploi du temps des animateur/formateur.
Je suis partis de l'idée d'un tableau excel car c'est ce qui me parait le plus simple et je connais pas trop mal excel.
J'aimerai savoir comment faire pour que ce tableau soit interactif, c'est à dire que les cases en rouge soit "cliquable" pour se résèrver le créneaux horaire, via un login préalable à l'entrée du site bien sûr .
J'aimerai savoir aussi s'il est possible de faire un envoi automatique d'email à tout les animateur quand une date approche et qu'il n'y a pas le nombre fatidique et absolument nécéssaire de 2 animateur par cession.
Voilà pour l'instant c'est tout, j'éspère ne pas être hors sujet ici .

Merci d'avance de vous pencher sur mon cas , déconner pas siou plait c'est un colonel qui m'a filer cette mission...

voilà ma première idée de tableau

MS-DOS_1991

samedi 18 juin 2005 à 12:38

Salut titytwister

CITATION(titytwister @ Dimanche 19 Juin 2005)

J'aimerai savoir comment faire pour que ce tableau soit interactif, c'est à dire que les cases en rouge soit "cliquable" pour se résèrver le créneaux horaire, via un login préalable à l'entrée du site bien sûr .

CITATION(titytwister @ Dimanche 19 Juin 2005)

J'aimerai savoir aussi s'il est possible de faire un envoi automatique d'email à tout les animateur quand une date approche et qu'il n'y a pas le nombre fatidique et absolument nécéssaire de 2 animateur par cession.

Tout cela est possible en combinant (x)html, css et php.

En ce qui concerne le tableau, voici le code xhtml

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-FR" dir="ltr">
  <head xml:lang="fr-FR" dir="ltr">
    <title>
      Titre de la Page
    </title>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Language" content="fr-FR" />
    <meta http-equiv="Default-Style" content="help-titytwister-css.css" />
    <link rel="stylesheet" type="text/css" title="Styles du tableau" href="help-titytwister-css.css" />
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th rowspan="2">
            Jour
          </th>
          <th rowspan="2">
            Section
          </th>
          <th rowspan="2">
            Cours Pr&eacute;vu
          </th>
          <th colspan="2" class="noborderbottom">
            T&eacute;l&eacute;chargement
          </th>
          <th rowspan="2">
            Animateur
          </th>
          <th rowspan="2">
            Observations
          </th>
        </tr>
        <tr>
          <th class="nobordertop noborderright">
            Cours
          </th>
          <th class="nobordertop noborderleft">
            Liste d'appel
          </th>
        </tr>
      </thead>
      <tbody>
        <!-- ligne 1 -->
        <tr>
          <td rowspan="8">
            Samedi 10/12
          </td>
          <td rowspan="2">
            Erasme 1
          </td>
          <td rowspan="2">
            INC
          </td>
          <td rowspan="2">
            <a href="#">lien</a>
          </td>
          <td rowspan="2">
            <a href="#">lien</a>
          </td>
          <td>
            Fred
          </td>
          <td rowspan="2">
            Nicolas n'est pas venu
          </td>
        </tr>
        <!-- ligne 2 -->
        <tr>
          <td>
            SEB
          </td>
        </tr>
        <!-- ligne 3 -->
        <tr>
          <td rowspan="2">
            Stockfeld 1
          </td>
          <td rowspan="2">
            TOP
          </td>
          <td rowspan="2">
            <a href="#">lien</a>
          </td>
          <td rowspan="2">
            <a href="#">lien</a>
          </td>
          <td>
            Jean
          </td>
          <td rowspan="2">
            Les enfants ont &eacute;t&eacute; fatiguants, un avertissement
          </td>
        </tr>
        <!-- ligne 4 -->
        <tr>
          <td class="bg-rouge">
            <a href="#traitement-php">&nbsp;</a>
          </td>
        </tr>
        <!-- ligne 5 -->
        <tr>
          <td rowspan="2">
            Erasme 2
          </td>
          <td rowspan="2">
            INC
          </td>
          <td rowspan="2">
            <a href="#">lien</a>
          </td>
          <td rowspan="2">
            <a href="#">lien</a>
          </td>
          <td>
            Michel
          </td>
          <td rowspan="2">
            &nbsp;
          </td>
        </tr>
        <!-- ligne 6 -->
        <tr>
          <td>
            Stephane
          </td>
        </tr>
        <!-- ligne 7 -->
        <tr>
          <td rowspan="2">
            Stockfeld 2
          </td>
          <td rowspan="2">
            Manoeuvre
          </td>
          <td rowspan="2">
            <a href="#">lien</a>
          </td>
          <td rowspan="2">
            <a href="#">lien</a>
          </td>
          <td>
            Patrick
          </td>
          <td rowspan="2">
            &nbsp;
          </td>
        </tr>
        <!-- ligne 8 -->
        <tr>
          <td class="bg-rouge">
            <a href="#traitement-php">&nbsp;</a>
          </td>
        </tr>
        <!-- ligne 9 -->
        <tr>
          <td rowspan="8">
            Samedi 17/12
          </td>
          <td rowspan="2">
            Erasme 1
          </td>
          <td rowspan="2">
            DIV
          </td>
          <td rowspan="2">
            <a href="#">lien</a>
          </td>
          <td rowspan="2">
            <a href="#">lien</a>
          </td>
          <td class="bg-rouge">
            <a href="#traitement-php">&nbsp;</a>
          </td>
          <td rowspan="2">
            &nbsp;
          </td>
        </tr>
        <!-- ligne 10 -->
        <tr>
          <td class="bg-rouge">
            <a href="#traitement-php">&nbsp;</a>
          </td>
        </tr>
        <!-- ligne 11 -->
        <tr>
          <td rowspan="2">
            Stockfeld 1
          </td>
          <td rowspan="2">
            Rep
          </td>
          <td rowspan="2">
            <a href="#">lien</a>
          </td>
          <td rowspan="2">
            <a href="#">lien</a>
          </td>
          <td class="bg-rouge">
            <a href="#traitement-php">&nbsp;</a>
          </td>
          <td rowspan="2">
            &nbsp;
          </td>
        </tr>
        <tr>
          <td class="bg-rouge">
            <a href="#traitement-php">&nbsp;</a>
          </td>
        </tr>
        <!-- ligne 13 -->
        <tr>
          <td rowspan="2">
            Erasme 2
          </td>
          <td rowspan="2">
            INC
          </td>
          <td rowspan="2">
            <a href="#">lien</a>
          </td>
          <td rowspan="2">
            <a href="#">lien</a>
          </td>
          <td class="bg-rouge">
            <a href="#traitement-php">&nbsp;</a>
          </td>
          <td rowspan="2">
            <a href="#traitement-php">&nbsp;</a>
          </td>
        </tr>
        <!-- ligne 14 -->
        <tr>
          <td class="bg-rouge">
            <a href="#traitement-php">&nbsp;</a>
          </td>
        </tr>
        <!-- ligne 15 -->
        <tr>
          <td rowspan="2">
            Stockfeld 2
          </td>
          <td rowspan="2">
            SPO
          </td>
          <td rowspan="2">
            <a href="#">lien</a>
          </td>
          <td rowspan="2">
            <a href="#">lien</a>
          </td>
          <td class="bg-rouge">
            <a href="#traitement-php">&nbsp;</a>
          </td>
          <td rowspan="2">
            <a href="#traitement-php">&nbsp;</a>
          </td>
        </tr>
        <tr>
          <td class="bg-rouge">
            <a href="#traitement-php">&nbsp;</a>
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

... et le css

CODE

body {
	font-size: small;
}
table {
	border: medium solid black;
	border-collapse: collapse;
	width: 100%;
}
table tr th, td {
	text-align: center;
	padding: 1.5px;
}
table tr th {
	border: medium solid black;
	background-color: yellow;
	text-decoration: underline;
}
table tr td {
	border: thin solid gray;
}
.bg-rouge {
	background-color: red;
}
.bg-rouge a {
	display: block;
	color: red;
	text-decoration: none;
}
.nobordertop {
	border-top: none;
}
.noborderleft {
	border-left: none;
}
.noborderright {
	border-right: none;
}
.noborderbottom {
	border-bottom: none;
}

Le code est valide XHTML1.1/CSS 3 B)
Le design correspond à ta capture d'excel (enfin je crois )
Je n'ai pas inclus de scripts de traitement (PHP, MYSQL, etc)

Pour ce qui est du traitement (envoi de mails, login, etc), je te conseille très fortement le PHP.

Si tu veux de l'aide pour la programmation en PHP, n'hésite pas à m'envoyer un email (msdos.1991_AT_gmail.com)

okayre1

jeudi 23 juin 2005 à 08:59

je peut te réaliser l'application.
je peut également te montrer des applications que j'ai deja faite.

contact moi :

PEU Mickael
Intranet Pro
contact_AT_intranet-pro.com
www.intranet-pro.com

titytwister

vendredi 24 juin 2005 à 08:49

ok merci à tous les deux, je regarde avec ce que vous m'avez donné et je vous contact

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.