use Ionic framework with php files

Question

I'm creating a mobile app with the Ionic Framework. I got all the html pages created online. Now i want some backend code to get data from a sql server. Receiving the data is no problem with php. But when I use php pages I don't have the interface I created with Ionic.

How can I use php pages (instead of html) and still get the lay out from ionic? Example: my scorebord.php

<?php
$servername = "localhost:3306";
$username = "ssss";
$password = "dffd";
$dbname = "ddddd";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$sql = "SELECT user_username,user_city,user_highscore FROM tbl_user";
$result = $conn->query($sql);
?>
<ion-view style="" title="Scorebord">
    <ion-content class="has-header" overflow-scroll="true" padding="true" style="background: url(img/hX1ml1TVGgABo3ENE6Qg_menu3.png) no-repeat center;">
        <h1 style="">Scorebord</h1>
        <table style="width:100%">
            <?php
            if ($result->num_rows > 0) {
                // output data of each row
                while ($row = $result->fetch_assoc()) {
                    ?>

                    <tr>
                        <td><?php echo $row["user_username"] ?></td>

                    </tr>
                    <?php
                }
            } else {
                echo "0 results";
            }
            $conn->close();
            ?>

        </table> 
    </ion-content>
</ion-view>

btw: Is it safe to just configure my database in a php file like that? Anyone a good alternative?

This is not at all a good approach. You should use Ionic as intended - have your data accessible through an API, get it using http requests and let Ionic do the rendering instead of php. — drys
– drys, Commented Jan 7, 2016 at 15:28
so using angular like $https? Is it not possible like this? I don't have that much experience with angular. Php I know very well.. — Coding
– Coding, Commented Jan 7, 2016 at 15:30
Ionic is designed to run on single html page, so you would run into problems anytime you wanted to perform a simple page transition. The best way for you would be to write your API in php, have set of endpoints to get the data you need and then just request the data with $http or $resource. It is not hard, you can find many tutorials on this topic. — drys
– drys, Commented Jan 7, 2016 at 15:36
this looks like a good place to start stackoverflow.com/questions/31901949/… — TarranJones
– TarranJones, Commented Jan 7, 2016 at 15:44
the front end code is the tricky bit, for the backend you just need to echo some json. like stackoverflow.com/a/11264436/2273611 — TarranJones
– TarranJones, Commented Jan 7, 2016 at 15:52

TarranJones · Accepted Answer · 2016-01-08 10:31:26Z

The Mobile App will be saved on a device which probably can't interpret PHP code, unlike a web server. If you dont know/want javascipt then an iframe is probably your only option.

example.com/table.php

        <h1 style="">Scorebord</h1>
        <table style="width:100%">
            <?php
            if ($result->num_rows > 0) {
                // output data of each row
                while ($row = $result->fetch_assoc()) {?>
                    <tr> <td><?php echo $row["user_username"] ?></td></tr>
                    <?php
                }
            } else {
                echo "0 results";
            }
            $conn->close();
            ?>
        </table>

your app

<ion-view style="" title="Scorebord">
    <ion-content class="has-header" overflow-scroll="true" padding="true" style="background: url(img/hX1ml1TVGgABo3ENE6Qg_menu3.png) no-repeat center;">
        <iframe src="example.com/table.php"/>
    </ion-content>
</ion-view>

But a better solution is to use JavaScript to make http requests for JSON data or full html templates(like table.php).

I would use a json backend

highscores.php

<?php
$servername = "localhost:3306";
$username = "ssss";
$password = "dffd";
$dbname = "ddddd";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$sql = "SELECT user_username,user_city,user_highscore FROM tbl_user";
$result = $conn->query($sql);
$json = mysqli_fetch_all ($result, MYSQLI_ASSOC);
echo json_encode($json);

your app

angular.module('ionicApp', [])

.controller('MainCtrl', function($scope, $http) {
  $http.get('http://example.com/highscores.php').then(function(resp) {
    $scope.users = resp.data;
  }, function(err) {
    console.error('ERR', err);
  })
});

  <html ng-app="ionicApp">
  <body ng-controller="MainCtrl">
    <ion-content>
      <ion-list>
        <ion-item ng-repeat="user in users">
          {{user.user_username}}
        </ion-item>
      </ion-list>
    </ion-content>
  </body>
</html>

Collectives™ on Stack Overflow

use Ionic framework with php files

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related