SlideShare a Scribd company logo
1 of 42
Download to read offline
サーバーサイド
Webプログラミング入門

  システム工房コルン
    今村安伸
みなさん
サイト作ってますか?
● HTML
● CSS


表示するだけ。
● Java Script
● Java Applet
● Flash
● Silverlight

ブラウザ上で色々動く!
● CGI
● PHP
● Java Servlet
● ASP.NET

これって必要?
ブラウザ上のプログラムで
 なぜ代用できない?
双方向性


● 利用者と運営
● 利用者と利用者

この実現に、サーバーは必須。
汎用のDBサーバーで
なぜ代用できない?
ブラウザ上のプログラムは
 (容易に)改ざん可能
セキュリティの問題点

● データ整合性の保証がない
● 権限を管理できない
● 機密データを保護できない
サーバーサイドは
 (容易には)
改ざんできない!
逆説的には……

● データ整合性の保証
● 権限の管理
● 機密データの保護

これ以外は
ブラウザ上でやってよい
MVCモデル(1)

● M … モデル
  ○ 実際の処理
● V … ビュー
  ○ ユーザへの表示
● C … コントローラ
  ○ MとVを繋ぐ
MVCモデル(2)

● 実際の処理
  ○ サーバーサイド
● ユーザへの表示
  ○ ブラウザサイド

サーバーサイドはMが主役
お品書き

● ルーティング
● テンプレートビュー
● アクセス制御リスト
● データベース連携
ルーティング
Httpdの仕事(1)

● リクエスト
  ○ http://example.com/hoge.txt
● レスポンス
  ○ c:¥example¥hoge.txt
Httpdの仕事(2)

● リクエスト
  ○ http://example.com/fuga.jpg
● レスポンス
  ○ c:¥example¥fuga.jpg
Httpdの仕事(3)

● リクエスト
  ○ http://example.com/
● レスポンス
  ○ c:¥example¥index.html
ここで行われていること

● ビュー
  ○ 対応するファイル自体
● コントローラ
  ○ リクエストを受ける
  ○ 対応するファイルを返す
Httpdの仕事(4)

● リクエスト
  ○ http://example.com/foo.cgi
● レスポンス
  ○ c:¥example¥foo.cgi
  ○ …を実行
  ○ その結果を返す
Httpdの仕事(5)

● リクエスト
  ○ http://example.com/bar.php
● レスポンス
  ○ c:¥example¥bar.php
  ○ …をPHPで実行
  ○ その結果を返す
ここで行われていること

● ビュー
  ○ ファイルの実行結果
● コントローラ
  ○ 対応するファイルを実行
  ○ 実行結果を返す
リクエストを元に
誰を呼ぶか決めるのが
   ルーティング
Httpd標準機能の制約

● リクエスト≒ファイルアドレス

● IDなどをリクエストに含める
  ○ http://example.com/?id=123
● 以下はできない
  ○ http://example.com/123
標準機能がダメなら
拡張プログラムで対応
 →フレームワーク化
拡張ルーター(1)

● ルーティングルール
  ○ どんなリクエストを
  ○ どのコントローラに

ルールは設定ファイル等で管理
拡張ルーター(2)

● http://example.com/123
  ○ "123"の部分は
  ○ パラメータとして認識

設定次第で可能
(拡張ルーターが対応してれば)
テンプレートビュー
printf("<!doctype html>¥n");
printf("<html>¥n");
printf("<head>¥n");
printf("<title>%s</title>¥n", title);
printf("</head>¥n");
printf("<body>¥n");
:
:
:
:
:

こんなこと、やりたくない
printf("%s",
   html().add(
      head().add(
        title(nowTitle)
      )
   ).add(
      body().add(
        ...
      )
   ).toString()
);

これもヤダ!
プログラムで
HTMLを生成すると
  色々と大変
そこでPHP(1)

<!doctype html>
<html>
  <head>
     <title><?php echo $title; ?></title>
  </head>
  <body>
     :
     :
  </body>
</html>

これならまだマシ。
そこでPHP(2)

<ul>
<?php foreach($list as $item) { ?>
  <li><?php echo $item; ?></li>
<? } ?>
</ul>


……少し、見辛いかな。
そこでPHP(3)

<ul>
<?php
$result = mysql_query('SELECT id, name FROM xxx');
while($item = mysql_fetch_assoc($result)) { ?>
  <li><?php echo $item['name']; ?></li>
<? } ?>
</ul>


htmlも見辛い!
処理も見辛い!
ビューとロジックは
  分けよう!
役割分担

● ロジック
  ○ 必要なデータを用意
