MISSION 7

Objectifs : Réalisation des tâches suivantes : Menu général, T3.1, T2.3. Le responsable de la gestion des arbitres doit pouvoir s’authentifier grâce à une fenêtre de connexion.

Ensuite, il aura accès à son menu qui comprendra les 3 domaines D1, D2, D3. Un arbitre doit aussi s’identifier grâce à la même fenêtre de connexion. Il aura ensuite accès à son menu décrivant le domaine D4

 Menu général : Concevoir le menu général de l’application pour le responsable et celui pour les arbitres. Ce menu doit être conforme à la maquette conçue par l’équipe au complet au début de ce projet.

 T3.1 Gestion des équipes : Cette tâche doit permettre la création, la modification et la suppression d’une équipe.

Lorsque l’on clique sur Ajouter, une nouvelle page web s’ouvre permettant la création d’une nouvelle équipe.

Lorsque l’on clique sur Modifier, une page web s’ouvre, affichant l’équipe sélectionnée, et le responsable pourra alors la modifier.

Lorsque l’on clique sur Supprimer, le responsable peut supprimer, après contrôle, l’équipe sélectionnée.

 T2.3 Édition de la liste des arbitres

Le responsable veut pouvoir visualiser la liste des arbitres avec les informations le concernant (état-civil, adresse, numéros de téléphone, adresse mail, nom du club auquel il appartient éventuellement).

Cet état doit apparaître sous forme d’un tableau au format PDF.

Développement du site

L'index

Voici le code concernant l'index du site :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<title>Ligue de Basket-Ball de Lorraine</title>
		
	</head>

	<body>
	<div id="global">
		<?php 	include "include/entete.php"; ?>

		<div id="contenu">
			<?php include "include/menu.php"; ?>
		
			<div id="accueil">
				<?php
					if (!isset ($_GET['page'])) {
						include "include/centre.php";
						}
					else {
							if(file_exists("pages/".$_GET['page'].".php")) {
								include "pages/".$_GET['page'].".php"; }
							
							else
								include "include/centre.php";
								}
				?>
			</div>
		</div>
				
		<?php include "include/pied.php"; ?>

	</div>
</body>		
</html>

J'ai donc procéder de manière à développer chaque partie du site indépendamment les unes des autres. Ce qui explique donc les différents include contenus dans le code. Afin de charger les différentes pages dans ma div “accueil”, je déclare donc une variable “page” qui redirigera vers la page à afficher (la redirection s'effectuera via le code html du lien en question). Ainsi, je ne recharge pas l’entête, le menu et le pied à chaque fois que je change de page HTML. Si la page demandée n'existe pas (if (!isset ($_GET['page']))), je redirige donc vers la page d'accueil.

Concernant le css, nous pouvons déjà définir des paramètres tels que la couleur de fond de notre page (ici gris) et l'initialisation des marges à 0. Voici le code :

* {
margin: 0;
padding: 0;
	}

html{
background-color: grey;
}

L'entête

Il s'agit ici d'une simple image éditée avec un logiciel d'édition photo. Je l'ai ensuite inclue via le code HTML que voici :

<div id="entete">
	<img src="images/entete.jpg">
</div>

La disposition sur le site à été faite via le fichier style.css. Voici le code css concernant l'entête :

#entete {
	height: 200px;
	}
		
		#entete img {
			height: 200px;
			width: 100%;
			}

Le menu

Celui ci est composé de boutons menant respectivement aux pages Accueil, Gestion, Edition et Contact. J'ai donc déclaré une div que je définie, tout comme pour l'entête, avec mon fichier css, et j'y ajoute mes boutons (qui sont en fait une liste). Voici comment se présente le code HTML :

<div id="menu">
			<ul>
				<li><a href="index.php">Accueil</a></li>
				<li><a href="index.php?page=gestion">Gestion</a></li> //on retrouve ici le code pour la variable page de l'index
				<li><a href="index.php?page=edition">Edition</a></li> 
				<div id="contact"><li><a href="index.php">Contact</a></li></div>
			</ul>
</div>

J'ai définie une div spéciale pour le bouton “Contact” étant donné que celui ci se trouve à droite. Je lui ai donc appliqué un css propre à lui même. Voici le css concernant le menu :

#menu {
	width: 100%;
	height: 50px;
	margin-bottom: 15px;
	border: 1px solid orange;
	}
		#menu ul li {
			list-style-type: none;
			float: left;
			height: 50px;
			width: 100px;
			background-color:#FF9900;
			border-radius: 10px;
			}
			
				#menu li:hover {
				background-color: #FFD700;
				}
				
			#menu ul li a {
				display: block;
				text-decoration: none;
				text-align: center;
				height: 100%;
				margin-right: 2px;
				padding-top: 13px;
				}
				
			#contact {
				float: right;
				padding-right: 2px;
				}

Le pied de page

Celui ne représente rien de particulier pour le moment, j'y ai donc inséré du texte généré pour combler le vide en attendant de lui trouver une réelle “utilité”. J'ai éventuellement songé à remplacer le bouton contact par justement l'insertion de contact dans le pied de page. En voici le code html et le code css.

<div id="pied">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam adipiscing ante id nibh lobortis mollis. Donec vel libero eros. Nam condimentum, felis nec viverra condimentum, justo turpis aliquam nisl, a placerat ante leo id nibh. Nam accumsan, ligula vitae scelerisque elementum, turpis sem imperdiet magna, in euismod nisl nulla tincidunt massa. Phasellus porta ultricies diam, ac laoreet sem mattis et. Quisque vestibulum pretium sapien, eget vulputate nunc sodales sit amet. Donec sollicitudin augue vel quam malesuada faucibus a quis magna. Pellentesque cursus ornare nisl sed sagittis. Sed vulputate pellentesque risus id interdum. In gravida, lorem in sagittis consequat, elit libero ornare massa, id lacinia libero libero nec sem. Morbi mollis lorem vitae nulla porttitor eu aliquam enim tristique. Sed tempus mi et nibh malesuada ut semper libero congue. Phasellus eu mi mollis libero tincidunt porta. Maecenas volutpat, lorem sit amet sagittis suscipit, nisi dolor facilisis tortor, vitae iaculis purus neque eget dui.
</div>

#pied {
	min-height: 100px;
	border: 1px solid orange;
	border-radius: 10px;
	}

Le centre

Celui ci est destiné à recevoir les différentes pages auxquelles nous allons accéder via le menu, ou via les différents liens contenus dans les sections du menu. A la base, il affiche donc un texte généré pour combler l'écran d'accueil. Ensuite suivant les liens sur lesquels l'utilisateur cliquera, le contenu de la page demandée s'affichera, sauf si celle ni n'existe pas. Voici le code HTML puis css de la div “centre”.

<div id="centre">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam adipiscing ante id nibh lobortis mollis. Donec vel libero eros. Nam condimentum, felis nec viverra condimentum, justo turpis aliquam nisl, a placerat ante leo id nibh. Nam accumsan, ligula vitae scelerisque elementum, turpis sem imperdiet magna, in euismod nisl nulla tincidunt massa. Phasellus porta ultricies diam, ac laoreet sem mattis et. Quisque vestibulum pretium sapien, eget vulputate nunc sodales sit amet. Donec sollicitudin augue vel quam malesuada faucibus a quis magna. Pellentesque cursus ornare nisl sed sagittis. Sed vulputate pellentesque risus id interdum. In gravida, lorem in sagittis consequat, elit libero ornare massa, id lacinia libero libero nec sem. Morbi mollis lorem vitae nulla porttitor eu aliquam enim tristique. Sed tempus mi et nibh malesuada ut semper libero congue. Phasellus eu mi mollis libero tincidunt porta. Maecenas volutpat, lorem sit amet sagittis suscipit, nisi dolor facilisis tortor, vitae iaculis purus neque eget dui.

Phasellus aliquet orci ac ligula sollicitudin eleifend. Mauris felis nulla, ornare id consectetur ut, imperdiet quis lorem. In molestie nulla in tortor consequat ac iaculis enim vehicula. Donec sed velit eu sem sodales viverra nec sed tortor. Vestibulum tempus felis id massa venenatis tempor id ut eros. Nulla eget malesuada arcu. Pellentesque congue tellus non tellus dignissim sodales. Nulla facilisis faucibus sem nec tincidunt. Integer egestas, erat in suscipit pellentesque, lacus lacus pretium felis, quis elementum ipsum nisi in nisl. Pellentesque accumsan facilisis nisi ac facilisis. Donec eget porta urna. Nullam nisi enim, pretium et bibendum nec, sagittis imperdiet risus. Suspendisse leo ipsum, dictum ac pulvinar id, volutpat volutpat nulla. Suspendisse interdum, tortor vel consectetur rutrum, nisl dolor cursus ante, sagittis malesuada lorem leo a ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Sed imperdiet sagittis accumsan. Aenean consectetur, risus at accumsan feugiat, velit metus tincidunt libero, at auctor diam neque id nunc. Nam fringilla dolor sed leo mollis pharetra. Aenean et elementum mi. Maecenas luctus velit a massa condimentum interdum venenatis ligula rutrum. Ut ultricies dolor at est egestas eu interdum ipsum lobortis. Donec orci sapien, feugiat in feugiat quis, laoreet sit amet risus. Duis hendrerit massa a nunc suscipit sit amet imperdiet enim semper. Aliquam ultrices, ligula sed fermentum placerat, nulla nunc aliquet ipsum, ac dapibus elit justo sed arcu. Sed ut orci lorem, at laoreet quam. Nunc vel lectus vel leo varius aliquet id eget mi. Suspendisse potenti. Fusce condimentum adipiscing nisi, et tincidunt odio iaculis non.

Suspendisse eget arcu arcu. Morbi placerat commodo tellus, ut bibendum purus ultricies a. Proin sed risus neque, eu dapibus augue. Aenean justo ipsum, ultrices et semper id, porta et nunc. Mauris suscipit aliquet enim at aliquam. Aenean eget lorem lacus. Mauris ornare varius semper. Integer ante nibh, elementum a feugiat vitae, rutrum nec lorem. Curabitur sed fermentum risus. Aenean at felis nec leo placerat malesuada vitae vitae est. Donec porta lobortis lacus, eget commodo lorem tincidunt accumsan.

Morbi malesuada dignissim venenatis. Sed commodo metus a ligula rutrum a tincidunt sem elementum. Maecenas a leo non elit iaculis accumsan. Duis risus risus, pretium eu fringilla pulvinar, faucibus eu metus. Sed ut eleifend purus. Sed sollicitudin consequat mi, et porttitor lectus tempus non. Suspendisse vel quam metus, ac eleifend turpis. Quisque porttitor sodales lorem quis pulvinar. Donec quis lorem quis sem pellentesque faucibus. Suspendisse viverra consequat nibh vel elementum. Nulla et ipsum vel purus gravida malesuada. Vestibulum consectetur lobortis leo, a congue augue blandit at. Sed justo urna, mattis quis tincidunt at, dapibus ut felis.

Mauris sodales ipsum non elit varius vestibulum. Suspendisse potenti. Nunc iaculis enim a diam pellentesque eleifend. Suspendisse potenti. Ut nec elit ligula. Nam convallis gravida vulputate. Nulla pretium libero eget erat vestibulum bibendum.
</div>

#centre {
	min-height: 100%;
	margin-bottom: 15px;
	}

Le formulaire

Aspect Graphique

(a venir)

Aspect Programmation

Le formulaire se décompose en trois fonctions : Ajouter, Modifier et Supprimer. Commençons pas le code HTML concernant le formulaire d'ajout, puis le code php afin d'effectuer l'action.

Ajouter

Code HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/whtml111/DTD/xhtm111.dtd">
<head>
	<TITLE>Nouvelle équipe</TITLE>
</head>
<BODY>
<span>Enregistrement d'une nouvelle équipe</span>
	<form method="get" action="../site ppe/pages/action/equipes_action_ajouter.php">
		<fieldset>
			<table>
				<tr>
					<td> * Numéro de l'équipe :</td><td><input type="text" name="NumEquipe"></td>
				</tr>
				<tr>
					<td>* Numéro du club :</td><td><input type="text" name="NumClub"></td>
				</tr>
				<tr>
					<td>* Numéro du championnat :</td><td><input type="text" name="NumChampionnat"></td>
				</tr>
				<tr>
					<td> Nom de l'équipe :</td><td><input type="text" name="NomEquipe"></td>
				</tr>
					<td><input type="submit" value="Ajouter"></td>
				</tr>
			</table>
		</fieldset>
	</form>
</body>

Le code PHP

<?php
try
{
	$connexion = new PDO ('mysql:host=localhost;dbname=Bdarbitres', 'root', '');
}
catch(Exception $e)
{
	die('Erreur : '.$e->getMessage());
}
	$resultat=$connexion->prepare('INSERT INTO equipe VALUES (:NUMEQUIPE,:NUMCLUB,:NUMCHAMPIONNAT,:NOMEQUIPE)');
	
	$resultat->execute(array(	
								'NUMEQUIPE'=>$_GET['NumEquipe'],
								'NUMCLUB'=>$_GET['NumClub'],
								'NUMCHAMPIONNAT'=>$_GET['NumChampionnat'],
								'NOMEQUIPE'=>$_GET['NomEquipe']));
	
	header("Location: ../../../index.php?page=equipes");
?>

Modifier

La partie HTML de la partie modifier comporte du code PHP car nous chargeons les informations concernant l'enregistrement a modifier directement dans la zone de texte.

Le code HTML + PHP

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/whtml111/DTD/xhtm111.dtd">
<head>
	<TITLE>Modification Equipe</TITLE>
</head>
<BODY>
<?php
try
{
	$connexion = new PDO ('mysql:host=localhost;dbname=bdarbitres', 'root', '');
}
catch(Exception $e)
{
	die('Erreur : '.$e->getMessage());
}
	$resultat=$connexion->prepare('SELECT * FROM equipe WHERE NUM_EQUIPE =: NumEq');
	
	$resultat->execute(array('NumEq'=>$_GET['code']));
	$ligne=$resultat-> fetch()
?>

<span>Modification d'une équipe</span>
	<form method="get" action="../site ppe/pages/action/equipes_action_modifier.php">
		<fieldset>
			<table>
				<tr>
					<td> * Numéro de l'équipe :</td><td><input type="text" name="NumEquipe" value="<?php echo $ligne['NUM_EQUIPE']; ?>"></td>
				</tr>
				<tr>
					<td>* Numéro du club :</td><td><input type="text" name="NumClub" value="<?php echo $ligne['NUM_CLUB']; ?>"></td>
				</tr>
				<tr>
					<td>* Numéro du championnat :</td><td><input type="text" name="NumChampionnat" value="<?php echo $ligne['NUM_CHAMPIONNAT']; ?>"></td>
				</tr>
				<tr>
					<td>* Nom de l'équipe :</td><td><input type="text" name="NomEquipe" value="<?php echo $ligne['NOM_EQUIPE']; ?>"></td>
				</tr>
				<tr>
					<td><input type="submit" value="Valider"></td>
				</tr>
				<input type="hidden" name="NumEq" value="<?php echo $ligne['NUM_EQUIPE'];?>">
			</table>
		</fieldset>
	</form>
</body>

Le code PHP

<?php
try
{
	$connexion = new PDO ('mysql:host=localhost;dbname=bdarbitres', 'root', '');
}
catch(Exception $e)
{
	die('Erreur : '.$e->getMessage());
}
	$resultat=$connexion->prepare('UPDATE equipes SET NUM_EQUIPE=:NumEquipe,NUM_CLUB=:NumClub,NUM_CHAMPIONNAT=:NumChampionnat,NOM_EQUIPE=:NomEquipe WHERE NUM_EQUIPE= :NumEq');
	
	$resultat->execute(array(	'NumEq'=>$_GET['NumEquipe'],
								'NumEquipe'=>$_GET['NumEquipe'],
								'NumClub'=>$_GET['NumClub'],
								'NumChampionnat'=>$_GET['NumChampionnat'],
								'NomEquipe'=>$_GET['NomEquipe']));
	
	header("Location: ../../index.php?page=equipes");
?>

Supprimer

Pour la partie supprimer nous n'avons pas besoin de code HTML, il est inutile d'afficher les informations que l'on veut supprimer dans ce cas là !

Le code PHP

<?php
try
{
	$connexion = new PDO ('mysql:host=localhost;dbname=bdarbitres', 'root', '');
}
catch(Exception $e)
{
	die('Erreur : '.$e->getMessage());
}
	$resultat=$connexion->prepare('DELETE FROM equipe WHERE NUM_EQUIPE = :numEq');
	
	$resultat->execute(array('numEq'=>$_GET['code']));
	
	header("Location: ../../index.php?page=equipes");
?>

Edition de la liste des arbitres

Celle ci n'a pu être effectuée, l'ayant confiée à Mathieu et n'ayant eu aucune nouvelle de sa part, je n'ai donc pas eu le temps de développer cette mission par moi même.

Guide de l'utilisateur

Cher utilisateur bonjour.

Je vais donc vous expliquer pas à pas comment exploiter ce que vous m'avez demandé de développer de la manière la plus simple possible. Nous allons commencer par l'arrivée sur le site, comment vous connecter sur le site, trouver les formulaires que vous cherchez, puis nous prendrons pour exemple le formulaire destiné à ajouter/modifier/supprimer des équipes afin que vous puissiez l'utiliser facilement.

L'arrivée sur le site

Voici comment le site se présente, lorsque des visiteurs se rendent sur celui ci :

Vous pouvez remarquer que deux boutons uniquement se présente a vous. L'accueil, ainsi que le bouton menant vers la fenêtre de connexion.

La connexion

La fenêtre de connexion est des plus simples qui soient, comme vous pouvez le voir ci dessous :

Il vous suffira donc d'entrer les identifiants qui vous serons communiquer et de valider pour vous connecter sur le site.

Le nouveau menu

Pour cet exemple nous sommes connecté en tant qu'administrateur du site, afin d'avoir accès a absolument toutes les données.

Nous pouvons donc remarquer l'apparition d'un bouton Gestion, d'un bouton Edition et d'un bouton Contact.

Nous allons donc expliquer un par un ces nouveaux boutons et ce qu'il nous permettent de faire.

Le bouton Gestion

Lorsque l'on clique sur le bouton Gestion, nous obtenons un autre menu, présenté différemment de celui du site que l'on peut voir ci dessous :

Le bouton Gestion regroupe en fait tous les formulaires portant sur l'ajout, la modification ou la suppression de quelque chose, que ce soit une équipe, un club, un championnat etc… Si l'on a des informations a ajouter, modifier ou supprimer, c'est sur ce bouton qu'il faudra cliquer.

Chaque bouton présent dans le menu que vous voyez au dessus est lié au formulaire qui lui est propre. Par exemple, si l'on clique sur Equipes, nous verrons donc les différentes équipes existant déjà, avec la posibilité de modifier ou supprimer l'une d'elles mais aussi, en dessous du tableau regroupant celles-ci, un lien permettant d'en rajouter.

Nous allons donc expliquer celui ci en détail, les autres formulaires suivant la même voie, il n'est pas nécessaire de tous les expliquer.

Le bouton Equipes

Voici comment se présente tous les formulaires lorsque l'on clique sur le bouton approprié :

Nous observons donc toutes les équipes existant déjà, avec la possibilité de les modifier et de les supprimer.

Lorsque l'on clique sur modifier, toutes les informations de cette équipe sont chargées avec du code PHP, ce qui fait que nous avons juste a les modifier en temps réel, et de valider pour que la modification soit effectuée. Voici comment se présente la fenêtre lorsque l'on clique sur modifier :

La fenêtre concernant l'ajout d'une équipe est exactement la même, sauf que les zones de texte (les rectangles blancs) sont vides et c'est a vous d'entrer les informations concernant la nouvelle équipe a créer.

Le bouton Edition

Le bouton Edition présent a côté du bouton Gestion concerne tout ce qui est document de sortie (à imprimer). Cela comprends donc la liste des matchs pour un arbitre par exemple. Il n'y a aucun formulaire d'ajout/modification/suppression dans ce sous menu.

Le bouton Contact

Celui ci permet de contacter la ligue de BasketBall de Lorraine pour les visiteurs du site désireux de prendre contact avec elle, et permet aux responsables de contacter n'importe quel arbitre enregistré sur le site.

Conclusion

C'est donc tout ce qu'il fallait savoir concernant l'utilisation de ce site. Lorsque vous avez fini de faire les manipulations que vous vouliez faire sur le site, je vous conseille très fortement de penser a vous déconnecter via le bouton déconnexion, afin d'éviter a tous pirate malveillant d'accéder aux informations conernant votre ligue de BasketBall.

Si vous avez besoin d'autres informations, n'hésitez pas a me contacter via l'adresse suivante : kevin.colle87@gmail.com

En vous souhaitant une bonne utilisation de votre nouveau site.

Cordialement,

COLLE Kévin, développeur du site.

APs et stages du BTS SIO du lycée Suzanne Valadon

Outils pour utilisateurs

Outils du site

Panneau latéral

ACCUEIL

SISR

CONTEXTES

Stages

Epreuves CCF

Harmonisation CCF

Portefeuille de compétences professionnelles (Portfolio)

RESSOURCES

Hackathlon

ICN

Table des matières

MISSION 7

Développement du site

L'index

L'entête

Le menu

Le pied de page

Le centre

Le formulaire

Aspect Graphique

Aspect Programmation

Ajouter

Code HTML

Le code PHP

Modifier

Le code HTML + PHP

Le code PHP

Supprimer

Le code PHP

Edition de la liste des arbitres

Guide de l'utilisateur

L'arrivée sur le site

La connexion

Le nouveau menu

Le bouton Gestion

Le bouton Equipes

Le bouton Edition

Le bouton Contact

Conclusion

Outils de la page