Web development fundamental_v2
3 likes1,981 views
Web開発について基礎から概略を説明。HTMLとはどんなモノか、CSSで何が出来るのか、JavaScriptとは？PHPとは？等を説明。Bootstrapを使って高速にWebページを開発する方法や、jQueryを用いたプログラミング、PHPとDBとを連携する方法についても解説。
Web development fundamental_v2
- 2. About Me • 熊谷卓也(@taukuma) • 宮城県出身 • 工業高校を卒業して直ぐに4年間アメリカへ留学 • バイクの免許を取って2週間後に日本一周の旅に出る • 2011年、コニカミノルタに入社 • Web屋(業務は生産現場で使うWebシステムの提案・開発・導入等) • バイク2台(ハーレーXL1200L白とエストレヤ白) • ねこ5匹 2
- 3. • HTMLの役割 Webページを作るための言語 (文章の構造や意味) • CSSの役割 Webページを作るための言語 (見た目) • JavaScriptの役割 ブラウザで表示しているものを動的にイジくったりするための言語 • PHPの役割 動的にWebページを表示するための言語(サーバー上で動く) • Ajaxの役割 動的にページの一部を変更する枠組み この資料でカバーする項目 3
- 4. アジェンダ Session 1 • Webページをデザインする ( HTML , CSS ) Session 2 • Webページを操作する ( JavaScript , jQuery ) Session 3 • 動的にWebページを表示する ( PHP ) Session 4 • ダイナミックにページの一部を変更する ( Ajax ) 4
- 5. 目的 • HTML、CSS、JavaScript、PHPの基礎を理解する • それぞれを組み合わせて、Webシステム(の一部)を構築 できる • Twitter Bootstrap、jQueryを使って、今風のカッコイイWeb ページを作る • PHPとAjaxで通信し、データベースのデータをダイナミッ クに表示できる 5
- 6. 6 Session 1 Webページをデザインする • HTML • CSS • Bootstrap
- 7. Hyper Text Markup Language 7 HTML
- 8. HTMLとは？ • HyperText Markup Languageの略 • Webページを作るための言語 (文章の構造や意味) • 開発に必要なもの • ブラウザ (Google Chrome) • テキストエディタ 8
- 9. HTML • 学習に役立つサイト • HTMLクイックリファレンス (www.htmq.com/) • W3C School - HTMLTutorials (http://www.w3schools.com/html/) • 文法チェックサービス (Validation) • W3C MarkupValidation Service (http://validator.w3.org/) 9
- 10. HTML基礎 html タグと呼ばれる、コマンドを使う。 タグはDOM (Document Object Model)要素とも呼ばれる。 基本的にページの本文はbody.../bodyの中に書く。 10
- 11. 本文bodyに使えるタグ • Headingタグ • Paragraph(文章)タグ • リンク • フォーム • リスト • テーブル • ブロック要素 11
- 17. テーブル要素( table, thead, tbody, tr, th, td ) 画面イメージhtml 17
- 18. ブロック要素( div, span ) html 18
- 19. HTMLのまとめ • Webページの構造を作る • タグ名表示する内容/タグ名が基本 • タグはネストできる • 文法に間違いがあっても、エラーが出るわけではなく、 ブラウザが勝手に解釈して勝手に表示する(レイアウト が崩れる) 19
- 21. CSSとは？ • Cascading Style Sheetsの略 • Webページを作るための言語 (見た目) • 開発に必要なもの • ブラウザ (Google Chrome) • テキストエディタ 21
- 22. CSS • 学習に役立つサイト • CSS実践講座(http://css.uka-p.com/) • W3C School - CSSTutorial (http://www.w3schools.com/css/) • 文法チェックサービス (Validation) • W3C CSSValidation Service (http://jigsaw.w3.org/css-validator/validator.html) 22
- 23. CSSを書く場所 • DOM要素のスタイル属性に直書き • head/headの中のスタイル要素内 • 外部ファイル 外部CSSファイル 23
- 27. CSSの書き方 セレクター プロパティ 値 セレクターで指定したDOM要素のプロパティに 任意のスタイル(値)を設定する mycss.css (外部CSSファイル) コロン（：） セミコロン（ ; ） 27
- 28. セレクター • すべての要素 • 同一の要素 • id (1つのドキュメント内に同じidは指定してはいけない) • クラス • ちょっと複雑なセレクター 28
- 34. いろいろ覚えると・・・ 34
- 35. 覚えておくと便利なプロパティ • margin • padding • display • position • float • clear • height • width • background • border • outline • color • font-family • font-size • font-weight • content • text-align • vertical-align • overflow 35
- 36. CSSのまとめ • Webページの「見た目」をデザイン • スタイル属性、スタイルタグ、外部CSSに書く • セレクター、プロパティ、値をセットで定義 • CSSを使いこなすにはデザインの知識が必要 (Webデザイナーという職業があるくらい奥が深い) 36
- 38. Bootstrapとは？ • Twitterが開発したCSSフレームワーク • 今時のカッコイイサイトを簡単に作れてしまう • 開発に必要なもの • ブラウザ (Google Chrome) • テキストエディタ 38
- 39. Bootstrap • 入手先 http://twitter.github.io/bootstrap/ • 公式サイト http://twitter.github.io/bootstrap/ • 学習に役立つサイト • 公式サイト(http://twitter.github.io/bootstrap/) 39
- 43. はじめてのBootstrap：コンテンツ 43 実際のコンテンツとなる部分は divで囲み、containerクラ スをセットするとmarginや paddingが丁度いい大きさで 入ってくれる
- 51. Bootstrapのまとめ • アイディアを直ぐに形にすることができる • CSSがかなり充実しているので、クラスの組み合わせ次 第で簡単に綺麗／カッコイイ、Webページをデザインで きる • jQueryや、jQuery UIなんかとも組み合わせて使える 51
- 52. 52 Session 2 Webページを操作する • JavaScript • jQuery
- 53. JavaScript 53
- 54. JavaScriptとは？ • ブラウザ上で色々な動作をさせることができる言語 • 開発に必要なもの • ブラウザ (Google Chrome) • テキストエディタ 54
- 60. 演算子 画面イメージ myjs.js(外部ファイル) 文字列の結合は + a = a+1; と同じ意味 c = c+3; と同じ意味 60
- 64. JavaScriptのまとめ • ブラウザ上で動くスクリプト言語 • Javaに似ているけれど、別物 • Webページに「動き」をつけることができる • ブラウザ間で若干挙動が違う 64
- 65. 65
- 66. jQueryとは？ • JavaScriptを便利にしてくれるライブラリ • 開発に必要なもの • ブラウザ (Google Chrome) • テキストエディタ 66
- 67. jQuery • 入手先 http://jquery.com/download/ • 公式サイト http://jquery.com/ • 学習に役立つサイト • jQuery日本語リファレンス ( http://semooh.jp/jquery/) • 本家 jQuery API Documentation (http://api.jquery.com) 67
- 73. 覚えておくと便利な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() • is() • on() • off() • length 73
- 74. jQueryのまとめ • JavaScriptのコーディングを強力に支援してくれるライブ ラリ • ほぼ、業界標準 • HTMLを横断的にいじくることができ、イベントハンド リングやアニメーションなどもAPIを通して簡単に実装 できる 74
- 75. 75 Session 3 動的にWebページを表示する • PHP • Smarty
- 77. PHPとは？ • Hypertext Preprocessor • 動的にWebページを作る、サーバー側で動作するプロ グラム • 開発に必要なもの • サーバー (Apache HTTP Server v2.2+) • PHP (PHP v5.3+) • ブラウザ (Google Chrome) • テキストエディタ 77
- 78. PHP • 入手先 • http://www.php.net のDownloadから • 公式サイト • http://www.php.net • 学習に役立つサイト • http://www.php.net/manual/ja/index.php (公式ドキュメント) • http://www.php.net/ja/introduction.php (公式チュートリアル) 78
- 89. データベース 89 • データベースによって使うモジュールが異なる • PHPがサポートしているのは、 • ADOやODBC等もサポートしている 1. MySQL 2. PostgreSQL 3. SQLite 4. Oracle OCI8 5. Microsoft SQL Server 6. IBM DB2 7. MongoDB 8. TokyoTyrant等
- 90. PostgreSQLの例 • データベースとの接続にpg_connect()を使う • SQLの実行にpg_query()を使う • 結果はpg_fetch_array()やpg_fetch_assoc()で取り出す 90
- 91. データベースに接続するWrapperクラスを作る 91 • DB_Accessというクラス名(db_access.php) • コンストラクターでDBに接続 • setQuery()という関数を作り、引数にSQLを渡すと、 SQLを実行する • getResult()という関数を作り、setQuery()で実行した select文の結果を連想配列で取得 • インスタンスの寿命でDBを切断
- 97. PHPのまとめ • Hypertext Preprocessorの略 • 汎用スクリプト言語 • サーバー側で動作し、動的にWebページを表示した り、データベースと接続したり、いろいろできる • ほとんどのOS・Webサーバーで動作でき、モジュール としてもCGIとしても使える 97
- 99. Smartyとは？ • PHPで使えるテンプレートエンジン • テンプレートを使うとモジュール化し易くなる • 開発に必要なもの • サーバー (Apache HTTP Server v2.2+) • PHP (PHP v5.3+) • ブラウザ (Google Chrome) • テキストエディタ 99
- 100. Smarty • 入手先 • http://www.smarty.net/download • 公式サイト • http://www.smarty.net • 学習に役立つサイト • http://www.smarty.net/documentation のJapaneseを選択 100
- 105. Ajax Asynchronous JavaScript + XML with jQuery and PHP 105
- 106. Ajaxとは？ • Asynchronous JavaScript + XMLの略 • クライアントとサーバーを非同期通信で接続し、 ダイナミックにページの一部を書き換える • 開発に必要なもの • サーバー (Apache HTTP Server v2.2+) • PHP (PHP v5.3+) • ブラウザ (Google Chrome) • テキストエディタ 106
- 109. Demo System 109
- 119. Ajax 演習2 ：概要(これを作りたい) クリックをすると サーバーと非同期通信を開始 サーバーと非同期通信して 外部PHPに記載されている メッセージを表示 画面イメージ 画面イメージ 119
- 122. Ajax演習2：JavaScript側 public/javascripts/myjs.js 122 #btn-ajax-test01をクリックすると ajax_post()を実行 送信するデータ
- 134. Ajax 演習4 ：実行結果 期間を入力して ボタンをクリック 非同期通信開始 サーバーと非同期通信して データベースからデータを抽出。 結果をテーブルに表示 画面イメージ 画面イメージ 134
- 135. Ajaxのまとめ • Asynchronous JavaScript +XMLのこと • Webページにリロードを行わずにJavaScriptのHTTP通信 機能を使ってサーバーとXML形式でデータをやり取り する事の総称 • jQueryの$.ajax()を使うと簡単にできる 135
- 136. END 136