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: