Develop Reference

How do I connect Azure SQL to my HTML5 web app

Today I set up a new Azure SQL database and HTML5 Webapp to replace an existing Google Apps Script which wasn't working on iPhones. I have the database connected to the webapp with the connection string, and I want to know how to simply post the details from the html form into the SQL database.
Previously I have been using javascript in GAS with a firebase backend, so I am missing a bit here. Although I can see the connection string in my webapp, I don't know how to then call or post the html form information.
I looks at the functions app method but can't really find the code to post html data, plus how I trigger that from clicking a button on the client side.
I found this code which say it will work, but not to use it because it leaves your database open to hackers.
<script>
var objConnection = new ActiveXObject("adodb.connection");
var strConn = "driver={sql server};server=QITBLRQIPL030;database=adventureworks;uid=sa;password=12345";
objConnection.Open(strConn);
var rs = new ActiveXObject("ADODB.Recordset");
var strQuery = "SELECT * FROM Person.Address";
rs.Open(strQuery, objConnection);
rs.MoveFirst();
while (!rs.EOF) {
document.write(rs.fields(0) + " ");
document.write(rs.fields(1) + " ");
document.write(rs.fields(2) + " ");
document.write(rs.fields(3) + " ");
document.write(rs.fields(4) + "<br/>");
rs.movenext();
}
Can anyone please let me know what I am missing to get the SQL database and html5 web app talking?
Thanks

First of all you should not connect to any database from an HTML app which runs on the client side the user will be browsing the site which have a huge security impact. Connecting to a database (it could be sql,mysql or any) happens on the server side, which is where you host your application.
In order to connect to the database you will have to use server side technologies such as node,php or asp.net etc.

Dynamically load different spotfire report from different Spotfire server

In our web application, we are integrating spotfire reports using "TIBCO Spotfire JavascriptAPI"
We need to display reports from multiple spotfire servers. for example we have one visualization report in "spotfire.cloud.tibco.com" and another report is in "spotfire-next.cloud.tibco.com"
In order to load report from these two servers, i need to include two SF servers like below
<script src="https://spotfire-next.cloud.tibco.com/spotfire/js-api/loader.js"></script>
<script src="https://spotfire.cloud.tibco.com/spotfire/wp/GetJavaScriptApi.ashx"></script>
so if i instantiate report using spotfire instance like "spotfire.webPlayer" which spotfire server will get trigger ?
var serverUrl = "https://spotfire-next.cloud.tibco.com/spotfire/wp/";
var analysisPath = "/Samples/Expense Analyzer Dashboard";
var customizationInfo = new spotfire.webPlayer.Customization();
var app = new spotfire.webPlayer.Application(serverUrl, customizationInfo,analysisPath);
var doc=app.openDocument("container");
var serverUrl2 = "https://spotfire.cloud.tibco.com/spotfire/wp/";
var analysisPath2 = "/Samples/Expense Analyzer Dashboard2";
var customizationInfo2 = new spotfire.webPlayer.Customization();
var app2 = new spotfire.webPlayer.Application(serverUrl2, customizationInfo2, analysisPath2);
var doc2=app2.openDocument("container2");
In order to load report from two different Spotfire server how can i achive this?

so if i instantiate report using spotfire instance like
"spotfire.webPlayer" which spotfire server will get trigger ?
Spotfire 7.6 and above uses Spotfire Server as a Load balance for Webplayers installed as Nodes. So based on Spotfire server request will go to Webplayer nodes managed by that server.
If you want to run your reports on specific Server/Webplayer Instances follow these steps:
create 2 resource pool Named: "Dashboard" and "Dashboard1"
assign some Webplayer instances from "server 1" to "Dashboard" pool
assign some Webplayer instances from "server 2" to "Dashboard1" pool
now you can assign reports to appropriate resource pool

I don't know if it would work but what if you staggered the scripts.
<script src="https://spotfire-next.cloud.tibco.com/spotfire/js-api/loader.js"></script>
<script>
var serverUrl = "https://spotfire-next.cloud.tibco.com/spotfire/wp/";
var analysisPath = "/Samples/Expense Analyzer Dashboard";
var customizationInfo = new spotfire.webPlayer.Customization();
var app = new spotfire.webPlayer.Application(serverUrl, customizationInfo,analysisPath);
var doc=app.openDocument("container");
</script>
<script src="https://spotfire.cloud.tibco.com/spotfire/wp/GetJavaScriptApi.ashx"></script>
<script>
var serverUrl2 = "https://spotfire.cloud.tibco.com/spotfire/wp/";
var analysisPath2 = "/Samples/Expense Analyzer Dashboard2";
var customizationInfo2 = new spotfire.webPlayer.Customization();
var app2 = new spotfire.webPlayer.Application(serverUrl2, customizationInfo2, analysisPath2);
var doc2=app2.openDocument("container2");
</script>
Could you download one of the loader.js and append a prefix manually and load that to your site and reference it.
You could build them in separate pages and then pull them in iframes if not overly complicated pages.
It's definitely a problem as JavaScript overrides same named functions with the last one.

Scan folder for .shp extension and add to leaflet map

I am trying to scan a folder for all .shp files and add them to my leaflet map as a layer. The problem I'm having is that AJAX doesn't appear to be able to scan a folder, rather it is only capable of searching for specific files. I need it to be able to scan the folder because the .shp files will be overwritten periodically with new file names and I don't know how many files will be there at a given time. If there are no files in the folder, I need a popup to notify that maps are unavailable (this works in the current website). The code for this section is provided below. I've tried using PHP, but I can't figure out how to incorporate that with JavaScript.
I'm not a programmer, but I have stumbled through developing our website on my own. You can view it here: http://hsvfms.azurewebsites.net/map.html
If I haven't provided enough information or have given this information out of context, please let me know. Also, check out the website and let me know what you think.
var noMaps = L.control ();
var profile01 = new L.LayerGroup();
var profile02 = new L.LayerGroup();
$.ajax({
type:"GET",
url:"Aldridge_Unet/",
success: function(data) {
$(data).find("a:contains(.shp)").each(function(){
var mapList=[];
var profile0 = new L.Shapefile(mapList[0],{color:'DarkCyan',fillOpacity:'0.5', opacity:'5', weight:'1'}).addTo(profile01);
var profile1 = new L.Shapefile(mapList[1],{color:'DarkCyan',fillOpacity:'0.5', opacity:'5', weight:'1'}).addTo(profile02);
})
},
error: function (xhr, status, error) {
if(xhr.status==404){
noMaps = L.control ({position:'bottomleft'});
noMaps.onAdd = function(map) { var div = L.DomUtil.create('div', 'info legend');
div.innerHTML += '<img src="Images/map_not_available.png" alt="legend" style="width:275px;height:75px;background-color:white">';
return div;};
}
}
});
var overlays = [{groupName:"Inundation Boundaries", expanded:false, layers:{"Max Value":profile01}},];

Cannot be done. JavaScript code cannot access the filesystem of the computer the browser is running in (let alone watch a path for changes).
AJAX (and fetch and similar techniques) are just ways of fetching information from another computer (the web server). If your question really is "when something changes in the web server, how can I update the clients?" then the answer is probably WebSockets, socket.io, and similar techniques.

Deconstruct/decode Websocket frames like Google Chrome does

I'm connecting to a website via websocket connection (client to server), I know how to encode the data and write it to the server (using the net module in node.js) but when I'm reading the data back I get odd characters in front of the important data, like if I'm suppose to get:
// Data needed on the left and data I'm receiving from websocket on the right
'inited\r\n' -> '�inited\r\n'
'n:2\r\n' -> '�n:2\r\n'
This is how I am getting the data from the server
Klass.prototype.connect = function(){
// this.port is equal to 8080 and the exact server varys, but it's not that important anyways since the problem is decoding the data properly.
var that = this;
var buffer = "";
this.socket = new net.createConnection(this.port, this.server);
this.socket
.on("connect", function(){
that.sendHandshake(); // just sends a standard client to server handshake
})
.on("data", function(recv){
// .split('\r\n\r\n').join('\r\n') needed to separate the server handshake from the data I am trying to parse
buffer += recv.toString('utf-8').split('\r\n\r\n').join('\r\n');
while (buffer){
var offset = buffer.indexOf('\r\n');
if (offset < 0)
return;
var msg = buffer.slice(0, offset);
// parseMsg(msg)
buffer = buffer.slice(offset + 3);
}
});
};
I am probably doing a lot of things improperly in the code above, but I'm not quite sure how to do it exactly so that is the best I got for now.
Problem is I don't know how to remove the mystery/special characters. Sometimes there is only 1 mystery/special character, but other times there is multiple ones depending on the data but they are never after the important data I need to check.
When I use Google Chrome and view the data on through tools->JavaScript console->network tab and find the websocket stream I'm looking for Google parses it correctly. I know it's possible since Google Chrome shows the correct frames, how do I deconstruct/decode the data so I can view the correct frames on the terminal?
I don't really need it in a particular language as long as it works I should be able to port it, but I would prefer examples/answers in node.js since that is the programming language I am using to connect to the server.

what does the line var connection = new ActiveXObject("ADODB.Connection"); mean and why doesn't it work?

I have found a code in net, and there is a code line there, which I don't undersand it meaning and what does it do. Moreover the line doesn't work. Can anyone help?
the code-
var connection = new ActiveXObject("ADODB.Connection"); /*the line*/
var connectionstring = "Data Source=srvp7rnd-herm;Initial Catalog=hermes;User ID=hermes;Password=hermes;Provider=SQLOLEDB";
connection.Open(connectionstring);
/* JavaScript obect to access a SQL query's results */
var rs = new ActiveXObject("ADODB.Recordset");
/* Getting the current MAX(id) from the database */
rs.Open("SELECT MAX(id) FROM Screen_Template", connection);
rs.MoveFirst;
var maxID = rs.Fields.Item(0);
maxID = maxID + 1;
/* TODO: Get the last UID */
var sql = "INSERT INTO Screen_Template(template_name, OpCo, env, template_xml, language, id, title, role, UID) VALUES (" + templateName + "," + opco + "," + env + "," + "<hello>hello</hello>" + ",eng," + maxID + ",Hermes SMS message composer," + "manag, 10)";
alert(sql);
rs.Open(sql, connection);
/* Closing the connections */
rs.close;
connection.close;

The code you are looking at is either javascript, or Microsoft-flavoured jscript. The code can be either server side in ASP-Classic (Jscript was an option here, albeit unusual - most coded server side in VB Script), however, given that there is an alert half way through the page, it is likely that intended for client side, on a browser.
The lines
var connection = new ActiveXObject("ADODB.Connection");
and
var rs = new ActiveXObject("ADODB.Recordset");
attempt to create an Active X component (aka Component Object Model, or COM) of ADODB.Connection and ADODB.Recordset, respectively, and then use these to insert data into the database. You can get reference to these here, although not that most of the reference is in VB :(
So here is a list of some of the possible issues:
The code will only ever run in IE browsers
You may need to download and install the COM components - ADO is installed via MDAC - Download here
You may need to run IE as an Administrator
You may need to open all sorts of security loopholes in IE (ActiveX controls, safe for scripting etc)
If you enable script debugging on the browser you'll get more info on the actual issue.
I guess I need to point a couple of other major issues:
The concatenated sql string is prone to sql injection attacks (although obviously anyone viewing the page source can do whatever they like to the database anyway) - parameterization is the solution here.
SELECT Max(ID), incrementing, and inserting isn't concurrent safe - the solution here is to use an IDENTITY or GUID
However, all that said, this is obsolete technology, a security nightmare, and architecturally just plain wrong IMO - possibly you can convince your school to redesign the code using a more modern technology stack? (Sorry to be the bearer of bad news)