2015 | zip358.com - パート 14

小中大

■ ■ ■ ■ ■ ■ ■

Home > 2015年

PHP学習サイトでレベル20の問題をごねってみた。ゴネゴネ(´Д｀)ｍ

2015年01月24日

この投稿は1年以上前に公開されました。 現在の情報とは異なる可能性がありますので、ご了承ください。

前回の記事で紹介した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>

著者名 @taoka_toshiaki

※この記事は著者が30代前半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki