Methods to pull data and display on web browser - javascript

Please look at my project architecture below.
I intend to use Arduino as Web server and pull data into the SQL database of my PC. I have installed XAMPP, so I have the apache server and MySQL running in my PC. I have verified that data from Arduino is updating a table in the SQL DB.
Question:
I'm not a web-developer and I have been exploring different ways of pulling data from the SQL DB and showing it on web-page.
My requirements:
Pull live data from the SQL DB (as it gets updated) and show it on web page
Plot graphs of recorded parameters from the db as and when required. I understand that Flot is a tool which can do that.
Make a drawing as shown in the image above and populate that with dynamic values (numbers) or change colors of objects (such as green/red)
Methods I have come across so far
Use PHP to pull the data and show on webpage. Use HTML/Javascript/jQuery to create such drawing and populate with image and values
Use Python to pull data and use HTML/Javascript/jQuery (I know only HTML among these)
Use Visual Basic to pull data directly from Arduino and display it in a form. For this option, I'm not sure if plotting data is possible or not.
This of-course is a broad question and as I said I'm not a web developer. But I'm in no hurry. I have couple of months of time to invest and learn the different languages involved.
I wish the answers could guide me to a better solution than I know or chose one among the others or just point out plus-and-minus of each of the options

You can use EventSource at JavaScript to stream data from PHP or Python the the HTML document.

Related

Exchanging information between database and service worker or PWA

I have an online app that im trying to convert into a PWA, but I dont know how to achieve some things.
The most difficult one is passing database (mysql) info, as it is necessary because its an app that makes a lot of math and it gets the formulas out of the database one by one when needed.
I was wondering if it would be possible to pass those formulas and database info to the service worker, the same happens with php files as I have read it only accepts html, js and css.
Thanks

How can i connect JavaScript to a SQL server?

I work as an intern in a manufacturing company that designed a HTML web page run by JavaScript that is supposed to show real time statistics of the machine lines.
To do this it must connect to a SQL server in real time to obtain the data that it needs to display charts and reports.
I have good knowledge of other programming languages but I'm a rookie at JavaScript and I would like to know the safest way to do this, since the database contains sensitive data.
Can this be done?
You need some sort of middleman to connect to the database. Since you want to do this with JavaScript, I suggest you checkout NodeJS . You can then build a simple API that when consumed it will return the data required. One benefit of building an API is you will be able to consume it from the website that is already built without having to make any changes in the back end. You can simply use fetch the data from the front end using JavaScript.
Don't do this directly with Javascript in your HTML file in client-side(It is not secure).
Do this with any language that you know on the server side and read those data using ajax and display them in your HTML file.

How to integrate Node.js into a PHP Website?

Basically, I want to run my website with PHP using MySQL, and saving the data stored in an input / textarea on the database. This is pretty simple and I have no issues at doing so, but what I can't seem to figure out is how to integrate Node.js into this same website to take the user information previously entered and rendering it realtime. (Probably using Socket.io).
I believe this is a way to explain myself in a much simpler way:
Basic Website (HTML,CSS, JS) -> Processed and saved to Database with PHP -> Node.js takes this data and renders it to make realtime communication possible.

Using a server to send/receive information between a mobile phone and web page

