CRUD を実装!電子実験ノートを自作してみた!導入コストゼロ!(3/5)

前回の記事に続き、電子実験ノートの自作の記事です。

今回は、記述、閲覧、編集、削除などの、実験ノートに必要な基本的な機能を実装していきます。

これらの機能は Create, Read, Update, Delete の頭文字を取って CRUD と呼ばれ、ウェブアプリ作成の基本とされています。

参考電子実験ノートを自作してみた!導入コストゼロ!(1/5)
参考リアルタイムで計算状況を表示するシステムの構築!【電子実験ノートを自作してみた!導入コストゼロ!】(2/5)
参考PHP でブラウザから job を投入する。電子実験ノートを自作してみた!導入コストゼロ!(4/5)
参考ログイン機能を実装する。電子実験ノートを自作してみた!導入コストゼロ!(5/5)

MySQL の基本操作

前回の記事では、MySQL の操作を省略してしまいましたが、今回の記事ではもう少しだけ詳しく説明していきます。

MySQL を操作するには、まず最初に対象となる MySQL のデータベースに接続する必要が有ります。

mac + MAMP を使用している方は、以下のようにユーザー名もパスワードも root でログインできます。

<?php
    try{
        $pdo = new PDO('mysql:host=localhost;dbname=note', 'root', 'root');
    }catch(PDOException $e){
        print("データベース接続エラー");
    }

?>

レンタルサーバーをお使いの方は、上のコードの localhost にサーバー番号を入力して下さい。また、ユーザー名もパスワードもデータベースを設定した際に登録したものに変えて下さい。

MySQL は、update, delete, select, insert などのキーワードを使って、以下のような命令文でデータベースの操作を行います。

例えば、id 番号が 2 のデータをデータベースから取ってくる時は、以下のように書きます。

SELECT * FROM report WHERE id = 2

select 以外にも、update はデータを更新、delete はデータの削除、insert はデータの追加をするときに使います。

WHERE の後ろには条件文を書きます。例えば、 IRC 計算のデータだけ取ってきたい時は、WHERE calculation LIKE “%irc%” と書けば OK です。

SQL 文はバリエーションが少ないので、学習コストは非常に低く、コスパが良いです。

CRUD の実装

それでは、実際にノートを新規作成するページを作ってみましょう。

以下のリンクからファイルをダウンロードして下さい。

解凍したファイルをそのまま note フォルダに移してください。

admin フォルダ内の者はそのまま admin フォルダ内に、それ以外のファイルは note フォルダの直下に置いて下さい。

Creat: ノート新規作成ページ

add.php というファイルにノートの新規作成ページを書きましょう。

ウェブアプリでのデータの受け渡しには、GET, POST, Cookie, session などの種類があります。今回は、POST メソッドで入力データを受け渡します。

html で入力フォームを作る際には、<form>タグで作ります。今回の例では、下図に示すように MySQL での title, directory, job_number, machine, calculation, scheme, content の項目を入力させます。

add.php のファイルでは、最初に条件分岐が設定されており、$_POST 変数に値が入っていない場合は入力フォーム画面を表示し、値が入っている場合は MySQL への INSERT 命令を出した後に、add_check.php に遷移するように作られています。

MySQL への命令文は以下のように書きます。

$query = $pdo->prepare('INSERT INTO report(title, directory, machine, calculation, content, created_at, status, job_number) VALUES (?, ?, ?, ?, ?, ?, ?, ?)');
                $query->bindValue(1,$title);
                $query->bindValue(2,$directory);
                $query->bindValue(3,$machine);
                $query->bindValue(4,$calculation);
                $query->bindValue(5,$content);
                $query->bindValue(6,time());
                $query->bindValue(7,"QUE");
                $query->bindValue(8,$job_number);
                $query->execute();
                $_SESSION['add'] = $_POST;
                header('Location: add_check.php');

また、クロスサイトスクリプティングを避けるために、各変数にはhtmlspecialchars を使って代入しましょう。(でも研究室内で使用する電子ラボノートで XSS を仕掛けてくる奴はいないと思います。。。)

Read: ノートを閲覧する機能

次に report.php というファイルに閲覧機能を構築しましょう。

前回の記事で作成した calculation_status.php を表示すると No. や job タイトルにリンクが貼ってあると思います。ここをクリックすると、各計算のノートに移動できます。

