林幹人研究室 プログラミングII 授業計画

お知らせ>

ページ選択 1〜5/6〜1011〜15

page bottom

・この計画は進捗に応じて変更される可能性があるため常に確認すること。PC等の設定により古いキャッシュデータが表示されることがあるためブラウザの更新ボタンをクリックするか、キーボードの[F5]キーを押して確認する。
・授業の2回目までに500MB程度以上の空きがありできれば高速なUSBメモリを準備。あれば買う必要はない(参考→製品例)。
・USBメモリに他のデータ(他の授業のレポートや写真など)が保存されている場合、初期および定期的にバックアップを取っておく(例えば大学PCのマイドキュメントにUSBメモリの内容をコピー)。
・USBメモリは毎回の授業に持参すること。忘れた場合は演習にならないため大幅減点とし、その回のミッションは次回までの宿題とする。
・USBメモリをPCから取り外す際は、面倒でも、起動中のアプリを停止し、安全な取り外しを実施して、丁寧に取り扱うこと(アクセス中に抜いてデータがすべて消えた例アリ)。
・大学PCに資料やファイルを保存する場合は、マイドキュメント以下とする(デスクトップなどに保存すると自動削除)。
・演習の進め方はこちらを参照のこと。
・課題の作成にあたりネットや書籍を調べることは制限しないが自らの力で実施すること。何らかの情報源や他の学生のプログラムのコピーが発覚した場合は課題を無効とする(学生間のコピーの場合はいずれがコピー元か判別がつかないため、した側された側を問わず同様に処分する)。
・授業中の飲食、私語、情報端末利用、その他迷惑行為は減点対象。スマホや携帯はかばんに片づける(発見次第チーム単位で減点するため相互に注意)。
・購入する必要はないが参考書は経営情報論・HTML&CSS&PHPプログラミング・ネットビジネスのおすすめ参考書一覧を参照のこと。

SPONSORED LINK

