Use Ionic framework with php files

Question

Use Ionic framework with php files

I am creating a mobile application with the Ionic Framework. I got all the html pages created on the web. Now I want some database code to receive data from sql server. Getting data does not cause problems with php. But when I use php pages, I do not have the interface that I created using Ionic.

How can I use php pages (instead of html) and still get the bar 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: Can I just set up my database in php file? Any good alternative?

+4

php ionic

Coding Jan 7 '16 at 15:19

source share

1 answer

TarranJones · Answer 1 · 2016-01-08T10:31:26+0000

, , , PHP-, -. / javascipt, iframe, , .

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>

<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>

JavaScript http- JSON full html templates (, table.php).

json

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);

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>

Use Ionic framework with php files

More articles: