Php loading / progress bar

helmuteke
Pro Member
Pro Member
Berichten: 427
Lid geworden op: 08 Feb 2010
Bedankt: 24 keer
Uitgedeelde bedankjes: 2 keer

Php loading / progress bar

Berichtdoor helmuteke » 2 weken 5 dagen 11 uur geleden (04 Apr 2019, 14:55)

ik probeer nu toch al een tijdje een antwoord te vinden op onderstaand.

ik heb een php pagina dat een SQL query uitvoert (een redelijke lange van ong. 40 seconden , lezen uit mysql , schrijven naar pervasive sql)

ik zoek dan ook een manier om een soort loading bar of spinning wheel op scherm te krijgen als de query loopt , na de uitvoering van de query wordt da pagina doorgestuurd via header("location: ... naar de beginpagina.

iemand dat met de goede richting uitduwt

lanadekat
Elite Poster
Elite Poster
Berichten: 759
Lid geworden op: 23 Aug 2013
Bedankt: 63 keer
Recent bedankt: 2 keer
Uitgedeelde bedankjes: 36 keer

Re: Php loading / progress bar

Berichtdoor lanadekat » 2 weken 5 dagen 9 uur geleden (04 Apr 2019, 16:16)

Ik denk dat je dat het best met Javascript (AJAX) kan implementeren.

Gebruikersavatar
meon
Administrator
Administrator
Berichten: 15882
Lid geworden op: 18 Feb 2003
Twitter: meon
Locatie: Bree
Bedankt: 554 keer
Recent bedankt: 1 keer
Uitgedeelde bedankjes: 478 keer
Contact:

Re: Php loading / progress bar

Berichtdoor meon » 2 weken 5 dagen 9 uur geleden (04 Apr 2019, 16:21)

Een progress bar werkt enkel als je kan voorspellen waar het eindpunt zich bevindt.

Als je het puur visueel wilt doen om duidelijk te maken dat er "iets" gebeurt en dat wachten de boodschap is, zonder dat je daarbij een voorbepaalde duurtijd kan opgeven is een generieke loading icon tonen de eenvoudigste optie.

Je hebt de klassieke spinners die je kan vinden met een image search, maar als je iets creatievers wilt tonen kan je altijd eens op http://reddit.com/r/loadingicon snuffelen.

helmuteke
Pro Member
Pro Member
Berichten: 427
Lid geworden op: 08 Feb 2010
Bedankt: 24 keer
Uitgedeelde bedankjes: 2 keer

Re: Php loading / progress bar

Berichtdoor helmuteke » 2 weken 5 dagen 6 uur geleden (04 Apr 2019, 19:16)

meon schreef:Een progress bar werkt enkel als je kan voorspellen waar het eindpunt zich bevindt.

Als je het puur visueel wilt doen om duidelijk te maken dat er "iets" gebeurt en dat wachten de boodschap is, zonder dat je daarbij een voorbepaalde duurtijd kan opgeven is een generieke loading icon tonen de eenvoudigste optie.

Je hebt de klassieke spinners die je kan vinden met een image search, maar als je iets creatievers wilt tonen kan je altijd eens op http://reddit.com/r/loadingicon snuffelen.


Dit probeer ik ook , maar deze wordt niet getoond.

Het gaat als volgt

Ik roep via een pagina de pagina met de query aan , de bronpagina blijft staan met in de balk van browser een spinning wiel , na verloop wordt ik dan doorverwezen naar de doorverwijspagina. Dus alles wat ik op de pagina zet met de query in wordt niet getoond

Gebruikersavatar
meon
Administrator
Administrator
Berichten: 15882
Lid geworden op: 18 Feb 2003
Twitter: meon
Locatie: Bree
Bedankt: 554 keer
Recent bedankt: 1 keer
Uitgedeelde bedankjes: 478 keer
Contact:

Re: Php loading / progress bar

Berichtdoor meon » 2 weken 5 dagen 6 uur geleden (04 Apr 2019, 19:33)

Dan heb je last van output buffering: PHP stuurt pas de gerenderde pagina door naar de browser als alle code volledig uitgevoerd is.
Kijk eens naar de commando's ob_start(); ob_flush();

Nu, da's eigenlijk niet een nette manier want je eindigt letterlijk je </html>-tag niet.
Een header()-redirect kan je evenmin gebruiken want zoals de functie heet: dat is in de header, nog voor er content getoond wordt.

Hoe je het dus kan doen is wat lanadekat voorstelt:
- een pagina die je visuele content controleert
- een pagina met énkel uitvoerbare code (jouw query), die als respons bvb een json-object retourneert over de hoeveelheid verwerkte records of zoiets, die vanuit die eerste pagina als XHR (ajax) inlaadt.

Met wat jQuery kan je in javascript met $.ajax() best wat knutselen om bijvoorbeeld na het klikken op een knop "uitvoeren" die te vervangen door een loading.gif, en die weghalen met de tekst hoeveelheid verwerkte records als de XHR-call klaar is.

Ik weet niet hoe ver je raakt met deze tips, want ik heb niet zo meteen een kant-en-klaar voorbeeld klaarliggen :).

