プログラミング/情報処理II 授業計画

お知らせ>

・この計画は進捗に応じて変更される可能性があるため常に確認すること。
・PC等の設定により古いキャッシュデータが表示されることがあるため、ブラウザの更新ボタン等をクリックするか、キーボードの[F5]キーを押して表示内容を更新して確認する。
・授業の2回目までに500MB程度以上の空きがあるUSBメモリを準備(左記空き容量があれば買う必要は無い)。その後は毎回持参すること。忘れた場合は演習にならないため大幅な減点とし、その回のミッションは次回までの宿題とする。
・大学のパソコン(ネットワークフォルダ)に資料やファイルを保存する場合は、マイドキュメント以下とする(デスクトップやその他の場所に保存すると自動で削除される)。
・演習は、毎回与えられるミッションをクリアしていく形で実施する。ミッションは、(1)早々と作業が終了した人は教員からチェックを受け、OKが出れば、ミッションコンプリートを報告し、その後はチームメンバーを支援したり他メンバーのミッション完了をチェックする。(2)チーム内にミッションを完了した人がいる場合は、その人からミッション完了のチェックを受け、OKが出れば、ミッションコンプリートを報告し、その後はチームメンバーを支援したり他メンバーのミッション完了をチェックする。という流れで進める。
・授業時間終了20分前以後、チーム全員がミッションコンプリートしたら、チーム単位で授業を終了して良い。
・授業時間内に、ミッションコンプリートできなかった人や、授業を欠席した人は、未完のミッションを次回までの宿題とし、次の授業日の前夜(水曜夜23:59:59)までに課題を完了させ、自分の判断でミッションコンプリートを報告する。報告遅れは減点、未実施は得点なし(報告忘れも同様に扱う)。
・先に課されるミッションは、後のミッションの前提となるため、先のミッションを終わらせてから、後のミッションに着手すること。ミッション完了順序が異なる場合、既に演習したポイントでつまづくことになり、評価も下がることになる。
・授業期間後半で、各自プログラミングに取り組む予定である。各回のミッションの理解が不十分な場合や、自信がない人は、ミッションの条件を変えて実施するなどして、理解を深めておくこと。
・前期の内容を忘れた人などのため前期の資料はこちら
・成績評価は最終課題等が終わり集計されるまで確定しないが、各自の自己評価情報を用いてこちらで成績評価を見積もることができる。あくまでも自己管理を支援する参考情報として捉えること。
    オリエンテーション
     授業をはじめるにあたり、計画、評価方法について説明する。

    演習環境の構築
     今後プログラミング演習を行っていくための環境設定を行う。本日のミッションは以下。
    1. チーム毎に分かれ、互いに自己紹介。
    2. 設定ファイルを、マウスの右クリックして、ポップアップメニューから「対象をファイルに保存」を選び、デスクトップに保存する(「証明がない」などの警告が出るが無視する)。ファイルは、settings1.exesettings2.jaksettings3.jakの3つ。3つ揃ったらsettings1.exeをダブルクリック。ファイル名に数字のない「settings.exe」(名前に注意)が生成される。うまくいかない場合は、3つのファイルがすべて40MB(40000KB)程度か確認し、小さい場合はダウンロードに失敗しているので、問題があるファイルを削除してダウンロードし直す。
    3. 生成された「settings.exe」(名前に注意)をダブルクリック。保存先選択のポップアップウインドウが表れたらOK。うまくいかない場合は、ファイルを削除してダウンロードからやり直す。
    4. 保存先選択のポップアップウインドウの「参照」ボタンを押す。
    5. ここで一端ストップして、チームメンバーと確認しあいながら、出力先として、以下の正しい例のように指定する。
       ダメな例(作成したフォルダが指定されているとダメ)
        
        
       正しい例(USBメモリドライブが指定されていればOK)
        
        
    6. メンバーで確認しあって問題がなければ、OKをクリックし、パスコードを入力すると、解凍が始まる(30〜50分かかる)。途中、画面が固まるようになるが、解凍に時間がかかっているだけなので放置する。USBメモリのアクセスランプが点滅していれば動いていることが確認できる。
    7. チーム全員が、ここまでを終了したら、挙手して教員に報告。全チームが揃ったら、教員から説明を行う。こちらの資料も確認する。
    8. 教員の説明が終わり、解凍が終わったら、エクスプローラなどでUSBメモリにアクセスし「D:\xampp」や「E:\xampp」(ザンプと読む)フォルダがあれば設定完了。「D:\data\xampp」のように、作成したフォルダの中にxamppフォルダを作成してしまったら正常動作しないため、「D:\xampp」や「E:\xampp」となるようフォルダごと移動する。以下、ダメな例と正しい例。
       ダメな例(作成したフォルダにxamppフォルダが指定されているとダメ)
        
        
       正しい例(USBメモリドライブ直下にxamppフォルダが指定されていればOK)
        
        

      【サーバー(XAMPP)起動】
    9. USBメモリの「D:\xampp」や「E:\xampp」フォルダ内を見て、xampp-control.exeというファイルをダブルクリック(なお、この後、USBメモリは抜かないこと。もし抜く場合は、後述の正しい方法で停止する)。
    10. 初めて起動する場合、言語設定を聞かれるので、英語を選ぶ。
    11. XAMPP Control Panel(ザンプコントロールパネル)という画面が立ち上がったら、「Apache」の行の「Start」ボタンをクリックして仮想サーバーを起動。この作業は毎回行うので覚えておくこと。
    12. サーバーの動作を確認するために、ブラウザを起動。URL欄に「http://localhost/」(できない場合は「http://127.0.0.1/」)と入力し「XAMPP」のロゴが表示されたらOK。
    13. ここまで終了したら、チーム内に教員からOKをもらったメンバーがいる場合は、そのメンバーからチェックを受け、いない場合は教員からチェックを受ける。OKが出たら、こちらからミッションコンプリートを報告。コンプリート報告した人は、他のメンバーにそのことを伝えて助ける。宿題となったり休んだ人は自分でチェックしてコンプリート報告する

      【サーバー(XAMPP)停止】
    14. XAMPP Control Panelの「Apache」の行の「Stop」ボタンをクリックしてサーバーを停止し、同じ画面右下の「QUIT」ボタンをクリックしてXAMPPを終了させる。
    15. ブラウザで、先ほど仮想サーバーのURL「http://localhost/」(できない場合は「http://127.0.0.1/」)にアクセスし、「XAMPP」のロゴが表示されないことを確認。
    16. Windowsのタスクバーから、「ハードウェアを安全に取り外してメディアを取り出す」をクリックし、USBメモリに相当する「〜の取り出し」を選択。USBメモリへのアクセスがなくなったらUSBメモリを抜く。

      ★XAMPPがうまく起動しない場合、以下を試す(開講以来ありませんでしたが)
    1. 原因はさまざまだが、よくあるミスは、USBメモリ直下にインストールしていないこと(「D:\xampp」のようにドライブ直下に設定せず、「D:\data\xampp」のように、作成したフォルダの中にxamppフォルダを作成してしまうと正常動作しない)。
    2. Skypeと競合するらしく、Skypeが動いていないかタスクバーなどで確認し、動いていたら停止する。
    3. 何かのアプリケーションが、XAMPPが使うポートを占有してしまっている可能性があるため、一度パソコンを再起動する。
    4. 教室でパソコンに余裕がある場合は、パソコンを替えてやってみる。それでも改善されなければ、USBメモリ側のファイルに問題がありうるため、インストールからやり直す。
    5. 何をやってもうまくいかない場合は、大学では導入済みのXAMPP、家ではXAMPPをパソコンにインストールして(USBタイプではなく)実施する。

    HTMLの復習とサーバーでの起動
    HTMLの復習を行い、サーバーでの起動を試みる。全て完了したら教員ないしコンプリートメンバーのチェックを受けること。

    1. 【サーバー起動】前回の説明を思い出し、USBメモリに設定したXAMPPを起動せよ。今後の授業では、毎回、XAMPPを使うため、起動方法については記憶しておくこと。
    2. ブラウザで「http://localhost/」にアクセスし、XAMPP画面が表示されるか確認せよ。表示されない場合は、XAMPPの起動に失敗している可能性がある。
    3. 【エディタ起動】USBメモリの「xampp」フォルダ内で「htdocs」フォルダを見つけ、その中の「phpkiso」フォルダを開け。このフォルダは、今後も演習で使用するので覚えておくこと。
    4. 「phpkiso」フォルダに、エディタ起動ファイルがあるのでダブルクリックし、エディタ(Terapad)を起動せよ。
    5. Terapadが起動されたら、資料を見て、表示設定を変更せよ。変更されたら、全角スペースや半角スペースなどが記号で表示されていることを確認せよ。(大学のパソコンに設定済みのTerapadを使う場合は、表示設定を変更しても、次回には初期化されてしまうため、必要があれば毎度設定すること)
    6. 【HTMLの復習】資料を見ながらHTMLを作成する。資料にしたがいwellcome.html(本来はwelcomeだがテキストに合わせwellcomeとしている)を作成した上で、TeraPadで簡単に開く方法(p.47)でファイルを開いてみよ。
    7. p.48まで読み進め、localhostについて理解せよ。
    8. その後、テキストに沿って、wellcome.htmlを編集し、p.52の画面が表示されるか確かめよ。なお、その際は、ブラウザのURLがhttp://localhost/phpkiso/wellcome.htmlとなっているか確認せよ。
    9. p.53を読み、改行タグの2つの書き方を理解せよ。
    10. さらにテキストを読み進め、今度は、ひな形ファイルをコピーしてkonichiwa.htmlを作成。TeraPadで簡単に開く方法(p.47)で開いて編集し、p.54のようなwellcome.htmlからのリンクを完成させよ。なお、その際は、ブラウザのURLがhttp://localhost/phpkiso/konichiwa.htmlとなっていることを確認せよ。
    11. 「phpkiso」フォルダ内で右クリック、新規作成で「night」フォルダを作成し、ひな形ファイルをコピーして、「night」フォルダ内にkonbanwa.htmlを作成せよ(コピーしてファイル名を変更)。
    12. 作成したkonbanwa.htmlを編集し、青色の文字で「こんばんわ」と表示されるようにせよ。先に作成したwellcome.htmlの内容や、こちらの文字装飾のFONTタグの説明を参考にする。
    13. さらに、konbanwa.htmlに、「wellcomeに戻る」という文字を追加し、この文字をクリックすると、先に作成したwellcome.htmlにジャンプするようリンクを設定せよ。リンクの張り方は、先に作成したwellcome.htmlの内容や、こちらのリンク設定のAタグの説明、相対パスの指定については、相対パス指定の上位フォルダへのリンク方法を参考にする。
    14. 全て終了したらチェックを受け、OKが出たら、こちらからミッションコンプリートを報告。
    15. 報告後、サーバーを使うことがなくなったら、XAMPPコントロールパネルでサーバーをSTOPし、右下のQUITで終了せよ(QUITしていないと不具合が起きたりUSBメモリが抜けなくなったりする)。
    データの出力処理
     PHPの概要について学び、演習に取り組む。全て完了したら教員ないしコンプリートメンバーのチェックを受けること。
    1. 前回同様、サーバーを起動し、エディタも起動せよ。
    2. 資料を読んで、「ようこそ」を出力するPHPスクリプトcheck.phpを作成せよ。
    3. check.phpを、localhostのサーバー経由でアクセスして正常に表示されることを確認できたら、ブラウザ画面を右クリックしてソースを表示し、上記資料にも説明があったように、PHPスクリプトをのぞき見できないことを確認せよ。
    4. 確認できたら、check.phpを、ブラウザにドラッグ&ドロップすると(サーバー経由ではなくブラウザで直接開くと)、正常に表示されないことを確認せよ(HTMLファイルとは違いPHPはサーバーで処理された結果が表示されていることを確かめる)。
    5. 確認後、check.phpをコピーして貼り付け(今後も使うのでcheck.phpは上書きせずに残すこと)、コピーしたファイルの名前をtest04.phpに変更。エディタで開いて以下を出力するPHPを作成せよ。HTMLがわからない人は、前回資料や、HTML入門のインライン要素(1)と(2)を参考にすること。
      1. 赤色・大サイズの「こんにちは」を表示。
      2. 画像sample.jpg画像を表示。
      3. konichiwa.htmlへのリンクを設定。
      4. それぞれの間に改行を設定。
    6. 上記資料を参考に、「print」をすべて「echo」に変更して、処理結果に変化がないことを確認せよ。
    7. test04.phpを編集して次を試してみよ。
      1. echo文(またはprint文)に「"3+4"」を設定し、計算式が表示されることを確かめた上で、もう一行別のecho文(またはprint文)に、ダブルコーテーションのない「3+4」を設定し、計算結果が表示されることを確認せよ。つまり、ダブルコーテーションがある数字や計算式は文字列として扱われ、ダブルコーテーションがない場合は数値として扱われることを理解せよ。
      2. 上の2行のecho文(またはprint文)の間に、もう一行、「echo "<br>";」を追記して改行を設定せよ。
      3. echo文(またはprint文)に「55.8」を設定し、小数点の数字が表示されることを確認した上で、もう一行別のecho文(またはprint文)に、ダブルコーテーションを「"55"."8"」を設定し、数字が結合されることを確認せよ。つまり、これもダブルコーテーションで挟まれた数字が文字列として扱われ、挟まれない数字は数値として扱われることを理解せよ。そして文字列と文字列の間にあるピリオドは結合記号になるため出力されないことを確認せよ。
      4. echo文(またはprint文)に「"ab"."road"」を設定し、文字が結合されabroadになる事を確認せよ。
      5. echo文(またはprint文)に「"a<b"."r>ord"」を設定し、文字が結合され、結合後、HTMLタグ<br>になったところが改行タグとして解釈される事を確認せよ。
    8. さらにさらにtest04.phpに、次のヒアドキュメントを追加し(コピーで良い)、正常に表示されたら、なぜそうなったか読んで理解せよ。
    9. (余力がなければパス可)test04.phpを編集し、残りのHTML部分もすべてPHPによって出力せよ。つまり、test04.phpの1行目に「<?php」、最終行に「?>」が来るようにし、すべてのHTMLタグをPHPの命令(printまたはecho)によって出力するようにせよ。
    10. 全て終了したらチェックを受け、OKが出たら、こちらからミッションコンプリートを報告。
    11. 報告後、サーバーを使うことがなくなったら、XAMPPコントロールパネルでサーバーをSTOPし、右下のQUITで終了せよ(QUITしていないと不具合が起きたりUSBメモリが抜けなくなったりする)。
    データの入力・受け渡し処理
     入力データを受け取ってPHPスクリプトに受け渡す処理について学び、演習に取り組む。そろそろエラーが出始めるが、隣の人だけでなくチームメンバーで協力して解決する努力する→参考(このページ最下部)。全て完了したら教員ないしコンプリートメンバーのチェックを受けること。
    1. これまで同様、サーバーを起動し、エディタも起動せよ。
    2. 資料を見ながら入力フォームとボタンを設置したHTMLファイルを作成し、サーバー(localhost)経由で表示させよ。
    3. 正常に表示されたら、資料(p.59)を見て、なぜindex.htmlというファイル名にするかを確認せよ。
    4. 「http://localhost/phpkiso/」と、HTMLファイル名を省略してアクセスした場合に、hina.htmlでもcheck.phpでもなく、index.htmlが表示されることを確かめよ(つまり、HTMLファイル名が省略されると、通常、index.〜というファイルが表示される設定になっている)。
    5. 資料を参照して作成した入力フォームからデータを受け取るPHPスクリプトを作成せよ。エラーが出た場合は、資料をよく読んで、よくあるミスなどがないか確認せよ。
    6. 完成したら、一旦すべてのエディタを閉じる。その後、エクスプローラーで作成したindex.htmlをコピーして貼り付け、ファイル名をtest05.htmlに変更、check.phpも同様にコピーしして貼り付け、名前をtest05.phpに変更せよ。
    7. 作成した2つのファイルtest05.htmltest05.phpをエディタで開き、test05.htmlには以下を追加、test05.phpには、先の資料を参照して、以下のフォームから入力されたデータを受け取って表示するスクリプトを追加せよ。
    8. test05.htmlに、サーバー経由でアクセスし、性別や好きな科目などを入力して送信すると、データが受け渡されて表示されることを確認せよ。
    9. さらにtest05.htmlを編集して、以下を追加。一方のtest05.phpを編集してデータを受け取り、表示するスクリプトを追加せよ。
    10. 先と同様に、test05.htmlに、サーバー経由でアクセスし、入力したメッセージが表示されるか確認せよ。特に、改行した場合にどうなるか、HTMLタグを入力した場合にどうなるかなどを試してみよ。
    11. 全て終了したらチェックを受け、OKが出たら、こちらからミッションコンプリートを報告。
    12. 報告後、サーバーを使うことがなくなったら、XAMPPコントロールパネルでサーバーをSTOPし、右下のQUITで終了せよ(QUITしていないと不具合が起きたりUSBメモリが抜けなくなったりする)。
    変数と条件分岐、論理・比較演算
     受け取ったデータを変数に格納したり、条件分岐する処理について概説した後、演習に取り組む。前回のミッションをコンプリートしていない人は完了後に以下ミッションを実施する(わからない場合はチームメンバーに協力を求める)。うまくいかない場合は、チェックリスト(このページ最下部)を参考に、隣の人だけでなくチームメンバーにも相談して解決の努力をすること。最終的には、各自が人の手を借りずに簡単なウェブアプリを制作できるようになることを目指す。全て完了したら教員ないしコンプリートメンバーのチェックを受けること。
    1. これまで同様、サーバーを起動し、エディタも起動しておく。
    2. 資料1を参照し、PHPの変数について理解せよ。
    3. 続いて、資料2を見て、変数とif命令について理解せよ。
    4. if命令が理解できたら、前回作成した、check.phpをエディタで開き、上記資料2に基づいて、チェック機能を作成せよ。前回までに作成したindex.htmlからデータを入力すると入力されたデータが表示され、未入力の場合は、未入力のメッセージが示されるようになればOK。
    5. 上記資料2を参照して、check.phpにインデントをつけよ。
    6. 完成したら、index.htmlをコピーして貼り付け、ファイル名をtest06.htmlに変更、check.phpも同様にコピーしして貼り付け、名前をtest06.phpに変更せよ。
    7. 資料3を読んでelse ifを理解せよ。
    8. test06.phpをエディタで開き、未入力の場合に未入力メッセージを表示することに加えて、else ifを使って、もし入力された内容が「ありがとう」なら「どういたしまして」と表示する条件を追加せよ(それ以外の入力なら「ようこそ・・・様」と表示)。
    9. サーバー経由でtest06.htmlにアクセスし、未入力の場合、名前を入力した場合、「ありがとう」を入力した場合に、test06.phpに飛んで異なる結果が表示されることを確かめよ。
    10. 資料4を読んで、論理演算や比較演算について理解せよ。
    11. test06.htmlをエディタで開き、ニックネーム入力欄の下に、以下のパスワードの入力欄を設定せよ。
    12. test06.phpをエディタで開き、論理演算、比較演算の考え方を用い、全体として、ニックネームの入力がなければ「ニックネームの入力がありません」、パスワードの入力がなければ「パスワードの入力がありません」、両方の入力がなければ「ニックネームとパスワードの入力がありません」と表示する。両方の入力があり、ニックネームが「ありがとう」なら「どういたしまして」、それ以外なら「ようこそ・・・様」と表示する処理を作成する。
    13. サーバー経由でtest06.htmlにアクセスし、入力内容に応じて意図通りの結果がtest06.phpで表示されることを確かめよ。
    14. 全て終了したらチェックを受け、OKが出たら、こちらからミッションコンプリートを報告。
    15. 報告後、サーバーを使うことがなくなったら、XAMPPコントロールパネルでサーバーをSTOPし、右下のQUITで終了せよ(QUITしていないと不具合が起きたりUSBメモリが抜けなくなったりする)。
    展開への配慮
     入出力を伴う処理の配置や、画面展開処理について理解し、演習に取り組む。 前回のミッションをコンプリートしていない人は完了後に以下ミッションを実施する(わからない場合はチームメンバーに協力を求める)。うまくいかない場合は、チェックリスト(このページ最下部)を参考に、隣の人だけでなくチームメンバーにも相談して解決の努力をすること。最終的には、各自が人の手を借りずに簡単なウェブアプリを制作できるようになることを目指す。全て完了したら教員ないしコンプリートメンバーのチェックを受けること。
    1. これまで同様、サーバーを起動。エディタも起動し、index.htmlとcheck.phpを開いて準備せよ。
    2. 前回の復習も兼ねて資料1に基づき、index.htmlとcheck.phpを編集。
    3. できたらlocalhostサーバー経由で、index.htmlを開き、データを送信。check.phpが未入力チェックなどを正常に行えることを確かめる。
    4. うまくいったら、資料2を見て、リンク(Aタグ)で元のページにジャンプする方法と、JavascriptのonClickとhistorybackで元のページにジャンプする方法の違いを確認した上で、後者の方法で資料に基づき「戻る」ボタンを作成。入力画面に戻った場合にでも、入力された値が残っていることを確かめよ。
    5. 確認できたら、資料3を参照し、サンクスページの意義を理解せよ。
    6. 理解できたら、資料3に従い、thanks.phpを作成。未入力項目がある場合は、メッセージが表示されると同時に、OKボタンが表示されなくなることなどを確かめよ。
    7. 完成したら、index.htmlをコピーして貼り付け、ファイル名をtest07.htmlに変更、check.phpとthanks.phpも同様にコピーしして貼り付け、名前をそれぞれtest07a.php、test07b.phpに変更せよ。
    8. エディタで、test07.htmlとtest07a.php、test07b.phpを開き、資料4を見て、test07.htmlのすべての入力欄に何も入力されていない場合にはtest07a.phpで判断してtest07.htmlに強制転送し、いずれかに入力漏れがある場合はそのことを指摘しつつ送信ボタンは表示せず、すべての入力欄に入力があればtest07b.phpへ展開する処理を設定せよ。
    9. 全て終了したら教員ないしコンプリートメンバーからチェックを受け、OKが出たら、こちらからミッションコンプリートを報告。
    10. 報告後、サーバーを使うことがなくなったら、XAMPPコントロールパネルでサーバーをSTOPし、右下のQUITで終了せよ(QUITしていないと不具合が起きたりUSBメモリが抜けなくなったりする)。
    内部データ渡しと不正防止
     処理展開時に内部的にデータを受け渡す処理や不正防止の方法について学び演習に取り組む。前回のミッションをコンプリートしていない人は完了後に以下ミッションを実施する(わからない場合はチームメンバーに協力を求める)。うまくいかない場合は、チェックリスト(このページ最下部)を参考に、隣の人だけでなくチームメンバーにも相談して解決の努力をすること。最終的には、各自が人の手を借りずに簡単なウェブアプリを制作できるようになることを目指す。全て完了したら教員ないしコンプリートメンバーのチェックを受けること。
    1. これまで同様、サーバーを起動。エディタも起動し、演習環境を準備せよ。
    2. 資料1を参照し、処理展開時に内部的にデータを受け渡すhidden項目について理解せよ。
    3. エディタで、前回作成したcheck.php、thanks.phpを開き、上記資料に従い編集せよ。
    4. できたらlocalhostサーバー経由で、index.htmlを開き、データを送信。check.phpから、thanks.phpにジャンプして、表示されていないデータがhidden項目を介して受け渡されたことを確認せよ。
    5. ここまでできたら、index.htmlの最初の入力欄に「<font color=red size=7>」などと入力し、色やサイズが変わってしまうことを確認せよ。
    6. 確認できたら、資料2を読み、上記の行為がクロスサイトスクリプティングであることを確認し、その防止策を理解せよ。
    7. 上記資料を参照して、check.php、thanks.phpを編集し、不正防止策を実装せよ。その際、文字コードへの配慮を忘れないこと。
    8. 資料3を参照し、メール送信処理について理解せよ。
    9. 理解できたら、上記資料を参照して、thanks.phpを編集し、メール送信処理を実装せよ。実装したらサーバー経由でアクセスし、エラー(warning)が表示されることを確認せよ(演習で使っているバージョンでは表示されませんので見た目の変化がありません:ソースが無効化され問題なく動作すればOKです)。
    10. エラーが出ることが確認できたら、資料4を参照し、コメントの書き方や使い方を理解した上で、thanks.phpを編集し、メール送信処理を無効化せよ(演習で使っているバージョンでは表示されませんので見た目の変化がありません:ソースが無効化され問題なく動作すればOKです)。
    11. 資料を右クリックでダウンロードし、ダブルクリック(警告が出るが問題ない)。出力(解凍)先フォルダをphpkisoとして実行し、同フォルダにdebug.phpというファイルができたらOK。作成されたdebug.phpを、サーバー(localhost)経由でアクセスし、エラーが出ることを確認せよ。
    12. 上記資料4の「コメント」のデバッグでの利用を踏まえて、debug.phpに含まれる5個のバグを探して修正せよ(デバッグのヒント:アスタリスクを使ってPHPのプログラム部分のすべてをコメント化し、コメントの開始ポイントを下に移動させることで、コメントの範囲を狭めていく)。
    13. 全て終了したらチェックを受け、OKが出たら、こちらからミッションコンプリートを報告。
    14. 報告後、サーバーを使うことがなくなったら、XAMPPコントロールパネルでサーバーをSTOPし、右下のQUITで終了せよ(QUITしていないと不具合が起きたりUSBメモリが抜けなくなったりする)。
    繰り返し処理
     繰り返し処理について学び、演習に取り組む。前回のミッションをコンプリートしていない人は完了後に以下ミッションを実施する(わからない場合はチームメンバーに協力を求める)。うまくいかない場合は、チェックリスト(このページ最下部)を参考に、隣の人だけでなくチームメンバーにも相談して解決の努力をすること。最終的には、各自が人の手を借りずに簡単なウェブアプリを制作できるようになることを目指す。全て完了したら教員ないしコンプリートメンバーのチェックを受けること。
    1. これまで同様、サーバーを起動。エディタも起動し、演習環境を準備せよ。
    2. 資料1を確認し、繰り返し処理について理解せよ。
    3. phpkisoフォルダにあるひな形ファイルhina.htmlをコピーして貼り付け、ファイル名をtest09.phpに変更。エディタで開いて編集できるようにせよ。
    4. 上記資料に従い、test09.phpを編集し、forループ文を用いて、「★」を横に3つ表示するスクリプトを作成せよ。
    5. 上記★3つ表示のスクリプトのforループ文をコピーし、test09.phpに追加する形で貼り付けて修正し、「★」を横に20個表示するスクリプトを作成せよ。★3つと★20個の間には適宜改行を入れよ。
    6. 上記★20個表示のスクリプトのforループ文をコピーし、test09.phpに追加する形で貼り付けて修正し、上記で作成した「★を20個表示するforループ処理」を10回繰り返すよう設定せよ。ヒントは、forループを入れ子にすること(以下テキストエリア)と、適切な箇所で改行を入れること。結果は、「★」が200個(横20縦10)に並ぶことになる。★20個と★200個の間には適宜改行を入れよ。

    7. 上記★200個表示のスクリプトのforループ文をコピーし、test09.phpに追加する形で貼り付けて修正し、1から200までの数字を、横に20個、縦に10段に並べる処理を追加作成せよ。つまり、1段目は、1〜20、2段目は、21〜40、・・10段目は、181〜200が並ぶ形になる。複数のやり方がありうるが、ヒントは、上記の「★」の表示の代わりに数字を表示すること、1ずつ増える数字は、以下(テキストエリア)のような処理を繰り返すこと(変数の使い方については、以前確認した変数の資料を参照しforループに入る前で「$bango=0;」のようにゼロを代入して初期化しておくこと)。上記★表示との間には適宜改行を入れること。

    8. 上記1〜200までの数字表示のスクリプトのforループ文をコピーし、test09.phpに追加する形で貼り付けて修正し、1〜200までの数字一つ一つを、表(table)のセルに入れた形で表示する処理を追加せよ(つまり、左下のような表を、横に20セル、縦に10段で作る)。ヒントは、以下テキストエリアのテーブルタグを参考に、繰り返されているタグを識別し、数字と一緒にタグを表示することである。
      サンプルテーブル
      1234
      5678
      9101112
       ←  ヒント:左記サンプルテーブルを実現するHTML
    9. 全て終了したらチェックを受け、OKが出たら、こちらからミッションコンプリートを報告。
    10. 報告後、サーバーを使うことがなくなったら、XAMPPコントロールパネルでサーバーをSTOPし、右下のQUITで終了せよ(QUITしていないと不具合が起きたりUSBメモリが抜けなくなったりする)。
    配列処理
     配列(変数)とその扱い方について学び、演習に取り組む。前回のミッションをコンプリートしていない人は完了後に以下ミッションを実施する(わからない場合はチームメンバーに協力を求める)。うまくいかない場合は、チェックリスト(このページ最下部)を参考に、隣の人だけでなくチームメンバーにも相談して解決の努力をすること。最終的には、各自が人の手を借りずに簡単なウェブアプリを制作できるようになることを目指す。全て完了したら教員ないしコンプリートメンバーのチェックを受けること。
    1. これまで同様、サーバーを起動。エディタも起動し、演習環境を準備せよ。
    2. 資料1を確認し、配列処理について理解せよ。
    3. phpkisoフォルダにあるひな形ファイルhina.htmlをコピーして貼り付け、ファイル名をtest10.phpに変更。エディタで開いて編集できるようにせよ。
    4. 上記資料p.4までを参考に、test10.phpを編集して、味噌カツ、きしめん、エビフライ、手羽先、を配列変数に格納した上で、4行に渡って表示するスクリプトを作成せよ。なお、配列へのデータ設定はarray関数で行い、出力はforループでprint関数を4回繰り返して実現すること。
    5. 上記資料p.5のサンプルを参考に、test10.phpを編集して、上記で作成した配列変数に、小倉トースト、をarray関数やarray_push関数を使わずに追加設定せよ。
    6. 上記資料p.7-8を参考に、test10.phpを編集して、count関数を用いて配列の要素数を取得し、取得された要素数をforループの繰り返し回数として設定することで、配列の全要素が表示されるようにせよ。
    7. count関数の組み込みができたら、さらにtest10.phpを編集して、資料p.6のarray_push関数を用いて、あんかけスパ、ひつまぶし、を配列に追加設定するスクリプトを記述し、追加された要素が、自動的に表示されることを確かめよ。
    8. 資料p.9の連想配列の考え方を踏まえて、test10.phpを追加編集し、array関数を用いて、キーを、朝、昼、夜の3つ、それぞれの値を、小倉トースト、あんかけスパ、味噌カツとする、連想配列を設定せよ。
    9. 資料p.10-11を参考に、test10.phpを編集し、foreachループを使って、設定した連想配列からキーと値を順に取り出して、「朝=小倉トースト」「昼=あんかけスパ」「夜=味噌カツ」と表示するスクリプトを追加せよ。
    10. 上記foreachループを修正して、それぞれのキーと値を、表(table)のセルに入れた形で表示する処理を追加せよ。つまり、左下のような表を作る。
      サンプルテーブル
      小倉トースト
      あんかけスパ
      味噌カツ
       ←  ヒント:左のサンプルテーブルを実現するHTML

    11. 全て終了したらチェックを受け、OKが出たら、こちらからミッションコンプリートを報告。
    12. 報告後、サーバーを使うことがなくなったら、XAMPPコントロールパネルでサーバーをSTOPし、右下のQUITで終了せよ(QUITしていないと不具合が起きたりUSBメモリが抜けなくなったりする)。
    ファイルの読み書き
     入力データをサーバー内のファイルに保存する方法について概説した後、演習に取り組む。前回のミッションをコンプリートしていない人は完了後に以下ミッションを実施する(わからない場合はチームメンバーに協力を求める)。うまくいかない場合は、チェックリスト(このページ最下部)を参考に、隣の人だけでなくチームメンバーにも相談して解決の努力をすること。最終的には、各自が人の手を借りずに簡単なウェブアプリを制作できるようになることを目指す。全て完了したら教員ないしコンプリートメンバーのチェックを受けること。
    1. これまで同様、サーバーを起動。エディタも起動し、演習環境を準備せよ。
    2. 資料を確認し、PHPによるテキストファイルへのデータの読み書きについて理解せよ。
    3. phpkisoフォルダにあるひな形ファイルhina.htmlをコピーして貼り付け、ファイル名をtest11.phpに変更。エディタで開いて編集できるようにせよ。
    4. 資料p.2〜3を参考に、test11.phpを編集し、ブラウザでアクセスすると、「sample11.txtに、本日は晴天なり、と書き込みました」と表示しつつ、実際に「sample11.txt」というファイルに、「本日は晴天なり」と書き込むスクリプトを作成せよ。
    5. ブラウザでtest11.phpにアクセスし、適切にメッセージが表示された後、「sample11.txt」というファイルができていることと、「sample11.txt」の内容が「本日は晴天なり」となっていることを確認せよ。
    6. 確認できたら開いているテキストファイルsample11.txtの内容を、適当に書き換えて(「あああああ」など意味不明な文字列でよい)保存し、ファイルを閉じよ。
    7. ブラウザでtest11.phpを数回再読み込み(更新ボタンをクリック)し、ファイルの内容が「本日は晴天なり」一行だけになっていること(つまり意味不明な文字列に書き換えた内容が上書きされていること)を確認せよ。
    8. ファイルへの上書きが確認できたら、上記資料p.2を参考に、test11.phpを編集して、ファイルオープンモードを上書きモードから追加書き込みモードに変更せよ。
    9. ブラウザでtest11.phpを数回再読み込み(更新ボタンをクリック)し、ファイルの内容が「本日は晴天なり」が複数行になっていること(つまり上書きではなく追加書き込みがなされたこと)を確認せよ。
    10. 資料p.3下部のパーミションの項目を読み、サーバーでは、ファイル毎に設定されるパーミション情報によって、読んだり、書き込んだり、実行したりできることを理解せよ。
    11. 資料p.4からのファイルの読み込みの箇所を参考に、test11.phpに追記する形で、sample11.txtの内容を読み込んで、forループで1行1行表示するスクリプトを作成せよ。
    12. ブラウザでtest11.phpにアクセスし、再読込(更新ボタンをクリック)するたびに、「本日は晴天なり」の行数が増えていくことを確認せよ。
    13. 上記スクリプトを修正し、表示結果を表(table)に入れ、かつ、1行毎に行番号を表示するように修正せよ。(ヒント:行番号は、forループの繰り返し回数と同じで、以下のようなテーブルを出力すればよい)。この場合も、再読込(更新ボタンをクリック)するたびに行数が増えていくことを確認せよ。

      サンプルテーブル
      1本日は晴天なり
      2本日は晴天なり
      3本日は晴天なり
       ←  ヒント:左のサンプルテーブルを実現するHTML

    14. 全て終了したらチェックを受け、OKが出たら、こちらからミッションコンプリートを報告。
    15. 報告後、サーバーを使うことがなくなったら、XAMPPコントロールパネルでサーバーをSTOPし、右下のQUITで終了せよ(QUITしていないと不具合が起きたりUSBメモリが抜けなくなったりする)。
    ネットビジネス応用1:アクセス管理
     これまでに学んだことを総合して、簡易のアクセスカウンタの構築を行う。応用課題であり、チーム内で相談して構わないが、できるだけ自分の力で完成させること。内容は、これまでの授業でやったことに基づいているため、過去の資料を見たり、ネットで調べるなど、自己解決可能なはずである。全て完了したら教員ないしコンプリートメンバーのチェックを受けること。なお、前回のミッションをコンプリートしていない人は完了後に以下ミッションを実施する(わからない場合はチームメンバーに協力を求める)。うまくいかない場合は、チェックリスト(このページ最下部)を参考に、隣の人だけでなくチームメンバーにも相談して解決の努力をすること。最終的には、各自が人の手を借りずに簡単なウェブアプリを制作できるようになることを目指す。
    1. これまで同様、サーバーを起動。エディタも起動し、演習環境を準備せよ。
    2. 資料を参照しながら、アクセスカウンターを構築せよ(資料の最後まで)。
    3. 作成した(php部品を呼び出す)htmlファイルを編集し、アクセスカウンターの基本機能に加えて、独自の装飾を加えよ。色やサイズを変える、画像を背景に入れる、右寄せにする、2回表示するなど何をしても良い。そして、htmlファイルの中でphp部品を使うことの可能性を考えよ。
    4. 全て終了したらチェックを受け、OKが出たら、こちらからミッションコンプリートを報告。
    5. 報告後、サーバーを使うことがなくなったら、XAMPPコントロールパネルでサーバーをSTOPし、右下のQUITで終了せよ(QUITしていないと不具合が起きたりUSBメモリが抜けなくなったりする)。
    ネットビジネス応用2:コミュニケーション管理
     前回同様、応用課題に取り組む。今回は、簡易掲示板を構築する。チーム内で相談して構わないが、応用課題であり、できるだけ自分の力で完成させること。内容のほとんどは、これまでの授業でやったことに基づいているため過去の資料を見たり、ネットで調べるなど、自己解決可能である。全て完了したら教員ないしコンプリートメンバーのチェックを受けること。なお、前回のミッションをコンプリートしていない人は完了後に以下ミッションを実施する(わからない場合はチームメンバーに協力を求める)。
    1. これまで同様、サーバーを起動。エディタも起動し、演習環境を準備せよ。
    2. 資料を参照しながら、掲示板を構築せよ(資料の最後まで)。
    3. 全て終了したらチェックを受け、OKが出たら、こちらからミッションコンプリートを報告。
    4. 報告後、サーバーを使うことがなくなったら、XAMPPコントロールパネルでサーバーをSTOPし、右下のQUITで終了せよ(QUITしていないと不具合が起きたりUSBメモリが抜けなくなったりする)。
    ネットビジネス応用2:コミュニケーション管理2
     前回に続き、応用課題として簡易掲示板を構築する。チーム内で相談して構わないが、応用課題であり、できるだけ自分の力で完成させること。内容のほとんどは、これまでの授業でやったことに基づいているため過去の資料を見たり、ネットで調べるなど、自己解決可能である。今回は、後半で最終ミッションに着手するが、前半の通常ミッションが完了した時点で、教員ないしコンプリートメンバーのチェックを受け、コンプリートを報告すること。なお、前回までのミッションをコンプリートしていない人は完了後に今回のミッションを実施する(わからない場合はチームメンバーに協力を求める)。
    1. これまで同様、サーバーを起動。エディタも起動し、演習環境を準備せよ。
    2. 資料を参照しながら、掲示板を構築せよ(資料の最後まで)。
    3. 資料の最後まで完了したら、チェックを受け、こちらからミッションコンプリートを報告。
    4. コンプリート報告したら、最終ミッションに着手する。最終ミッション(最終試験、最終レポートに相当)は、作成した簡易掲示板の改良である。改良は以下のように行う。
        【最終ミッション】
      • 作成した掲示板に以前作成した簡易アクセスカウンターを組み入れる(掲示板ページのどこかにアクセスカウンタが表示されればよい)。
      • 動作検証を行うこと。エラーが出ないことはもちろん、演習で確認してきたような想定される不正入力に対しても、適切な処理が行われること。
      • サンプルのような単なる「ナンデモ掲示板」ではなく、何らかのテーマを持った掲示板に改良。経営学部らしく、問題解決に関わるテーマを持つ、「独自の」テーマであることが好ましい。また、それがわかるサイトタイトルやページ内説明を付けること。
      • できればテーマに加えて、機能面(操作や入出力)で、独自の改良を行うこと。またその改良は、掲示板を使ことが想定されるユーザーの視点に立って行うこと。独自性が高いものを評価したい。内容を理解して行うこと。ネット上のサンプル等を参考にしても構わないが、チェック時にソースの説明を求めることがある。
      • (注意事項)人のプログラムをコピーしたりさせたりしないこと。した場合は、した人もさせた人も最終課題を無効とする。
      • (注意事項)最終課題のPHPスクリプトやその他のファイルについてはまとめて提出できるようにしておく。
      • 以上については、終わらない場合は宿題とし、次回授業までに完成させておくこと。
    5. 終了後、サーバーを使うことがなくなったら、XAMPPコントロールパネルでサーバーをSTOPし、右下のQUITで終了せよ(QUITしていないと不具合が起きたりUSBメモリが抜けなくなったりする)。
    最終回
    最終回として、最終ミッション(最終課題)の最終チェックと提出を行う。サーバーを起動し、構築した掲示板システムの最終調整や動作確認を各自が行った上で、問題がなければ、以下の手順で、最終授業の時間内に提出する。なお、最終課題であり、自分が作った以外のプログラムをコピーするなどしないこと。不正コピーが発覚した場合は、した人もされた人も評価を無効とする(同一ファイル検出のソフトで確認するため人からコピーしたファイル等がある場合は当該ファイルを削除すること。ひな形ファイルや画像ファイル等を除く)。また、試験の提出と同じく再提出は認められないので、よく確認した上で提出すること。完成していない場合は、その時点のものをまとめて提出する。授業を欠席した場合や完成しなかった場合など最終授業時間内に提出できなかった場合は、最終授業当日23:59:59までに提出(点数×0.5)。遅れた場合は評価できない。提出は自宅等からでもネット経由で可能だが、関連ファイルをzipファイルとして圧縮保存する方法などは、各自の責任で調べて行うこと(環境が異なるため対応できない)。欠席理由が公欠に該当する場合は、最終授業当日23:59:59までに教員にメール等で連絡すること。
    • エクスプローラーやデスクトップで右クリックし、[新規作成]-[フォルダー]とし、学籍番号名のフォルダを作成する。
    • 作成したフォルダーに、最終課題に関連するphpkisoフォルダ内のファイルやフォルダーをそのままドラッグ&ドロップしてコピーする。最終ミッションに関係のないファイルは含めないこと。ネット上の外部ファイル等を参照する場合も含める必要はない。
    • コピーができたら、作成したフォルダーを、デスクトップの「Lhaplus」アイコンにドラッグ&ドロップする。
    • 圧縮形式を訪ねられるので「zip」を選択。
    • 出力先フォルダを訪ねられるので、デスクトップなどわかりやすいフォルダを選択して「OK」
    • 指定した出力先フォルダに、学籍番号.zip(例:99m987.zip)というファイルができているので、それをこちらから提出。
    • 提出が終わり、授業終了30分前を過ぎたら退室可能とする。それまでは私語などせず静かに待機する。退室時には遅刻の申告、公欠カードの提出を忘れないよう注意する。



    ●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行目かそれより前の行のプログラムの命令やセミコロン「;」、シングルコーテーション「'」、ダブルコーテーション「"」、カッコ「(」「{」の文字が全角になっていないか?
  page bottom
 
 
 
PCを使う大学生に
オススメ情報!

「家のPCで資料作ったのに忘れた」「ファイルを保存したUSBがなくなった」ということはよく起こります。それを防いでくれるのがDropbox(ドロップボックス)!

家のPCにインストールしてDropboxフォルダにファイルを保存すれば、ネット上に自動バックアップ。大学のPCなどネット接続できるPCからファイルをダウンロードできます。閲覧だけならスマホやipadからもOK!

無料で2GBまで使えますので大学の資料であれば余裕です。下のリンクから登録すると2.5GBまで無料になります。オススメです!

dropbox.com

 

 

 
ゼミで作った新愛学キャラ
「あぐ太」です!よろしく!

LINEスタンプSHOPから
「あぐ太」で検索
page top