2.XAMPP(1/2)

Ｗｅｂとデータベース： XAMPPを使用してＣＳシステム型のデータベースについて概説する。

キーワード： MySQL Webサーバ PHP SQL

・Webclass初回レポートの集計結果へのコメント

・Webclassコース ITパスポート の確認問題へのコメント

・集合 あなたは本当のベン図をまだ知らない http://www.procrasist.com/archive/2017/04/02

・トラブル対応

Chromeが起動できない受講生： レポートフォルダ → データベース → ResetStartUp.bat ダブルクリックして実行

※何らかの原因で、Chromeがログイン時に自動起動する設定になる。それをレジストリを更新して削除

ブラウザにIPアドレスを入力しても、XAMPPサーバへアクセスできない受講生： レポートフォルダ → データベース → SetProxyOverride.reg ダブルクリックして実行

※ブラウザのProxy利用設定をレジストリを修正して修復

■ XAMPPについて

・ＸＡＭＰＰ配布サイト（日本語版）

・ＸＡＭＰＰ(Wikipedia)

今回は、ＸＡＭＰＰで提供されるサービスのうち、 Ｗｅｂサーバ（Apache）、データベースサーバ（MySQL） を利用する。

■演習内容

MySQL入門

ＸＡＭＰＰによるＭｙＳＱＬの利用

ＸＡＭＰＰはＷｅｂサービス開発環境である。（ http://ja.wikipedia.org/wiki/XAMPP ）

Ｗｅｂサーバ、ＦＴＰサーバ、データベースサーバを利用できる。 ＤＢＭＳとして ＭｙＳＱＬ を利用している。 サーバサイドスクリプトとしてＰＨＰを利用している。

ネットで入手可能なフリーウェアである。（XAMPP日本語ページ https://www.apachefriends.org/jp/index.html ) ※XAMPP環境の言語対応は英語とドイツ語のみ

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

※【重要】 実習室のXAMPPのバージョンに注意。【XAMPP Version 5.6..23】 自宅やノートPCなど自分の開発環境を準備する場合は、実習室と同じバージョンのものにしておくと、コードをどちらの環境でも共通で利用できる。

XAMPPの起動

コンピュータの Ｄドライブのフォルダ xampp を開く。

フォルダ内の xampp-control.exe をダブルクリック。

XAMPPのコントロールパネルが表示されるので、動作状況を確認する。

上図のように、Webサーバ と MySql サーバが起動していない(Runningになっていない)場合、

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

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

で、サービスを起動させる。

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

質問： Blogger（ブログ主）になるにはどのような方法がありますか？

今回は↓の方法で。

ブラウザから利用するWebデータベースの例として、Blogシステム Wordpress を XAMPP環境にインストールする。

参照記事 XAMPPで仮想環境を構築してwordpressをインストールする方法

■本講義でのインストール手順：

データベース設定編：

・xampp control パネルの MySQL の Admin ツールを開く

・phpMyAdmin の画面のデータベースをクリックする

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

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

・照合順序 utf8_general_ci

WordPress配置編：

・BlogシステムのファイルをレポートフォルダからD:ドライブにコピーする。

WordPressのシステムファイル（ブログ運用PHPプログラム・HTML・CSS・データベース等初期設定プログラム・アイコン画像などなど）一式をフォルダごと

手順：

・レポートフォルダ → データベース → フォルダ「wordpress3115999」 を ↓のフォルダにコピーする。

・D:ドライブ → フォルダ「xampp」 → フォルダ「htdocs」にコピー（ファイル数が多いので時間かかる。コピー完了するまで待つこと）

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

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

・フォルダ名wordpress3115999 を変更する。 例） wp3115自分の学籍番号

WordPress初期設定編：

・ブラウザから アドレス localhost/wp3115999/wp-login.php にアクセスする。学籍番号のところは自分のものに修正。

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

・↓の様に入力 ※データベース名は要修正

※パスワード欄の記述を削除して 空欄 のまま登録する。

・送信 → 実行

WordPressの設定画面の入力内容

・ サイトのタイトル は各自で任意のタイトルを入力

・ ユーザ名 同上

・ パスワード 同上 （変更してもOK）

・ メールアドレス 学籍番号のメールアドレス 3115999@nagoya-bunri.ac.jp

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

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

■チェックポイント１

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

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

例) wp_users wp_usermeta wp_posts wp_comments

■チェックポイント２

ブラウザでタブを新しく開いて、

Blogのトップページを開く。ブラウザでアクセス → http://localhost/wp3115999/ フォルダ名とURLが一致する。

↑で確認したテーブルのレコードが見本の記事として表示されている。

例）

■チェックポイント３

WordPressを試す。

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

ダッシュボードの人アイコンから新規ユーザ追加や、テーマの画像の変更など時間があればどうぞ。

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

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

■チェックポイント４

WordPressの操作して、データベースのレコードの内容を見比べる。

例） wp_posts や wp_comments

■応用

WordPressのダッシュボードの機能を使わずに、データベースのレコードを直接編集して、記事を改竄してみよう。

方法： wp_posts テーブルのレコードを編集します。

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

ゴミ箱へ移動などのプログラム処理を無視して強制削除するので。

記事とコメントのリンクデータが不整合など（親記事が削除されたのにコメントが残るなど）

■チェックポイント５

・ブログの記事をブラウザで表示 → 右クリック → ページのソースを表示する

質問： 表示されたソースコードは どのようなプログラム言語（複数種類）ですか？

・テキストエディタ VS CODE を起動する（Windowsの検索 code で起動）

エクスプローラーアイコン → フォルダを開く で ドキュメントルートの下のWordpressフォルダを開く。

D:\xampp\htdocs\wp3115???

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

例） index.php はインデックスファイル（目次）で、ブログのトップページのURLにアクセスした時に

実行されるPHPプログラムです。

http://localhost/wp3115999/ は http://localhost/wp3115999/index.php と同じページが表示される。

サーバのＰＨＰプログラム(index.php)が、ＭｙＳＱＬのWordPressデータベースを操作して、記事の表示や編集が行われるようにレコードを操作している。

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

例）

wp3115999\wp-includes\SimplePie\Cache\MySQL.php

の １６６行目 や ４２５行目 や １９５行目など

時間が余ったら、次回の予習に進んでください。