How to connect dynamic HTML to MySQL - javascript

First, I'd like to say this is part of a university undergrad project, so my knowledge will be limited.
I have a MySQL database set up with data and I want to click a button in HTML that queries the database and updates HTML table elements with returned data. I have done A LOT of reading and it always returns to nodejs which I have absolute beginner experience with. I have code set up to query my database with nodeJS which works fine, however, I see absolutely no solution to update the HTML dynamically and I refuse to believe it is not in some way possible. I have read about expressJS templating but this dynamic updating of data is expected to occur hourly from the database (the database is a dummy stand-in for a real-life one) and the expressJS templates are not a good fit at all.
How can I return nodeJS data to a HTML page without serving a new page each time? perhaps return server-side JS data to client-side JS? how does nodeJS allow the HTML to then load client-side JS files? I am unable to get a PHP install working so it's unfortunately not an option. I am open to any alternatives that allows HTML to MySQL connections.
Thanks

I'm not 100% sure what you have set up or what your level of knowledge is, but I hope I can help.
Sounds like you have your server running and querying your DB just fine, so that's good. Now you need to route that to your frontend. This is where expressJS usually comes in. It's a backend framework for creating API's in node. Think of it as a middleman. You send a request to your API, and your API makes a request to the DB and gives you what you want.
To make the request from the frontend, you can use the fetch() API. It's an asynchronous function used to make https requests and receive data. You then need to use that data to dynamically populate your html. Since it's done with javascript, it won't force a reload of the page either.
Feel free to ask questions and hopefully we can get you pointed in the right direction at the very least.

Related

Autodesk Forge - Extension button to get data from external SQL database

I am trying to connect my Forge app to a sql database, but I have no idea how to do that. I am new to forge and web development, so I don't know how to look for the best approach to solve this.
I found a code that does exactly what I want, that is getting the data from a specific table of my database, but I'm not able to put this code inside my forge app, mainly because it uses a require() function and I can't put it inside my extension button.
By the way, I'm trying to make a button in my extension where I click, it access my database and get data from it.
Would be really nice if someone could help me with this silly doubt that probably already has a solution in the internet and I'm not able to find it.
Sorry in advance if it's too obvious.
This problem is more related to web development than Forge.
Your app should be made of 2 parts : the frontend (html/css/js) and a backend (probably nodejs as you tagged it).
Your frontend should not access the database directly. This is the job of your backend.
In your backend, add a library to access your database such as Sequelize (if you are working with NodeJS). Then you will do a request from your frontend to your backend to get the data from the database.
You probably have something working like that for your Forge Access Token, depending on what you use to start your development.

Sending safely JSON to server via an HTML form page

I have an html page that has a form and is communicating to a server via JSON requests, when loading (e.g. in order to remember user's previous answers) and when submit button is pressed (e.g. in order to save his new answers). Every user has a specific user_id that is located as an attribute in the url of the website. I have only HTML pages, CSS and Javascript that makes some simple functions, as well as received and sends the requests.
The problem is that the server needs an api-key for the request to happen, that I need to be kept hidden, but instead is easily discovered when the user sees the source code. I want this specific line to be hidden, but I guess this is not possible without any backend in the game.
I would like to know the easiest and fastest way to get from this state (just frontend, where every piece of information in the source code is totally insecure) to another where the api-key (at least) is not on the open.
I guess the solution is to use a server for that part but I need suggestion on the easiest transition from my code to another. I tried to use GWT, as I am a bit more familiar with JAVA backend application (but not with GWT), but seems like a big trouble, where I need to change my HTML, my Javascript and also the CSS that I have may not be useful, as well as I face a lot of problems when trying to read my parameters.
I know that it is not the best way but I do not have a lot of time to make it work, so sorry if it seems lazy (I am new to this type of programming), but I haven't found anything helpful and I cannot study for 2 weeks in order to be able to begin implementing it.
Is node.js (which is Javascript and I already have implemented the request sending/receiving in this language) easier than GWT for that matter? Will my sensitive data be secure in that way? I would be grateful if there was a similar sample, that I could start using for my implementation, as I haven't find anything that is specifically helpful for my situation.
Thanks in advance!
NodeJs is not javascript, NodeJs is specific javascript "interpreter" whose is purpose is mainly to be executed server-side. If you have an HTML page, it is likely to be loaded in a web browser (client-side), so not in a NodeJs environnement.
Everything that is hard-coded in the javascript of you web page is visible from the client, there is no way around that. So yes, you need some server-ish thing somewhere.
If you are not to manage a server by yourself or via PaaS, you can go for a serverless architecture. For instance, If you consider AWS which I know the most, you can easilly add some user management to your web page using Aws Cognito User Pool. Once a user is connected and have the good permission, he can be granted access to some other resources via a JWT token that you send along with your request.

Simplest way to display API results

Im kind of new to this and looking to expand pulling API results and displaying them on page, whether it's from a blog resource or content generation.
For example, I want to pull from VirusTotal's API to display returned content. What is the best way to capture that in an input tag and display it in a DIV. And what if it were an option to pull from different API's based on drop down selection?
An example of the API to pull content would be here https://developers.virustotal.com/reference#api-responses under the /file/report section.
To call the data from the API, you need to send a request. However, there is a problem with CORS. Basically, you can't call the website from inside your web browser from a page on your local machine, because your browser blocks the request. The web browser will only allow calls to and from the same server, except for a few exceptions.
There's two ways to approach this.
The simplest one is to make a program that calls the API and outputs an HTML file. You can then open that HTML file to read the contents. If you want to update the info, you would need to run that program once again manually. You could easily do this building off the python they provided.
The other, little bit more complex way, is where you host a server on your PC. When you go to the webpage on that server, it sends a request to the website, and then provides the latest information. There's tons of frameworks and ways to do this. For an absolute beginner on this subject, ExpressJS is a good start. You can make a hello world program, and once you do that you can figure out how to call the API whenever a page is loaded, and display the results.

Connecting local HTML files to Sharepoint database

I am new to using this stuff. I need to make some sort of a connection from a local html file on my computer to either Sharepoint or an Access database. I want to be able to pull data from the Sharepoint/Access db and display it on my html page. I also would like to use javascript to accept user input and in turn query those databases with that.
I currently have built some simple vba that outputs an HTML file with table data and another HTML file which houses that table with an iframe on the page. This is very limited and does not provide full functionality. Can anyone lead me in the right direction? Is this even possible without those pages being hosted on a server somewhere? I understand I may need to use PHP, but I do not believe I can use that functionality without having these files on a server.
Forgive me if I do not sound like I know what I'm talking about...I don't really :)
Thanks!

how to retrieve images from database and display in div using java script

Hii,
I want to retrieve data from sql database and display dynamically in div using javascript can anyone please help me on this...
Thanks...
You can not do that using only javascript, as sql queries should be done using server-side technology.
First, you have to find out what kind of web hosting do you have or can afford:
Web Hosting. Usually allows you to use PHP and MySQL.
Virtual Private Server, Dedicated Server. Lets you install anything you want on the host. But, it's usually 5-10 time more expensive.
I suppose you will take simple PHP Web Hosting, as it is cheaper and more avialable.
Here you go with a detailed beginner manual on getting data from MySQL with PHP and providing it to your page: http://www.freewebmasterhelp.com/tutorials/phpmysql
Generally, I can't give you more information than this, as it will same as writing a book on using PHP and MySQL. So I suppose you read that link I gave you, and open separate questions if you have some other specific questions.
If, by any means, you do not want PHP, then you should search for relative documentation.

Categories