[PHP] Serializer un objet JSON dans PostGres sur INSERT puis deserialiser sur SELECT

php_1_

Intro

Revient constamment ;
On stocke carrément des objets ou même des arrays JSON dans des BDD relationelles ! A la punk ! HI HI

Lire la suite

Publicités

Exercice 15 : Uploader 1 fichier avec JQuery Upload File, puis parser avec PAPAPARSE

Introduction

Voici comment importer un fichier CSV dans une application, puis le parser( décomposer) en un tableau javascript.
J’utilise pour ceci 2 librairies JQuery/Javascript :

1. http://hayageek.com/docs/jquery-upload-file.php

et

2. http://papaparse.com/

exo15

Tester en ligne :
http://nicolash.org/exercice15/

Le Code :

index.html


<meta http-equiv="content-type" content="text/html;charset=utf8" />

							<!-- 		DEBUT DU CHARGEMENT DES LIBRAIRIES -->
<!--	APPEL LIB JQUERY -->
	<script	 type="text/javascript" src="librairies/jquery.js"></script>

<!--	APPEL LIB JQUERY UI ( look sympa du programme) -->
<!--	<link href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" /> -->
	<script type="text/javascript" src="librairies/jquery-ui.js"></script>
	<link href="librairies/jquery-ui.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="librairies/jquery.dialogextend.js"></script>

<!-- 	CHARGEMENT LIB UPLOADFILE -->
		<link rel="stylesheet" href="librairies/jquery-upload-file-master/css/uploadfile.min.css" type="text/css"/>
	<script src="librairies/jquery-upload-file-master/js/jquery.uploadfile.min.js" type="text/javascript" charset="utf-8"></script>

<!--	FONCTIONS AJAX DU PROGRAMME -->
	<script type="text/javascript" src="fonctionsMachine.js"></script>

<!--	CSS DU PROGRAMME -->
	<link rel="stylesheet" type="text/css" href="style.css" />

<!-- 	PAPAPARSE CSV TO JSON -->
	<script src="librairies/papaparse.js" type="text/javascript" ></script>
<!-- 		FIN DU CHARGEMENT DES LIBRAIRIES -->

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Exercice 15</title>
	<body BGCOLOR=white>
	<img src="COMMANDIS.jpg" height=30px width=150px /> 

<!-- PAGE PRINCIPALE -->
<div id="page" >
<div id="info" >Les données vont apparaitre ici</div>

<!-- ICONES -->
<h3 id="clickMe2" id="draggable" class="icone" style="width:130px; background:tan; border:4px outset black;border-radius:5px;left: 400px; top:200px ">
<img src="photoscommandis/exercice.jpg" height=100px width=100px />Parser un fichier CSV</h3>

<!-- FENETRES -->
<div id="dialog2" title="Lancer 1 lecture jquery ajax">
<div id="fileuploader">Télécharger votre fichier Csv</div>
<div id="eventsmessage">debug</div>

<!--zone du petit gif animé AJAX-->
<img id="charge" src="chargeur.gif" width=50px  />

<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<!-- <button class="submit" type="submit" id="tbutton" >Requête Jquery Ajax</button> -->
</div> 

<!-- FIN DE PAGE -->
</body>
</html>

fonctionMachines.js


// JavaScript Document

// --------------------------------------------------- RECEPTION DES REQUETES AJAX ------------------------------------------------------

/* Requete En lecture Ajax JQUERY*/
 $(function() {
     $("#tbutton").click(function(){
	//gestion du bouton et du gif animé chargeur Ajax
	document.getElementById("tbutton").disabled= true;
	document.getElementById("charge").style.visibility="visible";

	$.ajax({
            url: 'afficher.php',
            type: "GET",
			 data: "",
				success: function(data) {
				/* 	//code to execute */
				document.getElementById("info").innerHTML=data;
				//affiche la zone info
				document.getElementById("info").style.visibility="visible";
				alert('Requete ajax Jquery ok');
				/* 	Fait disparaitre l'image du chargeur Ajax et réactive le button ! */
				document.getElementById("tbutton").disabled= false;
				document.getElementById("charge").style.visibility="hidden";
				}
            });	

		});
 });
