Created by sironekotoro 2018-08-26
BBS.pl
      #!/usr/bin/env perl
use Mojolicious::Lite;

# Perl入学式 2018 第5回 最終問題
# https://github.com/perl-entrance-org/workshop-2018/blob/master/5th/slide.md#%E6%9C%80%E7%B5%82%E5%95%8F%E9%A1%8C

my @entries = ();

get '/' => sub {
    my $c = shift;
    $c->stash( entries => \@entries );
    $c->render('index');
};

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

    if ( $c->param('email') eq 'age' ) {
        shift @entries;
    }
    else {
        my %entry = (
            name  => $c->param('name'),
            email => $c->param('email'),
            body  => $c->param('body'),
        );

        push @entries, \%entry;
    }
    $c->redirect_to('/');
};

app->start;
__DATA__

@@ index.html.ep
% layout 'default';
% title 'Perl入学式 2018 第5回 最終問題';

<h1>Perl入学式 2018 第5回 最終問題</h1>
<a href="https://github.com/perl-entrance-org/workshop-2018/blob/master/5th/slide.md#%E6%9C%80%E7%B5%82%E5%95%8F%E9%A1%8C">https://github.com/perl-entrance-org/workshop-2018/blob/master/5th/slide.md#%E6%9C%80%E7%B5%82%E5%95%8F%E9%A1%8C</a>

<ul>
  <li>これまで作成してきた簡易 BBS を, 改造してみましょう!</li>
  <li>例えば...?</li>
  <ul>
    <li>名前/メールアドレスを入力/表示できるようにする...</li>
    <li>メールアドレスが｢age｣であれば, 記事をpushではなくunshiftする...</li>
    <li>テンプレートを整理して, 見た目を綺麗にする...</li>
    <li>Twitter Bootstrapを使ってみる...</li>
  </ul>
</ul>

<h1>解答例</h1>
<p>以下を実装</p>
<ul>
  <li>名前/メールアドレスを入力/表示できるようにする...</li>
  <li>メールアドレスが｢age｣であれば, 記事をpushではなくunshiftする...</li>
</ul>
<p>おまけ</p>
<ul>
  <li>テストデータ入力用のJavascriptを実装</li>
</ul>
%= form_for '/post' => method => 'POST' => begin
 なまえ:<%= text_field 'name'%>
 メール:<%= text_field 'email'%>
 カキコ:<%= text_field 'body'%>
  %= submit_button '投稿する'
% end

<!-- テスト投稿を楽にするボタン -->
<input type="button" value="ダミーデータ入力用ボタン(Javascript)" onclick="
  // inputタグの要素を集める
  const inputs = document.getElementsByTagName('input');

  // 0〜10000までの乱数を求める
  const random = Math.random() * 100001;

  // 乱数を整数に切り詰める
  const randomInt = parseInt(random);

  // 最初の要素のinputタグの中身を NAME_乱数 に書き換える
  inputs[0].value = 'NAME_' + randomInt;

  // 2番目の要素のinputタグの中身を MAIL_乱数@example.com に書き換える
  inputs[1].value = 'MAIL_' + randomInt + '@example.com';

  // 3番目の要素のinputタグの中身を TEXT_乱数 に書き換える
  inputs[2].value = 'TEXT_' + randomInt;
"/>

<ol>
% for my $entry (@{$entries}){
  <li>
    <ul style="border:2px solid #FF0000;">
    <li>なまえ：<%= $entry->{'name'} %></li>
    <li>メール：<%= $entry->{'email'} %></li>
    <li>本　文：<%= $entry->{'body'} %></li>
    </ul>
  </li>
% }
</ol>

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

    
Comments (0)

HTTPS
SSH
You can clone a snippet to your computer for local editing. Learn more.
Snippets

sironekotoro Perl入学式 2018 第5回最終問題

Comments (0)
