0
WEBDevelopment FundamentalTakuya KumagaiMay 27-28,2013ゼロから始めるWeb開発1
アジェンダ• HTML• CSS• JavaScript• jQuery• Bootstrap• PHP• Smarty• Ajax1日目 2日目2
全体目的• HTML、CSS、JavaScript、PHPの基礎を理解する• それぞれを組み合わせて、Webシステム(の一部)を構築できる3
最終目標4この流れを理解して、自分で作れるように!
• HTMLの役割Webページを作るための言語 (文章の構造や意味)• CSSの役割Webページを作るための言語 (見た目)• JavaScriptの役割ブラウザで表示しているものを動的にイジくるための言語• PHPの役割動的にWebページを表...
1日目の目標• HTML、CSS、JavaScriptの基礎を習得• Twitter Bootstrap、jQueryを使って、今風のカッコイイWebページを作る6
2日目の目標• PHPの基礎をなんとなく把握• Smartyの構造を理解• AjaxでJavaScriptとPHPの非同期通信をできるように• データベースに格納されているデータをBootstrapっぽく表示できる7
Hyper Text Markup Language8HTML
HTMLとは?• HyperText Markup Languageの略• Webページを作るための言語 (文章の構造や意味)• 開発に必要なもの• ブラウザ (Google Chrome)• テキストエディタ9
HTML基礎htmlタグと呼ばれる、コマンドを使う。タグはDOM (Document Object Model)要素とも呼ばれる。基本的にページの本文はbody.../bodyの中に書く。10
本文bodyに使えるタグ• Headingタグ• Paragraph(文章)タグ• リンク• フォーム• テーブル• ブロック要素11
Heading要素( h1...h6 )画面イメージhtml12
Paragraph要素( p )画面イメージhtml13
リンク( a )画面イメージhtml14
フォーム(form)画面イメージhtml15
テーブル要素( table, thead, tbody, tr, th, td )画面イメージhtml 16
ブロック要素( div, span )画面イメージhtml17
CSSCascading Style Sheets18
CSSとは?• Cascading Style Sheetsの略• Webページを作るための言語 (見た目)• 開発に必要なもの• ブラウザ (Google Chrome)• テキストエディタ19
CSSを書く場所• DOM要素のスタイル属性に直書き• head/headの中のスタイル要素内• 外部ファイル外部CSSファイル20
スタイル属性( style=... )画面イメージhtmlボーダーを赤くする背景を水色にする21
スタイル要素( style)headの中に、styleタグを書いてその中にスタイルを記載html 22
外部ファイル(link)外部CSSファイルをリンクhtmlmycss.css (外部CSSファイル)23
CSSの書き方セレクタープロパティ 値セレクターで指定したDOM要素のプロパティに任意のスタイル(値)を設定するmycss.css (外部CSSファイル)コロン(:)セミコロン( ; )24
セレクター• すべての要素• 同一の要素• クラス• id• ちょっと複雑なセレクター25
セレクター:すべての要素*(アスタリスク)で全要素のセレクターになる文字の色を水色に設定画面イメージmycss.css (外部CSSファイル)26
セレクター:同一の要素要素名を指定するとWebページ上の同じ要素全てにスタイルを適用する画面イメージ背景をオレンジに設定mycss.css (外部CSSファイル)27
セレクター:クラス画面イメージhtmlクラスにスタイルを適用mycss.css (外部CSSファイル)28
セレクター:idmycss.css (外部CSSファイル)画面イメージhtmlidにスタイルを適用29
セレクター:ちょっと複雑なセレクターmycss.css (外部CSSファイル) 画面イメージhtml30
プロパティ• margin• padding• display• position• width• height• background• background-color• border• outline• float• color• font...
JavaScript32
JavaScriptとは?• ブラウザ上で色々な動作をさせることができる言語• 開発に必要なもの• ブラウザ (Google Chrome)• テキストエディタ33
初めてのJavaScript画面イメージhtmlbodyの中に、scriptタグを書いてその中にJavaScriptを記載画面にアラートメッセージを表示する34
JavaScriptを書く場所• body要素の中のscript要素内• 外部ファイルhtmlmyjs.js(外部ファイル)html35
変数とは?画面イメージmyjs.js(外部ファイル)36
データ型画面イメージmyjs.js(外部ファイル)JSON37
演算子画面イメージmyjs.js(外部ファイル)文字列の結合は +a = a+1; と同じ意味c = c+3; と同じ意味38
条件分岐(if/else, switch)画面イメージmyjs.js(外部ファイル)if/else if/elseの構文switch/caseの構文39
ループ処理(for, while)画面イメージmyjs.js(外部ファイル)forループの構文whileループの構文40
ユーザー定義関数(function)画面イメージmyjs.js(外部ファイル)ユーザー定義関数の構文function 関数名(引数)41
42
jQueryとは?• JavaScriptを便利にしてくれるライブラリ• 開発に必要なもの• ブラウザ (Google Chrome)• テキストエディタ43
書き方jQueryを読み込むセレクターjQueryで操作する対象API (色々な操作)htmlmyjs.js(外部ファイル)44
値を操作する画面イメージmyjs.js(外部ファイル)html45
CSSを操作画面イメージmyjs.js(外部ファイル)46
クリックイベント画面イメージmyjs.js(外部ファイル)クリック時にinputの値を取得して、アラートに表示47
要素を動的に追加画面イメージmyjs.js(外部ファイル)htmlクリック時に動的にtableにデータを追加48
覚えておくと便利なAPI• addClass()• removeClass()• animate()• attr()• css()• width()• height()• eq()• bind()• click()• toggle()• dbl...
Twitter Bootstrap50
Bootstrapとは?• Twitterが開発したCSSフレームワーク• 今時のカッコイイサイトを簡単に作れてしまう• 開発に必要なもの• ブラウザ (Google Chrome)• テキストエディタ51
グリッドレイアウト画面イメージhtml52
フォーム:input画面イメージhtml53
フォーム:select, check box, radio画面イメージhtmlhtmlhtml54
ボタン:大きさ、ドロップダウン画面イメージhtml画面イメージhtml55
ボタン:色とグループ化画面イメージhtml56
パンくずリスト画面イメージhtml57
Bootstrapのまとめ• アイディアを直ぐに形にすることができる• CSSがかなり充実しているので、組み合わせ次第で簡単に綺麗/カッコイイ、Webページをデザインできる• jQueryや、jQuery UIなんかとも組み合わせて使える58
PHPHypertext Preprocessor59
PHPとは?• Hypertext Preprocessor• 動的にWebページを作る、サーバー側で動作するプログラム• 開発に必要なもの• サーバー (Apache HTTP Server v2.2+)• PHP (PHP v5.3+)• ...
PHPの保存場所htdocsディレクトリの中にPHPファイルを置く。ローカル環境で試す時は、ブラウザのアドレスバーにlocalhostと入力。61
初めてのPHP画面イメージindex.phpPHPは?php...?で囲うクライアント側(ブラウザ)にデータを送信するには、echoを使う62
変数画面イメージindex.php63
データ型画面イメージindex.php文字列の中に{$変数名}を書くと変数を文字列に埋め込んでくれる64
演算子画面イメージindex.php65
条件分岐画面イメージindex.php66
ループ処理画面イメージindex.php67
関数画面イメージindex.php関数渡しはcall_user_func()を使う。引数は関数名とその関数の引数68
クラス画面イメージindex.php69
クラスの継承画面イメージindex.php70
SmartyPHP Template Engine71
Smartyとは?• PHPで使えるテンプレートエンジン• テンプレートを使うとモジュール化し易くなる• 開発に必要なもの• サーバー (Apache HTTP Server v2.2+)• PHP (PHP v5.3+)• ブラウザ (Goo...
Smartyのフォルダ構成libsにそれぞれのModelとなるPHPを置く。ユーザーは直接アクセスは出来ない。filesにSQLを記載したPHPを設置publicには画像やJavaScript、CSSを設置viewsのtemplatesにHTML...
Bootstrap on SmartyBootstrapのCSSやJavaScriptの依存関係をSmartyにあわせて変更し、publicに設置Bootstrapを利用したテンプレート(tplファイル)をviewsのtemplatesに設置i...
AjaxAsynchronous JavaScript + XML75
Ajaxとは?• Asynchronous JavaScript + XMLの略• クライアントとサーバーを非同期通信で接続し、ダイナミックにページの一部を書き換える• 開発に必要なもの• サーバー (Apache HTTP Server v2...
Ajaxを試すデモシステム77
初めてのAjax :概要(これを作りたい)クリックをするとサーバーと非同期通信を開始サーバーと非同期通信してメッセージを表示画面イメージ画面イメージ78
初めてのAjax :概要(使うファイル)79Viewviews/templates/ajax.tplJavaScriptpublic/javascripts/myjs.jsPHPrequest_handler.phphtdocs直下のreque...
初めてのAjax:View (テンプレート)側80画面イメージviews/templates/ajax.tplこのボタンがクリックされたらサーバーからメッセージを取得してAlertボックスに表示したい。
初めてのAjax:JavaScript側 概要ajax_post()関数の呼び出し方public/javascripts/common.jsajax_post()という関数を使う。category、target、opts、callbackの4つ...
初めてのAjax:JavaScript側 詳細public/javascripts/myjs.js82#btn-ajax-test01をクリックするとajax_post()を実行送信するデータ
初めてのAjax:Request Handler側 概要request_handler.php83htdocs直下のrequest_handler.phpはAjaxリクエスト(要求)の全てをハンドリング。受信したcategoryによって処理を変...
初めてのAjax:Request Handler側 詳細84request_handler.php結果として返信するデータを作る受信した要求のカテゴリーがajax_test01だった場合結果を返信
初めてのAjax:JavaScript側 詳細public/javascripts/myjs.js85requuest_handler.phpから返信があると実行される。返信されたデータdata:返信データ(JSON形式)err:エラー情報(J...
初めてのAjax :実行結果クリックをするとサーバーと非同期通信を開始サーバーと非同期通信してメッセージを表示画面イメージ画面イメージ86
Ajax 演習2 :概要(これを作りたい)クリックをするとサーバーと非同期通信を開始サーバーと非同期通信して外部PHPに記載されているメッセージを表示画面イメージ画面イメージ87
Ajax演習2 :概要(使うファイル)88Viewviews/templates/ajax.tplJavaScriptpublic/javascripts/myjs.jshtdocs直下のrequest_handler.phpから別のPHPを呼...
Ajax演習2:View (テンプレート)側89画面イメージviews/templates/ajax.tplこのボタンがクリックされたらサーバーからメッセージを取得してAlertボックスに表示したい。
Ajax演習2:JavaScript側public/javascripts/myjs.js90#btn-ajax-test01をクリックするとajax_post()を実行送信するデータ
Ajax演習2:Request Handler側91request_handler.php外部PHPファイルを読み込む受信した要求のカテゴリーがajax_test02だった場合結果を返信外部PHPに記載されているクラスのインスタンスを作成結果と...
Ajax演習2:外部PHP側92libs/ajax-test02.php getInfo()メソッドは単純に文字列をリターンするActionWrapperクラスを継承libs/actionwrapper.php
Ajax演習2:JavaScript側public/javascripts/myjs.js93requuest_handler.phpから返信があると実行される。返信されたデータdata:返信データ(JSON形式)err:エラー情報(JSON形...
Ajax 演習2 :実行結果クリックをするとサーバーと非同期通信を開始サーバーと非同期通信してメッセージを表示画面イメージ画面イメージ94
Ajax 演習4 :概要(これを作りたい)期間を入力してボタンをクリック非同期通信開始サーバーと非同期通信してデータベースからデータを抽出。結果をテーブルに表示画面イメージ画面イメージ95
Ajax演習4 :概要(使うファイル)96Viewviews/templates/ajax.tplJavaScriptpublic/javascripts/myjs.jsPHPrequest_handler.php外部PHPlibs/ajax_...
Ajax演習4:View (テンプレート)側97画面イメージviews/templates/ajax.tplこのボタンがクリックされたらinputの値をサーバーに送信。サーバーはデータベースを検索して結果を返し、画面に表示ここにテーブルを表示
Ajax演習4:JavaScript側public/javascripts/myjs.js98送信するデータinputの値を取得この値を検索条件にデータベースを検索したいのでoptsに入れて送る
Ajax演習4:Request Handler側99request_handler.php外部PHPファイルを読み込む受信した要求のカテゴリーがajax_test04だった場合結果を返信外部PHPに記載されているクラスのインスタンスを作成結果と...
Ajax演習4:外部PHP側100libs/ajax-test04.phpgetInfo()メソッドはoptsの中身を取得してsqlを読み込みデータベースを検索し、結果を返すlibs/files/sql.php
Ajax演習4:JavaScript側public/javascripts/myjs.js101返信されたデータdata:返信データ(JSON形式)err:エラー情報(JSON形式)status:ステータス(文字列)データをtableに表示でき...
Ajax 演習4 :実行結果期間を入力してボタンをクリック非同期通信開始サーバーと非同期通信してデータベースからデータを抽出。結果をテーブルに表示画面イメージ画面イメージ102
END103
Upcoming SlideShare
Loading in...5
×

Web development fundamental

566

Published on

改訂版↓
http://www.slideshare.net/taukuma/web-development-fundamentalv2-24318761

Published in: Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
566
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Web development fundamental"

  1. 1. WEBDevelopment FundamentalTakuya KumagaiMay 27-28,2013ゼロから始めるWeb開発1
  2. 2. アジェンダ• HTML• CSS• JavaScript• jQuery• Bootstrap• PHP• Smarty• Ajax1日目 2日目2
  3. 3. 全体目的• HTML、CSS、JavaScript、PHPの基礎を理解する• それぞれを組み合わせて、Webシステム(の一部)を構築できる3
  4. 4. 最終目標4この流れを理解して、自分で作れるように!
  5. 5. • HTMLの役割Webページを作るための言語 (文章の構造や意味)• CSSの役割Webページを作るための言語 (見た目)• JavaScriptの役割ブラウザで表示しているものを動的にイジくるための言語• PHPの役割動的にWebページを表示するための言語(サーバー上で動く)• Ajaxの役割動的にページの一部を変更する枠組み全体概要5
  6. 6. 1日目の目標• HTML、CSS、JavaScriptの基礎を習得• Twitter Bootstrap、jQueryを使って、今風のカッコイイWebページを作る6
  7. 7. 2日目の目標• PHPの基礎をなんとなく把握• Smartyの構造を理解• AjaxでJavaScriptとPHPの非同期通信をできるように• データベースに格納されているデータをBootstrapっぽく表示できる7
  8. 8. Hyper Text Markup Language8HTML
  9. 9. HTMLとは?• HyperText Markup Languageの略• Webページを作るための言語 (文章の構造や意味)• 開発に必要なもの• ブラウザ (Google Chrome)• テキストエディタ9
  10. 10. HTML基礎htmlタグと呼ばれる、コマンドを使う。タグはDOM (Document Object Model)要素とも呼ばれる。基本的にページの本文はbody.../bodyの中に書く。10
  11. 11. 本文bodyに使えるタグ• Headingタグ• Paragraph(文章)タグ• リンク• フォーム• テーブル• ブロック要素11
  12. 12. Heading要素( h1...h6 )画面イメージhtml12
  13. 13. Paragraph要素( p )画面イメージhtml13
  14. 14. リンク( a )画面イメージhtml14
  15. 15. フォーム(form)画面イメージhtml15
  16. 16. テーブル要素( table, thead, tbody, tr, th, td )画面イメージhtml 16
  17. 17. ブロック要素( div, span )画面イメージhtml17
  18. 18. CSSCascading Style Sheets18
  19. 19. CSSとは?• Cascading Style Sheetsの略• Webページを作るための言語 (見た目)• 開発に必要なもの• ブラウザ (Google Chrome)• テキストエディタ19
  20. 20. CSSを書く場所• DOM要素のスタイル属性に直書き• head/headの中のスタイル要素内• 外部ファイル外部CSSファイル20
  21. 21. スタイル属性( style=... )画面イメージhtmlボーダーを赤くする背景を水色にする21
  22. 22. スタイル要素( style)headの中に、styleタグを書いてその中にスタイルを記載html 22
  23. 23. 外部ファイル(link)外部CSSファイルをリンクhtmlmycss.css (外部CSSファイル)23
  24. 24. CSSの書き方セレクタープロパティ 値セレクターで指定したDOM要素のプロパティに任意のスタイル(値)を設定するmycss.css (外部CSSファイル)コロン(:)セミコロン( ; )24
  25. 25. セレクター• すべての要素• 同一の要素• クラス• id• ちょっと複雑なセレクター25
  26. 26. セレクター:すべての要素*(アスタリスク)で全要素のセレクターになる文字の色を水色に設定画面イメージmycss.css (外部CSSファイル)26
  27. 27. セレクター:同一の要素要素名を指定するとWebページ上の同じ要素全てにスタイルを適用する画面イメージ背景をオレンジに設定mycss.css (外部CSSファイル)27
  28. 28. セレクター:クラス画面イメージhtmlクラスにスタイルを適用mycss.css (外部CSSファイル)28
  29. 29. セレクター:idmycss.css (外部CSSファイル)画面イメージhtmlidにスタイルを適用29
  30. 30. セレクター:ちょっと複雑なセレクターmycss.css (外部CSSファイル) 画面イメージhtml30
  31. 31. プロパティ• margin• padding• display• position• width• height• background• background-color• border• outline• float• color• font-family• font-size• font-weight• content• text-align• overflow31
  32. 32. JavaScript32
  33. 33. JavaScriptとは?• ブラウザ上で色々な動作をさせることができる言語• 開発に必要なもの• ブラウザ (Google Chrome)• テキストエディタ33
  34. 34. 初めてのJavaScript画面イメージhtmlbodyの中に、scriptタグを書いてその中にJavaScriptを記載画面にアラートメッセージを表示する34
  35. 35. JavaScriptを書く場所• body要素の中のscript要素内• 外部ファイルhtmlmyjs.js(外部ファイル)html35
  36. 36. 変数とは?画面イメージmyjs.js(外部ファイル)36
  37. 37. データ型画面イメージmyjs.js(外部ファイル)JSON37
  38. 38. 演算子画面イメージmyjs.js(外部ファイル)文字列の結合は +a = a+1; と同じ意味c = c+3; と同じ意味38
  39. 39. 条件分岐(if/else, switch)画面イメージmyjs.js(外部ファイル)if/else if/elseの構文switch/caseの構文39
  40. 40. ループ処理(for, while)画面イメージmyjs.js(外部ファイル)forループの構文whileループの構文40
  41. 41. ユーザー定義関数(function)画面イメージmyjs.js(外部ファイル)ユーザー定義関数の構文function 関数名(引数)41
  42. 42. 42
  43. 43. jQueryとは?• JavaScriptを便利にしてくれるライブラリ• 開発に必要なもの• ブラウザ (Google Chrome)• テキストエディタ43
  44. 44. 書き方jQueryを読み込むセレクターjQueryで操作する対象API (色々な操作)htmlmyjs.js(外部ファイル)44
  45. 45. 値を操作する画面イメージmyjs.js(外部ファイル)html45
  46. 46. CSSを操作画面イメージmyjs.js(外部ファイル)46
  47. 47. クリックイベント画面イメージmyjs.js(外部ファイル)クリック時にinputの値を取得して、アラートに表示47
  48. 48. 要素を動的に追加画面イメージmyjs.js(外部ファイル)htmlクリック時に動的にtableにデータを追加48
  49. 49. 覚えておくと便利なAPI• addClass()• removeClass()• animate()• attr()• css()• width()• height()• eq()• bind()• click()• toggle()• dblclick()• hover()• hide()• show()• append()• remove()• empty()• text()• val()• html()• parent()• parents()• children()• keydown()• keypress()• keyup()• length49
  50. 50. Twitter Bootstrap50
  51. 51. Bootstrapとは?• Twitterが開発したCSSフレームワーク• 今時のカッコイイサイトを簡単に作れてしまう• 開発に必要なもの• ブラウザ (Google Chrome)• テキストエディタ51
  52. 52. グリッドレイアウト画面イメージhtml52
  53. 53. フォーム:input画面イメージhtml53
  54. 54. フォーム:select, check box, radio画面イメージhtmlhtmlhtml54
  55. 55. ボタン:大きさ、ドロップダウン画面イメージhtml画面イメージhtml55
  56. 56. ボタン:色とグループ化画面イメージhtml56
  57. 57. パンくずリスト画面イメージhtml57
  58. 58. Bootstrapのまとめ• アイディアを直ぐに形にすることができる• CSSがかなり充実しているので、組み合わせ次第で簡単に綺麗/カッコイイ、Webページをデザインできる• jQueryや、jQuery UIなんかとも組み合わせて使える58
  59. 59. PHPHypertext Preprocessor59
  60. 60. PHPとは?• Hypertext Preprocessor• 動的にWebページを作る、サーバー側で動作するプログラム• 開発に必要なもの• サーバー (Apache HTTP Server v2.2+)• PHP (PHP v5.3+)• ブラウザ (Google Chrome)• テキストエディタ60
  61. 61. PHPの保存場所htdocsディレクトリの中にPHPファイルを置く。ローカル環境で試す時は、ブラウザのアドレスバーにlocalhostと入力。61
  62. 62. 初めてのPHP画面イメージindex.phpPHPは?php...?で囲うクライアント側(ブラウザ)にデータを送信するには、echoを使う62
  63. 63. 変数画面イメージindex.php63
  64. 64. データ型画面イメージindex.php文字列の中に{$変数名}を書くと変数を文字列に埋め込んでくれる64
  65. 65. 演算子画面イメージindex.php65
  66. 66. 条件分岐画面イメージindex.php66
  67. 67. ループ処理画面イメージindex.php67
  68. 68. 関数画面イメージindex.php関数渡しはcall_user_func()を使う。引数は関数名とその関数の引数68
  69. 69. クラス画面イメージindex.php69
  70. 70. クラスの継承画面イメージindex.php70
  71. 71. SmartyPHP Template Engine71
  72. 72. Smartyとは?• PHPで使えるテンプレートエンジン• テンプレートを使うとモジュール化し易くなる• 開発に必要なもの• サーバー (Apache HTTP Server v2.2+)• PHP (PHP v5.3+)• ブラウザ (Google Chrome)• テキストエディタ72
  73. 73. Smartyのフォルダ構成libsにそれぞれのModelとなるPHPを置く。ユーザーは直接アクセスは出来ない。filesにSQLを記載したPHPを設置publicには画像やJavaScript、CSSを設置viewsのtemplatesにHTMLに変換されるtplを設置。ユーザーは直接アクセスできないどのViewを出力するかを判断するindex.phpやAjaxリクエストを扱うrequest_handler.phpはhtdocsの直下に置く73
  74. 74. Bootstrap on SmartyBootstrapのCSSやJavaScriptの依存関係をSmartyにあわせて変更し、publicに設置Bootstrapを利用したテンプレート(tplファイル)をviewsのtemplatesに設置index.phpで適切にRouteさせる74
  75. 75. AjaxAsynchronous JavaScript + XML75
  76. 76. Ajaxとは?• Asynchronous JavaScript + XMLの略• クライアントとサーバーを非同期通信で接続し、ダイナミックにページの一部を書き換える• 開発に必要なもの• サーバー (Apache HTTP Server v2.2+)• PHP (PHP v5.3+)• ブラウザ (Google Chrome)• テキストエディタ76
  77. 77. Ajaxを試すデモシステム77
  78. 78. 初めてのAjax :概要(これを作りたい)クリックをするとサーバーと非同期通信を開始サーバーと非同期通信してメッセージを表示画面イメージ画面イメージ78
  79. 79. 初めてのAjax :概要(使うファイル)79Viewviews/templates/ajax.tplJavaScriptpublic/javascripts/myjs.jsPHPrequest_handler.phphtdocs直下のrequest_handler.phpはAjaxリクエスト(要求)の全てをハンドリング。JavaScriptはクリックイベントをトリガーにAjaxでPHP側に処理を要求するViewのテンプレートは画面に表示される見た目
  80. 80. 初めてのAjax:View (テンプレート)側80画面イメージviews/templates/ajax.tplこのボタンがクリックされたらサーバーからメッセージを取得してAlertボックスに表示したい。
  81. 81. 初めてのAjax:JavaScript側 概要ajax_post()関数の呼び出し方public/javascripts/common.jsajax_post()という関数を使う。category、target、opts、callbackの4つを引数に渡すと、はじめの3つをrequest_handler.phpに送信する。request_handler.phpから結果が帰ってくるとcallback関数を実行するajax_post()をサーバーと非同期通信したいところで呼ぶ(ボタンクリック時等)81
  82. 82. 初めてのAjax:JavaScript側 詳細public/javascripts/myjs.js82#btn-ajax-test01をクリックするとajax_post()を実行送信するデータ
  83. 83. 初めてのAjax:Request Handler側 概要request_handler.php83htdocs直下のrequest_handler.phpはAjaxリクエスト(要求)の全てをハンドリング。受信したcategoryによって処理を変える。受信したデータのcategoryにあわせてこの部分に処理を書いていく受信したデータ
  84. 84. 初めてのAjax:Request Handler側 詳細84request_handler.php結果として返信するデータを作る受信した要求のカテゴリーがajax_test01だった場合結果を返信
  85. 85. 初めてのAjax:JavaScript側 詳細public/javascripts/myjs.js85requuest_handler.phpから返信があると実行される。返信されたデータdata:返信データ(JSON形式)err:エラー情報(JSON形式)status:ステータス(文字列)成功したら、Alertで返信結果を表示
  86. 86. 初めてのAjax :実行結果クリックをするとサーバーと非同期通信を開始サーバーと非同期通信してメッセージを表示画面イメージ画面イメージ86
  87. 87. Ajax 演習2 :概要(これを作りたい)クリックをするとサーバーと非同期通信を開始サーバーと非同期通信して外部PHPに記載されているメッセージを表示画面イメージ画面イメージ87
  88. 88. Ajax演習2 :概要(使うファイル)88Viewviews/templates/ajax.tplJavaScriptpublic/javascripts/myjs.jshtdocs直下のrequest_handler.phpから別のPHPを呼ぶ。(インスタンスを作ってメンバ関数を実行)PHPrequest_handler.php外部PHPlibs/ajax_test02.phpクラスが定義されてる。外部PHPファイルに処理を書くことでモジュール化
  89. 89. Ajax演習2:View (テンプレート)側89画面イメージviews/templates/ajax.tplこのボタンがクリックされたらサーバーからメッセージを取得してAlertボックスに表示したい。
  90. 90. Ajax演習2:JavaScript側public/javascripts/myjs.js90#btn-ajax-test01をクリックするとajax_post()を実行送信するデータ
  91. 91. Ajax演習2:Request Handler側91request_handler.php外部PHPファイルを読み込む受信した要求のカテゴリーがajax_test02だった場合結果を返信外部PHPに記載されているクラスのインスタンスを作成結果として返信するデータを作る(クラスのメソッドをコール)
  92. 92. Ajax演習2:外部PHP側92libs/ajax-test02.php getInfo()メソッドは単純に文字列をリターンするActionWrapperクラスを継承libs/actionwrapper.php
  93. 93. Ajax演習2:JavaScript側public/javascripts/myjs.js93requuest_handler.phpから返信があると実行される。返信されたデータdata:返信データ(JSON形式)err:エラー情報(JSON形式)status:ステータス(文字列)成功したら、Alertで返信結果を表示
  94. 94. Ajax 演習2 :実行結果クリックをするとサーバーと非同期通信を開始サーバーと非同期通信してメッセージを表示画面イメージ画面イメージ94
  95. 95. Ajax 演習4 :概要(これを作りたい)期間を入力してボタンをクリック非同期通信開始サーバーと非同期通信してデータベースからデータを抽出。結果をテーブルに表示画面イメージ画面イメージ95
  96. 96. Ajax演習4 :概要(使うファイル)96Viewviews/templates/ajax.tplJavaScriptpublic/javascripts/myjs.jsPHPrequest_handler.php外部PHPlibs/ajax_test04.phpSQLを読み込んでデータベースを検索し、結果を返信するSQLlibs/files/sql.php
  97. 97. Ajax演習4:View (テンプレート)側97画面イメージviews/templates/ajax.tplこのボタンがクリックされたらinputの値をサーバーに送信。サーバーはデータベースを検索して結果を返し、画面に表示ここにテーブルを表示
  98. 98. Ajax演習4:JavaScript側public/javascripts/myjs.js98送信するデータinputの値を取得この値を検索条件にデータベースを検索したいのでoptsに入れて送る
  99. 99. Ajax演習4:Request Handler側99request_handler.php外部PHPファイルを読み込む受信した要求のカテゴリーがajax_test04だった場合結果を返信外部PHPに記載されているクラスのインスタンスを作成結果として返信するデータを作る(クラスのメソッドをコール)
  100. 100. Ajax演習4:外部PHP側100libs/ajax-test04.phpgetInfo()メソッドはoptsの中身を取得してsqlを読み込みデータベースを検索し、結果を返すlibs/files/sql.php
  101. 101. Ajax演習4:JavaScript側public/javascripts/myjs.js101返信されたデータdata:返信データ(JSON形式)err:エラー情報(JSON形式)status:ステータス(文字列)データをtableに表示できるように文字列に変換表示区域にAppendエラー発生時は表示区域にエラーの内容を表示
  102. 102. Ajax 演習4 :実行結果期間を入力してボタンをクリック非同期通信開始サーバーと非同期通信してデータベースからデータを抽出。結果をテーブルに表示画面イメージ画面イメージ102
  103. 103. END103
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×