Standen en wedstrijdschema van NeVoBo site inladen op eigen site

Status
Niet open voor verdere reacties.
B

BoukeWeening

Gebruiker
Lid geworden
3 apr 2007
Berichten
232
Hoi,

http://www.volleybal.nl/competitie/team/1219HS+1

Hier kun je standen en het speelschema vinden van een willekeurige competitie binnen de NeVoBo. Deze stand en het speelschema zou ik graag ook op onze clubsite willen tonen, natuurlijk in stijl van onze site. Nu kun je een RSSfeed van Nevobo gebruiken maar deze is niet goed (in tabellen o.i.d.) op te maken.

Heeft iemand een idee om dit goed in te laden en mooi weer te geven op onze site?
 
Hier een voorbeeld van de stand

Code: 
<table border="1">
<tr>
<th>Team</th>
<th>Wedstrijden</th>
<th>Punten</th>
</tr>
<?php
$content = file_get_contents('http://www.volleybal.nl/application/handlers/export.php?format=rss&type=poule&standen=H1A&iRegionId=1000');
$content = getBetween($content, '<![CDATA[# Team', ']]>');
if($content == null) {
	echo("Data verkrijgen mislukt.");
	break;
}
$vervang = array("wedstr: ", "punten: ");
$content = str_replace($vervang, "", $content);
$resultaten = explode("<br />", $content);
foreach ($resultaten as &$resultaat) {
	if(contains($resultaat, ",")) {
		$split = explode(",", $resultaat);
		echo("<tr><td>" . $split[0] . "</td><td>" . $split[1] . "</td><td>" . $split[2] . "</td></tr>");
	}
}

function getBetween($content,$start,$end){
    $r = explode($start, $content);
    if (isset($r[1])){
        $r = explode($end, $r[1]);
        return $r[0];
    }
    return null;
}

function contains($content, $checkfor) {
	return strpos($content,$checkfor) !== false;
}
?>
</table>

1iArm.png
 
Laatst bewerkt:
Top, dit is precies wat ik wil... Maar...

Ik werk met MODX (cms) en daar doet hij het niet. Waarschijnlijk dat je vrij snel kan zien wat ik niet goed doe maar ik doorzie het niet. In Modx moet je PHP code in een Snippet zetten:

http://rtfm.modx.com/display/revolution20/Snippets

Dan werkt het geheel niet en geeft hij een Server 500 fout terug. Ik denk dat het hier aan kan liggen (zie ook vet gedrukte gedeelte):

Here's the perfunctory super-basic example of what a Snippet's code might look like:

<?php
return 'Hello, World!';
?>

If you named this "helloWorld", you could call this snippet by using [[helloWorld]] in your documents, templates, or Chunks (see Tag Syntax). You can also call a Snippet from another Snippet using the runSnippet API method.

Note how we returned the code rather than echo'ed the content out. Never use echo in a Snippet - always return the output.
Passing Values Into a Snippet

Values are passed to your Snippet using a modifed CGI web-form type notation that follows the Snippet's name. If your Snippet were named "mySnippet", you might call it using something like this:

[[!mySnippet? &input=`Hello World`]]
And the code for your Snippet might look something like this:

<?php
return 'My input was: ' . $input;
?>

Notice that the variable names in the calling bit need to match the variable names in the Snippet EXACTLY (case matters... i.e. 'input' not 'INPUT' or 'Input'). Secondly, don't forget the '&' in front of the would-be variable names. And last but most certainly not least, take note that those are backticks, not single quotes!
 
Ik heb geen ervaring met MODX maar volgens mij moet je van mijn php script een method maken en dan de volledige html code returnen

Zie hier
 
Als iemand ervaring heeft met MODX zou die je kunnen helpen.
Anders wil ik eventueel het script op me gratis php host zetten en dat je het dan in een iframe van je site laadt.
 
Stapje voor stapje ga ik het toch proberen :) Leer ik er ook nog van!

Ik heb nu twee bestandjes, volgens jouw voorbeeld die ik later weer kan verwerken in MODX

Bestand 1: rssfetchfeed.php
PHP: 
<?php

function fetchFeed($feed_url){
//create a variable to hold the output
$output = '';

//retrieve file and return as string</pre>
$content = file_get_contents($feed_url);

try {
//all is good, we parse the feed
$feeditems = new SimpleXMLElement($content);

//iterate over item in the channel and get the title of each item
foreach($feeditems->channel->item as $entry){
$output .= "<a href='$entry->link' title='$entry->title'>" . $entry->title . '</a><br />';
}

} catch (Exception $e) {
 //some error occured, we output an error message and a description of the error
 $output .= 'An error occurred.  The feed ' . $feed_url . ' could not be read: ' . $e-

>getMessage();
 }
return $output;
}

Bestandje 2: testfeed.php

PHP: 
<?php
//first we include the function file
require_once('rssfetchfeed.php');

//now call the function
echo fetchFeed('http://www.volleybal.nl/application/handlers/export.php?format=rss&type=poule&standen=H1A&iRegionId=1000');

Nu krijg ik alleen een titel terug... Kan ik hier weer alle gegevens terug krijgen maar dan wel in deze PHP stijl?
 
Bestandje 1 vervangen met dit

PHP: 
<?php
function fetchFeed($feed_url){
	$output = "<table border=\"1\"><tr><th>Team</th><th>Wedstrijden</th><th>Punten</th></tr>";
	$content = file_get_contents($feed_url);
	$content = getBetween($content, '<![CDATA[# Team', ']]>');
	if($content == null) {
		return "Data verkrijgen mislukt.";
	}
	$vervang = array("wedstr: ", "punten: ");
	$content = str_replace($vervang, "", $content);
	$resultaten = explode("<br />", $content);
	foreach ($resultaten as &$resultaat) {
		if(contains($resultaat, ",")) {
			$split = explode(",", $resultaat);
			$output += "<tr><td>" . $split[0] . "</td><td>" . $split[1] . "</td><td>" . $split[2] . "</td></tr>");
		}
	}
	$output += "</table>";
	return $output;
}

function getBetween($content,$start,$end){
    $r = explode($start, $content);
    if (isset($r[1])){
        $r = explode($end, $r[1]);
        return $r[0];
    }
    return null;
}

function contains($content, $checkfor) {
	return strpos($content,$checkfor) !== false;
}
?>
 
Laatst bewerkt:
Ik heb ook deze nog kunnen vinden... Hiermee krijg ik wel de hele lijst te zien met standen alleen niet in een tabel... is deze misschien om te bouwen zodat hij alles in een tabel weergeeft?

PHP: 
<?php
/**
 * getFeed
 *
 * A simple snippet to retrieve an RSS feed and iterate the feed items using a Chunk.
 *
 * @author Jason Coward <jason@modxcms.com>
 * @author Shaun McCormick <shaun@modxcms.com>
 *
 * @version 1.0.0-beta
 * @copyright Copyright 2010 by Jason Coward
 * @license http://www.gnu.org/licenses/gpl.txt GPLv3
 */
if (!defined('MAGPIE_OUTPUT_ENCODING')) {
    $outputEncoding = $modx->getOption('outputEncoding',$scriptProperties,'UTF-8');
    define('MAGPIE_OUTPUT_ENCODING',$outputEncoding);
}
$limit = isset($limit) ? (integer) $limit : 0;
$offset = isset($offset) ? (integer) $offset : 0;
$totalVar = !empty($totalVar) ? $totalVar : 'total';
$total = 0;
$output = array();
if (!empty($url) && $modx->getService('rss', 'xmlrss.modRSSParser')) {
    $rss = $modx->rss->parse($url);
    if (!empty($rss) && isset($rss->items)) {
        $total = count($rss->items);
        $modx->setPlaceholder($totalVar, $total);
        $itemIdx = 0;
        $idx = 0;
        while (list($itemKey, $item) = each($rss->items)) {
            if ($idx >= $offset) {
                if (!empty($tpl)) {
                    $output[] = $modx->getChunk($tpl, $item);
                } else {
                    $output[] = '<pre>'.$idx.': ' . print_r($item, true) . '</pre>';
                }
                $itemIdx++;
                if ($limit > 0 && $itemIdx+1 > $limit) break;
            }
            $idx++;
        }
    } else {
        $modx->log(modX::LOG_LEVEL_ERROR, "Error parsing RSS feed at {$url}", '', 'getFeed', __FILE__, __LINE__);
    }
}
$output = implode("\n", $output);

if (!empty($scriptProperties['toPlaceholder'])) {
    $modx->setPlaceholder($scriptProperties['toPlaceholder'],$output);
    return '';
}
return $output;

De chunk die daarbij hoort (de template zeg maar) is:

<div id="standen_home">
<h1>[[+title]]</h1>
<table>[[+summary]]</table>
[[+category]]
[[+link]]
</div>
 
Laatst bewerkt:
Hoi Bouke,
Misschien valt er nog een andere weg te bewandelen.
Zie je kans om de rss-feed op deze manier op je pagina te krijgen?

HTML: 
<p># Team<br />1. Animo'68 HS 3, wedstr: 4, punten: 16<br />2. De Meeuwen HS 3, wedstr: 3, punten: 13<br />3. Stentor HS 2, wedstr: 4, punten: 12<br />4. Peelermarke HS 1, wedstr: 3, punten: 8<br />5. Doles HS 1, wedstr: 3, punten: 8<br />6. Olympia HS 2, wedstr: 3, punten: 7<br />7. Rovoc/Impala combi, wedstr: 2, punten: 6<br />8. Klaverblad Verzekeringen/Quint HS 1, wedstr: 3, punten: 4<br />9. Donitas HS 5, wedstr: 3, punten: 4<br />10. VC Grijpskerk Sport je Fit HS 1, wedstr: 3, punten: 2<br />11. Thalassa HS 1, wedstr: 1, punten: 0<br /></p>

Met vriendelijke groet,
CSShunter
 
Mooi! Dan lukt het mij wel om er met javascript en css een tabel van te brouwen. :D


  • Fase 1: feed-table-a.htm
    Rechttoe-rechtaan van tekst naar tabel (voor het effect een onclick erbij gezet).

  • Fase 2: feed-table-b.htm
    Opmaak erbij, plus uitgevoerd als "unobtrusive" (niet in de weg staand) javascript: als js uit staat, wordt de pure rss-feed als tekstversie getoond.
    Hierdoor blijft de pagina toegankelijk en kunnen de ca. 2% scriptloze surfers (met name bezoekers die een pure tekstbrowser of een voorleesbrowser gebruiken) ook de uitslagen zien/horen.
    Tevens als veiligheidsmaatregel toegevoegd: een "Noodklep"-optie voor geval er iets in de rss-feed mis mocht zijn gegaan, want dan kan de tabel in elkaar storten.
    NB: iets dergelijks zou ook bij een PHP-alternatief toegevoegd moeten worden, want daarbij speelt hetzelfde!

  • Fase 3: feed-table-c.htm
    Exact hetzelfde als fase b, maar hier een puntje laten ontbreken in de rss-feed (alles is afhankelijk van een 100% correcte rss-feed, die telkens op dezelfde manier moet binnenkomen!).
    De fout in de tabel wordt meteen zichtbaar, en men kan de Noodklep inschakelen.

  • Fase 4: feed-table-d.htm
    Als fase c, maar hier is met wat extra javascript een tabel-controle toegevoegd, die bij een ontbrekende tabelcel automatisch de Noodklep opent.

  • Fase 5 (eindresultaat): feed-table-e.htm
    Javascript hetzelfde als fase d, maar nu is foutloze rss-feed toegediend, zodat de Noodklep niet vanzelf open gaat.

Is dat wat?

[edit]O ja:[/edit]
  • Getest in Firefox, Chrome, Opera, Safari en IE7; en allen positief. ;)
  • Blijkens Netrenderer.com gaat het ook goed in IE8, IE9 en IE10.
  • Opmaak: IE7 en IE8 kunnen niet de ronde hoekjes en de afwisselend gekleurde rijen laten zien, de rest wel.

O ja (2): In hun interne huishouding ("View generated source code") blijken de browsers er geen <br /> met een spatie + slash op na te houden. Ze doen het met <BR> (Internet Explorer) of <br> (de rest). Vandaar dat de spatie-slash in het script ontbreekt!

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Hoi Bouke,
Jaha, om in voetbaltermen te spreken: "Elk antwoord hep z'n vraag". :)

Toen ik de gratis kant-en-klare oplossing fabriekte (met testen mee toch al gauw zo'n 2 dagdelen) veronderstelde ik dat je als vrijwillige Peelermarker met de website bezig was.
Daarna zag ik dat je een professioneel bureau bent dat de site verzorgt: "Design en ontwikkeling".
O.k., ook graag gedaan, want was een leuke uitdaging; maar eigenlijk is helpmij meer bedoeld om tips te geven hoe je het zelf kunt aanpakken dan om opdrachten uit te voeren en pasklare oplossingen te ontwikkelen voor professionals.

Maar nu je toch zo goed bezig bent. ;) Lukt je dit ook bij het programma?
Klik om te vergroten...
Jaha, om in voetbaltermen te spreken: "Elke vraag hep z'n vraag". :D
Dus mijn vraag luidt:
  • Is het voor een webdesign- en webontwikkelingbureau niet vrij eenvoudig om het zelf te laten lukken met de broncode van m'n werkend voorbeeld in de hand? ;)
    C.q. als je er niet uitkomt, hier het halffabrikaat te laten zien in een testpagina?

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Hoi,

Zo is het niet helemaal, ik maak inderdaad als vrijwillige Peelermarker de website. Het 'professionele bureau' is al een tijdje niet meer zo actief :)

Maar ik ga er zelf eens mee aan de knutsel...
 
Hoi Bouke,
Ah, niets op internet is zoals het lijkt! :)

In het kader van de creatieve zelfwerkzaamheid zou ik eigenlijk moeten afwachten waar jij mee op de proppen komt, maar kon het niet laten om ook zelf op verkenning uit te gaan.
Dus wil je liever eerst zelf verder knutselen, dan lees je het onderstaande gewoon nog even niet. ;)

Andere methode van aanpak
Deze feed vraag om een andere tactiek, want het is deze keer niet een echte tabel met kolommen waar alles in moet komen, maar er moet per wedstrijd alleen een mooie opsomming onder elkaar komen. Gelukkig zijn alle wedstrijden afzonderlijk al verpakt in een <div class="programma">, daarmee zijn ze prachtig vast te pakken.
Ik werk altijd stapje voor stapje, dan kan ik het zelf ook nog volgen. :D



De bijzonderheden beginnen telkens met dezelfde woorden: "Wedstrijd", "Datum" en "Speellocatie"
Die woorden kunnen er met javascript uitgepikt worden: door voor elk woord een <p> te zetten, worden het aparte regels. Ook aan de afsluitende </p>'s moet gedacht worden.



Met javascript kan telkens een <span class="pm"> om het Peelermarke-team gezet worden, zodat dit uitgelicht kan worden.



... totdat de Peelermarke-styles met CSS worden toegevoegd, bv. om makkelijk het UIT en THUIS spelen te kunnen zien:



Op de link-regels wordt nogal wild-west afgebroken voor een tweede regel: soms midden in een teamnaam, soms voor het streepje -, en soms erna.
Dat kan tegengegaan worden door met javascript eerst te kijken of een tweede regel wel nodig is. Hiervoor wordt de breedte van de hele rechterkolom even tijdelijk op 100% gezet. Nu kan met javascript opgemeten worden hoeveel pixels breed het inline-block van een link is. Is dat breder dan z'n blokje (rekening houdend met de paddings), dan wordt de knoop doorgehakt en er vóór het streepje een <span id="next"> ingevoegd; en later weer afgesloten met een </span>. Zo kan de tweede regel apart opgemaakt worden. Hierna gaat de breedte van de hele rechterkolom weer snel terug naar zijn goede breedte!


  • Zonder vormgeving van de span valt er nog weinig van te zien: feed-programma-08.htm
    (Het Grijpskerk-team in het onderste blok staat nog steeds over twee regels verdeeld)

Dit kan echter nog even wachten. Eerst de gaten dichten die al een hele tijd in de links-blokjes zitten!
Nu de linkregel zo nodig opgesplitst is in twee regels, kan namelijk met javascript het inline-block karakter van de links (nodig voor het opmeten van de lengte) veranderd worden in een block-karakter, waarmee de gaten gedicht worden.
Hierdoor zijn tegelijkertijd de link-blokjes overal aanklikbaar, niet alleen op de links zelf.



En tenslotte kunnen met css de eventuele tweede regels van een link via hun span op de volgende regel komen en tevens rechts uitgelijnd worden, zodat er onder de datums niets staat en deze snel te overzien zijn.



Zoiets?
Met vriendelijke groet,
CSShunter
__________
PS:
Ik vind de huidige wow-slider wel heel erg wow: vreselijk onrustig voor de bezoeker bij het lezen van de pagina; zeker bij een resolutie van 1280*1024px of kleiner (tablets!), wanneer de slider minstens 1/3 van de beeldschermhoogte in beslag neemt.
Misschien heb je hier iets aan: foto-carrousel_doorklikloos.php (met wat tragere instelling van de wisseling)? Die sleurt de plaatjes niet van links naar rechts heen en weer over het scherm, maar werkt met vloeiende fade-in/fade-out's (en heeft geen jQuery nodig; alleen een scriptje van 3kB). Met aangepaste css (gebruiksaanwijzing ingesloten): doet het ook bij grote images!
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan