Ici et ailleurs

Le blog d’un joueur … mais pas que le blog de Sky.

Ruby on Rails : Here we go again

Nouvelle année, nouvelles résolutions ! Avant de reprendre là où nous nous étions arrêté et de manière à remettre au goût du jour notre projet, nous allons dans cet article reprendre très rapidement ce que nous avons déjà fait en modifiant deux trois petites choses. Je vais aussi désormais mettre à disposition le projet tel qu’il figure sur mon PC sous forme d’archive pour chaque tuto. Pour cette partie, vous trouverez donc l’archive à cette adresse !

Trêve de bavardage, voici ce qu’il s’est passé dans les épisodes précédents !

Configuration

Commençons par la configuration de notre application, c’est à dire, juste après avoir exécuté la commande :

rails new japprends

Gemfile

Première étape, configuration des gems utilisées par notre application dans le fichier /Gemfile. Voici ce qu’il doit vous rester :

source 'https://rubygems.org'

gem 'rails', '3.2.0.rc2'

gem 'sqlite3'

group :assets do
  gem 'sass-rails',   '~> 3.2.3'
  gem 'coffee-rails', '~> 3.2.0'

  gem 'uglifier', '>= 1.0.3'
end

Je suis pour ma part parti d’un projet tout neuf et j’utiliserai à présent une base de données sqlite que je pourrais afficher à l’aide du logiciel SQLite Analyzer.

Après avoir modifié ce fichier, vous pouvez lancer les commandes (toujours dans le dossier de votre application rails) :

bundle install
bundle update

Routes

Deuxième étape, suppression du fichier /public/index.html afin de ne plus nous retrouver sur la page de bienvenue de Rails.

Troisième étape, on configure les routes même si notre contrôleur n’est pas encore fait, donc dans le fichier /config/routes.rb, vous devez avoir la même chose que moi (où “Japprends” est le nom de votre projet) :

Japprends::Application.routes.draw do
  resources :notes
  root :to => 'notes#index'
end

Base de données

Avant de continuer, étant donné que je suis passé sur du sqlite, voici à quoi ressemble le fichier /config/database.yml :

development:
  adapter: sqlite3
  database: db/development.sqlite3
  pool: 5
  timeout: 5000

test:
  adapter: sqlite3
  database: db/test.sqlite3
  pool: 5
  timeout: 5000

production:
  adapter: sqlite3
  database: db/production.sqlite3
  pool: 5
  timeout: 5000

Voilà, la configuration est terminée, nous allons pouvoir continuer !

Modèle et migration

Souvenez-vous, nous avons créé un modèle Note dans /app/models/note.rb qui ressemble à ceci :

class Note < ActiveRecord::Base
end

Nous avons aussi créé la migration qui permet de mettre à jour la base de données grâce à la commande :

rails generate migration CreateNote

Le fichier créé /db/migrate/…_create_note.rb doit contenir les lignes ci-dessous, nous n’allons pas rajouter de données de test pour le moment.

class CreateNote < ActiveRecord::Migration
  def up
  	create_table :notes do |t|
  		t.text :description
  		t.timestamps
  	end
  end

  def down
  	drop_table :notes
  end
end

Afin que la base de données soit effectivement mise à jour, lancez la commande :

rake db:migrate

Contrôleur

Passons désormais au contrôleur Note. Dans le fichier /app/controllers/notes_controller.rb, nous avons donc :

class NotesController < ApplicationController
	def index
		@notes = Note.all
		respond_to do |format|
			format.html
			format.xml {render :xml => @notes}
		end
	end
end

Voilà une bonne chose de faite, c’est tout pour le contrôleur, notez que cette fois, j’ai fais hériter le nouveau contrôleur de ApplicationController, ainsi le layout situé dans /app/views/layout/application.html.erb sera utilisé comme base.

Modèle

Pas grande à chose à mettre ici, créez seulement le fichier /app/models/note.rb qui contiendra le code suivant :

class Note < ActiveRecord::Base
end

Et voilà, nous disposons de toutes les méthodes de création, destruction, mis à jour et lecture pour notre modèle.

Vues

Finissons par les vues, dans le fichier /app/views/notes/index.html.erb, mettez le code suivant :

