Parte finalmente un progetto che avevo in mente da tanto tempo. Un percorso completo di costruzione di un backend in flash, partendo da zero, avendo a disposizione flash cs3, un editor di testo e un database. Lo scopo del progetto è quello di costruire un sistema completo, che scriva e legga dati, che interfacci informazioni da flash a mySql con php e viceversa. Il progetto è già completamente sviluppato, io non farò altro che aggiungere un capitolo di settimana in settimana, per parlarne insieme, confrontarsi e migliorarlo ancora. Ecco gli argomenti che saranno trattati nel tempo:
- login con controlli di sicurezza e connessioni
- reperire e catalogare i dati dal database a flash
- modificare record
- aggiungere nuovi records
- upload e gestione di files
- uso dei dati salvati nel sito internet
Il progetto è sviluppato in AS2, PHP 5.2.6 e mysql 5.0.41. Per comodità mi trovo meglio a programmare ancora in actionscript due, ma sto lavorando ad una migrazione su AS3 con amfphp e flash.net. In effetti il risultato finale è praticamente uguale, as3 è però molto più veloce e snello, per cui se tra cinque-sei anni avrò finito ne ri-parleremo.
Cominciamo
Cosa serve: se lavorate in locale un sistema integrato che comprenda mySql 5.x, Apache 2.x e Php 5.x. Se lavorate in remoto un host linux, un database mySql 5.x, e ovviamente php 5x.
Per deformazione professionale ho dato una certa struttura alle cartelle, ma potete benissimo modificare tutto.
Cominciamo dalle funzionalità. Questo modulo deve avere alcune caratteristiche:
- lettura e scrittura di un cookie di accesso
- controllo sull’esistenza dell’utente nel database
- generazione dei messaggi di errore/accesso
- un’interfaccia modulare espandibile
- cifratura della password
- richiesta/lettura/codifica dei dati mySql via php
Il codice
Ho deciso di utilizzare una struttura modulare, ovvero carico di volta in volta sullo stage solo i moduli di cui ho bisogno, è più comodo e gestibile, per aggiungere o modificare gli elementi.
- #AS — primo fotogramma
- #AS — al primo fotogramma del modulo login
- $PHP — connessione al database (connectdb.php)
- $PHP — funzioni php di dialogo col database e actionscript
- $MYSQL — la query mySql
- DEMO/SOURCE — la demo, il sorgente e i file del tutorial
Prendete il codice e fate semplicemente copia e incolla. I commentati vi aiuteranno a capire meglio le varie funzioni. Cliccate sulle voci dei menu per skippare ai vari blocchi.
LEXSKYWALKER • XIII — flash garden 2008
Costruire un backend.
http://www.lexskywalker.it/2008
http://www.lexskywalker.it/blog
http://www.lexskywalker.it/forum
Way to Valinor Project — sounds of beauty
*******************************************************/
stop ();
//importo la classe TwLite per i movimenti e transizioni
import gs.TweenLite;
import gs.easing.*;
//dichiaro la variabile globale di identificazione della cartella files php
_global.filepath = “http://www.lexskywalker.it/labs/tutorial/01/ENGINE/”;
//setto la codifica dei caratteri di sistema (utf-8)
System.useCodepage = true;
Stage.scaleMode = “noScale”;
Stage.showMenu = false;
//alcune stringhe utili da usare
_root.string1 = “Benvenuto. Prima di entrare ti devi loggare. L’elaborazione dei dati avviene tramite php su mySql. Puoi monitorare le attività attraverso i messaggi di sistema visualizzati sotto questo testo.”;
_root.string2 = “+ Completa tutti i campi per favore..”;
_root.string3 = “+ ERRORE! Controlla che la path sia corretta..”;
//importo la classe per settare il foglio di stile delle componets
import mx.styles.CSSStyleDeclaration;
_global.style.setStyle (”themeColor”,”0×009FDA”);
_global.style.setStyle (”disabledColor”,”0×666666″);
_global.style.setStyle (”textRollOverColor”,”0xFFFFFF”);
_global.style.setStyle (”color”,”0×303634″);
_global.style.setStyle (”textSelectedColor”,”0×0099FDA”);
_global.style.setStyle (”fontFamily”,”Myriad”);
_global.style.setStyle (”embedFonts”,true);
_global.style.setStyle (”fontSize”,”14″);
_global.style.setStyle (”fontStyle”,”normal”);
_global.style.setStyle (”fontWeight”,”normal”);
_global.style.setStyle (”textAlign”,”left”);
_global.style.setStyle (”textDecoration”,”none”);
//la funzione generale per i movimenti e transizioni
function sprite (a, b, c, d, e) {
TweenLite.to (a,b,{_x:c, _y:d, _alpha:e, ease:Back.easeOut});
}
//inizializzo il backend, attacco alla _root il filmato di login
_root.attachMovie (”mod_login”,”mod_login”,_root.getNextHighestDepth ());
mod_login._x = 275 — (mod_login._width / 2);
mod_login._y = 200 — (mod_login._height / 2) — 20;
mod_login._alpha = 0;
sprite (mod_login,1,mod_login._x,mod_login._y + 20,100);
//importo la classe di controllo user interface.
import mx.controls.*;//restringo l’immissione dei caratteri nei campi form
user.restrict = “a-zA-Z0-9″;
pass.restrict = “a-zA-Z0-9″;
//setto la sequenza di campi quando viene premuto TAB
user.tabIndex = 1;
pass.tabIndex = 2;
loginBt.tabIndex = 3;
entraBt.tabIndex = 4;
//disabilito le componenti
user.enabled = false;
pass.enabled = false;
loginBt.enabled = false;
entraBt.enabled = false;
//dichiaro la mia variabile sendAndLoad
var callLogin:LoadVars = new LoadVars ();
//dichiaro la funzione di risposta ai dati inviati da php
callLogin.onLoad = function (success:Boolean) {
if (success) {
//se non esiste un cookie
if (this.checklog == 0) {
user.enabled = true;
pass.enabled = true;
loginBt.enabled = true;
entraBt.enabled = false;
Selection.setFocus (user);
_root.sprite (_root.mod_login,0.5,_root.mod_login._x,_root.mod_login._y,90);
_root.sprite (_root.loaderGif,0.5,_root.loaderGif._x,_root.loaderGif._y,0);
//setto la stringa dello status montinor
stato.text = _root.string1 + newline + newline + “+ ” + this.mss;
}
if (this.checklog == 1) {
//se l’immissione dei dati è corretta
_root.sprite (_root.mod_login,0.5,_root.mod_login._x,_root.mod_login._y,90);
_root.sprite (_root.loaderGif,0.5,_root.loaderGif._x,_root.loaderGif._y,0);
user.enabled = false;
pass.enabled = false;
loginBt.enabled = false;
entraBt.enabled = true;
stato.text = _root.string1 + newline + newline + “+ ” + this.mss;
}
if (this.checklog == 2) {
//se l’utente non esiste su databse
_root.sprite (_root.mod_login,0.5,_root.mod_login._x,_root.mod_login._y,90);
_root.sprite (_root.loaderGif,0.5,_root.loaderGif._x,_root.loaderGif._y,0);
user.enabled = true;
pass.enabled = true;
loginBt.enabled = true;
entraBt.enabled = false;
stato.text = _root.string1 + newline + newline + “+ ” + this.mss;
}
if (this.checklog == 3) {
//se esiste un cookie
_root.sprite (_root.mod_login,0.5,_root.mod_login._x,_root.mod_login._y,90);
_root.sprite (_root.loaderGif,0.5,_root.loaderGif._x,_root.loaderGif._y,0);
user.enabled = false;
pass.enabled = false;
loginBt.enabled = false;
entraBt.enabled = true;
stato.text = _root.string1 + newline + newline + “+ ” + this.mss + ” ” + this.user + “!”;
}
} else {
stato.text = _root.string1 + newline + newline + _root.string3;
}
};
_root.loaderGif._alpha = 100;
_root.mod_login._alpha = 50;
//la funzione collegata al pulsante di login
loginBt.onRelease = function () {
if (user.text != “” && pass.text != “”) {
this.enabled = false;
user.enabled = false;
pass.enabled = false;
_root.attachMovie (”loaderGif”,”loaderGif”,10,{_x:80, _y:40});
_root.loaderGif._alpha = 0;
_root.loaderGif._alpha = 100;
_root.mod_login._alpha = 50;
callLogin.pass = pass.text;
callLogin.user = user.text;
callLogin.azione = “login”;
callLogin.sendAndLoad (_global.filepath + “getLogon.php”,callLogin,”GET”);
} else {
stato.text = _root.string1 + newline + newline + _root.string2;
}
};// fine login
//setto la funzione legata al tasto , identica a quella del login
var keyListener:Object = new Object ();
keyListener.onKeyDown = function () {
switch (Key.getCode ()) {
case Key.ENTER :
if (user.text != “” && pass.text != “”) {
this.enabled = false;
user.enabled = false;
pass.enabled = false;
_root.attachMovie (”loaderGif”,”loaderGif”,10,{_x:80, _y:40});
_root.loaderGif._alpha = 0;
_root.loaderGif._alpha = 100;
_root.mod_login._alpha = 50;
callLogin.pass = pass.text;
callLogin.user = user.text;
callLogin.azione = “login”;
callLogin.sendAndLoad (_global.filepath + “getLogon.php”,callLogin,”GET”);
} else {
stato.text = _root.string1 + newline + newline + _root.string2;
}
break;
}
};
//associo un listener alla tastiera
Key.addListener (keyListener);
//richiamo la funzione di controllo per esistenza del cookie
callLogin.azione = “controlla”;
callLogin.sendAndLoad (_global.filepath + “getLogon.php”,callLogin,”GET”);
// dati di connessione al server
$server = “localhost”;
$database = “lswTutorial”;
$username = “root”;
$password = “root”;
//se i dati non sono corretti chiude la connessione con un errore
$connect_db = mysql_pconnect($server, $username, $password) or die(mysql_error());
?>
<?php
//variabili esterne
$azione = $_GET[’azione’];
$user = $_GET[’user’];
$pass = sha1($_GET[’pass’]);
if ($azione == ‘login’){
if (!mysql_connect($server, $username, $password)) {
$r_string = ‘&errorcode=1&’;
} elseif (!mysql_select_db($database)) {
$r_string = ‘&errorcode=2&’;
} else {
//query mySql
$qr = mysql_query(“SELECT * FROM users WHERE uname=’”.$user.“‘ AND upass=’”.$pass.“‘ ”);
$num = mysql_num_rows( $qr );
if ($num == 1){
//se user e password sono corrette genero il cookie e messaggio di sistema
$r_string = ‘mss=User e password corrette! Benvenuto ‘.$user.’!&checklog=1′;
$cookie_string = ‘user=’.$user.’&’.‘pass=’.$pass;
setcookie (“tutorial_lsw”,$cookie_string, time()+10000);
} else {
//se i dati non sono corretti genero messaggio di errore
$r_string= ‘mss=I dati immessi non sono corretti, riprova.&checklog=2′;
}
}
//termino l’operazione
mysql_free_result($qr);
echo $r_string;
}
//funzione di controllo sul cookie, se esiste bypasso il login
if ($azione == ‘controlla’){
if (isset($_COOKIE[“tutorial_lsw”])) {
$r_string= ‘mss=Trovato un cookie! Bentornato&checklog=3&’. $_COOKIE[“tutorial_lsw”];
} else {
$r_string=‘mss=Nessun cookie trovato! Inserisci dati.&checklog=0′;
}
echo $r_string;
}
?>
A questo punto, montato lo stage e il codice sulla timeline, con tutti gli elementi al loro posto, relative cartelle e php pronto, non ci resta che popolare il database. Recatevi nel vostro pannello phpMyAdmin e create (o usate) un database. Poi spedite questa query:
– version 2.11.7.1
– http://www.phpmyadmin.net
–
– Host: localhost
– Generato il: 09 Nov, 2008 at 08:11 PM
– Versione MySQL: 5.0.41
– Versione PHP: 5.2.6
SET SQL_MODE=“NO_AUTO_VALUE_ON_ZERO”;
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;
CREATE TABLE ‘users‘ (
‘id‘ int(4) NOT NULL auto_increment,
‘uname‘ varchar(255) NOT NULL,
‘upass‘ varchar(255) NOT NULL,
PRIMARY KEY (‘id‘)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=2 ;
INSERT INTO ‘admin‘ VALUES(1, ‘admin’, ‘d033e22ae348aeb5660fc2140aec35850c4da997’);
DEMO / flash backend — loginSOURCE / flash backend — login (212kb)
Conclusioni
Fatto! Non è complicato come sembra. Scaricate lo zip e fatemi sapere.
La prossima settimana la seconda puntata: reperire e catalogare i dati dal database a flash.
Per consigli, suggerimenti, domande e qualunque cosa non riuscite a capire: scrivete, ne parliamo insieme.
Categoria: 
Luigi / 
Lascia un commento!