ページ選択 1〜5/6〜1011〜15

    オリエンテーション
     授業をはじめるにあたり、計画、評価方法について説明する。
     説明終了後、簡単なアンケートを行う。以下の質問項目をコピーした上でこちらにアクセスし、貼り付けて報告。
    (1)プログラミングI(未履修・履修済み)
    (2)phpのレベル(経験なし・経験あり・一応書ける)
    (3)HTMLのレベル(経験なし・経験あり・一応書ける)
    (4)他のプログラミング(経験なし・経験あり→ある場合は言語)
    (5)公欠含め欠席回数予想(5回以上・3〜4回・1〜2回・0回)

    ★次回までの宿題★500MB程度以上の空きがありできれば高速なUSBメモリを準備(あれば買う必要はない。参考→製品例)。忘れた場合は演習にならないため大幅減点(半欠席相当)とする。
    演習環境の構築
     チーム毎に分かれ互いに自己紹介。その後、今後プログラミング演習を行っていくための環境設定を行う。本日のミッションは以下。欠席した場合は、以降の演習ができないため、宿題とし、各自PC室を使うなどして完了しておくこと。
    大学PCにUSBメモリを挿し、USBメモリのルートフォルダ(USBメモリドライブ直下)を確認。ここに演習に必要なフォルダをコピーする。正しく設定されたイメージは以下(USBメモリドライブ直下にxamppフォルダがあればOK)。例はFドライブやDドライブを想定しているが、EでもGでも自動で割り当てられたドライブで良い。
      
      

    完成イメージを頭に入れた上で、大学PCデスクトップにある[名城公園キャンパスフォルダ]-[management]-[hayashi]-[tue3]-[material]からフォルダ[xampp](ザンプと読む)を、キーボードの[Ctrl]+[c]でコピー。※家で実施する場合は本日欄の下の補足を参照。
    上の例のようなUSBメモリのルートフォルダ(USBメモリドライブ直下)に[Ctrl]+[v]で貼り付け。コピー処理が始まったらそのまま放置。USBメモリの速度によるが完了まで20〜70分かかる(過去実績)。
    チーム全員がここまで完了したら、挙手して教員に報告。全チームが揃ったら教員から説明を行う。PHP開発環境XAMPPの導入XAMPPの使い方作業フォルダテキストエディタについて確認する。
    教員の説明が終わり、コピーが終わったら、エクスプローラなどでUSBメモリにアクセスし「D:\xampp」や「E:\xampp」フォルダがあれば設定完了。「D:\授業用\xampp」や「E:\report\xampp」のように、何らかのフォルダの中にxamppフォルダを入れてしまうと正常動作しない。「D:\xampp」や「E:\xampp」とドライブ直下にくるようフォルダごと移動すること。

    【サーバー(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」のようにドライブ直下に設定せず、「D:\プログラミング2\xampp」のように、作成したフォルダの中にxamppフォルダを作成してしまうと正常動作しない)。
    SkypeとPortで競合することがあるらしく、Skypeが動いていないかタスクバーなどで確認し、動いていたら停止。
    何かのアプリケーションが、XAMPPが使うPortを占有してしまっている可能性があるため、一度PCを再起動する。
    教室で使ってないPCがあれば、PCを替えてやってみる。それでも改善されなければ、USBメモリ側のファイルに問題がありうるため、Xamppのコピーをやり直す。
    何をやってもうまくいかない場合は、大学PCに設定して実施する(応相談)。

    【サーバー(XAMPP)停止】
    停止を正しく行わないと、設定のやり直しや、USBメモリ内のデータ消失、USBメモリの破損のリスクが高まるので、慎重かつ丁寧に行う。
    XAMPP Control Panelの「Apache」の行の「Stop」ボタンをクリックしてサーバーを停止し、同じ画面右下の「QUIT」ボタンをクリックしてXAMPPを終了させる。
    ブラウザで、仮想サーバーのURL「http://localhost/」ないし「http://127.0.0.1/」にアクセスし、「XAMPP」のロゴが表示されないことを確認(すでにサーバー停止されたため)。
    Windowsのタスクバーから「ハードウェアを安全に取り外してメディアを取り出す」をクリックし、USBメモリに相当する「〜の取り出し」を選択。USBメモリへのアクセスがなくなったらUSBメモリを取り外す。
    「取り出し」がうまく行えない場合、Xamppが停止できてないことがある。WindowsのタスクバーからXamppのオレンジ色のアイコンがないか確かめ、あれば右クリックし、表示メニューから「Quit」を選ぶ。アイコンが消えたら、もう一度、タスクバーから「ハードウェアを安全に取り外してメディアを取り出す」を実行する。
    終了したら、チェックを受ける。チーム内にすでにOKをもらったメンバーがいる場合は、そのメンバーからチェックを受ける。いない場合は教員からチェックを受ける。OKが出たら、こちらからミッションコンプリートを報告。コンプリート報告した人は、他のメンバーにそのことを伝えて助ける。欠席したり授業内で完了しなかった人は、宿題として次回までに実施し、結果は自分で確認してコンプリート報告すること。

    (補足)自宅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:¥」などを指定。「D:¥プログラミング」や「E:¥授業用」など作成したフォルダを指定しないこと)。
    4)パスワード入力を求められたら、半角小文字でジェイ・オー・エイチ・オー(じょーほーと読める)と入力。ファイルの解凍が始まる(途中固まったように見えても放置する。PCやUSBメモリの速度により終了まで20〜70分程度かかる。USBメモリのアクセスランプがあれば書き込み中かわかる)。
    5)成功すると指定したUSBメモリに「xampp」というフォルダが作られる。上記の授業の資料「サーバー(XAMPP)起動」のところから作業を行う。
    6)うまくいかない場合は、USBメモリの設定フォルダが「D:¥xampp」や「E:¥xampp」となっているか(ドライブ直下に「xampp」フォルダがあるか)確認し、なっていなければ移動させる(フォルダごとドラッグ&ドロップ)。それでもだめならファイルを削除して上記1からやり直す。
    7)どうしてもできない場合は、大学のPC室のPCで上記の授業でやるやり方で実施する。

    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経由で表示)し、フォントや画像が指定した通り表示されるか確認せよ。
    入力フォームのタグに従い「yokoso.html」をエディタで編集し、テキストエリア、パスワードエリア、ラジオボタン、送信ボタン、リセットボタンなどのタグについて実装せよ。完成したらブラウザを更新(上記URLと同様Localhost経由で表示)し、フォントや画像が指定した通り表示されるか確認せよ。
    表とリンクの実装に従い、ひな形HTMLファイル「hina.html」を選択して[Ctrl]+[c]でコピーし、そのまま[Ctrl]+[v]で貼り付け、名前を「table.html」に変更せよ。エディタにドラッグ&ドロップして「table.html」を開き、表とリンクの実装を参照して、表とリンクの設定方法を実装せよ(「リンクの設定」のウェルカムページへのリンクの箇所まで)。完成したらブラウザを更新(上記URLと同様Localhost経由で表示)し、表やリンクが思い通り実装されるか確認せよ。
    全て終了したらチェックを受け、OKが出たら、こちらからミッションコンプリートを報告。
    報告後、XAMPPコントロールパネルでサーバーをSTOP。右下のQUITで終了(USBメモリが抜けない原因)。その後、Windowsのタスクバーから「ハードウェアを安全に取り外してメディアを取り出す」をクリック。USBメモリの「〜の取り出し」を選択。USBメモリへのアクセスが停止したら取り外す。
    データの出力処理
     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に追加して、ヒアドキュメントの書き方や意義を確認せよ。
    以上の内容を踏まえて、練習問題に取り組み、PHPプログラムで指示された内容を実現せよ。
    全て終了したらチェックを受け、OKが出たら、こちらからミッションコンプリートを報告。
    報告後、XAMPPコントロールパネルでサーバーをSTOP。右下のQUITで終了(USBメモリが抜けない原因)。その後、Windowsのタスクバーから「ハードウェアを安全に取り外してメディアを取り出す」をクリック。USBメモリの「〜の取り出し」を選択。USBメモリへのアクセスが停止したら取り外す。
    データの入力・受け渡し処理
     入力データを受け取ってPHPスクリプトに受け渡す処理について学び、演習に取り組む。PHPプログラミングでは、しばしばエラーが出るが、隣の人だけでなくチームメンバーで協力して解決する努力する→参考(このページ最下部)。全て完了したら教員ないしコンプリートメンバーのチェックを受けること。
    これまで同様、サーバーを起動し、エディタも起動せよ。
    PHP資料を読んで、kihon02.htmlとkihon02.phpを作成せよ。また、それらを編集してデータ入力ページ、データ受信ページを完成させよ。サーバー(localhost)経由で表示し、データが受け渡しできることを確認せよ。またデータの受け渡しの仕組みについて理解せよ。
    PHP資料の、その他のデータ入力部品の箇所を読み資料にある通りデータ入力ページとデータ受信ページを作成せよ。作成したファイルはサーバー(localhost)経由で表示し、問題なく動作することを確認せよ。(「8.postメソッドとgetメソッド」は不要、関心がある人は個人的に各自で)
    以上の内容を踏まえて、練習問題に取り組み、指示された内容を実現せよ。
    全て終了したらチェックを受け、OKが出たら、こちらからミッションコンプリートを報告。
    報告後、XAMPPコントロールパネルでサーバーをSTOP。右下のQUITで終了(USBメモリが抜けない原因)。その後、Windowsのタスクバーから「ハードウェアを安全に取り外してメディアを取り出す」をクリック。USBメモリの「〜の取り出し」を選択。USBメモリへのアクセスが停止したら取り外す。

    ●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〜1011〜15

page top

SPONSORED LINK