Web Design Blog / Programowanie:

Obsługa formularzy na stronach AMP

Jak wiadomo korzystanie z technologii przyspieszonych stron mobilnych AMP czyli jak to sami twórcy określają „stron przyszłości” będzie się wiązać z koniecznością zmiany pewnych przyzwyczajeń szczególnie od strony deweloperów. Jednym z nich jest sposób wymiany danych na drodze klient – serwer którą realizujemy zazwyczaj za pomocą formularzy.

Jak korzystać z formularzy na stronach AMP?

Aby skorzystać ze znaczników form i input na stronach AMP należy załadować skrypt amp-form. W tym celu, w nagłówku musimy dodać następujący kod:

<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>

Teraz śmiało możemy się zabierać za stworzenie formularza. Elementy w składni i działaniu nie różnią się od tych znanych ze standardowych stron HTML5. Aby uzyskać taki formularz:

formularz w technologii AMP

Wystarczy poniższy kod:

<form method="post" action-xhr="pytanie.php">
    tytuł pytania:
         <input name="tytul" required="" type="text" placeholder="Określ tytuł pytania" /> 
    treść pytania:
          <textarea name="tresc" required="" rows="8" placeholder="Tutaj wpisz tresc pytania"></textarea> 
    Wybierz kategorię:
          <select name="kategoria" required="">
              <option value="">Wybierz z listy</option>
              <option value="medycyna">Medycyna</option>
              <option value="technologie">Technologie</option>
              <option value="biznes">Biznes</option>
              <option value="historia">Historia</option>
          </select>
          <input type="submit" value="Wyślij" />
</form>

Wszystko wygląda bardzo znajomo jednak w przeciwieństwie do mechanizmu znanego ze standardowych stron www, po kliknięciu przycisku Wyślij nie zostajemy przeniesieni do strony pytanie.php. Skrypt się co prawda wykona ale konsola zwróci błąd. Trzeba odpowiednio obsłużyć odpowiedź z pytanie.php albowiem AMP spodziewa się poprawnej odpowiedzi w formacie JSON.

Poprawna odpowiedź po przesłaniu formularza na stronie AMP

Po kliknięciu „Wyślij” strona spodziewa się specjalnego nagłówka a odpowiedź ma być zwrócona za pomocą JSONa. Możemy też obsłużyć asynchroniczną informację o błędzie lub powodzeniu skryptu. W tym celu dodamy kolejny komponent: amp-mustache.

<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>

a do naszego formularza dodamy następujące elementy:

<div submit-success>
    <template type="amp-mustache">
       {{message}}
    </template>
</div>
<div submit-error>
   <template type="amp-mustache">
     Błąd AMP!
  </template>
</div>

Dzięki temu zabiegowi strona nas poinformuje, że nie dostała odpowiedniej odpowiedzi np. z powodu awarii serwera lub z powodu zwróconego błędu. W przypadku sukcesu dodajemy zwróconą wiadomość ze skryptu PHP.

Strona AMP wymaga od serwera jeszcze specjalnego nagłówka:

header('AMP-Access-Control-Allow-Source-Origin: http://localhost');

I oczywiście pozostaje nam zwrócić JSONa. W PHP będzie to coś w stylu:

$output = ['message' => 'Dzięki, pytanie zostało wysłane.'];
echo json_encode($output);

Naturalnie nikt nam nie zabroni przekierować użytkownika do innej lokalizacji – służy do tego nagłówek AMP-Redirect-To:

header("AMP-Redirect-To: http://localhost/public/dziekujemy.php");

Podsumowanie

Ten prosty kod pozwoli nam podbijać Internet nowym sklepem lub pomysłową aplikacją wykonaną w standardzie AMP, która będzie się wyróżniać błyskawicznym działaniem. Już wkrótce publikacja nowej aplikacji wykonanej w standardzie AMP w moim skromnym portfolio.

Źródła

https://www.ampproject.org/docs/reference/components/amp-form

Obsługa formularzy na stronach AMP
4.8 (95.33%) głosów: 30

Autor: (29 lat)

Służę pomocą w razie wykonania / odnowienia strony lub sklepu internetowego dla twojej firmy niezależnie od twojej lokalizacji czy skali przedsięwziecia.

Tego typu wpisy piszę w wolnych chwilach lub pomiędzy projektami. Tylko pomyśl co mogę dla Ciebie zrobić w ramach usługi :-)

Zadaj pytanie lub skomentuj

Wyrażam zgodę na przetwarzanie moich danych osobowych przez firmę Paweł Mansfeld z siedzibą w Jastrzębiu-Zdroju, ul. Plebiscytowa 10, w celu udzielenia odpowiedzi, w tym przedłożenia oferty jeśli o nią pytam. Moje dane osobowe będą przetwarzane do czasu cofnięcia zgody lub przez okres niezbędny do ustalenia, dochodzenia lub obrony roszczeń. Mam prawo dostępu do danych, sprostowania, usunięcia lub ograniczenia przetwarzania, prawo sprzeciwu, prawo wniesienia skargi do organu nadzorczego i prawo do przeniesienia danych.

Otrzymuj powiadomienie o nowych artykułach

Wyrażam zgodę na przetwarzanie moich danych osobowych przez firmę Paweł Mansfeld z siedzibą w Jastrzębiu-Zdroju, ul. Plebiscytowa 10, w celu udzielenia odpowiedzi, w tym przedłożenia oferty jeśli o nią pytam. Moje dane osobowe będą przetwarzane do czasu cofnięcia zgody lub przez okres niezbędny do ustalenia, dochodzenia lub obrony roszczeń. Mam prawo dostępu do danych, sprostowania, usunięcia lub ograniczenia przetwarzania, prawo sprzeciwu, prawo wniesienia skargi do organu nadzorczego i prawo do przeniesienia danych.

*Bez obaw, nie udostępniam nikomu twojego adresu e-mail