● テンプレートビュー
  ○ 用意されたデータを
    テンプレートに当てはめ
    表示するだけ!
ファイルの役割分担
 =担当者の役割分担

デザイナーさんが助かる!
テンプレートエンジン(Smarty)

<ul>
 {foreach from=$list item=item}
   <li>{$item}</li>
 {/foreach}
</ul>

これなら見やすい。

色々なエンジンがある。
お品書き

● ルーティング
● テンプレートビュー
● アクセス制御リスト
● データベース連携

分量的に無理でした。 おしまい

More Related Content

What's hot

Grid application テンプレートを紐解く
Grid application テンプレートを紐解くGrid application テンプレートを紐解く
Grid application テンプレートを紐解くKazuhide Maruyama
 
Javascriptのあれやこれやをまとめて説明してみる
Javascriptのあれやこれやをまとめて説明してみるJavascriptのあれやこれやをまとめて説明してみる
Javascriptのあれやこれやをまとめて説明してみるShunji Konishi
 
まだDOM操作で消耗してるの?
まだDOM操作で消耗してるの?まだDOM操作で消耗してるの?
まだDOM操作で消耗してるの?IRI MO
 
Hijax - 少しずつAjaxへ
Hijax - 少しずつAjaxへHijax - 少しずつAjaxへ
Hijax - 少しずつAjaxへYi Gu
 
Windows ストアアプリのgrid viewを入門してみた
Windows ストアアプリのgrid viewを入門してみたWindows ストアアプリのgrid viewを入門してみた
Windows ストアアプリのgrid viewを入門してみた一希 大田
 
WordPressのテストとデバッグ方法
WordPressのテストとデバッグ方法WordPressのテストとデバッグ方法
WordPressのテストとデバッグ方法Tsuyoshi.
 
jQuery Performance Tips – jQueryにおける高速化 -
jQuery Performance Tips – jQueryにおける高速化 -jQuery Performance Tips – jQueryにおける高速化 -
jQuery Performance Tips – jQueryにおける高速化 -Hayato Mizuno
 
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話Akira Inoue
 

What's hot (11)

Grid application テンプレートを紐解く
Grid application テンプレートを紐解くGrid application テンプレートを紐解く
Grid application テンプレートを紐解く
 
Javascriptのあれやこれやをまとめて説明してみる
Javascriptのあれやこれやをまとめて説明してみるJavascriptのあれやこれやをまとめて説明してみる
Javascriptのあれやこれやをまとめて説明してみる
 
まだDOM操作で消耗してるの?
まだDOM操作で消耗してるの?まだDOM操作で消耗してるの?
まだDOM操作で消耗してるの?
 
Hijax - 少しずつAjaxへ
Hijax - 少しずつAjaxへHijax - 少しずつAjaxへ
Hijax - 少しずつAjaxへ
 
Windows ストアアプリのgrid viewを入門してみた
Windows ストアアプリのgrid viewを入門してみたWindows ストアアプリのgrid viewを入門してみた
Windows ストアアプリのgrid viewを入門してみた
 
ServerSideJavaScript
ServerSideJavaScriptServerSideJavaScript
ServerSideJavaScript
 
WordPressのテストとデバッグ方法
WordPressのテストとデバッグ方法WordPressのテストとデバッグ方法
WordPressのテストとデバッグ方法
 
jQuery Performance Tips – jQueryにおける高速化 -
jQuery Performance Tips – jQueryにおける高速化 -jQuery Performance Tips – jQueryにおける高速化 -
jQuery Performance Tips – jQueryにおける高速化 -
 
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
 
Antのススメ
AntのススメAntのススメ
Antのススメ
 
densan2014-late01
densan2014-late01densan2014-late01
densan2014-late01
 

Viewers also liked

デバイス WebAPIによるスマートフォン周辺デバイスの活用
デバイス WebAPIによるスマートフォン周辺デバイスの活用デバイス WebAPIによるスマートフォン周辺デバイスの活用
デバイス WebAPIによるスマートフォン周辺デバイスの活用Device WebAPI Consortium
 
Webプログラミング入門
Webプログラミング入門Webプログラミング入門
Webプログラミング入門Tsuyoshi Kiryu
 
PHP基礎勉強会
PHP基礎勉強会PHP基礎勉強会
PHP基礎勉強会Yuji Otani
 
Webの仕組みとプログラミング言語
Webの仕組みとプログラミング言語Webの仕組みとプログラミング言語
Webの仕組みとプログラミング言語Yossy Taka
 
