Perl入学式#6に参加 - m_shige1979のときどきITブログ

イベント情報

イベント

Perl入学式in東京 #6

日時

2014/3/1（土）13:00～18:00

URL

場所

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

参加人数

30人くらい

ハッシュタグ

#Perl入学式

説明資料

これ

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

いきなり、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>