Conception et réalisation d'une application web pour la gestion des stocks.

Conclusion générale

Au bout de notre cursus en licence, nous avons été chargés de concevoir et d'implémenter une application web de gestion des stocks des pièces de la société « Chevrolet-Bejaia». Cette application nous a permis de répondre aux besoins du personnel de la société par la résolution de certaines contraintes qu'il rencontre quotidiennement telles que la lourdeur de la procédure manuelle pour la gestion des stocks induit par le grand nombre des documents émis et reçus qui circulent quotidiennement entre les services de l'entreprise. Tout ceci améliore et facilite considérablement le travail du personnel de la société.

Pour modéliser cette application nous nous sommes basés sur le processus UP (Unied Process) ainsi que sur le formalisme UML (Unied Modeling Language) dont nous avons utilisé trois différents diagrammes : le diagramme de cas d'utilisation, le diagramme de séquence et le diagramme de classe, qui nous ont permis de capturer au mieux certains besoins. Ce projet a fait l'objet d'une expérience intéressante, qui nous a permis d'exploiter et d'améliorer nos compétences dans le domaine de la conception et de la programmation.

Ainsi, au cours de la réalisation de ce projet nous avons acquis une expérience professionnelle avec la société, ainsi dans le domaine des architectures logicielles, nous avons aussi familiarisé avec un large panel de technologie et de Framework. D'autre part, la société a bénéficié d'un programme valide et performant de gestion des stocks.

Bibliographie

34

Webographie

1. https://fr.wikipedia.org/wiki/PHP

2. https://fr.wikipedia.org/wiki/HTML

3. https://fr.wikipedia.org/wiki/JQuery

4. https://fr.wikipedia.org/wiki/Bootstrap

5. https://fr.wikipedia.org/wiki/Ajax

6. https://fr.wikipedia.org/wiki/Structured Query Language

7. https://fr.wikipedia.org/wiki/JavaScript

8. https://fr.wikipedia.org/wiki/CSS

9. http://www.w3schools.com/html/default.asp

10. http://www.w3schools.com/js/default.asp

11. http://www.w3schools.com/jquery/default.asp

12. http://www.w3schools.com/sql/default.asp

13. http://www.w3schools.com/php/default.asp

14. http://www.w3schools.com/bootstrap/default.asp

A

Page d'authentification et page d'accueil

Le formulaire à remplir dans la page d'authentification qui contient nom (User ID) et un mot de passe (Password) d'accès.
		Figure 1
L'écran de verrouillage s'affiche dans les cas suivant : si un utilisateur déjà connecté, sort brusquement du site sans ce déconnecté puis se reconnecte au site, si l'utilisateur reste inactif dans une page du site pendant un moment (15min), si au cours d'utilisation du site l'administrateur bloque l'utilisateur ou son groupe auquel il appartient, si l'utilisateur reste connecté jusqu'à la limite de temps d'une session (2 heures). Pour tous ces cas l'utilisateur est appelé à réintroduire son mot de passe.
		Figure 2

B

Le bouton affiche et masque le menu qui est

en dessous. Le menu est affiché et adapté automatiquement pour chaque utilisateur selon ses autorisations et droit d'accès, où chaque entité du menu renvoi l'utilisateur à la page indiquée.		Figure 3
Les boutons ayant un chiffre indiquant le nombre de messages et notifications qui en cliquant affichent un menu déroulant qui contient les messages ou notifications non lus avec le nom de l'envoyeur, la date de l'évènement et un aperçu sur le message ou évènement.
			Figure 4
L'étiquette nom de l'utilisateur, montre on une petite table qui contient Profile où l'utilisateur peut informations (ex : mot-de-passe), où on peut afficher toutes les verrouiller qui renvoi l'utilisateur de verrouillage et déconnecter la session et aller à la page d'authentification.	qui affiche le cliquant sur elle les boutons : changer ses Notification notifications, a la écran pour fermer
		Figure 5

C

Page de gestion des produits

Un exemple de recherche pour des attributs multiples.
		Figure 6
Un exemple de création d'un bon de commande.
		Figure 7
Un exemple de création d'un bon de livraison.
		Figure 8

D

Figure 11

La suite de l'opération de
création de bon de
livraison qui détermine
l'endroit et la quantité
stockée et la mention du
prix de vente.

Figure 9

Formulaire d'ajout d'un produit.

Figure 10

Page de consultation des bons

Tableau d'affichage des
bons (le même tableau
pour les factures, les
commandes, les
livraisons, les ventes).

Page gestion des familles :

E

Figure 13

Figure 12

La page de gestion des familles contient 2 onglets :

A. Tableau des familles disponible :

1. Affichage de toutes les familles,

2. modification d'une famille en cliquant sur ( ),

3. suppression d'une famille en cliquant sur ( ).

B. L'ajout d'une nouvelle famille :

1. remplir les informations concernant la famille, pour confirmer on clique sur

.

NB : les mêmes caractéristique pour les pages : fournisseur , client

L'affichage des familles version
mobile (photo capturée par un
téléphone).

L'ajout d'une nouvelle famille version
mobile (photo capturée par un
téléphone).

Figure 14

Figure 15

Figure 16

F

La modification d'une famille version
mobile (photo capturée par un
téléphone).

La suppression d'une famille version
mobile (photo capturée par un
téléphone).

1

Figure 17

1. La suppression d'un groupe version mobile (photo capturée par un téléphone).

2. Le blocage d'un groupe version mobile (photo capturée par un téléphone).

G

Page de gestion des ventes

Un exemple pour une recherche selon plusieurs attributs.
		Figure 18
La création d'un bon de vente.
		Figure 19
La création d'une facture

Figure 20

H

I

Quelque code sur les fonctionnalités du site

Code concernant la confirmation et l'impression d'un bon: Le code ci-dessus permet d'envoyer des informations à une page PHP et de lui envoyer les informations .

JavaScript :

dt += '&p_list='+p_list_new+'&date_cmd='+date_cmd; //former le lien POST pour l'envoyé

$.ajax(j // La méthode AJAX de jQuery pour exécuter les pages php à distance type: "POST", // sélectionner le type pour envoyer les informations url: "./../../BONs/bon_cmd_send.php", //la page destinataire data: dt, //sélectionner le lien

cache: false, //désactiver ou active le cache entre les pages

		//fonction qui permet de consulter le résultat reçus par la page destinataire
success: function(result)j

alert("cliquer sur ok et attendre 10 second pour l'impression soit"); var printWindow = window.open('./../../BONs/bon_cmd_show.php?cmd_ref='+result,

'', 'height=600,width=1000'); setTimeout(function()j

printWindow.print();window.open("index.php", "_self");printWindow.close();

				}, 1000);		//10 secondes comme un temps de patience pour afficher la page des bons dans une nouvelle
fenêtre et l'imprimer
			}
	});

PHP :

<?php

include("./config.php");

$cmd_produit_query="INSERT INTO `cmd_produit` (`p_ref`, `cmd_id`, `p_quan`) VALUES";

//création d'une demi requête (1)

$date_cmd = $_POST['date_cmd'];//importation des variables du POST dans les variables de PHP $p_list = $_POST['p_list'];

;//codification d'un bon de

$cmd_id = 'cmdpdate'.date("Y.m.d").'@'.date("h:i:sa").'us59'

commande

$cmd_ecr_query = "INSERT INTO `ecr_cmd_p` (`ID_emp`, `ID_cmd`) VALUES ('5',

'".$cmd_id."')";	//création des requêtes SQL avec des nouvelles variables

$cmd_m_p = "INSERT INTO `cmd_m_p` (`ID_cmd`, `DATE_CMD`,`date_command`) VALUES

('".$cmd_id."', NOW(),'".$date_cmd."')";

$cmd_confirm = "INSERT INTO `cmd_confirm` (`ID_cmd`, `etat`) VALUES ('".$cmd_id."',

'0')";

//envoyer les requête au server

mysqli_query($connection,$cmd_ecr_query); mysqli_query($connection,$cmd_m_p);

mysqli_query($connection,$cmd_confirm);

			//une boucle qui importe toutes les variables du POST et complète la demi
for($x=1;$x<=$p_list;$x++)
requête(1) {
$p_ref = 'p_ref'.$x; $cmd_q = 'cmd_q'.$x;

$p_ref = $_POST[$p_ref];

$cmd_q = $_POST[$cmd_q]; if($x==$p_list)

$cmd_produit_query = $cmd_produit_query." ('".$p_ref."', '".$cmd_id."',

'".$cmd_q."')";

else

$cmd_produit_query = $cmd_produit_query." ('".$p_ref."', '".$cmd_id."',

'".$cmd_q."'),";

}

$result=mysqli_query($connection,$cmd_produit_query);

echo $cmd_id;	//écrire l'id codifier du bon.. (pour l'impression)

mysqli_close($connection);

?>

La Recherche D'un Bon : Des Codes sur la recherche multi attribut d'un bon .

HTML :

<div class="pull-right position"> //div html qui contiens la barre du recherche

<div class="input-append">

<input type="text" id="cmd_text_search" onchange="search_cmd();" onkeydown="search_cmd();" onkeypress="search_cmd();" onkeyup="search_cmd();" placeholder="Rechercher par référence ou par date" class="sr-input"> //la barre du recherche (zone du texte) qui fait l'appel à la fonction search_cmd()lors de chaque changement dans cette zone du texte <button type="button" id="cmd_search" onclick="search_cmd();" class="btn sr-btn"><i class="icon-search"></i></button> // bouton pour la recherche manuelle

</div>

</div>

JavaScript - jQuery :

		//fonction rechercher pour la recherche multi-attributs
function search_cmd(){

var cmd_table_id = [];

var cmd_table_emp = [];

var cmd_table_date = [];

var cmd_found_or_not = [];

var cmd_seen_or_not_seen = [];

var txt = document.getElementById('cmd_text_search').value;

//déclaration des tableaux

// utiliser le DOM pour

J

importer les informations de les balise HTML (le nombres des éléments)

var get_cmd_element_number = parseInt(document.getElementById('get_cmd_element_number').innerHTML) ;
			//utiliser le DOM
et la fonction « parseInt » pour convertir les chaines de caractères (nombres) à des entiers

for(ch = 1 ; ch <= get_cmd_element_number ; ch++)

$('#cmd_tr'+ch).show();//en utilise la fonction show() (jQuery) pour afficher tous les éléments de la

page

K

for(ch = 1 ; ch <= get_cmd_element_number ; ch++){

//boucle qui fait l'importations et la

recherche de tous les informations à partir des éléments HTML on utilisant le DOM

cmd_table_date(ch] = document.getElementById('cmd_date'+ch).innerHTML; cmd_table_emp(ch] = document.getElementById('emp_cmd'+ch).innerHTML; cmd_table_id(ch] = document.getElementById('show_cmd_'+ch).innerHTML; cmd_seen_or_not_seen(ch] =

document.getElementById('cmd_seen_or_not_seen'+ch).innerHTML; if(cmd_seen_or_not_seen(ch].search(txt)>=0 || cmd_table_id(ch].search(txt)>=0 || cmd_table_emp(ch].search(txt)>=0 ||

cmd_table_date(ch].search(txt)>=0){				//avec la existent marquer l'indice sinon maquer -1
cmd_found_or_not(ch] = ch;
}else{ cmd_found_or_not(ch] = -1;
}
}

for(ch = 1 ; ch <= get_cmd_element_number ; ch++){//cacher tous les éléments (balise HTML) qui ne correspondant pas avec la recherche et laisser les autres.

if(cmd_found_or_not(ch]==-1){ $('#cmd_tr'+ch).hide();

}

}

}

L'ajout d'un client : Des codes permet d'ajouter un nouveau client HTML :

<section class="panel tasks-widget">//section qui contient les zones des textes pour la saisie

<header class="panel-heading">Ajouter un client</header>//Titre

<div class="panel-body">//Balise mère :

<div class="form-group ">

<label for="nom" class="control-label">Nom & Prenom de client (entreprise) :

</label>

<div class="col-lg-12">

<input required class="form-control" id="nom" name="nom" type="text" />//champ

du text

</div> </div>

<div class="form-group ">

<label for="nom" class="control-label">AI^° : </label>

<div class="col-lg-12">

<input required class="form-control" id="AI" name="AI" type="text" />

</div>

</div>

<div class=" add-task-row">

<input id="add_client" type="button" class="btn btn-success btn-sm pull-left"

value="Add New Tasks" ></input> //bouton qui envoyer les informations à la page PHP </div>

</section>

L

JavaScript - jQuery - AJAX :

						//La fonction qui renvoie les coordonnées de l'utilisateur à envoyer
$("#add_client").click(function()j
		//variable boolienne teste si le les informations respecte les paramètres de la base de donnée
hello = true;
					//fonction qui teste le contenue des informations à envoyer
test_input_char_length("nom",512);

test_input_char_length("adrs",256);

test_input_char_length("tel_num",20);

test_input_char_length("RC",256);

test_input_char_length("MF",256);

test_input_char_length("NIS",256);

test_input_char_length("AI",256);

if(hello==true)j//si le informations sont justes

var data = 'nom='+ $("#nom").val()+'&adrs='+ $("#adrs").val()+'&tel_num='+

$("#tel_num").val()+'&MF='+ $("#MF").val()+'&NIS='+ $("#NIS").val()+'&AI='+

$("#AI").val()+'&RC='+ $("#RC").val();					//former le lien post à envoyer à la page d'ajout
	}
