2.XAMPP(1/2)

Ｗｅｂとデータベース： XAMPPを使用してＣＳ（クライアント・サーバ）型のデータベースについて概説する。

キーワード： DBMS　RDBMS　MySQL　Webサーバ　サービス　PHP　テーブル　レコード　主キー　候補キー　複合キー

XAMPPとMySQLについて

ＸＡＭＰＰはＷｅｂサービス開発環境

・Ｗｅｂサーバ、ＦＴＰサーバ、データベースサーバ、メールサーバを利用できる。

・ＤＢＭＳとしてMySQL(MariaDB) を利用

・サーバサイドスクリプトとしてＰＨＰを利用

・ネットで入手可能なフリーウェア

・ＸＡＭＰＰ(Wikipedia) 歴史的経緯を確認

・ＸＡＭＰＰ配布サイト Windows / Linux / OS X 用のXAMPP環境の入手先

※ 実習室には【XAMPP Version 8.2.12】がインストールされている。 自宅やノートPCなど自分の開発環境を準備する場合は、実習室と同バージョンの使用を推奨。

この講義ではＸＡＭＰＰ が提供するいくつかのサービスのうち、

Ｗｅｂサーバ Apache

データベースサーバ MySQL(現在の名称はMariaDB)

を利用する。

情報実習室ＰＣにインストールされているＸＡＭＰＰを利用して以下の演習を行う。

MySQLを使用するシステムの代表　WordPress　をPCにインストールして動作確認をする。

WordPress：　CMS（コンテンツマネージメントシステム）　BlogなどのWebコンテンツを管理運用できる。

動画の内容：　Wordpressの初期設定まで（２０１８年版）
※2021年以降必要となったmysqlのパスワード設定は含まず。

パスワード設定については後半で示す。

XAMPPを起動

コンピュータの スタートメニューから　xampp -> xampp-control を開く

前回の復習

【忘れずに】パソコンを消す前にMySQLをStopする

【忘れずに】パソコンを消す前にXAMPP-ControlをQuitする

【理由】システムが破損して面倒なことになる（高確率）

XAMPPのコントロールパネルが表示される。

コントロールパネルから上図のようにWebサーバ と MySql サーバを起動(表示がRunningに変化)する。

Ｗｅｂサーバ Apache を起動 (startをクリック)

データベースサーバ MySql を起動 (startをクリック)

でサービスを起動する。

※ 【サービス】とは OSの技術用語。ブラウザやワープロなど使うときに起動するアプリケーションとは異なりOSのバックグラウンドで動作し続けているアプリケーションのこと。バックグラウンドプロセスともいう。

確認： タスクバーを右クリック　→　タスクマネージャを起動　バックグラウンドプロセスにある Apache と MySQL の動作業況を表示できる

xampp-control のパネルは閉じてもOK。タスクトレイにアイコンが常駐する。
※再び利用するには以下の様にタスクトレイからパネルを呼び出す。

【重要】

今回の演習が終了したらApache Web Server と MySQL DBMS は xampp-controlから stop ボタンでサービスを停止すること

xampp-control パネルを Quitボタンで閉じる。　【注意】×ボタンで閉じない

その後、PCをシャットダウンする。サービスを停止せずにPCが停止した場合、データベースに障害が発生する場合がある

Blogシステムをインストールする

以下ではDBMSの利用例として Blog システムを扱う。

人気のBlogシステム Wordpress を XAMPP環境にインストールしてローカルサーバで運用をテストする。

外部のレンタルサーバやブログサービスは利用しない。

参考記事：　https://bazubu.com/xampp-wordpress-23795.html　今回のWordPressセットアップはこのページを参考にした。

MySQLにパスワードを設定　（１/６）

WordPressは記事や設定等の管理用データベースとしてMySQLを使用している。
パスワードが未設定のMySQLにはWordPressをセットアップできない。
XAMPPのMySQLにはパスワードが未設定なので以下の手順でパスワードを設定する。

手順：

xampp-control panel の 　Shell　ボタンを押す

コマンドプロンプトが表示される

以下の画像に倣ってコマンドを入力してEnterキーで実行していく。
ここの作業で

管理者アカウント root

パスワード root

を設定する

