Konstruowanie formularza interakcyjnego

Program PWS daje mo┐liwo£µ uzyskiwania informacji od go£ci odwiedzaj╣cych witrynΩ sieci Web oraz odpowiadania im na podstawie podanych informacji. Procedura ta s│u┐y do u│atwienia dostosowania prostego formularza interakcyjnego do potrzeb gromadzenia odpowiednich informacji. W procedurze przyjΩto za│o┐enie, ┐e u┐ytkownik nie zna jΩzyka HTML, jΩzyka skrypt≤w ani jΩzyka programowania, a celem procedury nie jest nauka tych jΩzyk≤w. Do skonstruowania dzia│aj╣cego formularza, kt≤ry wysy│a dane do przyk│adowej bazy danych do│╣czonej do programu PWS, wystarczy technika "wytnij i wklej" oraz "znajdƒ i zamie±". Poniewa┐ baza danych jest utworzona w programie Microsoft Access, zgromadzone dane mo┐na przegl╣daµ i edytowaµ otwieraj╣c tΩ bazΩ w programie Access albo u┐ywaj╣c innego skryptu, kt≤ry jest zamieszczony w temacie Przegl╣danie bazy danych za pomoc╣ przegl╣darki.

Aby utworzyµ plik
  1. Otw≤rz plik Sampform.asp za pomoc╣ edytora tekstu, takiego jak Notatnik. Plik Sampform.asp jest umieszczony w katalogu WindowsWinnt\Help\Pws\Htm\Core.
  2. Zast╣p tekst umieszczony miΩdzy tagiem otwieraj╣cym i zamykaj╣cym <title></title> oraz tagiem otwieraj╣cym i zamykaj╣cym <h1></h1> z tytu│em i nag│≤wkiem przeznaczonym dla tworzonej strony. Je£li nie mo┐esz odszukaµ tekstu, wyszukaj s│owo Zast╣p.
  3. Obejrzyj plik w przegl╣darce wpisuj╣c £cie┐kΩ i nazwΩ pliku na pasku Adres. Poniewa┐ plik jest przegl╣dany za pomoc╣ polecenia otwierania pliku, a nie w trybie obs│ugi, na pocz╣tku pliku widoczny jest skrypt. Kiedy plik jest prezentowany jako dokument w witrynie sieci Web, skrypt jest niewidoczny.

    4. Wskaz≤wka   Je£li nag│≤wek wydaje siΩ za du┐y do tworzonej strony, mo┐na zmniejszyµ wysoko£µ liter zmieniaj╣c liczbΩ 1 w tagu otwieraj╣cym i zamykaj╣cym <h1></h1> na liczbΩ 2.

  4. Zapisz plik w katalogu macierzystym. (Katalog C:\Inetpub\Wwwroot jest katalogiem macierzystym u┐ywanym przez Instalatora). Zapisz plik tylko w formacie tekstowym pod nazw╣ sampform.asp.

    5. Wskaz≤wka   Aby zapobiec dodaniu przez Notatnik rozszerzenia .txt do nazwy pliku, zaznacz opcjΩ Wszystkie pliki(*.*) w poleceniu Zapisz jako typ.

Dodawanie element≤w

Teraz mo┐esz rozpocz╣µ wklejanie fragment≤w skryptu przeznaczonych do wy£wietlania r≤┐nych p≤l tekstowych, p≤l wyboru i przycisk≤w radiowych. Poszczeg≤lne elementy mo┐na dodawaµ w dowolnej kolejno£ci. Nie ma konieczno£ci zastosowania na stronie wszystkich element≤w, lecz ka┐dy element mo┐e byµ u┐yty tylko raz. Na przyk│ad pierwsze pole tekstowe mo┐e byµ u┐yte tylko raz. Je£li chcesz umie£ciµ nastΩpne pole tekstowe, musisz u┐yµ drugiego pola tekstowego lub jednego z p≤l memo. Poni┐ej przedstawiono listΩ dostΩpnych element≤w formularza:

Nazwa elementu Element Opis
Pierwsze pole tekstowe Etykieta:
 Te cztery pola tekstowe mog╣ byµ u┐ywane do wprowadzania danych, kt≤re nie mog╣ przekraczaµ 255 znak≤w. Nale┐y je stosowaµ do takich informacji, jak nazwiska i adresy e-mail.
Drugie pole tekstowe
Trzecie pole tekstowe
Czwarte pole tekstowe
Pierwsze pole memo Etykieta:
 Te dwa pola maj╣ nieograniczon╣ d│ugo£µ i mog╣ byµ u┐ywane do w przypadkach, kiedy spodziewana zawartosµ mo┐e byµ obszerna. Pola te nale┐y stosowaµ w miejscach, gdzie prosi siΩ go£ci o pozostawianie komentarzy.
Drugie pole memo
Pierwsze pole wyboru Etykieta Te pola zwracaj╣ warto£µ logiczn╣ Prawda, je£li element jest zaznaczony, a warto£µ Fa│sz, je£li element nie jest zaznaczony. Zaznaczenie jednego z tych p≤l nie ma wp│ywu na drugie pole.
Drugie pole wyboru
Przyciski radiowe Etykieta:
Etykieta:
Etykieta: 		Ten element pozwala u┐ytkownikom dokonywaµ wyboru jednej z trzech mo┐liwo£ci. Je£li u┐ytkownik wybierze pierwsz╣ opcjΩ, zwracana jest warto£µ 1. Je£li u┐ytkownik wybierze drug╣ opcjΩ, zwracana jest warto£µ 2. Je£li u┐ytkownik wybierze trzeci╣ opcjΩ, zwracana jest warto£µ 3.

 

Aby dodaµ pola do formularza
  1. Dobrze jest zaprojektowaµ wygl╣d formularza korzystaj╣c z powy┐szej listy dostΩpnych element≤w i szkicuj╣c je na arkuszu papieru.
  2. Skopiuj i wklej nastΩpuj╣ce fragmenty kodu na tworzonej stronie sieci Web w kolejno£ci ustalonej w kroku 1. Upewnij siΩ, czy ca│y kod jest umieszczony po znakach <!-- ===Elementy formularza nale┐y wklejaµ poni┐ej tego wiersza=== --> komentarza, a przed znakami <!-- ===Elementy formularza nale┐y wklejaµ powy┐ej tego wiersza== --> komentarza.

    3. Wskaz≤wka   Je£li podczas kopiowania zostanie do│╣czony komentarz pocz╣tkowy i ko±cowy przed i po ka┐dym fragmencie kodu, utworzona strona bΩdzie znacznie │atwiejsza do odczytu i edycji w przysz│o£ci. Komentarze nie s╣ wy£wietlane na stronie ogl╣danej w przegl╣darce. 

    
<!-- ===Pocz╣tek pierwszego pola tekstowego=== -->

<p> Zast╣p ten tekst etykiet╣ lub opisem pierwszego pola tekstowego: </p>
<p><input type="Text" name="Pierwszepoletekstowe"></p>

<!-- ===Koniec pierwszego pola tekstowego=== -->



<!-- ===Pocz╣tek drugiego pola tekstowego=== -->

<p> Zast╣p ten tekst etykiet╣ lub opisem drugiego pola tekstowego: </p> 
<p><input type="Text" name="Drugiepoletekstowe"></p>

<!-- ===Koniec drugiego pola tekstowego=== -->



<!-- ===Pocz╣tek trzeciego pola tekstowego=== -->

<p> Zast╣p ten tekst etykiet╣ lub opisem trzeciego pola tekstowego: </p>
<p><input type="Text" name="Trzeciepoletekstowe"></p>

<!-- ===Koniec trzeciego pola tekstowego=== -->



<!-- ===Pocz╣tek czwartego pola tekstowego=== -->

<p> Zast╣p ten tekst etykiet╣ lub opisem czwartego pola tekstowego: </p>
<p><input type="Text" name="Czwartepoletekstowe"></p>

<!-- ===Koniec czwartego pola tekstowego=== -->


<!-- ===Pocz╣tek pierwszego pola memo=== -->

<p> Zast╣p ten tekst etykiet╣ lub opisem pierwszego pola memo: </p> 
<p><textarea name="Pierwszepolememo" rows=6 cols=70></textarea></p>

<!-- ===Koniec pierwszego pola memo=== -->



<!-- ===Pocz╣tek drugiego pola memo=== -->

<p> Zast╣p ten tekst etykiet╣ lub opisem drugiego pola memo: </p>
<p><textarea name="Drugiepolememo" rows=6 cols=70></textarea></p>

<!-- ===Koniec drugiego pola memo=== -->



<!-- ===Pocz╣tek pierwszego pola wyboru=== -->

<p><input type="CHECKBOX" name="FirstCheckBox" value="true" > Zast╣p ten tekst etykiet╣ lub opisem pierwszego pola wyboru: </p>

<!-- ===Koniec pierwszego pola wyboru=== -->



<!-- ===Pocz╣tek drugiego pola wyboru=== -->

<p><input type="CHECKBOX" name="SecondCheckBox" value="true" > Zast╣p ten tekst etykiet╣ lub opisem drugiego pola wyboru: </p>

<!-- ===Koniec drugiego pola wyboru=== -->



<!-- ===Pocz╣tek przycisk≤w radiowych=== -->

<p><input name="Przyciskiradiowe" type="RADIO" value="1"> Zast╣p ten tekst etykiet╣ lub opisem pierwszej opcji. <br>
<input name="Przyciskiradiowe" type="RADIO" value="2"> Zast╣p ten tekst etykiet╣ lub opisem drugiej opcji. <br>
<input name="Przyciskiradiowe" type="RADIO" value="3"> Zast╣p ten tekst etykiet╣ lub opisem trzeciej opcji. </p>

