Welkom!

Deel je kennis met anderen in deze Flashgemeenschap!
Gebruikersnaam:
Wachtwoord:
Wachtwoord opslaan?
Wachtwoord vergeten?
Flash/PHP nieuwssyteem
163 downloads, 41487 keer gelezen
(April 16, 2003)
Waardering: 81 keer gestemd 
 4.3 van de 5
Eigenschappen
Flash Versie  Flash MX
Moeilijkheidsgraad  Gemiddeld

Formaat:   94 KB

In deze tutorial ga je een nieuwssysteem maken in flash, gebruik makend van PHP en MySQL.
  Flash nieuwssysteem

Flash/php/mysql nieuwssysteem



Omdat er nogal veel vraag naar een flash nieuwssysteem was, heb ik besloten er eentje te maken. Voor deze tutorial heb je een beetje basiskennis van flash nodig (weten hoe tekstvelden en buttons werken). Er komt niet echt moeilijk actionscript in voor en alle php/mysql codes worden uitgelegt.

*opmerking!. De flash voorbeelden die gebruikt worden zijn alleen ter illustratie, ze werken niet echt. Er blijft dus nu oneindig lang "loading data" staan, maar dat hoort dus...dat je niet schrikt ofzo;) Op mijn site is een werkend voorbeeld van het nieuwssysteem te vinden.
*opmerking 2!. Vergeet niet de php codes te beginnen met < ? en te eindigen met ? >

Deze tutorial bestaat uit 2 delen, namelijk:
- de user interface
- de admin

Zo zal de userinterface worden



We gaan beginnen met het gebruikersgedeelte.
We gaan eerst het flash deel maken en daarna de php scripts ervoor schrijven. Het flash gedeelte bestaat maar uit 3 layers met elk een keyframe helemaal vooraan in de tijdlijn. Begin eerst met het maken van een flash bestand van 500 * 400, de achtergrondkleur mag je natuurlijk helemaal zelf bepalen, maar ik heb gekozen voor een witte achtergrond.
Maak eerst drie layers aan en geef ze de namen actions, tekstvelden en bg. (ook in die volgorde, van boven naar beneden) Het spreek volgens mij voor zich wat er in die layers komt te staan.



We beginnen met de achtergrond. Maak hierin 2 vierkanten, naast elkaar, ter grootte van de tekstvelden, zoals jij ze wilt hebben. Het ene vierkant is voor het nieuws gedeelte en het andere vierkant voor de headlines. Deze kun je mooi gaan decoreren enzo, maar dat is nu niet echt belangrijk;)

Nu gaan we over naar de tekstvelden. We hebben maar 2 tekstvelden nodig, 1 voor het nieuws en een voor de headlines. Deze tekstvelden moet en dynamisch zijn, omdat daar alle tekst in komt. Maak eerst het tekstveld voor het bericht zelf, maak deze dynamisch en noem hem 'nieuws' (let op! geef hem geen instance name, maar een variabele naam). Vink ook het hokje met de <> aan en die er naast, die met de aB uit (selectable). De <> zorgen ervoor dat de tekst in het veld herkent worden als html, dus nu kun je ook een beperkt aantal html tags gebruiken in dit tekstveld. Daar ga ik nu verder niet op in, maar voor meer info kun je hier kijken.
Dan maak je nu op dezelfde manier een tekstveld 'headlines', maar let er op dat er 6 regels tekst in kunnen, dat kun je testen door eerst even het aantal enters te tellen dat je kunt typen in dat tekstveld, zonder dat het veld groter wordt.

Als je een groter tekstveld neemt, kunnen er meer regels (headlines) in, dat is aan jou. Ik heb er 6 genomen (in het php bestand zul je dit getal terug zien).
Dan hoeven we nu in het flash bestand alleen nog de actions te doen. Deze zet je op het keyframe in de layer 'actions'.
De actions zijn:

nieuws = "loading data...";
headlines = "loading data...";
loadVariables("nieuws.php?"+Math.random()*600000, this);


Maak nu nog 2 buttons die het nieuws tekstveld laten scrollen, op de bovenste button komt de actie

on(release) {
nieuws.scroll--
}

en op de onderste
on(release){
nieuws.scroll++
}


Sla het bestand op en dat was dan het flash gedeelte van ons nieuwssysteem! Dan kunnen we nu de tabel in de database aanleggen

Open je phpmyadmin en voer dit stukje sql code in:

CREATE TABLE nieuws (
id INT PRIMARY KEY AUTO_INCREMENT,
dagnaam VARCHAR(10),
dag INT,
maand INT,
jaar INT,
onderwerp VARCHAR(100),
bericht TEXT
)

we maken de tabel nieuws en die geven we de volgende velden:
- id, dit is de belangrijkste, die is integer (heel getal), de primaire sleutel (daarmee kun je deze tabel met andere verbinden) en hij hoogt automatisch met 1 op als er iets ingevoerd wordt, zodat je dat niet steeds handmatig hoeft te doen.
- dagnaam, hierin komen de dagen (maandag - zondag), is een stukje tekst van max 10 karakters lang
- dag, integer (1-31 in ons geval)
- maand, integer (1-12 bij ons)
- jaar, integer (doe maar iets van 2003;))
- onderwerp, stukje tekst van max 100 karakters, beetje erg veel, maar beter teveel dan te weinig, je kunt hier ook minder doen, maar mocht je nog plannen hebben voor de toekomst en lange titels gaan gebruiken, dan kan dat...
- bericht, stuk tekst van max 65.535 tekens...meer dan genoeg iig;)

Nu gaan we over naar het php gedeelte.
Open jouw favoriete scripteditor (1stpage 2000, html-kit of wat dan ook, zelfs kladblok volstaat) en maak een nieuw bestand. En typ (kopieer) de volgende code, de uitleg staat achter //

<? //Begin nieuws.php
//nieuws lezen
//connecten
$dbname = "*****"; //de naam van je database
$dbuser = "*****"; //je inlognaam
$dbpw = "*****"; //je wachtwoord
$dbhost = "*****"; //de locatie van de database

$open = mysql_connect($dbhost, $dbuser, $dbpw) or die(mysql_error());
mysql_select_db($dbname) or die(mysql_error());

//lezen
$output = "&nieuws=";
/*maak de variabele output aan voordat! de while loop begint als je dat niet doet, zal flash maar 1 ding (het laastst geselecteerde uit de db) laten zien*/

$sql=mysql_query("SELECT * FROM nieuws ORDER BY id DESC") or die (mysql_error());
/*selecteer de info uit de database, sorteer op ID aflopend (de laatste eerst)*/
while($row=mysql_fetch_array($sql))
/*maak een while loop om alles in een array te zetten*/
{ $bericht=$row["bericht"];
$onderwerp=$row["onderwerp"];
$dagnaam=$row["dagnaam"];
$dag=$row["dag"];
$maand=$row["maand"];
$jaar=$row["jaar"];

$output.="<b>$onderwerp</b><br><i>$dagnaam $dag/$maand/$jaar</i><br>$bericht<br> _____________________________<br>";
/*laat elke keer de tekst goed zien, onderwerp vet gedrukt,
datum eronder schuingedrukt en dan het bericht...
en eindigen met een lange streep tussen de berichten*/
}
echo $output;
//en echo dan alles naar flash

$headlines = "&headlines=";
/*maak weer de variabele aan om de headlines neer te zetten*/

$sql=mysql_query("SELECT onderwerp, dag, maand, jaar FROM nieuws ORDER BY id DESC LIMIT 6") or die (mysql_error());
/*selecteer nu alleen de dingen die we nodig hebben voor de headlines limiet staat op 6, zodat je alleen de laatste 6 berichten ziet,
dit past precies in tekstveld van ons... als je die groter wilt hebben moet je het tekstveld ook groter maken of er een scrollbar bij maken*/

while($row=mysql_fetch_array($sql))
//en een leuke array voor
{
$onderwerp=$row["onderwerp"];
$dag=$row["dag"];
$maand=$row["maand"];
$jaar=$row["jaar"];

$headlines.="<b>$onderwerp</b>(<i>$dagnaam $dag/$maand/$jaar</i>)<br>";
/*dit wordt weer elke keer toegevoegt (zie de .=) aan de variabele headlines*/
}
echo $headlines;
//en laat alles zien in flash
// eind nieuws.php ?>


Sla dit op als nieuws.php

Zo! dat was dan onze user interface! Dat was toch niet zo moeilijk? Nu gaan we over op de admin, het flash gedeelte is wat uitgebreider, maar het php gedeelte is erg simpel!

Zo komt de admin eruit te zien:


Maak een nieuw bestand met weer dezelfde afmetingen. Het makkelijkst is nu alles te kopiëren uit het andere bestand, want de layers en de layout zijn vrijwel hetzelfde. Alleen het headlines gedeelte gaan we veranderen. Verwijder het tekstveld headlines en maak de achtergrond ervan wat langer. In dit stuk zullen nu 6 input velden komen. In het stuk waar eerst het nieuws kwam, laten we nu weer het nieuws zien, zodat je meteen kunt zien wat je hebt toegevoegd na het toevoegen van nieuws.

Het linkse stuk laten we dus hetzelfde. We beginnen met het maken van de tekstvelden voor de datum. Dat had ook in één tekstveld, of zelfs alleen maar in php gekund, maar ik heb gekozen voor deze methode, is het makkelijkst volgens mij...

Maak 4 inputvelden naast elkaar waarvan de meeste linkse het grootst is, omdat daar de dag naam in komt (vb. woensdag). De 2 ernaast kunnen klein blijven, want daar hoeven maar 2 cijfers in, en die daar naast wordt weer iets groter, want daarin komt het jaartal en dat zijn 4 cijfers.
Nu gaan we de properties van die tekstvelden wijzigen. We beginnen met het veld voor dagnaam. Geef hem de variabele naam (let weer op! niet instance name, maar het veld waar var bij staat) dagnaam. Kies dan voor het kleine tekstveldje rechtsonderin waar bij staat 'maximum characters'en typ 10, omdat we in de database ook maar een plekje voor maximaal 10 karakters hebben gereserveerd.

Dan nu het veld ernaast, noem dat dag (variabele naam) en typ bij maximum characters 2.
Het veld daar weer naast noem je maand en geef je ook 2 characters. Dan het laatste veld voor de datum, noem je jaar en geef je een maximum van 4 karakters.
Dan gaan we nu naar het tekstveld onderwerp. Die kun je zo groot maken als je wilt, zolang het maar 1 regel blijft. Geef deze de variabele naam 'onderwerp' en verder laat je lekker de standaard instellingen staan.

Bij het laatste veld tenslotte, daar moet wat meer worden veranderd. Noem hem bericht en zet in het menuutje waar normaal staat 'single line' de instelling op 'multiline'.


Dan hebben we nu alle tekstvelden gehad en moeten we nog 2 buttons maken, eentje voor het leegmaken van alle velden en een voor het versturen. Dit gaat als volgt:

- maak 2 buttons, voor verstuur en voor maak leeg
- zet er de volgende acties op

Op de button voor verstuur komt dit:
on(release){
loadVariables("admin.php", this, "POST");
//laadt het php bestand in
play();
//speel de flash movie
//naar de 'verstuur animatie'
//bekijk de flash movie van de admin maar eens
//druk op verstuur en zie wat er gebeurd
}

En op de button voor maak leeg komt het volgende:

on(release){
dagnaam = "";
dag = "";
maand = "";
jaar = "";
onderwerp = "";
bericht = "";
//maak alle velden leeg
}

Dan krijgen we nu de acties voor het eerste keyframe, namelijk:

nieuws = "loading data...";
//zeg dat de nieuwsartikelen worden geladen
loadVariables("nieuws.php?"+Math.random()*600000, this);
//laadt telkens een ander nieuws.php bestand in
//zodat hij niet gecached zou worden (opgeslagen in het geheugen)
stop();
//stop, zodat hij niet speelt
//(en de verstuur animatie gaat spelen voor je iets kunt typen;)


Dan maak je nu nog een animatie achter deze keyframes (vanaf frame 2 dus), zodat het nieuws.php bestand opnieuw geladen wordt en je een bevestiging ziet dat het bericht is verstuurd. Als hij vanaf keyframe 2 begint te spelen, kun je deze code daar op zetten, die de de tekstvelden onderwerp en bericht leeg maakt, zodat de datum er nog wel staat en je die niet opnieuw hoeft te typen.

bericht = "" ;
onderwerp = "";


Nou...dat was de admin wat flash betreft! Nu nog eventjes het php bestand maken en dan zijn we klaar...

<?
//nieuws lezen
//connecten
$dbname = "*****";
$dbuser = "*****";
$dbpw = "*****";
$dbhost = "*****";

$open = mysql_connect($dbhost, $dbuser, $dbpw) or die(mysql_error());
mysql_select_db($dbname) or die(mysql_error());

//in database zetten
$sql = mysql_query("INSERT INTO nieuws (dagnaam, dag, maand, jaar, onderwerp, bericht) VALUES ('$dagnaam','$dag','$maand','$jaar','$onderwerp','$bericht')") or die (mysql_error());

?>


Sla het bestand op als admin.php en c'est tout! je hebt nu een volledig werkend nieuwssysteem!

Geef hier je waardering: Matig 1 2 3 4 5 Geweldig!
  Waardering:
lol waar frans jmoeder (13 May 2007, 19:57)

waar kun je het downloaden :S als je iets hier op zet zet dan download link er bij klootzak

 


Nieuwe versie Ara tramba (12 March 2005, 12:39)
een nieuwe versie van deze tutorial is te vinden op http://home.aim.hsbrabant.nl/s135574/tutorial/ :)
top Erik Boon (20 January 2005, 17:42)

toppie tut!! hij werkt zonder problemen!!
maar wat ik graag zou willen zien is het zelfde als wat je op je site hebt, met klikbare headlines..

kun je daarvan niet een *.zip van online zetten, net zoals je met deze tut gedaan hebt?

Gr Erik!


vraagje Eric Tonnaer (10 February 2005, 22:18)

Dit is een geweldige tutorial:D:D:D alleen als ik in het admin gedeelte iets wil toevoegen dat komt er bij het nieuws alleen dit te staan:

0/0/0

terwijl ik alles heb ingevuld :S kan iemand helpe of heb je dit zelf ook ??

bedankt alvast

Groetjes NEon


RE: vraagje bas hoog (27 February 2008, 16:29)
Hallo, ik heb hetzelfde probleem alleen maar 0/0/0 De link die als hulp gegeven wordt doet het na al die jaren niet meer.. kan iemand mij helpen?
1-5 | 6-10 | 11-15 | 16-20 | 21-25 | 26-30 | 31-35 | 36-40 | 41-45 | 46-50 | 51-55 | 56-60 | 61-65 | 66-70 | 71-73