常連

### 前提・実現したいこと

ワードプレスでcontact form 7を利用し、フォームを作りました。
フォームに送信された内容が投稿の下書きで保存されるようにしました。
保存はされるようになったのですが、カスタムフィールドの画像（5枚）が反映されません。
メディアライブラリに画像は保存されていますが、未添付で記事と連動していない状態です。

ACFで設定している画像のカスタムフィールドは
review_img1
review_img2
review_img3
review_img4
review_img5
です。
contact form 7のファイルアップロード項目も上記と同じにしています。



### 該当のソースコード

//フォーム送信時にブログ投稿をおこなう
function wpcf7_insert_post(){
	//送信情報を取得
	$submission = WPCF7_Submission::get_instance();
	if($submission) {
		$formdata = $submission->get_posted_data();
        $uploaded_files = $submission->uploaded_files();
		$uploaded_files2 = $submission->uploaded_files();
		$uploaded_files3 = $submission->uploaded_files();
		$uploaded_files4 = $submission->uploaded_files();
		$uploaded_files5 = $submission->uploaded_files();
		$new_post = array(
			'post_type' => 'post',
			'post_title' => $formdata['subject'],
			'post_status' => 'draft', //下書き
			'post_content' => $formdata['message']
		);
		//ブログ作成
		$post_id = wp_insert_post($new_post);
		//作成に成功した場合
		if(!is_wp_error($post_id)) {
			//カスタムフィールドのデータも登録する
			add_post_meta($post_id, 'member_id', $formdata['member_id']);
			add_post_meta($post_id, 'item_code', $formdata['item_code']);
			add_post_meta($post_id, 'nickname', $formdata['nickname']);
			add_post_meta($post_id, 'hyoka', $formdata['hyoka']);
			add_post_meta($post_id, 'review_img1', $formdata['review_img1']);
			add_post_meta($post_id, 'review_img2', $formdata['review_img2']);
			add_post_meta($post_id, 'review_img3', $formdata['review_img3']);
			add_post_meta($post_id, 'review_img4', $formdata['review_img4']);
			add_post_meta($post_id, 'review_img5', $formdata['review_img5']);
			add_post_meta($post_id, 'youtube', $formdata['youtube']);

			                /* 画像の設定 */
                if (isset($uploaded_files['review_img1'])) {
                    $thumb_path = '/review/' . str_replace($baseurl, '', $uploaded_files['review_img1']);
                    $thumb_id = addAttachmentFromForm($thumb_path, $uploaded_files['review_img1'], $insertPost, $time);
                    update_field('review_img1', $thumb_id,  $insertPost);
                }
			if (isset($uploaded_files2['review_img2'])) {
                    $thumb_path = '/review/' . str_replace($baseurl, '', $uploaded_files['review_img2']);
                    $thumb_id = addAttachmentFromForm($thumb_path, $uploaded_files['review_img2'], $insertPost, $time);
                    update_field('review_img2', $thumb_id,  $insertPost);
                }
			if (isset($uploaded_files3['review_img3'])) {
                    $thumb_path = '/review/' . str_replace($baseurl, '', $uploaded_files['review_img3']);
                    $thumb_id = addAttachmentFromForm($thumb_path, $uploaded_files['review_img3'], $insertPost, $time);
                    update_field('review_img3', $thumb_id,  $insertPost);
                }
			if (isset($uploaded_files4['review_img4'])) {
                    $thumb_path = '/review/' . str_replace($baseurl, '', $uploaded_files['review_img4']);
                    $thumb_id = addAttachmentFromForm($thumb_path, $uploaded_files['review_img4'], $insertPost, $time);
                    update_field('review_img4', $thumb_id,  $insertPost);
                }
			if (isset($uploaded_files5['review_img5'])) {
                    $thumb_path = '/review/' . str_replace($baseurl, '', $uploaded_files['review_img5']);
                    $thumb_id = addAttachmentFromForm($thumb_path, $uploaded_files['review_img5'], $insertPost, $time);
                    update_field('review_img5', $thumb_id,  $insertPost);
                }

			
		}
	}
}
add_action('wpcf7_mail_sent', 'wpcf7_insert_post', 10, 1);

/* 画像の詳細処理については、別関数を作成しました */
function addAttachmentFromForm($filename, $file_base, $post_id, $time) {
    $layout_img_value = '';

    $filetype = wp_check_filetype( basename( $filename ), null );
    $wp_upload_dir = wp_upload_dir();
    $upfile = $wp_upload_dir['url'] . '/' . $time . basename( $filename );
    $copyfile = $wp_upload_dir['path'] .'/' . $time . basename( $filename );
    copy($file_base, $copyfile);
    $attachment = array(
        'guid'           => $upfile,
        'post_mime_type' => $filetype['type'],
        'post_title'     => preg_replace( '/.[^.]+$/', '', basename( $upfile ) ),
        'post_content'   => '',
        'post_status'    => 'inherit'
    );
    $attach_id = wp_insert_attachment( $attachment, $copyfile, $post_id );
    require_once( ABSPATH . 'wp-admin/includes/image.php' );
    $attach_data = wp_generate_attachment_metadata( $attach_id, $copyfile );
    wp_update_attachment_metadata( $attach_id, $attach_data );

    if($attach_id) return $attach_id;
    else return false;
}

### 試したこと

htmlとcssが専門になり、PHP
などのプログラムは作ることが全くできません。
色々なサイトでそれらしきコードをコピーペーストして試しておりますが、これ以上情報が見つからず、にっちもさっちもいかない状態です。
大変厚かましいお願いで恐縮なのですが、間違っているところ、付けたすべきところをコードを書いて教えて頂けると本当に助かります。
誠にお手数をお掛け致しますが、詳しい方、ご教授いただけますと嬉しいです。よろしくお願い申し上げます。

contact form 7 と記事投稿の連動でACFで作った画像の連動ができないです

###前提・実現したいこと
Cakephp3
default.ctpにてjsファイル読み込み

