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

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

なんとなく作ったサイト

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


Github(注意すること)

https://github.com/mshige1979

Perl入学式#6に参加

イベント情報

イベント

Perl入学式in東京 #6

日時

2014/3/1(土)13:00~18:00

URL

URL

場所

東京都品川区西五反田1-21-8 KSS五反田ビル 株式会社ガイアックス 6Fセミナールーム

参加人数

30人くらい

説明資料

これ

今回は前回の復習とかなし

いきなり、Mojoliciousのお話からで前回の答え合わせとはななかった

準備

インストール
cpanm Mojolicious

※基本的にはcpanmでインストール

アプリジェネレート
mojo generate lite_app hello

※これで「hello」というファイルを作成して、このファイルの中にシンプルなWAFが出来上がる。

サンプル

hello
#!/usr/bin/env perl
use Mojolicious::Lite;

# Documentation browser under "/perldoc"
plugin 'PODRenderer';

get '/' => sub {
  my $self = shift;
  $self->stash( title => "hello world" );
  $self->render('index');
};

get '/profile' => sub {
  my $self = shift;
  $self->stash( name => "shigeharu matsumoto" );
  $self->stash( hobby => "昼寝" );
  $self->stash( language => "Perl" );
  $self->render('profile');
};

get '/fizzbuzz' => sub {
  my $self = shift;
  $self->stash(
    title => "fizz buzz test"
  );
  $self->render('fizzbuzz');
};

app->start;
__DATA__

@@ index.html.ep
% layout 'default';
Welcome to the Mojolicious real-time web framework!

@@ profile.html.ep
<html>
  <head>
    <title><%= $name %></title>
  </head>
  <body style="padding: 30px;">
    私の名前は<%= $name %>です。<br />
    趣味は<%= $hobby%>で、好きなプログラミング言語は<%= $language %>です。

  </body>
</html>

@@ layouts/default.html.ep
<!DOCTYPE html>
<html>
  <head><title><%= title %></title></head>
  <body><%= content %></body>
</html>

@@ fizzbuzz.html.ep
<html>
  <head>
    <title><%= $title %></title>
  </head>
  <body style="padding: 30px;">
    <div>
      1から100まででFizz、Buzzを出力する
    </div>
    <hr />
    <table border="1">
      <tr>
  <% for(my $num = 1;$num <= 100;$num++){ %>
        <th><%= $num %></th>
        <td>
    <% if($num % 3 == 0){ %>
  Fizz
    <% }elsif($num % 5 == 0){ %>
  Buzz
    <% }elsif($num % 3 == 0 && $num % 5 == 0){ %>
  FizzBuzz
    <% }else{ %>
  <%= $num %>
    <% } %>
        </td>
      </tr/>
  <% } %>
    </table>
  </body>
</html>
簡易BBS
#!/usr/bin/env perl
use Mojolicious::Lite;
use File::Slurp;

my @entries = ();

get '/' => sub {
  my $self = shift;
  
  $self->stash( entries => \@entries);

  $self->render('index');
};

post '/post' => sub {
  my $self = shift;

  my $entry = $self->param('body');
  my $name = $self->param('name');
  my $mail = $self->param('mail_address');

#  $self->stash( body => "");
#  $self->stash( entry => $entry );
  
  push @entries, {
    name => $name,
    mail_address => $mail,
    message => $entry
  }; # 配列に格納

  # $self->render('post');
  $self->redirect_to('/');
};

app->start;
__DATA__

@@ index.html.ep
% layout 'default';
% title '入力フォーム';
%= form_for '/post' => method => 'POST' => begin
  <table>
    <tr>
      <td> nama:
        %= text_field 'name'
      </td>
      <td> mail:
        %= text_field 'mail_address'
      </td>
    </tr>
    <tr>
      <td colspan="2">
        %= text_area 'body' => cols => '60' => rows => '6'
      </td>
    </tr>
  </table>
  <br />
  %= submit_button '投稿する'
% end

% for my $entry (@{$entries}) {
    <p>
      <strong>name</strong>:<%= $entry->{name} %>
      &nbsp;
      <strong>email</strong>:<%= $entry->{mail_address} %>
    </p>
    <div>
        <%= $entry->{message} %>
    </div>
    <hr />
% }

@@ post.html.ep
% layout 'default';
% title '出力';
%= form_for '/post' => method => 'POST' => begin
  %= text_field 'body'
  %= submit_button '投稿する'
% end
<p><%= $entry %></p>

@@ layouts/default.html.ep
<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>
    <div class="container" style="margin-top: 70px;">
      <div class="starter-template">
        <%= content %>
      </div>
    </div>
  </body>
</html>

まとめ

なんかヘルパーみたいのがあるけど無理して使う必要なさそうなので安心。
あれを使用するとデザイナーさんと連携するときにやりにくそうなんで…。

シンプルなものの場合はLiteの方でページ数がごちゃごちゃしそうな場合は通常のMojolicoousで対応する。
ちゃんとしたアプリの開発はまだ、やっていないのでそろそろ何か作ってみることにする。

データベースとかログとかいろいろ調べないと…

うん、アイデアはなにもないけどね

広告を非表示にする