PHP初心者に贈る、まちがえないPHPの始め方・学び方
PHP初心者に贈る、まちがえないPHPの始め方・学び方PHP初心者に贈る、まちがえないPHPの始め方・学び方
PHP初心者に贈る、まちがえないPHPの始め方・学び方Hiroyuki Sugimoto
 
第4回 PHPのおさらい
第4回 PHPのおさらい第4回 PHPのおさらい
第4回 PHPのおさらいSawada Makoto
 
Webシステムプログラミング20150413
Webシステムプログラミング20150413Webシステムプログラミング20150413
Webシステムプログラミング20150413義広 河野
 
QAサイトをつくってみよう
QAサイトをつくってみようQAサイトをつくってみよう
QAサイトをつくってみようSawada Makoto
 
40分濃縮 PHP classの教室
40分濃縮 PHP classの教室40分濃縮 PHP classの教室
40分濃縮 PHP classの教室Yusuke Ando
 

Viewers also liked (9)

デバイス WebAPIによるスマートフォン周辺デバイスの活用
デバイス WebAPIによるスマートフォン周辺デバイスの活用デバイス WebAPIによるスマートフォン周辺デバイスの活用
デバイス WebAPIによるスマートフォン周辺デバイスの活用
 
Webプログラミング入門
Webプログラミング入門Webプログラミング入門
Webプログラミング入門
 
PHP基礎勉強会
PHP基礎勉強会PHP基礎勉強会
PHP基礎勉強会
 
Webの仕組みとプログラミング言語
Webの仕組みとプログラミング言語Webの仕組みとプログラミング言語
Webの仕組みとプログラミング言語
 
PHP初心者に贈る、まちがえないPHPの始め方・学び方
PHP初心者に贈る、まちがえないPHPの始め方・学び方PHP初心者に贈る、まちがえないPHPの始め方・学び方
PHP初心者に贈る、まちがえないPHPの始め方・学び方
 
第4回 PHPのおさらい
第4回 PHPのおさらい第4回 PHPのおさらい
第4回 PHPのおさらい
 
Webシステムプログラミング20150413
Webシステムプログラミング20150413Webシステムプログラミング20150413
Webシステムプログラミング20150413
 
QAサイトをつくってみよう
QAサイトをつくってみようQAサイトをつくってみよう
QAサイトをつくってみよう
 
40分濃縮 PHP classの教室
40分濃縮 PHP classの教室40分濃縮 PHP classの教室
40分濃縮 PHP classの教室
 

Similar to Web programming introduction

「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップYasuhito Yabe
 
TreeFrog Frameworkの紹介
TreeFrog Frameworkの紹介TreeFrog Frameworkの紹介
TreeFrog Frameworkの紹介ao27
 
アプリコンテスト
アプリコンテストアプリコンテスト
アプリコンテストTomonori Yamada
 
Java fx勉強会lt 第8回
Java fx勉強会lt 第8回Java fx勉強会lt 第8回
Java fx勉強会lt 第8回Taiji Miyabe
 
FuelPHP Osu Nagoya vol.1
FuelPHP Osu Nagoya vol.1FuelPHP Osu Nagoya vol.1
FuelPHP Osu Nagoya vol.1Fumito Mizuno
 
WTM53 phpフレームワーク いまさらcodeigniter
WTM53 phpフレームワーク いまさらcodeigniterWTM53 phpフレームワーク いまさらcodeigniter
WTM53 phpフレームワーク いまさらcodeigniterMasanori Oobayashi
 
泥臭い運用から、プログラマブルインフラ構築(に行きたい)
泥臭い運用から、プログラマブルインフラ構築(に行きたい) 泥臭い運用から、プログラマブルインフラ構築(に行きたい)
泥臭い運用から、プログラマブルインフラ構築(に行きたい) Akihiro Kuwano
 
アドテク×Scala×パフォーマンスチューニング
アドテク×Scala×パフォーマンスチューニングアドテク×Scala×パフォーマンスチューニング
アドテク×Scala×パフォーマンスチューニングYosuke Mizutani
 
ASP.NET シングル ページ アプリケーション (SPA) 詳説
ASP.NET シングル ページ アプリケーション (SPA) 詳説ASP.NET シングル ページ アプリケーション (SPA) 詳説
ASP.NET シングル ページ アプリケーション (SPA) 詳説Akira Inoue
 
イマドキのフロントエンドエンジニアの道具箱
イマドキのフロントエンドエンジニアの道具箱イマドキのフロントエンドエンジニアの道具箱
イマドキのフロントエンドエンジニアの道具箱Fumio SAGAWA
 
