CodeIgniter3のチュートリアルをちょっと見てみようかの巻(2)

こんにちわ! NEKOGETです。
この記事はCodeIgniterアドベントカレンダーのために書きました！ 8日目です！
https://qiita.com/advent-calendar/2017/code_igniter

9日目の記事はayatoさんによる
Dockerで作るCodeIgniterローカル開発環境入門編でした！
まだ読めてない人はぜひ読んでほしいです☆☆☆

CodeIgniter3のチュートリアルをちょっと見てみようかの巻(2)って事で(2)なので(1)があります！
CodeIgniter3のチュートリアルをちょっと見てみようかの巻(1) の続きです。

チュートリアルの場所
本家(英語): https://www.codeigniter.com/user_guide/tutorial/index.html
ユーザー会(日本語): http://codeigniter.jp/user_guide/3/tutorial/index.html
@NEKOGET(日本語?): http://pneskin2.nekoget.com/codeigniter/3/user_guide/tutorial/index.html

今回も本家のチュートリアルを見ていきますね。

今回のお題は「ニュースを見る機能を作ろうぜ」です
https://www.codeigniter.com/user_guide/tutorial/news_section.html

newsを保存しておくtableはこんな感じ。
個人的な好みで言えばここに新規登録日を追加したいところです。

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)
);

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)

);

環境の準備 : database

modelをつくる….. 前にDatabase用意しないとダメですね。
database名どうしましょう？

ci3_tutorial とでもしましょうか？

mysqlが入ってる事を確認。

mysqlの起動
mysqlのユーザーとパスワードを作成
databaseの作成
って感じですかね…

それからapplication/config/config.phpの編集です。

$ mysql --version
mysql  Ver 14.14 Distrib 5.5.57, for Linux (x86_64) using readline 5.1

1 2	$ mysql --version mysql Ver 14.14 Distrib 5.5.57, for Linux (x86_64) using readline 5.1

よしよし入ってる。
しかし起動してない。

$ mysql -uroot
ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock' (2)

1 2	$ mysql -uroot ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock' (2)

起動してみる。

$ sudo service mysqld start
Initializing MySQL database:  Installing MySQL system tables...
171211  1:07:29 [Note] Ignoring --secure-file-priv value as server is running with --bootstrap.
171211  1:07:29 [Note] /usr/libexec/mysql55/mysqld (mysqld 5.5.57) starting as process 3907 ...
OK
Filling help tables...
171211  1:07:29 [Note] Ignoring --secure-file-priv value as server is running with --bootstrap.
171211  1:07:29 [Note] /usr/libexec/mysql55/mysqld (mysqld 5.5.57) starting as process 3914 ...
OK

To start mysqld at boot time you have to copy
support-files/mysql.server to the right place for your system

PLEASE REMEMBER TO SET A PASSWORD FOR THE MySQL root USER !
To do so, start the server, then issue the following commands:

/usr/libexec/mysql55/mysqladmin -u root password 'new-password'
/usr/libexec/mysql55/mysqladmin -u root -h ip-172-31-1-75 password 'new-password'

Alternatively you can run:
/usr/libexec/mysql55/mysql_secure_installation

which will also give you the option of removing the test
databases and anonymous user created by default.  This is
strongly recommended for production servers.

See the manual for more instructions.

You can start the MySQL daemon with:
cd /usr ; /usr/libexec/mysql55/mysqld_safe &

You can test the MySQL daemon with mysql-test-run.pl
cd /usr/mysql-test ; perl mysql-test-run.pl

Please report any problems at http://bugs.mysql.com/

                                                           [  OK  ]
Starting mysqld:                                           [  OK  ]

$ sudo service mysqld start

Initializing MySQL database: Installing MySQL system tables...

171211 1:07:29 [Note] Ignoring --secure-file-priv value as server is running with --bootstrap.

171211 1:07:29 [Note] /usr/libexec/mysql55/mysqld (mysqld 5.5.57) starting as process 3907 ...

Filling help tables...

171211 1:07:29 [Note] Ignoring --secure-file-priv value as server is running with --bootstrap.

171211 1:07:29 [Note] /usr/libexec/mysql55/mysqld (mysqld 5.5.57) starting as process 3914 ...

To start mysqld at boot time you have to copy

support-files/mysql.server to the right place for your system

PLEASE REMEMBER TO SET A PASSWORD FOR THE MySQL root USER !

To do so, start the server, then issue the following commands:

/usr/libexec/mysql55/mysqladmin -u root password 'new-password'

/usr/libexec/mysql55/mysqladmin -u root -h ip-172-31-1-75 password 'new-password'

Alternatively you can run:

/usr/libexec/mysql55/mysql_secure_installation

which will also give you the option of removing the test

databases and anonymous user created by default. This is

strongly recommended for production servers.

See the manual for more instructions.

You can start the MySQL daemon with:

cd /usr ; /usr/libexec/mysql55/mysqld_safe &

You can test the MySQL daemon with mysql-test-run.pl

cd /usr/mysql-test ; perl mysql-test-run.pl

Please report any problems at http://bugs.mysql.com/

[ OK ]

Starting mysqld: [ OK ]

案の定rootにパスワードがないわコラって怒られる。

パスワードの設定

/usr/libexec/mysql55/mysqladmin -u root password 'codeigniter3_love'

1	/usr/libexec/mysql55/mysqladmin -u root password 'codeigniter3_love'

mysqlに接続
途中パスワードを聞かれるので上記で設定したパスワードを入力

mysql -uroot -p
Enter password: 
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 4
Server version: 5.5.57 MySQL Community Server (GPL)

Copyright (c) 2000, 2017, Oracle and/or its affiliates. All rights reserved.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql>

mysql -uroot -p

Enter password:

Welcome to the MySQL monitor. Commands end with ; or \g.

Your MySQL connection id is 4

Server version: 5.5.57 MySQL Community Server (GPL)

Oracle is a registered trademark of Oracle Corporation and/or its

affiliates. Other names may be trademarks of their respective

owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql>

文字コードの確認

mysql> show variables like '%char%';
+--------------------------+----------------------------+
| Variable_name            | Value                      |
+--------------------------+----------------------------+
| character_set_client     | utf8                       |
| character_set_connection | utf8                       |
| character_set_database   | latin1                     |
| character_set_filesystem | binary                     |
| character_set_results    | utf8                       |
| character_set_server     | latin1                     |
| character_set_system     | utf8                       |
| character_sets_dir       | /usr/share/mysql/charsets/ |
+--------------------------+----------------------------+
8 rows in set (0.00 sec)

mysql> show variables like '%char%';

+--------------------------+----------------------------+

| Variable_name | Value |

+--------------------------+----------------------------+

| character_set_client | utf8 |

| character_set_connection | utf8 |

| character_set_database | latin1 |

| character_set_filesystem | binary |

| character_set_results | utf8 |

| character_set_server | latin1 |

| character_set_system | utf8 |

| character_sets_dir | /usr/share/mysql/charsets/ |

+--------------------------+----------------------------+

8 rows in set (0.00 sec)

utf8にしとく方が楽よねって事で、一旦mysql接続を解除して /etc/my.cnfを編集
まぁここら辺も含めてansibleに書いてし待った方がいいんだけども……
知っててほしいなあという気持ちもあり難しいね。

mysql> exit
Bye

1 2	mysql> exit Bye

[mysqld] に serverがutf8ですよを追記

character-set-server=utf8

1	character-set-server=utf8

[client]セクションを追加。utf8dですよを記載

[client]
default-character-set=utf8

1 2	[client] default-character-set=utf8

mysqlを再起動

$ sudo service mysqld restart
Stopping mysqld:                                           [  OK  ]
Starting mysqld:                                           [  OK  ]

$ sudo service mysqld restart

Stopping mysqld: [ OK ]

Starting mysqld: [ OK ]

mysqlに接続して文字コードを確認する。

$ mysql -uroot -p
Enter password: 
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 2
Server version: 5.5.57 MySQL Community Server (GPL)

Copyright (c) 2000, 2017, Oracle and/or its affiliates. All rights reserved.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql> show variables like '%char%';
+--------------------------+----------------------------+
| Variable_name            | Value                      |
+--------------------------+----------------------------+
| character_set_client     | utf8                       |
| character_set_connection | utf8                       |
| character_set_database   | utf8                       |
| character_set_filesystem | binary                     |
| character_set_results    | utf8                       |
| character_set_server     | utf8                       |
| character_set_system     | utf8                       |
| character_sets_dir       | /usr/share/mysql/charsets/ |
+--------------------------+----------------------------+
8 rows in set (0.00 sec)

$ mysql -uroot -p

Enter password:

Welcome to the MySQL monitor. Commands end with ; or \g.

Your MySQL connection id is 2

Server version: 5.5.57 MySQL Community Server (GPL)

Oracle is a registered trademark of Oracle Corporation and/or its

affiliates. Other names may be trademarks of their respective

owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql> show variables like '%char%';

+--------------------------+----------------------------+

| Variable_name | Value |

+--------------------------+----------------------------+

| character_set_client | utf8 |

| character_set_connection | utf8 |

| character_set_database | utf8 |

| character_set_filesystem | binary |

| character_set_results | utf8 |

| character_set_server | utf8 |

| character_set_system | utf8 |

| character_sets_dir | /usr/share/mysql/charsets/ |

