cordova - where to place the php & html files when building Phonegap app and how to make ajax calls for them -
i trying build android app existing php web application using phonegap. have php files logic , html files rendering ui. these files placed in webserver (wampserver) in system. have seen of sources, saying -> make ajax calls php files in webserver phonegap project. based on created index.html file has ajax call target txt.php file , tried run on android virtual device manager. see index.html loaded onto avd, have given input in textarea , clicked on 'save message' button. don't see response on avd. can please guide me on how place these html fils, php files , how make ajax calls.. hope question lot many beginners me..
as of now, below code named index.html , placed in assets/www/index.html of phonegap project. loading index.html page using
super.loadurl("file:///android_asset/www/index.html"); index.html page looks this..
<html> <head> <script language=javascript> function chk_length(myform) { maxlen=767; if(myform.txt.value.length>=maxlen) { alert('you reached max length in text area'); myform.txt.value=myform.txt.value.substring(0,maxlen); } else { myform.num.value=maxlen-myform.txt.value.length; } } </script> <script> function mycall() { $.ajax({ url: "localhost:8080/yours/txt.php", type: "post", datatype: "html" }); } </script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> </head> <body bgcolor="green"> <form name="myform" method="post"> <p style="align=:center"> <textarea rows="10" cols="30" name="txt" id="txt" onclick=chk_length(this.form); onkeypress=chk_length(this.form); ></textarea></p> <input style="background-color:yellow" size="4" name="num"> <i style="color:yellow"> characters left</i><br> <input type="submit" value="save message" id="save" name="button" onclick="mycall()" onmouseover=chk_length(this.form);> <br> </form> </body> </html> and txt.php page placed in webserver (wampserver) location of system looks this
<html> <body> <?php $txt=$_post['txt']; $dt=date("y/m/d"); $button=$_post['button']; echo "$txt"; include("pg2.php"); ?> <p style="color:orange">* max 767 characters *</p> <?php mysql_connect('localhost','root',''); mysql_query("create database mydb"); mysql_select_db('mydb'); $querys="create table mydb.events(edate date,event varchar(767), unique(event))"; mysql_query($querys); mysql_query('create table mydb.like(edate date,likes varchar(767),unique(likes))'); if($button=="save message") { if($txt!="") { $quer="insert mydb.events(edate,event) values('$dt','$txt')"; $quer=str_replace("\r\n"," ",$quer); if(mysql_query($quer)) { $file=fopen('./backup.txt','a'); fputs($file,$quer."; \r\n"); fclose($file); } $num=mysql_affected_rows(); //echo "$num rows affected"; } $query="select * mydb.events"; $result=mysql_query($query); ?> <table> <?php while($row=mysql_fetch_row($result)) { ?> <tr><td><p style="color:yellow"><?php print("$row[0]"); echo ":"; ?></p></td><td><p style="color:yellow"><?php print("$row[1]"); echo "<br>------------------------------<br>"; ?></p></td></tr> <?php } ?> </table> <?php } if($button=="like it") { if($txt!="") { $quer1="insert mydb.like(edate,likes) values('$dt','$txt')"; $quer1=str_replace("\r\n"," ",$quer1); if(mysql_query($quer1)) { $file=fopen('./backup.txt','a'); fputs($file,$quer1."; \r\n"); fclose($file); } $num=mysql_affected_rows(); } $query2="select * mydb.like"; $results=mysql_query($query2); ?> <table> <?php while($rows=mysql_fetch_row($results)) { ?> <tr><td><p style="color:yellow"><?php print($rows[0]); echo ":"; ?></p></td><td><p style="color:yellow"><?php print("$rows[1]"); echo "<br>------------------------------ <br>"; ?></p></td></tr> <?php } ?> </table> <?php } ?> </body> </html>
ha ha got :) there nothing work load php application on android mobile... keep resources html, php , images, css etc.. in webserver , make sure webserver allow others access.. thats need have following snippet in mainactivity.java of phonegap application..
package com.example.mobility; import org.apache.cordova.droidgap; import android.os.bundle; import android.app.activity; import android.view.menu; public class mainactivity extends droidgap { @override public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); super.loadurl("http://ipaddress:port/folder_name/index.html"); } @override public boolean oncreateoptionsmenu(menu menu) { // inflate menu; adds items action bar if present. getmenuinflater().inflate(r.menu.main, menu); return true; } } you done !!
note: don't create such code have presented in question.. useless...
Comments
Post a Comment