「PHP」を含む日記 RSS

はてなキーワード: PHPとは

2018-11-13

CもC++C#F#GoPythonPHP,Perl,Java,JavaSCRIPT,80アセンブラ,68アセンブラ,Bash,Csh,Powershellも書けるというのに

英語がぜんぜん使えないのはなぜだ。

2018-11-12

PHPはクソゴミ言語だよね~笑笑

と言うのも、知り合いのPHPerがやたら他言語disってるからさ。

おれは基本的にクソとかゴミとか言わない。クソとかゴミとか言う奴って基本的に短絡的だと思うから

でもPHPって、人間で言ったら浮気しまくってるどうしようもない男、もしくはヤリマンビッチじゃん。

思想もなく流行りに飛びついて、ドヤ顔してるような奴だから

そんな奴が他人をクソとかゴミとかdisって、よく平気でいられるよね。

いまさらOOPできるようになってドヤられても、困るんだがwwwww

最近パラパラ踊れるようになったおっさんかよwwwww

2018-11-11

増田プログラマー養成講座 その21 データベース設計 (1)要件定義

前回まで、データベースを使ったWebアプリ作成して、SQLの使い方を学びました。

今回からデータベース設計について学んでみよう。

 

参考書

これらの参考書ガッツリ読めば、データベース設計のやり方は分かる。

 

リレーショナル・データベースは昔からある枯れた(=安定した)技術なので、鉄板ノウハウが蓄積されている。

先人の知恵に沿って使うなら、データベース設計で悩む余地は少ない。=攻略は意外と簡単

 

データベーススペシャリスト教科書

経済産業省認定情報処理技術者試験で「データベーススペシャリスト」という資格もある。

 

データベースエンジニア」という肩書きを名乗れば、ただのプログラマーよりも高給取りになれる。勉強した後、自分知識棚卸してみるつもりで資格を取ってみるのもいいだろう。

データベーススペシャリスト試験教科書には、浅く広くDB知識網羅されているので、1度眺めてみたらいいかも。

 

 

 

データベース設計の流れ

データベース設計(database design)は、ソフトウェア開発工程においてデータベースの詳細なデータモデルを作る工程である

 

  1. 要件定義:「CRUD表」の作成
  2. 概念設計:「概念モデル」の作成 → ER図(実体参照モデル)の作成
  3. 論理設計:「論理モデル」の作成 → テーブル定義表の作成
  4. 物理設計:「物理モデル」の作成 → 論理モデルを実際にデータベース上で作成インデックス作成など

(分類方法にもよるけど)データベース設計は、このようなステップを経る。それでは順番に見ていこう。

 

 

 

1.1 永続化するデータを決定する

いわゆる「要件定義」だ。

実際にシステムを使うことになるユーザーヒアリング調査して、データベース内に永続化(格納)すべきデータを決定する。

 

CRUD表とは?

データCRUD操作(Create 追加、Read 参照、Update 更新Delete 削除)が、いつ、どこで発生するか?をまとめた表のこと。

 

データベース 設計 CRUD表」等のキーワードGoogle画像検索してみよう。どんな表か分かる。

↑このページの「図2 標準的CRUD図(例)」みたいな表を作って確認すれば、扱うデータの過不足がなくなる。

 

複雑なシステムだと、完全なCRUD表を作るのは面倒だよねw

だが安心して欲しい!

押さえておくべきポイントはあるので、そこだけ手抜きをしなければ、大失敗は避けられるだろう。

 

マスタートランザクションの違い

実は、後でテーブルを作るときに、データ更新頻度によって2種類に分類できるんだ。

 

 

トランザクションデータの扱いは、気を付けないとデータベースの性能低下に直結する。

どっちのタイプデータなのか?要件定義の段階から見分ける癖を付けておこう。

 

要件定義練習

試しに、Amazonのような通販サイトなら、どんなデータを扱うことになるのか?想像してみよう。

仕入先、在庫数、受発注配送会社顧客情報商品カテゴリー、商品スペック、などいろいろあるだろう。

いつどこでCRUDが発生するか?どれがマスターデータで、どれがトランザクションデータだろうか?

 

 

 

(ここまでの説明URLを8個も貼ってしまったので、続きは次回にしよう。)

次回は「概念設計」以降のステップを見てみよう。

 


anond:20181015215004 未経験からプログラマーなんだが全然からない

anond:20181016015826 増田プログラマー養成講座 その1 パソコンの用意

anond:20181016164341 増田プログラマー養成講座 その2 プログラムデータ+処理、プログラム言語の種類

anond:20181016180059 増田プログラマー養成講座 その3 構造プログラミングの基本(順次、反復、分岐

anond:20181016193144 増田プログラマー養成講座 その4 子ども向け教材「Scratch」で構造プログラミング練習

anond:20181017161003 増田プログラマー養成講座 その5 オブジェクトとは何か?

anond:20181017191404 増田プログラマー養成講座 その6 OOPの種類、PHPの準備

anond:20181019181549 増田プログラマー養成講座 その7 OOPの仕組み(前半)

anond:20181020230044 増田プログラマー養成講座 その8 OOPの仕組み(後半)

anond:20181022232327 増田プログラマー養成講座 その9 MVCフレームワークを使ってみよう

anond:20181023184616 増田プログラマー養成講座 その10 OOP参考書

anond:20181024214133 増田プログラマー養成講座 その11 データベースを使ってみよう

anond:20181026145516 増田プログラマー養成講座 その12 データベース参考書

anond:20181028152656 増田プログラマー養成講座 その13 SQL文法

anond:20181031014212 増田プログラマー養成講座 その14 Webアプリの試作品作成

anond:20181101225335 増田プログラマー養成講座 その15 Webアプリの完成見本

anond:20181101230220 増田プログラマー養成講座 その16 Webアプリの完成見本(続き)

anond:20181104161900 増田プログラマー養成講座 その17 Webアプリの骨組み

anond:20181104233013 増田プログラマー養成講座 その18 SQLデータの追加と取得

anond:20181110120715 増田プログラマー養成講座 その19 SQLデータ更新

anond:20181110182445 増田プログラマー養成講座 その20 SQLデータの削除

anond:20181111205255 増田プログラマー養成講座 その21 データベース設計 (1)要件定義 ←★今ここ★

anond:20181024214737 増田プログラマー養成講座 コンテンツ一覧

[]2018年11月10日土曜日増田

時間記事文字数文字数平均文字数中央値
006710683159.449
01508608172.248
02223825173.948.5
03215617267.525
041985745.138
051157452.240
0622204492.940.5
0731295795.457
08548958165.974
09749056122.450.5
1093889995.743
11130916770.538
127915319193.948
139310214109.847
14769001118.442.5
159814516148.153
16105955791.058
1785401447.232
186210497169.360.5
1985499258.731
20616124100.448
211451073974.141
2211917378146.038
231421145980.744
1日1744195055111.845

頻出名詞 ()内の数字単語が含まれ記事

人(175), 自分(145), 今(91), 日本(77), 話(58), 増田(57), 前(53), 仕事(52), 女(51), 相手(50), 好き(50), 必要(49), 女性(47), 人間(47), あと(45), 男(44), ー(44), 意味(42), フェミ(42), 普通(41), 問題(38), 気(38), 理由(37), 感じ(36), 日本人(36), 子供(35), 原爆(35), 他人(33), 気持ち(33), 金(32), オタク(32), 頭(31), 目(30), 内容(30), 時間(29), 世界(28), 男性(27), レベル(27), 英語(27), 親(27), 大学(26), 言葉(26), 関係(26), 無理(26), 全部(26), しよう(25), 他(25), ネット(25), 最近(25), 一番(24), 自由(24), 国(24), 結婚(23), 理解(23), 手(23), 迷惑(23), 美人(23), 存在(22), 趣味(22), 今日(22), ゲーム(22), 昔(22), 嫌(21), じゃなくて(20), 場合(20), b(20), 世の中(20), 幸せ(20), 結局(20), お金(20), 漫画(19), 完全(19), 状態(19), 社会(19), 無料(19), 会社(19), 車(18), 結果(18), 事実(18), 説明(18), 心(18), 一人(18), 子(18), 時代(18), 最初(18), 誰か(18), アニメ(18), 映画(18), 別(18), 表現(17), 人生(17), ダメ(17), しない(17), タイプ(17), 正直(17), 勉強(17), シコ(17), ファン(17), バカ(17), 土(17), 家(17), 無駄(17), 先(17)

頻出固有名詞 ()内の数字単語が含まれ記事

日本(77), 増田(57), フェミ(42), じゃなくて(20), 表現自由(16), BTS(15), ネトウヨ(14), KKO(13), 韓国(13), 東京(13), 可能性(12), わからん(12), アメリカ(11), 外国人(11), 中国(11), いない(11), 京都(10), いいね(10), 基本的人権(10), OK(10), Twitter(9), 婚活(9), 価値観(9), hatena(9), 20代(9), 基本的(9), 元増田(9), アプリ(9), いいんじゃない(9), キモ(9), biz(9), 自分自身(8), なのか(8), ぶっちゃけ(8), f8(8), f6(8), d1(8), s(8), なんだろう(8), …。(8), にも(8), 自己紹介(8), b6(8), ブクマ(8), SNS(8), twitter(8), 10年(8), php(8), 個人的(8), 専業主婦(7), お気持ち(7), 精神的(7), 毎日(7), 被害者(7), f1(7), w(7), b1(7), a(7), 奨学金(7), b2(7), なんの(7), f5(7), な!(7), キズナアイ(6), ポリコレ(6), ttp://(6), 笑(6), bb(6), 生産性(6), fe(6), amp(6), トラバ(6), ゾーニング(6), 2人(6), ブクマカ(6), フレームワーク(6), ガチ(6), スマホ(6), ニート(6), 1年(6), ブコメ(6), 5年(6), 下方婚(5), individual(5), 14億(5), コレ(5), アレ(5), 30代(5), 昭和(5), 最低賃金(5), 1週間(5), PC(5), 一般的(5), reception(5), cytbunxi(5), ホッテントリ(5), コチラ(5), 夫婦(5), ブログ(5), member(5), マジで(5), ディオ(5), e4(5), AI(5), b4(5), aa(5), 異世界(5), チョコパイ(5), メルカリ(5), 論理的(5), 1人(5), キモい(5), ナチス(5), key(5), 一緒に(5), 100%(5), 何度(5), 3p(5), 自分たち(5), n/(5), Web(5), おまえら(5), 1回(5), URL(5), p(5), パティシエ(5), 犯罪者(5), ラノベ(5), キチガイ(5), スマブラ(5), ???(5), mkey(5), 仕方がない(5), 萌え絵(5)

本日の注目単語 ()内の数字単語が含まれ記事

恋文(6), individual(5), ディオ(5), パティシエ(5), bb(6), チョコパイ(5), f8(8), コチラ(5), 3p(5), d1(8), スクウェア(4), 原爆(35), 土(17), 戦士(12), 基本的人権(10), y(7), シコ(17), o(7), e(15), フレームワーク(6), Tシャツ(12), h(10), d(15), 反日(9), c(12), 奨学金(7), 指定(13), 運転(12), 表現自由(16), 美人(23), 学ん(10), 無料(19), 借金(9), 返信(9), 食う(11), 20代(9)

頻出トラックバック先(簡易)

40代KKO必死婚活アプリを一か月間使ってみた結果 /20181110151336(20), ■悪質サイトからメールを晒そう /20181110075713(19), ■営業してるとやたらナンパされる /20181109185912(15), ■サンマの内蔵って食べるのが普通? /20181110001043(11), ■車酔いする奴面倒くさすぎ /20181109204321(10), ■未だに特撮ものの偉大さがよくわからない /20181109222920(8), ■結局1番強いキャラってなんなの? /20181110181336(7), ■スクウェア黄金期ってそんなすごかったの? /20181110085030(7), ■日本人が英語能力が低いのを /20181109174335(7), ■汚れちまった悲しみって /20181110034243(6), ■才能のない人間人生ってつまんねーわ /20181109024136(6), ■表現自由十字軍の苦手なモノ /20181110214012(6), ■クレジットカード債務が支払えず裁判まで行ったやばい人達の例 /20181110025858(6), ■ニコニコオススメ動画 /20181109105536(5), ■ /20181110100229(5), ■例の原爆の件って典型的正義の反対はまた別の正義案件だよな /20181110033210(5), ■日本テレビ番組あるある /20181017172802(5), ■高校生はチンチンチャンバラするってマジ? /20181110004841(5), ■スマブラの話 /20181110120600(5), ■ぶっちゃけ日本廃止して英語公用語にした方がいい /20181108223659(4), (タイトル不明) /20151030013920(4), ■いよいよ日本語がわからなくなってきた /20181110131131(4), ■何故か部屋貸してくれないんだけど心当たりがない /20181110121914(4), ■趣味演劇をやったら面白かった事あれこれ /20181110030720(4), ■勉強しに日本に来ている外国人への援助が批判されていることについて /20181110201532(4), ■彼女200円以下のゲロマズ牛乳を買ってきた! /20181110224118(4), ■ /20181110082352(4)

増田合計ブックマーク数 ()内の数字は1日の増減

5781155(3071)

2018-11-10

anond:20181110182445

正直、SQL説明は失敗だった。ごめんねw

SQL説明じゃなくて、MVCフレームワークの使い方の説明の方が長くなって、自分でも見にくいと思った。

 

やり直すなら、まずはフレームワークを使わずに、素のPHP構造プログラミング)で掲示板を作り、SQL説明をメインにすべきだった。

その後、フレームワークを使わない場合と、フレームワークを使った場合比較して、フレームワークを使った方が便利だと説明すれば良かった。

=順番がまずかったね。

最高にシンプルなWebフレームワークって何だろね?

増田プログラマー養成講座 その20 SQLデータの削除

前回は、SQLデータ更新をやりました。

今回は、SQLデータの削除をやりましょう。

 

メッセージの削除

基本は、同じなので前回やった更新処理をちょっと変えれば削除もすぐできます

 

投稿されたメッセージを削除する機能を、Webページに付けてみよう。

 

削除ページにジャンプするリンク

前々回作ったメッセージの一覧の中に、削除ページにジャンプするリンクも入れておいた。

<td><a href="welcome/delete/<?php echo $item['id']; ?>">削除</a></td>

という1行が削除ページにジャンプするためのリンクになる。

ブラウザーHTMLソースを見ると、ここが以下のようなHTMLに書き換わってる。

<td><a href="welcome/delete/2">削除</a></td>

これは「メッセージID番号が2のメッセージ」を削除対象にして、削除ページにジャンプする。

 

Controllerの改造

ユーザーが「http://localhost/waf/welcome/delete/2」というURLで、削除ページにアクセスしたら、コントローラーで「2」を受け取って使いたい。

CodeIgniterでは、URL文字列を解析して、使うことができる。

以下のようにコントローラーを改造してみよう。

 

// 削除画面

public function delete($id = '')

{

 echo "ID=".$id;

 $this->load->view('chat_delete');

}

 

Controllerの改造の解説

delete()メソッド引数で、URL中の「2」の部分を受け取れる。

これは前回の編集ページ(更新の処理)と同じ。

「$id = $this->uri->segment(3);」でも受け取れる。

 

Viewの改造

削除ページでは、確認する質問を入れてみよう。

ユーザーに「本当に削除しますか?」みたいな注意喚起をしておきたい。

 

ファイルの内容を以下のように編集する。

<?php defined('BASEPATH') or exit('No direct script access allowed');?>

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <title>増田チャット</title>

  <base href="<?php echo base_url(); ?>">

 </head>

 <body>

  <h1>増田チャット</h1>

  <h2>削除</h2>

  <p>以下のメッセージを削除しますか?</p>

  <form action="welcome/delete" method="post" accept-charset="utf-8">

   <?php if (isset($talk)): ?>

   <p style="background-color:lightpink"><?php echo $talk['message']; ?></p>

   <input type="hidden" name="id" value="<?php echo $talk['id']; ?>">

   <input type="hidden" name="action" value="delete">

   <?php else: ?>

   <p>※該当するメッセージがありません。(または削除済です。)</p>

   <?php endif;?>

   <button>削除する</button>

  </form>

  <p><a href="welcome/index">戻る</a></p>

 </body>

</html>

 

Viewの改造の解説

<p style="background-color:lightpink"><?php echo $talk['message']; ?></p>

削除するメッセージを色付きで強調して、ユーザー確認してもらう。

 

<input type="hidden" name="id" value="<?php echo $talk['id']; ?>">

コントローラー削除対象メッセージID番号を送るため、inputタグの「type="hidden"」でメッセージID番号を仕込んでおく。

 

Controllerの改造

ファイルの内容を以下のように編集する。

// 削除画面

public function delete($id = '')

{

 $id = $id ? $id : $this->input->post('id');

 $action = $this->input->post('action');

 if ($action == 'delete') {

  $this->chat_model->delete_message($id);

 }

 $data['talk'] = $this->chat_model->read_message_by_id($id);

 $this->load->view('chat_delete', $data);

}

 

Controllerの改造の解説

やってることは、前回のデータ更新場合とほぼ同じ。

$this->chat_model->delete_message($id);

で、モデルに用意したデータ削除用メソッドを呼び出しているだけ。

次は、モデルdelete_message()メソッドを用意しよう。

 

Modelの改造

ファイルの内容を以下のように編集する。

// Delete

public function delete_message($id = 0)

{

 $sql = "DELETE FROM talk WHERE id = ?";

 $param = array($id);

 $this->db->query($sql, $param);

 return $this->db->affected_rows();

}

 

Modelの改造の解説

SQLの「DELETE」を使えば、指定したレコード(1件分のデータ)を削除できる。

DELETE FROM talk WHERE id = ?」で、talkテーブルmessageid指定して削除している。

 

データを削除した後の挙動は、メッセージID番号がなくなるので、削除ページに表示できるメッセージデータがなくなる。

(例)id=2のデータを削除したら、SQLで「SELECT * FROM talk WHERE id = 2」を取得しても、空のデータデータがない状態

その場合は、

<p>※該当するメッセージがありません。(または削除済です。)</p>

と表示させてる。

 

まとめ

以上で、SQLの「DELETE」を使ったデータの削除ができた。

長々と説明したが、今回の大事な点は、SQLの「DELETE」の使い方だ。

 

以上で、MVCフレームワークを使ったOOPの使い方とSQLの使い方を見てきた。

SQLSQLだけで説明したほうが良かったね!MVCフレームワーク説明SQL説明が混在すると要点が分かりづらくなる?)

ちょっと失敗だったかも。m(__)m)

 

次回は、データベースの設計について学んでみよう。

 


anond:20181015215004 未経験からプログラマーなんだが全然からない

anond:20181016015826 増田プログラマー養成講座 その1 パソコンの用意

anond:20181016164341 増田プログラマー養成講座 その2 プログラムデータ+処理、プログラム言語の種類

anond:20181016180059 増田プログラマー養成講座 その3 構造プログラミングの基本(順次、反復、分岐

anond:20181016193144 増田プログラマー養成講座 その4 子ども向け教材「Scratch」で構造プログラミング練習

anond:20181017161003 増田プログラマー養成講座 その5 オブジェクトとは何か?

anond:20181017191404 増田プログラマー養成講座 その6 OOPの種類、PHPの準備

anond:20181019181549 増田プログラマー養成講座 その7 OOPの仕組み(前半)

anond:20181020230044 増田プログラマー養成講座 その8 OOPの仕組み(後半)

anond:20181022232327 増田プログラマー養成講座 その9 MVCフレームワークを使ってみよう

anond:20181023184616 増田プログラマー養成講座 その10 OOP参考書

anond:20181024214133 増田プログラマー養成講座 その11 データベースを使ってみよう

anond:20181026145516 増田プログラマー養成講座 その12 データベースの参考書

anond:20181028152656 増田プログラマー養成講座 その13 SQL文法

anond:20181031014212 増田プログラマー養成講座 その14 Webアプリの試作品作成

anond:20181101225335 増田プログラマー養成講座 その15 Webアプリの完成見本

anond:20181101230220 増田プログラマー養成講座 その16 Webアプリの完成見本(続き)

anond:20181104161900 増田プログラマー養成講座 その17 Webアプリの骨組み

anond:20181104233013 増田プログラマー養成講座 その18 SQLデータの追加と取得

anond:20181110120715 増田プログラマー養成講座 その19 SQLデータ更新

anond:20181110182445 増田プログラマー養成講座 その20 SQLデータの削除 ←★今ここ★

anond:20181111205255 増田プログラマー養成講座 その21 データベース設計 (1)要件定義

anond:20181024214737 増田プログラマー養成講座 コンテンツ一覧

増田プログラマー養成講座 その19 SQLデータ更新

前回は、Webアプリの骨組み(スケルトン)に、SQLデータの追加と取得をやりました。

今回は、SQLデータ更新をやりましょう。

 

メッセージ更新

 

編集ページにジャンプするリンク

前回作ったメッセージ一覧に、[編集]のリンクも入れておいた。

<td><a href="welcome/update/<?php echo $item['id']; ?>">編集</a></td>

という1行の部分。

[編集]をクリックすると、編集用ページにジャンプする。

ブラウザーHTMLソースを見ると、以下のようなHTMLになってるはず。

<td><a href="welcome/update/2">編集</a></td>

これは「メッセージID番号が2」を対象にして、編集ページにジャンプすることを意味する。

 

Controllerの改造

編集用ページのコントローラーを作ろう。

「http://localhost/waf/welcome/update/2」というURL編集ページにアクセスしたら、メッセージID番号の「2」を受け取れるようにしたい。

URL文字列を処理して「2」を取り出せるようにしよう。

 

// 更新画面

public function update($id = '')

{

 echo "ID=".$id;

 $this->load->view('chat_update');

}

 

CodeIgniterでは、URLから文字列を取り出す方法がいくつか用意されている。

  1. 「update($id = '')」のようにメソッド引数「$id」を用意すれば、「2」の部分を取り出せる。
  2. 引数を使う以外の方法も用意されていて、「$id = $this->uri->segment(3);」のように書けば、「2」の部分を取り出せる。

// 更新画面

public function update()

{

 $id = $this->uri->segment(3);

 echo "<hr> ID=".$id;

 $this->load->view('chat_update');

}

 

Controllerの改造の解説

CodeIgniterで、URL文字列から特定部分の文字列を取り出す方法を見ておこう。

 

例えば、「http://localhost/waf/welcome/update/aaa/bbb/ccc」というURLアクセスしたときCodeIgniterではURL中の「aaa」「bbb」「ccc」という部分は、以下のようにして取り出せる。

$seg1 = $this->uri->segment(1); // → 1番目のURL文字列:「welcome」=コントローラークラス

$seg2 = $this->uri->segment(2); // → 2番目のURL文字列:「update」=クラスの中のメソッド

$seg3 = $this->uri->segment(3); // → 3番目のURL文字列:「aaa」の部分

$seg4 = $this->uri->segment(4); // → 4番目のURL文字列:「bbb」の部分

$seg5 = $this->uri->segment(5); // → 5番目のURL文字列:「ccc」の部分

URLを「/」で区切って、base_url(http://localhost/waf/)の次から順番に、1番目のURL文字列、2番目のURL文字列、3番目のURL文字列、…とsegment()メソッドで順番を指定すれば取得できる。

 

Modelの改造

データベースでメッセージID指定して、メッセージを取り出す機能を用意しよう。

 

ファイルに以下のメソッドを追加する。

// Read by Id

public function read_message_by_id($id = 0)

{

 $sql = "SELECT * FROM talk WHERE id = ?";

 $param = array($id);

 $query = $this->db->query($sql, $param);

 return $query->row_array();

}

 

Modelの改造の解説

SQLの「WHERE」句で、絞り込む条件を指定できる。

 

SELECT * FROM talk WHERE id = ?

「WHERE id = 2」とすれば、メッセージID番号が2のメッセージデータが「talkテーブルから取り出せる。

もし該当するデータがなければ、返されるデータは空になる。(データが返ってこない。)

 

CodeIgniterの「row_array()」は、1件分のデータ配列の形にして返すメソッドだ。

 

Viewの改造

ファイルの内容を以下のように編集する。

<?php defined('BASEPATH') or exit('No direct script access allowed');?>

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <title>増田チャット</title>

  <base href="<?php echo base_url(); ?>">

 </head>

 <body>

  <h1>増田チャット</h1>

  <h2>編集</h2>

  <p>メッセージを変更して「更新する」ボタンを押してください。</p>

  <form action="welcome/update" method="post" accept-charset="utf-8">

   <label>メッセージ</label>

   <?php if (isset($talk)): ?>

   <input type="text" name="message" value="<?php echo $talk['message']; ?>">

   <input type="hidden" name="id" value="<?php echo $talk['id']; ?>">

   <input type="hidden" name="action" value="update">

   <?php else: ?>

   <p>※該当するメッセージがありません。</p>

   <?php endif;?>

   <button>更新する</button>

  </form>

  <p><a href="welcome/index">戻る</a></p>

 </body>

</html>

 

Viewの改造の解説

データベースから取り出した1件分のメッセージを表示する部分を追加した。

<input type="text" name="message" value="<?php echo $talk['message']; ?>">

の「<?php echo $talk['message']; ?>」という部分だ。

これで変更したいメッセージの本文を表示できる。

 

あと、編集したメッセージWebサーバーに送信できるように、Formタグ送信ボタン(「更新する」の部分)も追加した。

このときメッセージID番号も送信できるように、

<input type="hidden" name="id" value="<?php echo $talk['id']; ?>">

という1行も仕込んである

 

Controllerの改造

ファイルの内容を以下のように編集する。

// 更新画面

public function update($id = '')

{

 $id = $id ? $id : $this->input->post('id'); // id -> segment or post

 $action = $this->input->post('action');

 if ($action == 'update') {

  $message = $this->input->post('message');

  $this->chat_model->update_message($id, $message);

 }

 $data['talk'] = $this->chat_model->read_message_by_id($id);

 $this->load->view('chat_update', $data);

}

 

Controllerの改造の解説

メッセージID番号を指定して、データベースから取り出し、Viewに渡すデータを用意している。

$data['talk'] = $this->chat_model->read_message_by_id($id);

 

ユーザーメッセージ編集をしてWebサーバーに送信したら、データ更新する指示を出す部分も追加した。

$action = $this->input->post('action');

if ($action == 'update') {

 $message = $this->input->post('message');

 $this->chat_model->update_message($id, $message);

}

モデルにupdate_message()メソッドを用意して、$idと$messageを渡せば、該当データ更新するようにしたい。

次は、モデルでupdate_message()メソッドを用意しよう。

 

Modelの改造

ファイルの内容を以下のように編集する。

// Update

public function update_message($id = 0, $message = '')

{

 $sql = "UPDATE talk SET message = ? WHERE id = ?";

 $param = array($message, $id);

 $this->db->query($sql, $param);

 return $this->db->affected_rows();

}

 

Modelの改造の解説

SQLの「UPDATE」を使えば、指定したレコード(1件分のデータ)を更新できる。

「UPDATE talk SET message = ? WHERE id = ?」で、talkテーブルmessageid指定して更新している。

 

CodeIgniterの「affected_rows()」メソッドは、更新した行数を返す。=成功なら1行、失敗なら0行となる。

 

補足

コントローラーの「$id = $id ? $id : $this->input->post('id');」という行は、$idの受け取り方が2パターンあるので、それに対応している。

編集ページの表示で、1回目の表示と、2回目以降の表示で、$idの受け渡し方が変わっている。

  • 1回目:URLに埋め込まれID番号をupdate($id = '')の引数$idで受け取っている。($this->uri->segment(3)で受け取るのと同じ)
  • 2回目以降:Formタグで送られてきた$idを$this->input->post('id')で受け取っている。

URLに埋め込む方法上記の1回目のような方法)は、ユーザー勝手に値をいじれるので、基本的には使わない方が良い。

 

まとめ

以上で、SQLの「UPDATE」を使った、データ更新ができた。

長々と説明したが、今回の大事な点は、SQLの「UPDATE」の使い方だ。

CodeIgniterの使い方や、Webサイトの作り方(FormタグなどのHTML知識)は、オマケ程度に見ておいて欲しい。

 

次回は、データを削除するSQLDELETE」の使い方を見てみよう。

 


anond:20181015215004 未経験からプログラマーなんだが全然からない

anond:20181016015826 増田プログラマー養成講座 その1 パソコンの用意

anond:20181016164341 増田プログラマー養成講座 その2 プログラムデータ+処理、プログラム言語の種類

anond:20181016180059 増田プログラマー養成講座 その3 構造プログラミングの基本(順次、反復、分岐

anond:20181016193144 増田プログラマー養成講座 その4 子ども向け教材「Scratch」で構造プログラミング練習

anond:20181017161003 増田プログラマー養成講座 その5 オブジェクトとは何か?

anond:20181017191404 増田プログラマー養成講座 その6 OOPの種類、PHPの準備

anond:20181019181549 増田プログラマー養成講座 その7 OOPの仕組み(前半)

anond:20181020230044 増田プログラマー養成講座 その8 OOPの仕組み(後半)

anond:20181022232327 増田プログラマー養成講座 その9 MVCフレームワークを使ってみよう

anond:20181023184616 増田プログラマー養成講座 その10 OOP参考書

anond:20181024214133 増田プログラマー養成講座 その11 データベースを使ってみよう

anond:20181026145516 増田プログラマー養成講座 その12 データベースの参考書

anond:20181028152656 増田プログラマー養成講座 その13 SQL文法

anond:20181031014212 増田プログラマー養成講座 その14 Webアプリの試作品作成

anond:20181101225335 増田プログラマー養成講座 その15 Webアプリの完成見本

anond:20181101230220 増田プログラマー養成講座 その16 Webアプリの完成見本(続き)

anond:20181104161900 増田プログラマー養成講座 その17 Webアプリの骨組み

anond:20181104233013 増田プログラマー養成講座 その18 SQLデータの追加と取得

anond:20181110120715 増田プログラマー養成講座 その19 SQLデータ更新 ←★今ここ★

anond:20181110182445 増田プログラマー養成講座 その20 SQLデータの削除

anond:20181024214737 増田プログラマー養成講座 コンテンツ一覧

2018-11-07

映画館の上映スケジュール一覧サイトがよくあるけど、手打ちなんだろうか

google検索映画.comのようなサイトで上映中の映画スケジュールが見られるが、これは手打ちでやっているのだろうか。

というのも大手でない、新文芸坐シネマカリテのようなサイト最初に上映スケジュールの1次情報が公開されている。

これは何らかのスケジュールの表をphpなりrubyなりpythonで展開すればweb pageとして成立する。

しかし、元のスケジュール表は公開されていないので他のサイトで利用しようとしたら上映スケジュールサイト情報手打ちで打つしかないのではないだろうか。

自分が知らないだけかもしれない、、もし何か有用APIをご存知の方いたら教えてくださいませ

2018-11-06

javaにも負けず

javaにも負けず

Cにも負けず

javascriptにもPythonの難しさにも負けぬ丈夫な頭を持ち

欲はあり

決していからず

いつも静かに笑っている


一日に一時間RubySwiftと少しのPHPをやり

あらゆることを

自分勘定にもちろん入れて よく見聞きし分かり

そして忘れる


実家の二階の自分の部屋の小さな一角の隅にいて

東にサイトUIあればアレ拡張機能欲しいと言い

西にプログラマー募集あれば行ってやりたいと叫び

南に酷いUIあればスタイルシート独自に変更を加え

北にアプリゲーム作りたいと思わばすぐさまとりかかり


ようやくできたプログラムに涙を流し

完成したゲームバグオロオロ潰し

みんなに「すごい」「なんやコイツ天才やんけ」「神か」と呼ばれ

褒められ

みんなから尊敬してもらえ

そういうもの


私はなりたかった…

2018-11-04

増田プログラマー養成講座 その18 SQLデータの追加と取得

前回は、Webアプリの骨組み(スケルトン)までを作って、製作過程を見てみました。

今回は、データベースCRUD操作を行なって、チャットメッセージを追加/取得/変更/削除する機能実装してみましょう。

 

Visual Studio Codeの準備

Webアプリを作るときに、「Visual Studio Code」というIDE統合開発環境)を使ってみましょう。PHP用の各種プラグイン(「PHP IntelliSense」「PHP Debug」など)を入れておけば、便利に使える。

 

メッセージの追加

  1. ViewHTMLのFormタグを使って、メッセージ入力送信できるようにする。
  2. Controller:Viewから送信したデータを受け取れるようにする。
  3. Model:Controllerが受け取ったデータデータベースに保存する。

という機能実装してみよう。

 

Viewの改造

ファイルの内容を以下のように編集する。

<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <title>増田チャット</title>

  <base href="<?php echo base_url(); ?>">

 </head>

 <body>

  <h1>増田チャット</h1>

  <h2>新規投稿</h2>

  <form action="welcome/index" method="post" accept-charset="utf-8">

   <label>メッセージ</label>

   <input type="text" name="message">

   <input type="hidden" name="action" value="add">

   <button>投稿する</button>

  </form>

 </body>

</html>

 

Viewの改造の解説

本当はセキュリティーを考慮して、入力値の検査バリデーション)とか、もっといろいろな仕込みが必要だが、ここでは練習なので省略します。

 

Controllerの改造

 

ファイルの内容を以下のように編集する。

<?php

defined('BASEPATH') or exit('No direct script access allowed');

 

class Welcome extends CI_Controller

{

 public function __construct()

 {

  parent::__construct();

  $this->load->model('chat_model');

  $this->load->helper('url');

  $this->output->enable_profiler(true); // for debug

 }

 

 // 初期画面

 public function index()

 {

  $action = $this->input->post('action');

  if ($action == 'add') {

   $message = $this->input->post('message');

   $this->chat_model->create_message($message);

  }

  $this->load->view('welcome_index');

 }

 

 // 更新画面

 public function update()

 {

  $this->load->view('chat_update');

 }

 

 // 削除画面

 public function delete()

 {

  $this->load->view('chat_delete');

 }

}

 

Controllerの改造の解説

 

Modelの改造

ここでやっとSQL文の登場だ!!!

SQL説明たかったのに(SQLとは本質的関係がない)Webアプリ説明が延々と続いた。(説明方法を変えた方がいいねw)

データベースデータを保存(追加)するSQLコマンド「INSERT」を使ってみよう!

 

ファイルの内容を以下のように編集する。

<?php

defined('BASEPATH') or exit('No direct script access allowed');

 

class Chat_model extends CI_Model

{

 public function __construct()

 {

  parent::__construct();

  $this->load->database();

 }

 

 // Create

 public function create_message($message = '')

 {

  $sql = "INSERT INTO talk SET create_at = ? , message = ?";

  $param = array(date('Y-m-d H:i:s'), $message);

  $this->db->query($sql, $param);

  return $this->db->insert_id();

 }

}

 

Modelの改造の解説

 

以上、メッセージの追加を実現するために、MVCの各パーツを用意した。これでメッセージの追加だけができるようになった。

これだけではメッセージの取得=表示がまだできないので、次はデータベースからメッセージデータを取得して、Webページに表示できるように改造しよう。

 

メッセージの取得

SQLの「SELECT」を使えば、データベースからデータを取り出せる。

メッセージデータを取り出して、Webページの表示で使おう。

 

Modelの改造

ファイルの内容を以下のように編集する。

<?php

defined('BASEPATH') or exit('No direct script access allowed');

 

class Chat_model extends CI_Model

{

 public function __construct()

 {

  parent::__construct();

  $this->load->database();

 }

 

 // Create

 public function create_message($message = '')

 {

  $sql = "INSERT INTO talk SET create_at = ? , message = ?";

  $param = array(date('Y-m-d H:i:s'), $message);

  $this->db->query($sql, $param);

  return $this->db->insert_id();

 }

 

 // Read All

 public function read_message()

 {

  $sql = "SELECT * FROM talk";

  $query = $this->db->query($sql);

  return $query->result_array();

 }

}

 