YAPC::Asia 2008 Tokyo - Pathtraq - building a computation-centric web service
YAPC::Asia 2008 Tokyo - Pathtraq - building a computation-centric web serviceYAPC::Asia 2008 Tokyo - Pathtraq - building a computation-centric web service
YAPC::Asia 2008 Tokyo - Pathtraq - building a computation-centric web serviceKazuho Oku
 
Chrome DevTools.next
Chrome DevTools.nextChrome DevTools.next
Chrome DevTools.nextyoshikawa_t
 
サーバーレスの今とこれから
サーバーレスの今とこれからサーバーレスの今とこれから
サーバーレスの今とこれから真吾 吉田
 
MTのダイナミック処理(PHP)を高速化する@サーバーサイドスクリプティング
MTのダイナミック処理(PHP)を高速化する@サーバーサイドスクリプティングMTのダイナミック処理(PHP)を高速化する@サーバーサイドスクリプティング
MTのダイナミック処理(PHP)を高速化する@サーバーサイドスクリプティング純生 野田
 
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5Sho Ito
 
企業におけるSpring@日本springユーザー会20090624
企業におけるSpring@日本springユーザー会20090624企業におけるSpring@日本springユーザー会20090624
企業におけるSpring@日本springユーザー会20090624Yusuke Suzuki
 
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~normalian
 

Similar to Web programming introduction (20)

「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
 
TreeFrog Frameworkの紹介
TreeFrog Frameworkの紹介TreeFrog Frameworkの紹介
TreeFrog Frameworkの紹介
 
アプリコンテスト
アプリコンテストアプリコンテスト
アプリコンテスト
 
Java fx勉強会lt 第8回
Java fx勉強会lt 第8回Java fx勉強会lt 第8回
Java fx勉強会lt 第8回
 
FuelPHP Osu Nagoya vol.1
FuelPHP Osu Nagoya vol.1FuelPHP Osu Nagoya vol.1
FuelPHP Osu Nagoya vol.1
 
WTM53 phpフレームワーク いまさらcodeigniter
WTM53 phpフレームワーク いまさらcodeigniterWTM53 phpフレームワーク いまさらcodeigniter
WTM53 phpフレームワーク いまさらcodeigniter
 
泥臭い運用から、プログラマブルインフラ構築(に行きたい)
泥臭い運用から、プログラマブルインフラ構築(に行きたい) 泥臭い運用から、プログラマブルインフラ構築(に行きたい)
泥臭い運用から、プログラマブルインフラ構築(に行きたい)
 
アドテク×Scala×パフォーマンスチューニング
アドテク×Scala×パフォーマンスチューニングアドテク×Scala×パフォーマンスチューニング
アドテク×Scala×パフォーマンスチューニング
 
ASP.NET シングル ページ アプリケーション (SPA) 詳説
ASP.NET シングル ページ アプリケーション (SPA) 詳説ASP.NET シングル ページ アプリケーション (SPA) 詳説
ASP.NET シングル ページ アプリケーション (SPA) 詳説
 
G0042 h
G0042 hG0042 h
G0042 h
 
Using Windows Azure
Using Windows AzureUsing Windows Azure
Using Windows Azure
 
イマドキのフロントエンドエンジニアの道具箱
イマドキのフロントエンドエンジニアの道具箱イマドキのフロントエンドエンジニアの道具箱
イマドキのフロントエンドエンジニアの道具箱
 
YAPC::Asia 2008 Tokyo - Pathtraq - building a computation-centric web service
YAPC::Asia 2008 Tokyo - Pathtraq - building a computation-centric web serviceYAPC::Asia 2008 Tokyo - Pathtraq - building a computation-centric web service
YAPC::Asia 2008 Tokyo - Pathtraq - building a computation-centric web service
 
Chrome DevTools.next
Chrome DevTools.nextChrome DevTools.next
Chrome DevTools.next
 
Djangoのススメ
DjangoのススメDjangoのススメ
Djangoのススメ
 
サーバーレスの今とこれから
サーバーレスの今とこれからサーバーレスの今とこれから
サーバーレスの今とこれから
 
MTのダイナミック処理(PHP)を高速化する@サーバーサイドスクリプティング
MTのダイナミック処理(PHP)を高速化する@サーバーサイドスクリプティングMTのダイナミック処理(PHP)を高速化する@サーバーサイドスクリプティング
MTのダイナミック処理(PHP)を高速化する@サーバーサイドスクリプティング
 
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5
 
企業におけるSpring@日本springユーザー会20090624
企業におけるSpring@日本springユーザー会20090624企業におけるSpring@日本springユーザー会20090624
企業におけるSpring@日本springユーザー会20090624
 
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
 

Web programming introduction