ページ選択　1〜5／6〜10／11〜15

ページ選択　1〜5／6〜10／11〜15

オリエンテーション
　授業をはじめるにあたり、計画、評価方法について説明する。
　★次回までの宿題★500MB程度以上の空きがありできれば高速なUSBメモリを準備(あれば買う必要はない。忘れた場合は演習環境の設定を自分で実施することになる)。

　説明終了後、こちらより、受講確認の練習を兼ねて、授業を受けるにあたっての意気込みを登録せよ。(授業翌週の火曜17:00まで)。


演習環境の構築
　今後プログラミング演習を行っていくための環境設定を行う。 本日の課題は以下。これを行わないと今後の演習、最終課題ができないため、必ず完了しておくこと。


大学PC(自宅PC)にUSBメモリを挿し、USBメモリのルートフォルダ(USBメモリドライブ直下)を確認。ここに演習に必要な「xampp」フォルダをコピーする。正しく設定されたイメージは以下(USBメモリドライブ直下にxamppフォルダがあればOK)。例はFドライブやDドライブを想定しているが、EでもGでも自動で割り当てられたドライブで良い。 　　〇正しい例： 　　　F:\xampp 　　　D:\xampp 　　×ダメな例(ドライブ直下でない)： 　　　F:\授業用\xampp 　　　D:\program\xampp 完成イメージを頭に入れた上で、大学PCの場合は、大学PCのデスクトップにある[名城公園キャンパスフォルダ]-[management]-[hayashi]-[thu3]-[material]からフォルダ[xampp](ザンプと読む)を、キーボードの[Ctrl]+[c]でコピー。上の例のようなUSBメモリのルートフォルダ(USBメモリドライブ直下)に[Ctrl]+[v]で貼り付け。コピー処理が始まったらそのまま放置(止まっているように見えても放置する)。USBメモリの速度によるが完了まで20〜70分かかる(過去実績)。 ★自宅など学外で実施する場合は本日欄の下の「(補足)自宅PCを用いて実施する場合」を参照。
ここまで完了したら処理が行われている間に、PHP開発環境、XAMPPの導入、XAMPPの使い方、作業フォルダ、テキストエディタについて確認する。
コピーが終わったら、エクスプローラなどでUSBメモリにアクセスし「D:\xampp」や「E:\xampp」フォルダがあれば設定完了。「D:\授業用\xampp」や「E:\report\xampp」のように、何らかのフォルダの中にxamppフォルダを入れてしまうと正常動作しない。「D:\xampp」や「E:\xampp」とドライブ直下にくるようフォルダごと移動すること。
以下にある【サーバー(XAMPP)起動】【サーバー(XAMPP)停止】を実施する。特に停止方法は、きちんと行わないとUSBメモリの破損のリスクもあるためしっかりと確認する。


【サーバー(XAMPP)起動】


USBメモリの「D:\xampp」や「E:\xampp」フォルダ内を見て、xampp-control.exeというファイルをダブルクリック(この後、USBメモリは抜かないこと。必要な場合は後述の正しい方法で行う)。
初めて起動する場合、言語設定を聞かれるので、英語を選ぶ。 XAMPP Control Panel(ザンプコントロールパネル)という画面が立ち上がったら、「Apache」(アパッチと読む)の行の「Start」ボタンをクリックして仮想サーバーを起動。緑色が点灯すればOK。この作業は、プログラミング作業の前に毎回行うので覚えておくこと。
サーバーの動作を確認するためにブラウザを起動。URL欄に「http://localhost/」(できない場合は「http://127.0.0.1/」)と入力し「XAMPP」のロゴが表示されたらOK。


★XAMPPがうまく起動しない場合


USBメモリのドライブ直下にインストールされているか確認。「D:\xampp」のようにドライブ直下ならOK。「D:\プログラミング2\xampp」のように、作成したフォルダの中にxamppフォルダを入れてしまうと正常動作しない。
Skypeが動いていないかタスクバーなどで確認。SkypeとPortで競合することがあるため、動いていたら停止。
何かのアプリケーションが、XAMPPが使うPortを占有してしまっている可能性があるため、一度PCを再起動する。
教室で使ってないPCがあれば、PCを替えてやってみる。それでも改善されなければ、USBメモリ側のファイルに問題がありうるため、Xamppのコピーをやり直す。
USBメモリに不具合がある場合もある(過去8年間で1例)。USBメモリを交換してやってみる。また前回利用時にXAMPPを停止せずにUSBメモリを抜いて壊れた例もある(過去6年間で1例)。
何をやってもうまくいかない場合は、自宅PCのドライブ直下(CドライブやDドライブなど)にコピーして実施するか、大学PCのネットワークドライブ直下に設定して実施する。


【サーバー(XAMPP)停止】


停止を正しく行わないと、設定のやり直しや、USBメモリ内のデータ消失、USBメモリの破損のリスクが高まるので、慎重かつ丁寧に行う。
XAMPP Control Panelの「Apache」の行の「Stop」ボタンをクリックしてサーバーを停止し、同じ画面右下の「QUIT」ボタンをクリックしてXAMPPを終了させる。
ブラウザで、仮想サーバーのURL「http://localhost/」ないし「http://127.0.0.1/」にアクセスし、「XAMPP」のロゴが表示されないことを確認(すでにサーバー停止されたため)。
Windows 10なら、エクスプローラーで「PC」をクリックして、表示されたUSBメモリのドライブを右クリック。メニューから「取り出し」を選択。USBメモリへのアクセスが停止したらUSBメモリをPCから取り外す。 あるいはWindowsのタスクバーから「ハードウェアの安全な取り外し」をクリックし、USBメモリの「取り出し」を選択。USBメモリへのアクセスが停止したらUSBメモリをPCから取り外す。 「取り出し」がうまく行えない場合、Xamppが停止できてないことがある。WindowsのタスクバーからXamppのオレンジ色のアイコンがないか確かめ、あれば右クリックし、表示メニューから「Quit」を選ぶ。アイコンが消えたら、もう一度、タスクバーやエクスプローラーから「取り外す」を実行する。
全て終了したらこちらより、(1)内容の理解度と、(2)課題の難しさ、(3)反省や感想などを含め完了報告をせよ。(授業翌週の火曜17:00まで)。


(補足)自宅PCを用いて実施する場合
1)設定ファイル3つ、ファイル1、ファイル2、ファイル3を右クリックしてPCの同じ場所に保存(名前は変えないこと)。3つのファイルはそれぞれ約40MB。サイズが大幅に違う場合はやり直す。
2)settings1.exeをダブルクリックして実行。3つのファイルが結合され「settings.exe」ができる。サイズは約120MB。サイズが大幅に違う場合はファイルを削除して上記1からやり直す。
3)USBメモリをPCに接続。結合された「settings.exe」をダブルクリックして実行。出力先にUSBメモリのドライブを指定(正しい例：「D:¥」や「E:¥」などのドライブが指定されていればOK。ダメな例：「D:¥プログラミング」や「E:¥授業用」など作成したフォルダが指定されていたらNG)。
4)パスワード入力を求められたら指示されたコードを入力。ファイルの解凍が始まる(途中固まったように見えても放置する。PCやUSBメモリの速度により終了まで20〜70分程度かかる。USBメモリのアクセスランプがあれば書き込み中かわかる)。
5)成功すると指定したUSBメモリに「xampp」というフォルダが作られる。上記の授業の資料「サーバー(XAMPP)起動」のところから作業を行う。
6)うまくいかない場合は、上記の「うまくいかない場合」を試す。それでもダメならファイルを削除して上記1からやり直す。
7)どうしてもできない場合は、USBメモリを変更する、大学のPC室のPCで上記の授業でやるやり方で実施する。

(補足)自宅Macを用いて実施する場合
1)この授業は大学PCを想定しているため、Macでの作業は想定しておらず、質問を受けても答えられないので、実施する場合は自己責任で行うこと。
2)Mac版のXamppについては、PHPプログラミング 環境設定を確認し、Apache FriendsのページからMac用最新版をダウンロードして自宅Macに設定する。USBメモリは、大学PCと自宅WinPCで作業を行えるようにするものであるため、自宅Macだけで作業する場合はUSBメモリに設定する必要はない。USBメモリに設定する必要がある場合は、上記Apache Friendsのサイトで、Mac用のポータブル(portable)版を探して導入する。

HTMLの復習とサーバーでの起動
HTMLの復習を行い、サーバーでの起動を試みる。



前回の説明を思い出し、USBメモリに設定したXAMPPを起動せよ。今後の授業では、毎回、XAMPPを使うため、起動方法については記憶しておくこと。
ブラウザで「http://localhost/」にアクセスし、XAMPP画面が表示されるか確認せよ。表示されない場合は、XAMPPの起動に失敗している。
USBメモリの「xampp」フォルダ→「htdocs」フォルダ→「phpkiso」フォルダを確認せよ。このフォルダは、今後も演習で使用するので覚えておくこと。
HTMLの復習資料を見ながら、HTMLとは何か、ひな形HTMLファイルとは何か、理解せよ。(ひな形ファイルは作る必要はない)
「phpkiso」フォルダにある「hina.html」を選択し[Ctrl]+[c]でコピーし、そのまま[Ctrl]+[v]で貼り付けよ。「hina - コピー.html」といったファイルができるので、右クリックしたメニューから名前を変更し「yokoso.html」とせよ。
「phpkiso」フォルダに、エディタ起動ファイルがあるのでダブルクリックし、エディタ(Terapad)を起動せよ。その上で「yokoso.html」をエディタの上にドラッグ＆ドロップして展開せよ。
エディタに開かれた「yokoso.html」を編集し、<title>〜</title>タグの間に「ここがタイトル」、<body>タグの下に「ここが本文」と入力せよ。その上で[Ctrl]+[s]で上書き保存せよ(上書き保存は他の方法でもよいがショートカットを覚えておくと便利)。
ブラウザでURLを「http://localhost/phpkiso/yokoso.html」と設定し、Localhost経由で「yokoso.html」を表示させよ。ブラウザに今入力した「ここが本文」、タイトルに「ここがタイトル」と表示されたことを確確かめよ。またURLの「phpkiso」が「phpkiso」フォルダと対応していることを確認せよ。URLの意味や「phpkiso」フォルダとの対応がわからない場合はXamppで表示を確認すること。
文字と画像の表示に従い「yokoso.html」をエディタで編集し、タイトル、改行、フォント指定、画像表示のタグについて実装せよ。完成したらブラウザを更新(上記URLと同様Localhost経由で表示)し、フォントや画像が指定した通り表示されるか確認せよ。
課題が完了したら、こちらより、(1)内容の理解度と、(2)課題の難しさ、(3)反省や感想などを含め完了報告をせよ。(授業翌週の火曜17:00まで)。
報告後、XAMPPコントロールパネルでサーバーをSTOP。右下のQUITで終了(USBメモリが抜けない原因)。その後、Windowsのエクスプローラーで「PC」をクリックして、表示されたUSBメモリのドライブを右クリック。メニューから「取り出し」を選択。あるいはWindowsのタスクバーから「ハードウェアの安全な取り外し」をクリックし、USBメモリの「取り出し」を選択。USBメモリへのアクセスが停止したらUSBメモリをPCから取り外す。

サーバー操作の確認とHTMLの復習
サーバー操作を確認しつつ、HTMLの復習の続きを行う。



前回までの説明を思い出し、USBメモリに設定したXAMPPを起動せよ。
ブラウザで「http://localhost/」にアクセスし、XAMPP画面が表示されるか確認せよ。表示されない場合は、XAMPPの起動に失敗しているので作業をやり直す。
USBメモリの「xampp」フォルダ→「htdocs」フォルダ→「phpkiso」フォルダを確認せよ。このフォルダは、今後も演習で使用するので覚えておくこと。
前回作成した「yokoso.html」をLocalhost経由で表示せよ。「phpkiso」フォルダに保存されていることから「http://localhost/phpkiso/yokoso.html」にアクセスすることを再確認すること。またフォントや画像が表示されることを確認せよ。
入力フォームのタグに従い「yokoso.html」をエディタで編集し、テキストエリア、パスワードエリア、ラジオボタン、送信ボタン、リセットボタンなどのタグについて実装せよ。完成したらブラウザを更新(上記URLと同様Localhost経由で表示)し、入力欄やボタンが指定した通り表示されるか確認せよ。
表とリンクの実装に従い、ひな形HTMLファイル「hina.html」を選択して[Ctrl]+[c]でコピーし、そのまま[Ctrl]+[v]で貼り付け、名前を「table.html」に変更せよ。エディタにドラッグ＆ドロップして「table.html」を開き、表とリンクの実装を参照して、表とリンクの設定方法を実装せよ(「リンクの設定」のウェルカムページへのリンクの箇所まで)。完成したらブラウザを更新(上記URLと同様Localhost経由で表示)し、表やリンクが思い通り実装されるか確認せよ。
課題が完了したら、こちらより、(1)内容の理解度と、(2)課題の難しさ、(3)反省や感想などを含め完了報告をせよ。(授業翌週の火曜17:00まで)。
報告後、XAMPPコントロールパネルでサーバーをSTOP。右下のQUITで終了(USBメモリが抜けない原因)。その後、Windowsのエクスプローラーで「PC」をクリックして、表示されたUSBメモリのドライブを右クリック。メニューから「取り出し」を選択。あるいはWindowsのタスクバーから「ハードウェアの安全な取り外し」をクリックし、USBメモリの「取り出し」を選択。USBメモリへのアクセスが停止したらUSBメモリをPCから取り外す。

