初心者のWEBデザイン

HTML,CSS、その他WEBデザインに関する事を記述していきます

PHP Javascript 決済システム Stripe実装

Webサイトにクレジットカード決済を簡単に埋め込むことが出来るシステム
Stripeの健忘録

下記のscriptタグをページに埋め込むとStripeのサーバーからボタンを表示する
コードが返される。通常はページが読み込まれると同時に
data-〇〇がサーバーに全て送信されているので後から金額を変更しようとしても
ポップアップするUIの値は変更ができません。

クライアント側が入力した金額で決済する、且つポップアップされたUIの金額の表示を
入力してもらった金額に変更する方法は少し手がかかります。

・金額入力用のinputタグ・金額決定後のボタンを用意する
・金額入力用のinputタグの値が入力されたらonchangeイベントハンドラで値を変数に代入する
・金額決定後のボタンをクリックしたら下記のstripeのscriptを呼び出す。
・入力された金額の変数をdata-amountに適用する

セキュリティー上改竄される可能性があり、あんまり好ましくない気がするので、
他にセキュリティー対策が必要だと思います。

//index.php
<form action="任意のページ" method="POST">
  <script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="アカウントの公開キーを入力する"
    data-amount="1000"
    data-name="ウェブショップ"
    data-description="商品代金のお支払い"
    data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
    data-locale="ja"
    data-currency="jpy">
  </script>
</form>

それとPOST送信する前のページの値はあくまで表示されるだけで
実際に使用される値はPOSTを受け取ったページで行われます。

//これを読み込まないと動作しません。
require_once($_SERVER['DOCUMENT_ROOT'] . '/vendor/autoload.php');
//公開してはいけません。Githubとかに公開しないよう注意。
\Stripe\Stripe::setApiKey("アカウントの秘密キー");

$token = $_POST['stripeToken'];
//下記の値が実際にStripeの決済画面で反映される値。
$charge = \Stripe\Charge::create([
          'amount' => 1000, 
          'currency' => 'jpy',
          'description' => '商品代金のお支払い',
          'source' => $token,
          
        ]);

PHP 配列に代入のあれこれ 健忘録

配列に要素を追加する:array_push()を使用
<?php
$animalArray = array('', '', '');
array_push($animalArray, '');
var_dump($animalArray);
?>
//実行結果
// Array ( [0] => 猫 [1] => 犬 [2] => 鳥 [3] => 馬 ) 
追加する要素のキーは指定できない(エラーになる):array_push()を使用
<?php
$animalArray = array('cat'=>'', 'dog'=>'', 'bird'=>'');
array_push($animalArray,'horse', '');
var_dump($animalArray);
?>
//実行結果
// エラーになります。連想配列へはarray_pushが使用できません。
キーと値を指定して配列要素を追加する
<?php
$animalArray = array('cat'=>'', 'dog'=>'', 'bird'=>'');
$animalArray['horse'] = '';
var_dump($animalArray);
?>

PHP パスを知りたい場合の健忘録

いつも調べているので書き残しておきます。

//とりあえずサーバー系の情報を知りたい時には
foreach($_SERVER as $k => $v) {
  echo $k . ':' .$v . '<br>';
}
// 現在アクセスしているサーバーのURLを取得
echo $_SERVER['REQUEST_URI'];

//サーバーのルートディレクトからの絶対パスを取得 
//    "/Users/ユーザーネーム/Desktop/cat/"
echo($_SERVER['DOCUMENT_ROOT']);


// PHP環境変数 一覧
echo __FILE__."実行中のファイル名<br>";
echo __DIR__."実行中のファイルがあるフォルダ<br>";
echo __LINE__."実行中の行番号<br>";
echo __FUNCTION__."//実行中の関数<br>";
echo __CLASS__."実行中のクラス<br>";
echo __METHOD__."実行注のメソッド<br>";
echo __NAMESPACE__."現在の名前空間<br>";
echo DIRECTORY_SEPARATOR."現在の環境のフォルダの区切り文字<br>";
echo PATH_SEPARATOR."現在の環境のパスの区切り文字<br>";
echo PHP_VERSION."<br>";