GET メソッドで計算の id を取得し、下図のように report.php ファイルでノートのデータを開きます。(アドレスの最後に id 番号が表示されているのを確認してください。)

MySQL 文は、select を使って実装します。この文は頻繁に使うので、関数にしておきます。note.php というファイルで以下のように定義します。

<?php
    class Note {
        public  fetch_all() {
            global $pdo;
            $query = $pdo->prepare('SELECT * FROM report');
            $query->execute();

            return $query->fetchAll();
        }

        public  fetch_data($id){
            global $pdo;
            $query = $pdo->prepare('SELECT * FROM report WHERE id = ?');
            $query->bindValue(1,$id);
            $query->execute();
            return $query->fetch();
        }
    }
?>

そして、repot.php の最初で、$_GET 変数を取得して、以下のようにデータを取得します。

    if(isset($_GET['id'])) {
        $id = $_GET['id'];
        $data = $note->fetch_data($id);
    }

html 内部に MySQL の内容を埋め込む際には、以下のように記述していって下さい。

<div class="chablock2"><div class="chahead2"><h3 class="main_h3"> 計算内容 </h3></div><div class="chabody2">
        
        <div class="report_content"><?php echo $data['content']; ?></div>

Update: ノートを編集する機能

次に edit.php に編集する機能をつけましょう。

新規作成で作った add.php とほぼ同じですが、edit.php では、あらかじめ value に MySQL から取得した値を入れておきます。

その後、$_POST に入力された値と MySQL の値が異なる場合のみ SQL の更新を行います。

更新する際の SQL 文は以下のようにします。

if($data['title'] !== $_POST['title']){
                        $query = $pdo->prepare('UPDATE report SET title = ? WHERE id = ?');
                        $query->bindValue(1,$_POST['title']);
                        $query->bindValue(2,$id);
                        $query->execute();
                        echo "<span style='color:red'>タイトルを " . $_POST['title'] . " に変更しました。</span><br>";
                    }

                    if($data['machine'] !== $_POST['machine']){
                        $query = $pdo->prepare('UPDATE report SET machine = ? WHERE id = ?');
                        $query->bindValue(1,$_POST['machine']);
                        $query->bindValue(2,$id);
                        $query->execute();
                        echo "<span style='color:red'>計算機名を " . $_POST['machine'] . " に変更しました。</span><br>";
                    }

                    if($data['directory'] !== $_POST['directory']){
                        $query = $pdo->prepare('UPDATE report SET directory = ? WHERE id = ?');
                        $query->bindValue(1,$_POST['directory']);
                        $query->bindValue(2,$id);
                        $query->execute();
                        echo "<span style='color:red'>ファイル場所を " . $_POST['directory'] . " に変更しました。</span><br>";
                    }

                    if($data['calculation'] !== $_POST['calculation']){
                        $query = $pdo->prepare('UPDATE report SET calculation = ? WHERE id = ?');
                        $query->bindValue(1,$_POST['calculation']);
                        $query->bindValue(2,$id);
                        $query->execute();
                        echo "<span style='color:red'>計算の種類を " . $_POST['calculation'] . " に変更しました。</span><br>";
                    }
                    
                    if($data['content'] !== $_POST['content']){
                        $query = $pdo->prepare('UPDATE report SET content = ? WHERE id = ?');
                        $query->bindValue(1,$_POST['content']);
                        $query->bindValue(2,$id);
                        $query->execute();
                        echo "<span style='color:red'>計算内容を " . $_POST['content'] . " に変更しました。</span><br>";
                    }

Delete: ノートを削除する機能

最後に、delete.php に削除機能を実装しましょう。

今度は、html の <select> タグを使って、どのデータを削除するかをプルダウンメニューで選ばせます。

そして、以下の SQL 文で削除させます。

$query = $pdo->prepare('DELETE FROM report WHERE id = ?');
                    $query->bindValue(1,$_POST['delete']);
                    $query->execute();

第三回目のまとめ

今回の記事では、MySQL の基本的な使い方を簡単に説明し、記述、閲覧、編集、削除といういわゆる CRUD と呼ばれる実験ノートに必要な機能の実装を行いました。

次回の記事では、電子実験ノートから job を投入し、それと同時にノートも書き込むという機能を実装します。

管理人: