Principales migrations en Rails

Ajouter une colonne

# rails g migration add_column_to_table column:type
add_column :table, :column, :type, after: :other_column

Ajouter un index sur une colonne

add_index :table, :column

Renommer une colonne

rename_column :table, :old_column, :new_column

Changer le type d’une colonne

change_column :table, :column, :new_type

Supprimer une colonne

# rails g migration remove_column_from_table column:type
remove_column :table_name, :column_name

Renommer une table

rename_table :old_table_name, :new_table_name

Supprimer une table

# rails g migration drop_table_table
drop_table :table_name

Mettre une valeur par défaut sur une colonne

change_column :table_name, :column_name, :type, default: value

Créer une table de jointure (many to many)

# rails g migration CreateJoinTableFichesCodeCips fiches code_cips
class CreateJoinTableFichesCodeCips < ActiveRecord::Migration
  def change
    create_join_table :fiches, :code_cips do |t|
      # t.index [:fiche_id, :code_cip_id]
      # t.index [:code_cip_id, :fiche_id]
    end
  end
end

problème de chargement de TinyMCE en Rails

Si vos input de type TinyMCE ne s’affichent pas lors du premier chargement de votre page, cela peut être dû à l’utilisation de la gem turbolinks.

Une solution à ce problème est donc de désactiver cette gem :

  • supprimer la ligne ‘gem turbolinks’  du Gemfile,
  • supprimer l’inclusion dans le fichier application.js (//= require turbolinks),
  • modifier l’inclusion du css et du js dans le layout (stylesheet_link_tag    « application », media: « all »)

Tinymce : remplacer les URL relatives par des URL absolues

De base, Tinymce remplace les URL absolues internes des images et  des liens par des URLS relatives. Dans certains cas, cela peut poser problème.

Voici la méthode pour garder des URL absolues pour un projet Rails utilisant la gem ‘tinymce-rails’ :

 # Dans config/tinymce.yml
 alternate:
   relative_urls: false
   remove_script_host: false
   convert_urls: false
   document_base_url: "http://url-de-mon-site"
   ...

Recompiler les assets provenant des Gems

Si vous utilisez un suffixe pour accéder à un projet Ruby on Rails (exemple : nom_de_domaine/suffixe), il est possible que vous rencontriez des problèmes avec les assets venant d’un Gem. Une des solutions est de recompiler les assets.

Pour cela, il faut taper les deux commandes suivantes :

rake assets:clean && rake tmp:cache:clear
RAILS_RELATIVE_URL_ROOT=/mon-projet rake assets:precompile

Quelques astuces pour Sublime Text

Préférences

Les préférences sont à enregistrer dans le fichier Preferences.sublime-settings (menu Sublime Text > Preferences > Settings – User).

Voici quelques lignes utiles :

	"highlight_line": true, // indique la ligne courante
	"highlight_modified_tabs": true, // indique les fichiers non sauvegardés
	"save_on_focus_lost": true, // sauvegarde automatique
	"indent_to_bracket": true,
	"tab_size": 2,
	"translate_tabs_to_spaces": true,
	"trim_trailing_white_space_on_save": true, // supprime les espaces inutiles en fin de ligne
	"word_wrap": true // revient à la ligne pour éviter les scrolls horizontaux

Packages

Pour installer des packages, il faut avoir installé Package Control. Ensuite, il suffit de taper « Cmd » + « MAJ » + « P » dans Sublime, puis de saisir « Install Package ».

SCSS

Affiche la coloration syntaxique pour les fichiers .scss.

Bracket Highlighter

Met en évidence les balises ouvrantes et fermantes.

LiveReload

Recharge la page du navigateur dès que le fichier est enregistré. Pour l’installer, il faut suivre les indications données sur le Github : https://github.com/dz0ny/LiveReload-sublimetext2. Il faut ensuite installer l’extension pour le navigateur (ici pour Chrome).

All Autocomplete

Permet d’étendre l’autocomplétion des mots à travers tous les fichiers ouverts.

Exim : unrouteable address et Message frozen

Lors de l’installation d’un serveur, il faut configurer Exim 4 sans quoi il est impossible d’envoyer des emails. Les logs d’exim, situés dans /var/log/exim4/mainlog, nous indiquent une erreur SMTP : le domaine de l’expéditeur n’existe pas.

Pour corriger le problème, il faut changer le nom du serveur dans  2 fichiers :

  • /etc/mailname
  • /etc/exim4/update-exim4.conf.conf, pour le paramètre dc_other_hostnames

Une fois cette configuration faite, il faut redémarrer le serveur de mail

/etc/init.d/exim4 restart

puis relancer l’expédition des mails bloqués.

exim -qff

Validation de formulaire en HTML5

HTML5 propose de nouveaux types de champs et des nouveaux attributs qui facilitent la validation de formulaires. Ces nouveautés s’appliquent aux navigateurs récents.

Nouveaux types d'<input>

HTML5 propose une douzaine de nouveaux types de champs. Le site Alsacreation liste ces douze types. Les principaux sont détaillés ci-dessous.

email

Un champ de type « email » est un champ proche du type « text ». Il attend au minimum un caractère suivi d’un @, suivi à son tour d’un caractère.

<input name="email" type="email" />

url

Comme pour le type « email », le type « url » attend un format bien spécifique : le format d’une URL. Tous les types d’URL sont admis (ftp://, mailto:, http://, etc…).

<input name="url" type="url" />

number

Le type « number » permet de renseigner une valeur numérique. L’affichage du champ diffère en fonction du navigateur. Ce type ne fait aucune vérification lors de la validation, mais si l’utilisateur saisit du texte à la place d’un nombre, aucune valeur ne sera retournée. Ce type de champ permet également de présenter le clavier numérique sur les smartphones.

<input name="age" type="number" />

tel

Le type « tel » permet de renseigner un numéro de téléphone. Comme pour le type « number », aucun format spécifique n’est attendu, mais le clavier numérique sera proposé sur smartphone. La vérification du format peut se faire à l’aide de l’attribut » pattern ».

<input name="telephone" type="tel" />

Nouveaux attributs

placeholder

« placeholder » est un attribut qui indique un texte indicatif sur le contenu attendu dans le champ. Ce texte s’efface quand l’utilisateur commence à saisir son contenu.

<input name="pseudo" type="text" placeholder="Votre pseudo" />

required

L’attribut « required » indique que le champ est obligatoire. Le formulaire ne peut être validé tant que le champ n’est pas renseigné.

<input name="pseudo" type="text" required="required" />

Les éléments requis peuvent être stylisés de la manière suivante :

[required]{
   border: 2px solid red;
}

pattern

L’attribut « pattern » permet de bloquer la validation d’un formulaire si les champs ne correspondent pas aux patterns spécifiés. Les erreurs sont indiquées à l’utilisateur par des infobulles.

<input type="tel" name="tel" placeholder="Votre numéro de téléphone" pattern="[0-9]{10}" />

Pour appliquer un style aux éléments valides et invalides, il faut utiliser les pseudo-classes :valide et :invalide.

:valid {
   box-shadow: 0 0 2px 1px green;
}

Sources :

Des graphes avec Google Chart Tools

Google Chart Tools est une API JavaScript qui permet de présenter des données sous forme de graphiques. Les graphiques obtenus sont réalisés en SVG, et sont donc vectoriels.

Structure des données

Les données des graphes sont insérées dans un objet nommé DataTable. Une fois instancié, il faut lui ajouté les colonnes (en indiquant le type de chacune) puis les lignes.

var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
   ['Mushrooms', 3],
   ['Onions', 1],
   ['Olives', 1]
]);