Illustrator SVGからアイコンフォントを作成する際の注意点 健忘録

SVGからアイコンフォントを作成する際にはまった点を忘れないように残しておきます。


オブジェクトは線の状態だとアイコンフォントにした際に無視されます。
ですから四角形や丸などの線で表現したオブジェクトは必ず下記の処理を行いましょう。
オブジェクト > パス > パスのアウトライン

これで線ではなく塗りのオブジェクトに変更されます。
この処理を行った後、アイコンフォントを変更すると問題なく作成できます。

Javascript 正規表現 健忘録

正規表現を使用する際に忘れてしまうので後々まとめて追加していく予定です。

正規表現を使用したい時には

<script>
/ ここに正規表現で検索したワードを入力する /
<script/>
行頭の文字と一致させる

検索したい文字列の前に^(キャレット)を入力

<script>
/ ^cat /
<script/>

ex1 - cat is running
ex2 - Sleeping cat
ex1に一致

行末の文字と一致させる

検索したい文字列の前に^(キャレット)を入力

<script>
/ cat$ /
<script/>

ex1 - cat is running
ex2 - Sleeping cat
ex2に一致

PHP isset, empty, is_null 早見表 健忘録

isset, empty, is_null の違いをすぐ忘れてしまうので残しときます。
条件分岐もこれを見れば楽チンです。

if($var) isset empty is_null
$var=1 true true false false
$var=""; false true true false
$var="0"; false true true false
$var=0; false true true false
$var=NULL; false false true true
$var false false true true
$var=array() false true true false
$var=array(1) true true false false


PHP: PHP 型の比較表 - Manual

PHP DB接続 健忘録

まずはDBに接続します。

下記に従って正常に接続できていない場合には、真っ白かエラーになります。
エラーにならなければ、正常に接続できてます。

  $dns = "mysql:dbname=テーブル名;host=ホスト名";
  $username = "phpmyadminのユーザ名";
  $password = "phpmyadminのユーザ名";
  try {
      $pdo = new PDO($dns, $username, $password,
      array(
        PDO::ATTR_EMULATE_PREPARES => false //静的プレースホルダ設定
      ));//静的か動的かを選択。静的の方がセキリティ高し

  } catch (PDOException $e) {
    // エラーが発生した場合は「500 Internal Server Error」でテキストとして表示して終了する
    // - もし手抜きしたくない場合は普通にHTMLの表示を継続する
    // - ここではエラー内容を表示しているが, 実際の商用環境ではログファイルに記録して, Webブラウザには出さないほうが望ましい
    return $e->getMessage();
  }
次にSQL文を作成します。
$sql = "INSERT INTO mail_form (カラム名) VALUES (:val)";
$stmt = $pdo->prepare($sql);

VALUES後の:valはプレースホルダと言います。

プリペアステートメント = 命令文を準備する
SQLをPDOオブジェクトのメソット
SQL文を実行する際に:valと入力したい値を紐付けを行います。

静的プレースホルダは、データベース側でバインドでします。
動的プレースホルダは、バインドしてからデータベース側へ命令文を渡します。
動的プレースホルダの方がSQLインジェクションを許してしまう可能性が上がるので、セキュリティ上は静的プレースホルダが好ましい。

値をバインドする
$cat = "ねこ";
$stmt->bindParam(":val",$cat, PDO::PARAM_STR);
//こうすることでSQL文は
//$sql = "INSERT INTO mail_form (カラム名) VALUES ('ねこ')";
//となる
bindParam(パラメータID,バインドする値(変数),データ型)
実行する
$stmt->execute();
Select文でDBから値を引っ張る場合(一次元配列)

これだと複数の行は取得できない

//SQL文をPDOオブジェクトにセットして変数に代入
$stmt = $pdo->prepare($sql);
//SQL文を実行
$stmt->execute();
//ステートメントを取り出し、結果を変数に代入
$result = $stmt->fetch();
//結果を表示
var_dump($result)
//もしくは
  foreach ($result as $row => $v) {
    echo $result[$row];
  }