Pjaxの使い方サイトをいくつかみて試しましたがうまく動きません。
動いた以下のコードは無限読み込みになってしまいます。
```javascript
$(function() {
  $.pjax({
    container : '#pjax-area',
    link : 'a.pjax([target])',
    ajax : { timeout: 2500 }, //Ajaxの設定を記述可能
    wait : 500, //リンクをクリックしてからの待機時間
    load : { script: true } //遷移先のインラインスクリプトを読み込む
  });
});
```
Pjax ver3の方では、無限ループにはなりませんがそもそも動作せず、ページ遷移してしまいます。
```Javascript
  var Pjax = require('pjax-api').Pjax;
  new Pjax({
    link: 'a.pjax',
    areas: [
      '#pjax-area'
    ]
  });
```

わがままですが、このように記述すれば動くというわかりやすい説明が欲しいです。

###発生している問題・エラーメッセージ
読み込みが無限ループする

###試したこと
[Pjaxでスムーズなページ遷移](http://chibinowa.net/note/js/pjax-fragment.html)
[defunkt版 Pjax](http://chibinowa.net/note/js/pjax-fragment-defunkt.html)

ご教示よろしくお願いします。

Pjax 無限ループになる

https://www.crazy.co.jp/

上記サイトは1つ目のコンテンツと2つ目のコンテンツのみフル画面のスムーススクロールにして、そこから下は普通にスクロールになっています。

おそらくjsでマウスのスクロールを制御し、addClassなどしているかと思うのですが、書き方がわかりません。

もしお分かりの方がいらっしゃいましたら、お教えいただけないでしょうか。

ページの途中までフル画面コンテンツのスムーススクロールにしたいです。

# やりたいこと
n件あるデータの中から5つデータを重複なくランダムに取り出したい（ただしn>5）



# 考えていること
ランダムの偏りとPCのメモリ



# 質問
例えば、1000件あるデータから5件をランダムに重複なくデータを取り出したいとき、

1. 一気に配列にデータを読み込んでシャッフルした後、前から5件取り出す
2. `while`ループなどで、配列に5件データが揃うまで回し続け、重複は`array_key_exists`などを用いて弾く

というやり方を考えました。

しかし、1のやり方では、データ数が増えるとともにメモリを圧迫します。
2のやり方のときは、ループの時間を考慮しなければなりません。

今回の場合、データは多いので2のやり方を採用しておりますが、
他に効率の良い考え方/アルゴリズムはありますでしょうか。

ご教示いただけるとうれしいです。


# 閑話
評価-1した人、出てきて理由を説明してください。

【ロジック/PHP】重複なくランダムで値を取り出す方法

ご意見ありがとうございました。
次に進もうと思います。

以下、質問です。
タイトルの通り、「気付けばプロ並PHP」という書籍をおわらせました。次はセキュリティに関して覚えた方がいいと言われたこともあり、「体系的に学ぶ、安全なWebアプリケーションの作り方」（以下徳丸本）も買ってきて少し読みました。
ですが、「気付けばプロ並」のほうはパスワードハッシュなどが現在推奨されないものである事などを指摘されたので、「現行の、セキュリティ面などにおいても適切な」コーディングを知りたいと思いました。
その上で、徳丸本を終わらせたらいわゆる「即戦力
」として仕事ができるのでしょうか？
（仕事になるレベルでの知識が得られるサイトも教えていただけたら嬉しいです)
先ほどはスマホからの投稿なので後から追記しました。
pro_list.php
```
<?php

session_start();
session_regenerate_id(true);
if(isset($_SESSION['login'])==false)
{
print 'ログインされていません<br />';
print '<a href="../staff_login/staff_login.html">ログイン画面へ</a>';
exit();
}
else
{
print $_SESSION['staff_name'];
print 'さんログイン中<br />';
print '<br />';
}?>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ろくまる農園</title>
</head>
<body>

<?php

try{
$dsn = 'mysql:dbname=shop;host=localhost;charset=utf8';
$user = 'root';
$password= '';
$dbh = new PDO($dsn,$user,$password);
$dbh -> setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);

$sql = 'SELECT code, name,price FROM mst_product WHERE 1';
$stmt = $dbh->prepare($sql);
$stmt->execute();

$dbh = null;

print '商品一覧<br /><br />';

print '<form method="post" action="pro_branch.php">';
while(true){
  $rec = $stmt -> fetch(PDO::FETCH_ASSOC);
  if($rec==false){
    break;
  }
  print'<input type="radio" name="procode" value="'.$rec['code'].'">';
  print $rec['name'].'---';
  print $rec['price'].'円';
  print'<br />';
}
print '<input type="submit" name="disp" value="参照">';
print '<input type="submit" name="add" value="追加">';
print '<input type="submit" name="edit" value="修正">';
print '<input type="submit" name="delete" value="削除">';

print '</form>';
}


catch(Exception $e){
  print 'ただいま障害発生中です。ご迷惑おかけします。';
  exit();
}

?>

<br />
<a href="../staff_login/staff_top.php">トップメニューへ</a><br />
</body>
</html>
```
staff_branch.php
```
<?php

session_start();
session_regenerate_id(true);
if(isset($_SESSION['login'])==false)
{
print 'ログインされていません<br />';
print '<a href="../staff_login/staff_login.html">ログイン画面へ</a>';
exit();
}
else
{
print $_SESSION['staff_name'];
print 'さんログイン中<br />';
print '<br />';
}?>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ろくまる農園</title>
</head>
<body>

<?php

try{
$dsn = 'mysql:dbname=shop;host=localhost;charset=utf8';
$user = 'root';
$password= '';
$dbh = new PDO($dsn,$user,$password);
$dbh -> setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);

$sql = 'SELECT code, name,price FROM mst_product WHERE 1';
$stmt = $dbh->prepare($sql);
$stmt->execute();

$dbh = null;

print '商品一覧<br /><br />';

print '<form method="post" action="pro_branch.php">';
while(true){
  $rec = $stmt -> fetch(PDO::FETCH_ASSOC);
  if($rec==false){
    break;
  }
  print'<input type="radio" name="procode" value="'.$rec['code'].'">';
  print $rec['name'].'---';
  print $rec['price'].'円';
  print'<br />';
}
print '<input type="submit" name="disp" value="参照">';
print '<input type="submit" name="add" value="追加">';
print '<input type="submit" name="edit" value="修正">';
print '<input type="submit" name="delete" value="削除">';

print '</form>';
}


catch(Exception $e){
  print 'ただいま障害発生中です。ご迷惑おかけします。';
  exit();
}

?>

<br />
<a href="../staff_login/staff_top.php">トップメニューへ</a><br />
</body>
</html>

```
pro_add_check.php
```
<?php

session_start();
session_regenerate_id(true);
if(isset($_SESSION['login'])==false)
{
print 'ログインされていません<br />';
print '<a href="../staff_login/staff_login.html">ログイン画面へ</a>';
exit();
}
else
{
print $_SESSION['staff_name'];
print 'さんログイン中<br />';
print '<br />';
}?>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ろくまる農園</title>
</head>
<body>

<?php

//if (isset($_POST["name"]) &&
//     isset($_POST["pass"]) &&
//     isset($_POST["pass2"])
// ) {
require_once('../common/common.php');

$post=sanitize($_POST);
    $pro_name = $post["name"];
    $pro_price = $post["price"];
    $pro_gazou = $_FILES["gazou"];



// }
if($pro_name == '' ){
print '商品名が入力されていません<br />';
}
else
{
print '商品名：';
print $pro_name;
print '<br />';
}

if(preg_match('/^[0-9]+$/',$pro_price)==0)
{
print '価格をきちんと入力してください<br />';
}
else
{
  print '価格：';
  print $pro_price;
  print '円<br />';
}

if($pro_gazou['size'] > 0)
{
  if($pro_gazou['size'] > 1000000)
  {
  print '画像が大きすぎます';
}

else
{
    move_uploaded_file($pro_gazou['tmp_name'],'./gazou/'.$pro_gazou['name']);
    print '<img src="./gazou/'.$pro_gazou['name'].'">';
    print '<br />';
}
}




if($pro_name=='' || preg_match('/^[0-9]+$/',$pro_price)==0 ||$pro_gazou['size']>1000000)
{
print '<form>';
print '<input type="button" onclick="history.back()" value="戻る">';
print '</form>';
}

else
{
      print '上記の商品を追加します';
      print '<form method="post" action="pro_add_done.php">';
      print '<input type="hidden" name="name" value="'.$pro_name.'">';
      print '<input type="hidden" name="price" value="'.$pro_price.'">';
      print '<input type="hidden" name="gazou_name" value="'.$pro_gazou['name'].'">';
      print '<br />';
      print '<input type="button" onclick="history.back()" value="戻る">';
      print  '<input type="submit" value="OK">';
      print '</form>';

}



?>

</body>
</html>

```
見直してすぐに疑問だったところ二つのファイルを挙げさせてもらいます。
➀SQLやパスワードのやり取りをする上でこれで安全なのか知りたいです。
➁他のファイルなのですが、使用者側のログイン・会員登録・削除と管理側のページが行き来できる事に危険性はないのか
➂preg_match で、半角英・数字を扱う文の書き方を教えていただきたいです。

気付けばプロ並PHP終了

wordpressの質問です。
１つ条件を指定して、記事一覧をWp_Query()で表示するコードを作っています。カテゴリはX、Yの２つあります。phpファイルはカテゴリが２つあるので、２つあります。

最初Aという条件を指定したとします。
その際にAに適合する、Xの記事数が８、Yの記事数が２だったとします。
また、ページネーションで１ページ当たりに表示できる記事数は５件までとします。記事数を取得する際には$query->found_postsをX、Yの場合で一つのファイルで２回使っています。そのため、wp_queryは一つのファイルで２回使っています。（それぞれのカテゴリの記事数を取得するため。）

ページには
[Xカテゴリの記事数(８)] [Yカテゴリの記事数(２)]と表示されます。

表示する記事についてですが、X、Yとカテゴリ別にすることにします。[Xカテゴリの記事数]をクリックすると、Xカテゴリの記事一覧が出ます。
（ただし[X][Y]という風に[Y]の項目が消えるわけではない。）

それを踏まえて問題があるのですが、
①[Xカテゴリの記事数(10)]をクリックする。
②記事が10あるので、２ページ目までページがある。
③２ページ目に行くと、Xは残り３件あるので、found_postsで
前のページも全件数えるので、10と出る。しかし、Yの場合２件で１ページで収まってしまうため２ページ目が存在しなく、０と表示されてしまう。

２ページ目に来た場合でも１ページ目と同様に全ての件数を表示したいのですが、何かいい方法はないでしょうか。

２ページ目に遷移した際に、表示が０件になってしまう。

###前提・実現したいこと

[https://codepen.io/ksyunnnn/pen/bWPBay](https://codepen.io/ksyunnnn/pen/bWPBay)
このサンプルコードを動作させたいです。
2段目の日付タブの切り替え(Click)ごとに、表示するデータが切り替わるようにしたいです。

**切り替えたい項目**
* Sales
* Event at

現状、なぜか最初の一回のクリックだけ反応して切り替わります。。

**利用ライブラリ**
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js

###発生している問題・エラーメッセージ

2回目以降の2段目の日付タブの切り替え(Click)イベントが反応しない

###該当のソースコード

こちらで動作とコードが確認できます。
[https://codepen.io/ksyunnnn/pen/bWPBay](https://codepen.io/ksyunnnn/pen/bWPBay)

※念のためコードも記載します。
```index.html
<div class="container card select">
  <select name="list">
  </select>
</div>
<div class="container card ul">
  <ul></ul>
</div>
<div class="container card table">
  <table>
    <tbody>
      <tr>
        <th rowspan="2">Sales</th>
        <td rowspan="2" class="sales">--</td>
        <th>Title</th>
        <td class="title">--</td>
      </tr>
      <tr>
        <th>Event at</th>
        <td class="event_at">--</td>
      </tr>
    </tbody>
  </table>
</div>
```

```style.scss
.container {
  font-family:游ゴシック;
  max-width:640px;
  margin:0 auto;
  padding:10px 10px;
  font-size:14px;
  a {
    text-decoration: none; 
  }
  &.select ,&.ul{
    min-height:0px;
  }
  li{
    display:inline;
    padding:5px;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);
    &.active{
      border-bottom:1px solid gray;
    }
    &:hover{
      @extend .card;
    }
  }
}
.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
}
th,td{
  width:200px;
  text-align:center;
}
select {
  height:30px;
}
```

```index.js
var data = {
  "events": [
    {
      "id": "0001",
      "title": "Oconomi party",
      "at": "osaka",
      "fee": "3000",
      "status": "open",
      "detail": "This is a party"
    },
    {
      "id": "0002",
      "title": "Asakusa beer bash",
      "at": "tokyo",
      "fee": "5000",
      "status": "open",
      "detail": "This is a party"
    },
    {
      "id": "0003",
      "title": "tebasaki carnival",
      "at": "nagoya",
      "fee": "2000",
      "status": "closed",
      "detail": "This is a party"
    },
    {
      "id": "0004",
      "title": "Maiko dance",
      "at": "kyoto",
      "fee": "100000",
      "status": "open",
      "detail": "This is a party"
    },
    {
      "id": "0005",
      "title": "Mozaic party",
      "at": "hyogo",
      "fee": "8000",
      "status": "closed",
      "detail": "This is a party"
    }
  ],
  "series": [
    {
      "id": "1001",
      "sales": "60000",
      "event_at": "2017/05/30",
      "relating_with_events": "0001"
    },
    {
      "id": "1002",
      "sales": "30000",
      "event_at": "2017/04/12",
      "relating_with_events": "0001"
    },
    {
      "id": "1003",
      "sales": "15000",
      "event_at": "2017/03/21",
      "relating_with_events": "0001"
    },
    {
      "id": "1004",
      "sales": "105000",
      "event_at": "2017/05/30",
      "relating_with_events": "0002"
    },
    {
      "id": "1005",
      "sales": "100000",
      "event_at": "2017/04/12",
      "relating_with_events": "0002"
    },
    {
      "id": "1006",
      "sales": "44000",
      "event_at": "2017/03/21",
      "relating_with_events": "0003"
    },
    {
      "id": "1007",
      "sales": "1000000",
      "event_at": "2017/05/30",
      "relating_with_events": "0004"
    },
    {
      "id": "1008",
      "sales": "192000",
      "event_at": "2017/04/12",
      "relating_with_events": "0005"
    }
  ]
};

function getData(eventId,seriesId){
  // イベント情報
  var events = data.events;

  var eventTitle = data.events.filter(function(item, index){
    if (item.id == eventId) {
      return true;
    }
  });
  // シリーズ情報
  var relating_with_events = eventId;
  var series = data.series.filter(function(item, index) {
    if (item.relating_with_events == relating_with_events) {
      return true;
    }
  });
  // 詳細情報
  var seriesDetail = data.series.filter(function(item, index) {
    if (item.relating_with_events == relating_with_events && item.id == seriesId) {
      return true;
    }
  });

  seriesDetail[0].title = eventTitle[0].title;

  return {events:events,series:series,detail:seriesDetail[0]};
}

function draw( displayData, eventId, seriesId){
  
  // 既にあれば削除
  if ($('div.select select[name=list] option').length) {
    $('div.select select[name=list] option').remove();
  }
  if ($('div.ul ul li').length) {
    $('div.ul ul li').remove();
  }
  
  var events = displayData.events;
  $select = $('div.select select[name=list]');
  for (let k in events) {
    $option = $('<option>', {
      'value': events[k].id
    }).text(events[k].title);
    if (events[k].id=== eventId) $option.prop('selected', 'selected');
    $select.append($option);
  }

  var series = displayData.series;
  $ul = $('div.ul ul');
  for (let k in series) {
    $list = $('<li>',{'data-id':series[k].id}).text(series[k].event_at);
    if (series[k].id=== seriesId) $list.toggleClass("active");
    $ul.append($list);
  }

  $('td.sales').text(displayData.detail.sales);
  $('td.title').text(displayData.detail.title);
  $('td.event_at').text(displayData.detail.event_at);

}

// 取得 & 描画
draw(getData(eventId = "0001",seriesId = "1001"),eventId = "0001",seriesId = "1001");

$tab = $('div.ul ul li');
$select = $('div.select select[name=list]');

$tab.on('click',function(){
  var seriesId = $(this).attr('data-id');
  var eventId = $select.val();
  // 取得 & 描画
  draw(getData(eventId, seriesId),eventId, seriesId);
});
```

どなたか、ご教授くださいませm(__)m

jQuery:タブ切り替えができない(CodePenにコードあります)

こんばんは、セッションストレージからデータを取得してJSON形式にしたいのですが、配列になっている"productid"と"quantity"に複数の値をいれる方法がわかりません。
形としては [{
           "productid": list.productid,
           "quantity": list.quantity
        }, 
        {
           "productid": list.productid,
           "quantity": list.quantity
        }]
配列の中に複数の値を持てるようしたいです。
お力添えいただけるとうれしいです。
```ここに言語を入力
以下セッションストレージ
_________________________________________________________________
cart json
[
    {
        "id": "1", 
        "manufacture": "mont-bell", 
        "price": "10000", 
        "quantity": 2, 
        "title": "パーカー"
    }, 
    {
        "id": "3", 
        "manufacture": "Marmot", 
        "price": "13924", 
        "quantity": 1, 
        "title": "ジャケット"
    }, 
    {
        "id": "4", 
        "manufacture": "THE", 
        "price": "3856", 
        "quantity": 1, 
        "title": "S/S"
    }
]
user json
{
    "user_id": "2", 
    "user_name": "hoge", 
    "user_zip_code": "231-8359"
}
subtotal
37780
以下javascript
____________________________________________________________________
$(document).ready(function() {
    $(document).on('click',"#completion",function(){
      alert("kurikku")
        var user = JSON.parse(sessionStorage.getItem("user"));
        var list = JSON.parse(sessionStorage.getItem("cart"));
        var subtotal = sessionStorage.getItem("subtotal");
          var users = {
                "userid": user.user_id,
                "subtotal": subtotal,
                "products":
                [
                  {
                   "productid": list[i].productid,
                   "quantity": list[i].quantity
                  }
                ]
              }
```

セッションストレージからデータを取得してJSON形式にしたい

###前提・実現したいこと
現在PHPにて会員登録システムを作成しています。
その際にセキュリティについて注意しておくことがわかりませんので質問させていただきます。

XSS対策,SQLInjection対策はしてあります。
他に対策するべき点はありますでしょうか？

よろしくお願いします。

登録システムを作成する際の注意するべきこと

phpとmysqlを使って「次のページ」「前のページ」のリンクだけのページャーを作ろうとしています。

いろいろ考えたり、調べたのですがどうしても理解できないことがあります。

LIMITを使って表示件数を絞ることはできるのですが、ページリンクの作り方がわかりません。

例えば、１００件あるデータのうち、１件目から１０件目を最初の１ページとし、11件目から１ページ１０件でページを表示するためのリンク（ページャー）を作るにはどうしたよいのでしょうか？






たくさんの回答と的確なアドバイスをありがとうございます。
ご指摘頂いた部分を参考に再挑戦してみたいと思いますので、今しばらく未解決のままとさせてください。



ご指摘頂いた内容や自分でも勉強を重ねた結果、なんとかページャーを作ることができました。
回答ありがとうございました！

phpとmysqlでページャーを作る

htdocs/
index.html
js/script.js
data/list.json

上記のような構成で、index.htmlに

```html
		<div class="page_link" id="page_link">
			<ul>
				<li><a href="/page01/page01_07/"><img src="/page01/page01_07/img/thumb.jpg" alt=""><span class="page_name">風立ちぬ</span></a></li>
				<li><a href="/page01/page01_06/"><img src="/page01/page01_06/img/thumb.jpg" alt=""><span class="page_name">吾輩は猫である</span></a></li>
				<li><a href="/page01/page01_05/"><img src="/page01/page01_05/img/thumb.jpg" alt=""><span class="page_name">潮騒</span></a></li>
				<li><a href="/page01/page01_04/"><img src="/page01/page01_04/img/thumb.jpg" alt=""><span class="page_name">こころ</span></a></li>
				<li><a href="/page01/page01_03/"><img src="/page01/page01_03/img/thumb.jpg" alt=""><span class="page_name">阿Q正伝</span></a></li>
				<li><a href="/page01/page01_02/"><img src="/page01/page01_02/img/thumb.jpg" alt=""><span class="page_name">羅生門</span></a></li>
				<li><a href="/page01/page01_01/"><img src="/page01/page01_01/img/thumb.jpg" alt=""><span class="page_name">金閣寺</span></a></li>
				.
				.
				.
			</ul>
		</div>
```
と出力されるように

```json
[
	{
		"state": "new",
		"path": "/page01/page01_07/",
		"img": "/page01/page01_07/img/thumb.jpg",
		"title": "風立ちぬ"
	},
	{
		"state": "",
		"path": "/page01/page01_06/",
		"img": "/page01/page01_06/img/thumb.jpg",
		"title": "吾輩は猫である"
	},
	{
		"state": "",
		"path": "/page01/page01_05/",
		"img": "/page01/page01_05/img/thumb.jpg",
		"title": "潮騒"
	},
	{
		"state": "",
		"path": "/page01/page01_04/",
		"img": "/page01/page01_04/img/thumb.jpg",
		"title": "こころ"
	},
	{
		"state": "",
		"path": "/page01/page01_03/",
		"img": "/page01/page01_03/img/thumb.jpg",
		"title": "阿Q正伝"
	},
	{
		"state": "",
		"path": "/page01/page01_02/",
		"img": "/page01/page01_02/img/thumb.jpg",
		"title": "羅生門"
	},
	{
		"state": "",
		"path": "/page01/page01_01/",
		"img": "/page01/page01_01/img/thumb.jpg",
		"title": "金閣寺"
	}
	.
	.
	.
]
```
とjsonファイルを書いたのですが、肝心のjsファイルの書き方がわかりません。
getJSONやajaxを調べてみたのですが、見た記事が複雑すぎて理解ができませんでした。。。よろしくお願いします。

jsonをよみこんでhtmlを生成したい

これからコーダーとして働くものです、
職業訓練でhtml5は学びましたが、html4とxhtmlの事についてよくわかりません。
特にxhtmlについては調べても何の詳しく書いているところがなく、困っています。
分かる方がいれば教えて頂ければ幸いです。
よろしくお願い致します。

XHTML,HTML4,HTML5の違いについて

宜しくお願い致します。  

javascriptを使っていてふと気になって色々調べたのですが
どうしても納得できない部分がありまして
質問させていただきます。

```
var hoge = "hogehoge"; // a

function foo() { // b
  var piyo = 'piyopiyo' // c
  console.log(piyo); // d
}

foo(); // 正常に動く // e
console.log(piyo); 参照エラー // f
```

とあった場合、
各変数は評価された時点でメモリに割当られるんですよね。
そしてfの時点ではメモリから解放されているんでしょうか。

[参考](https://utage.headwaters.co.jp/blog/?p=1116)ページ
> JavaScriptオブジェクトについては、ガベージコレクタ方式が採用されています。
> ガベージコレクタは以下のタイミングでメモリの開放を行います。

> * 変数に対し、明示的にnullをセットした時
> * 関数の実行終了時

> 上記以外は任意のタイミング(JavaScriptエンジンによっては、ガベージコレク>タを呼出すメソッドが用意されている)

fの地点でエラーになるのはスコープの問題なのかなって気もしますが。

「メモリに変数が割り当てられているかどうか？」
を確認する術はあるのでしょうか？

Chromeの開発ツールを使って検証したのですがいまいちわかりません。
![イメージ説明](30d644cc263ee883deb82704de292c8c.png)

![イメージ説明](841717a622ed6005d95c0cff0128e726.png)

気になってしまって他の業務がストップしてしまって、、、
どなたかご教授いただけませんでしょうか。

どうぞ宜しくお願い致します。

javascriptの変数のメモリへの割当について

preg_matchで「万円」が含まれる場合の条件分岐をさせたいと思います。
以下のようなコードを書きましたが、
if(preg_match('～の前にecho $data_val[8] . "<br>";を持ってくると正常に表示されます。
しかし、if(preg_match('～で万円を含む文字を条件分岐させると何も表示されませんでした。

preg_matchは初めて使うわけではないので以下のコードで表示されると思ったのですが、原因も分からず、エラーも表示されないのでアドバイスいただけないでしょうか。


###現状のコード
```
if (($fp = fopen("room_20170427162525.csv", "r")) === false) 
setlocale(LC_ALL,'ja_JP.UTF-8');
$i=0;
while (($line = fgetcsv($fp)) !== FALSE) {
    mb_convert_variables('UTF-8', 'SJIS-win', $line);
    if($i == 0){
        $header = $line;
        $i++;
        continue;
    }
    $data[] = $line;
    $i++;
}
fclose($fp);

foreach($data as $data_val){
	if(preg_match('/万円/', $data_val[8])){
		echo $data_val[8] . "<br>";
	}
}
?>
```

PHP：preg_matchが値を返さない

###前提・実現したいこと
PHPとMySQLを使い、「楽譜管理プログラム」のデータベースを作っています。楽譜の管理クラス（大分類）と管理番号（例：P-001、C-005）二重登録したくないので、以下の構文にしてみましたが、二重登録できてしまうのと
```
Warning: PDOStatement::execute() expects at most 1 parameter, 2 given in /virtual/(id名)/public_html/add.php on line 52
```
というエラーがでました。

※ DB接続パスワードは消してます
###該当のソースコード
```PHP
<?php
session_start();
error_reporting(E_ALL ^ E_NOTICE);

$db['host'] = '';
$db['user'] = '';
$db['pass'] = '';
$db['dbname'] ='';

// エラーメッセージ、登録完了メッセージの初期化
$errorMessage = "";
$signUpMessage = "";

// ログインボタンが押された場合
if (isset($_POST["signUp"])) {
    // 1. ユーザIDの入力チェック
    if (empty($_POST["kanriclass"])) {  // 値が空のとき
        $errorMessage = '管理クラスが未入力です。';
    } else {
        if (empty($_POST["kanrino"])) {  // 値が空のとき
            $errorMessage = '管理番号が未入力です。';
        } else {
            if (empty($_POST["songnamekana"])) {  // 値が空のとき
                $errorMessage = '曲名（カナ）が未入力です。';
            } else {
                if (empty($_POST["songname"])) {  // 値が空のとき
                    $errorMessage = '曲名が未入力です。';
                }
            }
        }
    }

    if (!empty($_POST["kanriclass"]) && !empty($_POST["kanrino"]) && !empty($_POST["songnamekana"]) && !empty($_POST["songname"])) {
        // 入力したユーザIDとパスワードを格納
        $kanriclass = $_POST["kanriclass"];
        $kanrino = $_POST["kanrino"];
        $songnamekana = $_POST["songnamekana"];
        $songname = $_POST["songname"];
        $memo = $_POST["memo"];

        // 2. ユーザIDとパスワードが入力されていたら認証する
        $dsn = sprintf('mysql:host=%s;dbname=%s;charset=utf8', $db['host'], $db['dbname']);

        // 3. エラー処理
        try {
            $pdo = new PDO($dsn, $db['user'], $db['pass'], array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));

	    // プリペアドステートメントを用意
	    $stmt = $pdo->prepare('SELECT COUNT(*) FROM test WHERE `kanriclass`, `kanrino` = ?, ?');

	    // 「?」の部分に文字列として安全に入力をあてはめて実行
	    $stmt->execute([$kanriclass],[$kanrino]);
		$count = (int)$stmt->fetchColumn();

		if ($count === 0) {
            $stmt = $pdo->prepare("INSERT INTO `test`(`kanriclass`, `kanrino`, `songnamekana`, `songname`, `memo`) VALUES (?, ?, ?, ?, ?)");
            $stmt->bindParam(1, $kanriclass, PDO::PARAM_STR);
            $stmt->bindParam(2, $kanrino, PDO::PARAM_INT);
            $stmt->bindParam(3, $songnamekana, PDO::PARAM_STR);
            $stmt->bindParam(4, $songname, PDO::PARAM_STR);
            $stmt->bindParam(5, $memo, PDO::PARAM_STR);

            $stmt->execute();
            $signUpMessage = '登録が完了しました。管理クラス・番号は ' . $kanriclass . '-' . $kanrino . ' です。曲名：「' . $songname . '（' . $songnamekana . '）」、また、メモとして「' . $memo . '」を追加しました。';
	} else {
	$confirmerror =  'エラー：管理クラス「' . $kanriclass . ' ' . $kanrino . '」はすでに登録されています。';
	}
        } catch (PDOException $e) {
            $errorMessage = 'データベースエラー';
            // $e->getMessage() でエラー内容を参照可能（デバック時のみ表示）
            echo $e->getMessage();
        }
    }
}
?>

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>新規登録</title>
</head>
<body>
<h1>新規登録画面</h1>
<form id="loginForm" name="loginForm" action="" method="POST">
    <fieldset>
        <legend>新規登録フォーム</legend>
        <div><font color="#ff0000"><?php echo htmlspecialchars($errorMessage, ENT_QUOTES); ?></font></div>
        <div><font color="#ff0000"><?php echo htmlspecialchars($confirmerror, ENT_QUOTES); ?></font></div>
        <div><font color="#0000ff"><?php echo htmlspecialchars($signUpMessage, ENT_QUOTES); ?></font></div>

        <label for="kanriclass">※必須※ 登録クラス</label>

<input type="text" required id="kanriclass" name="kanriclass"
                                                         value="<?php if (!empty($_POST["kanriclass"])) {
                                                             echo htmlspecialchars($_POST["kanriclass"], ENT_QUOTES);
                                                         } ?>" placeholder="クラスを入力">
        <br>
        <label for="kanrino">※必須※ 管理番号</label><input type="text" required id="kanrino" name="kanrino"
                                                     value="<?php if (!empty($_POST["kanrino"])) {
                                                         echo htmlspecialchars($_POST["kanrino"], ENT_QUOTES);
                                                     } ?>" placeholder="管理番号を入力">
        <br>
        <label for="songnamekana">※必須※ 曲名（カナ）</label><input type="text" required id="songnamekana" name="songnamekana"
                                                            value="<?php if (!empty($_POST["songnamekana"])) {
                                                                echo htmlspecialchars($_POST["songnamekana"],
                                                                    ENT_QUOTES);
                                                            } ?>" placeholder="曲名のカナを入力">
        <br>
        <label for="songname">※必須※ 曲名</label><input type="text" required id="songname" name="songname"
                                                    value="<?php if (!empty($_POST["songname"])) {
                                                        echo htmlspecialchars($_POST["songname"], ENT_QUOTES);
                                                    } ?>" placeholder="曲名を入力">
        <br>
        <label for="memo">メモ（任意）</label><textarea type="text" id="memo" name="memo" cols="50" rows="10"
                                                  placeholder="メモを入力"></textarea>
        <br>
        <input type="submit" id="signUp" name="signUp" value="新規登録">
    </fieldset>
</form>
</body>
</html>
```
phpMyAdmin
```SQL
--
-- テーブルの構造 `test`
--

CREATE TABLE IF NOT EXISTS `test` (
  `id` int(5) NOT NULL AUTO_INCREMENT,
  `kanriclass` varchar(30) NOT NULL,
  `kanrino` int(30) NOT NULL,
  `songnamekana` char(100) NOT NULL,
  `songname` char(100) NOT NULL,
  `memo` text,
  `kanriclassconfig` varchar(50) NOT NULL,
  PRIMARY KEY (`id`),
  UNIQUE KEY `id_2` (`id`),
  UNIQUE KEY `id_3` (`id`),
  KEY `id` (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=22 ;

--
-- テーブルのデータのダンプ `test`
--

INSERT INTO `test` (`id`, `kanriclass`, `kanrino`, `songnamekana`, `songname`, `memo`, `kanriclassconfig`) VALUES
(1, 'M8', 1, 'キミガヨ', '君が代', '日本の国歌。', ''),
(3, 'M8', 3, 'アールピージー', 'RPG', '', ''),
(4, 'M8', 3, 'アールピージー', 'RPG', '', ''),
(5, 'M8', 5, 'サンガツココノカ', '3月9日', 'レミオロメンの楽曲', ''),
(11, 'M8', 55, 'ア', 'あ', '', ''),
(12, '', 0, '', '', NULL, 'M8'),
(14, '', 0, '', '', NULL, 'P'),
(15, '', 0, '', '', NULL, 'NK'),
(16, 'M8', 10, 'キミガヨコウシンキョク', '君が代行進曲', '', ''),
(17, 'M8', 15, 'ゼンゼンゼンセイ', '前前前世', '', ''),
(18, 'M8', 15, 'ゲンロク', '元禄', '', ''),
(19, 'M8', 0, 'ガッツ!', 'GUTS!', '', ''),
(20, 'M8', 139, 'ガッツ!', 'GUTS!', '', ''),
(21, 'M8', 139, 'ガッツ!', 'GUTS!', '', '');

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
```

###補足情報(言語/FW/ツール等のバージョンなど)
サーバー：「XREA（s1001）」

PHPバージョン：5.5.38
phpMyAdmin：4.0.10.15

MySQLの二重登録を防止したい

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../css/test.css">
<title>Test</title>
</head>
<body>
<div class="masume"></div>
<div class="masume"></div>
<div class="masume"></div>
<div class="masume"><p class="koma"></p></div>
<div class="masume"></div>
<div class="masume"></div>
<div class="masume"></div>
<div class="masume"><p class="koma"></p></div>
<div class="masume"></div>

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="../js/test.js"></script>
</body>
</html>
```
```css
html body {
	margin: 0;
}
.masume {
	float: left;
	width: 28px;
	height: 28px;
	border: solid 1px #000;
}

.koma {
	clear: left;
	background-color: blue;
	width: 28px;
	height: 28px;
	margin: 0;
}
```

```javascript
$(function(){
	var $selectedKoma = null;

	$('.koma').on('click', function(){
	    $selectedKoma = $(this);
	    console.log("選択されました。");
	});

	$('.masume:not(:has(.koma))').on('click', function(){
		console.log($selectedKoma);
	    $(this).append($selectedKoma);
	    $selectedKoma = null;
	});
});

```
![イメージ説明](a239ea03a53d40964b688e203a97024e.jpeg)

あるmasumeクラスの子要素のkomaクラスを別のmasumeクラスの子要素に移動させたいのですが、一回きりで移動しなくなってしまいます。console.logで確かめたところ、なぜか２回目から'.masume:not(:has(.koma))'まで選択されているようです。
何回も移動できるようにしたいので、やり方を教えてください。よろしくお願いします。

js(jQuery)がうまく動きません

```javascript
<script type=text/javascript>
$(function() {
    $.ajax({
            url: 'main2.php',
            type:'GET',
            async: false
    }).done(function(data) {
            $("#tag").html($(data).filter("#wrapper").html());
    }).fail(function(){
                    alert("failed");
    });
});    
</script>
</head> 
<body> 
    <div id="tag">
    </div>  
</body>
</html>  
```
$("#tag").html($(data).filter("#wrapper").html());この行の
$(data)ってどういう意味なんでしょうか。html()はその直前の要素をhtmlで返すんですよね。自分なりのこの行の解釈はbodyのid=tagの中に、wrapperの部分のdataをhtml形式で入れるといった感じです。なんでdataの前に$がつくんだろうって思ってしまいます。関数とかだったら、jqueryの決まりで違和感ないんですけども・・・。

$(data)の意味

###Javascriptにおけるpromise型って結局何がしたいのですか？


> http://postd.cc/how-do-promises-work/

こちらを参考にしてみたが全く意味が分かりませんでした。

処理実行を並列して行って？処理時間短縮させたいんだなぁ。って感じのことは分かったんですが。

このサイトでの文章を見るとこんなことが記載されています。
> Promiseは、欲しい値を待つ代わりに、その値の代替となるものを即座に得る方法を提案します。

私にはこの言葉の意味が全く持って不明です。
引数がないのに処理実行して、仮の戻り値を算出してるってことなのですか？

例えば掛け算で言うところの
２ × ２ ＝ ４
をプロミス化すると
X × X = Y

ってことですか？

質問が不明瞭ですいません。
結局のところ知りたいことはプロミスのメリット・デメリットです。
お願いします。

プロミスってなんですか？

javascriptでMysqlと接続し、データの参照、書き換え等を行いたいと思っています。

Node.jsのモジュールを利用しており、データを取り出す(console.logで出力する)ところまではできております。
この取り出した値を、次のクエリを投げる関数に引き渡したいのですが、うまく渡すことができないまま2週間悩んでおります。

```javascript
var haha = function oya(){
    var mysql = require('mysql');

    const connection = mysql.createConnection({
            host : 'localhost',
            user : 'root',
            password : '*******',
            database: 'Sample'
        });

    // 接続                                                                                          
    connection.connect();

    // userdataの取得                                                                                
    let UNO = "3434";
    let query = 'SELECT UserNO FROM `electronSample` where ID = "'+ UNO +'";';
    let kari = function (err, rows, fields) {
        if (err) {
            console.log('err: ' + err);
        }
        let aaa = rows[0].UserNO;
        console.log(aaa);
    };

    let tama = connection.query(query, kari)

    // 接続終了                                                                                      
    connection.end();
}; 
```
ここでは、aaa という変数を別の関数で利用したいと考えています。
変数を保持できる関数スコープの話や、グローバル変数等もネットで調べたりして色々試してみたのですが、このコードの関数外でconsole.logで出力しようとしても undefined とエラーを吐かれてしまいます。
どう改良すれば、aaaの値を引き渡すことができるのでしょうか？
ご助言よろしくお願いします。

javascriptでの関数間の変数引き渡しについて

お世話になります。
ご教授いただけますよう、何卒よろしくお願い申し上げます。

###実現したいこと
WordPressでサイトを構築しています。
高度なことをするものではありませんが、
チェックボックスによる『検索(絞り込み)機能』をつけて
欲しいと言われています。

例として社員一覧を作るみたいな感じで、
1. エリア（関東、関西、東海など）
2. タイプ（正社員、契約、バイト）
といったようにエリアとタイプをそれぞれ選び、

関東＆正社員にチェック ＝関東の正社員を表示する
正社員にチェック    ＝正社員だけが表示される
関東＆関西＆東海＆バイト＝関東、関西、東海のバイトが表示される

という結果を返してくれるようにしたいと思っています。

現在のテンプレート構成として当該部分を構成するものは以下の通りになっています。

list.php  	 ← 一覧ページを形成：ここにチェックボックス検索を入れたい
search-lists.php ← チェックボックスで検索したら結果が表示される

※list.phpとsearch-lists.phpのデザインを同じにしたいため
 こうしています。

single-lists.php ← 詳細ページが表示される


###現況・試したこと
現在の状態として、カスタムフィールドテンプレートでラジオボタンを作り
・エリア
・タイプ
のどれかひとつを選ぶ形になっています。


前項に対して、今までに試したことですが、主に以下のサイトさんの
記事を参考にしました。

http://kotori-blog.com/wordpress/refinement_search/
http://www.webopixel.net/wordpress/584.html
http://turezurenaru.blog.jp/archives/31060521.html
https://magnets.jp/web_design/cms-web_design/3124/


###該当のソースコード

上記サイトを参考にして以下のコードをそれぞれのテンプレートに
記載しました。

■list.php

```
<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/list/">
  <input type="hidden" name="s" id="s" placeholder="検索" />
    
 <div>カスタムフィールド</div>
    <label><input type="checkbox" name="request[]" value="関東">関東</label><br>
    <label><input type="checkbox" name="request[]" value="東海">東海</label><br>
    <label><input type="checkbox" name="request[]" value="関西">関西</label><br>
    <label><input type="checkbox" name="request[]" value="正社員">正社員</label>
    <label><input type="checkbox" name="request[]" value="契約">契約</label>
    <label><input type="checkbox" name="request[]" value="バイト">バイト</label>
    <input type="submit" value="検索" />
</form>
```

■search-lists.php
```
<?php
$s = $_GET['s'];
$request = $_GET['request'];
 
//meta_query用
if($request){
    foreach($request as $val){
        $metaquerysp[] = array(
                'key'=>'request',
                'value'=> $val,
                );
    }
}
$metaquerysp['relation'] = 'AND';
?>
 
<div>検索条件</div>
<?php if($s){ ?>検索キーワード：<?php echo $s; ?><br><?php } ?>
<?php if (is_array($request)) { ?>カスタムフィールド：<?php
if (is_array($request)) {
foreach($request  as $val){
if ($val === end($request)) {
echo $val;
    }else{
echo $val.", ";
}
}
}
}
 ?>
 
<div>検索結果</div>
 
 
<?php
query_posts( array(
    'meta_query' => $metaquerysp,
    's' => $s,
    )
);
?>

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
 


<div><?php the_title(); ?></div>
<div><?php the_content(); ?></div>
 
<?php endwhile; else : ?>
 
<div>該当なし</div>
 
<?php endif;
wp_reset_query(); ?>
```

###発生している問題
結果を表示するsearch-lists.phpは読み込んでいるのですが、
検索結果が「該当なし」など思うように表示されません。

検索を押した際のURLですが、以下の通りになります。

http://URL/wp-demo/list?s=&request%5B%5D=関東&request%5B%5D=正社員


ここを手動でs=関東とすると結果的に関東のものが出力されますが、
s=正社員とすると正社員は表示されない状態です。


何が悪いのかさっぱりわからず途方にくれております。

悪い箇所のご指摘等いただけましたら幸いです。
またできましたら解決策も一緒にご教示頂けましたら
本当に助かります。

お手数ですが、何卒よろしくお願い申し上げます。