Utilisation de NetBeans pour le développement PHP sur un serveur distant

Développement PHP avec NetBeans et github sur un serveur distant

Installation

1. Télécharger l'archive : http://netbeans.org/downloads/ (j'ai choisi le bundle PHP)
2. Installer

Créer le repository sur github

aller sur github.com, créer le repository, on obtient une url pour le repository : https://github.com/chromero/test.git

En ligne de commande

cd /tmp
mkdir test
cd test
touch README.md
git init
git add README.md
git commit -m "first commit"
git remote add origin https://github.com/chromero/test.git
git push -u origin master

team -> git -> clone

Cliquer sur Manage...

`

Créer un fichier php

Cliquer sur Run

 NetBeans uploade le(s) fichier(s) sur le serveur et ouvre le navigateur

Une fois les tests effectués, vous pouvez valider vos modifications sur git:
git->commit, puis git->remote->Push

Réaliser un controle jQueryUI - Part 8

Gestion du tri sur une colonne

Code source

• options : ajout de 2 propriétés 
• sort : contient la colonne de tri courante
• columns : liste des colonnes
• _setOption : 
• appel de _setSort en cas de modification du tri
• _createHeader :
• Ajout des méthodes de gestion du tri
• _getValues : 
• on ajoute le tri en paramètres
• _setSort :
• rechargement des données et feedback sur les entêtes de colonnes.
• DataProvider::getData()
• passage du tri en paramètre
• mon provider rajoute de la pub, j'ai donc modifié la méthode pour qu'elle supprime la pub avant d'évaluer le JSON

Vous pouvez retrouver le code sur github : git://github.com/chromero/jquery.table.git

Sécurité

Tous les posts

Gestion des filtres

Réaliser un controle jQueryUI - Part 7

Un peu de sécurité

index.php
On génère un token on le stocke dans la session et on le déclare ne variable javascript

jquery.table.js
on modifie le DataProvider pour inclure le token dans l'appel ajax


test.js

test.php
On vérifie le token avant d'envoyer les résultats

Références

http://www.journaldunet.com/developpeur/tutoriel/dht/070625-ajax-in-securite.shtml

http://www.cgisecurity.com/csrf-faq.html

http://shiflett.org/articles/cross-site-request-forgeries

Récupération de données en PHP

Tous les posts

Tri

Réaliser un controle jQueryUI - Part 6

Un peu de php

ATTENTION :

certaines lignes de code peuvent heurter la sensibilité de certains lecteurs : En aucun cas ce code doit être utilisé en Prod tel quel !

Pour l'instant, le code php permet de récupérer 3 types d'information :

• le nom des colonnes
• le nombre d'enregistrements
• les records correspondants à la limite en paramètre

La base de données est la liste des villes françaises trouvée http://www.aito.fr/maps_ville.sql

On modifie le DataProvider

• Ajout d'une propriété baseurl
• ajout de 3 méthodes
• getColumns : renvoie la liste des méthodes
• getCount : nombre de records
• getData : renvoie les données 

Ces 3 méthodes vont mettre à jour des options dans le plugin jQuery

Style alterné et Destroy

Tous les posts

Sécutité

Realiser un contrôle jQueryUI - Part 5

Un peu de style

On rajoute les classes des lignes paires et impaires (oddclass et evenclass)

Dans getValues(), on ajoute la classe correspondante aux lignes paires et impaires

support de destroy

on ajoute la possibilité de fermer le widget

• dans la méthode _create, on sauvegarde le contenu (dans data('old_content'))
• dans la méthode destroy, on rétablit le code sauvegardé

exemple d'utilisation:

• $('#table').table('destroy');

Code source

Références :

http://www.packtpub.com/article/jquery-table-manipulation-part1

Gestion de la navigation

Tous les posts

Récupération des données en PHP

Realiser un controle jQueryUI - Part 4

Navigation :

Code complet

• options
• on rajoute  les options page et page_size (page courante et nombre de lignes par page)
• page_count contient le nombre de pages (initialisé à 1, puis calculé)
• _create
• Lors de la création des contrôles de navigation, on leur rajoute une classe <name>_controls
• On leur associe la méthode du nom de leur id
• first, next, previous et last
• on crée 4 nouvelles méthodes qui seront appelées lors du click sur les boutons
• on rajoutera des méthodes similaires lors de l'ajout de nouveaux boutons
• getValues
• modification pour prendre en compte la page courante

DataProvider

prendre en compte la pagination

Récupération des données en PHP

Tous les posts

Style alterné et Destroy

Réaliser un controle jQueryUI - Part 3

Avoir un moyen de récupérer les données

c'est certe un peu simpliste, mais pour l'instant, on s'en contente.

Ajouter les méthodes _createheader et getValues

modifier l'appel :

$(document).ready(function() {

    var provider = new DataProvider();

    $('#test').html('test1');

    $('#table').table({

name : 'TestTable',

provider : provider

    });

    $('#test').html('test2');

});

code complet :

Barre de navigation et controles

Tous les posts

Gestion de la navigation

Réaliser un controle jQueryUI - Part 2

Etape 2

création de la barre de navigation et des contrôles :

Ajout de la configuration par défaut dans les options :

    default_controls : [ {

id : 'previous',

icon : 'ui-icon-arrowthick-1-w'

    }, {

id : 'next',

icon : 'ui-icon-arrowthick-1-e'

    } ]

modification de la méthode _init :

_init : function() {

    // création de la barre de navigation

    var chaine = "<ul id='" + this.options.name

    + "_navBar' style='list-style:none;'>";

    for ( var i = 0; i < this.options.default_controls.length; i++) {

chaine += this

._getControl(

this.options.default_controls[i]['id'],

this.options.default_controls[i]['icon']);

    }

    chaine += "</ul><div style='clear:both;'>&nbsp;</div>";

    this.element.append(chaine);

},

_setOption : function(key, value) {

    this.options[key] = value;

},

_getControl : function(id, icon) {

    var chaine = "<li class='ui-state-default ui-corner-all' id='"

    + this.options.name

    + '_'

    + id

    + "' style='float:left;margin-right:2px;text-decoration: none;'>"

    + "<span class='ui-widget ui-corner-all ui-icon ui-button "

    + icon

    + "' title='"

    + id

    + "'></span></li>";

    return chaine;

}

Plus tard, il nous faudra rajouter des contrôles (début, fin,...) et assigner une fonction à chacun d'eux

Code source complet :

(function($) {

    $

    .widget(

    "ui.table",

    {

options : {

    name : "table",

    default_controls : [ {

id : 'previous',

icon : 'ui-icon-arrowthick-1-w'

    }, {

id : 'next',

icon : 'ui-icon-arrowthick-1-e'

    } ]

},

_create : function() {

},

_init : function() {

    // création de la barre de navigation

    var chaine = "<ul id='" + this.options.name

    + "_navBar' style='list-style:none;'>";

    for ( var i = 0; i < this.options.default_controls.length; i++) {

chaine += this

._getControl(

this.options.default_controls[i]['id'],

this.options.default_controls[i]['icon']);

    }

    chaine += "</ul><div style='clear:both;'>&nbsp;</div>";

    this.element.append(chaine);

},

_setOption : function(key, value) {

    this.options[key] = value;

},

_getControl : function(id, icon) {

    var chaine = "<li class='ui-state-default ui-corner-all' id='"

    + this.options.name

    + '_'

    + id

    + "' style='float:left;margin-right:2px;text-decoration: none;'>"

    + "<span class='ui-widget ui-corner-all ui-icon ui-button "

    + icon

    + "' title='"

    + id

    + "'></span></li>";

    return chaine;

}

    });

    $.extend($.ui.table, {});

})(jQuery);

Squelette du plugin

Tous les posts

créer la table html

Réaliser un controle jQueryUI

Développer un composant d'affichage de table en jQueryUI

Squelette du plugin :

(function($) {

$.widget("ui.table", {

options : {

name : "table"

},

_create : function() {

},

_init : function() {

this.element.html("<div id='" + this.options.name + "'>"

+ this.options.name + "</div>");

},

_setOption : function(key, value) {

this.options[key] = value;

}

});

$.extend($.ui.table, {});

})(jQuery);

• options : contient la liste des paramètres
• name : nom de la table (préfixe de tous les id générés
• _create : méthode appelée à l'instanciation du contrôle ? 
• _init : peut être appelé plusieurs fois (ex: lors de chaque $('#xxx').table() ?)
• _setOption : assigne une option

Utilisation

JS

$(document).ready(function() {

$('#table').table({

name : 'TestTable'

});

});

HTML

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Test</title>

<script type='text/javascript' src='jquery-ui-1.9.2.custom/js/jquery-1.8.3.js'></script>

<script type='text/javascript' src='jquery-ui-1.9.2.custom/js/jquery-ui-1.9.2.custom.js'></script>

<script type='text/javascript' src='test.js'></script>

<script type='text/javascript' src='jquery.table.js'></script>

</head>

<body>

<div id='table'></div>

</body>

</html>

Références

Plugin jQuery : http://docs.jquery.com/Plugins/Authoring

jQueryUI : http://www.erichynds.com/jquery/tips-for-developing-jquery-ui-widgets/

squelette : https://gist.github.com/374414

exemple progressbar très simple : https://github.com/scottgonzalez/jquery-ui-1.8-widget-factory/blob/master/1.8.js

Tous les posts

Barre de navigation