質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

4回答

5505閲覧

HTML内にJSで動的にSQLでデータの読み込みについて

shin1977

総合スコア14

MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2018/03/14 13:07

編集2018/03/14 14:02

HTMLでHPを作っています。

MTMLとPHP、mySQLを使って1つのページでデータベースからデータを読み出し、
表示することはできるのですが、動的に実施したいのですが実施の仕方が分かりません。

具体的には、HTML内のJSで一定の動作をしたときに、外部phpファイルを読み込み、そのデータを、
メインのHTML内で反映して表示させたいです。
JSは初心者で上手く作れないでいます。
宜しくお願い致します。

早速の回答ありがとうございます。
もう少し具体的にご質問いたします。(質問が下手ですいません)

GoogleMAPのマーカー位置をデータベースから読み込んで表示しようと考えています。
全てのデータを読み込むとかなりの数になってしまいますので、
地図を動かした度に、データベースから新しく表示座標のデータを読み込み、
JAVAでマーカーを書き直すようなプログラムを考えています。

このようなプログラムの場合、どのような作り方が良いでしょうか?
改めてよろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答4

0

googleマップのマーカー位置をデータベースからやろうとおっしゃっていますが

1.googleマップの表示ができる
2.javascriptでgoogleマップにマーカーを1つ表示できる
3.マーカーを複数表示できる
4.マーカーだけでなくテキストも出したい等のある程度のカスタマイズができる
5.地図を動かしたときのイベントを補足して座標などを出せる

phpでデータベースを取得する以前にhtmlとjavascriptでここまでできないと
データベースを取得したとしても不可能です。javascript初心者とおっしゃっていますが
ここまでできるのか、どこまでできているのか。

ここまでできてようやくデータベースと連携すべき。動的云々言っていますが
最初は静的なSQLで10行ほど発行してマップにマーカー立てたりしてみればいいじゃないですか。

1.phpの環境を作ってある
2.データベース環境を作ってある
3.phpからデータベースにアクセスできる
4.データベースで取得したデータをweb上に表示できる

これも出来てやっとajaxを使えるスタートラインに立てるんですが…。
成果物のコードとかもないので、どんな作りがいいかと問うていますが
答えてもわかるのかどうかが全くわからないので非常に答えにくいです。

上記の中でできないことがあるのならもう少し短期的な目標を立てて
一度実際に作ってみるほうがよろしいのでは?
「道を知っていること」と「歩くこと」は違いますよ。

投稿2018/03/14 14:45

sousuke

総合スコア3828

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

shin1977

2018/03/14 14:53

説明不足ですいません。1~4はすでに実施済みです。単一ページでデータベースから読み込み、MAPにマーカーを無数に表示できてはいます。ただデータ量が多いので、マップを動かす度に、必要分のみをDBから読み込みたく、その手順が分からず苦戦しておりました。 MAPのスクロールのイベント発生等もできましたが、そこからどのようにDBにアクセスすれば良いか分からずにいました。 説明不足ですいません。
shin1977

2018/03/14 14:56

できているのは1~5でした。
sousuke

2018/03/14 15:02

phpが使えるのであればajaxで非同期に処理することになります。5が出来ているのであればデータベースに問い合わせて目的のデータが取得できるはずです。
guest

0

ベストアンサー

具体的には、HTML内のJSで一定の動作をしたときに、外部phpファイルを読み込み、そのデータを、

メインのHTML内で反映して表示させたいです。

題名と質問文に若干のズレがあるように見えますが、上記部分だけにフォーカスするのであれば、Ajaxを使ってPHPで作ったAPIを呼び出すことで実現できるのでは無いかと思います。

投稿2018/03/14 14:01

bassbone

総合スコア767

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

shin1977

2018/03/14 14:08

ネットで調べ「Ajax」が近いと思いましたが、JSで検知したときに、どのようにPHPファイルでSQLを作り、データをやり取りしていくのかイメージができないでいます。すいません、宜しくお願い致します。
shin1977

2018/03/14 14:20

もう少しAjaxについて調べてみたいと思います。 ありがとうございました!
guest

0

GoogleMapをまず出力(このとき、半径xx以内の位置のものを取得するようにしておく)★A

そのMapに対して、mousemoveかmouseupなどのイベントを取得し、

MAPが移動した時、その時点での地図の中心座標を取得
https://www.ajaxtower.jp/googlemaps/gmap2/index5.html

javascript

1var map = new google.maps.Map(document.getElementById("map"), opts); 2 3var latlng = map.getCenter(); 4var lat = latlng.lat(); 5var lng = latlng.lng();

AjaxでDBにアクセスし、取得した中心位置から、半径xx以内の位置のものを取得(★Aと同じロジック)

取得された物を複数マーカーとし、再描画
https://www.tam-tam.co.jp/tipsnote/javascript/post7755.html

こんな感じでいけないかなと思いますが、どうですかね…。
組合わせてやって見たことが無いのでなんとも言えないですけど。

投稿2018/03/14 14:25

kszk311

総合スコア3404

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

shin1977

2018/03/14 14:40

具体的で大変助かります。 AjaxでDBにアクセスの部分で苦戦してしまっているので、Ajaxについて調べて見たいと思います。
guest

0

動的にというのは、PHPに対してJSからSQLクエリを送信して、その通りの操作を行うということでしょうか。
それでしたら最悪Eval関数を使用して、クエリをデーターベースに送信するコードを実行させればいい話なのですが、そのような外部からSQLに直接命令できるシステムというのは、言い換えれば簡単に外部から除かれたり好き勝手されてしまうということです。
特にJAVASCRIPTでしたら、難読化ツールなどを使用したとしても解析できてしまうため、絶対にお勧めいたしません。

投稿2018/03/14 13:51

sanjo

総合スコア14

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

shin1977

2018/03/14 14:04

ありがとうございます。質問が下手ですいません。質問文に追記しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問