入力内容

確認

mysqlへのアクセスにパスワードが設定されたことを確認する

phpMyAdminにパスワードを設定　（２/６）

MySQLの管理ツールphpMyAdminでブラウザからのパスワード入力を受け付けるように設定ファイルを修正する。

テキストエディタ Visual Studio Code を起動する。
不要なタブは閉じておく。

Fileメニューからファイルを開く（Open File）

ファイルのパス（場所） T:\xampp\phpMyAdmin\

ファイル名　 config.inc.php

19行目と20行目を以下の画像のように修正する
保存（Save）してVS Codeを閉じる

設定ファイルの修正を反映する作業

MySQLを再起動する（StopしてStart）

phpMyAdminでWordPress用データベースを作成　（３/６）

xampp-control パネルの MySQL の Admin ボタンから 管理ツール phpMyAdmin を開く

phpMyAdminにブラウザでアクセスするとログイン画面が表示される

アカウント root
パスワード root

でphpMyAdminを利用開始する

以下の様に入力・設定し、作成ボタンを押す。

・データベース名 wp学籍番号 ※漢字入力OFF

・照合順序 utf8mb4_general_ci ※デフォルトのまま
メモ：文字コード UTF8 マルチバイト文字列 mb4 絵文字対応 ケースインセンシティブ（アルファベット大文字小文字区別無し）

 作成 ボタンを押す

BlogシステムWordPressの入手元　https://ja.wordpress.org/download/

以下の作業は　レポートフォルダからダウンロード済みファイルをコピーしておこなう

WordPressをXAMPPのWeb領域に配置（４/６）

WordPress配置編：

BlogシステムWordPressをMySQLデータベースに接続しセットアップする。

手順：

・レポートフォルダ → データベース 

  wordpress-6.5.2-ja.zip

 をデスクトップなどにコピーする

・コピーしたファイル wordpress-6.5.2-ja.zip を展開する

右クリック →　すべて展開

参照　ボタンから　展開先フォルダをhtdocsに設定しなおす。

※ 注意 すべて展開... から展開先を指定せずに展開するとフォルダ階層が１つ深くなる。ファイルをコピーしなおして階層を１つ削除すること。

htdocs フォルダはApatche wep serverのドキュメントルート（Webコンテンツのファイルを置く一番上の階層）です。

Webサービスに必要なファイルは基本的にこのフォルダに配置します。

場所：

T:ドライブ → xampp → フォルダ htdocs (えいちてぃーどっくす)

ZIPファイルの内容：　WordPressのシステムファイル（ブログ運用PHPプログラム・ HTML・CSS・データベース等初期設定プログラム・アイコン画像などなど）がwordpressフォルダに入っている。

 wordpress-6.5.2-ja.zip は削除してもよい。インストールに失敗したりリセットが必要なら展開しなおして上書きする

htdocsに展開されたwordpressフォルダの名前を変更する

例） wordpress自分の学籍番号

WordPressの初期設定（５/６）

WordPress初期設定編：

・ブラウザから アドレス

localhost/wordpress3122333/

にアクセスする。学籍番号のところは自分のものに修正。

・ブラウザのWordPress設定画面の さぁはじめましょう をクリック

・以下の様に入力 ※データベース名を自分の学籍番号に合わせて修正する

データベース名　wp3120333 これはphpMyAdminで作成したデータベースの名前です
URLのwordpress3120333 はXAMPPのhtdocsフォルダに作成したWordPressのフォルダ名です。

※ユーザ名やパスワード欄の記述を削除して root と入力して登録する。

送信  ボタンを押してWordPressのインストールを実行する。

WordPressでBlogを設定（６/６）

・ サイトのタイトル は各自で任意のタイトルを入力
例） 合格データベース

・ ユーザ名 同上

・ パスワード 同上 覚えてください。変更してもOK。（脆弱なパスワードをチェックして 許可 すれば、単純なパスワードを利用可能）
このパスワードはBlogの管理者用のパスワード。MySQLのパスワードではない。

・ メールアドレス 学籍番号のメールアドレス。ダミー、フェイクのメアドでもOK。
例） 3123888@nagoya-bunri.ac.jp

・WordPressをインストール をクリック

※ ブログ用のパスワードを忘れてしまった場合は http://www.seotemplate.biz/blog/wordpress-tips/11026/

ブログに記事を書く

WordPressにログイン

http://localhost/wordpress3123222/wp-login.php

ダミー記事を削除

ダッシュボードから記事を投稿

投稿した記事をブログで表示

記事にコメントを書く

WordPressのテーブル設計を確認する

業務利用に耐える本格的なデータベースの設計例として参考になる

■チェックポイント１

WordPress のインストールが完了したら　 phpMyAdmin の WordPress用データベースに作成されたテーブルとそのレコードを確認する。

※ レコード とは：データベース上の記録のこと。テーブルの１行のデータ。Blogシステムでは投稿記事はデータベースにレコードとして記録される。

※PHPMyAdminの更新マークをクリックする。

例)
wp_users
wp_posts

例）

wp_posts テーブルの内容：
記事に関するデータを記録するテーブル
テーブルにはいくつかのフィールド（アトリビュート、属性）が設定されている。

IDフィールドは　主キー　と呼ばれるレコード管理用の番号が記録されるフィールド。
このようにRDBMSの設計では他のレコードと重複しない固有の値を記録するフィールドが必須となる。
補足１：主キーは番号とは限らない。他のレコードと重複しないことが保証されていれば主キーとして利用できる（候補キー）
補足２：複数のフィールドの組み合わせが重複しないことが保証されれば、その組み合わせを主キーとすることもある（複合キー）

IDフィールドの値はWordPressシステムが自動的に割り当てる番号が記録される。Blogの投稿者・管理者が関与することはない。Blogに表示されることもない（たぶん。URLの一部に利用されるかも）
post_authorフィールド　記事の投稿者のIDを記録する。投稿者名やその権限などは別のテーブルwp_usersで管理する。
post_titleフィールド　記事の本文とは別にTitleを記録する（見出し用）
post_content　投稿記事の本文　HTMLのタグが利用されている

　注目点：　コメントは投稿記事とは別のテーブル wp_comments に記録されている。

■チェックポイント２

以下の手順でBlogのトップページを開く

ブラウザでタブを新しく開く

ブラウザで次のURL↓にアクセス する

http://localhost/wordpress3123888/

↑このURLはhtdocsにWordPressをインストールしたフォルダ名と対応している

チェックポイント１で確認したテーブルのレコードがBlogの記事として表示さている。

例）

■チェックポイント３

WordPressの機能を試す。

新規記事の投稿、コメントの投稿、不要記事の削除、カテゴリの追加と設定、プロフィールの変更などを試す。

ダッシュボードのメニューから新規ユーザ追加やテーマの画像の変更なども可能。時間があればどうぞ。

※記事の投稿は ダッシュボード のブログに記事を投稿する のリンクなどから

※記事の削除は、記事の編集リンクから、ゴミ箱へ移動をクリックする

■不具合が発生する操作について

WordPressのダッシュボードの機能を使わずにデータベースのレコードを直接編集すると記事を改竄できるがお勧めしない。

テーブルのレコードをデータベースを操作して直接削除するとブログが壊れるかもしれません。

ゴミ箱へ移動などのWordPressの挙動を無視して強制削除するので。

■チェックポイント５

・ブログ記事のソースコードを表示 →ブラウザで記事を 右クリック → ページのソースを表示する
質問： 表示されたソースコードは どのようなプログラム言語（複数種類）ですか？

・WordPressのソースコードを確認する　VS Code　を利用する。

　File　→　Open Folder　から　wordpressフォルダを開く。

例）

T:\xampp\htdocs\wordpress3121333

拡張子がPHP のファイルをクリックして内容を確認する。

例） index.php  はインデックスファイル（目次）で、ブログのトップページのURLにアクセスした時に実行されるPHPプログラムです。

Blogをブラウザで開いた時のURLについて：

http://localhost/wp3122333/
は
http://localhost/wp3122333/index.php

と同じページが表示される。

サーバのソースコードを表示してコード中にＳＱＬコマンドが存在することを確認する。

例） wp3122333\wp-includes\SimplePie\Cache\MySQL.php

の ???行目 や ???行目 や ???行目など（2021.4 バージョン変更により行は未確認）