データの出力処理
　PHPの概要について学び、演習に取り組む。 PHPプログラミングでは、しばしばエラーが出るが、まずは個人で解決の努力をする→参考(このページ最下部)。それでだめならチームメンバーに質問して解決を図る。それでもだめなら教員に連絡する、という流れで進めること。プログラミングは、教えられた通りにすれば誰でもできるが、スキルを高めるためには自己解決の努力をすることが重要。最終的には、各自が人の手を借りずに簡単なウェブアプリを制作できるようになることを目指す。


前回同様、サーバーを起動し、エディタも起動せよ。
PHP資料を読んで、掲載されたサンプルを参考に、「こんにちは」を出力するPHPスクリプトkihon01.phpを作成せよ。作成したらkihon01.phpを、localhostのサーバー経由でアクセスして「こんにちは」と正常に表示されることを確認せよ。
同じ資料を読み進めてPHPの書き方を理解しつつ、掲載されたサンプルを参考に、printをechoに変更して、「こんにちは」を太字で表すよう修正せよ。
資料に掲載されたサンプルを参考に、kihon01.phpに、文字を青色にするフォントタグを出力するecho文を設定し、「こんにちは」が青色に表示されるようにせよ。
さらに資料を読み進め、PHPプログラムがHTMLに埋め込めることを理解し、そのうえで、上記PHPプログラムが、フォントサイズを5に設定するタグに埋め込まれる形(当該タグがPHPプログラムの外側にある形)で、フォントタグを設定せよ。そして確かにフォントサイズが拡大されることを確認せよ。
PHP資料の「数値や数式と文字の扱い」を読んで内容を理解しつつ、掲載されたサンプルをkihon01.phpに追加し、echo文で数式を「文字列」として設定した場合と、同じ数式を「数値」として設定した場合で、処理結果が異なることを確かめよ。
PHP資料の「ヒアドキュメントは長文も」を読んでヒアドキュメントについて理解し、掲載されたサンプルをkihon01.phpに追加して、ヒアドキュメントの書き方や意義を確認せよ。
資料にある練習問題は行う必要はありません。
課題が完了したら、こちらより、(1)内容の理解度と、(2)課題の難しさ、(3)反省や感想などを含め完了報告をせよ。(授業翌週の火曜17:00まで)。
報告後、XAMPPコントロールパネルでサーバーをSTOP。右下のQUITで終了(USBメモリが抜けない原因)。その後、Windowsのエクスプローラーで「PC」をクリックして、表示されたUSBメモリのドライブを右クリック。メニューから「取り出し」を選択。あるいはWindowsのタスクバーから「ハードウェアの安全な取り外し」をクリックし、USBメモリの「取り出し」を選択。USBメモリへのアクセスが停止したらUSBメモリをPCから取り外す。

---

●PHPでエラーになったら最低限のチェック

• PHPのプログラム部分がブラウザに表示されてしまう！
  
• 何も表示されない！
  
• プログラムを編集しているのに反映されない！
  
  1. サーバーが正常に動作しているか？(XAMPPをチェック)
     
  2. サーバー(localhost)経由でアクセスしているか？(URLをチェック)
  3. 違うファイルを編集していないか？(エディタで「名前を付けて保存」して保存先を確認。違っている場合は適切なフォルダに保存し直す)
     
  4. PHPプログラムを含むファイルの名前が〜.phpで終わっているか？
     
  5. PHPプログラムが「<?php」と「?>」の間に挟まれているか？飛び出していないか？
     
• Parse errorやFatal error・・・line 18のようなエラーが出る！
  
  1. 18行目かそれより前の行の命令にスペルミスはないか？
     
  2. 18行目かそれより前の行にセミコロン「;」の忘れはないか？
     
  3. 18行目かそれより前の行にシングルコーテーション「'」やダブルコーテーション「"」やカッコ「(」「{」の対応がとれているか？
     
  4. 18行目かそれより前の空白(表示する文字列以外)に全角スペースが含まれていないか？
     
  5. 18行目かそれより前の行のプログラムの命令やセミコロン「;」、シングルコーテーション「'」、ダブルコーテーション「"」、カッコ「(」「{」の文字が全角になっていないか？
     

ページ選択　1〜5／6〜10／11〜15