+--------------------------+----------------------------+

8 rows in set (0.00 sec)

filesystemはbinaryでいいよね。
他がutf8になった事を確認。

データベースの作成

mysql> create database ci3_tutorial;
Query OK, 1 row affected (0.00 sec)

1 2	mysql> create database ci3_tutorial; Query OK, 1 row affected (0.00 sec)

データベースができてる事を確認する。

mysql> show databases ;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| ci3_tutorial       |
| mysql              |
| performance_schema |
| test               |
+--------------------+
5 rows in set (0.01 sec)

mysql> show databases ;

+--------------------+

| Database |

+--------------------+

| information_schema |

| ci3_tutorial |

| mysql |

| performance_schema |

| test |

+--------------------+

5 rows in set (0.01 sec)

newsテーブル作ろうかw

mysql> use ci3_tutorial ;
Database changed

1 2	mysql> use ci3_tutorial ; Database changed

mysql> 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)
    -> );
Query OK, 0 rows affected (0.01 sec)

mysql> 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)

-> );

Query OK, 0 rows affected (0.01 sec)

テーブルができた事を確認する。

mysql> desc news ;
+-------+--------------+------+-----+---------+----------------+
| Field | Type         | Null | Key | Default | Extra          |
+-------+--------------+------+-----+---------+----------------+
| id    | int(11)      | NO   | PRI | NULL    | auto_increment |
| title | varchar(128) | NO   |     | NULL    |                |
| slug  | varchar(128) | NO   | MUL | NULL    |                |
| text  | text         | NO   |     | NULL    |                |
+-------+--------------+------+-----+---------+----------------+
4 rows in set (0.00 sec)

mysql> desc news ;

+-------+--------------+------+-----+---------+----------------+

+-------+--------------+------+-----+---------+----------------+

| id | int(11) | NO | PRI | NULL | auto_increment |

+-------+--------------+------+-----+---------+----------------+

4 rows in set (0.00 sec)

データベースの準備ができた！

config.phpの変更

次は設定だねー
DBに接続する設定書いておかないとダメだよねー
configの設定についてはなぜかチュートリアルにないんだよね。不思議だねー

application/database.php

(前略)
$db['default'] = array(
	'dsn'	=> '',
	'hostname' => 'localhost',
	'username' => 'root',
	'password' => 'codeigniter3_love',
	'database' => 'ci3_tutorial',
	'dbdriver' => 'mysqli',
	'dbprefix' => '',
	'pconnect' => FALSE,
	'db_debug' => (ENVIRONMENT !== 'production'),
	'cache_on' => FALSE,
	'cachedir' => '',
	'char_set' => 'utf8',
	'dbcollat' => 'utf8_general_ci',
	'swap_pre' => '',
	'encrypt' => FALSE,
	'compress' => FALSE,
	'stricton' => FALSE,
	'failover' => array(),
	'save_queries' => TRUE
);
(後略)

(前略)

$db['default'] = array(

'dsn' => '',

'hostname' => 'localhost',

'username' => 'root',

'password' => 'codeigniter3_love',

'database' => 'ci3_tutorial',

'dbdriver' => 'mysqli',

'dbprefix' => '',

'pconnect' => FALSE,

'db_debug' => (ENVIRONMENT !== 'production'),

'cache_on' => FALSE,

'cachedir' => '',

'char_set' => 'utf8',

'dbcollat' => 'utf8_general_ci',

'swap_pre' => '',

'encrypt' => FALSE,

'compress' => FALSE,

'stricton' => FALSE,

'failover' => array(),

'save_queries' => TRUE

);

(後略)

‘username’
‘password’
‘database’
‘dbdriver’
の４項目を変更したよ。
postgresqlを使う場合は、’dbdriver’ は postgre だよ！

ルーティングの設定

チュートリアルには最後の項目で書かれてるんだけど、これ設定してないとブラウザ越しに見えないので先に設定しちゃおうか☆
CodeIgniter/application/config/routes.php

$route['news/(:any)'] = 'news/view/$1';
$route['news'] = 'news';
$route['(:any)'] = 'pages/view/$1';
$route['default_controller'] = 'pages/view';

$route['news/(:any)'] = 'news/view/$1';

$route['news'] = 'news';

$route['(:any)'] = 'pages/view/$1';

$route['default_controller'] = 'pages/view';

これはどういう設定かわかるよね？
news/ はNews Classのindex()が処理をする。
news/view/{何か文字列} は News Classのviewメソッドが引数を持って処理する
その他は、 Pages Classのviewメソッドが処理をする
って流れだね。

Modelの作成

まずはモデルの作成だね！
application/models/News.php
Codeigniter3からModelはClassなのでファイル名の最初の1文字目は大文字だよ！

< ?php

/**
 * Class News_model
 */
class News_model extends CI_Model {

    /**
     * News_model constructor.
     */
    public function __construct()
    {
        //データベースへの接続
        $this->load->database();
    }

    /**
     * ニュースの取得
     * @param bool $slug
     * @return mixed
     */
    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();
    }
}

< ?php

/**

* Class News_model

class News_model extends CI_Model {

/**

* News_model constructor.

public function __construct()

{

//データベースへの接続

$this->load->database();

}

/**

* ニュースの取得

* @param bool $slug

* @return mixed

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();

}

あんまり好きじゃない書き方だけども、Modelのコードね。
slugが指定されてなければ全件をretunしてる。
slugが指定されている場合は、検索した結果を1件だけ返してるコードだね。
できればlimitの設定とorder by は指定したいところだね。

Controllerの作成

次はコントローラー
これも最初の1文字目は大文字だ。合算するとこれぐらいだよね。

< ?php
/**
 * Class News
 */
class News extends CI_Controller
{

    /**
     * News constructor.
     */
    public function __construct()
    {
        parent::__construct();
        $this->load->model('news_model');
        $this->load->helper('url_helper');
    }

    /**
     * index (一覧ページの表示)
     */
    public function index()
    {
        $data = [];
        $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');

    }

    /**
     * newsの主催ページの表示
     * @param null $slug
     */
    public function view($slug = null)
    {
        $data = [];
        $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');
    }
}

< ?php

/**

* Class News

class News extends CI_Controller

{

/**

* News constructor.

public function __construct()

{

parent::__construct();

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

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

}

/**

* index (一覧ページの表示)

public function index()

{

$data = [];

$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');

}

/**

* newsの主催ページの表示

* @param null $slug

public function view($slug = null)

{

$data = [];

$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');

}

チュートリアルのコードはこんな感じになるかな？

Viewの作成

チュートリアルをみるとviewをどう書くのかがすごく雑だね…..
ここで必要なviewは
application/views/templates/header.php
application/views/templates/footer.php
news一覧を表示させるための
application/views/news/index.php
application/views/news/view.php

この4ファイルになるね。！

application/views/templates/header.php

<!doctype html>
<html lang="ja">
  <head>
    <title><?php echo $title ;?></title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
  </head>
  <body>

<!doctype html>

<head>

</head>

<body>

application/views/templates/footer.php

 <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
  </body>
</html>

</body>

</html>

application/views/news/index.php
index.phpは一覧を表示するよ！

<h2><?php echo $title; ?></h2>

<?php foreach ($news as $news_item): ?>

        <h3><?php echo $news_item['title']; ?></h3>
        <div class="main">
                <?php echo $news_item['text']; ?>
        </div>
        <p><a href="<?php echo site_url('news/'.$news_item['slug']); ?>">View article</a></p>

<?php endforeach; ?>

<?php foreach ($news as $news_item): ?>

<?php echo $news_item['text']; ?>

</div>

<p><a href="<?php echo site_url('news/'.$news_item['slug']); ?>">View article</a></p>

<?php endforeach; ?>

http://{EC2のインスタンスのURL}/news

まぁ、そうだよね。
表示されるのはタイトルだけだね。
だってまだ表示する記事ないんだもの。
mysqlに接続して、記事でーたを登録してみるね！

$ mysql -uroot -p
Enter password: 
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 3
Server version: 5.5.57 MySQL Community Server (GPL)

Copyright (c) 2000, 2017, Oracle and/or its affiliates. All rights reserved.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.
mysql> use ci3_tutorial
Reading table information for completion of table and column names
You can turn off this feature to get a quicker startup with -A

mysql> insert into news values(NULL, '最初の記事' , 'first_message', '最初の記事だよ☆')
Query OK, 1 row affected (0.00 sec)

$ mysql -uroot -p

Enter password:

Welcome to the MySQL monitor. Commands end with ; or \g.

Your MySQL connection id is 3

Server version: 5.5.57 MySQL Community Server (GPL)

Oracle is a registered trademark of Oracle Corporation and/or its

affiliates. Other names may be trademarks of their respective

owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql> use ci3_tutorial

Reading table information for completion of table and column names

You can turn off this feature to get a quicker startup with -A

mysql> insert into news values(NULL, '最初の記事' , 'first_message', '最初の記事だよ☆')

Query OK, 1 row affected (0.00 sec)

1件登録して見たよ。

http://{EC2のインスタンスのURL}/news へアクセス。

記事が1県表示されたね！！！

次にviewへアクセス
http://{EC2のインスタンスのURL}/news/first_message

表示されたかな？？？

次は [ニュースを登録する機能を作ろうぜ] を(3)って事で続きを記事に書こうと思うよ！！！