Informatique, électronique : Php, Html, javascript, jQUery, SQL, Netbeans, Pic,...: 2013

mardi 26 mars 2013

Git commandes utiles

Déplacer le remote

git remote set-url origin git://new.url.here

Mise à jour d'un bare repository

git --bare fetch origin '+refs/heads/*:refs/heads/*'

Mise à jour de tous les repository du répertoire courant

for f in *.git ; do cd $f && git --bare fetch origin '+refs/heads/*:refs/heads/*' &&cd .. ; done

Références :

http://www.pierreschambacher.com/blog/git-in-a-nutshell-part-2/

jeudi 21 mars 2013

Configurer XDebug pour Netbeans en remote pour WEB et CLI pour Ubuntu

Contexte

Machine de développement : Netbeans (pas de contrainte d'OS, testé sous windows 7)
Serveur WEB : testé sur ubuntu 10.04.4

Installation

    apt-get install php5-xdebug

Configuration

Editer le fichier /etc/php5/conf.d/xdebug.ini

zend_extension=/usr/lib/php5/20090626/xdebug.so
xdebug.remote_enable=on
xdebug.remote_port=9000
xdebug.remote_handler="dbgp"
xdebug.remote_mode=req
xdebug.show_exception_trace=On
xdebug.remote_connect_back = 1
xdebug.remote_autostart=0

debug

#!/bin/bash

host=$(echo $SSH_CLIENT | sed -e 's/ .*//')
export XDEBUG_CONFIG="idekey=netbeans-xdebug remote_host=$host"
php $*

mercredi 13 mars 2013

Installer java 7

Installer Cygwin (from internet)

D:\Cygwin
Local Package Directory : D:\Temp
Installer openssh, mintty, git, git completion, vim, binutils, bind-utils, findutils, libsasl2 ,ca-certificates
mirroir : ftp://mirror.switch.ch
Cliquer sur Keep
Ajouter D:\cygwin\bin dans le path système et /usr/local/bin dans le path user
Lancer cygwin terminal

cd /home
mkdir <user>
ssh-keygen -tdsa
cat /home/<user>/.ssh/id_dsa.pub | ssh <serveur_web> "cat >>/home/<user>/.ssh/authorized_keys2"
cat /home/<user>/.ssh/id_dsa.pub | ssh <serveur_git> "cat >>/home/<user>/.ssh/authorized_keys2"
# pour tester :
ssh <serveur_web>
ssh <serveur_git>

Si erreur : Aucun fichier ou dossier de ce type
sur le serveur cible faire

cd
mkdir .ssh
chmod 700 .ssh

Lancer Netbeans

team->Git->clone

ssh://lib_maison.git
username -> <user>
Private Key File: D:\cygwin\home\<user>\.ssh\id_dsa
Next >
Parent Directory D:\NetBeansProjects
Clone Name: lib_maison
Finish

configuration de la connexion distante

remote connexion -> manage

Name: <serveur_web>
Host Name: <serveur_web>
User Name: <user>
Private Key File: D:\cygwin\home\<user>\.ssh\id_dsa
Known Hosts File: D:\cygwin\home\<user>\.ssh\known_hosts
Initial Directory: /var/www/<user>

Publier une application avec git

Script permettant de publier une application php issue d'un serveur git

Utilisation :

On passe en paramètre le nom de l'application et le numéro de version.

Prérequis :

On est en environnement linux
Les sources de l'application sont disponibles sur le serveur git
le serveur git est accessible en ssh
l'accès par clé privée est opérationnel
serveur apache

Principe :

vérification que le nom de domaine existe
vérification que le virtual host apache existe
si tout est ok, on supprime la version précédente et on récupère la version courante

mardi 26 février 2013

Faire un template de projet avec Netbeans 7.3

template de projet avec Netbeans

Etape 1 :

Installer le Netbeans Plugin Development

Etape 2:

Créer son projet de template
voici à quoi ressemble le mien :

Etape 3

choisir File > New Project (Ctrl+Shift+N). NetBeans Modules -> Module -> Next.
Entrez un nom et un répertoire pour le projet puis Next.
Donnez un nom dans Code Name Base (ça deviendra le nom du package java ex: ma.societe.fr). -> Finish.

Etape 4

Click droit sur le projet créé en (3) faire New -> Other. NetBeans Module Development -> Project Template Next.
Un petit piège : Erreur de compilation des packages non trouvés solution : dans les propriétés du projet -> Libraries -> Add Module Dependency, ajouter Project API ,ProjectUI API, Datasystems API, Dialogs API, File System API, Utilities API, UI Utilities API, Lookup API
Click Droit sur le projet -> create NBM (le fichier est généré dans le répertoire du projet sous build
ce fichier peut être déployé sur les autres postes

Références:

http://netbeans.dzone.com/tips/hack-your-own-custom-project-t
http://platform.netbeans.org/tutorials/nbm-projectsamples.html

samedi 23 février 2013

Création automatique de version avec git

le but de ce script est de réaliser une numérotation automatique (de la forme Vx.y.x) afin de publier une application sur un serveur et conserver la trace des sources publiées.
Je l’utilise pour déployer du php, mais ça devrait pouvoir être utilisé dans d'autres contextes.
Voici le code source :

dimanche 3 février 2013

Réaliser un controle jQueryUI - Part 9

Ajout des filtres

Le javascript

Classe FilterDescriptor : contenu du filtre

AND ou OR plus tableau de conditions de la forme :

{ field:field, caption:caption, op:operator, value:value }

Gestion du header multi colonnes

On modifie _createHeader

Ajout de filter dans les options
Ajout du contrôle et de la méthode reset_filter
modification de _setOption pour gérer la modification du filtre
ajout méthode showFilter qui affiche un input sur la colonne correspondante
ajout méthode _setFilter : on se positionne sur la page 1, on met a jour le nombre d'enregistrements et on récupère les données

Le PHP

Création d'une classe SQL pour générer le code
Utilisation des paramètres nommés SQL

le php

vous pouvez récupérer le code ici : git://github.com/chromero/jquery.table.git
voir l'exemple ici : http://chromero.hebergratuit.com/Site/

Tri

Tous les posts

mercredi 30 janvier 2013

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

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

Installation

Télécharger l'archive : http://netbeans.org/downloads/ (j'ai choisi le bundle PHP)
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

mercredi 16 janvier 2013

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

dimanche 13 janvier 2013

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

vendredi 11 janvier 2013

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é

jeudi 10 janvier 2013

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

mardi 8 janvier 2013

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

lundi 7 janvier 2013

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

dimanche 6 janvier 2013

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

mardi 26 mars 2013

Références :

jeudi 21 mars 2013

Configurer XDebug pour Netbeans en remote pour WEB et CLI pour Ubuntu

Contexte

Installation

Configuration

debug

mercredi 13 mars 2013

Installer java 7

Installer Cygwin (from internet)

Lancer Netbeans

Utilisation :

Prérequis :

mardi 26 février 2013

template de projet avec Netbeans

Etape 1 :

Etape 2:

Etape 3

Etape 4

Références:

samedi 23 février 2013

dimanche 3 février 2013

Ajout des filtres

Le javascript

Le PHP

mercredi 30 janvier 2013

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

Installation

Créer le repository sur github

mercredi 16 janvier 2013

Gestion du tri sur une colonne

Code source

dimanche 13 janvier 2013

Un peu de sécurité

Références

vendredi 11 janvier 2013

Un peu de php

ATTENTION :

On modifie le DataProvider

jeudi 10 janvier 2013

Un peu de style

support de destroy

Références :

mardi 8 janvier 2013

Navigation :

Code complet

DataProvider

lundi 7 janvier 2013

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 :

code complet :

Etape 2

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

dimanche 6 janvier 2013

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

Squelette du plugin :

Utilisation

JS

$(document).ready(function() { $('#table').table({ name : 'TestTable' }); });

HTML

Références

$(document).ready(function() {

$('#table').table({

name : 'TestTable'

});

});