カテゴリー: Web

Ajaxの実装 (検索サジェスト)

目標

本記事の目標は、以下のようにAjax通信による検索サジェストを実装することです。

環境

Ajaxについて

AJAX(Asynchronous JavaScript And XML)は、JavaScriptを使って、クライアント側で非同期通信を実現するためのWeb開発技術群を指す言葉です。非同期通信とAjaxについては、“AJAXとは (そして非同期通信とは)?”に詳しく記載しています。以下では、Ajaxの仕組みについて簡単に説明しています。

Ajaxの仕組み

Ajaxでは、「サーバーへのリクエスト送信と受信」「送信、受信した内容をブラウザ側に伝える」という2つの機構を分離しています。そのため、リクエスト待ちの間も、ブラウザ上で操作を続けることができます。

(さらに…)

AJAXとは (そして非同期通信とは)?

AJAX(Asynchronous JavaScript And XML)は、クライアント側で非同期通信を実現するためのWeb開発技術群を指す言葉です。

目標

今日の目標は、非同期通信とAJAXについて理解し、簡単にまとめることとなります。自分と同様に初心者の方を想定しています。

同期通信と非同期通信とは?

同期通信とは、送信者によるデータ送信と受信者によるデータ受信のタイミングをそろえる通信方式です。一方で、非同期通信とは、このやり取りのタイミングを一致させない通信方式になります。

通信方式を表す言葉なので、「同期方式」と「非同期方式」という単語を使用することもあります。

この” “同期”という用語の意味は、使用される文脈によって変化します。例えば、物理的なレベルでは、通信においてクロック周波数の同期をとることを指します。Webにおいては、クライアントのリクエストのタイミングとサーバーからのレスポンスを受け取るタイミングを合わせる、ということを指します。以下では、Webアプリケーションの文脈で説明します。

(さらに…)

PHPでJsonデータを作成する方法

JSONは、PHPでのデータのやり取りに使用されます。どのようにphpでjson形式のデータを作成し、それをJavaScriptなどに渡すのでしょうか。

目標

本記事の目標は、PHPで配列からJsonデータを生成し、JavaScriptで受け取ることです。これは、例えば、サーバからPHPでデータを取得して、JavaScriptで処理する場合などに使用できます。

方法

1. 入れ子のarrayを作成する

以下のようなサンプルデータを作成しました。

<?php
$teachers = []
$teachers = [
    "101" => [
        "name" => "Poppins",
        "class" => "music",
    ],
    "102" => [
        "name" => "Dolittle",
        "class" => "natural history",
    ],
    "103" => [
        "name" => "Snape",
        "class" => "pharmacy",
    ],
];
?>

forループを使って同じデータ構造を生成する場合は、以下のようになります。

<?php
$teachers = [];
$data_set = [["101", "Poppins", "music"],["102", "Dolittle", "natural history"],["103", "Snape", "pharmacy"]];
for($i=0; $i < count($data_set); $i++){
    $teacher = $teachers_list[$i];
    $teachers += array($teacher[0] => array("name" => $teacher[1], "class" => $teacher[2]));
}
?>

2. json_encode()関数を使って、Jsonに変換する

<?php
echo json_encode($teachers);
?>
//output => {"101":{"name":"Poppins","class":"music"},"102":{"name":"Dolittle","class":"natural history"},"103":{"name":"Snape","class":"pharmacy"}}

3. JavaScriptでデータを受け取る

Json形式の文字列をphpの変数$teachersから受け取り、この文字列をJSON.parse()を使ってObjectに変換します。

<script type="text/javascript">
    var json_str='<?php echo json_encode($teachers); ?>';
    var json_obj = JSON.parse(json_str);
    console.log(json_str)
    for(k in json_obj){ // get keys
        var teacher = json_obj[k];
        console.log("name: " + teacher['name']);
        console.log("class: " + teacher['class']);
    }
/*
--console output--
name: Poppins
class: music
name: Dolittle
class: natural history
name: Snape
class: pharmacy
*/
</script>

ソースコード

ソースコード全体は以下のようになります。

<?php
$teachers = [];
$teachers = [
    "101" => [
        "name" => "Poppins",
        "class" => "music",
    ],
    "102" => [
        "name" => "Dolittle",
        "class" => "natural history",
    ],
    "103" => [
        "name" => "Snape",
        "class" => "pharmacy",
    ],
];
?>

<script type="text/javascript">
    var json_str='<?php echo json_encode($teachers); ?>';
    var json_obj = JSON.parse(json_str);
    console.log(json_str)
    for(i in json_obj){
        var teacher = json_obj[i];
        console.log("name: " + teacher['name']);
        console.log("class: " + teacher['class']);
    }
</script>

PHPで検索フォームを作成する

目標

データベースから名前を検索する検索フォームを作成します。

環境

Windows10
XAMPP 7.4.10

方法

今回のコードは、”XAMPPでPHPを使ってMySQLにアクセスする“のコードを一部改変したものです。先にそちらをご覧いただくことをお勧めします。

検索フォーム

postメソッドを使用します。フォームの名前は、以下のように”word”としました(この名前は、後ほど値を取得するのに使用します)。

<form action="" method="POST">
    <label>Name:</label>
    <input type="text" name="word" /> <input type="submit" value="Search" />
</form>
(さらに…)

XAMPPでPHPを使ってMySQLにアクセスする 2

本記事は、「XAMPPでPHPを使ってMySQLにアクセスする」の続きです。先にそちらを見ていただくことをお勧めします。

目標

