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

Oceń artykuł na temat: Obsługa formularzy na stronach AMP
Średnia : 4.7 , Maksymalnie : 5 , Głosów : 32