/*
-----------------------------------------------RECEPTION DE FICHIER ET PARSING----------------------  */

 /*Téléchargement du Fichier CSV */
 /* http://hayageek.com/docs/jquery-upload-file.php */

$(document).ready(function()
{
	$("#fileuploader").uploadFile({
	url:"upload.php",
	fileName:"myfile",
	allowedTypes:"csv",
	/* 	Traduction */
	dragDropStr: "<span><b>Faites glisser et deposez les fichiers</b></span>",
	abortStr:"abandonner",
	cancelStr:"resilier",
	doneStr:"fait",
	multiDragErrorStr: "Plusieurs Drag & Drop de fichiers ne sont pas autorises.",
	extErrorStr:"n'est pas autorisé. Extensions autorisees:",
	sizeErrorStr:"n'est pas autorisé. Admis taille max:",
	uploadErrorStr:"Upload n'est pas autorise",
	extErrorStr:"n'est pas autorise. Extensions autorisees:",

onSubmit:function(files)
{
	$("#eventsmessage").html($("#eventsmessage").html()+"<br/>Soumission:"+JSON.stringify(files));
},
onSuccess:function(files,data,xhr)
{
	$("#eventsmessage").html($("#eventsmessage").html()+"<br/>Succes pour : "+JSON.stringify(data));
	var nomFichier= JSON.stringify(files);

	/* PARSING CSV->JSON AVEC PAPAPARSE */
	var nomFichier= nomFichier.replace('"','');
	var nomFichier= nomFichier.replace('"','');
	var nomFichier= nomFichier.replace('[','');
	var nomFichier= nomFichier.replace(']','');
	var nomFichier= "/exercice15/uploads/"+nomFichier;
	alert(nomFichier);
	Papa.parse(nomFichier, {
	download: true,
	complete: function(results) {
		console.log("Le fichier CSV a ete parse en un tableau javascript JSON", results);
		var tableau = results.data;
/* 		document.write(results.data); */
		$("#eventsmessage").html($("#eventsmessage").html()+"<br/>Voici les donnees parsees: "+results.data);
		}
});

},
afterUploadAll:function(files)
{
	$("#eventsmessage").html($("#eventsmessage").html()+"<br/>Tous les fichiers sont uploades");

},
onError: function(files,status,errMsg)
{
	$("#eventsmessage").html($("#eventsmessage").html()+"<br/>Erreur pour: "+JSON.stringify(files));
}
});
	});

/*  ----------------------------------------GENERATION DE TABLES ------------------------------------------------------------ */

/*   ---------------------------------PLUGS IN DE FORMULAIRES --------------------------------------------------------------- */

/*  --------------------------------------FENETRAGE et ICONES-----------------------------------------------------------------------------  */

  // Ouvre les fenetres sur clic d'icone
$(function() {
$('#clickMe2').click(function(event) {
   /*  var mytext = $('#myText').val(); */

/* ligne dorigine tres inteeressante qui affiche une var supplemenaire dans la page (mytext)
   $('<div id="dialog2">'+mytext+'</div>').appendTo('body');
 */

  $('<div id="dialog2"></div>').appendTo('body');
	event.preventDefault();

		 var dialog2Opts = {width:600, height:600, maxWidth: 800, maxHeight: 800, minWidth: 300, minHeight: 200,left: 100, top:10 ,autoOpen: true};
		 $( "#dialog2" ).dialog(dialog2Opts).dialogExtend({
        "closable" : true,
        "maximizable" : true,
        "minimizable" : true,
        "collapsable" : true,
        "dblclick" : "collapse",

        "minimizeLocation" : "right",

      });
    }); //close click
});