$.ajax(j

.");

type: "POST",

url: "./add/add.php",
	//lien de la page d'ajout

data: data,

cache: false,

success: function(result)j

if(result.length>10){//tester le résultat du page d'ajout si le client existe déjà

alert("Le Client "+$("#nom").val()+" a été ajouté avec succès

//message qui confirme l'ajout

$(""+result).insertAfter("#first_element");		//L'ajout d'un élément HTML qui contient les
informations reçus de la page d'ajout

if(document.getElementById("nothing_else") != null)j document.getElementById("nothing_else").parentNode.removeChild(docu

ment.getElementById("nothing_else"));		// tester s'il existe déjà des élément HTML des
clients sur la page.

}

document.getElementById("adding").setAttribute("class","tab-pane");//orienter l'utilisateur à l'onglet d'affichage des clients

document.getElementsByClassName("nav nav-

tabs")[0].getElementsByTagName("li")[1].setAttribute("class","");

document.getElementById("rules").setAttribute("class","tab-pane

active");

document.getElementsByClassName("nav nav-

tabs")[0].getElementsByTagName("li")[0].setAttribute("class","active");

document.getElementById("nom").value= "";

}elsej alert ('Le Client : '+$("#nom").val()+' existe déjà'
	);//si le client existe déjà

afficher un message}

}

});

}

});

M

CSS :

.slimane {

//class CSS pour signaler les champs du text qui contient des fausses informations

border-top-color: rgb(226, 0, 0); border-top-style: solid; border-top-width: 1px; border-right-color: rgb(226, 0, 0); border-right-style: solid; border-right-width: 1px; border-bottom-color: rgb(226, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(226, 0, 0); border-left-style: solid; border-left-width: 1px;

}

JavaScript - jQuery :

function test_input_char_length(a,n){//fonction qui teste les informations du client puis si les informations sont juste retourner vrai si non signaler les champ du texte qui contient des fausses informations et retourner faux

if($("#"+a).val()== "" || $("#"+a).val().search("'")>=0 ||

$("#"+a).val().search('"')>=0 || $("#"+a).val().search(">")>=0 ||

$("#"+a).val().search("<")>=0 || $("#"+a).val().search("}")>=0 ||

$("#"+a).val().search("{")>=0 || $("#"+a).val().length > n ){

$("#"+a).attr("class","form-control slimane"); hello=false;

//alert("true");

}else{

$("#"+a).attr("class","form-control slimane_m");

//alert("false");

}

}

PHP :

<?php //page d'ajout

include("./../config.php");//importer les paramètres de la connexion

$nom = $_POST['nom'];//importer les variables post à des variables PHP

$adrs = $_POST['adrs'];$tel_num = $_POST['tel_num'];$MF = $_POST['MF'];$NIS =

$_POST['NIS'];$AI = $_POST['AI'];$RC = $_POST['RC'];

$query_test_exist="select * from `client` where tel_c ='".$tel_num."';";//sélectionner un

client suite à un numéro de téléphone saisi

$result_test_exist=mysqli_query($connection,$query_test_exist);

if(mysqli_num_rows($result_test_exist)<=0){	//si aucun client à les même coordonner avec les

informations importés

$query="INSERT INTO `client` (`nom_c`, `adr_c`, `tel_c`, `RC`, `MF`, `NIS`, `AI`) VALUES ( '".$nom."', '".$adrs."', '".$tel_num."', '".$RC."', '".$MF."', '".$NIS."', '".$AI."');";//requête d'ajout

$result=mysqli_query($connection,$query);

$query_get_id ="select * from `client` where tel_c ='".$tel_num."';";

$result_id = mysqli_fetch_row(mysqli_query($connection,$query_get_id));

$id = $result_id[0];//récupération de l'id de client

echo

'<tr id="'.$id.'"> //écrire le code html avec les nouvelles informations importés

<td ><strong>' //HTML CODE .'\',\''.$nom.'\')" data-toggle="modal"

href="#confirm_form" class="btn btn-danger btn-xs btnmenutable"

id="delete_row_'.$id.'"> <i class="icon-trash "></i></button>

</td></tr>';

}else{echo 'exist';} mysqli_close($connection);?>

I. Etat de sortie

Facture de vente

N

O

Bon de vente

P

Bon de livraison

Facture de commande

Q