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…
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.
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…
expert in PHP ? but u dont know how to parse JSON for consume ? u can using axios / ajax for F7
Two steps:
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
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
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();
});
}
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>
@endsectionExcelent! :aplaudir::aplaudir:
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…
Hy DEV, try modified it
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);what is not working?
got the answer i m already getting json data so there is no need to parese agin that data…
Thanks
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?