Ci tutorial

2,105 views

Published on

CodeIgniter's first tutorial.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,105
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Ci tutorial

  1. 1. CodeIgniter 最初の一歩 CodeIgniterが インストールできたので とりあえず Tutorialをやってみた 編
  2. 2. basic news application 最初のチュートリアルを実際に試してみます。 このチュートリアルで学ぶことは、● Model, View, Controller の基本● Routingの基本● Form Validation(妥当性の確認)● 基本的なDBクエリ
  3. 3. 目的はhttp://example.com/news/latest/10というURIにアクセスして最新のニュースを10件表示できること。
  4. 4. pagesコントローラまずページのコントローラを作ります。次のファイルを作成。application/controllers/pages.php <?php class Pages extends CI_Controller { public function view($page = home) { } }
  5. 5. テンプレート(header)● テンプレートとしてheaderを作ります。 application/views/templates/header.php<html><head> <title><?php echo $title ?> - CodeIgniter 2 Tutorial</title></head><body> <h1>CodeIgniter 2 Tutorial</h1>
  6. 6. テンプレート(footer)● テンプレートとしてfooterを作ります。 application/views/templates/footer.php<strong>&copy; 2011</strong></body></html>
  7. 7. 静的コンテンツを用意 application/views/pages/ 上記フォルダに、● home.php● about.php というファイルを作成します。 中身は適当な文章でOK。 Hello World!! とか
  8. 8. コントローラにロジック追加先のapplication/controllers/pages.phpを編集public function view($page = home){ if ( ! file_exists(application/views/pages/.$page..php)) { // Whoops, we dont have a page for that! show_404(); } $data[title] = ucfirst($page); // Capitalize the first letter $this->load->view(templates/header, $data); $this->load->view(pages/.$page, $data); $this->load->view(templates/footer, $data);}
  9. 9. 前のページの補足● ページの指定がなければhomeを表示● 指定のページがなければ404を表示● タイトルの先頭を大文字に● ヘッダを表示● 指定ページを表示● フッタを表示
  10. 10. Routingここまでの作業でページへのアクセス可能http://example.com/index.php/pages/view/about おー!! エッ 文字化け しとるやん...
  11. 11. 文字化け...orz Tutorialでは言語を意識していない いきなり日本語を使うと文字化け template(header)を修正<html lang=”ja”><head><meta charset=”utf-8”> <title><?php echo $title ?> - CodeIgniter 2 Tutorial</title></head><body> <h1>CodeIgniter 2 Tutorial</h1>
  12. 12. 文字化け対策後● headerを修正して確認 おー!! 最初から やっとけー まぁまぁ、 こんなもん 次、はよっ
  13. 13. さて、Routingの続き● application/config/routes.php Routingを編集することで、 $route[default_controller] = pages/view; $route[(:any)] = pages/view/$1;
  14. 14. Routingの続きの続きhttp://example.com/index.php/pages/view/aboutを次のように短くできます。http://bit.ly/SvEOQ8ではなくて、http://example.com/index.php/about
  15. 15. http://bit.ly/ObpOBdちなみに、このタイトルはexample.com/Routingの続きの続きの続きを短くしてみました。 すみまs(ry
  16. 16. http://bit.ly/ObpOBdちなみに、このタイトルはexample.com/Routingの続きの続きの続きを短くしてみました。 すみまs(ry
  17. 17. Coffee Break(CodeIgniterよりもInkScapeのチュートリアルが...)
  18. 18. Newsセクション Newsモデルを作ります。● application/models/news_model.php <?php class News_model extends CI_Model { public function __construct() { $this->load->database(); } }
  19. 19. その前にDB環境● application/config/database.php 適宜編集。 $db[default][hostname] = "localhost"; $db[default][username] = "root"; $db[default][password] = ""; $db[default][database] = "database_name"; $db[default][dbdriver] = "mysql"; $db[default][dbprefix] = ""; $db[default][pconnect] = TRUE; $db[default][db_debug] = FALSE; $db[default][cache_on] = FALSE; $db[default][cachedir] = ""; $db[default][char_set] = "utf8"; $db[default][dbcollat] = "utf8_general_ci"; $db[default][swap_pre] = ""; $db[default][autoinit] = TRUE; $db[default][stricton] = FALSE;
  20. 20. スキーマ(テーブル)● SQLでテーブルを作成 CREATE TABLE news ( id int(11) NOT NULL AUTO_INCREMENT, title varchar(128) NOT NULL, slug varchar(128) NOT NULL, text text NOT NULL, PRIMARY KEY (id), KEY slug (slug) );
  21. 21. phpMyAdmin● SQLを実行
  22. 22. DB参照(クエリ)● newsを取得するメソッドを追加 public function get_news($slug = FALSE) { if ($slug === FALSE) { $query = $this->db->get(news); return $query->result_array(); } $query = $this->db->get_where(news, array(slug => $slug)); return $query->row_array(); }
  23. 23. Newsの表示 Newsを表示するためのコントローラを記述● application/controllers/news.php <?php class News extends CI_Controller { public function __construct() { parent::__construct(); $this->load->model(news_model); } public function index() { $data[news] = $this->news_model->get_news(); } public function view($slug) { $data[news] = $this->news_model->get_news($slug); } }
  24. 24. 前のコントローラでは● データを取得しているだけ(表示なし)● ということで、Viewにデータを渡します。 public function index() { $data[news] = $this->news_model->get_news(); $data[title] = News archive; $this->load->view(templates/header, $data); $this->load->view(news/index, $data); $this->load->view(templates/footer); }
  25. 25. NewsのViewを作成 コントローラから渡されるデータを展開して 表示● application/views/news/index.php を作成<?php foreach ($news as $news_item): ?> <h2><?php echo $news_item[title] ?></h2> <div id="main"> <?php echo $news_item[text] ?> </div> <p><a href="news/<?php echo $news_item[slug] ?>">View article</a></p><?php endforeach ?>
  26. 26. 個別のNews表示 スラッグで個別のNewsを取得(Controller)public function view($slug){ $data[news_item] = $this->news_model->get_news($slug); if (empty($data[news_item])) { show_404(); } $data[title] = $data[news_item][title]; $this->load->view(templates/header, $data); $this->load->view(news/view, $data); $this->load->view(templates/footer);}
  27. 27. 個別のNews表示(View)● application/views/news/view.php <?php echo <h2>.$news_item[title].</h2>; echo $news_item[text];
  28. 28. News用のRouting● application/config/routes.php $route[news/(:any)] = news/view/$1; $route[news] = news; $route[(:any)] = pages/view/$1; $route[default_controller] = pages/view; http://example.com/index.php/news でアクセス可能に。
  29. 29. Newsの投稿 フォームを作ります。● application/views/news/create.php <h2>Create a news item</h2> <?php echo validation_errors(); ?> <?php echo form_open(news/create) ?> <label for="title">Title</label> <input type="input" name="title" /><br /> <label for="text">Text</label> <textarea name="text"></textarea><br /> <input type="submit" name="submit" value="Create news item" /> </form>
  30. 30. Controllerにcreate()を追加● application/controllers/news.php public function create() { $this->load->helper(form); $this->load->library(form_validation); $data[title] = Create a news item; $this->form_validation->set_rules(title, Title, required); $this->form_validation->set_rules(text, text, required); if ($this->form_validation->run() === FALSE) { $this->load->view(templates/header, $data); $this->load->view(news/create); $this->load->view(templates/footer); } else { $this->news_model->set_news(); $this->load->view(news/success); } }
  31. 31. Controllerにcreate()を追加● application/controllers/news.php public function create() { $this->load->helper(form); $this->load->library(form_validation); $data[title] = Create a news item; $this->form_validation->set_rules(title, Title, required); $this->form_validation->set_rules(text, text, required); if ($this->form_validation->run() === FALSE) { $this->load->view(templates/header, $data); $this->load->view(news/create); $this->load->view(templates/footer); } else { $this->news_model->set_news(); $this->load->view(news/success); } }
  32. 32. Successメッセージ● application/view/news/success.php 「ニュースの登録が完了しまし た。」 みたいなコンテンツ(HTML)を作成。
  33. 33. DBに登録(Modelの処理)● application/models/news_model.phpを編集 public function set_news() { $this->load->helper(url); $slug = url_title($this->input->post(title), dash, TRUE); $data = array( title => $this->input->post(title), slug => $slug, text => $this->input->post(text) ); return $this->db->insert(news, $data); }
  34. 34. ちなみに、前のhelper()● URL Helper いろいろ助けてくれます。 ここで使っているのは、● url_title() Newsのタイトルから URLに適した文字列を生成 例) This is the Title this_is_the_title
  35. 35. Routing● config/routes.php $route[news/create] = news/create; $route[news/(:any)] = news/view/$1; $route[news] = news; $route[(:any)] = pages/view/$1; $route[default_controller] = pages/view;
  36. 36. newsを表示してみる● http://mydomain/site1/index.php/news 中身はまだない
  37. 37. newsを登録● http://mydomain/site1/index.php/news/create
  38. 38. 登録結果● successのメッセージ
  39. 39. ニュースの一覧表示Backボタンで戻ったらブラウザの再読み込みで...
  40. 40. 記事が重複...
  41. 41. しかもslugが空タイトルを全角文字にしたのがよろしくなかったようで
  42. 42. タイトルを半角に● 一覧はOK
  43. 43. View article● /site1/index.php/news/news-title-test slugは機能していた
  44. 44. 作業環境
  45. 45. お世話になりました
  46. 46. 以上ですご清聴に感謝します。 m(__)m

×