<!-- ===Koniec przycisk≤w radiowych=== -->
  3. Zast╣p etykiety tekstowe towarzysz╣ce ka┐demu elementowi odpowiednim tekstem. Aby je szybko i │atwo odszukaµ, wyszukaj s│owo Zast╣p.
  4. Zapisz zmiany wprowadzone do pliku.
  5. Obejrzyj plik w przegl╣darce, aby siΩ upewniµ, ┐e elementy s╣ umieszczone we w│a£ciwym porz╣dku i ┐e etykiety s╣ poprawnie wy£wietlane. Ponownie mo┐na zignorowaµ skrypt widoczny na g≤rze strony, powy┐ej nag│≤wka. Je£li wprowadzone zmiany nie s╣ widoczne, u┐yj przycisku Od£wie┐ przegl╣darki.

DostΩp do bazy danych

Po zako±czeniu projektowania formularza nale┐y poddaµ edycji instrukcje, kt≤re s│u┐╣ do wstawiania danych do bazy danych, tak aby odpowiada│y polom formularza. Plik Sampform.asp zawiera odwo│ania do wszystkich dostΩpnych p≤l oraz do odbieranych przez nie danych. NastΩpnie nale┐y usun╣µ odwo│ania do element≤w, kt≤re nie zosta│y wykorzystane w formularzu. W poni┐szej tablicy przedstawiono nazwy element≤w i odpowiadaj╣ce im nazwy p≤l.

Element Nazwa pola
Pierwsze pole tekstoweTB1
Drugie pole tekstoweTB2
Trzecie pole tekstoweTB3
Czwarte pole tekstoweTB4
Pierwsze pole memoMB1
Drugie pole memoMB2
Pierwsze pole wyboruCB1
Drugie pole wyboruCB2
Przyciski radioweRB

Aby edytowaµ odwo│ania do p≤l bazy danych
  1. Aby znaleƒµ instrukcjΩ wstawiania, wyszukaj tekst cm.commandtext=.
  2. Wewn╣trz nawias≤w umieszczonych po s│owie SampleDb znajduj╣ siΩ nazwy wszystkich p≤l bazy danych oddzielone od siebie przecinkami. Usu± nazwy p≤l, kt≤re nie zosta│y u┐yte oraz przecinki umieszczone po tych nazwach. Je£li na przyk│ad zosta│o u┐yte tylko pierwsze pole tekstowe, drugie pole tekstowe i pierwsze pole wyboru, ten fragment wygl╣da│by nastΩpuj╣co: SampleDb(TB1,TB2,CB1)

    3. Notka   Bez wzglΩdu na kolejno£µ element≤w na stronie, nie nale┐y zmieniaµ kolejno£ci nazw p≤l w instrukcji.

  3. Wewn╣trz nawias≤w umieszczonych po s│owie VALUES znajduje siΩ dziewiΩµ znak≤w zapytania oddzielonych od siebie przecinkami. Liczba znak≤w zapytania musi byµ r≤wna liczbie element≤w u┐ytych w formularzu. Nale┐y usun╣µ zbΩdne znaki zapytania i umieszczone po nich przecinki. Je£li na przyk│ad zosta│o u┐yte tylko pierwsze pole tekstowe, drugie pole tekstowe i pierwsze pole wyboru, fragment zawieraj╣cy warto£µ wygl╣da│by nastΩpuj╣co: VALUES (?,?,?)
  4. Po instrukcji cm.commandtext= umieszczone s╣ instrukcje parametr≤w. Dla ka┐dego elementu, kt≤ry nie zosta│ u┐yty na stronie, umie£µ apostrof przed ka┐dym z dw≤ch wierszy umieszczonych poni┐ej instrukcji parametr≤w elementu. Je£li na przyk│ad nie zostanie u┐yte drugie pole tekstowe, instrukcja wygl╣da│aby nastΩpuj╣co:

    5. 'Instrukcja parametr≤w drugiego pola tekstowego
    'set objparam=cm.createparameter(, 200, , 255, strTB2)
    'cm.parameters.append objparam

  5. Zapisz wprowadzone zmiany i obejrzyj plik wpisuj╣c £cie┐kΩ //localhost/sampform.asp na pasku Adres przegl╣darki.

 

Aby na stronie g│≤wnej dodaµ │╣cze do formularza
  1. Otw≤rz okno Personal Web Manager programu PWS i kliknij ikonΩ Witryna sieci Web na pasku bocznym.
  2. Kliknij │╣cze Edytuj stronΩ g│≤wn╣ i u┐yj kreatora, aby na stronie g│≤wnej dodaµ │╣cze do formularza.

Tematy pokrewne

© 1998 Microsoft Corporation. Wszelkie prawa zastrze┐one.