blog – Page 683 – ソフトウェアエンジニアの技術ブログ：Software engineer tech blog

クリッカブルタブメニュー

%e7%84%a1%e9%a1%8c

event.preventDefault()
If this method is called, the default action of the event will not be triggered.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Top Menu Tab</title>
	<style>
		body {
			padding:0;
			margin:0;
			font-family: Verdana, sans-serif;
		}
		.container {
			padding: 0;
			margin: 30px auto;
			width: 500px;
			background: #dce0e0;
		}
		ul.menu {
			list-style: none;
			padding: 0;
			margin: 0;
			font-size: 0;
		}
		ul.menu li {
			display: inline-block;
		}
		ul.menu li a {
			display: inline-block;
			font-size: 14px;
			width: 80px;
			height: 20px;
			line-height: 20px;
			text-align: center;
			text-decoration: none;
			padding: 7px;
			color: #333;
		}
		ul.menu li a.active {
			background: #353d3e;
			color: #fff;
		}
		ul.menu li a:not(.active):hover {
			opacity: 0.5;
			transition: .8s;
		}
		.content {
			font-size: 14px;
			padding: 7px 10px;
			line-height: 1.4;
			background: #353d3e;
			color: #fff;
			min-height: 150px;
			display: none;
		}
		.content.active {
			display: block;
		}
	</style>
</head>
<body>
<div class="container">
	<ul class="menu">
		<li><a href="#" data-id="about" class="active  menu_item">About</a></li>
		<li><a href="#" data-id="service" class="menu_item">Service</a></li>
		<li><a href="#" data-id="contact" class="menu_item">Contact</a></li>
	</ul>
	<div class="content active" id="about">
	Lorem1 ipsum dolor sit amet, consectetur adipisicing elit. Ad, beatae eos ab, esse cupiditate doloribus cumque tenetur atque aspernatur, maxime ipsam nemo ipsum quis placeat. Facere ipsam debitis possimus nostrum!
	</div>
	<div class="content" id="service">
	Lorem2 ipsum dolor sit amet, consectetur adipisicing elit. Ad, beatae eos ab, esse cupiditate doloribus cumque tenetur atque aspernatur, maxime ipsam nemo ipsum quis placeat. Facere ipsam debitis possimus nostrum!
	</div>
	<div class="content" id="contact">
	Lorem3 ipsum dolor sit amet, consectetur adipisicing elit. Ad, beatae eos ab, esse cupiditate doloribus cumque tenetur atque aspernatur, maxime ipsam nemo ipsum quis placeat. Facere ipsam debitis possimus nostrum!
	</div>
<p></p>
<script>
	(function(){
		'use strict'

		var menuItems = document.getElementsByClassName('menu_item');
		var contents = document.getElementsByClassName('content');

		var i;

		for (i=0; i < menuItems.length; i++){
			menuItems&#91;i&#93;.addEventListener('click', function(e){
				e.preventDefault();

				var i;
				for (i=0; i < menuItems.length; i++){
					menuItems&#91;i&#93;.className = 'menu_item';
				}
				this.className = 'menu_item active';

				var i;
				for (i=0; i < contents.length; i++){
					contents&#91;i&#93;.className = 'content';
				}
				document.getElementById(this.dataset.id).className = 'content active';

			});
		}

	})();
</script>
</body>
</html>

functions, config

%e7%84%a1%e9%a1%8c

<?php

function connectDb(){
  try {
    return new PDO(DSN, DB_USER, DB_PASSWORD);
  } catch (PDOException $e){
    echo $e->getMessage();
    exit;
  }
}

function h($s){
  return htmlspecialchars($s, ENT_QUOTES, "UTF-8");
}

function setToken(){
  if (!isset($_SESSION['token'])){
    $_SESSION['token'] = sha1(uniqid(mt_rand(), true));
  }
}

function checkToken(){
  if (empty($_POST['token']) || $_POST['token'] != $_SESSION['token']){
    echo "不正な処理です！";
    exit;
  }
}