Select文でDBから複数の値を引っ張ってループさせる場合(多次元配列)
複数の行を取得する場合

//SQL文をPDOオブジェクトにセットして変数に代入
$stmt = $pdo->prepare($sql);
//SQL文を代入
$stmt->execute();
//ステートメントを取り出し、結果を変数に代入
$result = $stmt->fetchALL(PDO::FETCH_ASSOC);
  foreach ($result as $row ) {
    echo $row['カラム名'] . '<br>';
  }

PHP メールフォーム 送信編 健忘録

久しぶりにメールフォーム作成したら忘れていることが多かったので、
残しておきます。

入力ページ:情報の入力します。

POSTで確認ページにデータを送ります。
GETだと入力内容ダダ漏れなので気をつけましょう。

         ↓

確認ページ:入力した情報を確認します。

間違いがあれば入力ページに戻ります。
入力ページで入力された値をPOSTで受け取り
SESSION変数に代入します。

  • 直接アクセスされた場合の処理(header関数でリダイレクト設定をする)
  • 判定フラグ作成(条件分岐してFalseなら送信ボタンを押せない等...)

         ↓

送信ページ:送信が完了したことを確認するページです。

受け取ったSESSION変数を変数に代入します。
不正利用防止の為、SESSION変数は破棄します。

下記のサイトがSESSIONの仕組みが分かりやすく、参考になりました。
d.hatena.ne.jp





メール本文を変数に入れる際にヒアドキュメントを使用することがあります。
その際の注意点

$document = <<<EOD //セミコロン要らない
===========================

//ここにたくさんのメッセージを入力する
//PHPの構文制御は無くなります。
//変数を使用するときには、{}で括ります。

===========================
EOD; //セミコロン必要 + インデントがあるとエラーになります。

送信完了画面でリロードされるとメールが沢山送信され困りますので、
フラグとSESSION変数の有無で条件分岐しときましょう。


このページが参考になりました。
teratail.com

wget 使い方健忘録 コマンドライン

何処かのサイトで画像を大量にダウンロードしたい時に
画像一枚一枚を右クリック>ダウンロードして保存の
作業をしていると時間がいくらあっても足りません。

そんな時はコマンドラインからwgetを使用して一括でダウンロードできます。

プロトコル

ファイルを指定する(この場合は拡張子jpg, png, gifを指定)
ダブルクオートで囲めば、正規表現も使用可能。

wget -A jpg, png, gif  http://www.〇〇○.com/


再帰的にダウンロード

wget -r  http://www.〇〇○.com/

ダウンロードする階層の指定

wget -l 3 http://www.〇〇○.com/

指定したファイルをダウンロードしない

wget -R jpg, png, gif  http://www.〇〇○.com/
  • H:異なるドメインのファイルはダウンロードしない

他のオプションはmanを読みましょう。

PHP URL取得 健忘録 

echo "フルパス:";
echo __FILE__ . '<br />';
echo "ディレクトリパス:";
echo dirname(__FILE__) . '<br />';
echo "スクリプト名:";
echo basename(__FILE__) . '<br />';
echo "指定した拡張子を取り除いたスクリプト名:";
echo basename(__FILE__, '.php'). '<br />';
echo "__DIR__:";
echo __DIR__. '<br />';
echo "ドキュメントルート:";
echo $_SERVER['DOCUMENT_ROOT']. '<br />';
// if (file_exists(BLOCK_PATH .'/carousel.php')) {
//   echo "<h1>true</h1>";
// } else {
//   echo "<h1>false</h1>";
// }
echo "<br>";
echo "ドメインのみ取得";
echo $_SERVER[‘HTTPS‘]. '<br />';
echo $_SERVER["SERVER_NAME"]. '<br />';
echo $_SERVER["HTTP_HOST"]. '<br />';

// ドキュメントルートからの絶対パスを取得
echo $_SERVER[‘REQUEST_URI‘];
echo $_SERVER[‘SCRIPT_NAME‘];