Framework7 and Cordova with PHP and MYSQL


#1

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…

Thanks…


#2

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.


#3

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…


#4

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


#5

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.

#6

Greetings DEV!

Maybe AJAX can help you.

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

<?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
})

Examples

pagina.php

script.js

More info
http://framework7.io/docs/request.html


#7

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


#8

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

Thank you!


#9

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 = "http://example.com/json.php";

  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
      itemTemplate:
        '<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>' +
        '</li>',
      // Item height
      height: app.theme === 'ios' ? 63 : 73,
    });
    app.preloader.hide();
  });
}

#10

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

master.blade.php

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

<script>
    var ROUTES =  [
	    {
            path: '/',
            url: "site.com",
        },
        {
            path: '/user/show/:id/',
            url: "site.com/user/{{id}}",
        },
    ];
</script>

<body>
<div id="app">

    <div class="view view-main" data-url="/">
        @yield('main')
    </div>

</div>
<!-- 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>
</body>
</html>

than user index page
user-index.blade.php

@extends('master')
@section('main')
    <div class="page" data-name="user-index">
        <div class="page-content"  >
            <div class="list media-list">
                <ul >
				@foreach($users as $user  )
				<li>
					<a href="/user/show/{{$user->id}}/" class="item-inner item-cell">
						{{$user->username}}
					</a>
				</li>
				@endforeach
                </ul>
            </div>
        </div>
    </div>
@endsection

and user-show.blade.php

@extends('master')
@section('main')
    <div class="page" data-name="user-show">
        <div class="page-content"  >
           user page : {{$user->usrename}} - {{$user->email}}
        </div>
    </div>
@endsection

#11

Excelent! :aplaudir::aplaudir:


#12

Hi Friends with the help of this forum , I could start building my first app… here is the link of my app http://www.whileushop.com/lama/index_old.html

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;

$$.ajax({
        url:"http://www.whileushop.com/lama/json.php",
        type:"get",
        dataType:"json",
        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 () {
        createContentPage();
    });
});

// Generate dynamic page
var dynamicPageIndex = 0;
function createContentPage() {
	mainView.router.loadContent(
        '<!-- 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>' +
        '</div>'
    );
	return;
}

Any help appreciated…


#13

Hy DEV, try modified it


#14

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

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

                            $('<td>').append(v)
                            .append(
                                $('</td>')

                                )

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

                            $('<td>').append(v)
                            .append(
                                $('</td>')

                                )

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

                            $('<td>').append(v)
                            .append(
                                $('</td>')

                                )

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

                            $('<td>').append(v)
                            .append(
                                $('</td>')

                                )

                            );
                    }
					
					});
            });
        console.log(data);}
    });
      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);

#15

what is not working?


#16

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