検索機能で　「INSERT INTO」や「SELECT」などのSQLコマンドを見つける。　

用語確認

ドキュメントルート
T:\xampp\php\htdocs\ のフォルダのこと。Web用のコンテンツの配置場所

親言語方式 と 独立言語方式
WordPressのPHPのコードのようにSQLのコマンドをプログラムに埋め込む方式を親言語方式という
親言語となるプログラム言語はPHPに限らない。多くの実用言語が対応している。
独立言語方式ではSQLなどのコマンドで直接データベースを操作する。

データは、着席したPCのTドライブに保存されています。

今後も同じ席を利用してください。

課題提出（１/２）

ブログをスクショする

WebClass の 第2回課題の問１にスクショファイルをアップロード

簡易な例）　WordPressのブログ画面で設定項目や入力内容が分かる様にスクショ

例１）以下の画面では 記事が wp_posts テーブルに記録されていて、コメントは wp_comments テーブルに記録されていることが分かる。

例２）phpMyAdminのタブをコピーして開いてテーブルを2つ同時に撮影する

スクリーンショット操作

範囲選択スクショ

Winキー ＋ Shit ＋ S　を順番に同時に押してマウスでキャプチャ範囲を指定

全画面スクショ

  Winキー + f9 + prt sc　を順番に同時に押す

スクショファイルは　ユーザホーム　→　ピクチャ　→　スクリーンショット　に保存される

編集が必要な場合は右クリックして編集プログラムを選ぶ

※ダブルクリックすると　フォト　アプリが開く。書き込みができなくて不便。

スクショファイルを開かなくてもワードやペイントブラシに張り付けて利用できる

不要なスクショファイルが溜まっていくので適当に削除するとよい

サーバを停止する

xampp-control コントロールパネル

Apache STOP

MySQL STOP

Quitボタン で終了

ｘボタンで終了してはいけない

スクショする画面についてのQ&A

• • Q: Blogの投稿記事がMySQLのテーブルに見当たらない

A: テーブルの1画面のレコード表示件数が、２５件に設定されている。記事を複数投稿している場合、最新投稿を次のページに移動して表示する。もしくは、テーブルの post_date のフィールド名をクリックして新しい記事を先に表示するように表示順を変更してからスクショを撮る

• • Q: コメントのテーブルを表示できない

A: PHPMyAdminには、複数のテーブルを一度に開く機能はない。そこで、テーブル名を右クリック（ブラウザのメニュー）し、新規ウィンドウでコメントテーブルを表示する

時間が余ったら宿題の課題や次回の予習に進んでください

課題提出（２/２）

Webclassの第2回課題の　問２　と　問３　に回答する。採点は次回授業日以降の予定。

参考資料：　サブテキスト　SQL研修資料　SQL Training2021 　スライド１～２６。特にスライド２１　２５　２６

回答書式：

テーブル名に続けてフィールド名をカンマか「、」で区切って（）で括る

主キーのフィールド名の先頭に ○ （WIndows：まる　と入力して変換）を付ける

外部キーには先頭に※（WIndows：こめ　と入力して変換）を付ける

主キーかつ外部キーのフィールド名には　○※フィールド名　と両方の記号を付ける

例）

天候記録テーブル（〇ID、日時、※地区ID、※天候ID、気温）

天候テーブル（〇天候ID、名称、記号）

地区テーブル（〇地区ID、地区名）

以下の問2と問3の回答には外部―（※を付けて示す）は無くてもいいです。テーブルが１つだけなので外部キーは無いものとします。

主キーの判別が間違えやすい。

例）

　学生の名簿では学籍番号を主キーにできる。同じ学生は2回名簿には載らないので問題が発生しない。

　出欠リストでは学籍番号は主キーにできない。同じ学生が別の授業や別の回に出席したときに記録できない。学籍番号は重複するので。

出席を記録する際には　1行　に一括して関連情報を記録する。記録した内容は主キーで検索できるようになっていなければならない（重複してはいけない）

問２

　問３

問3の回答例をアレンジした補足

予習と次回の準備　サブテキスト Paizaラーニング学校フリーパス

こちらの記事を見てPaizaのアカウントを用意しておく