Arrow Table de matières
2746088

CHAPITRE III : LA CREATION D’UN SITE WEB

3.1 OUTILS ET LANGAGES DE PROGRAMMATION UTILISES

Pour parvenir à la réalisation de notre présent site web, nous avons utilisé de nombreux langages de programmation et d’autres outils tel que :

  1. Le langage SQL : SQL veut dire Structured Query Language. C’est un langage de structuration des requêtes dont nous nous sommes servis dans la manipulation des données de la base de données MySQL.
  2. Le langage HTML (HyperText Markup Language) : langage de programmation permettant à la manipulation de page web.
  3. Le langage PHP : le PHP est unlangage de programmation libre principalement utilisé pour produire des pages Web dynamiques via un serveur HTTP, mais pouvant également fonctionner comme n’importe quel langage interprété de façon locale. PHP est un langage impératif orienté objet à même titre que  C++.
  4. Le bootstrap : celui-ci est une collection d’outils utiles à la création de sites et d’applications web. en soit c’est un ensemble contenant des codes html et css. c’est l’un de projets les plus populaires sur la plateforme de gestion de développement GitHub.
  5. Le JavaScript : nous avons utilisé ce langage dans la présentation des alertes aux utilisateurs lors de l’exécution d’une opération quelconque.
  6. Le CSS(Cascading Style Sheet) du français : feuilles de style en cascade .il nous a permis de décrire la présentation des documents html et xtml.

Nous avons aussi fait usage du  MySQL et Apache  associé à un serveur (WampServer) fonctionnant sous le système d’exploitation Windows.

  1. Apache : C’est ce serveur qui exécute les instructions PHP à la demande du navigateur pour produire des pages HTML.
  2. MySQL : Il est le système de gestion de bases de données que nous avons utilisé. Nous nous sommes servis de ce dernier pour le stockage des données sous forme des tables pour faciliter leur manipulation par le langage SQL.

Pour éditer les codes sources  de notre application, nous avons fait recours à l’éditeur de codes  « Notepad++ » qui est un éditeur universel pour la plupart de langages de programmation.

3.2 SAUVEGARDE  DE DONNEES ENREGISTREES PAR L’APPLICATION

Pour l’enregistrement des données, nous avons utilisé un SGBD appelé MySQL qui nous a permis de créer des tables et gérer certaines contraintes relationnelles. Selon notre diagramme de classe, nous avons utilisé des tables qui sont ainsi structurées :

La table agent

Figure 6 : table agent

L’agent est en même temps l’administrateur du site parce que les mêmes fonctions ne demande pas que l’on engage une personne dans le département ou attribuer les fonctions de la gestion du site à quelqu’un d’autre

La table dep_trav

Figure 7: table dep_trav

Lorsqu’un étudiant dépose son travail, ce dernier s’enregistre dans cette entité.

La table étudiant

Figure 8: table étudiant

Pour ajouter les nouveaux étudiants dans le site.

La table Directeur

Figure 9: table direction

Disponible en fin que les directeurs des travaux puissent  être aussi enregistrés.

La table sujet

Figure 10: table sujet

Réservé pour l’ajout des nouveaux sujets.

La table direction

Figure 11: Table direction

Cette table est allouée pour sauvegarder les informations sur la direction et codirection des travaux d’étudiants.

3.3 MODELE RELATIONNEL

-- phpMyAdmin SQL Dump

-- version 4.1.14

-- http://www.phpmyadmin.net

--

-- Client : 127.0.0.1

-- Généré le : Mer 07 Septembre 2016 à 15:22

-- Version du serveur : 5.6.17

-- Version de PHP : 5.5.12

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";

SET time_zone = "+00:00";

--

-- Base de données : `gtd`

--

-- --------------------------------------------------------

--

-- Structure de la table `agent`

--

CREATE TABLE IF NOT EXISTS `agent` (

 `id_agent` int(11) NOT NULL AUTO_INCREMENT,

`matricu` varchar(25) NOT NULL,

`nom` varchar(25) NOT NULL,

`postnom` varchar(25) NOT NULL,

`prenom` varchar(25) NOT NULL,

`sex` varchar(5) NOT NULL,

`et_civ` varchar(25) NOT NULL,

`dat_naiss` date NOT NULL,

`grade` varchar(25) NOT NULL,

`login` varchar(100) NOT NULL,

`pass` varchar(100) NOT NULL,

PRIMARY KEY (`id_agent`)

)

-- --------------------------------------------------------

--

-- Structure de la table `dep_trav`

--

CREATE TABLE IF NOT EXISTS `dep_trav` (

`id_ dep` int(11) NOT NULL AUTO_INCREMENT,

`id_etudiant` int(11) NOT NULL,

`ann_edit` year(4) NOT NULL,

`date_dep` date NOT NULL,

`type_tr` varchar(25) NOT NULL,

`titre` varchar(100) NOT NULL,

`directeur` varchar(25) NOT NULL,

`co_directeur` varchar(25) NOT NULL,

`fichier_choisi` text NOT NULL,

PRIMARY KEY (`id_ dep`)

)

-- --------------------------------------------------------

--

-- Structure de la table `directeur`

--

CREATE TABLE IF NOT EXISTS `directeur` (

`id_dircteur` int(11) NOT NULL AUTO_INCREMENT,

`nom` varchar(25) NOT NULL,

`postnom` varchar(25) NOT NULL,

`prenom` varchar(25) NOT NULL,

`sexe` varchar(5) NOT NULL,

`grade` varchar(25) NOT NULL,

`niv_etud` varchar(25) NOT NULL,

`login` varchar(100) NOT NULL,

`pass` varchar(100) NOT NULL,

PRIMARY KEY (`id_dircteur`)

)

-- --------------------------------------------------------

--

-- Structure de la table `direction`

--

CREATE TABLE IF NOT EXISTS `direction` (

`id_direction` int(11) NOT NULL AUTO_INCREMENT,

`id_etud` int(11) DEFAULT NULL,

`id_trav` int(11) NOT NULL,

`id_codir` int(11) DEFAULT NULL,

`id_dir` int(11) DEFAULT NULL,

`obs` text,

PRIMARY KEY (`id_direction`)

)

-- --------------------------------------------------------

--

-- Structure de la table `etudiant`

--

CREATE TABLE IF NOT EXISTS `etudiant` (

`id_etudiant` int(11) NOT NULL AUTO_INCREMENT,

`matricule` varchar(25) NOT NULL,

`nom` varchar(25) NOT NULL,

`postnom` varchar(25) NOT NULL,

`prenom` varchar(25) NOT NULL,

`dat_nais` date NOT NULL,

`sex` varchar(1) NOT NULL,

`et_civ` varchar(25) NOT NULL,

`grade` varchar(25) NOT NULL,

`departement` varchar(25) NOT NULL,

`promotion` varchar(25) NOT NULL,

`login` varchar(100) NOT NULL,

`pass` varchar(100) NOT NULL,

PRIMARY KEY (`id_etudiant`)

)

-- --------------------------------------------------------

--

-- Structure de la table `sujet`

--

CREATE TABLE IF NOT EXISTS `sujet` (

`id_sujet` int(11) NOT NULL AUTO_INCREMENT,

`id_etudiant` int(11) NOT NULL,

`ann_acd` varchar(15) NOT NULL,

`date` date NOT NULL,

`sujet` text NOT NULL,

`id_dir` int(11) NOT NULL,

`id_codir` int(11) NOT NULL,

PRIMARY KEY (`id_sujet`)

)

3.4 GUIDE D’UTILISATION

ACUEIL

Ce module vous permet de comprendre la succession logique de notre application, pour la gestion

Cette page vous permet d’accéder à notre application et manipuler les options. Cliquer sur le bouton  pour accéder  à l’interface de connexion et inscription.

PAGE DE CONNECTION

