connet.lolipop.jp
はじめに
PHP言語を使って超簡易なSqliteデータベースの作成と、ページ捲りやソートまた検索などの機能が実装されている、 「DataTables」の利用方法などについて、ご紹介したいと思います(備忘録)。
なお当サイトは、PHP初心者用で上級様は読みとばして下さい。
準備
1.プラットホーム
OS-Windows。

2.XAMPP
Webアプリケーションの開発をローカルに簡単に構築でき、フリーソフトウェアをパッケージと してまとめた、「XAMPP」フリーソフトを使用します。
・本家サイト
XAMPP
「XAMPP」の操作説明は省略します。

3.プログラムコーディングにテキストエディターを用意
エディターならなんでもかまいませんが(メモ帳でも)、Windowsで動作するフリーエディタで高機能ながら高速で動作する「Notepad++」がお勧めです。
「Notepad++」

4.Sqliteデータベース
・バージョンが5.3以降のPHPが組み込まれている「XAMPP」であれば、Sqliteは標準で搭載されています。

・Sqliteの利用が有効に設定されているか、「php.ini」ファイルの中を確認してみてください。
以下の二つの記述のうち、どちらか先頭のセミコロン(;)が削除されていれば利用は可能です。
もし編集をした場合は、必ずコントロールパネルなどから、Apacheウェブサーバー を再起動して下さい。
-->コントロールパネル(xampp/xampp-control.exe)

xampp/php/php.ini
      ----
      ----
      extension=pdo_sqlite
      ;extension=php_pdo_sqlite.dll
      ----
      ----
      ----
			

5.DataTables
・本家サイト
データテーブル
利用にあたっては、サイト内の規約等をよく確認して下さい。
DataTablesの利用方法
1.CDN
ここでは、CDN経由で読み込んで利用することにします。
      <head>
      <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4-4.1.1/jq-3.3.1/dt-1.10.18/sl-1.2.6/datatables.min.css"/>
      <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script type="text/javascript" src="https://cdn.datatables.net/v/bs4-4.1.1/jq-3.3.1/dt-1.10.18/sl-1.2.6/datatables.min.js"></script></span>
      </head>
2.JS
DataTable読み込みのスクリプト、HTMLのbody終了タグの直前あたりに書き込んで下さい。
lengthMenuは1ページ当たりのレコード数を、プルダウンメニューに表示するオプション。
なくても構いません、この場合は最大10レコード表示。
DataTableのid名は、次項のtableのid名と同じ名前にします。
<script type="text/javascript">
  $(document).ready( function () {	
    var table = $('#mytable').DataTable({  
      // レコードメニュー 
      "lengthMenu":[[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
      // ページの保存
      "stateSave":true
    });
  });	
</script> 
3.HTML
DataTable利用の基本型です。
tableのcssは、class名を変更して自分好みにしてもかまいません。
tableのid名は、2項(JS)でDataTableに設定したid名と同じ名前にします。
<table id="mytable" class="table table-striped table-bordered nowrap" width="100%">
  <thead>
  	<tr>
      <th>Column 1</th>
      <th>Column 2</th>
  	</tr>
  </thead>
  <tbody>
  	<tr>
      <td>Row 1 Data 1</td>
      <td>Row 1 Data 2</td>
  	</tr>
  	<tr>
      <td>Row 2 Data 1</td>
      <td>Row 2 Data 2</td>
  	</tr>
  </tbody>
</table> 
ディレクトリ構成
作成するファイルの配置は、以下のようにします。
・xampp
   |
   htdocs
    |
    sampledatatable
     | 
     index.html
     personDB.php
     select.php
     insert.html
     insert2.php
     update.php
     update2.php
     delete.php
次頁からは、各種のファイルを作成します。
Search
Google


↟ このページの先頭へ