helmuteke
Pro Member
Pro Member
Berichten: 427
Lid geworden op: 08 Feb 2010
Bedankt: 24 keer
Uitgedeelde bedankjes: 2 keer

Re: Php loading / progress bar

Berichtdoor helmuteke » 2 weken 5 dagen 6 uur geleden (04 Apr 2019, 19:40)

Bedankt ,

Maar die link kan ik dus niet . . . Javascript nooit gedaan hoe raar het ook klinkt

Gebruikersavatar
meon
Administrator
Administrator
Berichten: 15882
Lid geworden op: 18 Feb 2003
Twitter: meon
Locatie: Bree
Bedankt: 554 keer
Recent bedankt: 1 keer
Uitgedeelde bedankjes: 478 keer
Contact:

Re: Php loading / progress bar

Berichtdoor meon » 2 weken 5 dagen 6 uur geleden (04 Apr 2019, 19:57)

Voorbeeld:
https://tools-meon.azurewebsites.net/loader/

index.php:

Code: Selecteer alles

<html>
<
head>
<
script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
</head>
<body>

<a href="#" id="btn_loader">Doe iets langzaam</a><br>
<img id="img_loader" src="loading.gif" style="display: none;">

<script>
$("#btn_loader").click(function() {
    $("#img_loader").toggle();
    $.getJSON( "slowquery.php", function( data ) {
        window.location.replace('thanks.php');
    });
});

</script>

</body>
</html>


slowquery.php:

Code: Selecteer alles

<?php 

sleep 
(10);

die(
json_encode(array('time' => '10')));

 

De javascript kan je als volgt lezen:
- bij het klikken op het HTML-element met ID 'btn_loader',
- wissel zichtbaarheid HTML-element met ID 'img_loader',
- doe een AJAX-request naar 'slowquery.php' en als die klaar is, leid dan om naar thanks.php

Ipv een sleep(10) doe jij natuurlijk jouw database-query-code.

helmuteke
Pro Member
Pro Member
Berichten: 427
Lid geworden op: 08 Feb 2010
Bedankt: 24 keer
Uitgedeelde bedankjes: 2 keer

Re: Php loading / progress bar

Berichtdoor helmuteke » 2 weken 5 dagen 6 uur geleden (04 Apr 2019, 20:00)

Bedankt

Morgen eens proberen

Waar stuur je de variablenen (GET) mee naar het slow script ?

Gebruikersavatar
meon
Administrator
Administrator
Berichten: 15882
Lid geworden op: 18 Feb 2003
Twitter: meon
Locatie: Bree
Bedankt: 554 keer
Recent bedankt: 1 keer
Uitgedeelde bedankjes: 478 keer
Contact:

Re: Php loading / progress bar

Berichtdoor meon » 2 weken 5 dagen 6 uur geleden (04 Apr 2019, 20:05)

Indien dat vaste variabelen zijn kan je die gewoon mee opgeven als slowquery.php?month=3&day=7 bijvoorbeeld.
Indien dat uit een formulier moet komen kan je beter via een POST werken.
Op https://api.jquery.com/jquery.post/ zie je onderaan een voorbeeld hoe dat kan (maar ik geef toe, ziet er complex uit als je niet met javascript bekend bent)

helmuteke
Pro Member
Pro Member
Berichten: 427
Lid geworden op: 08 Feb 2010
Bedankt: 24 keer
Uitgedeelde bedankjes: 2 keer

Re: Php loading / progress bar

Berichtdoor helmuteke » 2 weken 5 dagen 6 uur geleden (04 Apr 2019, 20:07)

Bedankt , probeer morgen het 1 en ander uit


Terug naar “Web-en applicatie-ontwikkeling”

Wie is er online

Gebruikers op dit forum: Google Feedfetcher en 1 gast