Modelの改造の解説

 

これでデータベースからデータを取り出すSQLメソッドモデルに用意できた。

 

Controllerの改造

 

ファイルの内容を以下のように編集する。

<?php

defined('BASEPATH') or exit('No direct script access allowed');

 

class Welcome extends CI_Controller

{

 public function __construct()

 {

  parent::__construct();

  $this->load->model('chat_model');

  $this->load->helper('url');

  // $this->output->enable_profiler(true); // for debug

 }

 

 // 初期画面

 public function index()

 {

  $action = $this->input->post('action');

  if ($action == 'add') {

   $message = $this->input->post('message');

   $this->chat_model->create_message($message);

  }

  $data['talk'] = $this->chat_model->read_message();

  $this->load->view('welcome_index', $data);

 }

 

 // 更新画面

 public function update()

 {

  $this->load->view('chat_update');

 }

 

 // 削除画面

 public function delete()

 {

  $this->load->view('chat_delete');

 }

}

 

Controllerの改造の解説

これは全部CodeIgniterで用意されている機能なので、マニュアルを読めば使い方が分かるようになってます

 

Viewの改造

ファイルの内容を以下のように編集する。

<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <title>増田チャット</title>

  <base href="<?php echo base_url(); ?>">

 </head>

 <body>

  <h1>増田チャット</h1>

  <h2>新規投稿</h2>

  <form action="welcome/index" method="post" accept-charset="utf-8">

   <label>メッセージ</label>

   <input type="text" name="message">

   <input type="hidden" name="action" value="add">

   <button>投稿する</button>

  </form>

  <h2>投稿一覧</h2>

  <table border="1" cellpadding="5" cellspacing="0" bordercolor="#CCCCFF">

   <tr>

    <th>No.</th>

    <th>投稿日時</th>

    <th>メッセージ</th>

    <th>編集</th>

    <th>削除</th>

   </tr>

   <?php if(isset($talk)): ?>

   <?php foreach($talk as $item): ?>

   <tr>

    <td><?php echo $item['id']; ?></td>

    <td><?php echo $item['create_at']; ?></td>

    <td><?php echo $item['message']; ?></td>

    <td><a href="welcome/update/<?php echo $item['id']; ?>">編集</a></td>

    <td><a href="welcome/delete/<?php echo $item['id']; ?>">削除</a></td>

   </tr>

   <?php endforeach; ?>

   <?php endif; ?>

  </table>

 </body>

</html>

 

Viewの改造の解説

 

説明文が300行を超えてしまった!これ以上は増田で表示できない。)次回はメッセージの変更をやってみよう。

 


anond:20181104161900 増田プログラマー養成講座 その17 Webアプリの骨組み

anond:20181104233013 増田プログラマー養成講座 その18 SQLデータの追加と取得 ←★今ここ★

anond:20181110120715 増田プログラマー養成講座 その19 SQLデータ更新

anond:20181024214737 増田プログラマー養成講座 コンテンツ一覧

増田プログラマー養成講座 その17 Webアプリの骨組み

前回は、Webアプリの完成見本を先に見てみました。

今回は、Webアプリを作る途中の過程を見て、作る雰囲気を一緒に味わってみましょう。

 

フレームワーク使用ルール=「設定より規約」=手抜きをする仕組み

最近フレームワークは、「設定より規約」(CoC、convention over configuration)という発想で作られている。

フレームワーク規約使用ルール)に従うと、プログラマー作業量が減って、楽ができる。

 

設定より規約(convention over configuration)とは、開発者の決定すべきことを減少させ、単純にするが柔軟性は失わせないというソフトウェア設計パラダイム

使用しているツール実装した規約開発者の望む動作と一致していれば、設定ファイルを書く必要もない。実装規約と望みの動作が違っている場合必要動作を設定しなければならない。

 

最近フレームワークは「設定より規約アプローチ採用しているものが多い。

例えば、Ruby on Rails、Kohana、Grails、GrokZend FrameworkCakePHPSymfony などがある。

 

CodeIgniter使用ルール

CodeIgniter使用ルールは、マニュアルチュートリアル確認できる。

↑このページの「アプリケーションフローチャート」を見てみよう。

 

  1. 一番左の「index.php」が、Webアプリ入口になっている。(エントリーポイントフロントコントローラーパターン等ともいう)
  2. から2番目の上段「Routing」で、URLに応じて、仕事の振り分け先を決定する。(ディスパッチ、マッピングルーティング等ともいう)
  3. から4番目の「Application Controller」で、具体的な処理の指示を出す。
    1. Application Controllerは、「Model」に必要データを用意させる。
    2. Application Controllerは、「View」に表示用の画面を作らせる。
    3. Application Controllerが、index.phpに表示用の画面を渡す。
  4. 表示用の画面(最終的な処理の結果)を受け取った「index.php」は、ユーザーブラウザー)に画面を渡す。

 

 


 

それでは、CodeIgniterプログラマーが用意する部分のM(Model)とV(View)とC(Application Controller)を、骨組みから作ってみよう。

事前準備として、前々回と前回のWebアプリ完成見本を用意するところまでやっておこう。

 

スケルトンとは?

スケルトン(skeleton, 骨格)とは動物人間の骨格。

コンピュータプログラムコードの骨格部分。プログラムコード作成では、初期段階でスケルトン作成し、その後で詳細部分を肉付けしていく。

 

 

 

Application Controllerの骨組み

まずは、MVCのCの骨組みを作ろう。

Controllerは、ユーザーからリクエストを受け付けて、ModelViewに指示を出す監督です。

 

上記フォルダの中に「Welcome.php」というファイルを作る。(デフォルトであるはずなので、それを使ってOK

 

CodeIgniterルールで、Application Controllerを置く場所は「application/controllers」というフォルダになっている。

CodeIgniterルールで、一番最初に呼び出されるApplication Controllerは「Welcome.php」というファイルになっている。

→これは「C:\xampp\htdocs\waf\application\config\routes.php」という設定ファイルで決められている。

$route['default_controller'] = 'welcome'; // 別の名前にすれば変えられる。

 

「Welcome.php」の中身を以下にように変更する。

<?php

defined('BASEPATH') or exit('No direct script access allowed');

 

class Welcome extends CI_Controller

{

 // 初期画面

 public function index()

 {

  echo "Here is index()";

 }

 // 更新画面

 public function update()

 {

  echo "Here is update()";

 }

 // 削除画面

 public function delete()

 {

  echo "Here is delete()";

 }

}

これがチャットApplication Controllerとして動作する最小限の内容=骨格だ。

 

継承

class Welcome extends CI_Controller

という行に注目してみよう。

CodeIgniterで用意されてる「CI_Controller」クラス継承して、プログラマーが「Welcome」クラスを作ってる。

継承によって、フレームワークが用意してる様々な機能をWelcomeクラス内で使えるようになる。

 

URLリクエスト)とControllerの対応マッピング)のルール

「Welcome」クラスの中に、「index()」「update()」「delete()」という3つのメソッドを用意した。

CodeIgniterURLは、Action Controllerのクラス名やメソッド名とひもづけられている。

今回作るWebアプリだと、

「http://localhost/waf/クラス名/メソッド名」

という対応関係になっている。

(例)

http://localhost/waf/        →Welcomeクラスindex()メソッドが呼び出される。

http://localhost/waf/welcome/index  →Welcomeクラスindex()メソッドが呼び出される。

http://localhost/waf/welcome/update →Welcomeクラスのupdate()メソッドが呼び出される。

http://localhost/waf/welcome/delete →Welcomeクラスdelete()メソッドが呼び出される。

 

 

 

Viewの骨組み

次にMVCのVの骨組みを作ろう。

ビューは、表示する画面の部分です。HTMLWebページの構造を書きます

 

 

welcome_index.php編集

以下の内容にして保存する。

<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <title>増田チャット</title>

  <base href="<?php echo base_url(); ?>">

 </head>

 <body>

  <h1>増田チャット</h1>

  <h2>新規投稿</h2>

 </body>

</html>

 

chat_update.php編集

以下の内容にして保存する。

<?php defined('BASEPATH') or exit('No direct script access allowed');?>

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <title>増田チャット</title>

  <base href="<?php echo base_url(); ?>">

 </head>

 <body>

  <h1>増田チャット</h1>

  <h2>編集</h2>

 </body>

</html>

 

chat_delete.php編集

以下の内容にして保存する。

<?php defined('BASEPATH') or exit('No direct script access allowed');?>

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <title>増田チャット</title>

  <base href="<?php echo base_url(); ?>">

 </head>

 <body>

  <h1>増田チャット</h1>

  <h2>削除</h2>

 </body>

</html>

 

Viewファイルの追加に合わせて、Controllerも一部変更します。

 

Welcome.php編集

<?php

defined('BASEPATH') or exit('No direct script access allowed');

 

class Welcome extends CI_Controller

{

 public function __construct()

 {

  parent::__construct();

  $this->load->helper('url');

 }

 

 // 初期画面

 public function index()

 {

  $this->load->view('welcome_index');

 }

 

 // 更新画面

 public function update()

 {

  $this->load->view('chat_update');

 }

 

 // 削除画面

 public function delete()

 {

  $this->load->view('chat_delete');

 }

}

 

