[Erledigt] ZEND Progressbar/Ladebalken während Mysqlabfrage

MLang · 20.05.2011, 13:28

Servus,

ich arbeite mich gerade etwas tiefer in Zend im Zusammenspiel mit Jquery ein. Leider finde ich nur Tutorials die mittels Jquery UI eine Ladebalken per Timeout simulieren und leider auch nix was in Verbindung mit Zend steht.

Kennt hier jemand ein gutes Tutorial diesbezüglich oder könnte mir mit ein paar Codeschnippseln weiterhelfen.

Derzeit speichere/editiere ich Daten schon mittels Jquery.submit das klappt auch soweit alles wunderbar nur hier stoße ich derzeit an meine Grenzen.

Im Endeffekt müsste der Status des Balkens während einer foreach Schleife aktualisert werden. In dieser Schleife werden nach und nach Insert/Update Statements aufgerufen. Da das ganze schon bis zu 20 Sekunden dauern kann würde ich hier gerne eine Info für den User haben, dass das Script noch läuft.

Für Denkanstösse und Hilfe bin ich sehr dankbar.

rudygotya · 21.05.2011, 13:24

Bei einem Dateiupload müsste dir php erstmal den Fortschritt anzeigen können. Dafür kannst du z.B. die pecl library uploadprogress verwenden. Seit der 1.0 ist da anscheinend nicht mehr viel passiert.

Um nicht alle 5 sec eine Ajax-Anfrage starten zu müssen, würde ich dir hier zu longpolling raten.

grüße Basti

php1704 · 21.05.2011, 15:14

Stylesheet:

Code:

<style type="text/css">
#worker {
	position: absolute;
	left: -100px;
	top: -100px;
	width: 1px;
	height: 1px;
}
#progressbar-container {
	width: 100px;
	height: 30px;
	border: 1px solid #000000;
	background-color: #ffffff;
}
#progressbar-done {
	width: 0;
	height: 30px;
	background-color: #000000;
}
</style>

javascript:

Code:

<script type="text/javascript">
function updateProgressBar(data)
{
	document.getElementById('progressbar-done').style.width = data.percent + '%';
	document.getElementById('progressbar-percent').innerHTML = data.percent + '%';
}

function finishProgressBar()
{
	alert("Fertig!");
}
</script>

Html:

Code:

<div id="progressbar-container">
<div id="progressbar-done"></div>
</div>
<div id="progressbar-percent">0%</div>

<iframe src="/index/work" id="worker"></iframe>

PHP:

PHP-Code:

  public function workAction()

{

    $maxSteps = 20;

 
    $progress = new Zend_ProgressBar(

        new Zend_ProgressBar_Adapter_JsPush(

            array(

                'updateMethodName' => 'updateProgressBar',

                'finishMethodName' => 'finishProgressBar'

            )

        ),

        0,

        $maxSteps

    );

 
    for($i = 0; $i <= $maxSteps; $i++) {

        // TODO: insert, update ect

        $progress->update($i);

    }

 
    $progress->finish();

    exit;

}

Grüße.

dreamcatcher · 21.05.2011, 17:18

Zitat:

Zitat von MLang

[...]Kennt hier jemand ein gutes Tutorial diesbezüglich oder könnte mir mit ein paar Codeschnippseln weiterhelfen.
[...]

Google.com

alternativ

http://framework.zend.com/manual/de/...roduction.html

Dort hast du sogar deinen fertigen "Codeschnipsel", auch für jQuery...
Bookmark dir die Dokumentation.
Dafür ist sie da.

MLang · 23.05.2011, 13:26

Erstmal danke für die bisherigen Infos. Inzwischen hatte ich die Codeschnipsel auch in der Doku gefunden und auch getestet leider etwas erfolglos. Aber ich werde es weiter probieren. Was ich an Zend_Progressbar unschön finde ist die Tatsache das die Abfrage in einem versteckten Iframe läuft. Gibt es da auch Möglichkeiten ohne IFrame ?

EDIT:
Also mit dem IFrame habe ich es jetzt hinbekommen, was so nen Wochenende drüber schlafen doch ausmachen kann. Bleibt trotzdem noch die Frage ob das ganze auch ohne IFrame möglich ist.

dreamcatcher · 23.05.2011, 14:55

Ich persönlich würde mich nicht für die Zend_Progressbar entscheiden, sondern für die des jQuery UI Frameworks.

