I would like to create an html snippet which pulls information from a mysql database based on the shortened link used to access the site.
Eg test.com/1 is pointed to info.com which then displays the info
"You are assigned to the {{London}} Area Your Area Rep is {{Tom}}, his contact number is {{0207007000}}
whereas test.com/2,(also pointed to info.com which will display:
"You are assigned to the {{Guildford}} Area Your Area Rep is {{Dave}}, his contact number is {{014834834833}}.
The {{}} will obviously not appear, but I've included them to show the variables based on the fields taken from the mySQL database.
The snippet will be added to info.com. Any assistance would be greatly appreciated.
Using open.ai I get the following code, but there seems to be a number of things wrong and I can't work out how to capture the shortlink to define the relevant records :
....<html>
<head>
<script>
document.addEventListener("DOMContentLoaded", function() {
var mysql = require('mysql');
var connection = mysql.createConnection({
host: 'localhost',
user: 'user1',
password: 'password1',
database: 'test'
});
connection.connect();
var query = connection.query('SELECT area FROM reps', function(err, rows, fields) {
if (err) throw err;
var area = rows[0].area;
});
var query = connection.query('SELECT repname FROM reps', function(err, rows, fields) {
if (err) throw err;
var repname = rows[0].repname;
});
var query = connection.query('SELECT contacttel FROM reps', function(err, rows, fields) {
if (err) throw err;
var contacttel = rows[0].contacttel;
});
var areaRep = document.createElement('div');
areaRep.innerHTML = 'You are assigned to the ' + area + ' Area. Your Area Rep is ' + repname + ', his contact number is ' + contacttel;
document.body.appendChild(areaRep);
});
</script>
</head>
<body style="margin: 0;">
<div style="background-color: black; position: fixed; bottom: 0; width: 100%; height: 20px; padding: 20px; opacity: .85; z-index: 1000;">
<svg id="Layer_1" data-name="Layer 1" height="40px" width="40px" style="top: -8px;
position: relative;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800">
<defs>
<style>
.cls-1 {
fill: #fff;
}
</style>
</defs>
<title>openai-symbol-flat-white</title>
<path class="cls-1" d="M617.24,354a126.36,126.36,0,0,0-10.86-103.79,127.8,127.8,0,0,0-137.65-61.32,126.36,126.36,0,0,0-95.31-42.49A127.81,127.81,0,0,0,251.5,234.89,126.4,126.4,0,0,0,167,296.19a127.82,127.82,0,0,0,15.72,149.86,126.36,126.36,0,0,0,10.86,103.79,127.81,127.81,0,0,0,137.65,61.32,126.36,126.36,0,0,0,95.31,42.49A127.81,127.81,0,0,0,548.5,565.11,126.4,126.4,0,0,0,633,503.81,127.82,127.82,0,0,0,617.24,354ZM426.58,620.49a94.79,94.79,0,0,1-60.85-22c.77-.42,2.12-1.16,3-1.7l101-58.34a16.42,16.42,0,0,0,8.3-14.37V381.69l42.69,24.65a1.52,1.52,0,0,1,.83,1.17V525.43A95.18,95.18,0,0,1,426.58,620.49ZM222.34,533.26A94.74,94.74,0,0,1,211,469.56c.75.45,2.06,1.25,3,1.79l101,58.34a16.44,16.44,0,0,0,16.59,0l123.31-71.2v49.3a1.53,1.53,0,0,1-.61,1.31L352.19,568.05A95.16,95.16,0,0,1,222.34,533.26ZM195.77,312.77a94.71,94.71,0,0,1,49.48-41.68c0,.87-.05,2.41-.05,3.48V391.25a16.41,16.41,0,0,0,8.29,14.36L376.8,476.8l-42.69,24.65a1.53,1.53,0,0,1-1.44.13l-102.11-59A95.16,95.16,0,0,1,195.77,312.77Zm350.74,81.62L423.2,323.19l42.69-24.64a1.53,1.53,0,0,1,1.44-.13l102.11,58.95a95.08,95.08,0,0,1-14.69,171.55c0-.88,0-2.42,0-3.49V408.75A16.4,16.4,0,0,0,546.51,394.39ZM589,330.44c-.75-.46-2.06-1.25-3-1.79L485,270.31a16.46,16.46,0,0,0-16.59,0l-123.31,71.2v-49.3a1.53,1.53,0,0,1,.61-1.31L447.81,232A95.07,95.07,0,0,1,589,330.44ZM321.89,418.31l-42.7-24.65a1.52,1.52,0,0,1-.83-1.17V274.57a95.07,95.07,0,0,1,155.9-73c-.77.42-2.11,1.16-3,1.7l-101,58.34a16.41,16.41,0,0,0-8.3,14.36Zm23.19-50L400,336.59l54.92,31.7v63.42L400,463.41l-54.92-31.7Z" />
</svg>
<div style="display: inline-block; color: white; vertical-align: top; margin-top: 4px; font-family: Helvetica, sans-serif;">
Code generated by <a style="color: white; text-decoration: none; font-weight: bold;" href="https://openai.com/blog/openai-codex/">OpenAI Codex</a>
</div>
</div>
</body>
</html>