Classe 3E e 3I SIA: Il carrello in Javascript senza Php (funzionante) della spesa (e-commerce) senza pagine dinamiche



Carrello della spesa Ver. 1.18 By Paolo Latella  E-mail: paolo.latella@alice.it
(applicazione nativa trovata su Internet nel 2002)
TUTTI  I  FILES  QUI  CONTENUTI  SONO LIBERAMENTE DISTRIBUIBILI, MODIFICABILI ED UTILIZZABILI IN TUTTO  E PER QUALSIASI MOTIVO SENZA CHE ALCUNA SEGNALAZIONE O COMPENSO MI SIA DOVUTO.  

VISUALIZZATE LE PAGINE CON IL BROWSER MOZILLA 

L'obiettivo  di questa esercitazione didattica  quello di dimostrare come sia possibile realizzare un sistema per la presentazione di un negozio in  Internet  dotato  delle  caratteristiche minime indispensabili affinché'  sia  utilizzabile  da  un  ipotetico  cliente  per fare acquisti.   La  tecnologia  impiegata  per  la  realizzazione  del carrello  usa  i  linguaggi di scripting ed ipertestuali integrati nei  piu' comuni  browser; con tutti i limiti di questa soluzione rispetto  a  piu'  avanzate  tecnologie  client-server (tipo Php, Aspx, Java) a pagamento....  Ma con il vantaggio di essere economica, adatta a piccoli negozi; e nel caso qualcuno voglia  servirsi  di questa esercitazione  anche  del  tutto gratuita.  Per  la  personalizzazione  del  carrello  non  servono particolari conoscenze informatiche, basta la lettura delle istruzioni qui riportate e parte di  quelle che  si trovano  all'inizio del file  dati.js  contenuto  nell' archivio.

 All'interno di carrello.zip ci sono i files:

 index.html
 dati.js
 car.js
 stile.css
 QJOpti.html
 leggimi.txt  (il file che state leggendo)

  I  primi quattro sono parte integrante del carrello; pertanto se avete  intenzione  di  usarlo  dovete copiarli tutti insieme nella stessa directory di destinazione.
  QJOpti.html e' una utility che serve a ridurre la dimensione dei files .js togliendone i commenti, gli spazi  e  gli avanzamenti di riga inopportuni nel caso in cui  vogliate  utilizzare i files .js in rete. Il  vantaggio del codice  cosi' "ottimizzato"  sta  nella maggiore velocita' di caricamento  ottenuta grazie  alla riduzione della dimensione e nella maggiore (di poco) velocita' di esecuzione nel browser.
  Questa  versione  (1.18) del  carrello  e' stata  provata essere funzionale  allo  scopo  detto  nell'introduzione  con  i seguenti browsers e relative versioni tutte per sistema operativo Microsoft Windows:
11NET
Amaya
Arachne
Arora
Avant Browser
Bird
Camino
Chromium
Cyberdog
Dillo
Dooble
Enigma Browser
Epiphany
ELinks
Epic
Flock
Galeon
Gnu IceCat
Google Chrome
GreenBrowser
IceWeasel
Internet Explorer
K-Meleon
Kazehakase
Kirix Strata
Konqueror
Kiwe (per bambini[27])
Links (testuale)
Lunascape
Lynx (testuale)
Maxthon (prima noto come Myie2)
Midori
Minimo
Mosaic
Mozilla
Mozilla Firefox
Netscape
Netsurf
Omniweb
Pale Moon
Opera
RealPlayer
RocketMelt[28]
Safari
SeaMonkey
Sleipnir
Slim Browser[29]
SRWare Iron
w3m (testuale

Sul MAC  in  ogni caso la  visualizzazione del carrello e' leggermente diversa rispetto a Windows.
   Non  chiedetemi di personalizzare il carrello per adattarlo alle vostre  esigenze  nemmeno dietro compenso. Sono disponibile solo a correggere eventuali malfunzionamenti che avete riscontrato essere imputabili  al  codice  da  me  scritto e vi ringrazio in anticipo della vostra eventuale segnalazione.


  Paolo Latella   E-mail: paolo.latella@alice.it         14-settembre-2003

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

//       ISTRUZIONI PER LA PERSONALIZZAZIONE DEL CARRELLO
 L'utilizzatore puo' modificare il programma carrello della spesa, piu'  avanti detto semplicemente "carrello", per adattarlo ai suoi specifici  prodotti  senza  conoscere  una sola riga del codice di programmazione  usato per sua costruzione. Daro' qui le istruzioni indispensabili   per  la  sua  personalizzazione, che  in  questa
versione  si  limita  agli  articoli del proprio negozio e a pochi altri aspetti indispensabili al suo corretto funzionamento.

 Non sono per ora possibili modifiche al layout ed ai colori delle scritte  interne  nelle  varie porzioni in cui e' suddivisa l'area della finestra del browser.
  In  testa  al file dati.js sotto una riga che ripete la dicitura INIZIO  PARTE  MODIFICABILE  indica il punto in cui l'utilizzatore non esperto del codice di programmazione puo' (e deve) intervenire per adattare il carrello alle proprie esigenze. Al temine una riga
che  riporta: FINE PARTE MODIFICABILE delimita la fine della parte suscettibile di modifiche.

 Per inserire i vostri prodotti nel carrello dovete prima di tutto decidere il numero di reparti in cui suddividere il vostro negozio (massimo  25),  poi  assegnare  ad ogni prodotto un proprio codice identificativo    univoco    per    distinguerlo    dagli    altri prodotti (massimo  999  prodotti);  in  modo che  quando  ricevete l'ordine potrete associare il codice al prodotto vero e proprio.
  Per  popolare  il  carrello  con  i  vostri  reparti  e articoli osservate  lo schema di esempio usato nella parte modificabile. Ci sono  sette  colonne,  e  solo  le prime quattro  di esse  possono essere modificate per la personalizzazione  del carrello:  Codice, Modello, Prezzo e Link; le rimanenti tre sono riservate  per l'uso interno.
  La  colonna  del  codice  deve  contenere  il  codice del vostro prodotto. Utilizzate un codice unico per ogni articolo, se vi sono codici  articolo  duplicati  verrete  avvisati  da un messaggio di avvertimento  quando proverete il carrello. Per il codice articolo usate  solo caratteri alfanumerici o "-" o "_"; sono vietati segni di  interpunzione  e  spazi  vuoti.  Queste  norme  apparentemente restrittive  sono  del tutto normali quando si tratta di associare un  codice  ad  un  articolo  perche'  la loro osservanza facilita l'elaborazione  automatica dei dati da parte dei programmi. Non e' necessario che i codici articolo siano di lunghezza fissa e non ci
sono  eccessivi  limiti  alla  loro  lunghezza, anche se un codice articolo da 100 caratteri e' decisamente sconsigliato.

  I campi della  colonna Link possono essere riempiti con  un link esterno  ad  una  pagina  descrittiva  dell'articolo.     Nel  mio esempio  solo  alcuni  articoli del reparto ABBIGLIAMENTO hanno un link  a  puro  scopo  dimostrativo.  Se  non  avete  intenzione di associare  una descrizione al vostro articolo impostate a 0 il valore in tale colonna.
 Per creare rapidamente un vostro reparto fate un copia-incolla di uno  quasiasi  dei  reparti  di  esempio  qui  proposti.  Come  si distingue un reparto ? La riga di inzio e':
 articoli[v++] = new Array( Che voi dovrete riprodurre fedelmente all'inizio di ogni reparto.
 La riga conclusiva e':  "REPARTO NOME_DEL_VOSTRO_REPARTO"                              );

  Badate  a  mantenere  i  doppi  apici  che delimitano la stringa "REPARTO  NOME_DEL.."  e  la ); finali. Per dare il nome al vostro reparto  conservate  inalterata  la  parola  di  inizio  REPARTO e sostituite NOME_DEL_VOSTRO_REPARTO.
  Le righe comprese tra queste due possono essere tolte o aggiunte ed  ognuna di essere rappresenta un singolo articolo del reparto.
 Il numero di queste righe indica il numero di articoli immessi in ogni  reparto.  I  reparti di esempio da me inseriti devono essere cancellati  interamente  nel  caso  in cui vogliate servirvi della vostra personalizzazione.

  Come  riceverete l'ordine ? In questo carrello e' stato definito il  seguente metodo: quando l'utente premera' il tasto di conferma si avviera' nel suo computer il programma di posta elettronica che inviera'  al vostro indirizzo email i dati con le scelte fatte dal cliente ed i dati personali disposti come nel seguente esempio:
user_name=Paolo
user_cognome=Latella
user_fiscale=NONE
user_indirizzo=http://paololatella.blogspot.com/
user_cap=26900
user_citta=LODI
user_prov=LO
user_stato=Italia

user_email =paolo.latella@alice.it
user_telefono=666
XM-J01=1
XM-J02=1
DA-A04=1
DA-A05=5
DB-B07=1
DB-B08=3
ED-B13=1
COD_434_626=Sun%2C_4_Mar_2001_14%3A24%3A10_UTC

  L'ultima  riga contiene un codice associato all'ordine e dopo il segno di = la data in un formato trasmissibile con i protocolli di Internet. Provate voi stessi ad inviarvi un ordine dopo aver fatto alcuni  acquisti  con  il  carrello  per  sincerarvi  del suo corretto funzionamento.
  Pur  essendo  semplice  da applicare l'invio dell'ordine tramite email  e'  un  sistema  sconsigliato;  qui  forzatamente  adottato perche'   l'unico  applicabile  sul  client  senza  bisogno  della collaborazione di programmi residenti sul server. Ma sarebbe più utile avere un cgi salvato su un server esterno; l'utilizzo di questo procedimento insieme al carrello e'  possibile, semplice,  piu'  sicuro, e  spesso  completamente gratuito perche' compreso nel servizio.
 // CONTINUA IN TESTA AL FILE dati.js

Scarica l'intera applicazione a questo indirizzo: 

Commenti

Post popolari in questo blog

Simulazioni di reti (con Cisco Packet Tracer)

Esercizi sulla rappresentazione della virgola mobile IEEE 754 (Floating Point)