m_shige1979のささやかな抵抗と欲望の日々

プログラムの勉強をしながら学習したことや経験したことをぼそぼそと書いていきます

なんとなく作ったサイト

http://www.it-check-matome.info/


Github(注意すること)

https://github.com/mshige1979

PerlでWebアプリのモデルなしサンプル

なんか色々と迷走している感じ、調べているけどどんなものを作成するのがいいかで結構悩み中

Mojoliciousで作成する

生成
$ mojo generate app Sample::Web

[vagrant@localhost mojo1]$ mojo generate app Sample::Web
  [mkdir] /vagrant/perl/mojo1/sample_web/script
  [write] /vagrant/perl/mojo1/sample_web/script/sample_web
  [chmod] sample_web/script/sample_web 744
  [mkdir] /vagrant/perl/mojo1/sample_web/lib/Sample
  [write] /vagrant/perl/mojo1/sample_web/lib/Sample/Web.pm
  [mkdir] /vagrant/perl/mojo1/sample_web/lib/Sample/Web
  [write] /vagrant/perl/mojo1/sample_web/lib/Sample/Web/Example.pm
  [mkdir] /vagrant/perl/mojo1/sample_web/t
  [write] /vagrant/perl/mojo1/sample_web/t/basic.t
  [mkdir] /vagrant/perl/mojo1/sample_web/log
  [mkdir] /vagrant/perl/mojo1/sample_web/public
  [write] /vagrant/perl/mojo1/sample_web/public/index.html
  [mkdir] /vagrant/perl/mojo1/sample_web/templates/layouts
  [write] /vagrant/perl/mojo1/sample_web/templates/layouts/default.html.ep
  [mkdir] /vagrant/perl/mojo1/sample_web/templates/example
  [write] /vagrant/perl/mojo1/sample_web/templates/example/welcome.html.ep
[vagrant@localhost mojo1]$
$
ディレクトリ構成
[vagrant@localhost mojo1]$ tree
.
└── sample_web
    ├── lib
    │   └── Sample
    │       ├── Web
    │       │   └── Example.pm
    │       └── Web.pm
    ├── log
    ├── public
    │   └── index.html
    ├── script
    │   └── sample_web
    ├── t
    │   └── basic.t
    └── templates
        ├── example
        │   └── welcome.html.ep
        └── layouts
            └── default.html.ep

11 directories, 7 files
[vagrant@localhost mojo1]$
起動
[vagrant@localhost mojo1]$ morbo sample_web/script/sample_web            
Server available at http://127.0.0.1:3000.

f:id:m_shige1979:20140803082243p:plain

Web.pm

sample_web/lib/Sample/Web.pm
package Sample::Web;
use Mojo::Base 'Mojolicious';

# This method will run once at server start
sub startup {
  my $self = shift;

  # Documentation browser under "/perldoc"
  $self->plugin('PODRenderer');

  # Router
  my $r = $self->routes;

  # Normal route to controller
  $r->get('/')->to('example#welcome');
  $r->get('/test1')->to('test1#index');
  $r->get('/test1/new')->to('test1#post');
  $r->post('/test1/create')->to('test1#create');

}

1;

※なんか適当に追加

新しくTest1.pm追加
package Sample::Web::Test1;
use Mojo::Base 'Mojolicious::Controller';

# This action will render a template
sub index {
  my $self = shift;

  # template変数を設定
  #$self->stash->{msg} = "index";

  $self->app->log->debug("index");

  # template配下のtest1.aaa.html.ep
  $self->render();

}

sub post {
  my $self = shift;

  # template変数を設定
  #$self->stash->{msg} = "index";

  $self->app->log->debug("new");

  # template配下のtest1.aaa.html.ep
  $self->render('test1/post');

}

sub create {
  my $self = shift;

  $self->redirect_to('/test1');

}

1;

template

layouts/default.html.ep
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/bootstrap-theme.min.css">
    <title><%= title %></title>
  </head>
  <body>
    <div class="header">

    </div>
    <div class="container">
        <%= content %>
    </div>
    <div class="footer">

    </div>
    <script src="/js/jquery-2.1.1.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>

  </body>
</html>
test1/index.html.ep
% layout 'default';
% title 'Welcome';

<h1>一覧を表示する画面</h1>

<a href="/test1/new" class="btn btn-default">新規</a>
<br />
<div class="row">
    <br />
    <table class="table">
        <tr>
            <td>1</td>
            <td>タイトル1</td>
            <td>本文1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>タイトル2</td>
            <td>本文2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>タイトル2</td>
            <td>本文3</td>
        </tr>
    </table>
</div>
post.html.cp
% layout 'default';
% title 'Welcome';

<h1>入力してpostする画面</h1>

<form action="./create" method="post">
    <form role="form">
      <div class="form-group">
        <label for="title">タイトル</label>
        <input type="text" class="form-control" id="title" placeholder="タイトル">
      </div>
      <div class="form-group">
        <label for="body">Password</label>
        <input type="text" class="form-control" id="body" placeholder="本文">
      </div>
      <button type="submit" class="btn btn-default">登録する</button>
    </form>
</form>

※デザインはtwitter bootstrapを使用する

確認

f:id:m_shige1979:20140803102321p:plain

f:id:m_shige1979:20140803102336p:plain

モデルはまだ

モデルを介したオブジェクトの操作をperlでうまく再現できていないのでサンプルをそのまま流用しても対応出来ない感じがする。
先にDBIかTengを使用したオブジェクトの制御の学習をしないといけない

所感

Mojolicoousのアプリケーションをliteではないappの方で行った複数のファイルに分割できる分管理はしやすくなった分、データの流れを上手く把握しないと動かせない感じです。

基本的なコントローラーとビューはわかったけどモデルの制御というか他のモジュールとの連携をうまく使えないと失敗するかもモジュールの継承などをうまく使えないときちんと学習する必要があります。


Webアプリエンジニア養成読本[しくみ、開発、環境構築・運用…全体像を最新知識で最初から! ] (Software Design plus)

Webアプリエンジニア養成読本[しくみ、開発、環境構築・運用…全体像を最新知識で最初から! ] (Software Design plus)

Webアプリエンジニア養成読本[しくみ、開発、環境構築・運用…全体像を最新知識で最初から! ] (Software Design plus)

Webアプリエンジニア養成読本[しくみ、開発、環境構築・運用…全体像を最新知識で最初から! ] (Software Design plus)

広告を非表示にする