PHPとMySQLの接続方法

Question

PHPを使ってMySQLにデータを追加する形で保存していく方法はどのようにしたらいいのでしょうか。
また、Javascriptでそれをどのように表示したらいいのでしょうか。できるだけ具体例を示していただきたいです。
以下のソースにコメントとして加えています。

<script>
var r=[
/*
ここから５行が表示するランキングなので、ここをMySQLから呼び出すようにしたいのですが、
以前にjavascriptでサーバー上のことはできないと分かったので、やり方がわかりません。
*/
['59:59.95','abc'],
['59:59.96','xyz'],
['59:59.97','ijk'],
['59:59.98','aaa'],
['59:59.99','zzz'],
];
var qs=[
'q1',
];
const viewRank=()=>{
document.querySelector('#rank span').innerHTML=r.map(x=>x.join(" ")).join("<br>");
};
window.addEventListener('DOMContentLoaded',()=>{
viewRank();
document.querySelector('#start').addEventListener('click',e=>{
const t1=e.target;
const t2=document.querySelector('#a');
t1.disabled=true;
t2.disabled=false;
const name=prompt("お名前を入力してください。");
if(name=="") name="UnKnown";
(async()=>{
const s=new Date().getTime();
for(var i=0;i<qs.length;i++){
const qStr=qs[i];
document.querySelector('#q span').textContent=qStr;
t2.value="";
t2.focus();
await new Promise(resolve=>{
const timerId=setInterval(()=>{
if(t2.value==qStr){
clearInterval(timerId);
resolve();
}
},10);
});
}
const e=new Date().getTime();
const diff=e-s;
const str=(10000+diff/1000).toString();
const time=str.substr(1,2)+":"+
str.substr(3,5);
r.push([time,name]);
r=await r.sort((x,y)=>x[0]>y[0]?1:-1).splice(0,5);
viewRank();
t1.disabled=false;
t2.disabled=true;
})();
});
});
</script>
<input type="button" value="ゲーム開始！" id="start">
<font size="5"><div id="q">Q:<span>ここに問題が表示されます。</span></div></font>
<div>A:<input type="text" id="a"></div>
<br><br><br>
<table border="1">
<tr>
<td>
<div id="rank">現在のランキングトップ５<br>
<center><span></span></center>
</div>
</td>
</tr>
</table>

Comments

[yambejp]

mysqlサーバーは用意できているのですね？
PHPでmysqlと接続できるようになったのですね？
接続方法はpdoでよろしいですか？

[m.ts10806]

過去質問ですでに答えているかと思いますが。