Software Archive
Read-only legacy content
17061 Discussions

Getting data from mySQL

Martin_J_
Beginner
833 Views

Hello

I've been using appery.io for awhile, but is now looking for an alternative, since they have changed the prices and removed the free starter package and forcing me to a subscription..

XDK looks like a decent alternative, but a lot more difficult, when you don't have any programming knowledge other than HTML and CSS.


I wan't to make something like a Todo app, where I can add and remove tasks from a mySQL database..

But I have a hard time getting data from the server and and displaying it correctly..

I've tried a few samples and tutorials, but they are all lacking information and assumes I'm already an expert in PHP, java, XDK etc.

I did find this guide but don't know the language.
http://codehamper.com/intel-xdk-exemplo-conectar-com-bd-mysql/

Using his code I was able to get some data from MySQL, but with a few problems:

I would like to use the visual App builder and then get the data from MySQL. But it is not showing correctly in the list and if I try to add a new item it's not adding the name in the MySQL.

A few screenshots:

http://imgur.com/a/FEwng

 

Here is a screenshot of the app I made using appery and want to recreate using XDK:
http://imgur.com/A3fhpv0
When I click on a task will delete the task..


Could really use some help, getting started with working with MySQL and XDK..

0 Kudos
5 Replies
Nick_F_2
New Contributor III
833 Views

You will need to create a webservice either in PHP or in Visual Studio using ASP.NET to create an ASMX file.

The webservice will request the data from your mySQL database then return JSON data.

From Javascript is XDK you can call this webservices with the relevant criteria to populate listviews or Dropdown boxes as required by looping through the JSON data returned from the webservices.

Here is an example to save data to a server using ASP.NET

https://software.intel.com/en-us/forums/intel-xdk/topic/599531

Here is an example to download data from the web using APHP

https://software.intel.com/en-us/forums/intel-xdk/topic/549664

0 Kudos
Martin_J_
Beginner
833 Views

Yeah I've seen your post in the thread and I still don't understand what I need to do.. what to do with the javascript? and I can see it's making some tables which I don't want it to do? 

If you look at the screenshots you will see I got a php mysql connection and is getting the data from mysql..

In one of the screenshot you can see my attempt, to get it to make list items from the mysql.. But it's all written inside one list item instead creating new for each row i mysql..

I need a few samples of how I add the data into the page and use things like the list items component, on pages build using the drag and drop the visual design builder..

Intel XDK really need some more tutorials and howtos for beginners..

 

0 Kudos
Nick_F_2
New Contributor III
832 Views

As far as a listitem is concerned you are not looping through the array correctly to add the necessary code either side of the listitem.

Here is an example of building a listview from mySQL Data

I have cut the code down, it does not show the complete process, only parsing the returned JSON data from a PHP webservice to a listview.

{
        jsonArray = $.parseJSON(xhr.responseText);
                      var html = "<ul class='list widget uib_w_2 d-margins' data-uib='app_framework/listview' data-ver='1' id='mylistview' data-role='listview' data-autodividers='true' data-inset='true'>";
             for(i=0; i < jsonArray.length; i++)
                       {
                       start = jsonArray.start;
                       title = jsonArray.post_title;
                       v = jsonArray.v;
                       var instr = title.indexOf(myt);
                      m = start.concat(",");
                       m = match.concat(title);
                      if(instr==-1){
                          html += "<li class='widget uib_w_3 List' data-uib='app_framework/listview' data-ver='1' date='"+start+"'><font size='+0'><b>"+start+"</b><br><b>"+title+"</b><br>"+v+"</font></li>";
                      } else {
                       html += "<li style='background-color: #999966' class='widget uib_w_3 List' data-uib='app_framework/listview' data-ver='1' date='"+start+"'><a href='#item14_page' data-transition='slide' onclick='javascript:sendResult(\""+m+"\")'><font size='+0'><b>"+start+"</b><br><b>"+title+"</b><br>"+v+"</font></a></li>";
                       }
                       }
            html += "</ul>";
            $(html).appendTo("#CalW");
        }

Can you private message me with a zipped XDK project.

If I can I'll take a look for you.

0 Kudos
Nick_F_2
New Contributor III
833 Views

Thanks I have had a look at your project.

I think you have misunderstood how this all works.

I notice in your XDK project you have a PHP file. This is wrong, the PHP file must reside on a web server either locally or remotely then from Javascript (as per my previous posts) you call the PHP file.

You cannot call the PHP file located inside your project. The XDK services do not understand PHP files.

Your PHP file must also have access to your mySQL database which again could run under MAMP, WAMP or remotely on a database server.

Firstly run the PHP file either under MAMP or WAMP or a remote webserver.

Now change your javascript to point to the URL of your PHP file, then parse the JSON. However I not your PHP file does not return any JSON data on any call. I suggest you start from scratch with your PHP file and create a simple select to return some JSON data then parse it in Javascript. If you return rows from mysql you can use echo json_encode($rows); to return the rows as JSON data. 

I would also suggest you move your Javascript from Index.html to app.js as this is loaded in the header of index.html and will hold all your javascript code.

0 Kudos
Martin_J_
Beginner
833 Views

Thank you for looking through the project.

Think you misunderstood the problem.. The php mysql connection file was added so you could see it :) My screenshots from earlier shows mysql and WAMP running with the app working using the php file..

I suggest you start from scratch with your PHP file and create a simple select to return some JSON data then parse it in Javascript. If you return rows from mysql you can use echo json_encode($rows); to return the rows as JSON data.

That is what I'm looking for, a working sample of something that does that.. 

As I wrote in the PM I've just begun learning the basics of PHP and have not yet looked at javascripts, so I would not be able to do it all from scratch yet..

0 Kudos
Reply