HTMLで今、簡単な表を作成することを学んだのですが、今度はDBからデータを持ってきてそれを表にして出力するようにしたいのですが、まず、何からやったらいいのか分かりません。
データはDBにあるものすべてを表示し、それぞれのデータひとつひとつに修正ボタンと削除ボタンを付けたいと思います。
よろしくお願いします。
例 (作りたいものを再現してみました)
|ーーーーーーーーーーーーーーー|
|名前 |番号 | |
|ーーーーーーーーーーーーーーー|
|佐藤 |1 |修正 |削除 |
|ーーーーーーーーーーーーーーー|
|田中 |2 |修正 |削除 |
|ーーーーーーーーーーーーーーー|
No.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>
No.2
- 回答日時:
HTMLだけではできません。
DBにアクセスできるプログラム言語を使って、DBにアクセスするためのSQL言語をその言語内で記述します。
なお、DBを構築するための操作知識も必要となります。
さらに、Webサーバ関連の知識も必要です。
また、JavaScriptも必須になりそうですね。
それから、CGIを使う場合も同様です。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- その他(データベース) pythonでsqlight勉強中、クエリー結果の利用法教えて下さい 1 2022/04/28 20:38
- Excel(エクセル) 重複したデータ(空白は除く)のVBA表記について 4 2022/08/15 07:28
- Ruby pandasでsqlite3にテーブル作成・追加・読み出しでindexの取り扱い方教えてください 5 2023/03/08 09:57
- Access(アクセス) Access 登録ボタンからサブフォームの更新 1 2022/07/22 10:23
- SQL Server DBのテーブルの設計ができず困っています。 2 2023/06/29 16:43
- その他(ブラウザ) IE・edgeで日増しに観られるサイトが減ってくる。 1 2022/10/04 22:40
- Word(ワード) wordの修正履歴について 3 2023/01/05 23:50
- Access(アクセス) docmd.gotorecordを起動するには 5 2022/06/17 15:20
- IT・エンジニアリング ドメイン駆動設計の値オブジェクトについて質問 1 2023/05/13 02:50
- Visual Basic(VBA) Excel VBAのリストボックスの値を他のフォームに反映させる方法を教えてください。 2 2023/07/14 14:06
このQ&Aを見た人はこんなQ&Aも見ています
-
プロが教える店舗&オフィスのセキュリティ対策術
中・小規模の店舗やオフィスのセキュリティセキュリティ対策について、プロにどう対策すべきか 何を注意すべきかを教えていただきました!
-
HTMLとデータベースの連携
HTML・CSS
-
プルダウンメニューにDBの内容を表示させる
PHP
-
htmlでテーブル内にテキストボックスを作りたいのですが・・・
HTML・CSS
-
-
4
htmlコードで書かれた表にphpでdbから取得した値を挿入したい
MySQL
-
5
MySQLのDB内容をWEB上に表示するには、どうしたらいいですか?
MySQL
-
6
htmlでfor文使えますか?
HTML・CSS
-
7
PHP ボタンが押されたら処理を実行する
PHP
-
8
html テーブルのセルにリンクを張りたい
その他(コンピューター・テクノロジー)
-
9
php mysql で WHERE句内に変数を入れる方法を教えてください。
PHP
-
10
Eclipseのアンインストールの仕方
Java
-
11
dbに登録したデータをphpのプルダウンに表したい
PHP
-
12
phpで複数の検索語を検索対象にしたい
PHP
-
13
python エラー
その他(プログラミング・Web制作)
-
14
HTMLの値の渡し方について質問です。 HTMLで値を今の画面から次の画面に渡すにはどういう文を使う
HTML・CSS
-
15
htmlファイルを開いた時の画面サイズ指定の方法
JavaScript
-
16
tableタグとformタグの組み合わせ
HTML・CSS
-
17
プルダウンメニューでValue値をPHPへの受け渡しができません
HTML・CSS
-
18
別PHPファイルに変数を渡す
PHP
-
19
ACCESSのデータをWebブラウザで表示(イントラ環境)
その他(データベース)
-
20
連動させたいセレクトボックスについて。
PHP
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
saved from url=(0013)abou
-
リンクを押すとEXEファイルを実...
-
ローカル用HTMLファイルの安全...
-
HTMLでDBからデータを表形式で...
-
subversionでコミットしたらftp...
-
サーバー側でのサイト表示がお...
-
Ajaxはサーバ介さないとxmlファ...
-
カーソルの動きに合わせてDBか...
-
JQuery サーバー上にアップする...
-
ASP.NET(VB)VBソースからJavas...
-
【JavaScript】confirmのボタン...
-
[JavaScript] preven...
-
Ajaxでpostした内容のresponse...
-
読み込み中に「Now Loading」を...
-
HTMLでリアルタイムグラフを作...
-
wininet.dllのInternetOpenの同...
-
非同期通信を使うタイミングが...
-
ローカルネットワーク内での502...
-
外部プログラム実行時の戻り値
-
データ受け渡しについて
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
HTMLでDBからデータを表形式で...
-
saved from url=(0013)abou
-
リンクを押すとEXEファイルを実...
-
Flickity で画像にリンクを貼る...
-
ローカルでのhtmlチェックにつ...
-
ソースのリンク先などの暗号化...
-
F5などで更新すると、画像やCSS...
-
ローカル用HTMLファイルの安全...
-
テーブルで作った表をボタン操...
-
htmlからhtaへのリンク
-
Python3, Flask, Jinja2などで...
-
インターネット上のファイルサ...
-
HTMLファイル内にformの記述を...
-
HP作成の際、どうしていますか?
-
suEXECとパーミッションの関係...
-
HTMLファイルにテキストファイ...
-
subversionでコミットしたらftp...
-
現在HPを制作中で、jQueryプラ...
-
imageタグの画像データを取得す...
-
ajax googlmap
おすすめ情報