Converting dynamic website to app using phonegap - sqlite

I already have dynamic responsive website with html5,JavaScript and php as backend.The client wants to convert it to an app since he wants offline capabilities. I am totally new to this. Really confused as to how to go about it. We have managed to write sqlite queries for loading the master data. But still unsure as to how all things fall into place.Do we have to include jquery mobile as well.please guide.

There's a couple of things to keep in mind. I'll address the easiest one first - no, you do not need to use jQuery Mobile. jQuery Mobile gives you a nice UI, and a SPA-like framework for your app, but it isn't required per se. You can use something else like Ionic for example.
As for the conversion, at a high level, this is what needs to happen.
Imagine your current PHP site has 2 pages. The home page is a list of people. You click on a person and you go to a detail page. You have 2 php pages. The first simply does a SQL query to get people and the second does a SQL query to get one person based on the query param.
In your PhoneGap app, your code is all on the user's device, which means no PHP. Your home page needs to get people, so it has to call an API on your application server. You can use PHP to do the SQL as it does now, but instead of displaying it as a simple HTML list, it outputs it as JSON.
On the PhoneGap side, you can call this via JavaScript and then render the results.
The same goes for the detail view - you would need an API on your server side to return info about the person.
I hope this helps. I also have a full blog entry on this, with demo, here: http://www.raymondcamden.com/2012/05/05/converting-a-dynamic-web-site-to-a-phonegap-application

Related

How to make form like example

there is this site https://www.delinski.at/ and it has a nice form where you can pick some values from dropdowns like Date, Number of Persons etc., and then submit the form. It redirects and I see the values on the redirected page link as parameters (if I have changed the defaults).
I searched for and tried several Form Plugins which all do not seem to work - most recent one (Form Maker) lets me design the form as I want but at the end I realized when I click on Submit, the values are not transfered to the target page (confirmed by Form Maker Support as work as intended). It's confusing because actually that should be a basic funciontality of a HTML form, right?
So I want to know if there are plugins where I can get a similar look&feel like the example given above.
That site is a Static Site Generated framework not WordPress. That site would also be very expensive to build cause that is all coded, and very well:)
You are not actually seeing a form there at all that is just how PHP natively uses the URL to navigate via a button.
Almost all the form plug ins for WP use the database write now and do not pass the parameters of the entered form as a php _ POST with a redirect.
I kind of think what you really are looking for is a faceted search feature
One of the best that comes to my mind is https://facetwp.com/demo/cars/?_vehicle_type=truck
Notice the car icons those are actually search buttons:) Of course you will have to build a template to do that neat stuff on the SSG site you linked but...
here is a really informative write upon how it works to get started.

protecting client from javascript console

I just finished a app with Meteor that was kind of to test the waters and really try to figure Meteor out. My application is a two player game with 64 buttons. Two users enter a single game, whoever presses the most buttons, wins. Everything works well for the most part except for one part, a user in the game can easily cheat by typing some jQuery into the console the most obvious is $('.button').click();. After a while of searching through Meteor Docs and trial and error I am stumped. The buttons are part of a collection specific to the two players. As soon as one player logs in the server side code inserts buttons into a collection called "Games". How can I protect users from modifying code via JavaScript console? I obviously don't want to post 100s of lines of code and I hope I gave you the gist of how my application operates if you want to see specific code please check out my Git Repo. Also heres a link to the actual game : Bubble Popper
You can't control what your clients do on their computers. You best hope is to add some restrictions on the server side. Perhaps it's not possible for any human to click on two buttons within 1 second? If it's not, then add this restriction on the server.
From How does Facebook disable the browser's integrated Developer Tools?
This should only work for chrome.
Object.defineProperty(console, '_commandLineAPI',
{ get : function() { throw 'Nooo!' } })
That being said - this isn't security - just a cosmetic thing / security from ignorance.
Security should happen via your server side Meteor.methods, and from your allow/deny rules in the db.

Getting Google Spreadsheet in the Background

