I have a Wordpress site and I need to access data from one of my databases in some javascript/jquery.
Conceptually, what is the best way to do this? I considered installing a plugin to allow PHP in the Wordpress "Custom HTML Element", but would that be just as unsafe as accessing the MySQL database with Javascript? Should I make an event handling php script that lives elsewhere?
This will be used for user-specific sensitive data so it needs to be as secure as possible.
Not asking for any code, just not sure what a secure data flow would look like here. Thanks!
WordPress has a handy REST API that's pretty easy to extend. This is exactly what APIs are for in general - accessing data stored on another domain. Remote MySQL connections are totally possible and sometimes necessary, but for simply display a little data, using or building a simple JSON API is often the preferred method.
Depending on what information you're adding/pulling via the API (either the native WP REST API, or custom one), you may want to authenticate the requests with a key of some sort - and it sounds like this is something you'll need to do based on your concerns of viewing data.
Using an API like the WP Rest api lets you get just about any information you want, typically as a JSON string, which you can then display/modify with JavaScript, PHP, etc.
Related
I only plan to use html, mysql, javascript and jquery.
I know learning php will be a great help in the future but it will take me too long to learn everything in a week.
For the sever side I use servlets..
Thank you
As far as I know, no. Well, strictly speaking, you don't need PHP, but you will need some server-side technology.
Assuming the data you need to autocomplete exists in mySQL, and you use jQuery.ajax() or similar to get the information on the fly, you still need some data access layer in between, which is where PHP or similar comes in. Of course, if you're accessing data that has been exposed by an API, you might have better luck.
MySQL runs on your server, but the browser can't open a socket directly to it to do queries. See: How to Use Sockets in JavaScript\HTML?
So you will need something on the server that talks to MySQL and responds back to your jQuery code. I'm all with you that you don't want to learn PHP. If you already know javascript, you can use node.js on the server. It has libraries to talk to MySQL: MySQL with Node.js
You won't be able to connect to your mySQL database directly using Javascript running on the client. The only possible way I can imagine is using another database system which offers an HTTP-interface (such as Apache Cassandra) or using a plugin for mySQL which does this job (I could not find an officially supported one, maybe you got more luck). This way, you could query data using Javascript/Ajax directly from your client.
But keep attention to security concerns, such as SQL injections or handling of client connections, which gets much more complex if you are not using a middle tier (PHP, nodejs, Java, etc.) running on a web server.
You have to use any server side technology for autocomplete. Without using any server side technology you can't create autocomplete (you can do it by adding some dummy records)
I found third party plug ins to do this
devbrige,
intellesense,
jquery auto complete
http://www.techyari.in/2014/04/jquery-autocomplete-ajax-tutorial-j2ee-json-mysql.html
https://github.com/devbridge/jQuery-Autocomplete
though I am still trying to work the codes out
As I can't orientate freely in the topic of building dynamic sites, it is quite hard to me to google this. So I'll try to explain the problem to you.
I'm developing a simple social network. I've built a basic PHP API represented by the files like "get_profile.php", "add_post.php", etc. with the POST method that is used to pass some data. Then I try to get the data using JS AJAX (php functions return it by JSON), which means I get all the data that I need to show on a page after the page is loaded. That causes decreasing of a page loading speed and I feel like this structure is really wrong.
I hope you'll explain me how to build a proper structure or at least give me some links to read. Thanks.
Populate the HTML with the (minimum) required data on the server side and load all other necessary data on the client side using AJAX (as you already do).
In any case, I would profile your application to find the most important bottle necks. Do you parallelize AJAX requests?
Facebook, for example, doesn't populate its HTML with the actual data on the server side, but provides the rough structure, which is later filled using AJAX requests.
If I understood your architecture right, it sounds ok.
Advices
Making your architecture similar to this allows you to deliver templates for the page structure that you then populate with data from your ajax request. This makes your server faster also since it doesn't have to render the HTML also.
Be careful with the amount of requests you make though, if each client makes a lot of them you will have a problem.
Try and break your application into different major pieces and treat each one in turn. This will allow you to separate them into modules later on. This practice is also referred as micro-services architecture.
After you broke them down try and figure user interaction and patterns. This will help you design your database and model in a way in which you can easily optimise for most frequest use-cases.
The way of the pros.
You should study how facebook is doing things. They are quite open about it.
For example, the BigPipe method is the fastest I have seen for loading a page.
Also, I think you should read a bit about RESTful applications and SOA type architectures.
How can I connect to mysql DB from JS function?
I found this question:
How to connect to SQL server database from javascript?
but it doesn't work on Chrome, because they're using ActiveXObject.
Thank you.
There is no good solution on web browser side which will allow you to work with all browsers. There are many disadvantages to work with database on browser site.
First of all, you show your database structure and it is very dangerous. Imagine, how easier is to make SQL-injection while you know tables and fields?
You have to establish connection in some way using password which will be shown to third party users. Or you have to set password-less connection, which is also dangerous.
When you establish connection with database, somebody can easly execute own query what is trivial, because you are showing your structure.
I strongly recommended you to not do it on browser side.
but I have cross-domain problem, so I just need to do simple select from db
Direct browser-to-database communication is definitely not a proper solution.
If you want to get a list of values out of the db, just write a method in whatever server-side language you prefer (or need) to use, make the client-side JavaScript code call that method through its public URI and parse the response body into some data structure.
A more general solution to this kind of problems is XMLRPC (for the record, I've used it under Code Igniter / Flash ActionScript 3.0), though it's not all that simple to use.
If you need to get data from two different domains, then implement the above on both of them and make the JavaScript code call the two different URIs and combine the data (if needed).
You must use AJAX, because JavaScript itself can't connect to server. You can call some PHP script with AJAX and in JavaScript handle response from it. See jQuery.ajax().
make Ajax call from your javascript to php which connects you to database
Without some sort of plugin, or sending requests to a server side application that will access the database for you, you can't. So focus on those instead, specially server side apps.
A comment under this question
How to make a database connection
suggests that's only possible with a particular mix of Microsoft technologies specifically designed to deploy desktop-like software using a web browser. The bits mentioned there are:
HTA - HTML Applications
JScript - a Microsoft flavor of JavaScript
ActiveX objects
A link is also provided: Introduction to HTML Applications (HTAs)
I have a website A with a database and a search engine of some object, user can create account on my website then add comment for these objects.
I need to create an api with something like a plugin, it will result on having the seach engine on another website B.
I have planned to do like fb or twitter plugins : the dev who want to use my api will just need to add a line of js, and a line of html on website B, then it will load the plugin. But I'm wondering how to organize it.
Here it what I've guessed : I create a page on my website A, put the search engin on it. I create a js that will load this page whithin an iframe, on the dev's page (website B), under the div he added to have my plugin. Then I implement OAuth 2 (with a provider and so, so people can do post requests to alter my db), and people who is one the website B will have the ability to post comment on the objects of the search engine on website B.
Actually it seems to be the same as fb comment plugin process, but it seem too complicated to do all that stuff. Is it the right way? Can anyone detail the problems that I should face during implementation?
You need to develop a decent API which can return search result in JSON (and XML if you want to please everyone). That already would offer other developer the ability to use your site functionalities, that's mostly back end work tho. So they can develop their own widget.
To develop your own widget as a search widget you don't need that much, you just need either a set target (maybe a required element) or/and an initialization method (more flexibility for the dev) to which you pass a target.
Bind the search button, grab terms search, call your API and when you get your result display them or/and execute a custom callback pass the result as an argument, flexibility)
If you do your javascript well you can create a little API there too which facilitate the usage of your API via javascript. And then even easily port it to a jQuery plugin or something similar.
When serving JSON always remember to set your headers for your API to allow for crossdomain or go for jsonp instead.
Your question implies an architectural direction, but the requirements are too broad for such a choice. I would narrow down your requirements first. OAuth 2.0 could potentially help satisfy your needs, but ask yourself at least the following:
What user data needs to be protected?
What 3rd-party data access is needed? What functionality?
If you go with OAuth 2.0, are you prepared to follow a spec which is still changing? Are you willing to be the authentication provider?
What server-side languages/platforms are acceptable?
What other security considerations are important to you? (Such as social sharing, level of 3rd-party app trust...)
How much are you willing to rely on 3rd-party tools? Or write your own?
I agree that modeling your design off FB or Twitter or Google is not a bad idea, as they have done this sort of thing.
You might have a look at the new book Getting Started with OAuth 2.0.
Here are two simple ways of making custom search available to users.
The simplest option is to do what Google does - the search on your site would follow a simple, well defined API - so that
www.mysite.com/search?q=keyword1+keyword2
returns a list of results in HTML.
Then you'd tell your users to include a snippet of HTML:
<form action="http://www.mysite.com/search" method="get">
<input name="q" type="text" value="Search">
</form>
That would do, though at this juncture you may want to improve things with better search options, a javascript wrapper for the search form, a JSON or XML format for the data returned, security, a better worked out API that takes all these into account.
Another way is to use javascript and provide the data with a callback facility, so the URL:
www.mysite.com/js-search?q=keyword1+keyword2&callback=someHandle
will return a javascript file containing JSON data and a call to "someHandle" when it is loaded. The developer using your API have to write their own way of making the request and the handler. Bear in mind that because of XSS, the queries would probably come from your partners' servers. The simplest is probably to make your own search offer simple and well-documented so others can exploit it.
OAuth 2 could be helpful just if you would allow the website B to make POST request to the website A in background.
Instead if you want allow the users that visit the website B to post a comment then the iframe with a form that point to the website A is enough.
The easier bet, yet not necessarily the wisest, is to create some JS which calls on your website using JSONP.
iFrames are not W3C standard, try avoiding them if possible. Code a Javascript with some events that will do some JSONP calls into your own server and return the results in Javascript accordingly, so it would be able to interact with the page.
I am currently looking for an intelligent best practice solution for the following problem. Within a web page, I want to make use of data that is currently organised in some MySQL tables.
Problem: I cannot access the database from the webserver, so I am not able to query the data using SQL. Therefore, I thought to transform the data into something JavaScript can handle (e.g. JSON) and perform all the operations on the data on client-side.
Doing SQL-like queries on an object will probably be kind of hard, even if those I need will probably be easy (simple SELECTs). Is there a elegant way to do that? Some nice little javascript library?
Thanks in advance for your ideas.
Best practice would (of course) be to put some kind of link (even if not a direct one) between the database and the web server.
For SQL in the browser, though, there's the TrimQuery library, basically a mini-SQL engine written in JavaScript for use on the browser. You would output the "tables" as arays of objects using JSON (as you indicated), and then query it via TrimQuery's SQL support.
But if you can't access the database from the web server, I assume you'll be making a mostly-static copy of the data as an admin procedure and placing it on the webserver. That being the case, you may well be better off determining your usage patterns in your web app and then formatting the data into useful objects as part of the DB->web server copy operation. But if you really need ad-hoc queries into the data, TrimQuery may be a route you could use.
You can try JSINQ:
http://jsinq.codeplex.com/
which is a Javsascript LINQ implementation. It allows to "query" json object with linq expressions (then in a sql-like way).