Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
QAサイトをつくってみよう!
AlphabetBootCamp
QAサイトをつくろう
ABCもいよいよ第5回を迎え、ついに終盤!
後半はTwitterモドキQAサイトをつくっていきます!!!
(Twitterモドキで告知されていた方、ごめんなさい!)
なぜQAサイト?
 データの取得/追加/更新/削除(CRUD)が網羅されている
⇒入門本の最後は掲示板やECサイト、ブログの作成が多い理由も同じ
どんなに複雑なシステムも、基本的には上の4つから成り立つ!
4つマスターすれば、明日からでもプロ...
QAサイトでできること
以下ができることを要件とする。
 ユーザ登録ができること
 ログインができること
 質問の一覧が検索することができること
 質問を投稿することができること
 質問に対する回答を投稿できること
 質問に対する回...
画面紹介 – ユーザ登録
概要
ユーザの登録を行うページ
ユーザの登録に必要な情報
– 名前
– メールアドレス
– パスワード
画面紹介 – ログイン
概要
ログインを行うページ
メールアドレスとパスワード
を入力し、ともに保存されて
いる情報と一致するユーザが
存在する場合のみログイン可
能
画面紹介 - 質問一覧
概要
質問の一覧ページ
質問の一覧が投稿日時の降順
(新しいもの)から表示され
る。
また、トップのメニューバー
から検索キーワードを入れて、
表示した場合は、キーワード
がタイトルの中に含まれる投
稿のみ表示される。
画面紹介 - 質問詳細
概要
質問詳細ページ。
誰が、いつ、どういう質問
(タイトルと内容)をしたの
か確認できる。
また、回答もでき、質問に対
する回答も表示される。
回答はログインしている場合
のみ可能(閲覧は可)
Tips QAサイトはどうやってつくられてるの?
CSSフレームワークの「Bootstrap」を使って作りました!
スマートフォン・パソコン対応のサイトが作れて、
見た目も中々のものが簡単に作れます!
対象ではないのでやりませんが、興味のある人...
① SE・プログラマはどう考えるか?設計編
QAサイトで必要な機能は、
1. ログイン
2. 質問の投稿
3. 質問の検索
4. 質問の閲覧
5. 答えの投稿
6. 答えの閲覧
情報の塊としては、(ログインするための)ユーザ、質問、回答の3つ
...
② SE・プログラマはどう考えるか?設計編
次に必要な情報のデータ構造(関係)を考える。
1人が質問を行い、
それに対して1人以上の人が回答する。
質問と回答の関係は1:多となる
そして、今回は
質問:タイトル、質問内容、質問者
回答:回答内容...
完成形のデータ構造(ER図)
テーブル定義(DDL)はこちらで用意します。
今回のメイン!
① SE・プログラマはどう考えるか?実装編
実際に順番に上からどう実装すればいいか考えてみよう!
まずは、SQLを考えて後からアプリに埋め込んでみよう!
1. ログイン
2. 質問の投稿
3. 質問の検索
4. 質問の閲覧
5. 答えの投稿
6...
実装を始める前に・・・
まずはCRUD(クラッド)で分類して、何が必要か考える!
以下の表と照らし合わせて考える!
あとはどういうデータを、どういう条件で、なにするのか考える
だけ!
操作 CRUD 対応するSQL
追加 CREATE Inse...
② SE・プログラマはどう考えるか?実装編
ログイン編
ログインするということは、言い換えれば
「ユーザIDとパスワードが、存在するかどうか」
つまり、ユーザIDとパスワードを条件にしてSELECT!
それでは…
ユーザIDとパスワードを条件に...
③ SE・プログラマはどう考えるか?実装編
質問の投稿編
投稿=テーブルにデータを追加(INSERT)すること。
今回の場合は、タイトル、質問内容、質問者を追加するだけ!
それでは…
タイトル、質問内容、質問者の情報をテーブルに追加してみましょ...
③ SE・プログラマはどう考えるか?実装編
質問の検索編
検索=質問テーブルからデータを取得(SELECT)すること。
今回の場合は、タイトル、質問内容、質問者を取得!
それでは…
質問テーブルから、タイトルに「HTML」が含まれる行の、タイト...
④ SE・プログラマはどう考えるか?実装編
質問の閲覧編
閲覧=質問テーブルからデータを取得(SELECT)すること。
今回の場合は、タイトル、質問内容、質問者を取得!
それでは…
質問テーブルから、ID=1のとなる行を取得して、タイトル、質問...
⑤ SE・プログラマはどう考えるか?実装編
回答の投稿編
そろそろパターンが読めてきましたか?
投稿=テーブルにデータを追加(INSERT)すること。
それでは…
質問ID、回答、質問者をテーブルに追加してみましょう!
※ 回答に、質問ID(質...
⑥ SE・プログラマはどう考えるか?実装編
答えの閲覧編
どうですか?わかってきましたか?
閲覧=テーブルからデータを取得(SELECT)すること。
それでは…
質問ID=1となる行を取得して、質問ID、回答、質問者を表示し
てみましょう。
※...
条件などに使うデータはどこから取得するのか?
基本的には4つ
 定数
⇒(プログラム・SQL内に固定で書かれている文字列や数値)
 設定ファイル
⇒ 設定ファイルに記載されている情報
 リクエストパラメータ
⇒ユーザの入力情報で一時的な情...
次回予告!
今回作成したSQLをPHPに埋め込みます!
デザインなど基本的な部分はこちらで用意したので、
実際にブラウザで動作するWebアプリケーションにしてみましょう!
さいごに。
残り2回で、QAサイトを作っていきます。
わからないことあれば、LINE・メールでなんでも質問してね!
一般的なプログラミング学習サービスだと10~20万くらい取られます…
この機会にぜひ!ドシドシ質問を!
Upcoming SlideShare
Loading in …5
×

QAサイトをつくってみよう

395 views

Published on

QAサイトをつくってみよう(第4回の改訂版)

Published in: Software
  • Be the first to comment

  • Be the first to like this

QAサイトをつくってみよう

  1. 1. QAサイトをつくってみよう! AlphabetBootCamp
  2. 2. QAサイトをつくろう ABCもいよいよ第5回を迎え、ついに終盤! 後半はTwitterモドキQAサイトをつくっていきます!!! (Twitterモドキで告知されていた方、ごめんなさい!)
  3. 3. なぜQAサイト?  データの取得/追加/更新/削除(CRUD)が網羅されている ⇒入門本の最後は掲示板やECサイト、ブログの作成が多い理由も同じ どんなに複雑なシステムも、基本的には上の4つから成り立つ! 4つマスターすれば、明日からでもプログラマーデビュー可! ※時間の都合上...更新、削除まではいけないかも…(ごめんなさい)
  4. 4. QAサイトでできること 以下ができることを要件とする。  ユーザ登録ができること  ログインができること  質問の一覧が検索することができること  質問を投稿することができること  質問に対する回答を投稿できること  質問に対する回答が閲覧できること
  5. 5. 画面紹介 – ユーザ登録 概要 ユーザの登録を行うページ ユーザの登録に必要な情報 – 名前 – メールアドレス – パスワード
  6. 6. 画面紹介 – ログイン 概要 ログインを行うページ メールアドレスとパスワード を入力し、ともに保存されて いる情報と一致するユーザが 存在する場合のみログイン可 能
  7. 7. 画面紹介 - 質問一覧 概要 質問の一覧ページ 質問の一覧が投稿日時の降順 (新しいもの)から表示され る。 また、トップのメニューバー から検索キーワードを入れて、 表示した場合は、キーワード がタイトルの中に含まれる投 稿のみ表示される。
  8. 8. 画面紹介 - 質問詳細 概要 質問詳細ページ。 誰が、いつ、どういう質問 (タイトルと内容)をしたの か確認できる。 また、回答もでき、質問に対 する回答も表示される。 回答はログインしている場合 のみ可能(閲覧は可)
  9. 9. Tips QAサイトはどうやってつくられてるの? CSSフレームワークの「Bootstrap」を使って作りました! スマートフォン・パソコン対応のサイトが作れて、 見た目も中々のものが簡単に作れます! 対象ではないのでやりませんが、興味のある人調べてみてね! Bootstrap http://getbootstrap.com/
  10. 10. ① SE・プログラマはどう考えるか?設計編 QAサイトで必要な機能は、 1. ログイン 2. 質問の投稿 3. 質問の検索 4. 質問の閲覧 5. 答えの投稿 6. 答えの閲覧 情報の塊としては、(ログインするための)ユーザ、質問、回答の3つ 今回必要なのはユーザ、質問、回答のテーブルが必要と判断
  11. 11. ② SE・プログラマはどう考えるか?設計編 次に必要な情報のデータ構造(関係)を考える。 1人が質問を行い、 それに対して1人以上の人が回答する。 質問と回答の関係は1:多となる そして、今回は 質問:タイトル、質問内容、質問者 回答:回答内容、回答者 を持つこととする。 ※ 項目は要件次第!(ベストアンサーが必要など) 質問 回答 1 多
  12. 12. 完成形のデータ構造(ER図) テーブル定義(DDL)はこちらで用意します。 今回のメイン!
  13. 13. ① SE・プログラマはどう考えるか?実装編 実際に順番に上からどう実装すればいいか考えてみよう! まずは、SQLを考えて後からアプリに埋め込んでみよう! 1. ログイン 2. 質問の投稿 3. 質問の検索 4. 質問の閲覧 5. 答えの投稿 6. 答えの閲覧
  14. 14. 実装を始める前に・・・ まずはCRUD(クラッド)で分類して、何が必要か考える! 以下の表と照らし合わせて考える! あとはどういうデータを、どういう条件で、なにするのか考える だけ! 操作 CRUD 対応するSQL 追加 CREATE Insert 取得 READ Select 更新 UPDATE Update 削除 DELETE Delete
  15. 15. ② SE・プログラマはどう考えるか?実装編 ログイン編 ログインするということは、言い換えれば 「ユーザIDとパスワードが、存在するかどうか」 つまり、ユーザIDとパスワードを条件にしてSELECT! それでは… ユーザIDとパスワードを条件にして、ユーザ情報を取得してみましょう。 ※ この際、ユーザIDが重複しないように登録されていることが担保され ている必要あることにも注意! ※ ただしパスワードは一般的にハッシュ化されており、単純な比較では一致しない。今回のケースはパスワードは平文(PlainText)で、保存されていることを想定します が、実際のアプリケーションではきちんとした強度を持ったハッシュアルゴリズムを採用すべきであることに注意!
  16. 16. ③ SE・プログラマはどう考えるか?実装編 質問の投稿編 投稿=テーブルにデータを追加(INSERT)すること。 今回の場合は、タイトル、質問内容、質問者を追加するだけ! それでは… タイトル、質問内容、質問者の情報をテーブルに追加してみましょう! ※ 質問者のところには数字で1を入れてください。 ユーザIDが1の人が登録したことになります。
  17. 17. ③ SE・プログラマはどう考えるか?実装編 質問の検索編 検索=質問テーブルからデータを取得(SELECT)すること。 今回の場合は、タイトル、質問内容、質問者を取得! それでは… 質問テーブルから、タイトルに「HTML」が含まれる行の、タイトル、 質問内容、質問者IDを表示してみましょう! ※ 質問者IDはユーザテーブルのIDを意味します。 JOIN句を利用すると、質問とユーザを結合して取得できます!
  18. 18. ④ SE・プログラマはどう考えるか?実装編 質問の閲覧編 閲覧=質問テーブルからデータを取得(SELECT)すること。 今回の場合は、タイトル、質問内容、質問者を取得! それでは… 質問テーブルから、ID=1のとなる行を取得して、タイトル、質問内容、 質問者IDを表示してみましょう! ※ 質問者IDはユーザテーブルのIDを意味します。 JOIN句を利用すると、質問とユーザを結合して取得できます!
  19. 19. ⑤ SE・プログラマはどう考えるか?実装編 回答の投稿編 そろそろパターンが読めてきましたか? 投稿=テーブルにデータを追加(INSERT)すること。 それでは… 質問ID、回答、質問者をテーブルに追加してみましょう! ※ 回答に、質問ID(質問の情報となるキー)を持たせることで、 質問に対する答えになります。 今回の場合、暫定で1を入力してください。
  20. 20. ⑥ SE・プログラマはどう考えるか?実装編 答えの閲覧編 どうですか?わかってきましたか? 閲覧=テーブルからデータを取得(SELECT)すること。 それでは… 質問ID=1となる行を取得して、質問ID、回答、質問者を表示し てみましょう。 ※ 回答に、質問ID(質問の情報となるキー)を持たせることで、 質問に対する答えになります。
  21. 21. 条件などに使うデータはどこから取得するのか? 基本的には4つ  定数 ⇒(プログラム・SQL内に固定で書かれている文字列や数値)  設定ファイル ⇒ 設定ファイルに記載されている情報  リクエストパラメータ ⇒ユーザの入力情報で一時的な情報  セッション ⇒ユーザの入力情報やDBの値で、ログイン中はずっと保持)
  22. 22. 次回予告! 今回作成したSQLをPHPに埋め込みます! デザインなど基本的な部分はこちらで用意したので、 実際にブラウザで動作するWebアプリケーションにしてみましょう!
  23. 23. さいごに。 残り2回で、QAサイトを作っていきます。 わからないことあれば、LINE・メールでなんでも質問してね! 一般的なプログラミング学習サービスだと10~20万くらい取られます… この機会にぜひ!ドシドシ質問を!

×