I am trying to set up a simple set up as follows:
Have a mobile app with a page consisting of 4 lines (4 html paragraph lines (I am using phonegap)).
I want to use a web page from which I will input the data for those 4 lines. This information is sent to a server and that server transfers this information to that app on that mobile phone. Now, those 4 lines on the mobile phone is filled with the new information.
Similarly user inputs information on another page consisting of 10 lines of li (list). This information is again sent to the server and to the web page where the information is displayed.
I can almost feel the "internet police guys" getting all hyped and ready to vote this question down. But please understand that I have been on this site and various forums desperate to find a tutorial to guide me to do this and not able to find.
I am trying to use ajax to perform this setup. Confused how I would be using the php file. Information such as password n username is going to go in that php file to connect to the server. But php is a server side script thus needs to sit at the public_html folder. How do I use the php file from my desktop? Write a separate javascript to access it?
It is the concept that is confusing me. I am familiar with html,js,php.
I would appreciate any guidance or maybe a link to a tutorial which would help me to do the concept I mentioned. Thanks for listening.
You will need to create an API using PHP. This API is uploaded to your server and is considered "RESTful". Google a tutorial for what fits your needs. You can set all sorts of rules in this API such as requiring any requests to have an ID or access token.
Since you are using PhoneGap, your HTML and JS files rest on the device, so you will need to allow permissions to your API from anywhere. For this you will have to speak to your host provider about unless you know how to configure it yourself (some providers restrict what you want to do by default as an extra security precaution against XSS attacks).
Next, you can either use jQuery, or you can write some AJAX calls by writing the JavaScript yourself.
The most efficient way for this to work is to send JSON objects to and from the API. You will include a "command" in the JSON when you are sending from your app. On the PHP side, you will retrieve this command and use the rest of the data included in your JSON object to process the request. Your API will need to encode a JSON object for return (such as a user's profile information).
Here is a basic PHP API tutorial to get you going that explains some of the features of a RESTful API: PHP API
Here is a simple AJAX function (you will probably want to make this much more modular): AJAX
As broad as your question is, it seems like the best/easiest thing for you to do will be for you to first create a PHP webpage that will access a SQL database to perform the record updating. Actually, this should serve all of your needs for your mobile users assuming you don't need push notifications for live data updates.
I am assuming, since you are using phone gap, that you are more comfortable with web languages. After you get the webpage fully operational, then you should start building your app based on that exact same SQL database. With mobile app development there are a lot more "what if's" (what if the phone rings, what if the app is running in the background, what if there is no cellular service, etc...)
It is always easier to start with what you know and build on that, rather than starting with a new development platform and troubleshooting as problems arise.

Can I access Notes documents/collections via client side JS?

I wanted to know if it's possible to handle notes views and document collections via client side scripting in Xpages?
The story so far....I am building a HR system that includes a full absence section (holidays, sickness, other absence etc). I have coded a button in the notes client that creates an Excel spreadsheet showing a calendar of the last 12 months absences for the current user based on the absence documents (getview, getalldocumentsbykey into collection). It loops the collection using various fields (incuding multi value fields) in each document to calculate absence length, full/half days etc and marks them on the sheet in different colours with hyperlinks to access the documents.
It also calulates other things like the Bradford Factor rating and does calculations around the users working days.
Anywho, I've been challenged to get the entire system working in a browser, removing any need for the notes client, so....back to my original question, I need to be able to get a collection of documents from a notes view via a key that I can then access the field on via client side javascript.
Is this possible? I can provide more info if required...
Have you considered the Notes Browser Plugin? It is supposed to let you run the Notes Based Apps through the browser without modifying the code.
Here is a write up about it
I think you should go for REST. In Domino, it can provide data from views/documents in JSON format which you can use in client side JavaScript natively.
For more info try searching google and ddwiki, for example this tutorial video.
Edited to put emphasis on &ReadViewEntries and add detail
Doing it purely on the browser-side would probably best be done by fetching DXL or JSON using the &ReadViewEntries URL command, and then writing Javascript to process the data and do the equivalent of the CreateObject call locally. You can find the doc for &ReadViewEntries here. (#Panu has already mentioned DDS, which is also a good idea.)
Or see here for some sample code that shows a technique that a Domino web agent written in LotusScript can use to create data that will be sent to the browser with a content-type header that causes it to be opened in Excel. I haven't verified this particular code, but I've seen other references to the technique. This particular code might not give you as much control as you want -- e.g., colors and links, but I think it would also be possible to actually generate the data as XML in the xlsx format and send that down similarly.
You can access all Domino objects from client side JavaScript vith Java and CORBA. You just need a small applet that returns Session to javascript. Here are instructions from Designer help:
http://www-12.lotus.com/ldd/doc/domino_notes/rnext/help6_designer.nsf/9/0d05bb3cec358f7085256c54004bdbff
However as Per suggested nowadays a combination of client and server side Javascript in XPages are usually used instead of CORBA. Domino Data Service is the latest way to get data from server to (for example) client side javascript.
You may also want to take a look at Apache POI with which you can create Excel files in server side. ActiveX works only in IE althought there are plugins to get it working on other browsers.
edit
What I usually do with "combination of client and server side Javascript" is to use dojo.xhrGet (or xhrPost) in client side. On server I have an XPage (earlier agent) which collects the data and returns it in JSON format.
Panu

Categories

Resources