(http://jqueryui.com/demos/progressbar/)

Das % ausrechnen würd ich dementsprechend manuell im Model mit ner Methode machen.

MLang · 24.05.2011, 08:23

Habe ich mir auch schon überlegt, da ich jQuery eh schon nutz wäre das mit Sicherheit die sinnvollste Lösung, aber würde wohl auch nur über nen verstecktes IFrame gehen oder ? Also den DB Update über nen Post in nen IFrame auslösen und Werte zurückgeben lassen, die vom Hauptframe wieder verarbeitet und an die Progressbar weitergeleitet werden.

php1704 · 24.05.2011, 13:07

Zitat:

Zitat von dreamcatcher

Ich persönlich würde mich nicht für die Zend_Progressbar entscheiden, sondern für die des jQuery UI Frameworks.

(http://jqueryui.com/demos/progressbar/)

Das % ausrechnen würd ich dementsprechend manuell im Model mit ner Methode machen.

Zend_ProgressBar und die JQuery-UI-Progressbar arbeiten doch prima zusammen.

Zend_ProgressBar läuft am Server. Kannst also in deinem PHP-Code aktualisieren.
Die Progressbar von JQuery-UI sorgt nur für die Darstellung im Browser.

Code:

function updateProgressBar(data)
{
	$('#progressbar').progressbar({'value': data.percent});
}

Grüße.

MLang · 24.05.2011, 15:45

Sodala ... das Zusammenspiel klappt jetzt auch zwischen Zend_Progressbar und jQuery Progressbar. Jetzt bastel ich nur noch an nem DIv wie bei den Dialog Boxen von jQuery UI, damit Seite im Hintergrund nicht anklickbar ist. Hat hierzu noch jemand ein paar Tipps ?

View Script sieht derzeit so aus:

PHP-Code:

      <script type="text/javascript">
        function Zend_ProgressBar_Update(data)
        {
            if($('#progressbarWrapper').is(':hidden'))
            {
                $('#progressbarWrapper').show();
                $("#progressbar").progressbar({
                    value: 50
                });
            }

            var stepping = String(data.percent).split('.');
            $('#progressbar').progressbar('option','value',parseInt(stepping[0]));
            $("#progresstext").html(stepping[0] + ' / 100% abgeschlossen');
        }

        function Zend_ProgressBar_Finish()
        {
            $('#progressbarWrapper').hide();
        }
    </script>
    <iframe src="/datatables/insert" id="worker" name="workerIFrame"></iframe>
    <div id="progressbarWrapper">
           <div id="progressbar"></div>
        <div id="progresstext"></div>
    </div>

Im Controller habe ich folgenden Absatz:

PHP-Code:

                      $adapter     = new Zend_ProgressBar_Adapter_JsPush(array(    'updateMethodName' => 'Zend_ProgressBar_Update',
                                                                                 'finishMethodName' => 'Zend_ProgressBar_Finish'));
                    $progressBar = new Zend_ProgressBar($adapter, 0, count($toInsertFields));
                    
                    $dataset = 0;
                    foreach ($toInsertFields as $Field)
                    {
                        $query = $db->query('GESTRICHEN');
                        $progressBar->update($dataset);
                        $dataset++;
                    }
                                   $progressBar->finish();

Und das CSS dafür:

PHP-Code:

          #worker
        {
            position: absolute;
            left: -100px;
            top: -100px;
            width: 1px;
            height: 1px;
            overflow: hidden;
        }

        #progressbarWrapper
        {
            position: absolute;
            background-color: #000;
            top: 0px;
            left: 0px;
            width: 100%;
            margin: auto; /* Div soll zentriert werden */
            min-height: 100%; /* Mindesthöhe für moderne Browser */
            height:auto !important; /* Important Regel für moderne Browser */
            height:100%; /* Mindesthöhe für den IE */
            overflow: hidden !important; /* FF Scroll-leiste */
            z-index: 95;
            opacity: 0.3;
            display: none;
        }
        
        #progressbar
        {
            position: relative;
            top: 250px;
            z-index: 100;
            opacity: 1;
            width: 400px;
            margin: auto;
        }

        #progresstext 
        {
            position: relative;
            top: 250px;
            z-index: 101;
            opacity: 1;
            width: 400px;
            margin: auto;
        }

Leider bin ich net so der CSS Spezi. Habe auch schon versucht mittels der UI Optionen von jQuery zu experimentieren aber da kam nur ne komplett graue Seite. also bräcuchte ich jetzt eigentlich nur noch bei dem CSS ein bisserl Hilfe und ob das bisher so okay ist bin ich mir mal überhaupt nicht sicher.

EDIT: Hat sich erledigt. Habs jetzt so wie ich will und läuft wunderbar. Habe mit Hilfe einiger Tutorials CSS entschlackt und komplett umgebaut.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Rightmanagement mit ZEND Framework	dreamcatcher	Software-Design	8	15.04.2011 09:18
Zend Server CE und Debugging	shimu	Off-Topic Diskussionen	1	26.03.2011 02:46
Zend Framework Schulung	abdullah	Beruflich	2	16.01.2011 13:00
[Erledigt] PHP-Entwickler, Zend certified zur Festanstellung in Hamburg gesucht	Speicher210	Gewerblich	0	24.08.2010 11:47
Zend Entwicklerlizenz	Rastaloeckchen	Sonstige	1	08.06.2010 00:29
Zend Webinare	robo47	Off-Topic Diskussionen	0	16.03.2010 10:02
Zend Zertifizierung	krackmoe	PHP Tipps 2009	6	09.03.2010 12:55
Zend Studio (Javascript Unterstützung)?	customer-tk	Off-Topic Diskussionen	6	12.11.2009 22:42
[S] Zend Framework Coder	ThisRockZ	Beitragsarchiv	0	14.10.2009 13:14
Zend Optimizer	tito-toti	Server, Hosting und Workstations	2	27.03.2009 15:16
Zend Studio for Eclipse und Zend Framework	KeKs0r	PHP-Fortgeschrittene	5	15.12.2008 15:10
Zend Framework	Melchior	PHP-Fortgeschrittene	29	13.03.2008 21:12
[Erledigt] Zend Optimizer auf SUSE 9.3 server installieren		Server, Hosting und Workstations	35	14.02.2006 16:55
Alternativen zu Zend SafeGuard (Zend Optimizer)		PHP Tipps 2004-2	2	15.11.2004 14:07

20.05.2011, 13:28
MLang Benutzer Registriert seit: 25.02.2011 Beiträge: 42 PHP-Kenntnisse: Fortgeschritten	[Erledigt] ZEND Progressbar/Ladebalken während Mysqlabfrage Servus, ich arbeite mich gerade etwas tiefer in Zend im Zusammenspiel mit Jquery ein. Leider finde ich nur Tutorials die mittels Jquery UI eine Ladebalken per Timeout simulieren und leider auch nix was in Verbindung mit Zend steht. Kennt hier jemand ein gutes Tutorial diesbezüglich oder könnte mir mit ein paar Codeschnippseln weiterhelfen. Derzeit speichere/editiere ich Daten schon mittels Jquery.submit das klappt auch soweit alles wunderbar nur hier stoße ich derzeit an meine Grenzen. Im Endeffekt müsste der Status des Balkens während einer foreach Schleife aktualisert werden. In dieser Schleife werden nach und nach Insert/Update Statements aufgerufen. Da das ganze schon bis zu 20 Sekunden dauern kann würde ich hier gerne eine Info für den User haben, dass das Script noch läuft. Für Denkanstösse und Hilfe bin ich sehr dankbar.


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

21.05.2011, 13:24
rudygotya Erfahrener Benutzer Registriert seit: 28.05.2008 Beiträge: 2.094 PHP-Kenntnisse: Fortgeschritten	Bei einem Dateiupload müsste dir php erstmal den Fortschritt anzeigen können. Dafür kannst du z.B. die pecl library uploadprogress verwenden. Seit der 1.0 ist da anscheinend nicht mehr viel passiert. Um nicht alle 5 sec eine Ajax-Anfrage starten zu müssen, würde ich dir hier zu longpolling raten. grüße Basti __________________ ++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++ Blog

23.05.2011, 13:26
MLang Benutzer Registriert seit: 25.02.2011 Beiträge: 42 PHP-Kenntnisse: Fortgeschritten	Erstmal danke für die bisherigen Infos. Inzwischen hatte ich die Codeschnipsel auch in der Doku gefunden und auch getestet leider etwas erfolglos. Aber ich werde es weiter probieren. Was ich an Zend_Progressbar unschön finde ist die Tatsache das die Abfrage in einem versteckten Iframe läuft. Gibt es da auch Möglichkeiten ohne IFrame ? EDIT: Also mit dem IFrame habe ich es jetzt hinbekommen, was so nen Wochenende drüber schlafen doch ausmachen kann. Bleibt trotzdem noch die Frage ob das ganze auch ohne IFrame möglich ist. Geändert von MLang (23.05.2011 um 13:48 Uhr).

23.05.2011, 14:55
dreamcatcher Erfahrener Benutzer Registriert seit: 28.12.2010 Beiträge: 603 PHP-Kenntnisse: Anfänger	Ich persönlich würde mich nicht für die Zend_Progressbar entscheiden, sondern für die des jQuery UI Frameworks. (http://jqueryui.com/demos/progressbar/) Das % ausrechnen würd ich dementsprechend manuell im Model mit ner Methode machen.

24.05.2011, 08:23
MLang Benutzer Registriert seit: 25.02.2011 Beiträge: 42 PHP-Kenntnisse: Fortgeschritten	Habe ich mir auch schon überlegt, da ich jQuery eh schon nutz wäre das mit Sicherheit die sinnvollste Lösung, aber würde wohl auch nur über nen verstecktes IFrame gehen oder ? Also den DB Update über nen Post in nen IFrame auslösen und Werte zurückgeben lassen, die vom Hauptframe wieder verarbeitet und an die Progressbar weitergeleitet werden.

24.05.2011, 15:45
MLang Benutzer Registriert seit: 25.02.2011 Beiträge: 42 PHP-Kenntnisse: Fortgeschritten	Sodala ... das Zusammenspiel klappt jetzt auch zwischen Zend_Progressbar und jQuery Progressbar. Jetzt bastel ich nur noch an nem DIv wie bei den Dialog Boxen von jQuery UI, damit Seite im Hintergrund nicht anklickbar ist. Hat hierzu noch jemand ein paar Tipps ? View Script sieht derzeit so aus: PHP-Code: <script type="text/javascript"> function Zend_ProgressBar_Update(data) { if($('#progressbarWrapper').is(':hidden')) { $('#progressbarWrapper').show(); $("#progressbar").progressbar({ value: 50 }); } var stepping = String(data.percent).split('.'); $('#progressbar').progressbar('option','value',parseInt(stepping[0])); $("#progresstext").html(stepping[0] + ' / 100% abgeschlossen'); } function Zend_ProgressBar_Finish() { $('#progressbarWrapper').hide(); } </script> <iframe src="/datatables/insert" id="worker" name="workerIFrame"></iframe> <div id="progressbarWrapper"> <div id="progressbar"></div> <div id="progresstext"></div> </div> Im Controller habe ich folgenden Absatz: PHP-Code: $adapter = new Zend_ProgressBar_Adapter_JsPush(array( 'updateMethodName' => 'Zend_ProgressBar_Update', 'finishMethodName' => 'Zend_ProgressBar_Finish')); $progressBar = new Zend_ProgressBar($adapter, 0, count($toInsertFields)); $dataset = 0; foreach ($toInsertFields as $Field) { $query = $db->query('GESTRICHEN'); $progressBar->update($dataset); $dataset++; } $progressBar->finish(); Und das CSS dafür: PHP-Code: #worker { position: absolute; left: -100px; top: -100px; width: 1px; height: 1px; overflow: hidden; } #progressbarWrapper { position: absolute; background-color: #000; top: 0px; left: 0px; width: 100%; margin: auto; /* Div soll zentriert werden / min-height: 100%; / Mindesthöhe für moderne Browser / height:auto !important; / Important Regel für moderne Browser / height:100%; / Mindesthöhe für den IE / overflow: hidden !important; / FF Scroll-leiste / z-index: 95; opacity: 0.3; display: none; } #progressbar { position: relative; top: 250px; z-index: 100; opacity: 1; width: 400px; margin: auto; } #progresstext { position: relative; top: 250px; z-index: 101; opacity: 1; width: 400px; margin: auto; } Leider bin ich net so der CSS Spezi. Habe auch schon versucht mittels der UI Optionen von jQuery zu experimentieren aber da kam nur ne komplett graue Seite. also bräcuchte ich jetzt eigentlich nur noch bei dem CSS ein bisserl Hilfe und ob das bisher so okay ist bin ich mir mal überhaupt nicht sicher. EDIT: Hat sich erledigt. Habs jetzt so wie ich will und läuft wunderbar. Habe mit Hilfe einiger Tutorials CSS entschlackt und komplett umgebaut. Geändert von MLang (25.05.2011 um 13:18 Uhr).*