CAP. 6: LA MASCHERA INSERIMENTO DATI
Abbiamo creato il database, messo al suo posto... ora cominciamo a creare la pagina "inserisci.asp" che, come dice anche il nome, ci permetterà di inserire nel database i dati anagrafici dell'appuntaento che abbiamo preso.
COme funziona? Tale pagina, dopo aver preso i dati contenuti nelle varie text area, li passerà a un'altra pagina, contenuta dentro script_teleseller, chiamata "inserisci_appuntamento.asp" la quale si occuperà di fare diversi controlli e inserire i dati alla fin fine nel database.
sul sito di prova webtemplum.somee.com potete già vedere la paginetta costruita (non ho badato tanto alla struttura grafica). Una avvertenza: c'è una checkbox che va spuntata per premere il tasto INVIO: questo per evitare che premendo enter inavvertitamente sulla tastiera l'appuntamento venga salvato così com'è.
Apriamo dreamweawer; creiamo nella pagina 5 tabelle:
1 - Dati anagrafici: 4 colonne x 4 righe
2 - Data e ora appuntamento: 2 x 2
3 - Interesse: 2 x 2
4 - Dati controllo teleseller: 2 x 2
5 - Pulsantiera: 2 colonne x 1 riga.
Dobbiamo ora inserire le textarea che ci permetteranno di scrivere i dati richiesti e per i valori fissi (giorno, mese, anno, etc etc etc) usiamo dei menu a tendina.
A Cosa dobbiamo stare attenti? A questa cosa qui che vi ho evidenziato in rosso:
Praticamente ogni casella di testo, ogni textarea, menu etc etc deve avere un nome UNIVOCO e possibilmente UGUALE ai campi del database che abbiamo costruito. Ho quindi da dreamweawer selezionato con un click il menu a discesa, e con la finestra proprietà che si trova in basso ho modificato il valore evidenziato in rosso. Sarà molto + semplice in seguito andare a recuperare tali campi nell'altra pagina... ma procediamo x gradi, questo diventerà chiaro quando costruiremo la pagina di inserimento dati nel database
Ora andiamo invece ad analizzare e commentare insieme il codice HTML/ASP della pagina "inserisci.asp"....
- Codice: Seleziona tutto
<html>
<head>
<title>Inserimento Appuntamento - Corso ASP</title>
<link href="css/testo.css" rel="stylesheet" type="text/css">
intestazioni classiche di HTML.....
- Codice: Seleziona tutto
<script language="JavaScript" type="text/javascript">
<!--
function abilita(aBool) {
document.getElementById('pulsante').disabled = ! aBool;
} // function abilita(aBool)
//-->
</script>
Con questo script ho praticamente detto che il pulsante "INVIO" deve essere disabilitato finche non viene flaggato, questo per evitare che venga inserito un appuntamento "a metà" premendo enter x sbaglio
- Codice: Seleziona tutto
</head>
<body>
<table width="526" height="99" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="99">
<div align="center"><img src="images/top.png" width="526" height="99"></div></td>
</tr>
</table>
- Codice: Seleziona tutto
<form action="script_teleseller/inserisci_appuntamento.asp" method="post" name="form1" class="testo">
Nella pagina abbiamo creato un FORM, praticamente un contenitore di moduli e bottoni INVIA / RIPRISTINA; tale FORM mediante un metodo POST (quindi trasparente all'utente) invierà alla pagina inserisci_appuntamento.asp tutte le informazioni che si trovano dopo di lui.....
- Codice: Seleziona tutto
<table width="514" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#999999">
<tr>
<td width="514"><div align="center">Anagrafica</div></td>
</tr>
<tr>
<td><table width="514" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td>Nome</td>
<td><div align="right">
<input name="nome" type="text" id="nome">
</div></td>
<td><div align="right">Via</div></td>
<td><div align="right">
<input name="via" type="text" id="via">
</div></td>
</tr>
<tr>
<td>Civico</td>
<td><div align="right">
<input name="civico" type="text" id="civico">
</div></td>
<td><div align="right">CAP</div></td>
<td><div align="right">
<input name="cap" type="text" id="cap">
</div></td>
</tr>
<tr>
<td>Città</td>
<td><div align="right">
<input name="citta" type="text" id="citta">
</div></td>
<td><div align="right">Provincia</div></td>
<td><div align="right">
<input name="provincia" type="text" id="provincia">
</div></td>
</tr>
<tr>
<td>Tel Fisso</td>
<td><div align="right">
<input name="fisso" type="text" id="fisso">
</div></td>
<td><div align="right">Tel Cellulare</div></td>
<td><div align="right">
<input name="cellulare" type="text" id="cellulare">
</div></td>
</tr>
</table></td>
</tr>
</table>
<p> </p>
<table width="514" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#999999">
<tr>
<td width="514"><div align="center">Appuntamento</div></td>
</tr>
<tr>
<td><table width="514" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td width="256"> </td>
<td width="258"> </td>
</tr>
<tr>
<td>Giorno / Mese / Anno</td>
<td><select name="giorno" size="1" id="giorno">
<option selected>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select> <select name="mese" size="1" id="mese">
<option>Gennaio</option>
<option selected>Febbraio</option>
<option>Marzo</option>
<option>Aprile</option>
<option>Maggio</option>
<option>Giugno</option>
<option>Luglio</option>
<option>Agosto</option>
<option>Settembre</option>
<option>Ottobre</option>
<option>Novembre</option>
<option>Dicembre</option>
</select> <select name="anno" id="anno">
<option>2006</option>
<option selected>2007</option>
<option>2008</option>
<option>2009</option>
<option>2010</option>
</select> </td>
</tr>
<tr>
<td>Ora</td>
<td><select name="ora" id="ora">
<option selected>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
</select> <select name="minuti" id="minuti">
<option selected>00</option>
<option>15</option>
<option>30</option>
<option>45</option>
</select></td>
</tr>
</table></td>
</tr>
</table>
</font>
<p> </p>
<table width="514" height="75" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#999999">
<tr>
<td width="514"><div align="center">Interesse</div></td>
</tr>
<tr>
<td height="57">
<table width="514" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td width="308">A cosa è interessato il Cliente?</td>
<td width="206"> <div align="left">
<select name="interesse" size="1" id="interesse">
<option selected>Enciclopedia</option>
<option>Sito internet</option>
<option>DVD</option>
<option>VHS</option>
</select>
</div></td>
</tr>
</table></td>
</tr>
</table>
<p> </p>
<p> </p>
<table width="514" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#999999">
<tr>
<td width="514"><div align="center">Dati di controllo</div></td>
</tr>
<tr>
<td><table width="514" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td width="257"> </td>
<td width="257"> </td>
</tr>
<tr>
<td>Teleseller</td>
<td>
<select name="teleseller" size="1" id="teleseller">
<option selected>Aragorn</option>
<option>nemesys_72</option>
<option>webtemplum</option>
</select>
</td>
</tr>
<tr>
<td>Mese appuntamento preso</td>
<td><select name="mese_preso" size="1" id="mese_preso">
<option>Gennaio</option>
<option selected>Febbraio</option>
<option>Marzo</option>
<option>Aprile</option>
<option>Maggio</option>
<option>Giugno</option>
<option>Luglio</option>
<option>Agosto</option>
<option>Settembre</option>
<option>Ottobre</option>
<option>Novembre</option>
<option>Dicembre</option>
</select> </td>
</tr>
</table></td>
</tr>
</table>
<p> </p>
<table width="514" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#999999">
<tr>
<td width="514"><div align="center"></div></td>
</tr>
<tr>
<td height="24">
<table width="514" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td width="257"><div align="center">
In tutto il pezzo precedente non abbiamo fatto altro che creare e riempire tutte le tabelle, come prima esposto :wink:
- Codice: Seleziona tutto
<input type="checkbox" name="checkbox" value="checkbox" onclick="abilita(true)">
Con questa riga, con "onclick abilita true" diciamo di abilitare il pulsante INVIA se la casella viene flaggata (vedi script iniziale)
- Codice: Seleziona tutto
<input type="submit" id="pulsante" disabled="true" name="Submit" value="Invia">
</div></td>
<td width="257"><div align="center">
<input type="reset" name="Submit2" value="Reimposta">
</div></td>
</tr>
</table></td>
</tr>
</table>
</form>
</body>
</html>
E qua chiudiamo la nostra pagina HTML.
Se volete, potete provarla online, vedrete che comunque vi restituirà errore.... manca la pagina "inserisci_appuntamento.asp" che vedremo la prossima volta.
La prossima volta sarà un po' più impegnativa. Creeremo la vera e propria connessione, e faremo vera e propria programmazione..... FINALMENTE, dirà qualcuno! Vedremo finalmente tutto il nostro lavoro all'opera!!! Nell'apposito topic fatemi sapere a che punto siete, così riprendiamo insieme...... Se avete dubbi, esponeteli tranquillamente!
Buona serata!
Inviato: 05 feb 2007, 21:46
)
