MixPod Patch 2.0

Ho aggiornato la versione del lettore mp3 mixpod.com con nuove interessanti novità senza contare dei controlli aggiuntivi che lo rendono molto più pratico all’uso per gli utenti meno esperti.
Le aggiunte che sono state fatte sono le seguenti:

1. Javascript per l’aggiunta di una palette di selezione colori con anteprima
2. Javascript per il controllo dei campi dati inseriti.

Questa è un anteprima della palette per l’inserimento dei colori:

Ed invece qui un anteprima del form di inserimento dei dati per il lettore:

Cosa fa?

Il plug-in permette di inserire all’interno del proprio sito un pratico form da compilare con anteprima dei colori e selezione della skin che permetterà di utilizzare il proprio account di mixpod.com senza bisogno di conoscere nulla di HTML e senza dover inserire alcun codice.
Grazie alla palette, sarà facoltativo anche ricavare i colori della propria playlist, infatti, potranno praticamente essere scelti ed inseriti automaticamente, proprio come la skin.

Come si installa?

All’interno del pacchetto troverete i seguenti file:

scheda.php
scheda3.php
mixpod.js
301a.js
musica.sql
README.txt

Javascript

Il primo passo è semplicemente quello di mettere nella cartella principale del sito, o dove meglio preferite l’importante che poi ricordiate di modificare il path nel richiamare lo script, i due file.js che serviranno per il corretto funzionamento del plug-in.
E’ bene spendere nello specifico alcune parole per i due script.

301a.js

Al suo interno troverete tutte le indicazioni sotto forma di commenti, ricordo che è stato realizzato da http://www.free-color-picker.com al suo interno troverete anche le avvertenze d’uso ossia, non modificare in alcun modo lo script per garantirne il corretto funzionamento.

Mixpod.js

questo è stato realizzato da me e semplicemente fa il controllo sui dati inseriti ossia, i tre colori e l’id.

function checkMixPod(){
	var test = true;
	var id = document.dati.myid.value;
	var color1 = document.dati.color1.value;
	var color2 = document.dati.color2.value;
	var color3 = document.dati.color3.value;
	var espressione = /^#+[A-Fa-f0-9]{6}/;

	if ((isNaN(id))||(parseInt(id)!=id)){
		alert("Hai inserito un numero ID non valido, ricontrollalo!");
		document.dati.myid.focus();
		test = false;
	}
	if ((color1 == "")||(color1.length !=7)||(!(espressione.test(color1)))){
		alert("Codice colore 1 non valido, inserire un valore esadecimale a 6 cifre preceduto da #");
		document.dati.color1.focus();
		test = false;
	}
	if ((color2 == "")||(color2.length != 7)||(!(espressione.test(color2)))){
		alert("Codice colore 2 non valido, inserire un valore esadecimale a 6 cifre preceduto da #");
		document.dati.color2.focus();
		test = false;
	}
	if ((color3 == "")||(color3.length != 7)||(!(espressione.test(color3)))){
		alert("Codice colore 3 non valido, inserire un valore esadecimale a 6 cifre preceduto da #");
		document.dati.color3.focus();
		test = false;
	}
	return test;
}

Lo script si assicura che l’invio dei dati venga bloccato nel caso in cui:

1. L’ID non è un intero
2. Il colore non è in una forma valida

Per il colore vale spendere due parole, esso controlla fondamentalmente che la stringa non sia vuota, che sia lunga 7 caratteri (6 del codice colore e uno per il cancelletto) e con un espressione regolare controlla che le stringhe inizino sempre con # ed abbiano i caratteri compresi tra AF af e 09.

Se questo non dovesse essere vero, allora restituirà un alert comunicando il messaggio d’errore e dove si è verificato bloccando l’invio per consentire all’utente di inserire i dati corretti.

SQL

Fatto questo, si passerà alla modifica del database, vi basterà semplicemente importare in esso il file musica.sql che apporterà le modifiche necessarie alla tabella Personaggio.

ALTER TABLE Personaggio ADD MyID integer(11) default '0';
ALTER TABLE Personaggio ADD Skin varchar(30) default 'myflashfetish-mp3-player.swf';
ALTER TABLE Personaggio ADD Color1 varchar(6) default '000000';
ALTER TABLE Personaggio ADD Color2 varchar(6) default '000000';
ALTER TABLE Personaggio ADD Color3 varchar(6) default '000000';

Scheda.php

Le modifiche da apportare qui non sono molto differenti da quelle fatte nella versione 1.0 se non per ulteriori semplici controlli.
Comunque nel codice base, sono presenti dei commenti molto semplici che vi permetteranno di capire da dove iniziano e dove finiscono le modifiche.
Le troverete alle seguenti posizioni del file che scaricherete dal sito:
Riga 24-30

 $myid = ereg_replace("[^0-9 ]", "0", $_POST['myid']);
 $skin = ereg_replace("[^A-Za-z0-9.-]", "0", $_POST['skin']);
 $color1 =ereg_replace("[^A-Fa-f0-9 ]", "0", substr($_POST['color1'], -6));
 $color2 =ereg_replace("[^A-Fa-f0-9 ]", "0", substr($_POST['color2'],-6));
 $color3 =ereg_replace("[^A-Fa-f0-9 ]", "0", substr($_POST['color3'],-6));

Queste modifiche servono semplicemente a togliere il # dal codice esadecimale che viene passato come parametro (substr) ed aggiungere un controllo con un espressione regolare che ci assicura ulteriormente che, i valori ricevuti siano effettivamente compresi tra AF, af, 09 per i codici esadecimali e controlla che l’ID sia un valore compreso tra 0 e 9 ossia un intero.

Le altre modifiche le troverete dalla riga 179 alla 185:

$myid =trim($myid);
$skin =trim($skin);
$color1 =trim($color1);
$color2 =trim($color2);
$color3 =trim($color3);

Poi per l’inserimento si andrà a modificare la query alla riga 238-244

$MySql .= " MyID = '".$myid."',";
$MySql .= " Skin = '".$skin."',";
$MySql .= " Color1 = '".$color1."',";
$MySql .= " Color2 = '".$color2."',";
$MySql .= " Color3 = '".$color3."'";

Finita la parte di modifica per il salvataggio dei dati, andremo a modificare la visualizzazione della scheda per mostrare il nostro lettore MP3. Come sempre questa parte trova ampia personalizzazione dato che, non c’è un vero e proprio posto dove per esempio potevo collocarlo, ma starà al webmaster decidere dove e come posizionarlo nel modo più idoneo alla sua community.
Le modifiche iniziano dalla riga 464 – 571.

<?
if(($rs['MyID'] != 0)){
	$height = 0;
	$width = 0;
.....
.....
<tr><td colspan=2 align=center>
<?
echo "<center><p style='visibility:visible;'><embed src='http://assets.myflashfetish.com/swf/mp3/".$rs['Skin']."?myid=".$rs['MyID']."&path=2009/09/27' quality='high' wmode='transparent' flashvars='mycolor=".$rs['Color1']."&mycolor2=".$rs['Color2']."&mycolor3=".$rs['Color3']."&autoplay=true&rand=0&f=4&vol=100&pat=0&grad=false' width='".$width."' height='".$height."' name='myflashfetish' salign='TL' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' border='0' style='visibility:visible;width:".$width."px;height:".$height."px;' /></p></center>";
?>
</td></tr>
<? }; ?>

E con queste sono finite le modifiche da fare al file, passiamo all’ultimo:

scheda3.php

Come prima cosa dobbiamo richiamare qui i due script che abbiamo caricato sul nostro server, questi dovranno essere collocati nell’head. Troverete le modifiche dalla linea 81-84

<script src="mixpod.js" type="text/javascript" language="javascript"></script>
<script src="301a.js" type="text/javascript"></script>

Fatto questo passiamo al form di inserimento, modifichiamo i suoi parametri come mostrato nella riga 112

<form action="scheda.php?pg=<?= urlencode($pg) ?>" method="POST" name="dati" onSubmit="return checkMixPod()">

Ed infine dalla riga 166 fino alla 216 di cui ometterò il codice della selezione del lettore vista la sua semplicità per spendere qualche parola su quello per l’uso dello javascript.

	<tr>
    	<td align=center colspan=3>MyId <br/>
	    <input type="text" name="myid" maxlength="8" size="8"  value="<?=htmlspecialchars($rs["MyID"])?>"/></td>
    </tr>
......
......
	<tr>
    	<td align=center colspan=3>Colore 1<br/>
        <div id="colorpicker301" class="colorpicker301"></div>
		<input type="button" onClick="showColorGrid3('color1','color11_sample');" value="...">&nbsp;<input type="text" ID="color1" name="color1" maxlength="7" size="7" value="#<?=htmlspecialchars($rs["Color1"])?>">&nbsp;<input type="text" ID="color11_sample" size="1" value="" style="background-color:#<?=htmlspecialchars($rs["Color1"])?>"></td>
    </tr>
	<tr>
    	<td align=center colspan=3>Colore 2<br/>
        <div id="colorpicker301" class="colorpicker301"></div>
		<input type="button" onClick="showColorGrid3('color2','color12_sample');" value="...">&nbsp;<input type="text" ID="color2" name="color2" maxlength="7" size="7" value="#<?=htmlspecialchars($rs["Color2"])?>">&nbsp;<input type="text" ID="color12_sample" size="1" value="" style="background-color:#<?=htmlspecialchars($rs["Color2"])?>"></td>
    </tr>
	<tr>
    	<td align=center colspan=3>Colore 3<br/>
        <div id="colorpicker301" class="colorpicker301"></div>
		<input type="button" onClick="showColorGrid3('color3','color13_sample');" value="...">&nbsp;<input type="text" ID="color3" maxlength="7" name="color3" size="7" value="#<?=htmlspecialchars($rs["Color3"])?>">&nbsp;<input type="text" ID="color13_sample" size="1" value="" style="background-color:#<?=htmlspecialchars($rs["Color3"])?>"></td>
    </tr>

Semplicemente il javascript prevede l’aggiunta di una casella di testo come anteprima che io ho pensato bene di rendere disponibile anche nel momento in cui la scheda venga aperta e non solamente quando si seleziona un colore dalla palette.
Ovviamente si da spazio alla libera modifica.

Tutto qui, buon divertimento con il vostro plug-in!

  MixPod Patch 2.0 (14.0 KiB, 86 hits)