本記事の目標は、XAMPPで、PHPを使ってMariaDB(MySQL)にアクセスし、データを書きこむことです。(前回は、データの読み出しを行いました。)

環境

Windows10
XAMPP 7.4.10

方法

1. PDOでデータベースにアクセスします

まず、「XAMPPでPHPを使ってMySQLにアクセスする」で作成したgetuser.phpを開きます。コードはここに追加していきます。

(さらに…)

XAMPPでPHPを使ってMySQLにアクセスする

目標

本記事の目標は、XAMPP上でPHPを使って、MariaDB(MySQLデータベース)にアクセスすることです。

環境

Windows10
XAMPP 7.4.10

事前準備として、XAMPPをインストールします(参考: XAMPPのインストール)。また、MariaDBを本番環境で使用する場合は、パスワードを設定し安全に使用できるようにします(XAMPPでMySQLパスワードを設定する)。

また、自分の環境では、”photo_sharing”という名前のデータベースを作成してあります(参考: XAMPPでMaria DBのデータベースを作る)

PDOについて

PDO(PHP Data Objects)は、PHPでデータベースにアクセスするための拡張モジュールです。

参考: PHP Data Objects (PHPマニュアルより)

(さらに…)

XAMPPでMaria DBのデータベースを作る

目標

本記事の目標は、XAMPPでMariaDBのデータベースを作成することです。

環境

Windows10
XAMPP 7.4.10

もし、XAMPPがインストールされていない場合は、インストールしてください(参考: XAMPPのインストール)。また、MariaDBを本番環境で使う場合は、安全のためパスワードを設定してください(参考: XAMPPでMySQLパスワードを設定する)。

方法

1. phpMyAdminを開く

XAMPP Control Panelを開いて、ApacheとMariaDBを起動します。

localhost/phpmyadmin/ にアクセスするか、MySQLのAdminボタンをクリックします。

(さらに…)

XAMPPでMySQLパスワードを設定する

目標

本記事の目標は、XAMPPを安全に保つために、MySQLのパスワードを設定することです。

環境

Windows10
XAMPP 7.4.10

もし、XAMPPがインストールされていない場合は、インストールしてください(参考: XAMPPのインストール)。

XAMPPのセキュリティ

XAMPPのセキュリティに関して、詳しくは、Windows Frequently Asked Questionsの”Is XAMPP production ready?“を参照してください。いくつか古い内容もありますが、なぜ、XAMPPをデフォルトのまま本番環境で使用すべきでないかといったことが書かれています。

方法

1. ApacheとMySQLを起動します

XAMPP Control Panelを開き、ApacheとMySQLを起動します。

2. phpMyAdminにアクセスしパスワードを変更します

ブラウザで localhost/phpmyadminにアクセスし、”User accounts”をクリックします。

root@localhostの”Edit privileges”をクリックします。

“Change password”をクリックします。

パスワードを入力します(Generateボタンで安全性の高いパスワードを生成できます)。完了したら”Go”ボタンをクリックしてください。

phpMyAdminを閉じます。

* この時点から、phpMyAdminでエラーが起こります。phpMyAdminが設定したパスワードを知らないため、アクセス許可が下りないからです。

3. phpMyAdminのconfig.inc.phpを変更します

xampp/phpMyAdmin/config.inc.phpを開いて$cfg[‘Servers’][$i][‘password’]の値を変更します。

/* Authentication type and info */
$cfg['Servers'][$i]['auth_type'] = 'config';
$cfg['Servers'][$i]['user'] = 'root';
$cfg['Servers'][$i]['password'] = '';  //input the password here

ファイルを保存して閉じます。

結果の確認

XAMPP からShellを開いてください。

コマンド”mysql -h localhost -u root -p”を実行し、設定したパスワードを入力します。

# mysql -h localhost -u root -p
Enter password:  <input password here>

MariaDBに接続したことが確認できます。

“quit”を入力するとMySQLを終了します.

localhost/phpmyadminにもアクセスできるようになっていることを確認してください。

次のステップ

関連記事: XAMPPでMaria DBのデータベースを作る

XAMPPでPHPを実行する

前回、XAMPPをインストールしました。次は、PHPのテスト環境としてXAMPPを使用してみます。(参考: XAMPPのインストール)

目標

本記事の目標は、XAMPPの設定を行い、PHPの開発環境として使用できるようにすることです。

XAMPPを始める

[警告]XAMPP Control Panelを閉じる前には、モジュールが全て終了していることを確認してください。

方法1 xampp/xampp-control.exeを使う

“xampp/xampp-control.exe”を右クリックするか、スタートメニューの”XAMPP Control Panel”を右クリックして、管理者として実行します。

(さらに…)

XAMPPのインストール

XAMPPでweb開発をしていきます。

目標

本記事の目標は、XAMPPとは何か、どのようにインストールするかを理解することです。

実際の開発は次の記事で行います。

環境

Windows10
XAMPP 7.4.10

XAMPPとは何か?

XAMPPは、フリーのPHP開発環境です。XAMPPは、ウェブ開発のための基本的なフリーソフトウェアを備えており、例えば、ApacheMariaDB (SQLサーバーとして使用)、PHPPerlphpMyAdminOpenSSLなどが含まれています。

現在使用しているXAMPPに、何が含まれているかは、公式サイトをご確認ください。

ちなみに、XAMPPは、関連技術である、cross platform(X)、Apache、MariaDB、PHP、Perlの頭文字をとった単語です。

XAMPPのインストールの仕方

1. ダウンロード

公式サイトの”Download“にアクセスして、好きなバージョンのXAMPPをダウンロードします。

(さらに…)