Cette page est la porte d’entrer de notre application pour les utilisateurs, ne peut se connecter que celui qui s’est inscrit, nous avons fait de tel sorte que seuls les étudiants et directeurs preuve s’inscrire d’eux même pour les agents seul l’agent ayant le droit d’administration peut créer un nouvel agent.

Pour s’inscrire cliquer sur et voici la suite :

INSCRIPTION

Dans cet espace vous pouvez créer votre profile pour vous inscrire dans le site, cette espace est réservé uniquement à l’étudiant et aux directeur pour créer leurs profils

Pour le profil de l’étudiant clique sur  voici la suite :

Remplissez les données nécessaires pour l’inscription d’un utilisateur et en suite cliquer sur le  le message suivant apparait  pour vous confirmer que les données ont été enregistré avec succès.

CONNECTION

Vous devez déterminer dans les champs correspondant à l’étiquette« qui êtes-vous ? », votre titre (vous pouvez être soit Administrateur ou Directeur ou encore Etudiant)pour vous connecter

Compléter le login et le mot de passe pour vous connecter en suit, la page de l’agent pris au même titre que l’agent  ou étudiant ou encore  directeur.

LES COMPTE DES UTILISATEURS

AGENT QUI EST AUSSI L’ADMINISTRATEUR

PANEAU D’AFFICHAGE

Dans ce panneau il y a des listes affichées pour les agents, les étudiants, les sujets déposés par les étudiants et leurs travaux.

AJOUT

Ici on ajoute les informations sur l’agent pour un nouvel agent. Pour y arriver cliquez sur  puis sur  le formulaire suivant apparait :

Remplissez les données dans les champs et plus bas cliquez sur le bouton  .

DIRECTION

Concerna la direction des travaux des étudiants dedans on a un espace où il sera question de faire l’affectation de directeurs au étudiants par rapport à leurs sujets. Ceci est effectué par le conseil des départements. Cela étant on clique sur  en suite sur  voici l’espace qui s’affiche :

Il suffit de sélectionner le nom d’un étudiant

En suite sur  si l’étudiant a déjà déposé son sujet, immédiatement les informations de ce denier s’afficheront comme suit :

Il est possibilité ici de changer toutes les informations proposé par l’étudiant. Si tout est fait correctement, cliquez sur le bouton.

DEPOS DES TRAVAUX

Si les étudiants terminent à travailler ils peuvent effectuer le dépose de leurs travaux et le département peut le voir dans l’espace :

DIRECTEUR

Le directeur pour se connecter doit s’assurer que son compte a été créé et par son login et mot de passe il peut se connecter dans le site. Par la même procédure que le précèdent. Apres connexion voici l’espace du directeur :

Dans le panneau d’affichage, nous avons visualisé les sujets déposés par les étudiants et leurs propositions en ce qui est de la direction de leurs travaux.

Apres ça il y a les affichages de l’avis du département pour la direction dans la liste suivante :

TRAVEAU DEPOSES

Nous avons laissé cette espace pour permettre au directeur de voir si son dirigé a déjà déposé.

Pour y arrivé cliquer sur  et l’affichage se fait comme pour l’agent.

ETUDIANT

Il se connecte comme tous les autres agents.

Son interface, s’affiche comme suit :

Ceci est l’interface de l’étudiant, il peut maintenant effectuer les dépôts de son sujet et de son travail.

  • Pour déposer le sujet : cliquer sur puis  le formulaire suivant apparait :

Si tous les champs sont rempli cliquer sur.

  • Pour déposer le travail il suffit de cliquer sur et sur le suivant formulaire vous remplissez les champs

Apres avoir rempli tous les champs l’étudiant clique sur Browser pour téléviser votre travail.

Chercher l’emplacement du fichier et cliquer sur le nom du fichier en fin ouvrir

puis cliquer sur enregistrer et fichier sera téléviser.

A ce moment le département peut visualiser le fichier.

Et en fin pour se déconnecter :

Clique sur Déconnexion.

Partager ce travail sur :