(変更点の説明

コンストラクターの追加

コンストラクター「__construct()」は、クラスからインスタンスが作られるとき自動的に実行されるメソッドだ。コンストラクターは、初期化最初にやっておくべき下準備を書いておく。

$this->load->helper('url');

CodeIgniterには、リンクの表示を補助する「URLヘルパー」という機能が用意されている。

上記のように書くとURLヘルパーを呼び出して、使えるようになる。

Viewファイルの以下の行でURLヘルパーを使っている。=「base_url()」という関数URLヘルパーの1つ。

<base href="<?php echo base_url(); ?>">

 

ビュー読み込みメソッドの追加

$this->load->view('welcome_index');

というメソッドによって、Viewファイルの「welcome_index.php」を呼び出し、画面を出力します。

 

これでMVCのCとVの骨組みができた。

今の段階でWebブラウザーで各ページを表示させると、各Viewファイルの中身が表示される。

 

 

 

Modelの骨組み

次にMVCのMの骨組みを作ろう。

モデルは、具体的な処理内容(ロジック)を書いて、データを読み書きする部分です。

データベースを操作するSQL文もモデルに書きます

 

上記フォルダの中に「Chat_model.php」というファイルを作り、以下の内容にして保存する。

<?php

defined('BASEPATH') or exit('No direct script access allowed');

 

class Chat_model extends CI_Model

{

 public function __construct()

 {

  parent::__construct();

  $this->load->database();

 }

}

 

CodeIgniterで用意されてる「CI_Modelクラス継承して、プログラマーが「Chat_modelクラスを作ってる。

「Chat_modelクラスコンストラクターには、以下のように書いている。

$this->load->database();

これは、データベースを使用する準備だ。

 

Modelの追加に合わせて、さらにControllerも一部変更します。

 

Welcome.php編集

<?php

defined('BASEPATH') or exit('No direct script access allowed');

 

class Welcome extends CI_Controller

{

 public function __construct()

 {

  parent::__construct();

  $this->load->model('chat_model');

  $this->load->helper('url');

 }

 

 // 初期画面

 public function index()

 {

  $this->load->view('welcome_index');

 }

 

 // 更新画面

 public function update()

 {

  $this->load->view('chat_update');

 }

 

 // 削除画面

 public function delete()

 {

  $this->load->view('chat_delete');

 }

}

 

コンストラクター

$this->load->model('chat_model');

と書いて、「Chat_model」というモデルを読み込むようにした。

これで、モデルに用意するいろんな機能コントローラーで使えるようになる。

 

 

 

以上で、MVCの骨組み(スケルトン)だけを作成するプロセスを見ていきました。

まだ中身はスカスカで、何も機能がついてませんね。

次回は、データベースのCRUD操作を行なって、チャットメッセージを追加/取得/変更/削除する機能実装してみましょう。

 


anond:20181015215004 未経験からプログラマーなんだが全然からない

anond:20181016015826 増田プログラマー養成講座 その1 パソコンの用意

anond:20181016164341 増田プログラマー養成講座 その2 プログラムデータ+処理、プログラム言語の種類

anond:20181016180059 増田プログラマー養成講座 その3 構造プログラミングの基本(順次、反復、分岐

anond:20181016193144 増田プログラマー養成講座 その4 子ども向け教材「Scratch」で構造プログラミング練習

anond:20181017161003 増田プログラマー養成講座 その5 オブジェクトとは何か?

anond:20181017191404 増田プログラマー養成講座 その6 OOPの種類、PHPの準備

anond:20181019181549 増田プログラマー養成講座 その7 OOPの仕組み(前半)

anond:20181020230044 増田プログラマー養成講座 その8 OOPの仕組み(後半)

anond:20181022232327 増田プログラマー養成講座 その9 MVCフレームワークを使ってみよう

anond:20181023184616 増田プログラマー養成講座 その10 OOP参考書

anond:20181024214133 増田プログラマー養成講座 その11 データベースを使ってみよう

anond:20181026145516 増田プログラマー養成講座 その12 データベースの参考書

anond:20181028152656 増田プログラマー養成講座 その13 SQL文法

anond:20181031014212 増田プログラマー養成講座 その14 Webアプリの試作品作成

anond:20181101225335 増田プログラマー養成講座 その15 Webアプリの完成見本

anond:20181101230220 増田プログラマー養成講座 その16 Webアプリの完成見本(続き)

anond:20181104161900 増田プログラマー養成講座 その17 Webアプリの骨組み ←★今ここ★

anond:20181104233013 増田プログラマー養成講座 その18 SQLデータの追加と取得

anond:20181024214737 増田プログラマー養成講座 コンテンツ一覧

2018-11-03

FacebookTwitterサポート窓口はどの国の言語を使えば話が通じるのか?

日本語ダメ英語ダメ中国語ダメ

まったく解決に至らないどころか、こちらが困っていることに対する答えがテンプレにもなってない。

あと自分が使える言語津軽弁とCとJavaPHPPythonくらいしかないんだけど。どうすればいいんだ。

2018-11-02

[]2018年11月1日木曜日増田

時間記事文字数文字数平均文字数中央値
006710406155.358
015512171221.355
02209172458.662.5
03314612148.837
04141495106.847.5
05171969115.835
0691978219.880
07315598180.647
0842396894.543
091351162186.150
1015015178101.267.5
111531488897.351
121491357991.143
131831707093.355
14136988872.745
15136967271.146.5
1610513017124.051
1715521144136.450
181761291573.442.5
19687700113.254.5
2088848296.445
2195854790.038
2214924557164.842
237010021143.247.5
1日2234249648111.749

頻出名詞 ()内の数字単語が含まれ記事

人(220), 自分(177), 話(119), オタク(110), 好き(87), 増田(82), 問題(81), 今(76), 人間(74), 他人(72), 女(71), ー(65), フェミ(64), 女性(64), 感じ(62), 前(62), 子供(61), 男(59), 気持ち(59), 必要(56), 相手(55), 意味(52), エロ(52), 普通(51), 日本(49), 趣味(48), キャラ(45), 理解(43), 理由(42), 存在(41), 昔(40), 痴漢(40), あと(39), しよう(39), 他(39), 偏見(39), 差別(38), 気(38), 言葉(38), アニメ(37), 被害者(37), 仕事(37), ハロウィン(37), 最近(37), 全部(37), 警戒(37), 場合(36), 仕方(36), 性的(35), 頭(34), 金(34), 目(34), 社会(34), 男性(34), 別(34), 女の子(34), 心(33), 時間(33), ゲーム(33), おっさん(33), 勝手(33), レベル(32), 関係(32), じゃなくて(32), 作品(32), 根拠(31), しない(31), 確か(31), 基準(31), バカ(31), 全て(31), 最初(30), 結局(30), 描写(30), 一番(30), 表現(30), 誰か(29), ただ(29), お気持ち(29), ダメ(29), 発言(29), 意見(29), BL(29), 話題(29), 自由(28), 無視(28), 手(28), いや(27), 世界(26), 今日(26), ネット(25), 近所(25), 現実(25), セックス(25), 抱き枕(25), 個人(25), ゴミ(24), 家(24), 評価(24), 事実(24)

頻出固有名詞 ()内の数字単語が含まれ記事

増田(82), フェミ(64), 日本(49), 被害者(37), じゃなくて(32), お気持ち(29), BL(29), 抱き枕(25), 18禁(22), ラノベ(22), 渋谷(21), ヘイター(20), 自己責任(19), きもい(19), ω(19), 可能性(18), 元増田(18), キモい(17), マジで(17), 抱き枕カバー(16), グリッドマン(16), OK(16), キモ(15), 韓国(15), キモオタ(15), ゾーニング(15), VR(14), リアル(14), ブコメ(14), LGBT(13), 東京(13), Twitter(13), 個人的(13), KKO(13), 萌え絵(13), なんだろう(12), エロ本(12), カス(12), イケメン(12), s(11), 女性向け(11), togetter(11), エロい(11), ネトウヨ(11), ブクマカ(11), いない(10), キチガイ(10), 加害者(10), 価値観(10), なのか(9), PV(9), 萌え豚(9), コスプレ(9), なっちゃった(9), FGO(9), 誹謗中傷(9), いいんじゃない(9), 普通に(9), 表現自由(9), 何度(9), にも(9), 二次創作(9), hatena(9), 中国(9), わからん(9), ブクマ(9), 格ゲー(8), 腐女子(8), ネット上(8), 桂正和(8), AI(8), エルフェンリート(8), 10代(8), プレイ(8), キズナアイ(8), 男性向け(8), アレ(8), 現実的(8), B(7), コミケ(7), 精神的(7), エロゲ(7), クレージー(7), ホッテントリ(7), スマホ(7), アプリ(7), 社会的(7), 自分たち(7), はてブ(7), ゲーセン(7), twitter(7), php(7), FPS(7), 基本的(6), ヤバい(6), ツイッター(6), アメリカ人(6), 犯罪被害者(6), ワイ(6), 一般的(6), 1回(6), ツイート(6), 筋トレ(6), スプラトゥーン(6), キレ(6), article(6), 犯罪者(6), エリ(6), 論理的(6), 具体的(6), URL(6), ぶっちゃけ(6), 2018年(6)

本日の注目単語 ()内の数字単語が含まれ記事

クレージー(7), 南京錠(7), 抱き枕カバー(16), エルフェンリート(8), 桂正和(8), ピーマン(7), 抱き枕(25), Oculus(6), オタクヘイト(7), ヘイター(20), 南京(5), 事実無根(4), 妹萌え(4), シスプリ(4)

投稿警察もどき日中に再投稿された本文の先頭20文字 ()内の数字投稿された回数

わかります (3), ご同輩、釣れますか?釣れませんな (2), そうだね。うんちだね。💩 (2), なるほど (2), ほら、ブーメランに刺さるアホが出てき(2), よ~ん (2), 俺、増田で定期的にくそ面白くない定型(2), うんち (2), 知らん寝ろ (2)

頻出トラックバック先(簡易)

おすすめ冷凍食品教えて /20181031145044(20), ■昔付き合ってた恋人が好きすぎて、結婚できなかったヤツいないの? /20181101150549(15), ■男オタクはいつ頃から桂正和きじゃなくなったのだろう /20181031115238(15), ■しがないキャラクターデザイナーですが /20181101205330(12), ■柚子胡椒胡椒じゃないってマジ? /20181031204359(9), ■ヤフトピ2万本に見出しを付けた編集者ヤフー株式会社退職します /20181031153141(8), ■おっさんの考えた女の子キツイ /20181101124747(8), ■女が文句言ってるだけなのでは? /20181101124523(8), ■何か召喚出来そうな現代人を教えてください /20181101131843(7), ■同質化 vs 異質許容 /20181101121533(7), ■学術立場にないフェミニストっぽい人の“思い”について /20181101120216(7), ■南京大虐殺をアメリカ人に指摘されたときの返し方がわからない /20181101093414(7), ■グリッドマンアカネちゃん描写っていうほど秀逸か? /20181101105316(6), ■衰退してほしいけど絶対しないだろうなーというゲームジャンル /20181101173533(6), ■今回のFGOハロウィンイベント /20181101120538(5), ■ドイツ看護師の大量殺人なんで話題になってないの? /20181031222838(5), ■本屋痴漢盗撮をされた話 /20181030221347(5), ■anond20181101205330 /20181101222312(5), ■日本にいたらエロ感覚麻痺する /20181101142021(5), ■VR業界、今年一年何か進んだ? /20181031123909(5), ■見えない糸の罠で人体チョンパみたいなの漫画で良く見るでしょ? /20181101170119(5), ■ちょっとイラッとしたとき素早く切り替える方法ってない? /20181101180409(5), ■anond20181101222312 /20181101224831(5), ■人生捨ててるなぁと思う /20181101092411(5), ■偏差値60以上しか住めない街 /20181101222529(5)

増田合計ブックマーク数 ()内の数字は1日の増減

5760172(2958)

2018-11-01

増田プログラマー養成講座 その16 Webアプリの完成見本(続き)

anond:20181101225335 増田プログラマー養成講座 その15 Webアプリの完成見本」の続きです。

 

index.php編集

Webサーバーの時間設定がズレていると、メッセージ作成したときに、作成日時もズレてしまます

(=12時に投稿したメッセージが、3時に投稿したことになってしまう、等。)

時間がズレてた場合は、Webサーバーの時刻を一時的に変更する処理を追加しておきましょう。

 

index.phpファイルの先頭に以下の内容を追加します。

上記フォルダの中の「index.phpファイルを開いて、先頭付近(2行目辺り)に以下の内容を追加します。

<?php

date_default_timezone_set('Asia/Tokyo'); // 2行目あたりに追加

 

動作確認

以上で、簡易チャットWebアプリが設置できました。

ブラウザーアクセスして、動作確認してみましょう。

 

 

以上で、データベースを利用したWebアプリが用意できました。

コピー作成しただけでは、プログラム意味が分からないと思うので、次回以降プログラムの部分を解説してみます

次回は、

を見ていきましょう。

 


anond:20181015215004 未経験からプログラマーなんだが全然からない

anond:20181016015826 増田プログラマー養成講座 その1 パソコンの用意

anond:20181016164341 増田プログラマー養成講座 その2 プログラムデータ+処理、プログラム言語の種類

anond:20181016180059 増田プログラマー養成講座 その3 構造プログラミングの基本(順次、反復、分岐

anond:20181016193144 増田プログラマー養成講座 その4 子ども向け教材「Scratch」で構造プログラミング練習

anond:20181017161003 増田プログラマー養成講座 その5 オブジェクトとは何か?

anond:20181017191404 増田プログラマー養成講座 その6 OOPの種類、PHPの準備

anond:20181019181549 増田プログラマー養成講座 その7 OOPの仕組み(前半)

anond:20181020230044 増田プログラマー養成講座 その8 OOPの仕組み(後半)

anond:20181022232327 増田プログラマー養成講座 その9 MVCフレームワークを使ってみよう

anond:20181023184616 増田プログラマー養成講座 その10 OOP参考書

anond:20181024214133 増田プログラマー養成講座 その11 データベースを使ってみよう

anond:20181026145516 増田プログラマー養成講座 その12 データベース参考書

anond:20181028152656 増田プログラマー養成講座 その13 SQL文法

anond:20181031014212 増田プログラマー養成講座 その14 Webアプリの試作品作成

anond:20181101225335 増田プログラマー養成講座 その15 Webアプリの完成見本

anond:20181101230220 増田プログラマー養成講座 その16 Webアプリの完成見本(続き) ←★今ここ★

anond:20181104161900 増田プログラマー養成講座 その17 Webアプリの骨組み

anond:20181024214737 増田プログラマー養成講座 コンテンツ一覧

増田プログラマー養成講座 その15 Webアプリの完成見本

前回は、Webアプリモックアップ(ハリボテ)を作るところまでやりました。

今回は、Webアプリ機能実装してみましょう!

 

学習の狙い

データベースを使ったWebアプリを作って、データベースの基本操作CRUDの4つ)を練習してみよう!

CRUD
  1. Create 追加
  2. Read  取得
  3. Update 更新
  4. Delete 削除

 

説明の順番について

どういう順番で説明したら分かりやすいか検討してみた。

  1. まず先に、Webアプリの完成見本を提示します。
  2. 続いて、作る過程説明しながら、各プログラム意味説明してみます

 

作業の流れ

ざっくりと、以下のような流れで作っていきます

  1. XAMPPを起動する。(参考 anond:20181017191404 増田プログラマー養成講座 その6 OOPの種類、PHPの準備)
  2. CodeIgniterインストールする。(参考 anond:20181022232327 増田プログラマー養成講座 その9 MVCフレームワークを使ってみよう)
  3. phpMyAdminでデータベース操作する。(参考 anond:20181024214133 増田プログラマー養成講座 その11 データベースを使ってみよう)
  4. ApacheWebサーバーソフト)の設定を変更する。(今回説明
  5. Visual Studio Code等のツールプログラムを書く。(次回説明
  6. ブラウザー動作確認する。

 

XAMPPを起動させる

(参考 anond:20181017191404 増田プログラマー養成講座 その6 OOPの種類、PHPの準備)

講座その6を参考にして、XAMPPを起動させて、ApacheMySQLスタートして下さい。

 

CodeIgniterインストールする。

(参考 anond:20181022232327 増田プログラマー養成講座 その9 MVCフレームワークを使ってみよう)

講座その9を参考にして、XAMPPの中にCodeIgniterインストールしておきます

 

phpMyAdminでデータベース操作する。

(参考 anond:20181024214133 増田プログラマー養成講座 その11 データベースを使ってみよう)

講座その11を参考にして、MySQLWebアプリ用のデータベーステーブル作成しておきます

 

データベースの設定

講座その11で、データベース練習で「chat」というデータベースを作ってみました。

そのときmessage」というテーブル作りましたが、今回Webアプリで使うテーブルとして新たに「talk」というテーブル作成します。

(補足:前に作ったテーブルmessage」の中に、テーブル名と同じ「message」という名前カラム(列)を作ってました。これでも問題ないんだけど、プログラムを書くときテーブル名とカラム名を混同しないようにしたいので、念のため作り変えときましょう。)

 

talkテーブル新規作成する

SQLで「talk」というテーブルを作る場合、以下のようなSQL文になります

CREATE TABLE `talk` (

 `id` int(11) NOT NULL,

 `create_at` datetime NOT NULL,

 `update_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,

 `message` text NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=utf8;

 

このSQL文をphpMyAdminで実行すれば「talkテーブルを作れます

  1. phpMyAdminを開く。
  2. データベース「chat」を開く。(前に作った「messageテーブルは使わないので削除してもOK
  3. phpMyAdmin画面の上部メニューの「SQL」をクリックする。
  4. データベース chat 上でクエリを実行する:」の空欄に上記SQL文をコピーして実行すれば、「talk」というテーブルができる。

 

これでデータベースの準備ができました。

 

Apacheの設定

CodeIgniterで使う「URL」の表示方法ちょっと変更しておきたいので、ApacheWebサーバーソフト)の設定を変更しておきます

(「URL」=情報がどこにあるのかを示すインターネット上の住所)

Apacheの「mod_rewrite」という仕組みによって、URLの扱い方を変更します。)

 

(例)

変更前: http://localhost/waf/index.php/welcome/

変更後: http://localhost/waf/welcome/

というように、URLの中にある「/index.php」という文字列を表示させない設定にします。

 

Apache設定ファイル.htaccess

Apacheの設定は「.htaccess」という名前設定ファイルを用意して変更します。

 

RewriteEngine On

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule ^(.*)$ index.php/$1 [L]

 

.htaccess」の書き方を理解するには、「正規表現」という仕組みの知識必要です。

まだ「正規表現」を勉強してない段階では、とりあえずコピペして使って下さい。

 

Webアプリ完成見本

CodeIgniterで、

を行ないます

 

CodeIgniter設定ファイルconfig.php」の編集

config.php」をIDEやエディターで開いて、以下のように変更する。

$config['base_url'] = 'http://localhost/waf/';

$config['index_page'] = '';

 

最初は、

$config['index_page'] = 'index.php';

になってるけど、「index.php」を削除して、「''」(空)にしておく。

 

CodeIgniterデータベース設定ファイル「databese.php」の編集

「databese.php」をIDEやエディターで開いて、以下のように変更する。

$db['default'] = array(

 'dsn' => '',

 'hostname' => 'localhost',

 'username' => 'root',

 'password' => '',

 'database' => 'chat',

 'dbdriver' => 'mysqli',

(※上記のように、MySQLのusernamepasswordは「root」(管理者)のデフォルト設定を使ってます。)

 

Controllerの作成

上記フォルダの中に「Welcome.php」というファイルを作って、内容を以下のようにします。

<?php

defined('BASEPATH') or exit('No direct script access allowed');

 

class Welcome extends CI_Controller

{

 public function __construct()

 {

  parent::__construct();

  $this->load->model('chat_model');

  $this->load->helper('url');

  // $this->output->enable_profiler(true); // for debug

 }

 

 // 初期画面

 public function index()

 {

  $action = $this->input->post('action');

  if ($action == 'add') {

   $message = $this->input->post('message');

   $this->chat_model->create_message($message);

  }

  $data['talk'] = $this->chat_model->read_message();

  $this->load->view('welcome_index', $data);

 }

 

 // 更新画面

 public function update($id = '')

 {

  $id = $id ? $id : $this->input->post('id'); // id -> segment or post

  $action = $this->input->post('action');

  if ($action == 'update') {

   $message = $this->input->post('message');

   $this->chat_model->update_message($id, $message);

  }

  $data['talk'] = $this->chat_model->read_message_by_id($id);

  $this->load->view('chat_update', $data);

 }

 

 // 削除画面

 public function delete($id = '')

 {

  $id = $id ? $id : $this->input->post('id');

  $action = $this->input->post('action');

  if ($action == 'delete') {

   $this->chat_model->delete_message($id);

  }

  $data['talk'] = $this->chat_model->read_message_by_id($id);

  $this->load->view('chat_delete', $data);

 }

}

 

View作成

上記フォルダの中に「welcome_index.php」「chat_update.php」「chat_delete.php」という3つのファイルを作って、内容を以下のようにします。

 

Viewファイル「welcome_index.php」の中身

<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <title>増田チャット</title>

  <base href="<?php echo base_url(); ?>">

 </head>

 <body>

  <h1>増田チャット</h1>

  <h2>新規投稿</h2>

  <form action="welcome/index" method="post" accept-charset="utf-8">

   <label>メッセージ</label>

   <input type="text" name="message">

   <input type="hidden" name="action" value="add">

   <button>投稿する</button>

  </form>

  <h2>投稿一覧</h2>

  <table border="1" cellpadding="5" cellspacing="0" bordercolor="#CCCCFF">

   <tr>

    <th>No.</th>

    <th>投稿日時</th>

    <th>メッセージ</th>

    <th>編集</th>

    <th>削除</th>

   </tr>

   <?php if(isset($talk)): ?>

   <?php foreach($talk as $item): ?>

   <tr>

    <td><?php echo $item['id']; ?></td>

    <td><?php echo $item['create_at']; ?></td>

    <td><?php echo $item['message']; ?></td>

    <td><a href="welcome/update/<?php echo $item['id']; ?>">編集</a></td>

    <td><a href="welcome/delete/<?php echo $item['id']; ?>">削除</a></td>

   </tr>

   <?php endforeach; ?>

   <?php endif; ?>

  </table>

 </body>

</html>

 

Viewファイル「chat_update.php」の中身

<?php defined('BASEPATH') or exit('No direct script access allowed');?>

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <title>増田チャット</title>

  <base href="<?php echo base_url(); ?>">

 </head>

 <body>

  <h1>増田チャット</h1>

  <h2>編集</h2>

  <p>メッセージを変更して「更新する」ボタンを押してください。</p>

  <form action="welcome/update" method="post" accept-charset="utf-8">

   <label>メッセージ</label>

   <?php if (isset($talk)): ?>

   <input type="text" name="message" value="<?php echo $talk['message']; ?>">

   <input type="hidden" name="id" value="<?php echo $talk['id']; ?>">

   <input type="hidden" name="action" value="update">

   <?php else: ?>

   <p>※該当するメッセージがありません。</p>

   <?php endif;?>

   <button>更新する</button>

  </form>

  <p><a href="welcome/index">戻る</a></p>

 </body>

</html>

 

Viewファイル「chat_delete.php」の中身

<?php defined('BASEPATH') or exit('No direct script access allowed');?>

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <title>増田チャット</title>

  <base href="<?php echo base_url(); ?>">

 </head>

 <body>

  <h1>増田チャット</h1>

  <h2>削除</h2>

  <p>以下のメッセージを削除しますか?</p>

  <form action="welcome/delete" method="post" accept-charset="utf-8">

   <?php if (isset($talk)): ?>

   <p style="background-color:lightpink"><?php echo $talk['message']; ?></p>

   <input type="hidden" name="id" value="<?php echo $talk['id']; ?>">

   <input type="hidden" name="action" value="delete">

   <?php else: ?>

   <p>※該当するメッセージがありません。(または削除済です。)</p>

   <?php endif;?>

   <button>削除する</button>

  </form>

  <p><a href="welcome/index">戻る</a></p>

 </body>

</html>

 

Model作成

上記フォルダの中に「Chat_model.php」というファイルを作って、内容を以下のようにします。

<?php

defined('BASEPATH') or exit('No direct script access allowed');

 

class Chat_model extends CI_Model

{

 public function __construct()

 {

  parent::__construct();

  $this->load->database();

 }

 

 // Create

 public function create_message($message = '')

 {

  $sql = "INSERT INTO talk SET create_at = ? , message = ?";

  $param = array(date('Y-m-d H:i:s'), $message);

  $this->db->query($sql, $param);

  return $this->db->insert_id();

 }

 

 // Read All

 public function read_message()

 {

  $sql = "SELECT * FROM talk";

  $query = $this->db->query($sql);

  return $query->result_array();

 }

 

 // Read by Id

 public function read_message_by_id($id = 0)

 {

  $sql = "SELECT * FROM talk WHERE id = ?";

  $param = array($id);

  $query = $this->db->query($sql, $param);

  return $query->row_array();

 }

 

 // Update

 public function update_message($id = 0, $message = '')

 {

  $sql = "UPDATE talk SET message = ? WHERE id = ?";

  $param = array($message, $id);

  $this->db->query($sql, $param);

  return $this->db->affected_rows();

 }

 

 // Delete

 public function delete_message($id = 0)

 {

  $sql = "DELETE FROM talk WHERE id = ?";

  $param = array($id);

  $this->db->query($sql, $param);

  return $this->db->affected_rows();

 }

}

 

この続きは、

anond:20181101230220 増田プログラマー養成講座 その16 Webアプリの完成見本(続き)」

へ続きます

2018-10-31

増田プログラマー養成講座 その14 Webアプリの試作品作成

前回は、SQL文法を学びました。

今回は、データベースを使ったWebアプリ制作を通じて、SQLの使い方を確認してみましょう。

 

Webアプリとは?

WebブラウザーGoogle Chromeなど)で動作するアプリのこと。

ウェブアプリケーションWeb application)は、インターネット(もしくはイントラネット)などのネットワークを介して使用するアプリケーションソフトウェアである

多くの場合、これらのアプリケーションは、Webブラウザ上で動作するプログラミング言語(たとえばJavaScript)によるプログラムWebサーバ側のプログラム協調することによって動作し、ユーザはそれをWebブラウザ上で使用する。

 

準備

Windowsパソコンを使ってたら、「XAMPP」を使ってすぐにWebアプリを試作できる。

以前の講座(その6、その9)を参考にして、XAMPPCodeIgniterを用意しておこう。

 

Webアプリ制作の流れ

最近アプリの作り方は、「デザインスプリント」と呼ばれる方法流行ってます。本やネット情報がたくさんあるので調べてみよう。

 

ざっくりと、以下のような流れです。

  1. アイデア企画)を出す。
  2. アイデアを基に、ペーパープロトタイプ(紙の試作品)を作る。=アナログの試作品ノートなどにアプリの完成予想図、画面などを描く。
  3. ペーパープロトタイプを基に、動くモック(ハリボテ)を作る。=デジタルの試作品
  4. モック画面を基に、実際のプログラム作成して、アプリを完成させる。
  5. 完成したアプリを改良していく。

それでは順番にやってみよう。

 

アイデア

以前にデータベース練習をしたとき、「後で簡単チャット(おしゃべり)ができるWebアプリ作ってみたいと思う。」と言ったので、今回のアイデアは「チャットを作る」にしよう。

 

ペーパープロトタイプ

チャット必要な画面は3つある。

  1. トップページの画面(新規投稿投稿一覧がある)
  2. 投稿更新する画面
  3. 投稿を削除する画面

ノートなどに描いて画面をデザインしてみよう。

 

モック

Webページを作るには、HTMLCSS知識必要だ。HTMLCSSを使ったことがなければ、本やネット情報勉強してみよう。

今回はCSSを使わずに、HTMLだけでシンプルWebページを作ってみよう。(練習から余計なもの無駄を省きたい。)

 

Webページ制作ツール

ブラウザーテキストエディター(またはIDE)が必要です。

特にこだわりがなければ、Microsoftの「Visual Studio Code」という無料IDE統合開発環境)を使ってみよう。

インストール方法や使い方、メニュー日本語化のやり方は、検索して調べてみよう。

 

フォルダを作る。

デスクトップに「mock」というフォルダを作る。

 

ファイルを作る。

「mock」フォルダの中に

  1. index.html」 (トップページの画面)
  2. 「edit.html」 (投稿更新する画面)
  3. delete.html」(投稿を削除する画面)

という3つのファイルを作る。

テキストエディターで保存するとき文字コードを「UTF-8」にしておく。

 

ファイルの中身を編集する。

index.htmlファイルエディターやIDEで開き、以下のような内容に編集して保存します。(コピペする場合、行頭の字下げ(インデント)の全角スペースを半角スペースに置換して下さい。)

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <title>増田チャット</title>

 </head>

 <body>

  <h1>増田チャット</h1>

  <h2>新規投稿</h2>

  <form>

   <label>メッセージ</label>

   <input type="text" name="message">

   <button>投稿する</button>

  </form>

  <h2>投稿一覧</h2>

  <table border="1" cellpadding="5" cellspacing="0" bordercolor="#CCCCFF">

   <tr>

    <th>No.</th>

    <th>投稿日時</th>

    <th>メッセージ</th>

    <th>編集</th>

    <th>削除</th>

   </tr>

   <tr>

    <td>3</td>

    <td>2018-10-20 12:34:56</td>

    <td>Webアプリを作ってみる!</td>

    <td><a href="edit.html">編集</a></td>

    <td><a href="delete.html">削除</a></td>

   </tr>

   <tr>

    <td>2</td>

    <td>2018-09-10 22:33:44</td>

    <td>今日からプログラミングを勉強します。</td>

    <td>編集</td>

    <td>削除</td>

   </tr>

   <tr>

    <td>1</td>

    <td>2018-08-01 11:22:33</td>

    <td>こんにちは!</td>

    <td>編集</td>

    <td>削除</td>

   </tr>

  </table>

 </body>

</html>

 

「edit.htmlファイルエディターやIDEで開き、以下のような内容に編集して保存します。(コピペする場合、行頭の字下げ(インデント)の全角スペースを半角スペースに置換して下さい。)

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <title>増田チャット</title>

 </head>

 <body>

  <h1>増田チャット</h1>

  <h2>編集</h2>

  <p>メッセージを変更して「更新する」ボタンを押してください。</p>

  <form>

   <label>メッセージ</label>

   <input type="text" name="message" value="Webアプリを作ってみる!">

   <button>更新する</button>

  </form>

  <p><a href="index.html">戻る</a></p>

 </body>

</html>

 

delete.htmlファイルエディターやIDEで開き、以下のような内容に編集して保存します。(コピペする場合、行頭の字下げ(インデント)の全角スペースを半角スペースに置換して下さい。)

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <title>増田チャット</title>

 </head>

 <body>

  <h1>増田チャット</h1>

  <h2>削除</h2>

  <p>以下のメッセージを削除しますか?</p>

  <form>

   <p style="background-color:lightpink">Webアプリを作ってみる!</p>

   <button>削除する</button>

  </form>

  <p><a href="index.html">戻る</a></p>

 </body>

</html>

 

以上でモックWebページ(HTMLファイル)ができました。

Webブラウザーで「index.html」を開いてください。「編集」や「削除」、「戻る」をクリックして、チャットの画面を確認してください。

 

モックを作ってからWebサイトを作る方法

実務では「仕様書」という書類を大量に作る場合もありますが、時間と労力の無駄になっている場合が多々あります。(紙の仕様書はあまり使われる機会がない)

紙の仕様書アナログ)の代わりに、モック仕様書デジタル)として使うと、その後の段階がスムーズになります

どうしても紙でなければ困る場合以外は、モックをそのまま仕様書として使ってみましょう。

 

プロトタイプ作成ツール

モック(動くハリボテ)を作るための便利なツールがいろいろあります

 

 

 

ちょっと長くなったので、モックを基に機能実装プログラミング)するのは次回にしましょう。

 


anond:20181015215004 未経験からプログラマーなんだが全然からない

anond:20181016015826 増田プログラマー養成講座 その1 パソコンの用意

anond:20181016164341 増田プログラマー養成講座 その2 プログラムデータ+処理、プログラム言語の種類

anond:20181016180059 増田プログラマー養成講座 その3 構造プログラミングの基本(順次、反復、分岐

anond:20181016193144 増田プログラマー養成講座 その4 子ども向け教材「Scratch」で構造プログラミングの練習

anond:20181017161003 増田プログラマー養成講座 その5 オブジェクトとは何か?

anond:20181017191404 増田プログラマー養成講座 その6 OOPの種類、PHPの準備

anond:20181019181549 増田プログラマー養成講座 その7 OOPの仕組み(前半)

anond:20181020230044 増田プログラマー養成講座 その8 OOPの仕組み(後半)

anond:20181022232327 増田プログラマー養成講座 その9 MVCフレームワークを使ってみよう

anond:20181023184616 増田プログラマー養成講座 その10 OOP参考書

anond:20181024214133 増田プログラマー養成講座 その11 データベースを使ってみよう

anond:20181026145516 増田プログラマー養成講座 その12 データベース参考書

anond:20181028152656 増田プログラマー養成講座 その13 SQL文法

anond:20181031014212 増田プログラマー養成講座 その14 Webアプリの試作品作成 ←★今ここ★

anond:20181101225335 増田プログラマー養成講座 その15 Webアプリの完成見本

anond:20181024214737 増田プログラマー養成講座 コンテンツ一覧

2018-10-28

増田プログラマー養成講座 その13 SQL文法

前回は、データベース参考書を見た。

今回は、DBで使うプログラム言語SQL」の文法を見てみよう。

 

リレーショナル・データベース(Relational Database、RDB)とは?

WikipediaRDB説明を見てみよう。

関係データベース(relational database)は関係モデルにもとづいて設計、開発されるデータベースである

関係データベース管理するデータベース管理システム (DBMS) を関係データベース管理システム (RDBMS) と呼ぶ。

Oracle Database、Microsoft SQL Server、MySQLPostgreSQLDB2、FileMakerH2 Database などがRDBMSである

 

関係モデルIBMエドガー・F・コッドによって考案された現在もっとも広く用いられているデータモデルである

データベース利用者は、クエリ(問い掛け)をデータベースに与え、データ検索したり、変更することができる。

 

データは表に似た構造管理されるが、関係と呼ぶ概念モデル化される。

関係は組(タプル、表における行に相当する)、属性アトリビュート、表における列に相当する)、定義域(ドメイン)、候補キー(主キー)、外部キーなどによって構成される。

SQLなどに代表されるデータベース言語(問い合わせ言語)を用いて、関係に対して制限・射影・結合・和・差・交わりなどの関係代数演算(集合演算を含む)ないし関係論理演算を行うことで結果を取り出す。

関係複数持つことも可能で、互いを関連させることも可能である

要するに、

 

SQLとは?

WikipediaSQL説明も見てみよう。

SQLエスキューエル)は、関係データベース管理システム (RDBMS) において、データ操作定義を行うためのデータベース言語(問い合わせ言語)、ドメイン固有言語である

エドガー・F・コッドによって考案された関係データベース関係モデルにおける演算体系である関係代数関係論理関係計算)にある程度基づいている。

 

SQLは、シークェルと読まれることもある。

これは、SQLの元となったデータベース言語が、IBMが開発したRDBMSの実験実装であるSystem Rの操作言語SEQUEL (Structured English Query Language)」であったことが由来である

SEQUEL (Structured English Query Language)」を略して「SQL」と呼んだらしい。

 

  1. 質問する、尋ねる
  2. 問い合わせ[クエリー]を行う

英語クエリーは、質問する、問い合わせる、という意味なんだね。

 

SQL3分

SQL説明するとき、3つのグループに分類される。

 

↑このページをよく読んでくれ。理解できたらSQL説明は終わりだ!!!

 

 

 

…というと、説明することがなくなるので、ちょっとまとめておこう。

このページの「表1●SQLDDLDML,DCLの三つに大別できる。このうちプログラマが最も多く使うのはDMLだ」という図を見てみよう。

 

という3種類に分けてる。順番に見てみよう。

 

DDL(Data Definition Language:データ定義言語

データベーステーブル、ビュー、インデックスユーザーなどを作成/変更/削除するときに使うSQL

これでデータベースを使う準備ができる。

  • 「CREATE」…作成する。
  • ALTER」…変更する。
  • DROP」…削除する。

 

DML(Data Manipulation Language:データ操作言語

データ操作するときに使う。いわゆる「CRUD」のことで、SQLのうち、このDMLを覚えれば、とりあえずRDBは使えるようになる。

CRUD(クラッド)とは、ほとんど全てのコンピュータソフトウェアが持つ永続性の4つの基本機能イニシャルを並べた用語

その4つとは、Create(生成)、Read(読み取り)、Update(更新)、Delete(削除)である

ユーザインタフェースが備えるべき機能情報の参照/検索/更新)を指す用語としても使われる。

 

この中で一番活躍するのは、「SELECTコマンド命令文)だろう。

SELECTは、いろんな条件を付けてデータを絞り込む/加工することができて、便利なんだ。(Excelなどの表計算ソフトよりも高機能

 

JOIN(結合)

RDBは「リレーショナル」(関係)という冠言葉が付いてることからも分かるように、関係がある表と表をくっつけて、データを加工できる。

表と表をくっつける操作のことを「結合」という。

SQLでは「JOIN」というコマンドを使って表と表を結合できる。

↑このページにある丸と丸が重なった図を見てくれ。この図は「ベン図」といって包含関係を示す図だ。図を描いて塗りつぶせば、欲しい部分が分かりやすくなるだろう。

 

結合の種類

表と表のつなげ方には、何通りかパターンがあるよ。

  • 結合は、「内部結合」(INNNER JOIN)と「外部結合」(OUTER JOIN)の2種類に分類できる。
  • 外部結合はさらに、「左結合」(LEFT JOIN)と「右結合」(RIGHT JOIN)と「完全結合」(FULL JOIN)の3種類に分類できる。

 

内部結合は単純だ。外部結合はちょっとややこしい。

外部結合は「LEFT JOIN」の形がよく使われると思うので、まず最初にLEFT JOINの仕組みを理解すれば大丈夫だろう。

(LEFTの仕組みを基準にして、RIGHTやFULLとの相違点を意識すれば、表のつなぎ方を間違えにくい?)

 

DCL(DataControl Language:データ制御言語

トランザクション」は、データ更新に失敗したとき、元に戻せる機能だ。(安全装置

  • 「COMMIT」…更新処理の確定
  • 「ROLLBACK」…更新処理の破棄

 

言葉だけだと意味が分かりづらいと思う。

Google画像検索で「トランザクション」を検索して、分かりやすそうな図解を探してみよう。

↑このページの「図1 処理失敗による不整合の発生」を見てみよう。

 

銀行で口座間の送金を考えてみる。Aさんの口座からBさんの口座へ50万円送金したい。

  1. Aさんの口座から50万円減らす。
  2. Bさんの口座に50万円追加する。

この2つの処理が両方とも成功しないと、送金は失敗だ。(Aさんは送金できてないのに貯金が減ったら怒る。Bさんは送金されてないのに貯金が増えてラッキー!)

AとBの両方が成功したら更新処理を確定する。AとBのどちらか、または両方が失敗したら更新処理は破棄してなかったことにする。(やり直し!)

これがトランザクションだ。

 

クレーム対応難易度

ちょっと話がそれるけど、トラブルの重大さ=クレーム対応難易度について考えてみよう。

  1. 人身事故 …人命にかかわる事故は取り返しがつかない。文句も一番キツイ絶対ミスがあってはならない分野のシステム開発はなるべく避けよう。
  2. 金銭絡み …(命の次に)お金大事という人は多い。人は金の話になるとシビア文句も強烈だ。決済など金銭絡みのシステムでは、RDBトランザクションを使おう。
  3. 上記以外 …その他のクレームは、それほどハードではない。匿名掲示板とか、どうでもいいゴミ情報投稿されるシステムなら、トランザクションは使わなくてもOKだろうw

 

DB管理ツール

ここまで、SQLRDB操作する方法について話した。

RDBは、SQLコマンド操作するだけでなく、DB管理ツールを使って操作することもできる。

DB管理ツールについても知っておこう。

 

この講座では「phpMyAdmin」というDB管理ツールで「MySQL」を操作した。

他にも、Google検索で「DB 管理 ツール GUI」などで探してみよう。商用だけでなく無料でも便利なソフトがたくさんあるね。

 

など。

 

SQLパズルだ!

SQLを駆使すると、欲しいデータをホイホイ取り出せる。

SQLコマンドを組み立てる作業パズルのような要素もあるので、遊びだと思ってSQLに取り組んでみて欲しい。

SQL パズル」でGoogle検索すると、いろんなテクニックが紹介されているので、時間があったらチャレンジしてみよう!

 

SQLの話は、それだけで1冊の本になるぐらい広範だ。今回は、SQL概要説明するだけになってしまった。

SQLの詳細については、前回紹介したSQL参考書などを読んでみてね。

 

まとめ

 

次回は、データベースを使ってWebアプリを作ってみよう!

データベースって便利だな~~~!!!」と実感して欲しい。

 


anond:20181015215004 未経験からプログラマーなんだが全然からない

anond:20181016015826 増田プログラマ養成講座 その1 パソコンの用意

anond:20181016164341 増田プログラマ養成講座 その2 プログラムデータ+処理、プログラム言語の種類

anond:20181016180059 増田プログラマ養成講座 その3 構造プログラミングの基本(順次、反復、分岐

anond:20181016193144 増田プログラマ養成講座 その4 子ども向け教材「Scratch」で構造プログラミング練習

anond:20181017161003 増田プログラマ養成講座 その5 オブジェクトとは何か?

anond:20181017191404 増田プログラマ養成講座 その6 OOPの種類、PHPの準備

anond:20181019181549 増田プログラマ養成講座 その7 OOPの仕組み(前半)

anond:20181020230044 増田プログラマ養成講座 その8 OOPの仕組み(後半)

anond:20181022232327 増田プログラマ養成講座 その9 MVCフレームワークを使ってみよう

anond:20181023184616 増田プログラマ養成講座 その10 OOP参考書

anond:20181024214133 増田プログラマ養成講座 その11 データベースを使ってみよう

anond:20181026145516 増田プログラマ養成講座 その12 データベース参考書

anond:20181028152656 増田プログラマ養成講座 その13 SQL文法 ←★今ここ★

anond:20181031014212 増田プログラマ養成講座 その14 Webアプリの試作品作成

anond:20181024214737 増田プログラマ養成講座 コンテンツ一覧

2018-10-27

anond:20181027155327

Java代替の条件=オープンソース、可用性、並列化

 

LL4兄弟

インタープリタ言語は第2候補以下で。

 

関数型勢

ぶっちゃけ使いづらい?

 

マイクロソフト

Oracleと同じ穴の狢

 

Apple

マイクロソフト以下

 

JS

エコシステムが拡大してるけど、JVMの代役には力不足

 

Javaの天下が長く続いたため、今すぐ代役を果たせる言語/実行環境が不在?

[]2018年10月26日金曜日増田

時間記事文字数文字数平均文字数中央値
007115296215.458
016310031159.251
02273701137.185
0315131687.771
0492351261.2124
0512109891.526
06132204169.592
07263533135.948
08117708660.641
09106909185.849
1012513800110.448
111471045271.140
1214414541101.046
131221155894.746
1413014376110.631
1515416188105.148
161491046170.245
1715116834111.544
187612164160.149
1983743889.636
2096929096.829
218511700137.634
2270673396.253
231331239993.240
1日2124223641105.343.5

頻出名詞 ()内の数字単語が含まれ記事

人(216), 自分(145), 男(96), 増田(94), 今(90), 話(88), 女(78), 日本(72), 女性(70), 問題(68), 好き(60), オタク(60), 人間(59), 前(54), 最近(51), 安田(51), 感じ(50), 頭(50), 金(49), 意味(47), 普通(46), 気(45), あと(44), 関係(43), 男性(43), 仕事(41), 他人(40), 会社(40), ー(40), フェミ(38), 場合(38), 存在(37), 相手(37), 他(37), 結婚(36), 気持ち(35), 子供(34), 一番(34), 時間(33), ジャーナリスト(32), ゲーム(32), 全部(31), 情報(31), 嫌(30), 必要(30), 今日(30), 目(30), 記事(30), 手(29), 絶対(29), テロリスト(29), 一人(28), 理由(28), レベル(28), お金(27), バカ(27), 社会(27), 自己責任(27), 時代(27), 国(27), 結局(26), 作品(26), ネット(26), アニメ(25), ソース(25), 批判(25), 海外(24), 今回(24), 勝手(24), 昔(24), 価値(24), 言葉(24), 無視(24), 結果(24), 迷惑(24), 男女(23), ダメ(23), 当たり前(22), しない(22), カタール(22), 世界(22), 現状(22), 親(22), 内容(21), 人生(21), 差別(21), 権利(21), 時点(21), 状況(21), 事実(21), 心(21), 別(21), 一つ(21), アホ(20), 猫(20), 馬鹿(20), イケメン(20), 誰か(20), 理解(20), 興味(20), 政府(20), 最初(20)

頻出固有名詞 ()内の数字単語が含まれ記事

増田(94), 日本(72), 安田(51), フェミ(38), 自己責任(27), カタール(22), イケメン(19), 下方婚(16), スマホ(16), じゃなくて(16), キズナアイ(15), 安田純平(14), アメリカ(14), テロ組織(13), いない(13), NHK(13), マジで(13), twitter(12), 被害者(12), にも(11), キモ(11), 萌え絵(11), 日本政府(11), Twitter(11), 2018年(10), わからん(10), -2(10), ブコメ(10), hatena(10), 笑(10), PC(10), なんだろう(9), 100%(9), プレイ(9), 高収入(9), キモオタ(9), 個人的(9), BBC(9), 自己責任論(9), 具体的(9), 東京(9), いいんじゃない(8), 何度(8), ぶっちゃけ(8), 結婚相手(8), ポリコレ(8), 普通に(8), 欧米(8), 結婚しない(8), 安田氏(8), 可能性(8), 自分たち(8), キモい(8), 元増田(8), 金(8), エヴァ(8), トラバ(7), 主導権(7), お客さん(7), あいつら(7), ゾーニング(7), OK(7), s(7), archives(7), 電車男(7), SNS(7), キチガイ(7), ツイッター(7), カキフライ(6), 可処分所得(6), 自由意志(6), 1回(6), よね(6), 一方的(6), -1(6), 外国人(6), 中国(6), 1人(6), お気持ち(6), 10年(6), ネトウヨ(6), 女性向け(6), Wikipedia(6), KKO(6), 朝日新聞(6), pixiv(6), 一般的(6), 分からん(6), 娘(6), 一緒に(6), 40代(6), 仕方がない(6), 上から目線(6), .s(5), 3回(5), 二次創作(5), インスタ(5), なのか(5), php(5), E(5), 価値観(5), 基本的(5), 専業主婦(5), モチベーション(5), ヤバい(5), 淫夢(5), 加害者(5), 米(5), イラク(5), 毎日(5), ブログ(5), はてブ(5), 吉野家(5), シリア(5), 1位(5), 3億円(5), 何回(5), 涙(5), アプリ(5), 夫婦(5), ブクマ(5), blog(5), detail(5), 20代(5), どんだけ(5), 民主主義(5), ジャニーズ(5), -3(5), yomiuri(5), 魅力的(5)

本日の注目単語 ()内の数字単語が含まれ記事

手提げ袋(6), イリヤ(4), ユニバーサル(7), 命乞い(4), テロ組織(13), 牛丼チェーン(3), アヘ(3), 品種改良(3), 安田氏(8), カタール(22), 公式ブログ(4), クラッチ(4), 税金無駄遣い(4), 安田(51), 人質(16), ジャーナリスト(32), テロリスト(29), 英雄(14), 自己責任論(9), 拘束(10), 日本政府(11), 腐(6), 助かっ(9), 支える(8), 自己責任(27), テロ(8), 高収入(9), 自明(7), 乳首(14), 政府(20), 市場(11), 報道(13), 運転(9), 下方婚(16), 猫(20), イケメン(20), 悪さ(9), 稼ぎ(8)

投稿警察もどき日中に再投稿された本文の先頭20文字 ()内の数字投稿された回数

うんち (5), ソースは? (3), 知らん寝ろ (3), あってる? (2), うん。 (2), エビでやんす (2), そうだね。うんちだね。💩 (2), 女? (2), (2), 私もそう思います。 (2), https://jsfiddle.n(2), https://openluchtm(2)

頻出トラックバック先(簡易)

ゆるキャンへの道 /20181025232258(16), ■同じ大学の子自動車免許合宿に行って差がついた話 /20181006125741(16), ■後輩が頭おかしい /20181022154237(15), ■さっきパスタ食べてて思い付いたんだ /20181026122941(11), ■米って何でもよくない? /20181026191531(11), ■男性って乳首感じないの? /20181026192127(10), ■ADHDありがちな過集中スキル /20181026083144(10), ■「山で迷ったら降りるのではなく登れ」 /20180817194156(9), ■会社の先輩女性を飲みに誘ったら…… /20181026092435(8), (タイトル不明) /20181026003134(8), ■いつからオタク犯罪者じゃなくなったのだろう /20181026114205(7), ■姪「おじさんはなんで結婚しないの?」 /20181026133612(6), ■人に興味がない /20181026001111(6), ■仮説:キモいことが政治的に正しくないのでは。 /20181026123449(6), ■キャラクターが魅力的 /20181026120142(6), ■ /20181026144516(6), ■調子にのったブスを量産する趣味 /20181026222202(6), ■君らって風俗かいくの /20181026173601(6), ■米軍採用というおもしろフレーズ /20181026205731(5), ■爺さんの遺産で500万円もらった。いい使い道はないか。 /20181026141537(5), ■安田氏の自己責任が及ぶ範囲を超えている /20181026142738(5), ■なんで妊婦優遇しなきゃあかんの?? /20181026231454(5), ■声優の追っかけに少しだけ疲れた話 /20181026071354(5), ■ /20180823104619(5), ■ /20181026000510(5), ■ /20181025233908(5), ■増田に入り浸ってわかったころ /20181026131244(5), ■ふと思い立って自分増田を見返したところ /20181026142044(5), ■累進課税とかホントクソ /20181026230502(5)

増田合計ブックマーク数 ()内の数字は1日の増減

5746680(3739)

アーカイブ ヘルプ
ログイン ユーザー登録
ようこそ ゲスト さん