We have a Google Spreadsheet from which we wish to load data into our webpage.
I started by using the Google Spreadsheet APi via C# and the Google API .NET libraries to read the spreadsheet and load it into an html unsorted list.
The spreadhsheet has about 200 rows, but could have more, as it will be updated frequently. So the problem is that the users have to wait until the spreadsheed data is retrieved and parsed before they can see anything in the webpage (the page is white whilst loading).
How can I load this data in the background whilst the page loads?
I've already written my code in C# and don't much want to spend the time swapping to javascript, but I will if I have to.
Could I use the AJAX Control Toolkit to do this? I know it will load html, but can I use it to fetch google data?
What can I do here that would be fast and easy?
[Edit]
The account that hosts the google spreadsheet is inside a google domain, so it's documents can't be shared to the public as a whole - only to individuals. The C# libraries allow me to use the account's username and password to log into the account to get the spreadsheet data, and so the spreadsheet doesn't need to be shared at all. Even if I went with a javascript/ajax solution, I would yet need this functionality.
Well, this probably isn't the BEST answer, but it IS a solution. I'd like to see if y'all have a better one.
Anyway, I found this, which is an example of how to use an asp:Timer to delay the calling of a function for a certain amount of time - in my case, long enough for the page itself to load. At least this way, the user gets to see the page, and can watch the nice loading-gif until the actual content arrives.
It is an AJAXy approach that allows me to keep my c# programming without having to add any javascript.

Correct way to link to new page in canvas page app php-sdk

I'm running in to a couple of issues and wondered if anyone had any insight. I'm using the latest php-sdk I'm developing a canvas app that has a number of different steps. These steps are spread across multiple pages. Now when I first enter the app everything seems to work fine. The access token is there and I can call the api functions. On the second page (which is linked to in the same iframe) I get OAuth errors. Now if I use this on the 2nd page:
$me = $facebook->getUser();
var_dump($me);
it returns the correct user id, but I still get errors when trying to use an api query (specifically a FQL one in this instance)
Now, bear in mind these links are within the iframe so I was assuming the signed_request is getting lost somewhere, I know facebook normally issues this via a POST. If I set all my links to target="_parent" with a url such as http://apps.facebook.com/myapp/page2.php then everything works fine. Facebook clearly posts the correct info this time. Subsequently, then when I use links that only redirect the iframe it seems to work fine again (implying a cookie is being set somewhere).
Now I've seen other apps that don't have a target="_parent" that seem to work correctly, only ever loading the iframe on subsequent clicks and not the full facebook site. So I can only assume they are storing this info somewhere. I've tried to inspect these apps using httpfox but I can't see anything obvious. Does anyone have any links for best practice with multiple page apps? I know I can get around this using full urls and target="_blank" but I would like to know what's going on here. I've looked through the developer docs and the canvas page examples, but there's nothing obvious to me.
Any help or info would be appreciated
Many Thanks
There is some ways to achieve this
using Facebook JavaScript SDK (which will set cookie for you, so PHP-SDK can rely on it)
issuing POST request to your pages including signed_request from initial page loaded in canvas

asp.net url concealment?

In my asp.net 2005 app, I would like conceal the app structure from the user. Currently, the end user can learn intimate details of my web app as they navigate and watch the url change. I don't want the end user to know about my application structure. I would like the browser url to not change if possible. Please advise.
thanks
E.A.
URL rewriting is the only one that can provide any kind of real concealment.
Just moving the requests to AJAX or to frames, means anyone (well, more advanced users) can still see those requests being fired, just not in the address bar.
Simplest solution is to use frames - a single frame that holds your application and is 100% * 100%. The URL will not change though the underlying URL can still be seen via "View Frame info", however only advanced users will even figure that out.
In your pages, make sure that they are contained inside the holding frame.
A couple of possibilities.
1) use AJAX to power everything. This will mean that the user never leaves the home page
2) use postbacks to power everything. In this, you'd have all those pages be user controls which you progrmattically hide or show.
3) URL rewriting (especially if this is asp.net 3.0 or later)
My site uses url parameters to dynamically load ascx files into a single main aspx. So if I get 'page_id=123' on the query string, I load the corresponding ascx. The url changes, but only the query string - the domain part remains the same.
If you want the url to remain precisely the same at all times, then frames (per Oded) or ajax (per Stephen) are probably the only ways to do it.
Short answer: use URL encryption
A simple & straight article: http://devcity.net/PrintArticle.aspx?ArticleID=47
and another article: https://web.archive.org/web/20210610035204/http://aspnet.4guysfromrolla.com/articles/083105-1.aspx
HTH

Resources