制作技術ー4 アクセスカウンタ等付加機能 PHP と Javascript

Slides:



Advertisements
Similar presentations
コンピュータ基礎実習 ( 上級 ) 第七回 CGI の利用 清水淳紀. はじめに  本講義のテーマ  ホームページで良く利用される CGI ( シージーアイ ) について学びます。  CGI とは何か  CGI の基礎知識  CGI をサーバーにインストールする  CGI を実行してみる.
Advertisements

情報アプリケーション1 2006 年 10 月 12 日 第四回資料 担当 重定 如彦. 目次 データの送信とフォーム クイズ CGI 複数のパーツのデータの分割方法 配列変数.
1 PHP プログラムの実行(まと め) 担当 岡村耕二 月曜日 2限 平成 22 年度 情報科学 III (理系コア科目・2年生) 本資料の一部は、堀良彰准教授、天野浩文准教授、菅沼明 准教授等による以前の講義資料をもとにしています。
ウェブページビルダーマニュアル 株式会社 SOIYAA.
ASP入門 - Windows 2000 Server 活用 -.
インターネット技術特論 D:SSI,PHP,eRuby 山口 実靖
画像展示サイト“Fragments” 『閲覧しやすさ』と『デザイン性』を両立させた Webデザイン
1 インストール・起動する 「SQS」で検索 SQSホームページ 動作環境 JavaSE 6以上 (JRE6)
らくらく学校連絡網 スライドショーで見る操作ガイド -3- 登録 抜粋-管理者作業 escで中断、リターンキーで進みます
Imagio カンタン文書登録V2 画面シミュレーション.
ウェブページ制作の基礎 タグの直接入力によるウェブページの制作 次のスライドへ進んだり,戻ったりしたい時は,右下のボタンをクリック。 次へ.
心理学情報処理法Ⅰ やってみよう:Wordの起動.
売れるためのWEBサイト構築.
CSSを利用したWebデザイン 理工学部 情報学科 3回生 喜多 亮輔.
Servlet入門(2) 入力フォームをつかったWebアプリ
ホームページの作り方.
情報理工学部 情報システム工学科 4年 H 亀窪祐太 H 纐纈琢真
Webコミュニケーショングループ ~PHPの基礎~ M1 宮崎 真.
心理学情報処理法Ⅰ やってみよう:Excelを使ってみよう.
PHP 実用的なサンプル 浅川 和久 2017/3/18 PHP 実用的なサンプル.
佐賀大学 理工学部知能情報システム学科 講師 大月 美佳
§3.3 プログラミング 第10回 今日の目標 高級言語のプログラムを実行するまでの過程を示せる インタープリタの仕組みを説明できる
Bottle/Pythonによる Webアプリ入門
PHP プログラムの実行 担当 岡村耕二 月曜日 2限 平成22年度 情報科学III (理系コア科目・2年生)
4-3.基本的なPHPスクリプト 2004年6月24日(木) 大北高広 01T6010F.
PHP プログラムの実行 担当 岡村耕二 月曜日 2限 平成20年度 情報科学III (理系コア科目・2年生)
12月11日(土) 13:00~15:00 長崎大学教育学部 全炳徳 久方純
Webコミュニケーショングループ ~CGI勉強会~ (データーベース編)
アプリケーション共有機能 〈参考〉 (図1) (図2)
WebCluster スライドショーで見る操作ガイド
平成22年度に実施を予定するインターネットを 用いた研修システムによる研修 ライブ配信受講手順書
JQueryでAjax 藤田@ジャストプレイヤー ※参考しまくり文献 jQuery日本語リファレンス.
情報アプリケーション1 2008年 12月 3日 第四回資料 担当 重定 如彦 .
HTTPプロトコル J2EE I 第7回 /
Servlet入門(2) 入力フォームをつかったWebアプリ
データベース設計 第9回 Webインタフェースの作成(1)
情報アプリケーション1 2006年 10月 5日 第三回資料 担当 重定 如彦 .
第8章 Web技術とセキュリティ   岡本 好未.
§3.3 プログラミング 第10回 今日の目標 高級言語のプログラムを実行するまでの過程を示せる インタープリタの仕組みを説明できる
ガジェット・マスターへの まわり道!? ~Ajaxを理解しよう~
対応可否 スキル一覧 株式会社エージェント 2015年10月7日 Ver.1.0.
情報スキル活用 第7週 制作技術-1 情報の記述と画面のデザイン.
情報スキル活用  第5週 基礎技術-5  その2 : 他のページへのリンク.
制作技術ー3 双方向通信 : CGIシステムと環境変数
情報スキル活用 第8週 制作技術-2 画面の分割.
単語登録(1) ◎MS-IMEの「単語登録」に、単語、語句、記号など自分がよく使うものを登録しておくと、便利である。
情報スキル活用 第1週 基礎技術ー1 : URLとWebページの基本.
情報スキル活用  第5週 基礎技術-5   その3 : 画像表示.
情報スキル活用  第6週    基礎技術のまとめ  復習.
情報アプリケーション1 2006年 10月 19日 第四回資料 担当 重定 如彦 .
情報スキル活用 第3週 基礎技術ー3 : 学部・学科紹介のページ作成.
日本郵便 「Web-EDI」利用ガイド (JP EDIシステム)
情報スキル活用 第2週 基礎技術ー2 : Webページの基本形.
情報スキル活用 第4週 基礎技術-4 : その1(タグのまとめ).
Htmlの基本.
コンピュータ プレゼンテーション.
ウェッブページ書法の復習 ネットワーク論以前のお話.
情報コミュニケーション入門b 第11回 Web入門(2)
情報処理 第7回:Wordを用いた文書の作成 その2 June. 9, 2017.
情報コミュニケーション入門e 第12回 Part1 Web入門(2)
ファイルの読み込み #!/usr/bin/env perl #Perlスクリプトの指定 open(FILE, "food.txt");
Webアプリケーションと JSPの基本 ソフトウェア特論 第4回.
Webページに動きを持たせるJavascript言語について 例題のプログラムを通して体験的に理解することとします。
情報コミュニケーション入門e 第12回 Part1 Web入門(2)
第14回放送授業.
単語登録(1) ◎MS-IMEの「単語登録」に、単語、語句、記号など自分がよく使うものを登録しておくと、便利である。
例題のプログラムを通して JavaScriptの仕組みを理解することとします。
情報スキル活用 第6週 制作技術-1 情報の記述と画面のデザイン.
情報スキル活用 第1週    ガイダンス.
情報スキル活用 第1週 基礎技術ー1 : URLとWebページの基本.
Presentation transcript:

制作技術ー4 アクセスカウンタ等付加機能 PHP と Javascript 情報スキル活用  第11週 制作技術ー4 アクセスカウンタ等付加機能 PHP と Javascript

クライアントとサーバーとの間の双方向通信の考え方 (復習) クライアントとサーバーとの間の双方向通信の考え方 (復習) クライアント サーバー 閲覧ソフトから URLを送信して <html>から</html>までを取出し Webページとして表示 HTML文書返信 この中に入力要求があれば データ入力 データ送信(cgi) データ受取 処理 Perl 言語 PHP言語 処理結果 (HTML文書) 応答内容表示 入力に対する応答

① <a href="cgi_test.html">cgi起動テスト</a> データの引渡し cgi_test.html ② <form action="../cgi/cgi_test.cgi"> <input type="submit" name="button" value="起動確認" /> ③ http://www.isc.chubu.ac.jp/pj15***/cgi/cgi_test.cgi?button=%8BN%93%AE%8Am%94F

アンケート調査(いろいろな入力形式の例) このアンケート調査のHTMLとcgiを圧縮ファイルで「配布資料」欄に掲載しているのでダウンロードし、各自のWebページに組み込みなさい。

アンケート調査のHTML文書 <!DOCTYPE html> <html> <head> <title>アンケート調査</title> <link rel="stylesheet" href="poll.css" type="text/css" media="screen" /> </head> <body> <h3>アンケート調査</h3> <p>あなたのお名前を入力して送信してください.</p> <form action="http://www2.isc.chubu.ac.jp/jc/miyahara/cgi/poll.cgi" /> お名前 : <input type="text" name="namae" /><br /><br /> 性 別 : <input type="radio" name="seibetu" value="男" />男 <input type="radio" name="seibetu" value="女" />女<br /><br /> 趣 味 : <input type="checkbox" name="v1" value="旅行" />旅行 <input type="checkbox" name="v2" value="読書" />読書 <input type="checkbox" name="v3" value="音楽" />音楽 <input type="checkbox" name="v3" value="スポーツ" />スポーツ <input type="checkbox" name="v3" value="その他" />その他<br /><br /> 出身県 : <select name="pref"> <option value="未入">県選択</option> <option value="愛知">愛知県</option> <option value="岐阜">岐阜県</option> <option value="三重">三重県</option> <option value="静岡">静岡県</option> <option value="以外">その他</option> </select><br /><br /> <input type="submit" name="submit" value="送信" /> <input type="reset" name="reset" value="取消" /> </form> </body></html>

