610 lines
No EOL
27 KiB
HTML
610 lines
No EOL
27 KiB
HTML
<?xml version="1.0" encoding="utf-8"?>
|
||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
|
||
<head>
|
||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||
|
||
|
||
<meta name="keywords" content="yesod, haskell, programming, web">
|
||
|
||
<link rel="shortcut icon" type="image/x-icon" href="/Scratch/img/favicon.ico" />
|
||
<link rel="stylesheet" type="text/css" href="/Scratch/assets/css/main.css" />
|
||
<link rel="stylesheet" type="text/css" href="/Scratch/css/twilight.css" />
|
||
<link rel="stylesheet" type="text/css" href="/Scratch/css/idc.css" />
|
||
<link rel="alternate" type="application/rss+xml" title="RSS" href="http://feeds.feedburner.com/yannespositocomfr"/>
|
||
|
||
<link rel="alternate" lang="fr" xml:lang="fr" title="Tutoriel Yesod pour les nuls" type="text/html" hreflang="fr" href="/Scratch/fr/blog/Yesod-tutorial-for-newbies/" />
|
||
<link rel="alternate" lang="en" xml:lang="en" title="Yesod tutorial for newbies" type="text/html" hreflang="en" href="/Scratch/en/blog/Yesod-tutorial-for-newbies/" />
|
||
<script type="text/javascript" src="/Scratch/js/jquery-1.3.1.min.js"></script>
|
||
<script type="text/javascript" src="/Scratch/js/jquery.cookie.js"></script>
|
||
<script type="text/javascript" src="/Scratch/js/index.js"></script>
|
||
<!--[if lt IE 9]>
|
||
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
|
||
<![endif]-->
|
||
<title>Tutoriel Yesod pour les nuls</title>
|
||
</head>
|
||
<body lang="fr" class="article">
|
||
<script type="text/javascript">// <![CDATA[
|
||
document.write('<div id="blackpage"><img src="/Scratch/img/loading.gif" alt="Chargement en cours..."/></div>');
|
||
// ]]>
|
||
</script>
|
||
|
||
<div id="content">
|
||
|
||
<div id="choix">
|
||
<div class="return"><a href="#entete">↓ Menu ↓</a></div>
|
||
<div id="choixlang">
|
||
<a href="/Scratch/en/blog/Yesod-tutorial-for-newbies/" onclick="setLanguage('en')">in English</a>
|
||
</div>
|
||
<div class="flush"></div>
|
||
</div>
|
||
<div id="titre">
|
||
<h1>
|
||
Tutoriel Yesod pour les nuls
|
||
</h1>
|
||
|
||
</div>
|
||
<div class="flush"></div>
|
||
|
||
|
||
|
||
|
||
|
||
<div class="flush"></div>
|
||
<div id="afterheader">
|
||
<div class="corps">
|
||
<p><img alt="Title image" src="/Scratch/img/blog/Yesod-tutorial-for-newbies/warp-benchmark.png" /></p>
|
||
|
||
|
||
<div class="intro">
|
||
|
||
|
||
<p><span class="sc"><abbr title="Trop long à lire">tlàl</abbr> : </span> Un tutoriel pour yesod.</p>
|
||
|
||
<blockquote>
|
||
<ul id="markdown-toc">
|
||
<li><a href="#install">Install</a></li>
|
||
<li><a href="#initialization">Initialization</a></li>
|
||
<li><a href="#configure-git">Configure git</a></li>
|
||
<li><a href="#a-last-point">A last point</a></li>
|
||
<li><a href="#protected-echo">Protected echo</a> <ul>
|
||
<li><a href="#secure">Secure?</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a href="#cleaning-up">Cleaning up</a> <ul>
|
||
<li><a href="#separate-handlers">Separate handlers</a></li>
|
||
<li><a href="#use-datatext-instead-of-string">Use <code>Data.Text</code> instead of <code>String</code></a></li>
|
||
<li><a href="#use-a-new-template-file">Use a new template file</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a href="#protected-input">Protected input</a></li>
|
||
</ul>
|
||
</blockquote>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
<p>Do you want the best technology to handle your new web application?
|
||
Me too. After searching a lot, it appears you should choose Haskell.
|
||
Why? </p>
|
||
|
||
<ul>
|
||
<li><a href="http://www.yesodweb.com/blog/2011/03/preliminary-warp-cross-language-benchmarks">Extremely fast</a>.</li>
|
||
<li>Secure by nature. Many typical programming bug are hard to make in Haskell.</li>
|
||
<li>High abstraction level. </li>
|
||
<li>Handle asynchronous request better than any other system (better than node.js for example).</li>
|
||
<li>Done to be parallelized. Thanks to purity.</li>
|
||
</ul>
|
||
|
||
<p>Technically speaking, Haskell seems perfect for web development.
|
||
The only drawback you can found for Haskell certainly won’t be technical but social. Like the difficulty to grasp Haskell, the few number of developer, etc…</p>
|
||
|
||
<p>But if you are here, lets pretend, the most important is the technical aspect.
|
||
You want the best of the best system to make your new web application.</p>
|
||
|
||
<p>Instead of reinvent the wheel, we should choose a web framework in Haskell.
|
||
Actually there are three choices:</p>
|
||
|
||
<ol>
|
||
<li><a href="http://happstack.com">Happstack</a></li>
|
||
<li><a href="http://snapframework.com">Snap</a></li>
|
||
<li><a href="http://yesodweb.com">Yesod</a></li>
|
||
</ol>
|
||
|
||
<p>I don’t think there is a real winner between these three framework.
|
||
The choice I made for yesod is highly subjective.
|
||
I had the feeling yesod help the newcomers the most.
|
||
It also appears the yesod developer are the most active.
|
||
But as I said before, I might be wrong has it was only feeling.</p>
|
||
|
||
<p>Now, what this article is all about?
|
||
A missing tutorial in the yesod documentation.
|
||
The goal is to go as straight as possible to the best practice.</p>
|
||
|
||
<p>You’ll then first install, initialize and configure your first yesod project.
|
||
Then a 5 minutes yesod tutorial to heat up and verify the awesomeness of yesod.
|
||
Then we clean up the 5 minutes tutorial to use the best practices.</p>
|
||
|
||
<h2 id="install">Install</h2>
|
||
|
||
<p>First you need to install <a href="http://www.haskell.org">Haskell</a>. The recommended way to do this is to download the <a href="http://www.haskell.org/platform">Haskell Platform</a>.</p>
|
||
|
||
<p>Then you need to install yesod.</p>
|
||
|
||
<pre class="twilight">
|
||
<span class="Keyword">></span> cabal update
|
||
<span class="Keyword">></span> cabal install yesod cabal-dev
|
||
</pre>
|
||
|
||
<p>That is all. It should take some time to
|
||
do this as cabal will download all
|
||
package and then compile them.</p>
|
||
|
||
<h2 id="initialization">Initialization</h2>
|
||
|
||
<p>Open a terminal and type:</p>
|
||
|
||
<pre class="twilight">
|
||
<span class="Keyword">></span> yesod init
|
||
</pre>
|
||
|
||
<p>Enter your name, name the project <code>yosog</code> and the name of the Foundation as <code>Yosog</code>, then choose <code>sqlite</code>.
|
||
Perfect. Now you can start the development cycle:</p>
|
||
|
||
<pre class="twilight">
|
||
<span class="Keyword">></span> cd yosog
|
||
<span class="Keyword">></span> cabal-dev install <span class="Keyword">&&</span> yesod --dev devel
|
||
</pre>
|
||
|
||
<p>This will compile the entire project. Be patient it could take some time.
|
||
Once finished a server is launched and you could visit it by clicking this link:</p>
|
||
|
||
<p><a href="http://localhost:3000"><code>http://localhost:3000</code></a></p>
|
||
|
||
<p>Congratulation! Yesod works.</p>
|
||
|
||
<blockquote>
|
||
<p>Note: if something is messed up use the following command line:
|
||
<pre class="twilight">
|
||
<span class="Keyword">></span> <span class="Constant">\r</span>m -rf dist/* <span class="Keyword">;</span> cabal-dev install <span class="Keyword">&&</span> yesod –dev devel
|
||
<span class="Keyword">></span> </p>
|
||
</blockquote>
|
||
<p></pre></p>
|
||
|
||
<p>Until the end of the tutorial, use another terminal and let this one open in a corner to see what occurs.</p>
|
||
|
||
<h2 id="configure-git">Configure git</h2>
|
||
|
||
<p>This step is not mandatory for a tutorial, but I wanted to jump directly in good practice. There are many different choice of CVS, but for this tutorial I’ll use <code>git</code>.</p>
|
||
|
||
<p>Copy this <code>.gitignore</code> file into the <code>yosog</code> folder.</p>
|
||
|
||
<div class="code"><div class="file"><a href="/Scratch/fr/blog/Yesod-tutorial-for-newbies/code/.gitignore"> ➥ .gitignore </a></div><div class="withfile">
|
||
<pre class="twilight">
|
||
cabal-dev
|
||
dist
|
||
.static-cache
|
||
static/tmp
|
||
*.sqlite3
|
||
</pre>
|
||
</div></div>
|
||
|
||
<p>Then initialize your git repository:</p>
|
||
|
||
<pre class="twilight">
|
||
<span class="Keyword">></span> git init .
|
||
<span class="Keyword">></span> git add .
|
||
<span class="Keyword">></span> git commit -a -m <span class="String"><span class="String">"</span>Initial yesod commit<span class="String">"</span></span>
|
||
</pre>
|
||
|
||
<p>Now we are almost ready to start.</p>
|
||
|
||
<h2 id="a-last-point">A last point</h2>
|
||
|
||
<p>Until here it was just an installation, an initialization and a configuration.</p>
|
||
|
||
<p>We have a directory containing a bunch of files and
|
||
we have a local web server that listen the port 3000.</p>
|
||
|
||
<p>If we modify a file inside this directory, yesod should try
|
||
to recompile as fast as possible the site.
|
||
This way, you should see the modification you do.</p>
|
||
|
||
<p>Instead of explaining the role of every file,
|
||
let’s get straight to the point.</p>
|
||
|
||
<p>Inside the <code>yosog</code> the important files/directories for this tutorial are:</p>
|
||
|
||
<ol>
|
||
<li><code>config/routes</code></li>
|
||
<li><code>Handler/</code></li>
|
||
<li><code>templates/</code></li>
|
||
<li><code>config/models</code></li>
|
||
</ol>
|
||
|
||
<p>Obviously:</p>
|
||
|
||
<ul>
|
||
<li><code>config/routes</code> is where you’ll configure the map URL → Code.</li>
|
||
<li><code>Handler/</code> contains the files that will contain the code called when a URL is accessed.</li>
|
||
<li><code>templates/</code> contains HTML, JS and CSS templates. </li>
|
||
<li><code>config/models</code> is where you’ll configure the persistent objects (database tables).</li>
|
||
</ul>
|
||
|
||
<p>Also note until here we don’t even typed any line of Haskell.
|
||
It is now time to start the interesting stuff.</p>
|
||
|
||
<h2 id="protected-echo">Protected echo</h2>
|
||
|
||
<p>To verify the quality of the security of the yesod framework, let’s make a minimal echo application.</p>
|
||
|
||
<p>Our goal:</p>
|
||
|
||
<p>Make a server that when accessed <code>/echo/</code><em>[some text]</em> should return a web page containing “some text” inside an <code>h1</code> bloc.</p>
|
||
|
||
<p>For example, accessing <a href="http://localhost:3000/echo/some%20text"><code>http://localhost:3000/echo/some%20text</code></a>, should display “some text” in an %html web page.</p>
|
||
|
||
<p>First, we must declare URL of the form /echo/… are meaningful.</p>
|
||
|
||
<p>Let’s take a look at the file <code>config/routes</code>:</p>
|
||
|
||
<pre class="twilight">
|
||
/static StaticR Static getStatic
|
||
/auth AuthR Auth getAuth
|
||
|
||
/favicon.ico FaviconR GET
|
||
/robots.txt RobotsR GET
|
||
|
||
/ RootR GET
|
||
</pre>
|
||
|
||
<p>We want to add a route of the form <code>/echo/[anything]</code> somehow and do some action with this.
|
||
We add the following:</p>
|
||
|
||
<pre>
|
||
/echo/#String EchoR GET
|
||
</pre>
|
||
|
||
<p>This line contains three elements: the <span class="sc">url</span> pattern, a handler name, an HTTP method.
|
||
I am not particularly fan of the big R in the end of handler names.
|
||
But this is the standard convention, then let’s use it.</p>
|
||
|
||
<p>If you save <code>config/routes</code>, you should see your terminal in which you launched <code>yesod devel</code> activate and certainly displaying an error message.</p>
|
||
|
||
<pre>
|
||
Application.hs:31:1: Not in scope: `getEchoR'
|
||
</pre>
|
||
|
||
<p>Why? Simply because we didn’t written the code for the handler <code>EchoR</code>.
|
||
Now, let’s do this. Edit the file <code>Handler/Root.hs</code> and append this:</p>
|
||
|
||
<pre class="twilight">
|
||
<span class="Entity">getEchoR</span> :: <span class="Constant">String</span> → <span class="Constant">Handler</span> <span class="Constant">RepHtml</span>
|
||
getEchoR theText = <span class="Keyword">do</span>
|
||
defaultLayout $ <span class="Keyword">do</span>
|
||
[whamlet|<h1>#{theText}|]
|
||
</pre>
|
||
|
||
<p>Don’t worry if you find all of this a bit cryptic.
|
||
This is normal when learning a new framework.
|
||
In short it just declare a function named getEchoR with one argument (<code>theText</code>) of type String.
|
||
When this function is called, it return a “Handler RepHtml” whatever it is.
|
||
But mainly this will encapsulate our expected result inside an HTML text.</p>
|
||
|
||
<p>After saving the file, you should see yesod recompile the application.
|
||
When the compilation is finished you’ll see the message: <code>Starting devel application</code>.</p>
|
||
|
||
<p>Now you can visit: <a href="http://localhost:3000/echo/Yesod%20rocks!"><code>http://localhost:3000/echo/Yesod%20rocks!</code></a></p>
|
||
|
||
<p>TADA! It works.</p>
|
||
|
||
<h3 id="secure">Secure?</h3>
|
||
|
||
<p>Let’s try to attack our website by entering a text with special characters:</p>
|
||
|
||
<p><a href="http://localhost:3000/echo/<a>I'm <script>alert("Bad!");"><code>http://localhost:3000/echo/<a>I'm <script>alert("Bad!");</code></a></p>
|
||
|
||
<p>All should work better than expected.</p>
|
||
|
||
<p>The special characters are protected for us.
|
||
If you have a malicious user, he could not hide some bad script inside his login name for example.</p>
|
||
|
||
<p>This is a direct consequence of <em>type safety</em>.
|
||
The URL string is put inside a URL type.
|
||
Then the interesting part in the URL is put inside a String type. To pass from URL type to String type some transformation are made. For example, replace all “<code>%20</code>” by space characters.
|
||
Then to show the String inside an HTML document, the string is put inside an HTML type. Some transformations occurs like replace “<code><</code>” by “<code>&lt;</code>”.
|
||
Thanks to yesod, most of tedious string transformation job is done for us.</p>
|
||
|
||
<pre class="twilight">
|
||
<span class="String"><span class="String">"</span>http://localhost:3000/echo/some%20text<a><span class="String">"</span></span> :: URL
|
||
↓
|
||
<span class="String"><span class="String">"</span>some text<a><span class="String">"</span></span> :: String
|
||
↓
|
||
<span class="String"><span class="String">"</span>some text &lt;a&gt;<span class="String">"</span></span> :: HTML
|
||
</pre>
|
||
|
||
<p>That was the first very minimal example, and we already
|
||
verified Yesod protect us from many common errors.</p>
|
||
|
||
<p>Then not only Yesod is fast, it is also relatively secure.</p>
|
||
|
||
<h2 id="cleaning-up">Cleaning up</h2>
|
||
|
||
<p>This first example was nice, but for simplicity reason we didn’t used best practices.</p>
|
||
|
||
<p>First we will separate the handler code into different files.
|
||
After that we will use <code>Data.Text</code> instead of <code>String</code>.
|
||
Finally we’ll use a template file to better separate our view.</p>
|
||
|
||
<h3 id="separate-handlers">Separate handlers</h3>
|
||
|
||
<p>In a first time create a new file <code>Handler/Echo.hs</code> containing:</p>
|
||
|
||
<pre class="twilight">
|
||
<span class="Keyword">module</span> <span class="Constant">Handler</span>.<span class="Constant">Echo</span> <span class="Keyword">where</span>
|
||
|
||
<span class="Keyword">import</span> <span class="Constant">Import</span>
|
||
|
||
<span class="Entity">getEchoR</span> :: <span class="Constant">String</span> → <span class="Constant">Handler</span> <span class="Constant">RepHtml</span>
|
||
getEchoR theText = <span class="Keyword">do</span>
|
||
defaultLayout $ <span class="Keyword">do</span>
|
||
[whamlet|<h1>#{theText}|]
|
||
</pre>
|
||
|
||
<p>Do not forget to remove the getEchoR function inside the <code>Handler/Root.hs</code> file.</p>
|
||
|
||
<p>We must declare the file inside the cabal configuration file <code>yosog.cabal</code>. Just after <code>Handler.Root</code> add:</p>
|
||
|
||
<pre>
|
||
Handler.Echo
|
||
</pre>
|
||
|
||
<p>We must also declare the new Handler module inside <code>Application.hs</code>.
|
||
Just after the “<code>import Handler.Root</code>”, add:</p>
|
||
|
||
<pre class="twilight">
|
||
<span class="Keyword">import</span> <span class="Constant">Handler</span>.<span class="Constant">Echo</span>
|
||
</pre>
|
||
|
||
<h3 id="use-datatext-instead-of-string">Use <code>Data.Text</code> instead of <code>String</code></h3>
|
||
|
||
<p>Now our handler is separated in another file.</p>
|
||
|
||
<p>But we used <code>String</code> but it is a good practice to use <code>Data.Text</code> instead.</p>
|
||
|
||
<p>To declare we will use <code>Data.Text</code> we modify the file <code>Foundation.hs</code>.
|
||
Add an import directive just after the last one:</p>
|
||
|
||
<pre class="twilight">
|
||
import Data.Text
|
||
</pre>
|
||
|
||
<p>And also we must modify <code>config/routes</code> and our handler accordingly. Replace <code>#String</code> by <code>#Text</code> in <code>config/routes</code>:</p>
|
||
|
||
<pre>
|
||
/echo/#Text EchoR GET
|
||
</pre>
|
||
|
||
<p>And do the same in <code>Handler/Echo.hs</code>:</p>
|
||
|
||
<div class="code"><div class="file"><a href="/Scratch/fr/blog/Yesod-tutorial-for-newbies/code/Echo.hs"> ➥ Echo.hs </a></div><div class="withfile">
|
||
<pre class="twilight">
|
||
<span class="Keyword">module</span> <span class="Constant">Handler</span>.<span class="Constant">Echo</span> <span class="Keyword">where</span>
|
||
|
||
<span class="Keyword">import</span> <span class="Constant">Import</span>
|
||
|
||
<span class="Entity">getEchoR</span> :: <span class="Constant">Text</span> → <span class="Constant">Handler</span> <span class="Constant">RepHtml</span>
|
||
getEchoR theText = <span class="Keyword">do</span>
|
||
defaultLayout $ <span class="Keyword">do</span>
|
||
[whamlet|<h1>#{theText}|]
|
||
</pre>
|
||
</div></div>
|
||
|
||
<h3 id="use-a-new-template-file">Use a new template file</h3>
|
||
|
||
<p>The last thing to change in order to do things like in
|
||
a real project is to use another template file.</p>
|
||
|
||
<p>Just create a new file <code>template/echo.hamlet</code> containing:</p>
|
||
|
||
<div class="code"><div class="file"><a href="/Scratch/fr/blog/Yesod-tutorial-for-newbies/code/echo.hamlet"> ➥ echo.hamlet </a></div><div class="withfile">
|
||
<pre class="twilight">
|
||
<h1> #{theText}
|
||
</pre>
|
||
</div></div>
|
||
|
||
<p>and modify the handler <code>Handler/Echo.hs</code>:</p>
|
||
|
||
<pre class="twilight">
|
||
<span class="Entity">getEchoR</span> :: <span class="Constant">Text</span> → <span class="Constant">Handler</span> <span class="Constant">RepHtml</span>
|
||
getEchoR theText = <span class="Keyword">do</span>
|
||
defaultLayout $ <span class="Keyword">do</span>
|
||
$(widgetFile <span class="String"><span class="String">"</span>echo<span class="String">"</span></span>)
|
||
</pre>
|
||
|
||
<p>At this point our code is clean.
|
||
Handler are grouped, we use <code>Data.Text</code> and our views are in templates.
|
||
It is now time to make a slightly more complex example.</p>
|
||
|
||
<h2 id="protected-input">Protected input</h2>
|
||
|
||
<p>Let’s make another minimal application.
|
||
You should see a form containing a Text Field and a validation button.
|
||
When you click, the next page present you the content you entered in the field.</p>
|
||
|
||
<p>First, add a new route:</p>
|
||
|
||
<pre class="twilight">
|
||
/new NewR GET POST
|
||
</pre>
|
||
|
||
<p>This time the path /new will accept GET and POST requests. Add the corresponding new Handler file:</p>
|
||
|
||
<div class="code"><div class="file"><a href="/Scratch/fr/blog/Yesod-tutorial-for-newbies/code/New.hs"> ➥ New.hs </a></div><div class="withfile">
|
||
<pre class="twilight">
|
||
<span class="Keyword">module</span> <span class="Constant">Handler</span>.<span class="Constant">New</span> <span class="Keyword">where</span>
|
||
|
||
<span class="Keyword">import</span> <span class="Constant">Import</span>
|
||
|
||
<span class="Entity">getNewR</span> :: <span class="Constant">Handler</span> <span class="Constant">RepHtml</span>
|
||
getNewR = <span class="Keyword">do</span>
|
||
defaultLayout $ <span class="Keyword">do</span>
|
||
$(widgetFile <span class="String"><span class="String">"</span>new<span class="String">"</span></span>)
|
||
|
||
<span class="Entity">postNewR</span> :: <span class="Constant">Handler</span> <span class="Constant">RepHtml</span>
|
||
postNewR = <span class="Keyword">do</span>
|
||
postedText ← runInputPost $ ireq textField <span class="String"><span class="String">"</span>content<span class="String">"</span></span>
|
||
defaultLayout $ <span class="Keyword">do</span>
|
||
$(widgetFile <span class="String"><span class="String">"</span>posted<span class="String">"</span></span>)
|
||
</pre>
|
||
</div></div>
|
||
|
||
<p>Don’t forget to declare it inside <code>yosog.cabal</code> and <code>Application.hs</code>.</p>
|
||
|
||
<p>The only new thing here is the line that get the POST parameter named “content”.
|
||
If you want to know more detail about it and form in general you can take look at <a href="http://www.yesodweb.com/book/forms">the yesod book</a>.</p>
|
||
|
||
<p>Create the two corresponding templates:</p>
|
||
|
||
<div class="code"><div class="file"><a href="/Scratch/fr/blog/Yesod-tutorial-for-newbies/code/new.hamlet"> ➥ new.hamlet </a></div><div class="withfile">
|
||
<pre class="twilight">
|
||
<span class="MetaTagAll"><span class="MetaTagAll"><</span><span class="MetaTagAll">h1</span><span class="MetaTagAll">></span></span> Enter your text
|
||
<span class="MetaTagAll"><span class="MetaTagAll"><</span><span class="MetaTagAll">form</span> <span class="MetaTagAll">method</span>=<span class="MetaTagAll">post</span> <span class="MetaTagAll">action</span>=@<span class="EmbeddedSource">{NewR}</span><span class="MetaTagAll">></span></span>
|
||
<span class="MetaTagInline"><span class="MetaTagInline"><</span><span class="MetaTagInline">input</span> <span class="MetaTagInline">type</span>=<span class="MetaTagInline">text</span> <span class="MetaTagInline">name</span>=<span class="MetaTagInline">content</span><span class="MetaTagInline">></span></span>
|
||
<span class="MetaTagInline"><span class="MetaTagInline"><</span><span class="MetaTagInline">input</span> <span class="MetaTagInline">type</span>=<span class="MetaTagInline">submit</span><span class="MetaTagInline">></span></span>
|
||
</pre>
|
||
</div></div>
|
||
|
||
<div class="code"><div class="file"><a href="/Scratch/fr/blog/Yesod-tutorial-for-newbies/code/posted.hamlet"> ➥ posted.hamlet </a></div><div class="withfile">
|
||
<pre class="twilight">
|
||
<span class="MetaTagAll"><span class="MetaTagAll"><</span><span class="MetaTagAll">h1</span><span class="MetaTagAll">></span></span>You've just posted
|
||
<span class="MetaTagAll"><span class="MetaTagAll"><</span><span class="MetaTagAll">p</span><span class="MetaTagAll">></span></span>#<span class="EmbeddedSource">{postedText}</span>
|
||
<span class="MetaTagAll"><span class="MetaTagAll"><</span><span class="MetaTagAll">hr</span><span class="MetaTagAll">></span></span>
|
||
<span class="MetaTagAll"><span class="MetaTagAll"><</span><span class="MetaTagAll">p</span><span class="MetaTagAll">></span></span><span class="MetaTagInline"><span class="MetaTagInline"><</span><span class="MetaTagInline">a</span> <span class="MetaTagInline">href</span>=@<span class="EmbeddedSource">{NewR}</span><span class="MetaTagInline">></span></span>Get back
|
||
</pre>
|
||
</div></div>
|
||
|
||
<p>And that is all.</p>
|
||
|
||
<hr />
|
||
<div style="background-color: #800; color: #FFF; font-weight: bold; border: 2px solid #300; box-shadow: 0 0 60px #300 inset;padding-left: 2em;">
|
||
<h2 style="margin: 0 auto; text-align: center">TODO</h2>
|
||
|
||
<ul>
|
||
<li> Display something, show it is protected.
|
||
</li><li> Make the same as before, but with an input.
|
||
</li><li> Create a minimal blog system.
|
||
</li><li> Change template to html5 boilerplate.
|
||
</li><li> Use Authentification.
|
||
</li>
|
||
</ul>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
<div id="choixrss">
|
||
<a id="rss" href="http://feeds.feedburner.com/yannespositocomfr">
|
||
s'abonner
|
||
</a>
|
||
</div>
|
||
<script type="text/javascript">
|
||
$(document).ready(function(){
|
||
$('#comment').hide();
|
||
$('#clickcomment').click(showComments);
|
||
});
|
||
function showComments() {
|
||
$('#comment').show();
|
||
$('#clickcomment').fadeOut();
|
||
}
|
||
document.write('<div id="clickcomment">Commentaires</div>');
|
||
</script>
|
||
<div class="flush"></div>
|
||
<div class="corps" id="comment">
|
||
<h2 class="first">commentaires</h2>
|
||
<noscript>
|
||
Vous devez activer javascript pour commenter.
|
||
</noscript>
|
||
|
||
<script type="text/javascript">
|
||
var idcomments_acct = 'a307f0044511ff1b5cfca573fc0a52e7';
|
||
var idcomments_post_id = '/Scratch/fr/blog/Yesod-tutorial-for-newbies/';
|
||
var idcomments_post_url = 'http://yannesposito.com/Scratch/fr/blog/Yesod-tutorial-for-newbies/';
|
||
</script>
|
||
<span id="IDCommentsPostTitle" style="display:none"></span>
|
||
<script type='text/javascript' src='/Scratch/js/genericCommentWrapperV2.js'></script>
|
||
|
||
</div>
|
||
|
||
<div id="entete" class="corps_spaced">
|
||
<div id="liens">
|
||
<ul><li><a href="/Scratch/fr/">Bienvenue</a></li>
|
||
<li><a href="/Scratch/fr/blog/">Blog</a></li>
|
||
<li><a href="/Scratch/fr/softwares/">Softwares</a></li>
|
||
<li><a href="/Scratch/fr/about/">À propos</a></li></ul>
|
||
</div>
|
||
<div class="flush"></div>
|
||
<hr/>
|
||
<div id="next_before_articles">
|
||
<div id="previous_articles">
|
||
articles précédents
|
||
|
||
<div class="previous_article">
|
||
<a href="/Scratch/fr/blog/SVG-and-m4-fractals/"><span class="nicer">«</span> Accroître le pouvoir des languages déficients.</a>
|
||
</div>
|
||
|
||
|
||
<div class="previous_article">
|
||
<a href="/Scratch/fr/blog/Yesod-excellent-ideas/"><span class="nicer">«</span> Les idées de yesod</a>
|
||
</div>
|
||
|
||
|
||
<div class="previous_article">
|
||
<a href="/Scratch/fr/blog/programming-language-experience/"><span class="nicer">«</span> Mon expérience avec les languages de programmation</a>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
<div id="next_articles">
|
||
articles suivants
|
||
|
||
|
||
|
||
|
||
</div>
|
||
<div class="flush"></div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="bottom">
|
||
<div>
|
||
<a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/deed.fr">Droits de reproduction ©, Yann Esposito</a>
|
||
</div>
|
||
<div id="lastmod">
|
||
Écrit le : 28/12/2011
|
||
modifié le : 30/12/2011
|
||
</div>
|
||
<div>
|
||
Site entièrement réalisé avec
|
||
<a href="http://www.vim.org">Vim</a>
|
||
et
|
||
<a href="http://nanoc.stoneship.org">nanoc</a>
|
||
</div>
|
||
<div>
|
||
<a href="/Scratch/fr/validation/">Validation</a>
|
||
<a href="http://validator.w3.org/check?uri=referer"> [xhtml] </a>
|
||
.
|
||
<a href="http://jigsaw.w3.org/css-validator/check/referer?profile=css3"> [css] </a>
|
||
.
|
||
<a href="http://validator.w3.org/feed/check.cgi?url=http%3A//yannesposito.com/Scratch/fr/blog/feed/feed.xml">[rss]</a>
|
||
</div>
|
||
</div>
|
||
<div class="clear"></div>
|
||
</div>
|
||
</body>
|
||
</html> |