$(function() {
var dialogOpts = {width:400, height:400, maxWidth: 800, maxHeight: 800, minWidth: 300, minHeight: 200,left: 100, top:10 , autoOpen: false} ;
$( "#dialog2" ).dialog(dialogOpts).dialogExtend({
        "closable" : true,
        "maximizable" : true,
        "minimizable" : true,
        "collapsable" : true,
        "dblclick" : "collapse",

        "minimizeLocation" : "right",

      });
  });

   // Rends draggable les icones avec JQUERY
$(function() {
$( "#clickMe2" ).draggable();
});

essai.csv

paul;12345
pierre;45121
jacques ;467874

upload.php


<?php
$output_dir = "uploads/";
if(isset($_FILES["myfile"]))
{
	$ret = array();

//	This is for custom errors;
/*	$custom_error= array();
	$custom_error['jquery-upload-file-error']="File already exists";
	echo json_encode($custom_error);
	die();
*/
	$error =$_FILES["myfile"]["error"];
	//You need to handle  both cases
	//If Any browser does not support serializing of multiple files using FormData()
	if(!is_array($_FILES["myfile"]["name"])) //single file
	{
 	 	$fileName = $_FILES["myfile"]["name"];
 		move_uploaded_file($_FILES["myfile"]["tmp_name"],$output_dir.$fileName);
    	$ret[]= $fileName;
	}
	else  //Multiple files, file[]
	{
	  $fileCount = count($_FILES["myfile"]["name"]);
	  for($i=0; $i < $fileCount; $i++)
	  {
	  	$fileName = $_FILES["myfile"]["name"][$i];
		move_uploaded_file($_FILES["myfile"]["tmp_name"][$i],$output_dir.$fileName);
	  	$ret[]= $fileName;
	  }

	}
    echo json_encode($ret);
 }
 ?>

Truc 1 : Transférer une variable PHP dans une variable Javascript.

Introduction :

il faut déjà savoir transférer une variable Php dans une variable Javascript


 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script  type="text/javascript" src="jquery.min.js"></script>
  </head>
 

<?php
// Créer la variable PHP
$message = "Message";
?>

<script type="text/javascript">
<!-- Récupérer la variable PHP dans une Var Javascript
	var msg='<?PHP echo $message;?>';
	document.write(msg);
</script>

Code pour afficher les fichiers présents dans un répertoire dans un select

Introduction

Code pour afficher les fichiers présents dans un répertoire. tri préliminaire du tableau.

Explication : Le résultat de la fonction readir est récupérée dans un tableau, le tableau est trié, puis une autre fonction crée le select et l’alimente avec les données du tableau.

La variable peut ainsi être récupérée, on peut ainsi continuer le programme et traiter des fichiers au choix dans un navigateur.

Code

<HTML>
    <HEAD>
        <BODY BGCOLOR="#e7dfce">
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <FONT size="1pt" face="arial" >
</HEAD>

<BODY>
<center> <h1>Afficher dans un Select les liens vers un répertoire.</h1> </center>
 
<form action="retrouveFiltresTries.php" method="post" >
 
<?php
    // Ouverture du dossier, et mise des noms des fichiers dans un tableau puis tri avec la fonction sort()
    $folder = "/srv/www/";
    $dossier = opendir($folder);

    while ($Fichier = readdir($dossier)){
        $tableau[]=$Fichier;
        sort($tableau);
    };
    closedir($dossier);
    get_nom($tableau);

?>

<form action="retrouveFiltres.php" method="post" >
    <input type ="submit" name='Fichier' value="Fichier" />
</form>

<br></br>

<?php

    function get_nom($tableau){
        // Création du select, alimenté par les données du tableau.
        ?><FORM><SELECT name="choix" <?

        foreach ($tableau as $key => $val){
            set_time_limit(300);
            ?><option value="<? echo $val ; ?>"><? echo $val ; ?></option>";<?
        };

        closedir($dossier);
        echo "</SELECT>";
    };

    if(isset($_POST['Fichier'])){
        echo $_POST['choix'];
    };