Librairie de gestion du CSS et du JS pour Code Igniter : SmartLoader

SmartLoader

Voici une librairie pour Code igniter, qui vous permettra de gérer facilement votre css et js sur votre site.

En effet, lorsque vous commencez à avoir beaucoup de « controller », pas mal de css et de js, il vous faut dans un soucis d’optimisation n’inclure que le code js et css nécessaire. C’est pourquoi cette librairie a été développée pour aider le développeur à gérer l’inclusion des fichiers css et js mais aussi le code javascript.

Pour ceux qui connaissent un peu le développement WordPress, cette librairie fonctionne un peu comme la fonction wp_enqueue. Tout on long de votre controlleur, vous pouvez inclure des fichiers js et lors de l’affichage dans le footer par exemple, vous affichez la liste des liens dans des balises <script>.

Description des méthodes

L’objet « smartloader » possède deux objets : « js » et « css », ces deux attributs représentent les gestionnaires respectifs des CSS et du JS

Voici la décomposition des objets

JS

public function add($args);

Ajoute des liens dans la liste des scripts à inclure, $args peut être un array ou une string (chaque lien doit avoir le http://)

public function jquery($data);

Ajoute du script javascript dans jQuery. Il sera affiché comme ceci

jQuery(document).ready(function($){
... code here ...
});
public function js($data);

Ajoute du javascript entre deux balises <script>. (Javascript classique)

public function loadLinks();

Affiche la liste des liens que vous avez ajouté à la liste.

public function loadJavascript();

Affiche tout le code javascript

CSS

public function add($args);

Ajoute des liens dans la liste des fichiers css à inclure, $args peut être un array ou une string (chaque lien doit avoir le http://)

public function loadLinks();

Affiche la liste des liens que vous avez ajouté à la liste.

Configuration

Il existe un fichier de configuration conf/smartloader.php
Où vous trouverez notamment la configuration de l’autoload de fichier css. En effet, la librairie CSS permet de préchargement automatiquement au lancement du site un dossier complet de css. Les fichiers seront triés en fonction de leurs noms. Renommez les donc 0-base.css, 1-style.css, etc.

Utilisation

Vous trouverez en bas de cet article un lien pour télécharger un projet Code igniter de base, avec la librairie afin de vous donner une idée du résultat rapidement.

Voici les différentes étapes d’installation:

  1. Configurer les paramètres de la librairie dans « conf/smartloader.php »
  2. Mettre la librairie en chargement automatique dans « conf/autoload.php »
  3. Modifier MY_Controller pour charger vos js et css par défaut

Ensuite à l’utilisation, voici un Controller d’exemple:

class Welcome extends MY_Controller {

 public function index()
 {
  /* want to load a js plugin with css */

  $this->smartloader->js->add("http://localhost/js/myplugin.js");

  $this->smartloader->css->add("http://localhost/css/button.css");

  $this->smartloader->js->jquery('$("#body").css("background-color","red");');

  $this->load->view('welcome_message');
 }

}

Et voici la vue associée au controlleur:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Welcome to CodeIgniter</title>
	<?php echo $this->smartloader->css->loadLinks(); ?>
</head>
<body>

<div id="container">
	<h1>Welcome to CodeIgniter!</h1>

	<div id="body">
		<p>The page you are looking at is being generated dynamically by CodeIgniter.</p>

		<p>If you would like to edit this page you'll find it located at:</p>
		<code>application/views/welcome_message.php</code>

		<p>The corresponding controller for this page is found at:</p>
		<code>application/controllers/welcome.php</code>

		<p>If you are exploring CodeIgniter for the very first time, you should start by reading the <a href="user_guide/">User Guide</a>.</p>
	</div>

	<p class="footer">Page rendered in <strong>{elapsed_time}</strong> seconds</p>
</div>

<?php echo $this->smartloader->js->loadLinks(); ?>
<?php echo $this->smartloader->js->LoadJavascript(); ?>
</body>
</html>

Téléchargement

SmartLoader-1.0.rar

Installer un serveur Subversion sur Mac OS 10.5

Cela fait bien longtemps que je n’avais pas écrit d’article sur mon blog. Voici donc un article sur l’installation et la configuration d’un serveur svn sur Mac OS 10.5 accessible d’internet grâce à apache.

Tout d’abord assurez vous d’avoir activer le partage web dans votre panneau de configuration système.

Ensuite ouvrez votre terminal, pour ceux qui y sont allergiques, je suis désolé je n’ai pas encore trouvé d’applications permettant de gérer tout ça avec une belle interface utilisateur.

Et tapez

sudo apachectl restart

Cela va redémarrer Apache afin de vérifier s’il est bien fonctionnel.

Si oui, vous pouvez passer à la suite, sinon essayez de poser vos questions j’essaierai d’y répondre.

Donc première étape, il faut créer le répertoire qui va recevoir vos référentiels svn (repository).

mkdir /Library/WebServer/svn

Maintenant il faut créer un référentiel :

cd /Library/WebServer/svn
svnadmin create Projet
sudo chown -R www:www ./Projet

Ensuite configurer les droits d’accès à votre repository.
Tout d’abord, nous allons créer un fichier qui contiendra tous les utilisateurs.

htpasswd -c deny.htpasswd 

Voilà si dans l’avenir vous souhaitez y ajouter d’autres utilisateurs, enlever l’option « -c »

 

Ensuite, il faut créer un fichier qui configure les « ACL » de vos référentiels svn, c’est à dire les droits utilisateurs sur chaque projet.

Éditez le fichier /Library/WebServer/svn/deny.htaccesspolicy avec vim.

Tapez « i » pour entrer en mode édition du fichier, et inscrivez le code ci-dessous en modifiant les lignes nécessaires.

[groups]
admins = login
[Projet:/]
@admins = rw

Appuyez sur « echap » pour quitter le mode édition de vim et ensuite :wq pour « write & quit ».

Le groupe admin a le droit d’écriture et de lecture sur le référentiel Projet.
Si vous souhaitez ne mettre qu’un utilisateur sans passer par un groupe, enlever le @ et inscrivez seulement le login de l’utilisateur et ses droits.

Tout cela étant fait, votre svn est configuré. Cependant, il n’est pas joignable de l’exterieur.

Ils faut donc configurer Apache.

Nous allons activer le module svn pour Apache.

Il faut aller modifier le fichier /etc/apache2/httpd.conf

et décommentez les lignes

LoadModule dav_svn_module	libexec/apache2/mod_dav_svn.so
LoadModule authz_svn_module	libexec/apache2/mod_authz_svn.so

Si elles n’existent pas, c’est que vos extensions ne sont pas présentes dans votre version. Pour cela rajouter les deux lignes – la suite de tout les LoadModule.
et copier les deux fichiers dans le dossier /usr/libexec/apache2, vous les trouverez en téléchargement ici

Maintenant, modifier le fichier /etc/apache2/others/subversion.conf

sudo vim /etc/apache2/others/subversion.conf

Tapez « i » pour rentrer en mode édition du fichier, et inscrire le code ci-dessous en modifiant les lignes nécessaires :


<IfModule dav_module>
 <IfModule dav_fs_module>
  <IfModule dav_svn_module>
   <IfModule authz_svn_module>
   <Location /svn>
      DAV svn
      SVNParentPath /Library/WebServer/svn
      AuthzSVNAccessFile /Library/WebServer/svn/deny.htaccesspolicy
      AuthType Basic
      AuthName "Subversion : espace de travail"
      AuthUserFile /Library/WebServer/svn/deny.htpasswd
      Require valid-user
   </Location>

   </IfModule>
  </IfModule>
 </IfModule>
</IfModule>

Appuyez sur « echap » pour quitter le mode d’édition de vim et ensuite :wq pour « write & quit »

Redémarrez Apache et le tour est joué

sudo apachectl restart

Il est maintenant temps de faire le premier import dans votre svn, afin d’y créer la structure globale.

sudo mkdir -p /tmp/projet/{trunk,branches,tags}
svn import /tmp/projet http://localhost/svn/Projet -m "init"

Voila tout est configuré.
Pour gérer ces repos svn pour mac os, j’ai trouvé un logiciel, si cela vous intéresse : Cornerstone

J’espère que cet article à pu vous aider. Bien évidemment, cela n’est pas forcément très « secure » en effet, la connexion passe par le protocole HTTP. Il faudrait, si les données de votre svn sont très sensibles, passer le svn par ssh grâce au protocole svn+ssh://

WP Social Posts

Sur une idée original de Yoann Marie, j’ai développé un plugin WordPress qui permet de trier ces articles en fonction de leur popularité sur Facebook.

En faites, ce plugin contient plusieurs choses:

  • Un widget qui affiche la liste des articles les plus « liké » sur facebook.
  • Un plugin qui affiche un bouton « j’aime » custom afin de mettre un calback sur le bouton original fournis par facebook. Afin d’incrémenter ou décrémenter un post_meta.

Bien évidemment, tout est paramétrable. Que ce soit le widget ou le style du bouton « j’aime ».

Revenons plus précisèment sur le fonctionnement du plugin.

A l’activation, le plugin va aller récupérer via l’API FQL de Facebook le nombre total de « like » et ainsi créer un post_meta « socialpost_likecount » pour chaque articles.

FQL permet de créer des requêtes SQL dans les tables de Facebook, voici un exemple de requête:

http://api.facebook.com/method/fql.query?query=select%20%20like_count,%20total_count,%20share_count,%20click_count%20from%20link_stat%20where%20url=%22http://www.remiheens.fr%22

Cette requête FQL va donc nous retourner un fichier xml avec les différentes informations demander dans le « select »


<fql_query_response list="true">

<link_stat>

<like_count>2</like_count>

<total_count>3</total_count>

<share_count>1</share_count>

<click_count>0</click_count>

</link_stat>

</fql_query_response>

Ensuite lors de l’utilisation normal, le plugin va afficher le bouton « j’aime » dans une div que vous aurez décider (Via une option du plugin).

Il existe sur ce bouton, deux fonctions de callback, une pour le « like » et une autre pour le « unlike ». C’est deux fonctions vont faire un appel ajax vers le plugin qui lui se chargera d’incrémenter ou de décrémenter la valeur du post_meta « socialposts_likecount ».

Concernant, les différentes options du plugin, vous pourrez modifier entièrement le style du widget.

Je m’explique, vous avez la possibilité de spécifier:

  • une balise html pour l’ouverture de la boucle par exemple un « <ul> »
  • une balise html fermante de boucle « </ul> »
  • un morceau d’html pour afficher chaque résultats, chaque variables comme le permaliens, le titre de l’article seront à ajouter sous forme de marqueurs comme %POST_NAME% pour le titre de l’article. Vous pourrez donc faire « <li>%POST_NAME%</li> »

Ensuite, vous avez la possibilité de modifier le bouton « j’aime », voici une liste des différentes options:

  • Le type de bouton (juste le compteur, ou un affichage sur une ligne,etc )
  • La langue utilisée pour l’affichage du texte
  • Le « theme » (dark ou light)
  • Si vous souhaitez ou non afficher les avatars des personnes ayant « aimé » votre articles
  • La taille de la balise

Je vais certainement rajouter twitter dans le lot afin de croiser les résultats entre facebook et twitter et ainsi avoir des résultats plus représentatif de la popularité de l’article.

Voici le lien pour télécharger le plugin: WP-SocialPosts

Si vous avez des retours je suis tout à fait preneur, j’essaierai d’y répondre le plus rapidement possible.

Plugins jQuery

De temps à autres, il me prend l’envie de développer un plugin. Que ce soit pour me faire gagner du temps ou juste par curiosité.

Voici donc une liste des différents plugins dédiés à jQuery que j’ai développé.

Chaque plugins possèdent sa propre page afin de vous donner des exemples ainsi que des explications sur le fonctionnement du plugin.

Poster des messages automatiquement sur Twitter et Facebook

Voici une librairie PHP que j’ai écrite durant mon dernier projet. Elle permet d’écrire des messages automatiquement sur Facebook et/ou Twitter.

Le principe est simple,Lors de  la publication d’une news sur votre site, vous envoyez un message automatiquement sur Facebook et Twitter pour le signaler à votre communauté. Tout en minimisant la taille des messages grâce au service fournis par Bit.ly Continuer la lecture de Poster des messages automatiquement sur Twitter et Facebook

Afficher des résultats Ajax dans des champs de formulaires

J’ai étais confronté durant un projet à un problème sur mes champs de formulaires.

Lorsque je préchargeais des informations récuperées en Ajax au format JSON, je voulais les afficher dans mes champs de formulaires mais les caractères encodés en HTML ne s’affichait pas correctement.

Afin de remédier à cela, j’ai trouvé une astuce avec jQuery. Voici donc la solution :

var sParsed = $("&lt;div&gt;").html(data.nom).text();
$("input[name$='mon_input']").val(sParsed);

Des explication s’imposent.

Tout cela est à rajouter dans la fonction du success de votre appel Ajax:

$.ajax({
type: "POST",
async: false,
url: "./ma_page.php",
success: function(data){
var sParsed = $("<div>").html(data.nom).text();
$("input[name$='mon_input']").val(sParsed);
}
}

ou ma_page.php renvoie un tableau JSON des données sous la forme :

{
data: {
nom : "&amp;Eacute;ssai"
}
}

Le résultat sera donc affiché dans l’input avec le « name » égale à « mon_input ».

$("input[name$='mon_input']").val("test");

J’espère vous avoir aidé.

Si vous avez des questions, j’y répondrais rapidement grâce aux commentaires.

Plugins WordPress

Depuis que je suis auto-entrepreneur, je développe des plugins pour WordPress. Vous trouverez ci-dessous une liste non-exhaustive des différents plugins développés. Pour ceux gratuits, vous trouverez un lien pour les télécharger.

  • FBThumbnail : Plugin pour spécifier l’image utilisée par le bouton « j’aime » de Facebook, en utilisant soit le post_meta Thumbnail soit la première image de l’article.

Si vous avez besoin d’un développement spécifique sur WordPress, vous pouvez me contacter par mon adresse e-mail que vous trouverez sur la page contact.

Modifier l’image utilisée par le bouton « j’aime » Facebook

Depuis quelques jours Facebook a modifié le comportement du bouton « j’aime ». Auparavant, cela publiait une petite ligne discrète sur votre mur, mais à partir de maintenant ce bouton publie une petite description ainsi qu’une miniature sauf que cela prend au hasard une image de votre article.

Afin de spécifier l’image utilisée par Facebook, il vous faudra ajouter une ligne dans votre header entre les balises « <head> » et « </head> »

 

<link rel="image_src" href="mon-image.jpg"/>


 

Je vous ai créé un petit plugin WordPress afin de prendre soit une Thumbnail spécifique que vous définirez en post_meta soit la première image de votre article.

Le post meta utilisé est « Thumbnail ».

Et voici le lien pour le plugin : FbThumbnail.php.

Ajouter le codex à Netbeans

Je ne sais pas si cet article sera très utilisé pour WordPress mais il pourra en aider certains.

Je vais vous expliquer comment ajouter le codex de WordPress à l’autocompletion de NetBeans

Pour ceux qui ne connaissent pas NetBeans, c’est un IDE comme Dreamweaver ou Eclipse. Il permet de développer des applications PHP, Java, Ruby …
Si vous souhaitez plus d’infos sur l’IDE allez voir le site officiel de NetBeans. Continuer la lecture de Ajouter le codex à Netbeans