/*

create database contact_php;
grant all on contact_php.* to dbuser@localhost identified by 'xxxx';

use contact_php

create table entries (
  id int not null auto_increment primary key,
  name varchar(255),
  email varchar(255),
  memo text,
  created datetime,
  modified datetime
);

alter table entries add status enum('active', 'deleted') default 'active' after memo;
*/

define('DSN','mysql:host=localhost;dbname=contact_php');
define('DB_USER','dbuser');
define('DB_PASSWORD','xxxx');

define('SITE_URL','http://192.168.33.10:8000');
define('ADMIN_URL', SITE_URL.'/admin/');

error_reporting(E_ALL & ~E_NOTICE);
session_set_cookie_params(0, '');

edit, delete

<?php

require_once('../config.php');
require_once('../functions.php');

session_start();
$dbh = connectDb();

if (preg_match('/^&#91;1-9&#93;&#91;0-9&#93;*$/', $_GET&#91;'id'&#93;)){
    $id = (int)$_GET&#91;'id'&#93;;
} else{
    echo "不正なIDです!";
    exit;
}

if ($_SERVER&#91;'REQUEST_METHOD'&#93; != "POST"){
  setToken();

  $stmt = $dbh->prepare("select * from entries where id = :id limit 1");
  $stmt->execute(array(":id" => $id));
  $entry = $stmt->fetch() or die("no one found!");
  $name = $entry['name'];
  $email = $entry['email'];
  $memo = $entry['memo'];

} else {
  checkToken();

  $name = $_POST['name'];
  $email = $_POST['email'];
  $memo = $_POST['memo'];

  $error = array();

  if(!filter_var($email, FILTER_VALIDATE_EMAIL)){
    $error['email'] = 'メールアドレスの形式が正しくありません';
  }
  if($email == ''){
    $error['email'] = 'メールアドレスを入力してください';
  }
  if($memo == ''){
    $error['memo'] = '内容を入力してください';
  }
  if(empty($error)){

    $sql = "update entries set
            name = :name,
            email = :email,
            memo = :memo,
            modified = now()
            where id = :id";
     $stmt = $dbh->prepare($sql);
     $params = array(
       ":name" => $name,
       ":email" => $email,
       ":memo" => $memo,
       ":id" => $id
     );
     $stmt->execute($params);

    header('Location: '.ADMIN_URL);
    exit;
  }
}

?>
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>データの編集</title>
</head>
<body>
  <h1>データの編集</h1>
  <form method="POST" action="">
    <p>お名前:<input type="text" name="name" value="<?php echo h($name); ?>"></p>
    <p>メールアドレス*:<input type="text" name="email" value="<?php echo h($email); ?>">
    <?php if($error&#91;'email'&#93;){ echo h($error&#91;'email'&#93;); } ?></p>
    <p>内容*:</p>
    <p><textarea name="memo" cols="40" rows="5"><?php echo h($memo); ?></textarea>
    <?php if($error&#91;'memo'&#93;){ echo h($error&#91;'memo'&#93;); } ?></p>
    <p><input type="submit" value="更新"></p>
    <input type="hidden" name="token" value="<?php echo h($_SESSION&#91;'token'&#93;); ?>">
  </form>
  <p><a href="<?php echo ADMIN_URL; ?>">戻る</a>
</body>
</html>

delete

<?php

require_once('../config.php');
require_once('../functions.php');

$dbh = connectDb();

$id = (int)$_POST&#91;'id'&#93;;

$dbh->query("update entries set status = 'deleted' where id = $id");

echo $id;

thanks

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>ありがとうございました！</title>
</head>
<body>
  <h1>ありがとうございました！</h1>
  <p></p>
  <p><a href="index.php">お問い合わせフォームに戻る</a></p>
</body>
</html>

問い合わせ管理システム

index.php

<?php

require_once('config.php');
require_once('functions.php');

session_start();
if ($_SERVER&#91;'REQUEST_METHOD'&#93; != "POST"){
  setToken();
} else {
  checkToken();

  $name = $_POST&#91;'name'&#93;;
  $email = $_POST&#91;'email'&#93;;
  $memo = $_POST&#91;'memo'&#93;;

  $error = array();

  if(!filter_var($email, FILTER_VALIDATE_EMAIL)){
    $error&#91;'email'&#93; = 'メールアドレスの形式が正しくありません';
  }
  if($email == ''){
    $error&#91;'email'&#93; = 'メールアドレスを入力してください';
  }
  if($memo == ''){
    $error&#91;'memo'&#93; = '内容を入力してください';
  }
  if(empty($error)){
    $dbh = connectDb();

    $sql = "insert into entries
            (name, email, memo, created, modified)
            values
            (:name, :email, :memo, now(), now())";
    $stmt = $dbh->prepare($sql);
    $params = array(
      ":name" => $name,
      ":email" => $email,
      ":memo" => $memo
    );
    $stmt->execute($params);

    header('Location: '.SITE_URL.'/thanks.html');
    exit;
  }
}

?>
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
  <h1>お問い合わせフォーム</h1>
  <form method="POST" action="">
    <p>お名前:<input type="text" name="name" value="<?php echo h($name); ?>"></p>
    <p>メールアドレス*:<input type="text" name="email" value="<?php echo h($email); ?>">
    <?php if($error&#91;'email'&#93;){ echo h($error&#91;'email'&#93;); } ?></p>
    <p>内容*:</p>
    <p><textarea name="memo" cols="40" rows="5"><?php echo h($memo); ?></textarea>
    <?php if($error&#91;'memo'&#93;){ echo h($error&#91;'memo'&#93;); } ?></p>
    <p><input type="submit" value="送信"></p>
    <input type="hidden" name="token" value="<?php echo h($_SESSION&#91;'token'&#93;); ?>">
  </form>
  <p><a href="<?php echo ADMIN_URL; ?>">管理者ページ</a>
</body>
</html>

contact

<?php

require_once('../config.php');
require_once('../functions.php');

$dbh = connectDb();

$entries = array();

$sql = "select * from entries where status = 'active' order by created desc";

foreach($dbh->query($sql) as $row){
  array_push($entries, $row);
}

// var_dump($entries);
// exits;

?>
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>お問い合わせ一覧</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>
  <h1>一覧データ</h1>
  <p><span id="num"><?php echo count($entries); ?></span>件あります。</p>
  <ul>
    <?php foreach($entries as $entry): ?>
      <li id="entry_<?php echo h($entry&#91;'id'&#93;); ?>"><?php echo h($entry&#91;'email'&#93;); ?>
        <a href="edit.php?id=<?php echo h($entry&#91;'id'&#93;); ?>">[編集]</a>
        <span class="deleteLink" data-id="<?php echo h($entry&#91;'id'&#93;); ?>">[削除]</span>
      </li>
    <?php endforeach; ?>
  </ul>
  <style>
  .deleteLink{
    color: blue;
    cursor: pointer;
  }
  </style>
  <p><a href="<?php echo SITE_URL; ?>">お問い合わせフォームに戻る</a></p>
  <script>
  $(function(){
    $('.deleteLink').click(function(){
      if (confirm("削除してもよろしいですか？")){
        var num = $('#num').text();
        num--;
        $.post('./delete.php', {
           id: $(this).data('id')
          }, function(rs){
            $('#entry_' + rs).fadeOut(800);
            $('#num').text(num);
          });
      }
      });
    });
  </script>
</body>
</html>

Basic認証の作り方

コマンドラインから、htpasswd -c .htpass　loginnameと打ちます。

[vagrant@localhost admin]$ htpasswd -c .htpasswd password
New password:
Re-type new password:
Adding password for user password
[vagrant@localhost admin]$ ls -la
合計 12
drwxr-xr-x. 2 vagrant vagrant 4096 11月 15 00:33 2016 .
drwxrwxr-x. 3 vagrant vagrant 4096 11月 15 00:31 2016 ..
-rw-rw-r--. 1 vagrant vagrant   23 11月 15 00:33 2016 .htpasswd

続いて、.htaccessを作ります。

[vagrant@localhost admin]$ vi .htaccess
AuthType Basic
AuthName "Enter your ID & Password"
AuthUserFile /home/vagrant/contact/admin/.htpasswd
require valid-user

[vagrant@localhost admin]$ ls -la
合計 16
drwxr-xr-x. 2 vagrant vagrant 4096 11月 15 00:39 2016 .
drwxrwxr-x. 3 vagrant vagrant 4096 11月 15 00:31 2016 ..
-rw-rw-r--. 1 vagrant vagrant  122 11月 15 00:39 2016 .htaccess
-rw-rw-r--. 1 vagrant vagrant   23 11月 15 00:33 2016 .htpasswd

Mysql, config.php, functions.phpの設定

[vagrant@localhost ~]mysql -u root
create database contact_php;
grant all on contact_php.* to dbuser@localhost identified by 'hogehoge';

use contact_php

create table entries (
  id int not null auto_increment primary key,
  name varchar(255),
  email varchar(255),
  memo text,
  created datetime,
  modified datetime
);
[vagrant@localhost ~]$ mysql -u dbuser -p contact_php

config.php

<?php

define('DSN','mysql:host=localhost;dbname=contact_php');
define('DB_USER','dbuser');
define('DB_PASSWORD','hogehoge');

define('SITE_URL','http://192.168.33.10:8000/');
define('ADMIN_URL', SITE_URL.'admin/');

error_reporting(E_ALL & ~E_NOTICE);
session_set_cookie_params(0, '/contacts_php');
&#91;/php&#93;

function.php
&#91;php&#93;
<?php

function connectDb(){
  try {
    return new PDO(DSN, DB_USER, DB_PASSWORD);
  } catch (PDOException $e){
    echo $e->getMessage();
    exit;
  }
}

function h($s){
  return htmlspecialchars($s, ENT_QUOTES, "UTF-8");
}

Carbon インスタンス

// $dt = new Carbon();
// $dt = Carbon::now();
// $dt = new Carbon('2016-12-20 11:32:23');
//$dt = new Carbon('tomorrow');
//$dt = Carbon::today();
//$dt = Carbon::tommorow();
// $dt = Carbon::yesterday();
// $dt = Carbon::parse('2016-12-12 11:32:32');
// $dt = Carbon::create(2020,12, 12, 11, 32, 32);
$dt = Carbon::createFromFormat('Y/m/d H', '2016/12/20 20');

日時情報の取得

$dt = Carbon::now();
//echo $dt->year . PHP_EOL;
//echo $dt->month . PHP_EOL;
//echo $dt->day . PHP_EOL;
//echo $dt->hour . PHP_EOL;
//echo $dt->minute . PHP_EOL;
//echo $dt->second . PHP_EOL;
//echo $dt->dayOfWeek . PHP_EOL;
//echo $dt->dayOfYear . PHP_EOL;
//echo $dt->weekOfMonth . PHP_EOL;
//echo $dt->weekOfYear . PHP_EOL;
// echo $dt->timestamp . PHP_EOL;
// echo $dt->tzName . PHP_EOL;
echo $dt->format('Y年m月d日') . PHP_EOL;

日付判定

//var_dump($dt->isToday()) . PHP_EOL;
//var_dump($dt->isTommorow()) . PHP_EOL;
//var_dump($dt->isYesterday()) . PHP_EOL;
//var_dump($dt->isFuture()) . PHP_EOL;
//var_dump($dt->isPast()) . PHP_EOL;
//var_dump($dt->isLeapYear()) . PHP_EOL;
//var_dump($dt->isWeekday()) . PHP_EOL;
//var_dump($dt->isWeekend()) . PHP_EOL;
//var_dump($dt->isSameDay(Carbon::now())) . PHP_EOL;

変数をとって、日時を比較

$dt1 = Carbon::create(2020, 10, 1);
$dt2 = Carbon::create(2020, 11, 1);

// var_dump($dt1->eq($dt2)) . PHP_EOL;
//var_dump($dt1->gt($dt2)) . PHP_EOL;
//var_dump($dt1->lt($dt2)) . PHP_EOL;
//var_dump(Carbon::create(2010, 10, 10)->between($dt1, $dt2)) . PHP_EOL;
//echo $dt1->max($dt2) . PHP_EOL;
//echo $dt1->min($dt2) . PHP_EOL;

日付計算

// echo $dt->addYear(). PHP_EOL;
//echo $dt->addYears(3). PHP_EOL;
//echo $dt->subYears(3). PHP_EOL;
//echo $dt->addWeekdays(3). PHP_EOL;
//echo $dt->addWeekdays(3)->addWeekHours(3)->addWeekMinutes(3). PHP_EOL;

コピーメソッド

$dt = Carbon::now();
echo $dt->copy()->addYear() . PHP_EOL;
echo $dt . PHP_EOL;

日時指定

//echo $dt->startOfDay() . PHP_EOL;
//echo $dt->endOfDay() . PHP_EOL;
//echo $dt->startOfMonth() . PHP_EOL;
//echo $dt->endOfMonth() . PHP_EOL;
//echo $dt->startOfWeek() . PHP_EOL;
//echo $dt->endOfWeek() . PHP_EOL;
//echo $dt->next(Carbon::MONDAY) . PHP_EOL;
//echo $dt->previous(Carbon::MONDAY) . PHP_EOL;
//echo $dt->firstOfMonth(Carbon::MONDAY) . PHP_EOL;
//echo $dt->lastOfMonth(Carbon::MONDAY) . PHP_EOL;
//echo $dt->nthOfMonth(3, Carbon::MONDAY) . PHP_EOL;

日時の差

$dt1 = Carbon::create(2020, 10, 1);
$dt2 = Carbon::create(2020, 11, 1);

//echo $dt1->diffInDays($dt2) . PHP_EOL;
//echo $dt1->diffInHours($dt2) . PHP_EOL;
//echo $dt1->diffInMinutes($dt2) . PHP_EOL;
//echo $dt1->diffForHumans($dt2) . PHP_EOL;

setTestNow()を使った判定

$dt = Carbon::now();
$birthday = Carbon::create(1990, 10, 1);
Carbon::setTestNow(Carbon::create(2020, 10, 1));
echo Carbon::now() . PHP_EOL;
if($birthday->isBirthday(Carbon::now())){
  echo ':)' . PHP_EOL;
} else {
  echo ':<' . PHP_EOL;

Composerとcarbon

composer
Composerをインストールします。

curl -sS https://getcomposer.org/installer | php

続いてcarbonをインストール

[vagrant@localhost php]$ php composer.phar require nesbot/carbon

carbon.php

require 'vendor/autoload.php';

use Carbon\Carbon;

$dt = new Carbon();
echo $dt . PHP_EOL;

[vagrant@localhost php]$ php carbon.php
2016-11-14 11:24:43
[vagrant@localhost php]$ date
2016年 11月 14日 月曜日 11:24:53 JST

a-html5

	<p><i class="fa fa-html5" aria-hidden="true"></i> html5<p>
	<p><i class="fa fa-html5 fa-lg" aria-hidden="true"></i> html5<p>
	<p><i class="fa fa-html5 fa-2x" aria-hidden="true"></i> html5<p>
	<p><i class="fa fa-html5 fa-5x" aria-hidden="true"></i> html5<p>

fontawesomeはフォントなので、cssで装飾することも可能です。

	<style>
	body { background: #ddd; }
	.my_icon {
		font-size: 48px;
		color: #e3771b;
		text-shadow: -1px 1px 0 rgba(255,255,255,0.6);
	}
	</style>
</head>
<body>
	<p><i class="fa fa-html5 my_icon" aria-hidden="true"></i> html5<p>
</body>

リスト

<ul>
		<li><i class="fa fa-home"></i> Menu 1</li>
		<li><i class="fa fa-caret-left"></i> Menu 2</li>
		<li><i class="fa fa-bar-chart"></i> Menu 3</li>
	</ul>
	<ul>
		<li><i class="fa fa-home fa-fw"></i> Menu 1</li>
		<li><i class="fa fa-caret-left fa-fw"></i> Menu 2</li>
		<li><i class="fa fa-bar-chart fa-fw"></i> Menu 3</li>
	</ul>
	<ul class="fa-ul">
		<li><i class="fa fa-home fa-fw"></i> Menu 1</li>
		<li><i class="fa fa-caret-left fa-fw"></i> Menu 2</li>
		<li><i class="fa fa-bar-chart fa-fw"></i> Menu 3</li>
	</ul>

回転

        <p><i class="fa fa-apple"></i> Apple</p>
	<p><i class="fa fa-apple fa-rotate-90"></i> Apple</p>
	<p><i class="fa fa-apple fa-rotate-180"></i> Apple</p>
	<p><i class="fa fa-apple fa-rotate-270"></i> Apple</p>
	<p><i class="fa fa-apple fa-flip-horizontal"></i> Apple</p>
	<p><i class="fa fa-apple fa-flip-vertical"></i> Apple</p>

	<p><i class="fa fa-refresh fa-spin"></i> Apple</p>
	<p><i class="fa fa-spinner fa-spin"></i> Apple</p>
	<p><i class="fa fa-spinner fa-pulse"></i> Apple</p>

枠線、左右寄せ

<p><i class="fa fa-apple pull-right"></i> Apple</p>
	<p><i class="fa fa-apple fa-border fa-5x"></i> Apple</p>

アイコンを重ねる

       <p>
	<span class="fa-stack">
	 <i class="fa fa-square-o fa-stack-2x"></i>
	 <i class="fa fa-flag fa-stack-1x"></i>
	 </span>
	 Apple</p>

session storageとlocal storage

web storageは同一オリジンでデータを保存しています。同階層、下ディレクトでも使えます。sessionStorage(タブが閉じられるまで)とloacalStorage(ブラウザ自体に保存)の二種類があります。chrome developer toolのapplicationパネルで確認できます。

%e7%84%a1%e9%a1%8c

      <script>
      (function(){
        if (typeof(Storage) === "undefined"){
          alert("web storage not supported");
        } else {
          // console.log("supported");
          // var s = sessionStorage;
          var s = localStorage;
          s.setItem('name', 'okada');
          console.log(s.getItem('name'));
        }
      })();
      </script>

setItemと削除

      <script>
      (function(){
        if (typeof(Storage) === "undefined"){
          alert("web storage not supported");
        } else {
          var ls = localStorage;
          var ss = sessionStorage;

          ls.setItem('yamada', 20);
          ls.setItem('kimura', 69);

          ss.setItem('color', 'pink');
          ss.setItem('shape', 'cube');

          // removeItem(key)
          // clear()

          ls.removeItem('yamada');
          ss.clear();
        }
      })();
      </script>

lengthとkey

      <script>
      (function(){
        if (typeof(Storage) === "undefined"){
          alert("web storage not supported");
        } else {
          var s = localStorage;

          s.setItem('okamoto', 90)
          s.setItem('murata', 60)
          s.setItem('ito', 50)

          for (var i = 0; i < s.length; i++){
            console.log(s.key(i) + ':' + s.getItem(s.key(i)));
          }


        }
      })();
      </script>

JSON(javascript object nation)

      <script>
      (function(){
        if (typeof(Storage) === "undefined"){
          alert("web storage not supported");
        } else {
          var s = localStorage;

          var user = {
            name: 'yoshida',
            score: 50
          };

          s.setItem('user', JSON.stringify(user));
          console.dir(JSON.parse(s.getItem('user')));
        }
      })();
      </script>

データの整合性

      <script>
      (function(){
        if (typeof(Storage) === "undefined"){
          alert("web storage not supported");
        } else {
          var s = localStorage;
          s.setItem('name','kurumada');

          window.addEventListener('storage', function(e){
            console.log(e.key + ':' + e.oldValue + '->' + e.newValue);
          });
        }
      })();
      </script>