Query by form (ala Microsoft Access) but using jQuery - javascript

I have a database based website application, and I would like to allow users to be able to create their own custom queries, using a tool like microsoft access's query by form.
However,I want to provide this functionality over the web. I would like to provide my users with a similar frontend over the web - I'm guessing using jQuery etc. However, before I get started, I wanted to check if something (preferably open source) already exists - if none exists, then can someone (preferably who has done something similar), provide me with the guideline steps on how to do something like this?
I must point out that I am more concerned on how to reproduce the GUI look, feel and behaviour rather than getting data to/from the server (which I can easily do on my own).
So the question again is: If I have to build a similar looking screen with similar GUI functionality, what are the outline steps I need to carry out?, and will I require any other technologies other than those mentioned here?
Ideally ofcourse, I will not have to "roll my own" and instead something similar exists (if even in non-working state), that I can use/extend.
PS: I am running a LAMP stack, so a Microsoft solution is not an option.

I have been looking for something very similar as a front end to a MYSQL database - I have only really found the following open source example : http://ksistem.com/jquery/sqlbuilderdemo.htm

Related

Back-end solution for pure-Javascript site with link sharing

I'm developer-beginner and I would like to do simple card-sorting site.
hundreds of cards with plain text
no log-ins, it must be as simple for user as possible
few dozens users per day
final state of sorting should be saved under unique link, like site.com/q56we1cfuz4 or site.com/link.php?unique=q56we1cfuz4
User sorts cards as he/she wishes and the result is saved into browser sessions storage (few kb of data in JSON or so). So far, so good.
Question:
As I know only Javascript:
If I need to share the state of the page (data in session storage) with some unique link, is something like Firebase.com good solution for such kind of back-end? Or some simple DB with help od Node.js?
In order to "catch" the link when someone click at unique URL (site.com/link.php?unique=q56we1cfuz4), I still need some server-side script which will ask the DB, like PHP header redirect, right?
Your questions are a little fuzzy, no problem tho. You are just getting into web dev, so there's a lot to wrap your head around and all of the options can be pretty confusing. Some people will complain about opinionated answers, and I'm not going to claim to be objective here, but here are a few tips that I think will get you pointed in a better direction...
Firstly, yes - firebase is a good solution for you to try working with. Aside from the fact that it will give you the db/storage features you need, it's a realtime db, which will give you a lot more than just storage in the long run, and will better equip you for the future web development trends. The firebase API is (mostly) designed to work asynchronously, so from a javascript perspective, it falls right in line with the kind of code you'll end up learning to write.
Re: the other aspect of your question - server-side - check out nodeJS. It's basically a server-side javascript platform that will allow you to use the same skills you're learning to write client-side code for the server. Also check out expressJS, a nodeJS package that provides you the http-server, and allows you to handle dynamic urls, etc. - the bits you were thinking about when you made a reference to PHP.
Hopefully this will help you focus on a few specific tools to familiarize yourself with as you learn web development, rather than having to struggle with everything from new languages, platforms, and way too many libraries, frameworks and techniques to wrap your head around. Good luck!

advanced search functionality - query builder for the end-user

