Snippets
Created by
sironekotoro
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 | #!/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)
You can clone a snippet to your computer for local editing. Learn more.