#PHPプログラミング

PHPプログラミングこと初め

　PHPなので、拡張子は、.htmlではなく、.phpになります。
　「ホームページ作りを始めましょう」でダウンロードしたindex.htmlをindex.phpにします。拡張子を書き換えるだけですね。

　そのままアップロードするわけにはいきません。
　まず、ControllersのWelcome.phpを見てみましょう。

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Welcome extends CI_Controller {
    /**
     * Index Page for this controller.
     *
     * Maps to the following URL
     * http://example.com/index.php/welcome
     * - or -
     * http://example.com/index.php/welcome/index
     * - or -
     * Since this controller is set as the default controller in
     * config/routes.php, it's displayed at http://example.com/
     *
     * So any other public methods not prefixed with an underscore will
     * map to /index.php/welcome/<method_name>
     * @see https://codeigniter.com/user_guide/general/urls.html
     */
    public function index()
    {
        $this->load->view('welcome_message');
    }
}

　PHPは、ファイルの拡張子が.phpでも、そのままでは機能しません。
　一番最初に、<?php　と書いてある必要があります。締めの ?> は特に必要とはしません。かつては必要でしたが。

　さて、コメント欄の言いたいことは、

http://example.com/index.php/welcome

か

http://example.com/index.php/welcome/index

で本来アクセスするところですよ、ってこと。
　実際には、

http://example.com/

で、当Welcome.phpのindexに届きます。
　今回の例では、

http://ima.daa.jp/clinic/

となります。ディレクトリが分かれているので、clinicが付きます。
clinicの中のWelcome.phpのindexに届くことになります。

　で、届いたindexは、pubic functionという公開関数にて動作します。
　同じファイル内で動作させるときは、private functionという非公開関数にします。プログラムは関数として動作します。

　次の

　$this->load->view('welcome_message');

が、HTMLに相当する画面出力ファイルの指定になります。
　デフォルトでは、welcome_message.phpを開くようになっています。「ホームページ作りを始めましょう」の「フレームワークの利用」に最後にある画面を表示しているのは、このwelcome_message.phpです。
　なので、これをindex.phpにします。

　まず、index.phpを、FTPツールで、applicationの中のviewsの下にアップロードしましょう。
　次に、welcome_messageをindexに書き換えます。
　ちなみに、囲みはシングルクォーテーションでもダブルクォーテーションでも問題ありません。使い分けが必要になる場合もありますが、それもそのうち触れます。

　そしてhttp://ima.daa.jp/clinic/をリロードすると、下図のような画面になります。

フルスクリーンショットの取り方
GoogleChromeの例で言えば、ブラウザ右上の「GoogleChromeの設定」メニューから「その他のツール」「デベロッパーツール」を開きます。
このツールは今後よく使いますので、慣れておきましょう。
画面をまずスマホサイズにします（ツール画面左上の親子アイコンで切り替える）。画面の両側を左右に広げてPC画面サイズにします。それから、画面の右上の縦…をクリックすると、Capture screenshotとCapture full size screenshotというメニューがあります。前者が見えている範囲のスクリーンショット、後者が画面全体をスクリーンショットします。
他のブラウザでもおおよそ同様に使えます。

　「まずは環境を用意しましょう」の「デザインフレームはテンプレートで」の【レスポンシブの例】の画面と違いますね。なぜでしょう？
　そうですね、画像が全部表示されていません。
　なぜでしょう？
　たとえば、画像が壊れている「ロゴ」という個所を探してみましょう。
　application/viewsのindex.phpの31行目に、こんな記述があります。

<img src="img/template-logo01.png" alt="ロゴ" class="w-100">

　この場合、ある位置と同じ位置にあるimgディレクトリのtemplate-logo01.pngという画像を使う指定になっています。
　ある位置とはどこでしょう。
　ある位置とは、clinic直下のindex.phpになります。すべては、ここが起点になります。
　imgディレクトリは、assetsディレクトリの下でした。
　clinic/index.phpとassetsディレクトリは同じ位置にいます。
　なので、この場合、以下の通りにします。

<img src="assets/img/template-logo01.png" alt="ロゴ" class="w-100">

　同様に、assetsの下にあるcssディレクトリ、Javascriptの入っているjsディレクトリについても、位置を合わせましょう。
　そして動作させてみます。
　出て欲しい画像が出るようになったと思います。
　いや、ちょっと待ってください。肝心のトップの大画像が出てませんね。
　なぜでしょう？
　画像を表示するには、HTMLに書く場合と、もう一つ、ある要素の背景として、CSSに書く場合があります。
　この場合も、探してみると、ありました。style.cssの10行目に。

.jumbotron {
    background-image: url('../img/top-image.jpg');

　jumbotronという要素の背景として、ある位置の一つ上に戻って（../）、そこにあるimgディレクトリのtop-image.jpgという画像を使っています。
　ちなにみ、CSSでは、jumbotronの前の . は、HTMLではタグのclassを意味しています。
　ついでに言うと、# はタグのidのことになります。

<div class="test-calss" id="test-id">～</div>

　さて、ここで言うある位置とはどこか。
　先ほどの起点のclinic/index.phpではありません。このCSSファイルを呼び出しているファイルが起点になります。この場合、style.cssを呼び出しているのは、viewsに入れたindex.phpです。index.phpの25行目にあります。
　つまり、index.phpの上のviews、その上のapplicationに戻ると、やっとassetsに行き当たります。ということで、こうなります。

background-image: url('../../assets/img/top-image.jpg');

　こういう書き方を相対パスと言います。絶対パスはhttp(s)から始まるパスです。絶対パスの方が確実ですが、相対パスでないとだめな場合もあります。

　これで、ちゃんとメインの画像が表示されるようになります。

デザインパターン、MVC

　定義では、プログラムというコードを管理するのにテンプレート化したものをMVC概念という言い方をします。
M：Model
V：View
C：Controller
　基本的にフレームワークはそういう体裁になっています。コードの管理というより機能の管理といった方がわかりやすそう。

　さて、views/index.phpは、index.htmlの拡張子を変えただけなので、徹頭徹尾HTMLのままということになります。
　これをMVC化するというのは、このviews/index.phpを分割します。
　なぜかというと、たいていの場合、頭と尻はページ内容が変わっても変わることはありません。つまり、最低、ヘッダー、ボディ、フッターの３つに分割できるものです。時としてサイドメニューもほとんどページごとに変わることがないので、分割できます。
　どこで分割するかという決めはありません。個々人でいいと思われるところで切り分けましょう。
　今回の例では、