MySQLのランキングの仕方について

前提・実現したいこと

MySQLでJavaScriptゲームの成績を管理し、HTMLページに上位5位を表示したいです。

タイピングゲームを作成しています。ゲーム成績としてクリアタイムをランキング化したいのです。サーバーへの書き込みが必要であることからPHPでなくてはならないということは以前学んだのですが、具体的なMySQLとの情報を授受する仕方がわかりませんでした。

どなたかわかる方、お願いします。

該当のソースコード

html
1<script>
2var r=[
3['59:59.95','abc'],
4['59:59.96','xyz'],
5['59:59.97','ijk'],
6['59:59.98','aaa'],
7['59:59.99','zzz'],
8];
9var qs=[
10'baby'
11];
12const viewRank=()=>{
13document.querySelector('#rank span').innerHTML=r.map(x=>x.join(" ")).join("<br>");
14};
15window.addEventListener('DOMContentLoaded',()=>{
16viewRank();
17document.querySelector('#start').addEventListener('click',e=>{
18const t1=e.target;
19const t2=document.querySelector('#a');
20t1.disabled=true;
21t2.disabled=false;
22const name=prompt("お名前を入力してください。");//promptにユーザー名の登録
23if(name=="") name="UnKnown";//無記入の場合、Unknownとして登録
24(async()=>{
25const s=new Date().getTime();//開始時刻取得
26for(var i=0;i<qs.length;i++){
27const qStr=qs[i];
28document.querySelector('#q span').textContent=qStr;
29t2.value="";
30t2.focus();
31await new Promise(resolve=>{
32const timerId=setInterval(()=>{
33if(t2.value==qStr){
34clearInterval(timerId);
35resolve();
36}
37},10);
38});
39}
40const e=new Date().getTime();
41const diff=e-s;
42const str=(10000+diff/1000).toString();
43const time=str.substr(1,2)+":"+
44str.substr(3,5);
45r.push([time,name]);
46r=await r.sort((x,y)=>x[0]>y[0]?1:-1).splice(0,5);
47viewRank();
48t1.disabled=false;
49t2.disabled=true;
50})();
51});
52});
53</script>
54<input type="button" value="ゲーム開始！" id="start">
55<font size="5"><div id="q">Q:<span>ここに問題が表示されます。</span></div></font><div>A:<input type="text" id="a"></div>
56<br>
57<br>
58<br>
59<table border="1">
60<tr>
61<td>
62<div id="rank">現在のランキングトップ５<br>
63<center><span></span></center>
64</div>
65</td>
66</tr>
67</table>

試したこと

MySQL・PHPに関しては初めてなので、いろいろ探してみました。

MySQLで上位ランキング5位を表示する

MySQL
1SELECT * FROM `SampleTable` ORDER BY `LastUpdate` LIMIT 10;

PHPでMySQLからデータを取得する

PHP
1<?php
2
3$link = mysql_connect('localhost', 'testuser', 'testuser');
4if (!$link) {
5    die('接続失敗です。'.mysql_error());
6}
7
8print('<p>接続に成功しました。</p>');
9
10$db_selected = mysql_select_db('uriage', $link);
11if (!$db_selected){
12    die('データベース選択失敗です。'.mysql_error());
13}
14
15print('<p>uriageデータベースを選択しました。</p>');
16
17mysql_set_charset('utf8');
18
19$result = mysql_query('SELECT id,name FROM shouhin');
20if (!$result) {
21    die('クエリーが失敗しました。'.mysql_error());
22}
23
24while ($row = mysql_fetch_assoc($result)) {
25    print('<p>');
26    print('id='.$row['id']);
27    print(',name='.$row['name']);
28    print('</p>');
29}
30
31$close_flag = mysql_close($link);
32
33if ($close_flag){
34    print('<p>切断に成功しました。</p>');
35}
36
37?>