教えて!gooにおける不適切な投稿への対応について

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

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

よろしくお願いします。

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

gooドクター

A 回答 (3件)

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



案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>
    • good
    • 1
この回答へのお礼

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

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

HTMLだけではできません。


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

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

CGIだな

    • good
    • 1
この回答へのお礼

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

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

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

gooドクター

このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング