HTMLでDBからデータを表形式で表示するには？

HTMLで今、簡単な表を作成することを学んだのですが、今度はDBからデータを持ってきてそれを表にして出力するようにしたいのですが、まず、何からやったらいいのか分かりません。

データはDBにあるものすべてを表示し、それぞれのデータひとつひとつに修正ボタンと削除ボタンを付けたいと思います。

よろしくお願いします。

例　(作りたいものを再現してみました)
｜ーーーーーーーーーーーーーーー｜
｜名前　｜番号　｜　　　　　　　｜
｜ーーーーーーーーーーーーーーー｜
｜佐藤　｜１　　｜修正　｜削除　｜
｜ーーーーーーーーーーーーーーー｜
｜田中　｜２　　｜修正　｜削除　｜
｜ーーーーーーーーーーーーーーー｜

No.3 ベストアンサー 回答者： Ogre7077 回答日時： 2021/02/28 23:20

質問文からは、どのような形態を想定しているのか判断がつかなかったので、思いつく限りで回答します。

案1. HTML に埋め込んだ JS スクリプトから、ブラウザの DB 機能を使用する
HTML ファイルを Web サーバーを介さずにブラウザ表示させる形態を想定
https://developer.mozilla.org/ja/docs/Web/API/We …
https://developer.mozilla.org/ja/docs/Web/API/In …

案2. HTML に埋め込んだ JS スクリプトから、クラウド型 DB サービスを使用する
Web サーバーに格納した HTML ファイルを単純表示させる形態を想定
使用する前にサービスの契約や設定が必要
https://cloud.google.com/firestore/

案3. プログラムから、サーバー上で動作させている DB ミドルウェアへ接続し使用する
HTML を生成するプログラムをサーバー機に配備し表示させる形態を想定
自前サーバーならミドルウェアの導入と環境設定が必要
https://docs.mongodb.com/guides/
https://dev.mysql.com/doc/refman/5.6/ja/
クラウド型ならオプション契約や設定が必要
https://manual.sakura.ad.jp/cloud/appliance/data …

実装例として、案1 で簡単に HTML を組んでみました。
<script>
var storage = window.localStorage;
const W = (mems)=>storage.setItem("members", JSON.stringify(mems));
const R = ()=>JSON.parse(storage.getItem('members'));
window.onload = function(event){
W([ {no:1,name:"楊"}, {no:2,name:"村井"}, {no:3,name:"戸田"} ]);
var members = R();
var rows = members.map(m=>"<tr><td>"+m.name+"<td>"+m.no+"<td><button>x</button>").join("\n");
var table = "<table border><thead><tr><th>name<th>no<th>-<tbody>"+rows+"</table>";
document.querySelector('#members').innerHTML = table;
}
</script>
<section id=members></section>

この回答へのお礼

たくさんの情報ありがとうございます。
一歩一歩頑張ります。

お礼日時：2021/03/01 15:05

No.2 回答者： lv4u 回答日時： 2021/02/27 17:21

HTMLだけではできません。

ＤＢにアクセスできるプログラム言語を使って、ＤＢにアクセスするためのＳＱＬ言語をその言語内で記述します。
なお、ＤＢを構築するための操作知識も必要となります。
さらに、Ｗｅｂサーバ関連の知識も必要です。
また、JavaScriptも必須になりそうですね。

それから、CGIを使う場合も同様です。

No.1 回答者： yomyom01 回答日時： 2021/02/27 17:06

CGIだな

この回答へのお礼

コモン　ゲートウェイ　インターフェースのことですか？

お礼日時：2021/02/27 17:11