CodeIgniter 4 jQuery DataTables を使用するチュートリアル
CodeIgniter4でデータベースに保存したデータの表示に、jQueryのプラグインであるDataTablesを使用するシンプルなチュートリアルです。
CodeIgniter4のプロジェクトの作成
CodeIgniterのビューにjQueryのDataTablesプラグインを使用してデータテーブルを表示するシンプルなチュートリアルです。開発環境をまとめておきます。OSはWindowsです。
- CodeIgniter v4.2.5
- XAMPP v8.1.6
- Composer v 2.3.10
- jQuery v3.6.1
- DataTables v1.12.1
ComposerはCodeIgniterをインストールするときのみ使用します。テキストエディター、ターミナルはお好みでどうぞ。またビューの作成ではSpectre.cssを使用します。jQueryとDataTablesについては下記リンクをご確認ください。
それではプロジェクトを作成します。XAMPPのhtdocsに移動しター ミナルで下記コマンドを実行します。プロジェクト名はci4-datatables-tutorialとします。
CodeIgniter4のプロジェクトの作成
composer create-project codeigniter4/appstarter ci4-datatables-tutorial
開発モードに設定していきます。テキストエディターでenvファイルを.envにリネームしCI_ENVIRONMENTをdevelopmentに、app.baseURLをhttp://localhost/ci4-datatables-tutorial/publicに設定します。
.env 抜粋
#--------------------------------------------------------------------
# ENVIRONMENT
#--------------------------------------------------------------------
CI_ENVIRONMENT = development
#--------------------------------------------------------------------
# APP
#--------------------------------------------------------------------
app.baseURL = 'http://localhost/ci4-datatables-tutorial/public/'
これで開発モードに設定できました。
データベースの作成と接続設定
アプリケーション用のデータベースを作成します。このチュートリアルではベータベース名をtestdbにします。phpMyaAminを起動して、まずデータベースを作成します。
データベースtestdbの作成
CREATE DATABASE testdb;
データベースが作成できたのでCodeIgniterで接続するために.envファイルのデータベースの項目を設定します。
.env 抜粋
#--------------------------------------------------------------------
# DATABASE
#--------------------------------------------------------------------
database.default.hostname = localhost
database.default.database = testdb
database.default.username = root
database.default.password = root
database.default.DBDriver = MySQLi
database.default.DBPrefix =
database.default.port = 3306
ホスト名、データベース名、ユーザー名、パスワードはそれぞれの環境にあわせて変更してください。これでデータベースの設定も完了です。
CodeIgniterのMigrationでのテーブルの作成
マイグレーションでデータベースのテーブルを作成していきます。テーブル名はpoemsとします。まずターミナルで下記コマンドを実行しマイグレーションファイルを作成します。
poemsのマイグレーションファイルの作成
php spark make:migration poems --suffix
app/Database/Migration内にひな形が作成されているので下記のように変更します。
app/Database/Migration/
[time_stamp]_PoemsMigration.php
<?php
namespace AppDatabaseMigrations;
use CodeIgniterDatabaseMigration;
class PoemsMigration extends Migration
{
public function up()
{
$this->forge->addField([
'id' => [
'type' => 'INT',
'constraint' => 3,
'unsigned' => true,
'auto_increment' => true,
],
'zenbun' => [
'type' => 'VARCHAR',
'constraint' => '100',
],
'kaminoku' => [
'type' => 'VARCHAR',
'constraint' => '100',
],
'shimonoku' => [
'type' => 'VARCHAR',
'constraint' => '100',
],
'poet' => [
'type' => 'VARCHAR',
'constraint' => '100',
],
]);
$this->forge->addKey('id', true);
$this->forge->createTable('poems');
}
public function down()
{
$this->forge->dropTable('poems');
}
}
マイグレーションファイルが作成できたらターミナルで下記コマンドを実行しテーブルを作成します。
マイグレーションの実行
php spark migrate
CodeIgniterのSeedingでのデータ登録
シーディングでレコードを登録します。ターミナルで下記コマンドを実行しSeederファイルを作成します。
PoemSeederの作成
php spark make:seeder Poem --suffix
app/Database/Seeds内にひな形が作成されるので今回は下記のようにデータを入力します。
app/Database/Seeds/PoemSeeder.php
<?php
namespace App\Database\Seeds;
use CodeIgniter\Database\Seeder;
class PoemSeeder extends Seeder
{
public function run()
{
$zenbun = [
"秋の田の かりほの庵の 苫をあらみ わが衣手は 露にぬれつつ",
"春すぎて 夏来にけらし 白妙の 衣ほすてふ 天の香具山",
"あしびきの 山鳥の尾の しだり尾の ながながし夜を ひとりかも寝む",
"田子の浦に うち出でてみれば 白妙の 富士のたかねに 雪は降りつつ",
"奥山に 紅葉踏み分け 鳴く鹿の 声聞くときぞ 秋は悲しき",
"鵲の 渡せる橋に 置く霜の 白きを見れば 夜ぞふけにける",
"天の原 ふりさけ見れば 春日なる 三笠の山に 出でし月かも",
"わが庵は 都のたつみ しかぞすむ 世をうぢ山と 人はいふなり",
"花の色は 移りにけりな いたづらに 我身世にふる ながめせしまに",
"これやこの 行くも帰るも 別れては 知るも知らぬも あふ坂の関",
"わたの原 八十島かけて 漕き出でぬと 人には告げよ あまのつりぶね",
"天つ風 雲のかよひ路 吹きとぢよ 乙女の姿 しばしとどめむ",
"筑波嶺の みねより落つる みなの川 恋ぞつもりて 淵となりぬる",
"陸奥の しのぶもぢずり 誰ゆゑに 乱れそめにし 我ならなくに",
"君がため 春の野にいでて 若菜摘む わが衣手に 雪は降りつつ",
"立ち別れ いなばの山の 峰に生ふる まつとし聞かば 今帰り来む",
"ちはやぶる 神代もきかず 竜田川 からくれなゐに 水くくるとは",
"住の江の 岸に寄る波 よるさへや 夢のかよひ路 人目よくらむ",
"難波潟 短かき蘆の 節の間も 逢はでこの世を 過ぐしてよとや",
"わびぬれば 今はた同じ 難波なる 身をつくしても 逢はむとぞ思ふ",
"今来むと いひしばかりに 長月の 有明の月を 待ち出でつるかな",
"吹くからに 秋の草木の しをるれば むべ山風を あらしといふらむ",
"月見れば ちぢに物こそ 悲しけれ わが身ひとつの 秋にはあらねど",
"このたびは ぬさもとりあへず 手向山 紅葉のにしき 神のまにまに",
"名にし負はば 逢坂山の さねかづら 人に知られで くるよしもがな",
"小倉山 峰の紅葉ば 心あらば 今ひとたびの みゆき待たなむ",
"みかの原 わきて流るる いづみ川 いつ見きとてか 恋しかるらむ",
"山里は 冬ぞさびしさ まさりける 人目も草も かれぬと思へば",
"心あてに 折らばや折らむ 初霜の 置きまどはせる 白菊の花",
"有明の つれなく見えし 別れより 暁ばかり 憂きものはなし",
"朝ぼらけ 有明の月と 見るまでに 吉野の里に 降れる白雪",
"山川に 風のかけたる しがらみは 流れもあへぬ 紅葉なりけり",
"久方の 光のどけき 春の日に しづ心なく 花の散るらむ",
"誰をかも 知る人にせむ 高砂の 松も昔の 友ならなくに",
"人はいさ 心も知らず ふるさとは 花ぞ昔の 香ににほひける",
"夏の夜は まだ宵ながら 明けぬるを 雲のいづこに 月宿るらむ",
"白露に 風の吹きしく 秋の野は つらぬきとめぬ 玉ぞ散りける",
"忘らるる 身をば思はず 誓ひてし 人の命の 惜しくもあるかな",
"浅茅生の 小野の篠原 しのぶれど あまりてなどか 人の恋しき",
"忍ぶれど 色に出でにけり わが恋は 物や思ふと 人の問ふまで",
"恋すてふ わが名はまだき 立ちにけり 人知れずこそ 思ひそめしか",
"契りきな かたみに袖を しぼりつつ 末の松山 波こさじとは",
"逢ひ見ての 後の心に くらぶれば 昔は物を 思はざりけり",
"逢ふことの 絶えてしなくば なかなかに 人をも身をも 恨みざらまし",
"哀れとも いふべき人は 思ほえで 身のいたづらに なりぬべきかな",
"由良の門を 渡る舟人 かぢを絶え ゆくへも知らぬ 恋の道かな",
"八重むぐら しげれる宿の さびしきに 人こそ見えね 秋は来にけり",
"風をいたみ 岩うつ波の おのれのみ くだけて物を 思ふころかな",
"みかきもり 衛士のたく火の 夜はもえ 昼は消えつつ 物をこそ思へ",
"君がため 惜しからざりし 命さへ 長くもがなと 思ひけるかな ",
"かくとだに えやはいぶきの さしも草 さしもしらじな 燃ゆる思ひを",
"明けぬれば 暮るるものとは 知りながら なほ恨めしき 朝ぼらけかな",
"嘆きつつ ひとり寝る夜の 明くる間は いかに久しき ものとかは知る",
"忘れじの 行末までは かたければ 今日を限りの 命ともがな",
"滝の音は 絶えて久しく なりぬれど 名こそ流れて なほ聞えけれ",
"あらざらむ この世のほかの 思ひ出に いまひとたびの 逢ふこともがな",
"めぐり逢ひて 見しやそれとも わかぬ間に 雲隠れにし 夜半の月かな",
"有馬山 猪名の笹原 風吹けば いでそよ人を 忘れやはする",
"やすらはで 寝なましものを 小夜更けて かたぶくまでの 月を見しかな",
"大江山 いく野の道の 遠ければ まだふみも見ず 天の橋立",
"いにしへの 奈良の都の 八重桜 けふ九重に にほひぬるかな",
"夜をこめて 鳥の空音は はかるとも よに逢坂の 関はゆるさじ ",
"今はただ 思ひ絶えなむ とばかりを 人づてならで いふよしもがな",
"朝ぼらけ 宇治の川霧 たえだえに あらはれわたる 瀬々の網代木",
"恨みわび ほさぬ袖だに あるものを 恋に朽ちなむ 名こそ惜しけれ",
"もろともに あはれと思へ 山桜 花よりほかに 知る人もなし",
"春の夜の 夢ばかりなる 手枕に かひなく立たむ 名こそをしけれ",
"心にも あらでうき世に ながらへば 恋しかるべき 夜半の月かな",
"嵐吹く 三室の山の もみぢ葉は 竜田の川の 錦なりけり",
"さびしさに 宿を立ち出でて ながむれば いづくも同じ 秋の夕暮",
"夕されば 門田の稲葉 おとづれて 蘆のまろやに 秋風ぞ吹く",
"音に聞く 高師の浜の あだ波は かけじや袖の ぬれもこそすれ",
"高砂の 尾上の桜 咲きにけり 外山の霞 立たずもあらなむ",
"憂かりける 人を初瀬の 山おろしよ はげしかれとは 祈らぬものを",
"契りおきし させもが露を 命にて あはれ今年の 秋もいぬめり",
"わたの原 漕ぎ出でて見れば ひさかたの 雲居にまがふ 沖つ白波",
"瀬を早み 岩にせかるる 滝川の われても末に 逢はむとぞ思ふ",
"淡路島 かよふ千鳥の 鳴く声に 幾夜寝覚めぬ 須磨の関守",
"秋風に たなびく雲の 絶え間より もれ出づる月の 影のさやけさ",
"長からむ 心も知らず 黒髪の 乱れて今朝は 物をこそ思へ",
"ほととぎす 鳴きつる方を ながむれば ただ有明の 月ぞ残れ",
"思ひわび さても命は あるものを 憂きに堪へぬは 涙なりけり",
"世の中よ 道こそなけれ 思ひ入る 山の奥にも 鹿ぞ鳴くなる",
"長らへば またこのごろや しのばれむ 憂しと見し世ぞ 今は恋しき",
"夜もすがら 物思ふころは 明けやらで 閨のひまさへ つれなかりけり",
"嘆けとて 月やは物を 思はする かこち顔なる わが涙かな",
"村雨の 露もまだひぬ 槇の葉に 霧たちのぼる 秋の夕ぐれ",
"難波江の 蘆のかりねの ひとよゆゑ みをつくしてや 恋ひわたるべき",
"玉の緒よ 絶えなば絶えね ながらへば 忍ぶることの 弱りもぞする",
"見せばやな 雄島のあまの 袖だにも 濡れにぞ濡れし 色はかはらず",
"きりぎりす 鳴くや霜夜の さむしろに 衣片敷き ひとりかも寝む",
"わが袖は 潮干に見えぬ 沖の石の 人こそ知らね 乾く間もな",
"世の中は 常にもがもな 渚漕ぐ あまの小舟の 綱手かなしも",
"み吉野の 山の秋風 小夜ふけて ふるさと寒く 衣うつなり",
"おほけなく うき世の民に おほふかな わがたつ杣に 墨染の袖",
"花さそふ 嵐の庭の 雪ならで ふりゆくものは わが身なりけり",
"来ぬ人を まつほの浦の 夕なぎに 焼くや藻塩の 身もこがれつつ",
"風そよぐ ならの小川の 夕暮は みそぎぞ夏の しるしなりける",
"人もをし 人もうらめし あぢきなく 世を思ふゆゑに 物思ふ身は",
"ももしきや 古き軒端の しのぶにも なほあまりある 昔なりけり",
];
$kaminoku = [
"あきのたの かりほのいほの とまをあらみ",
"はるすぎて なつきにけらし しろたへの",
"あしびきの やまどりのをの しだりをの",
"たごのうらに うちいでてみれば しろたへの",
"おくやまに もみぢふみわけ なくしかの",
"かささぎの わたせるはしに おくしもの",
"あまのはら ふりさけみれば かすがなる",
"わがいほは みやこのたつみ しかぞすむ",
"はなのいろは うつりにけりな いたづらに",
"これやこの ゆくもかへるも わかれては",
"わたのはら やそしまかけて こぎいでぬと",
"あまつかぜ くものかよひぢ ふきとぢよ",
"つくばねの みねよりおつる みなのがは",
"みちのくの しのぶもぢずり たれゆゑに",
"きみがため はるののにいでて わかなつむ",
"たちわかれ いなばのやまの みねにおふる",
"ちはやぶる かみよもきかず たつたがは",
"すみのえの きしによるなみ よるさへや",
"なにはがた みじかきあしの ふしのまも",
"わびぬれば いまはたおなじ なにはなる",
"いまこむと いひしばかりに ながつきの",
"ふくからに あきのくさきの しをるれば",
"つきみれば ちぢにものこそ かなしけれ",
"このたびは ぬさもとりあへず たむけやま",
"なにしおはば あふさかやまの さねかづら",
"をぐらやま みねのもみぢば こころあらば",
"みかのはら わきてながるる いづみがは",
"やまざとは ふゆぞさびしさ まさりける",
"こころあてに をらばやをらむ はつしもの",
"ありあけの つれなくみえし わかれより",
"あさぼらけ ありあけのつきと みるまでに",
"やまがはに かぜのかけたる しがらみは",
"ひさかたの ひかりのどけき はるのひに",
"たれをかも しるひとにせむ たかさごの",
"ひとはいさ こころもしらず ふるさとは",
"なつのよは まだよひながら あけぬるを",
"しらつゆに かぜのふきしく あきののは",
"わすらるる みをばおもはず ちかひてし",
"あさぢふの をののしのはら しのぶれど",
"しのぶれど いろにいでにけり わがこひは",
"こひすてふ わがなはまだき たちにけり",
"ちぎりきな かたみにそでを しぼりつつ",
"あひみての のちのこころに くらぶれば",
"あふことの たえてしなくは なかなかに",
"あはれとも いふべきひとは おもほえで",
"ゆらのとを わたるふなびと かぢをたえ",
"やへむぐら しげれるやどの さびしきに",
"かぜをいたみ いはうつなみの おのれのみ",
"みかきもり ゑじのたくひの よるはもえ",
"きみがため をしからざりし いのちさへ",
"かくとだに えやはいぶきの さしもぐさ",
"あけぬれば くるるものとは しりながら",
"なげきつつ ひとりぬるよの あくるまは",
"わすれじの ゆくすゑまでは かたければ",
"たきのおとは たえてひさしく なりぬれど",
"あらざらむ このよのほかの おもひでに",
"めぐりあひて みしやそれとも わかぬまに",
"ありまやま ゐなのささはら かぜふけば",
"やすらはで ねなましものを さよふけて",
"おほえやま いくののみちの とほければ",
"いにしへの ならのみやこの やへざくら",
"よをこめて とりのそらねは はかるとも",
"いまはただ おもひたえなむ とばかりを",
"あさぼらけ うぢのかはぎり たえだえに",
"うらみわび ほさぬそでだに あるものを",
"もろともに あはれとおもへ やまざくら",
"はるのよの ゆめばかりなる たまくらに",
"こころにも あらでうきよに ながらへば",
"あらしふく みむろのやまの もみぢばは",
"さびしさに やどをたちいでて ながむれば",
"ゆふされば かどたのいなば おとづれて",
"おとにきく たかしのはまの あだなみは",
"たかさごの をのへのさくら さきにけり",
"うかりける ひとをはつせの やまおろしよ",
"ちぎりおきし させもがつゆを いのちにて",
"わたのはら こぎいでてみれば ひさかたの",
"せをはやみ いはにせかるる たきがはの",
"あはぢしま かよふちどりの なくこゑに",
"あきかぜに たなびくくもの たえまより",
"ながからむ こころもしらず くろかみの",
"ほととぎす なきつるかたを ながむれば",
"おもひわび さてもいのちは あるものを",
"よのなかよ みちこそなけれ おもひいる",
"ながらへば またこのごろや しのばれむ",
"よもすがら ものおもふころは あけやらで",
"なげけとて つきやはものを おもはする",
"むらさめの つゆもまだひぬ まきのはに",
"なにはえの あしのかりねの ひとよゆゑ",
"たまのをよ たえなばたえね ながらへば",
"みせばやな をじまのあまの そでだにも",
"きりぎりす なくやしもよの さむしろに",
"わがそでは しほひにみえぬ おきのいしの",
"よのなかは つねにもがもな なぎさこぐ",
"みよしのの やまのあきかぜ さよふけて",
"おほけなく うきよのたみに おほふかな",
"はなさそふ あらしのにはの ゆきならで",
"こぬひとを まつほのうらの ゆふなぎに",
"かぜそよぐ ならのをがはの ゆふぐれは",
"ひともをし ひともうらめし あぢきなく",
"ももしきや ふるきのきばの しのぶにも",
];
$shimonoku = [
"わがころもでは つゆにぬれつつ",
"ころもほすてふ あまのかぐやま",
"ながながしよを ひとりかもねむ",
"ふじのたかねに ゆきはふりつつ",
"こゑきくときぞ あきはかなしき",
"しろきをみれば よぞふけにける",
"みかさのやまに いでしつきかも",
"よをうぢやまと ひとはいふなり",
"わがみよにふる ながめせしまに",
"しるもしらぬも あふさかのせき",
"ひとにはつげよ あまのつりぶね",
"をとめのすがた しばしとどめむ",
"こひぞつもりて ふちとなりぬる",
"みだれそめにし われならなくに",
"わがころもでに ゆきはふりつつ",
"まつとしきかば いまかへりこむ",
"からくれなゐに みづくくるとは",
"ゆめのかよひぢ ひとめよくらむ",
"あはでこのよを すぐしてよとや",
"みをつくしても あはむとぞおもふ",
"ありあけのつきを まちいでつるかな",
"むべやまかぜを あらしといふらむ",
"わがみひとつの あきにはあらねど",
"もみぢのにしき かみのまにまに",
"ひとにしられで くるよしもがな",
"いまひとたびの みゆきまたなむ",
"いつみきとてか こひしかるらむ",
"ひとめもくさも かれぬとおもへば",
"おきまどはせる しらぎくのはな",
"あかつきばかり うきものはなし",
"よしののさとに ふれるしらゆき",
"ながれもあへぬ もみぢなりけり",
"しづごころなく はなのちるらむ",
"まつもむかしの ともならなくに",
"はなぞむかしの かににほひける",
"くものいづこに つきやどるらむ",
"つらぬきとめぬ たまぞちりける",
"ひとのいのちの をしくもあるかな",
"あまりてなどか ひとのこひしき",
"ものやおもふと ひとのとふまで",
"ひとしれずこそ おもひそめしか",
"すゑのまつやま なみこさじとは",
"むかしはものを おもはざりけり",
"ひとをもみをも うらみざらまし",
"みのいたづらに なりぬべきかな",
"ゆくへもしらぬ こひのみちかな",
"ひとこそみえね あきはきにけり",
"くだけてものを おもふころかな",
"ひるはきえつつ ものをこそおもへ",
"ながくもがなと おもひけるかな",
"さしもしらじな もゆるおもひを",
"なほうらめしき あさぼらけかな",
"いかにひさしき ものとかはしる",
"けふをかぎりの いのちともがな",
"なこそながれて なほきこえけれ",
"いまひとたびの あふこともがな",
"くもがくれにし よはのつきかな",
"いでそよひとを わすれやはする",
"かたぶくまでの つきをみしかな",
"まだふみもみず あまのはしだて",
"けふここのへに にほひぬるかな",
"よにあふさかの せきはゆるさじ",
"ひとづてならで いふよしもがな",
"あらはれわたる せぜのあじろぎ",
"こひにくちなむ なこそをしけれ",
"はなよりほかに しるひともなし",
"かひなくたたむ なこそをしけれ",
"こひしかるべき よはのつきかな",
"たつたのかはの にしきなりけり",
"いづこもおなじ あきのゆふぐれ",
"あしのまろやに あきかぜぞふく",
"かけじやそでの ぬれもこそすれ",
"とやまのかすみ たたずもあらなむ",
"はげしかれとは いのらぬものを",
"あはれことしの あきもいぬめり",
"くもゐにまがふ おきつしらなみ",
"われてもすゑに あはむとぞおもふ",
"いくよねざめぬ すまのせきもり",
"もれいづるつきの かげのさやけさ",
"みだれてけさは ものをこそおもへ",
"ただありあけの つきぞのこれる",
"うきにたへぬは なみだなりけり",
"やまのおくにも しかぞなくなる",
"うしとみしよぞ いまはこひしき",
"ねやのひまさへ つれなかりけり",
"かこちがほなる わがなみだかな",
"きりたちのぼる あきのゆふぐれ",
"みをつくしてや こひわたるべき",
"しのぶることの よわりもぞする",
"ぬれにぞぬれし いろはかはらず",
"ころもかたしき ひとりかもねむ",
"ひとこそしらね かわくまもなし",
"あまのをぶねの つなでかなしも",
"ふるさとさむく ころもうつなり",
"わがたつそまに すみぞめのそで",
"ふりゆくものは わがみなりけり",
"やくやもしほの みもこがれつつ",
"みそぎぞなつの しるしなりける",
"よをおもふゆゑに ものおもふみは",
"なほあまりある むかしなりけり",
];
$poet = [
"天智天皇",
"持統天皇",
"柿本人麻呂",
"山部赤人",
"猿丸太夫",
"中納言家持",
"安倍仲麻呂",
"喜撰法師",
"小野小町",
"蝉丸",
"参議篁",
"僧正遍昭",
"陽成院",
"河原左大臣",
"光孝天皇",
"中納言行平",
"在原業平朝臣",
"藤原敏行朝臣",
"伊勢",
"元良親王",
"素性法師",
"文屋康秀",
"大江千里",
"菅家",
"三条右大臣",
"貞信公",
"中納言兼輔",
"源宗干朝臣",
"凡河内躬恒",
"壬生忠岑",
"坂上是則",
"春道列樹",
"紀友則",
"藤原興風",
"紀貫之",
"清原深養父",
"文屋朝康",
"右近",
"参議等",
"平兼盛",
"壬生忠見",
"清原元輔",
"中納言敦忠",
"中納言朝忠",
"謙徳公",
"曾禰好忠",
"恵慶法師",
"源重之",
"大中臣能宣朝臣",
"藤原義孝",
"藤原実方朝臣",
"藤原道信朝臣",
"右大将道綱母",
"儀同三司母)",
"大納言公任",
"和泉式部",
"紫式部",
"大弐三位",
"赤染衛門",
"小式部内侍",
"伊勢大輔",
"清少納言",
"左京大夫道雅",
"中納言定頼",
"相模",
"大僧正行尊",
"周防内侍",
"三条院",
"能因法師",
"良暹法師",
"大納言経信",
"祐子内親王家紀伊",
"権中納言匡房",
"源俊頼朝臣",
"藤原基俊",
"法性寺入道前関白太政大臣",
"崇徳院",
"源兼昌",
"左京大夫顕輔",
"待賢門院堀川",
"後徳大寺左大臣",
"道因法師",
"皇太后宮大夫俊成",
"藤原清輔朝臣",
"俊恵法師",
"西行法師",
"寂蓮法師",
"皇嘉門院別当",
"式子内親王",
"殷富門院大輔",
"後京極摂政前太政大臣",
"二条院讃岐",
"鎌倉右大臣",
"参議雅経",
"前大僧正慈円",
"入道前太政大臣",
"権中納言定家",
"従二位家隆",
"後鳥羽院",
"順徳院",
];
for ($i = 0; $i < 100; $i++) {
$data = [
'id' => $i+1,
'zenbun' => $zenbun[$i],
'kaminoku' => $kaminoku[$i],
'shimonoku' => $shimonoku[$i],
'poet' => $poet[$i],
];
$this->db->table('poems')->insert($data);
}
}
}
シーダーファイルが作成できたらターミナルで下記コマンドを実行してレコードを登録します。
シーディングの実行
php spark db:seed PoemSeeder
これでレコードが作成できました。phpMyaAminを見ると登録されたデータが確認できます。
Modelファイルの作成
データベースのレコードが作成できたのでモデルファイルを作成します。ターミナルで下記コマンドを実行します。
PoemModelの作成
php spark make:model Poem --suffix
このチュートリアルではデータを表示するだけなのでモデルファイルの$allowedFieldsは空白のままにしています。
app/Models/PoemModel.php
<?php
namespace App\Models;
use CodeIgniter\Model;
class PoemModel extends Model
{
protected $DBGroup = 'default';
protected $table = 'poems';
protected $primaryKey = 'id';
protected $useAutoIncrement = true;
protected $insertID = 0;
protected $returnType = 'array';
protected $useSoftDeletes = false;
protected $protectFields = true;
protected $allowedFields = [];
}
モデルファイルはこれで作成完了です。
Controllerファイルの作成
ターミナルで下記コマンドを実行しコントローラファイルを作成します。
PoemControllerの作成
php spark make:controller Poem --suffix
今回はデータを表示するだけなのでindexメソッドのみとなります。下記のようにします。
app/Controllers/PoemController.php
<?php
namespace AppControllers;
use AppControllersBaseController;
use AppModelsPoemModel;
class PoemController extends BaseController
{
public function index()
{
$poemModel = model(PoemModel::class);
$data = [
'poems' => $poemModel->findAll(),
];
return view('poems', $data);
}
}
ルーティングも設定します。
app/Config/Routes.php 抜粋
/*
* --------------------------------------------------------------------
* Route Definitions
* --------------------------------------------------------------------
*/
$routes->get('/', 'PoemController::index');
あとはビューファイルを作成するだけです。
Poemビューの作成
それではビューを作成します。CDNでjQuery、DataTablesを読み込んで下記のようにします。Spectre.cssはお好みでどうぞ。
app/Views/poems.php
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CodeIgniter 4 jQuery DataTables Tutorial</title>
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
</head>
<body>
<div class="container">
<h3 class="text-center text-primary">CodeIgniter 4 jQuery DataTables Tutorial</h3>
<div class="card">
<div class="card-header text-center text-error h5">
百人一首 一覧
</div>
<div class="card-body">
<table id="poemTable" class="table table-striped table-hover">
<thead>
<tr>
<th>番号</th>
<th>全文</th>
<th>上の句</th>
<th>下の句</th>
<th>歌人</th>
</tr>
</thead>
<tbody>
<?php foreach($poems as $poem): ?>
<tr>
<td><?= esc($poem['id']) ?></td>
<td><?= esc($poem['zenbun']) ?></td>
<td><?= esc($poem['kaminoku']) ?></td>
<td><?= esc($poem['shimonoku']) ?></td>
<td><?= esc($poem['poet']) ?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready( function () {
$('#poemTable').DataTable();
} );
</script>
</body>
</html>
これで完成です。
アプリケーションの実行
それでは表示を確認してみましょう。XAMPPでApacheとMySQLを起動し、ブラウザでhttp://localhost/ci4-datatables-tutorial/public/にアクセスするとデータテーブルが表示されます。
DataTablesの利点はページのリロードなしで並び替えや検索がおこなえることです。「上の句」を押すと上の句を五十音順にして並べ替えができます。
サーチボックスに「花」と打つと「花」が含まれるレコードのみ表示されます。
今回のチュートリアルは以上となります。フロントエンドとバックエンドの技術を連携すると、できることの幅が広がって楽しいですね。ウェブ開発に興味がある方の参考になれば幸いです。