Snippet revisions — Bitbucket

+#!/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>

Snippets

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

File BBS.pl Added