1 / 139

PHP による WEB アプリの構築

PHP による WEB アプリの構築. WordPress を基礎にして. 目次： WordPress の導入 サイト構築 PHP 概論 テンプレートカスタマイズ 関数を利用してカスタマイズする データベースにアクセスする プラグインを開発する. ～ WordPress をインストールしてみよう～. 1. WordPress の導入. 1.1 CMS とは？. ■Ｃ MS （ Contents Management System ）.

toyah
Download Presentation

PHP による WEB アプリの構築

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. PHPによるWEBアプリの構築 WordPressを基礎にして

  2. 目次： • WordPressの導入 • サイト構築 • PHP概論 • テンプレートカスタマイズ • 関数を利用してカスタマイズする • データベースにアクセスする • プラグインを開発する

  3. ～WordPressをインストールしてみよう～ 1. WordPressの導入

  4. 1.1CMSとは？ ■ＣMS（Contents Management System） Webコンテンツを構成するテキストや画像、レイアウト情報などを一元的に保存・管理し、サイトを構築したり編集したりするソフトウェア。 テキストやレイアウト情報等の構成要素を分離してデータベースに保存し、サイト構築をソフトウェアで自動的に行うことができる。

  5. 1.2CMSの利用イメージ デザイン担当 テンプレート2 CMS Webページ テンプレート1 レイアウト情報 テキスト 画像 デザイン/インターフェースを設定 HTML、CSS、PHPの知識が必要 DB 画像 テキスト ・・・・・・・・・・・ ・・・・・・・・・・・ ・・・・・・・・・・・ 各コンテンツ担当 Webコンテンツ内容を 登録・保存 動画 音声 コンテンツの内容を更新 HTMLとCSSの知識が必要ない

  6. 1.3CMSを利用するメリット

  7. 1.4WordPressの特徴 • WordPress 3.2.1 （オープンソースCMS） • 　インストール、設定が簡単 • 　プラグインが充実 • 動作条件（サーバ） • PHP バージョン 5.2.4 以上 • MySQL バージョン 5.0 以上 • 運用に必要なソフトウェア（クライアント） • Webブラウザ、FTPソフト

  8. 1.5WordPressをインストール (1)WordPressをダウンロードする http://ja.wordpress.org/ ダウンロード後、ZIPファイルを展開しておく

  9. (2)MySQLにWordPress用のデータベースとユーザを作成する(2)MySQLにWordPress用のデータベースとユーザを作成する MySQL管理ツールphpMyAdmin

  10. (3)展開したWordPressフォルダをサーバへアップロードする(3)展開したWordPressフォルダをサーバへアップロードする ドキュメントルート ※サーバのhttpd.confで確認 任意のディレクトリ名で アップロード

  11. (4)設定ファイルの権限を書き込み可能に変更する(4)設定ファイルの権限を書き込み可能に変更する ・[インストールディレクトリ]/wp ・[インストールディレクトリ]/wp/wp-content

  12. (5)ブラウザでインストール場所にアクセスする(5)ブラウザでインストール場所にアクセスする http://[Webサーバのアドレス]/[WordPressのディレクトリ名]/

  13. (6)インストールを開始する

  14. (7)データベースの情報を入力する

  15. (8)インストール実行をクリックする

  16. (9)情報を入力して「WordPressをインストール」をクリックする(9)情報を入力して「WordPressをインストール」をクリックする • サイトのタイトル • ユーザー名 • パスワード • メールアドレス • 検索エンジンの表示有無

  17. (10)インストールの完了画面を確認する

  18. 1.6WordPressの設定 (1)管理画面にログインする

  19. (2)初期画面が表示される

  20. (3)管理画面が表示される

  21. ～WordPressで記事を投稿してみよう～ 2. サイト構築

  22. (1)インストール時点でのサイトを確認する

  23. (2)知の創造プロジェクトのホームページを参考にWordPressに記事を投稿していく(2)知の創造プロジェクトのホームページを参考にWordPressに記事を投稿していく 参考ホームページ：「知の創造プロジェクト」 http://www.csis.oita-u.ac.jp/PICP/index.html

  24. (3)投稿記事を確認する 投稿記事一覧を表示

  25. (4)カテゴリーを追加する • 以下のカテゴリーを追加 • ・実施プロジェクト • ・セミナー・講演会 ・参加者の声 • 「未分類」を削除

  26. (5)記事を作成する • 各カテゴリーに日付の違う記事を5件以上投稿する

  27. (6)固定ページを確認する 固定ページを 表示

  28. (7)固定ページを編集する • 以下の固定ページを作成・概要・お問い合わせ

  29. (8)ナビゲーションメニューを作成する

  30. (9)固定ページをメニューに追加する 固定ページがメニューに追加される

  31. (10)カテゴリーをメニューに追加する カテゴリーがメニューに追加される

  32. (11) メニューの項目を並び替える ドラッグ＆ドロップで簡単に並び替えができる • メニューを次の順に並べる • ①概要、②実施プロジェクト、③セミナー・講演会、④参加者の声、⑤お問い合わせ

  33. (12)表示するメニューを指定する

  34. (13)サイトの表示を確認する

  35. 3. PHP概論 ～WordPressで利用されているPHPの基本を学ぼう～

  36. 3.1PHPとは サーバサイドスクリプト言語の一つ。 HTML内にPHPスクリプトを埋め込むことができる。 処理結果に応じたHTMLを生成するので動的なWebページを表示できる。 オープンソースソフトウェア。 • PHPの特徴 • 習得が容易(C言語やJavaの記述方法に似ている) • データベースとの連携が得意 • 外部モジュールによる拡張性に優れる

  37. 3.2 PHPの処理の流れ ⑤Webブラウザは異なる内容が表示 PHPファイル Webサーバ ①ページを閲覧 HTMLファイルと 同じように見える ④HTMLを送信 ②PHPのシステムに ファイルを渡す ③処理の結果を返す クライアント PHPエンジン 見るたびに内容が異なる動的なホームぺージを 表示できる スクリプトの内容に応じて処理を行う

  38. 3.3 PHPの記述方法 【phpTest1.php】 • ファイルの拡張子を「php」にする。 • PHPスクリプトの前後を<?php～?>で囲む • 文の最後に「;」をつける • 変数は宣言をせずに使うことができる • 変数は変数名の前に$をつける • 変数名には英字や数字を使って自由につけられるが、先頭を数字にはできない • PHPの変数はデータ型の制約がない為、同じ変数に文字、整数、小数点数などを代入できる <html> <head> <title>PHP概論</title> </head> <body> PHPを使ってみよう<br/> <?php $date = date('Y/m/d H:i:s'); echo $date; ?> </body> </html> • PHPファイルをサーバへアップロードし、Webブラウザで表示させてみましょう。 URL：http://[サーバのIPアドレス]/[アップロードディレクトリ]/phpTest.php

  39. if文の使い方 基本構文　 if(条件式): 　　実行する処理; elseif(条件式): 　　実行する処理; else: 　　実行する処理; endif; <?php $hour = date('H'); echo $hour.'時です。'; if($hour<=3): echo "おやすみ"; elseif($hour<=10): echo "おはよう"; elseif($hour<=17): echo "こんにちは"; elseif($hour<=23): print "こんばんは"; else: print "おやすみ"; endif; ?> </body> </html> 【phpTest2.php】 <html> <head> <title>PHP概論(if文)</title> </head> <body> if文を使ってみよう<br/> ※右上に続く

  40. for文の使い方 基本構文　 for(開始時の処理; 繰り返しの条件式; 繰り返しごとの処理): 　　実行する処理; endfor; 【phpTest3.php】 <html> <head> <title>PHP概論(for文)</title> </head> <body> for文を使ってみよう<br/> ※右上に続く <?php //5回繰り返す for($i=0; $i<5; $i++): echo ($i+1).'回目<br/>'; endfor; ?> </body> </html> • コメントは//を最初につけるか、/**/で囲む

  41. foreach文の使い方① 基本構文　 foreach(配列 as $変数1): 　　実行する処理; endforeach; 【phpTest4.php】 <html> <head> <title>PHP概論(foreach文)</title> </head> <body> foreach文を使ってみよう1<br/> ※右上に続く <?php //配列を用意 $arr = array('Jan'=>'January', 'Feb'=>'February', 'Mar'=>'March'); foreach($arr as $value): echo $value.'<br/>'; endforeach; ?> </body> </html>

  42. foreach文の使い方② 基本構文　 foreach(配列 as $変数1=>$変数2): 　　実行する処理; endforeach; 【phpTest5.php】 <html> <head> <title>PHP概論(foreach文)</title> </head> <body> foreach文を使ってみよう2<br/> ※右上に続く <?php //配列を用意 $arr = array('Jan'=>'January', 'Feb'=>'February', 'Mar'=>'March'); foreach($arr as $key => $value): echo $key.'：'.$value.'<br/>'; endforeach; ?> </body> </html>

  43. while文の使い方 基本構文　 whie(条件式): 　　実行する処理; endwhile; 【phpTest6.php】 <html> <head> <title>PHP概論(while文)</title> </head> <body> while文を使ってみよう<br/> ※右上に続く <?php $var = 1; while($var <= 5): echo $var++.'<br/>'; endwhile; ?> </body> </html>

  44. 演習問題 次のHTMLに繰り返しを行うPHPのコードを追加して右のような年齢早見表を作成して下さい。 スタイルシートは適用してもしなくても構いません。 【phpEx.php】 <html> <head> <title>PHP演習問題</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <h1>2012年 年齢早見表</h1><br/> <table> <tr><th>西暦</th><th>年齢</th></tr> <tr><td>1985年</td><td>27歳</td></tr> </table> </body> </html>

  45. 4. テンプレートカスタマイズ ～PHPを使ってテンプレートを書き換えてみよう～

  46. 4.1 テーマの構造を理解する ■WordPressのテーマシステム サイトの表示の仕方を管理。管理画面からテーマを選択することで簡単に着せ替えが可能。ただ、見た目のデザインが変わるだけではなく、表示する内容もテーマ毎に細かく設定することができる。 ■テーマの構成 基本的なウェブページ構成はヘッダー部分、コンテンツ部分、サイドバー部分、フッター部分のテンプレートファイルで構成される。 ヘッダー コンテンツ サイドバー フッター

  47. ■テンプレート階層 TwentyTenテーマのテンプレートを確認してみましょう。 これらのテンプレートに沿って出力される

  48. トップページは「index.php」というテンプレートに基づいて出力されている。トップページは「index.php」というテンプレートに基づいて出力されている。

  49. 新規のテンプレートファイル「home.php」をサーバにアップロードして表示を確認してみましょう。新規のテンプレートファイル「home.php」をサーバにアップロードして表示を確認してみましょう。 FTPソフトで/[WordPressインストールディレクトリ]/wp-content/themes/twentyten　に中身が空のファイル「home.php」をアップロードする。※テンプレートファイルは全てこのディレクトリに格納する。 FTPソフトでhome.phpのパーミッションを書き込み権限有りに設定する。 WordPressの管理画面の左側メニューより「外観」-「テーマ編集」を選択し、「テーマの編集」画面でテンプレートの「home.php」を選択する。 home.phpに「優先順位のテスト」と入力して「ファイルの更新」ボタンをクリックする。 ブラウザでサイトを表示させる。

  50. トップページの表示が変わっている！ 各ページとテンプレートは1対1で対応しているわけではない。 home.php>index.php ・テンプレートの優先順位 「home.php」というテンプレートがあると、index.phpは使われず、home.phpが優先的に使われる。 テーマをカスタマイズする際はテンプレート階層を考慮することが大切

More Related