アンケート調査のcgi(Perl) #!/usr/bin/perl # open(LOGFILE,">>poll.txt"); #アンケート調査 if ($ENV{'REQUEST_METHOD'} eq POST) { $len = $ENV{'CONTENT_LENGTH'}; read(STDIN, $buffer, $len); } else { $buffer = $ENV{'QUERY_STRING'}; #フォームに入力された値を分解し、復元する @pairs = split(/&/,$buffer); foreach $pair(@pairs){ ($name,$value) = split(/=/,$pair); $value =~ tr/+/ /; $value =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C",hex($1))/eg; $hozon{$name} = $value; $w1=$hozon{"namae"}; $w2=$hozon{"seibetu"}; $w3=$hozon{"v1"}; $w4=$hozon{"v2"}; $w5=$hozon{"v3"}; $w6=$hozon{"v4"}; $w7=$hozon{"v5"}; open(LOGFILE,">>poll.txt"); print LOGFILE "$w1\,$w2\,$w3\,$w4\,$w5\,$w6\,$w7\,$w8\,"; ($sec,$min,$hour,$day,$mon,$year) = localtime(time); $year += 1900; $mon += 1; print LOGFILE "$year\/$mon\/$day\,$hour\:$min\:$sec\,"; print LOGFILE "$ENV{'REMOTE_HOST'}\,"; print LOGFILE "$ENV{'REMOTE_ADDR'}\n"; close(LOGFILE); print "Content-type: text/html\n\n"; print "<html>\n"; print "<head>\n"; print "<TITLE>Thank You!</TITLE>\n"; print "</head>\n"; print "<body>\n"; print "<br /><br />"; print "<p>$w1さん ご回答ありがとうございましたm(_ _)m</p>"; print "</body></html>\n"; exit (0);

入力形式一覧 入力形式指定 <input type="****" name="++++" value"####" /> text : 文字列入力 氏名 radio : 択一 男女 checkbox : 複数選択 趣味 submit : 送信 送信ボタン reset : リセット リセットボタン 一覧から選択 <select name="++++"> 出身県 <option value="値1">見出し1</option>  県名1 <option value="値2">見出し2</option>  県名2 <option value=" : ">  :  </option> <option value="値n">見出しn</option> </select>

中央画面の</div>の前に 次のスライドの内容を追加 ファイル名を index.php で保存 アクセスカウンターの設定(本日の作業) 準備  トップページをエディターに取り出し 中央画面の</div>の前に  次のスライドの内容を追加 ファイル名を index.php で保存 count.txtファイルを作り  初期値    0  書込み権 を ON PHPを使ったHTMLのファイルは 拡張子を「.php」とする。 閲覧ソフトでは.phpファイルを 直接実行することはできません。 ですから、PHPを使ったHTMLの動作確認は、そのファイルをサーバーにアップロードしてからアクセスしなければなりません。

アクセスをカウントするPHPプログラムの追加 <div class="right"> 文章 </div> <?php $fp=fopen("count.txt","r+"); $count=fgets($fp,10); $count=$count+1; fseek($fp,0); fputs($fp,$count); fclose($fp); ?> あなたは<b> echo $count; </b>人目の来訪者です。

PHPプログラムはHTML文書の中に組み込みます。 <?php から : ?> まで の内部がPHPの文です。  : ?> まで の内部がPHPの文です。 複数の箇所の記載されても情報(データ)は継続します。 PHPの文

アクセスをカウントするPHPプログラムの説明 $fp=fopen("count.txt","r+"); ① ファイルを開き $count=fgets($fp,10); ② 文字列を取り出し数値化し $count=$count+1; ③ それに「1」を加え fseek($fp,0); ④ 記録場所を探し fputs($fp,$count); ⑤ そこへ記録して fclose($fp); ⑥ ファイルを閉じる ?> あなたは<b> この行は HTML です。 echo $count ; ⑦ $countの値を出力する </b>人目の来訪者です。 この行は HTML です。

PHPによるアクセスカウンター