前回の記事で紹介した
PHP学習サイトでレベル20の問題を解いてみました。実際、学習サイトでは解かなかったのですが一応、サンプルサイトを作ってみました（※最新のブラウザでしか表示されません）。作るにあたって苦になった所はゼロです(ΦωΦ)ﾌﾌﾌ…。HTML5のFormタグ書いてｺﾞﾆｮｺﾞﾆｮ…(ﾉﾟдﾟ(;￣Д￣)。して送信しています。POSTで送信して自分自身でキャチした値を表示しています。かなり文字などは見えにくいですが、お遊びで作ったのでユーザー側の操作性などは知らんぷりです。送信ボタン押下後、一回ページが再度読み込まれたり違うページが読み込まれて処理される処理のことを同期処理といいます。じゃ非同期処理はどんなのっていうのを、今度、サンプルサイトを作ってみることにします。今回、重要なポイントはformタグ部分とPHPの処理部分です。その他はおまけです。※今回のサンプルコードで見て欲しかったのは、送信した時にHTMLタグなど記入されていたら変換している事とtextareaに改行コードが入っていたら改行して表示させているトコロがポイントです。あとの背景に動画流しているとか、そういうのはε-(´∀｀*)ﾎｯといてください自己満足の世界ですから・・・。
サンプルサイトを貼っときます。
https://zip358.com/tool/sample-echo/index.php
必要なファイル
同じ階層に必要なファイルindex.php,vide01.mp4(フリーの動画を引っ張ってきました(^^)）
index.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>zip358.com:sample-echo?</title>
<style>
video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
background-size: cover;
}
textarea{
width:250px;
height:300px;
}
#main{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width:650px;
height:600px;
background:#556B2F;
filter:alpha(opacity=40);
-moz-opacity: 0.4;
opacity: 0.4;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 40px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 30px;
-moz-border-radius-bottomleft: 40px;
}
#sub{
width:250px;
height:400px;
overflow: scroll;
filter:alpha(opacity=80);
-moz-opacity: 0.8;
opacity: 0.8;
background:#fff;
color:#DC143C;
font-size:16px;
}
form{
margin: 50px;
}
input,textarea{
filter:alpha(opacity=80);
-moz-opacity: 0.8;
opacity: 0.8;
color:#DC143C;
}
</style>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<?php
?>
<video autoplay="" loop="" >
<source src="./vide01.mp4" type="video/mp4">
</video>
<div id="main">
<table>
<tr>
<td>
<form action="./index.php" method="post">
<input type="text" / name="name"><br><br>
<textarea name="msg"></textarea><br><br>
<input type="submit" /><br>
</div>
</form>
</td>
<td>
<div id="sub">
<?php
echo htmlspecialchars($_POST["name"])."<br><br>".nl2br(htmlspecialchars($_POST["msg"]));
?>
</td>
</tr>
</div>
</body>
</html>
