I have recently seen articles on HTML5 and local Db creation and usage. I have also seen some examples of Javascript connection strings to existing Access Db backends. I am interested in finding a way to build a Db, pre-load it with records, and use a web app to connect and read the Db. For example, I have created many standalone applications with Tcl, in Windows, that read off of Sqlite Db files. Essentially, the application (.exe file) and Db file sit next to each other in a folder and function like any other Db application, except without the use of servers.
I would like to be able to do the same, but with a web app (.html) and Db file. Does anyone know if this is possible? As an example, I wanted to build a language application that runs in any browser, with pre-loaded words saved in the backend. So there would be two files, the web app, and the db file.
Any suggestions or links to resources would be really appreciated. The only thing close that I could come up with was connecting to Access via OLE through Javascript, however I need a Db that is multi-platform like Sqlite.
Thanks,
DFM
Your web app, its local database, and the "priming" data will all have to start somewhere, so I'll assume this all gets rolling during a live connection to a web server. When this first hit comes in, you:
Deliver the page and related code.
In your JavaScript, test for the existence of the database.
Exists? No priming necessary. Do nothing, or sync, etc.
Doesn't exist? Build it and deliver initial data. If this is slow, you can give the user a friendly warning: "Setting up, please stand by." Depending on how you're pushing down all that data, you might even show a progress bar: "Initializing database: 10%"...
There is no step 3.
Once setup is complete, this app could be entirely local -- no net connection required -- as long as you code it without the assumption of non-local resources.
References:
Getting Started with HTML5 Local Databases
Offline Web Applications in HTML5
You can access an already created sqlite db file through javascript. Look at the "Location of Database File" area of this link http://code.google.com/apis/gears/api_database.html
I know this is for Google Gears, but Gears uses SQLite and the location still applies without Gears and only using a sqlite db file.
For example, I used a firefox add-on 'SQLite Manager' to create a sqlite db file on my local machine. I then copied that file to C:\Users\\AppData\Local\Google\Chrome\User Data\Default\databases\file__0
I was able to access the file using JavaScript in Google Chrome:
var db = null;
try {
if (window.openDatabase) {
db = openDatabase("mydbfile.sqlite", "1.0", "HTML5 Database API example", 200000);
....
You have to be careful with the file name in Chrome as it automatically names each sqlite db by an id number. For example, I had to rename my sqlite db file name to 14 to get it to read from JavaScript in the browser. Once I did this, it worked like a champ and I was able to access all tables, data, etc.
Related
Okay so its like this. I am using Microsoft Visual Studios (Javascript/HTML/CSS coding) to create an app which retrieves and sends data into a MySQL database. I setup my MySQL database using MySQL workbench. I created a localhost and connected Visual Studios to the database. It shows the connection on the Server Explorer on the left side of the IDE.
And this is where I get stumped. I don't know how exactly to retrieve the data set inside that database. I've been taught to use Eclipse and phpMyAdmin using a php file to connect, retrieve and store data into the database.
However, I am not familiar with how Visual Studios do their data retrieval. How do I go about this guys?? Basically, I got an HTML file, a CSS file, a Javascript file, I got the MySQL database running and it says I have connection to it on Visual Studios.
The database name is EmployeeCred, and inside the database is a table called employeelogindata with columns of informations.
What should I do?
You'll need to create some sort of API for your JavaScript(frontend) to interact with. You could create a PHP API(backend) which would connect to the database and return JSON data for your frontend. You could then access this using the JavaScript fetch API
Actually, for those still wondering how, Visual Studios has a service for Cordova App which allows for a built-in backend service to the app. Simply go to the Overview panel and look up the backend service feature. Follow the steps and read through the Corodva Documentation available on the internet.
Am currently working on a website(html 5) that calculate the expenses for the user, after the calculation, user has to save it as report for future purposes. So i wanna know if there is anyway to connect the website to MYSQL database or any alternative way rather than create database using java script because am a novice on Js.
thankyou
ideally you should be writing some server side code to add this sort of information to a database. that way you can secure access to authorised users (i.e. logged in users) and your queries cannot be modified on the browser by any user. you can use a programming language like PHP (with a framework like Yii, CodeIgniter) which is quite lightweight.
Browsers have no built in mechanisms for connecting to a MySQL server.
Your options are:
Write a browser plugin
Write a web service and use JavaScript to create an XMLHttpRequest object to communicate with it
The second option is the most common one (and almost certainly the best since it doesn't require that the user install a browser plugin or that you give direct access to the database to all your users).
If you want to use JavaScript, then you can create your web service with (for example) Node.js and the mysql driver in npm.
You should use HTML5 Web SQL for this purpose. Here is link you can refer to:
http://www.tutorialspoint.com/html5/html5_web_sql.htm
I am looking at building an application that stores data locally using openDatabase.
I have a few questions about it.
Can the database been accessed any other way about from the website? I assume using something like firebug I could make queries against the database.But I am not sure if another website uses the same database name it will use or be able to update my website.
Are there any visual tools to be able to access the stored data?
Is the database stored against the logged in user or the computer? for example if a user logs into my website and the database is created and content inserted into the tables. If a different user logs into the computer and accesses the same site will a new database be created or will it reference the already created db?
Thank you!
The browser creates a database when window.openDatabase is called in JavaScript. Every database is stored by the browser on a per domain basis (i.e. if two domains use the same database name, the browser will store them separately). This also means that the database is visible to all the pages in that particular domain. Tools like Firebug are used for debugging client-side scripts and thus they can access the database, but then again so can any bookmarklet or external script.
Why would you need any visual tools to be able to access the stored data? The data is stored on the client-side and not on the server. Thus only the client will be able to modify it. Unless you are planning to make a local web page and store data for personal use, there's absolutely no need to make a front-end for the database.
The database is stored on a per user basis. Internally the browser stores the database in the current user's directory. For example, Opera on Windows it stores it in C:\Users\%USERNAME%\AppData\Local\Opera.
I hope this question belongs here. I am developing a web application for a client. It involves creating appointments/quotes for tradesman and need some advice.
Basically there are products that can be added to a quote created on the webapp. I want to be able to select the quote on the mobile app from a smartphone a fill out the quote.
The problem I face is that because there might not always be internet connectivity I need to store quote data offline on the device so that it can be synchronised when there is internet.
Here is the process using the mobile app:
User gets appointments from web application and stores them (preferably in a database)
Even with no connection user can then fill out quote on the appointment.
User saves quote
Mobile app automatically sends new quote to web application (if connection)
When internet is available user manually synchronises data
The web application takes care of creating appointments and managing the products. The mobile device stores it's own copy of the products and simply just a reference to the quote.
So the user can see a list of appointments. Selects the appointment and then begins to add products.
appointments
appointment_id
description
products
id
description
quote
id
appointment_id
product_id
The web application has been developed in PHP.
I'd like to take advantage of HTML5's offline storage for the mobile app as I'm a web developer and don't have time on this project to learn a native language (i.e objective-C). I've read in a couple of places that web SQL database is not going to be continued so I'm not really sure what my options are.
Also for code in thinking HTML5 and JavaScript, so probably using jQTouch or jQuery Moble.
If anyone has any suggestions or recommendations for me that would be great!
I have a jQuery Mobile app which stores data off-line. Users push completed records up to a web service when connected (the app also uses the off-line capabilities in HTML5). This uses Web SQL (which is SQLite in WebKit and Opera) in Mobile Safari, and works well on the principal devices (iPad / iPhone) but is also fully functional in Chrome and Safari on the desktop (I haven't tried Opera, but obviously it wouldn't work in Firefox or IE).
A few considerations:
As you point out, Web SQL has a somewhat uncertain future. You might want to look at IndexedDB instead, although depending on the browsers you need to support Web SQL might just be fine.
Local database size is limited, but you should be OK if you "purge" data flagged as complete and submitted every so often (I think it's 5MB per db or thereabouts, so quite considerable).
My app talks to a SOAP web service via ajax, and we're all on the same domain. You may need to look at CORS / reverse proxies and such if domains are going to differ
I don't like fiddling with XML in Javascript, but XMLObjectifier makes that side of things easier (parses XML into JSON objects)
PhoneGap applications use HTML5 and CSS3 for their rendering, and JavaScript for their logic
What that mean is that you have two possibilities, whether your client's data in your application is meant to be modified without an application update or not. Since I cannot determine that from the information you gave in the question, I'm going to detail the answer for each case.
If your client's data does not need to be updated (without an update of your application)
In this case, you consider your client's data to be static. The provenance of this data is not relevant, as you will include it in your application data, like any other text or image (or other asset), before distributing your application. That means that the listings of your client will be tied with your application, and that modifying them will require to update your application.
Technically that means that you will simply add your client's data as a static file. It can be HTML5 code, right in the middle of your own application code, or it can be any kind of file (for instance Json), that your application will have to parse and display (using JavaScript).
However, if you go for the HTML5 solution, for maintainability purposes (and maybe other reasons), you will probably want to separate the content from your client from the content from your application. To do so, create an HTML5/CSS3 page which contains your client's data, and include it in your application's page(s) using that method (or you can use the pager.js library as mentioned in this answer).
As a side note: the next method will perform as well as this one in the present case; with the downside of being a bit more complex.
If your client's data needs to be updated without an update of your application
In this case, you consider your client's data to be dynamic. The provenance of the data is relevant, as only the method to fetch the data will be stored in your application: the rest will be done by the device which will execute your application. While more complicated to achieve, this method has the advantage of allowing a constant update of the data without requiring an update of your application.
Technically that means that you will describe your application layout and (graphical) design in HTML5/CSS3, and that you will code your application behavior (fetching your client data, storing it, querying it, displaying it, etc.) in JavaScript.
To do so, you will need to fetch your client's information using JavaScript (embedded in your application's HTML5 files) and then use JavaScript again to store these information in the PhoneGap Storage. Then, your application will also need to query the PhoneGap Storage (still using JavaScript) to access the stored information and to display it, according to the layout/design described in the HTML5/CSS3 files (probably the HTML5 skeleton in your application for your client data logical layout, with CSS3 ids and classes for its design/appearance).
It is worth noting that if you have an always-online device, as long as your client's website is up, you don't need to store the listing information in your application. But if your client's website goes down, or if the device goes offline, you will need a local storage.
Bottomline
In other words, if your application never requires an Internet connection to work, it is safe to include the listings within the HTML5/CSS3 data; otherwise, you will need to go for the JavaScript/PhoneGap Storage solution, even though it's more complex.
I have a rather large db (as in many records). I'd rather let the client download a pre-built db instead of forcing them to load a bunch of text, then insert all the records before being able to use the db.
The closest thing to a spec I can find is this:
https://developer.apple.com/library/content/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/UsingtheJavascriptDatabase/UsingtheJavascriptDatabase.html
It doesn't mention anything about being able to download a database, but I thought someone on SO might have a solution.
Just make up the DB on the simulator or via some GUI... Then make the DB available on the web via a link to the DB file on your webserver. Then in the app check a flag that you make up to see if it has downloaded the DB yet, if it hasn't then just download the DB just like any other file over HTTP and store it in your documents directory. Then set your flag so you know you have downloaded the DB and that the app doesn't need to do this again. Then when you need to access the DB just point sqlite to the DB file you placed in the Documents directory.