I'd like to implement an "adavanced search" function into my website. It is a database application and therefore uses a mySQL database.
I was looking for a tool called query builder/ composer/ generator/ constructor ...
The user should be able to narrow down his/her search. I've done an internet search on my own for such tools and stumbled across many, but most of them are more like tools for programmers to support them writing SQL queries.
I stumbled across these two tools that do what I am looking for:
EasyQuery/ EasyQuery.js (e.g. http://advangle.com/)
RedQueryBuilder (http://redquerybuilder.appspot.com/)
Do you know more of them? I'd like to use PHP as programming language (Javascript in addition is okay). Open source and free is preferred.
Furthermore my data base structure (I only want to search one specific table) does not change dynamically over time.
Maybe you can also guide me to different keywords I have to look for to find other tools like those mentioned above.
Thanks,
Matthias
(PS: Please don't discuss security issues like SQL injections and so on.)
Yes, I dont know about redQuery Builder but know about EasyQuery. EasyQuery as name suggest is so easy to integrate. Its free also. It is available in .NET version , javascript version and PHP version. You just need to do some changes for database in its controller.

Creating a Notification Icon with Dojo 1.9

I want to create a notification icon with Dojo, but I'm not sure where to start.
The icon has to be similar to those found on Facebook and Whatsapp, showing how many new messages/notifications you have.
I've been looking in the Dojo reference, but couldn't find a good widget to use. Maybe I'm missing something obvious, but I might as well ask it here.
Googling hasn't been of much use unfortunately.
As far as I know there's no widget that automatically does the stuff for you. This problem is far too specific to provide a general widget for it. You also have to think about several things before you can start.
Do you want to use WebSockets? The web is generally made for pulling content, if you want to push your notifications from your server to your client, then you will need to look at WebSockets. A good tutorial to use them can be found on Sitepen.
If you don't want to use websockets (you're not able to create a websocket server or you have some other reasons) then you will probably have to use a simple "REST service" and obtain the amount of notifications from it. This means you're script won't be "live", so you will need to pull the content from the webservice every X seconds/minutes. This means you need a normal AJAX request which can be done with the dojo/request/script module.
If you need to time this AJAX request, you can use the dojox/timing module.
This is only the "logic" part, the user interface (icon + # notifications) can be made by yourself with plain HTML and CSS.
What about dojox/mobile/Badge:
http://livedocs.dojotoolkit.org/dojox/mobile/Badge
?
From comment:
"Maybe you can find something in the DojoX library" -
off course you will find much.
I would recommend
dojox/socket
see http://dojotoolkit.org/features/1.6/dojo-websocket

Create a plugin to add my website functionalities on another website

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.

Developing a simple web designer (drag + drop of text /w fonts and images)

I have a client who has requested I develop a simple web designer (ala CustomInk.com's t-shirt designer) which allows users to drag & drop text and uploaded images onto a canvas.
I have some ideas about getting started with javascript/jQuery but I wanted to ask SO: What is the most universally accessible way (in terms of browser support etc.) of developing an editor like this?
Does anyone have any advice/experience in the matter before I start fooling around blindly?
For cross browser support, your job will be much easier if you decide to use a Javascript library, such as jQuery. The big reason for this is because jQuery will encapsulate all of the difference between Javascript implementations between browsers. Writing this all from scratch is not really feasible.
So in your case, it sounds like you want users to select pictures and text, drag and drop them on a canvas of sorts. Then, what's your desired format for saving what they create? Are you trying to make a resulting image out of what they create?
To get started, I would check out jQuery UI. You can use the draggable and droppable functions for the front end, and when your users are done, you'll need to post the coordinates of their elements, text, and which pictures they're using, etc.
It seems like your biggest challenge is not making a pretty interface for this to happen, but instead, persisting what they create.
I've recently been working on something similar - you can check out the dev site here, and the js is not minified, so feel free to take what you want.
Initially I went for trying to 'render' the draft in SVG - this ended poorly, as browser support is still not that great, even using svg-web and similar libraries. I needed to do stuff like round text, and those features can really creep up on you.
In the end, I wrote a tiny python server (using CherryPy) that generates a png based on a set of querystring parameters using python-cairo. It takes serialized json object of 'text lines' and images. The png is actually the resource, and the function itself returns a 'render.png' filebuffer, so all you have to do on the front end is change the src attribute of the <img> tag and it will refresh. I added upload functionality to the "image processing" server, too.
Since I was already serializing json that contained all the information about the design, saving that in a database and loading it to edit designs was trivial.
I would definitely recommend a library like jQuery (which is what I used) to make development easier. I didn't manage to do much in the way of dragging/dropping, which is something I would probably try to do from the start if I was starting over. Feel free to email me if you'd like to see some of the back-end code or if you have any questions (my email is in my SO profile).
Jquery UI is the way to go, it provides drag and srop functionality and it's cross browser. Check it examples and documentations at http://jqueryui.com/demos/draggable/

Categories