Framework7 and Cordova with PHP and MYSQL

I have just started with Framework7… Very less tutorials are available if we want to develop dynamic database driven application.

I want to fetch data from mysql database and display it…

Not having idea how to start with this…

I know this must be simple thing for so many developers but if anyone can help me in this then I appreciate it…


1 Like

Framework 7 is a client side framework, should not interface with the database directly.

You must have a fetcher server side, like PHP as you mentioned. Best way I can think of is have PHP return json data on request and F7 can render this data with no issues.

1 Like

Ya…thats true Framework7 is for client side… Just I do not know how to json to fetch data from server side using php… I am expert in PHP but not having any idea about client side… I tried to search for tutorials but still not finding one… So seeking help in this…

Anyway thanks for your answer…

1 Like

expert in PHP ? but u dont know how to parse JSON for consume ? u can using axios / ajax for F7

1 Like

Two steps:

  1. Make the php script that outputs the data. Make it in JSON format for easier javascript consumption.
  2. Make a request to this php script in javascript from within your f7 app. You can use f7’s request methods or use the newer fetch api.

Greetings DEV!

Maybe AJAX can help you.

PHP (page.php, running externally inside your http: // Server PHP)


        header('Access-Control-Allow-Origin: *');  // no cabeçalho 

        $array = array ('test1', 'test2', 'test3');
        echo json_encode ($ array);


We set up an array and convert it to JSON.

FRONT-END (index.html)

We will make an AJAX request for our external server running PHP

var test1 = 'test1';
var test2 = 'test2';

app.request.get ('pagina.php', {
       FIELD1: teste1,
       FIELD2: test2,
   }, function (data) {
          JSON.parse (data) // transforms into JSON array
          console.log (data); // prints on the console the return




More info

1 Like

you dont really need json ! i’ve just created my first php/laravel app using f7

you dont need any extra step , just create your website like you do in any project
but instead of bootstrap (or any other client side framework ) use f7 to create your view/templates

in the final product , when you click a link ajax call fires to the server (by f7) and server returns the new view/template as they do in any other website … than f7 will replace your current view/template with the new one

1 Like

@max_zak is possible a post example of sintaxe e logic, please? The community thank!

Thank you!

I have a .php url that returns a JSON. And I used Virtual-List from F7 to show it.

It looks something like this:

function myJsonFunction() {

  var urlJson = "";

  app.request.get(urlJson , function (data) {
    var dataJson = JSON.parse(data);

    var virtualList = app.virtualList.create({
      // List Element
      el: '.virtual-list',
      // Pass array with items
      items: dataJson,
      // Custom search function for searchbar
      searchAll: function (query, items) {
        var found = [];
        for (var i = 0; i < items.length; i++) {
          if (items[i].title.toLowerCase().indexOf(query.toLowerCase()) >= 0 || query.trim() === '') found.push(i);
        return found; //return array with mathced indexes
      // List item Template7 template
        '<li>' +
          '<a href="#" class="item-link item-content">' +
            '<div class="item-inner">' +
              '<div class="item-title-row">' +
                '<div class="item-title">{{title}}</div>' +
              '</div>' +
              '<div class="item-subtitle">{{subtitle}}</div>' +
            '</div>' +
          '</a>' +
      // Item height
      height: app.theme === 'ios' ? 63 : 73,

ok here is simple 2 page app … page 1 shows list of users and when you click on any user you go to page 2 to see his information

first you need a layout … im using laravel blade but it works with any template engine …if you are not using template engine its ok you can create a header.php and footer.php and include them in all your templates … basically this code should be in every template/view


<!DOCTYPE html>
    <link rel="stylesheet" href="{{asset_url('f7/css/framework7.min.css')}}">

    var ROUTES =  [
            path: '/',
            url: "",
            path: '/user/show/:id/',
            url: "{{id}}",

<div id="app">

    <div class="view view-main" data-url="/">

<!-- Path to Framework7 Library JS-->
<script type="text/javascript" src="{{asset_url('f7/js/framework7.min.js')}}"></script>
<script type="text/javascript" src="{{asset_url('f7/js/my-app.js')}}"></script>

than user index page

    <div class="page" data-name="user-index">
        <div class="page-content"  >
            <div class="list media-list">
                <ul >
				@foreach($users as $user  )
					<a href="/user/show/{{$user->id}}/" class="item-inner item-cell">

and user-show.blade.php

    <div class="page" data-name="user-show">
        <div class="page-content"  >
           user page : {{$user->usrename}} - {{$user->email}}

Excelent! :aplaudir::aplaudir:

Hi Friends with the help of this forum , I could start building my first app… here is the link of my app

Still having problem … now able to display data from json at above page

here is the code that I am using in myapp.js

// Initialize your app
var myApp = new Framework7();

// Export selectors engine
var $$ = Dom7;

        success: function(data)
            $$( ".showcontenthere" )
            .append( "<br />" + data.ID )
            .append( "<br />" + data.post_author )
            .append( "<br />" + data.post_date_gmt )
            .append( "<br />" + data.post_title );


// Add view
var mainView = myApp.addView('.view-main', {
    // Because we use fixed-through navbar we can enable dynamic navbar
    dynamicNavbar: true

// Callbacks to run specific code for specific pages, for example for About page:
myApp.onPageInit('about', function (page) {
    // run createContentPage func after link was clicked
    $$('.create-page').on('click', function () {

// Generate dynamic page
var dynamicPageIndex = 0;
function createContentPage() {
        '<!-- Top Navbar-->' +
        '<div class="navbar">' +
        '  <div class="navbar-inner">' +
        '    <div class="left"><a href="#" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>' +
        '    <div class="center sliding">Dynamic Page ' + (++dynamicPageIndex) + '</div>' +
        '  </div>' +
        '</div>' +
        '<div class="pages">' +
        '  <!-- Page, data-page contains page name-->' +
        '  <div data-page="dynamic-pages" class="page">' +
        '    <!-- Scrollable page content-->' +
        '    <div class="page-content">' +
        '      <div class="content-block">' +
        '        <div class="content-block-inner">' +
        '          <p>Here is a dynamic page created on ' + new Date() + ' !</p>' +
        '          <p>Go <a href="#" class="back">back</a> or go to <a href="services.html">Services</a>.</p>' +
        '        </div>' +
        '      </div>' +
        '    </div>' +
        '  </div>' +

Any help appreciated…

1 Like

Hy DEV, try modified it

i am trying to get data from php page but not working… Code is as below…

            url: "pages/getpeningorer.php",
            dataType: 'json',
            cache: false,
            success:function(data) {
             var result = $.parseJSON(data);
              $.each(result, function(key, value){
                $.each(value, function(k, v){
                    if(k === "order_id"){
                        $("#pendingtable >tbody:last").append(
                    if(k === "product_id"){
                        $("#demoTable >tbody >tr:last").append(



					if(k === "status"){
                        $("#demoTable >tbody >tr:last").append(



					if(k === "remark"){
                        $("#demoTable >tbody >tr:last").append(



					if(k === "postingDate"){
                        $("#demoTable >tbody >tr:last").append(



      console.log('execute success');	

php code:

     $conn = new mysqli($host, $dbUsername, $dbPassword, $dbname);
    	if (mysqli_connect_error()) {
         die('Connect Error('. mysqli_connect_errno().')'. mysqli_connect_error());
        } else {
         $sql = "SELECT order_id,product_id,status,remark,postingDate FROM order_track_history where status='In process'";
         $result = $conn->query($sql);
    	$Pdata = array();
    	while ($row = mysql_fetch_array($result)) {
    	$picture = array(
        "order_id" => $row['order_id'],
        "product_id"         => $row['product_id'],
        "status"          => $row['status'],
        "remark"       => $row['remark'],
    	"postingDate"       => $row['postingDate']
      $Pdata[] = $picture;
   echo json_encode($Pdata);

what is not working?

got the answer i m already getting json data so there is no need to parese agin that data…

1 Like

Hey Max! I have been looking for a solution that will allow connecting Laravel and fw7 for a long time , but as I see you have already solved this problem. Could you please show an example of the file structure and explain me how fw7 is built in a project?