technological blog

Ocsigenで再帰するフォーム

Ocsigenで再帰するフォームを作ってみた。

OcsigenのチュートリアルのActionというところを真似してみた。

作ってみたページの外観↓
再帰するフォーム(html)（入力しても意味ないよ）

以下はそのコード



open XHTML.M

open Eliom

open Eliom.Xhtml

open Lwt



let list_mapi f l =

  let rec local i = function

    | [] -> []

    | hd::tl -> f i hd :: local (i+1) tl

  in

    local 0 l



let mylist = ref []



let table_of_hitchart () =

  table 

    (tr (td[pcdata "[トラック]"]) [td[pcdata "　　[曲名]"]])

    (list_mapi (fun i s ->

		  tr (td[pcdata (string_of_int(i+1))]) [td[pcdata s]]) !mylist)



let my_table = create_table ()







let action_session = 

  new_service ~url:["add"] ~get_params:unit ()



let connect_action = 

  new_post_coservice' ~post_params:(string "moji") ()

    

let disconnect_action = 

  Actions.register_new_post_coservice'

    unit 

    (fun sp () () -> 

      close_session sp >>= 

      (fun () -> return []))



let disconnect_box sp s = 

  post_form disconnect_action sp 

    (fun _ -> [p [submit_input s]]) ()



let input_box sp moji = 

  [p [pcdata "曲目を追加する: "; 

      string_input moji]]



let home_action sp () () = 

  let f = post_form connect_action sp (input_box sp) () in

  return

    (html

       (head (title (pcdata "ADD")) [])

       (body [h1 [pcdata "recursive form Example"];

	      h2 [pcdata "再生する曲目リスト"];

	      f;

	      table_of_hitchart()]))

    

let _ = register ~service:action_session home_action



let rec launch_session sp moji =

  mylist := (moji :: !mylist);

  set_session_data my_table sp moji



let _ = Actions.register

    connect_action

    (fun sp () login -> 

      close_session sp >>=

      (fun () -> launch_session sp login;

        return []))

Ocsigenでフォームを作ってみる

Ocsigenで入力フォームを作ってみた。

こんなページができた: ページの外観(html)(ボタンは押しても意味ないよ。)

このページを生成するプログラムを以下のようにかいた。



open XHTML.M

open Eliom

open Eliom.Xhtml

open Lwt



let no_post_param_service = 

  register_new_service 

    ~url:["post"]

    ~get_params:unit

    (fun _ () () -> return

      (html

         (head (title (pcdata "")) [])

         (body [h1 [pcdata 

                      "Version of the page without POST parameters"]])))



let my_service_with_post_params = 

  register_new_post_service

    ~fallback:no_post_param_service

    ~post_params:(string "value1" ** string "value2")

    (fun _ () (value1,value2) ->  return

      (html

         (head (title (pcdata value1)) [])

         (body [h1 [pcdata value2]])))



let form2 = register_new_service ["form2"] unit

  (fun sp () () -> 

     let f =

       (post_form my_service_with_post_params sp

          (fun (chaine1, chaine2) -> 

            [p [pcdata "TITLE: ";

                string_input chaine1];

	     p [pcdata "BODY: ";

		string_input chaine2];

	     p [submit_input "GO"]]) ()) in

     return

       (html

         (head (title (pcdata "form")) [])

         (body [f])))

このフォームにはふたつの入力ボックスがある。

例えば上のボックスに hugahuga 下のボックスに mugomugo と入力して、ボタンを押すと、タイトルが hugahuga で、本文が mugomugo であるようなページに遷移する。

ちょうど、こんな感じのページ(html)だ。

ちなみに入力ボックス内にタグを入れられても、それは単なる文字列として扱い、入力によってページの構造を破壊されることを防いでいる。
タグを入れられても大丈夫！(html)

Ocsigen入門　手順7

7. ブラウザで確認

ブラウザを起動してhttp://localhost/my_samples/helloにアクセスしてみる。

できた！

Ocsigenで生成されたページのソース(html)

Ocsigen入門　手順6

6. ocsigenを起動

# ocsigen
で、ocsigenを起動させた。

Ocsigen入門　手順5

5. コンパイルして、ocsigen.confを設定

先ほどのファイルhello.mlを以下のようにコンパイルした。

$ ocamlc -I /usr/local/GODI/lib/ocaml/site-lib/ocsigen/ -c hello.ml

これで/home/source/ディレクトリ内にhello.cmoというファイルができあがった。

そして/etc/ocsigen/にあるocsigen.confというocsigenの設定ファイルに以下の3行を追加した。



      <site dir="my_samples" charset="iso-8859-1">

        <eliom module="/home/source/hello.cmo" />

      </site>

これでmy_samplesというディレクトリの中で、先ほど指定したプログラムによるページがみれるはずである。

Ocsigen入門　手順4

4. Ocsigenのライブラリを使ってプログラムを書く

例えば/home/sourceというディレクトリの中に以下のようなファイル test.ml を作成した。



open XHTML.M

open Eliom

open Eliom.Xhtml

open Lwt



let _ = 

  register_new_service 

    ~url:["hello"]

    ~get_params:unit

    (fun _ () () -> 

      return 

        (html

          (head (title (pcdata "Ocsigen")) [])

          (body [h1 [pcdata "Hello Ocsigen!"]])))

これはタイトルが"Ocsigen"で、本文が"Hello Ocsigen!"であり、urlは /helloであるようなページの表示を目指して作ったプログラムである。

このプログラムのソース: test.ml(ml)

Ocsigen入門　手順3

3. Ocsigen0.99.1をインストール

そして、いよいよOcsigenをインストール。

READMEにしたがって以下のようにするとインストールできた。

# sh configure
# make depend
# make
# make install

Ocsigen入門　手順2

2. ocaml, ocamlfindなどOcsigenに必要なものをインストール

GODIをインストールしたことによって、/usr/local/GODI/sbin/godi_consoleというコマンドが使えるようになった。このコマンドによって、簡単に必要なものをインストールできた。

[ 47] pcre
[ 87] findlib
[111] ocaml-dbm
[118] ocaml-src
[119] ocaml-ssl
[127] ocamlnet

などを選んでインストールした。

Ocsigen入門　手順1

1. GODIをインストール

まずGODIをインストールした。

以下の手順でインストールが成功した。

$ su
# ./bootstrap --prefix /usr/local/GODI
# PATH=/usr/local/GODI/bin:/usr/local/GODI/sbin:PATH
# export PATH
# ./bootstrap_stage2

(注意！：gccやg++などの基本的なものがないと失敗する。)

Ocsigen入門　概要

OcsigenはOCamlを使ったWeb Serverで、安全で質の高いWebアプリケーションが簡単に作れるらしい。
以上の理由よりOcsigenを導入してみようと思った。
OcsigenはOCamlを使うので、OCamlをインストールしなければならない。また、ocamlfindや、ocamlnetなどの基本的なライブラリたちも必要らしい、のちのち便利なのでまず、これらをインストールしようと思った。
OCamlたちをインストールするためにはGODIが便利である、と書いてあったので、まずGODIをインストールした。

technological blog

Ocsigenで再帰するフォーム

Ocsigenでフォームを作ってみる

Ocsigen入門 手順7

Ocsigen入門 手順6

Ocsigen入門 手順5

Ocsigen入門 手順4

Ocsigen入門 手順3

Ocsigen入門 手順2

Ocsigen入門 手順1

Ocsigen入門 概要