Bonjour,
Je suis en train de "dévelloper" un site internet (en ASP.NET), et j'aimerais améliorer le code, et peut-être même recommencer la conception d'une de mes pages en suivant les méthodes et conseils que vous pourrez me proccurer.
Il s'agit en faite d'une page présentant un calendrier sur lequel des événements, présents dans une base de donnée, vont s'afficher (un peu comme la vue par moi du calendrier d'outlook).
J'ai réussis à faire ce que je voulais, mais étant encore débutant, ma méthode n'est vraiment pas bonne. Ce qui fait que ma page est difficilement améliorable, que les performances de cette page doivent être médiocres ...
Si vous pouviez m'aider à refaire du code plus "simple" ou du moins mieux concus ce serait super.
(J'aimerais rajouter par la suite un "HoverMenuExtender" de l'AJAX Toolkit sur chaque évenements pour pouvoir afficher les détails de l'évenement survolé, mais c'est la que je cale!)
[Preview de la page]
Code de ma page : (imbriqué dans une page maître)
<%
'Date à afficher (affiche le mois de cette date-ci)
Dim now As Date = now.Date
'Nombre de jours dans le mois
Dim daysInMonth As Integer = Date.DaysInMonth(now.Year, now.Month)
'Date du premier jour du mois
Dim first As New Date(now.Year, now.Month, 1)
'Jour de la semaine (pour pouvoir savoir le nombre de case vide à afficher sur la première ligne)
Dim firstDay As Integer = first.DayOfWeek
Dim i As Integer = -firstDay + 2 '(1 et 0)
Dim maConn As New Data.SqlClient.SqlConnection("Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Evenements.mdf;Integrated Security=True;User Instance=True")
'créer une connection et une commande
Dim maCommand As New Data.SqlClient.SqlCommand
'crée un reader pour parcourir les enregistrements trouvés
Dim reader As Data.SqlClient.SqlDataReader
'Tableau servant à stocker les 4 premiers éléments du jour
Dim Elements(3) As String
%>
<table style="border: #83bbd9 1px solid;" cellpadding="0" cellspacing="0">
<tr id="TitreCalendrier">
<td colspan="7" class="TitreCalendrier">
<%=Format(now, "MMMM yyyy")%>
</td>
</tr>
<tr class="NomJour">
<td style="border-left: white 3px solid;">
Lundi
</td>
<td>
Mardi
</td>
<td>
Mercredi
</td>
<td>
Jeudi
</td>
<td>
Vendredi
</td>
<td>
Samedi
</td>
<td style="border-right: white 3px solid;">
Dimanche
</td>
</tr>
<% While i <= daysInMonth%>
<tr>
<% For d As Integer = 1 To 7%>
<% If i > 0 And i <= daysInMonth Then%>
<td class="Jour">
<div class="Numero">
<a href='VueJour.aspx?ID=<%=i%>'>
<%=i%>
</a>
</div>
<div class="Evenements">
<%
'ListElements stockent tous les éléments du jours
'ListElements stockent tous les éléments du lendemain
'--> Mauvaise idée car on va voir dans la base de donnée deux fois pour chaque jour
Dim ListElements, ListElementsDemain As New ArrayList
'Récupère les événements du lendemain
Dim actuDay As Date = New Date(now.Year, now.Month, i)
maConn.Open()
With maCommand
.CommandText = "SELECT Nom, ID FROM Evenements WHERE [dhDebut]<='" & actuDay.ToString & "' AND [dhFin]>='" & actuDay.ToString & "'"
.CommandType = Data.CommandType.Text
.Connection = maConn
'exécuter la commande
reader = .ExecuteReader()
End With
'On remplit une liste des éléments journaliers
While reader.Read()
'récupère le "nom" des événements
ListElements.Add(reader("Nom").ToString) End While
maConn.Close()
'On passe au lendemain
actuDay = actuDay.AddDays(1)
maConn.Open()
With maCommand
.CommandText = "SELECT Nom, ID FROM Evenements WHERE [dhDebut]<='" & actuDay.ToString & "' AND [dhFin]>='" & actuDay.ToString & "'"
.CommandType = Data.CommandType.Text
.Connection = maConn
'exécuter la commande
reader = .ExecuteReader()
End With
'On remplit une liste des éléments journaliers
While reader.Read()
ListElementsDemain.Add(reader("Nom").ToString) End While
maConn.Close()
'Tableau des Elements à Afficher pour ne pas avoir de répétition des titres
' pour afficher les icones de début et de fin
Dim ElementsAffiches(3, 1) As String
'On Vide les anciennes cellules inutiles (celles du jours précédant)
For c As Integer = 0 To 3
If Not ListElements.Contains(Elements(c)) Then
Elements(c) = Nothing
End If
Next
'On replace les nouvelles
For l As Integer = 0 To ListElements.Count - 1
If Array.IndexOf(Elements, ListElements.Item(l).ToString) = -1 Then
For c As Integer = 0 To 3
If Elements(c) = Nothing Then
Elements(c) = ListElements.Item(l).ToString
ElementsAffiches(c, 0) = Elements(c)
'pour dire que c'est le début de l'évenement
ElementsAffiches(c, 1) = "Deb"
Exit For
End If
Next
Else
'Vérifie si on est lundi pour reafficher les entetes (quand on est passé à la ligne suivante pour plus de clareté
If actuDay.DayOfWeek - 1 = DayOfWeek.Monday Then
ElementsAffiches(Array.IndexOf(Elements, ListElements.Item(l).ToString), 0) = ListElements.Item(l).ToString
Else
ElementsAffiches(Array.IndexOf(Elements, ListElements.Item(l).ToString), 0) = " "
End If
End If
Next
'Vérifie si c'est pas la fin d'un élément: (voila pourquoi on cherche ceux du lendemain
For c As Integer = 0 To 3
If Not ListElementsDemain.Contains(Elements(c)) Then
ElementsAffiches(c, 1) = "Fin"
End If
Next
'On affiche le tableau :
For c As Integer = 0 To 3
%>
<% If ElementsAffiches(c, 0) = Nothing Then%>
<div style="height: 21px;">
</div>
<% Else%>
<a href='VueMois.aspx?ID=2' style="background-image: url(img/CalMil.gif); height: 20px;
border-bottom: white 1px solid;">
<table cellpadding="0px" cellspacing="0px">
<tr>
<% If ElementsAffiches(c, 1) = "Deb" Then%>
<td>
<img src="img/CalDeb.gif" style="border: 0px; border-left: white 1px solid;" alt=")" />
</td>
<%End If%>
<td width="100%">
<%=ElementsAffiches(c, 0)%>
</td>
<%If ElementsAffiches(c, 1) = "Fin" Then%>
<td>
<img src="img/CalFin.gif" style="border: 0px; border-right: white 1px solid;" />
</td>
<%End If%>
</tr>
</table>
</a>
<% End If
Next
%>
</div>
<% Else%>
<td>
<% End If
i += 1%>
</td>
<%Next d%>
</tr>
<% End While
%>
</table>
Feuille CSS (Pas très utile mais bon!?)
body
{ margin: 0px;
padding: 0px;
border: 0px;
font-family:Arial;
background-color: #f5ffff;
color: #416f88;
}
a
{ color: #416f88;
text-decoration:none;
}
table, tr, td, div, ul
{ border: 0px;
margin: 0px;
padding: 0px;
}
div.Logo
{ background-image: url(img/Logo.gif);
height: 50px;
width: 394px;
}
div.Header
{ background-image: url(img/Header.gif);
height: 50px;
}
/* MENU HORIZONTAL ************************************************************************************************************/
div.MenuH
{ background-image: url(img/MenuH.gif);
height: 33px;
font-size: 10px;
}
div.MenuH td span,
div.MenuH td a
{ color: #416f88;
vertical-align:super;
text-decoration: none;
padding: 5px;
}
div.MenuH td a:hover
{ text-decoration: underline;
}
div.MenuH td a img
{ margin-right: 5px;
position: relative;
top: 3px;
}
/* MENU VERTICAL ************************************************************************************************************/
td.MenuV
{ vertical-align: top;
font-size: 10px;
}
td.MenuV a
{ display:block;
}
td.MenuV div.Panel
{ border: #83bbd9 1px solid;
white-space: nowrap;
margin-bottom: 5px;
}
td.MenuV div.Panel div.Titre
{ background-image: url(img/CalendrierTitre.gif);
background-position-y:center;
border-bottom: #83bbd9 1px solid;
}
td.Contenu
{ background-color:White;
}
/* CALENDRIER ***************************************************************************************************************/
td.TitreCalendrier
{ text-align: center;
background-color: #dff3fa;
border: white 3px solid;
padding:2px;
}
td.Jour
{ width:150px;
border-top: #83bbd9 1px solid;
/*border-left: #83bbd9 1px solid;*/
background-image: url(img/CalendrierTitre.gif);
background-repeat: repeat-x;
font-size: 15px;
background-color:#f5ffff;
}
td.Jour:hover
{ background-color:#dff3fa;
cursor:default;
}
td.Jour a
{ display: block;
width: 100%;
text-decoration: none;
}
td.Jour div.Numero
{ height:19px;
border-right: #83bbd9 1px solid;
padding-left:5px;
}
td.Jour div.Numero:hover
{ font-weight: bold;
}
td.Jour div.Evenements
{ overflow-y:auto;
overflow-x:hidden;
}
/* SEMAINE ***********************************/
td.Jour div.EvenementsSemaine
{ overflow-y:auto;
overflow-x:hidden;
height:100px;
}
tr.NomJour td
{ background-color: #dff3fa;
border-bottom: white 3px solid;
padding:2px;
padding-left:5px;
}