On peut également instancier notre DataTable en un seul appel grâce à la méthode arrayToDataTable().

var data = google.visualization.arrayToDataTable([
  ['Employee Name', 'Salary'],
  ['Mike', {v:22500, f:'18,500'}],
  ['Bob', 35000],
  ['Alice', 44000],
  ['Frank', 27000],
  ['Floyd', 92000],
  ['Fritz', 18500]
]);

Types de graphes

Plusieurs types de graphes sont proposés par l’API. On peut ainsi réaliser des camemberts, des graphes en ligne, des graphiques à barres (verticales ou horizontales), des nuages de points, des jauges, etc… L’API de Google liste tous ces types.

var chart = new google.visualization.LineChart("element_de_l_arbre");
chart.draw(data, options);

Options

Des options peuvent être passées au graphe afin de le personnaliser.

chart.draw(data, {
  width: 400,
  height: 240,
  title: 'Toppings I Like On My Pizza',
  colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'],
  is3D: true
});

Personnalisation des bulles d’aide

On peut obtenir des informations sur les éléments du graphes (barres, lignes,…) en les survolant. Le contenu des infos-bulles obtenues est personnalisable. Pour cela, il faut ajouter une colonne au DataTable, de type string est dont le contenu est de rôle tooltip.

dataTable.addColumn({type: 'string', role: 'tooltip'});
dataTable.addRows([
    ['2004', 1000, '1M$ sales in 2004'],
    ['2005', 1170, '1.17M$ sales in 2005'],
    ['2006',  660, '0.66M$ sales in 2006'],
    ['2007', 1030, '1.03M$ sales in 2007']
  ]);

L’API de Google Chart Tools est disponible sur Google Developers.