<% content_for :page_title do %>
Liste des notes
<% end %>

<div id="notes-header">
	<p class="no-bottom-margin"><span class="active">
		<%= @notes.count %>
		<%= (@notes.count == 0) ? "note" : "notes" %></span><%= link_to "+ Créer une nouvelle note", new_note_url %>
	</p>
</div>
<ul class="notes-list">
<%= render @notes %>
</ul>

Créez le partial /app/views/notes/_note.html.erb :

<li><span class="left"><%= link_to note.description, note_path(note.id) %></span><span class="right"><%= note.created_at.strftime("%m.%d.%Y") %></span></li>

Nous avons aussi créé la page pour l’action new /app/views/notes/new.html.erb mais qui restera pour le moment vide excepté pour définir le titre de la page:

<% content_for :page_title do %>
Nouvelle note
<% end %>

Vous remarquerez que cette fois-ci, nous n’avons pas créé de layout pour nos notes mais que nous utilisons le layout fourni par l’ApplicationController et donc le fichier /app/views/layouts/application.html.erb. Voici à quoi il ressemble :

<!DOCTYPE html>
<html>
<head>
  <title>Japprends - <%= yield :page_title %></title>
  <%= stylesheet_link_tag    "application", :media => "all" %>
  <%= csrf_meta_tags %>
</head>
<body>
<div class="wrapper">
<%= link_to "rubynotes", root_url, :id => "logo" %>

<%= yield %>

<p id="footer"><small>rubynotes, un moyen d'apprendre Ruby on Rails !</small></p>
</div>
</body>
</html>

Quelques petites choses ont changé au niveau des assets tags. Les dossiers par défaut pris par Rails pour le javascript et les feuilles de style sont désormais dans /app/assets/..

Nous utilisons désormais le fichier /app/assets/stylesheets/application.css pour déclarer tous nos styles :

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require_self
 *= require_tree .
*/

body {
	border-top: 5px solid #ddd;
	color: #353E34;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 16px;
	margin: 0;
	padding: 0.5em 0 0 0;
}

a:link, a:visited {
	color: #2b95f1;
	text-decoration: none;
}

a:hover {
	color: #2b95f1;
	text-decoration: underline;
}

p {
	font-family: Palatino, Georgia, "Times New Roman", serif;
	line-height: 1.5em;
	margin-bottom: 1.5em;
}

ul {
	margin: 0;
	padding: 0;
}

h1 {
	font-size: 1.5em;
}

h1.float-left {
	margin-top: 0;
}

.no-bottom-margin {
	margin-bottom: 0;
}

.wrapper {
	margin: 0 auto;
	width: 560px;
}

a#logo {
	color: #980905;
	font-weight: bold;
}

/* Notes styles */
#notes-header {
	background-color: #eee;
	margin: 0.5em 0 0.25em 0;
}

#notes-header span.active {
	background-color: #fff;
	border: 1px solid #ccc;
	border-bottom: none;
	margin-right: 0.75em;
	padding: 0.25em 0.5em;
}

#notes-header a {
	font-size: 0.8em;
}

ul.notes-list li {
	border-bottom: 1px solid #ddd;
	list-style-type: none;
	overflow: hidden;
	padding: 0.25em 0;
}

ul.notes-list li span.left {
	float: left;
	padding-left: 0.25em;
	width: 80%;
}

ul.notes-list li span.right {
	color: #aaa;
	float: right;
	font-size: 0.8em;
	font-style: italic;
	padding-right: 0.25em;
	text-align: right;
	width: 15%;
}

/* Footer styles */
p#footer {
	font-size: 0.75em;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-align: center;
}

Et voilà, nous sommes désormais tous au même point et nous allons pouvoir continuer notre petite application ! Prochaine étape, authentification from scratch ! N’oubliez pas que vous trouverez l’archive actuelle de cette application ici.

Tags: , ,

Laisser un commentaire

Si vous avez un compte sur WeFrag, connectez-vous pour publier un commentaire.

Vous pouvez, entre autres, utiliser les tags XHTML suivant :
<a href="" title="">...</a>,<b>...</b>,<blockquote cite="">...</blockquote>,<code>...</code>,<i>...</i>