yogsototh/scratch

Fork 0

Yann Esposito (Yogsototh) 0066291155 Lastest blog entry in progress

2011-12-29 17:05:05 +01:00

7.7 KiB

Raw Blame History

isHidden

menupriority

kind

created_at

title

author_name

author_uri

Install

First you need to install Haskell. The recommended way to do this is to use the Haskell Platform.

Secondly you need to install yesod.


> cabal update
> cabal install yesod cabal-dev

That is all. It should take some time to do this as cabal will download all package and then compile them.

Initialization

Open a terminal and:


> yesod init

I entered my name, the name of the project was yosog and the name of the Fondation was Yosog, then I chosen sqlite.

Perfect. Now you can start the development cycle:


> cd yosog
> cabal-dev install && yesod --dev devel

This will compile the entire project. In the end you should now be able to see your local website by clicking this link:

http://localhost:3000

Congratulation! You were able to see your yesod powered website. For the rest of the tutorial, use another terminal and let this one open in a corner to see what occurs.

Configure git

It is not mandatory for a tutorial, but it is a good practice to have a CVS.

To use git copy this .gitignore file into the yosog folder.


cabal-dev
dist
.static-cache
static/tmp
*.sqlite3

Then initialize your git repository:


> git init .
> git add .
> git commit -a -m "Initial yesod commit"

Now we are ready to modify our web application.

A last point

What did we done:

We have a directory containing a bunch of files
We have a local web server on port 3000

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 done.

Instead of explaining the role of every file, let's get straight to the point.

Inside the yosog the important files/directories for this tutorial are:

config/routes
Handler/
templates/
static/
config/models

Obviously:

config/routes is where you'll configure the map URL → Code.
Handler/ contains the files that will contain the code called when a URL is accessed.
templates/ contains HTML, JS and CSS templates.
static/ contains static files.
config/models is where you'll configure the persistent objects (database tables).

With these informations we should be able to do a lot. Also note until here we don't even typed any line of Haskell.

Protected echo

To verify the quality of the security of the yesod framework, let's look at a minimal echo application.

Our goal:

Accessing [http://localhost:3000/echo/some%20text], should display "some text" in an %html web page.

Let's take a look at the file config/routes:


/static StaticR Static getStatic
/auth   AuthR   Auth   getAuth
/favicon.ico FaviconR GET
/robots.txt RobotsR GET

/ RootR GET

We want to add a route of the form /echo/[anything] somehow and do some action with this. We add the following:

/echo/#String EchoR GET

This line contains three elements: the url 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 I use it.

If you save config/routes, you should see your terminal in which you launched yesod devel do things. And certainly break in error.

Application.hs:31:1: Not in scope: `getEchoR'

Why? Simply because we didn't written the code for the handler EchoR. Now, let's do this. Edit the file Handler/Root.hs and append this:


getEchoR :: String -> Handler RepHtml
getEchoR theText = do
    defaultLayout $ do
        [whamlet|

`#{theText}|]`
After saving the file, you should see yesod recompile the application. When the compilation is finished you'll see the message: `Starting devel application`. You can now visit: `http://localhost:3000/echo/Yesod%20rocks!`

TADA! It works.

Now, let's try to attack our website by entering name with special characters:

[`http://localhost:3000/echo/<a href="badlink">I'm <script>alert("Bad!");`](http://localhost:3000/echo/I'm " %>

The special characters are protected for us. If you have a malicious user, he could not hide some bad script inside his name for example.

This is a direct consequence of type safety. 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 "`%20`" 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 "`<`" by "`<`". Thanks to yesod, most of tedious string transformation job is done for us.
`"http://localhost:3000/echo/some%20text" :: URL ↓ "some text" :: String ↓ "some text <a>" :: HTML`
That was the first very minimal example, and we already verified Yesod protect us from many common errors.

For a first example it is nice, but we should now organize the code in a better way.

For example, we should have created another file inside the Handler directory. And we also should have created another template file.

<%= startTodo %>

Explain how to separate the Handler files.
Explain how to use another template.

<%= endTodo %>

Protected input

<%= startTodo %>

Display something, show it is protected.
Make the same as before, but with an input.
Create a minimal blog system.
Change template to html5 boilerplate.
Use Authentification.

<%= endTodo %>

7.7 KiB Raw Blame History