Menampilkan Nama Tamu Undangan Online dengan Javascript

mrfdn.com - Beberapa hari terakhir, saya memiliki pertanyaan dalam benak tentang bagaimana cara si pembuat undangan online menampilkan nama tamu undangannya saat url dibuka.

Pagi ini setelah melaksanakan shalat subuh saya berhasil membuat script sederhana untuk memecahkan masalah ini. Alhamdulillah.

Setelah saya ulik ternyata itu bisa dilakukan melalui javascript.

Misalnya url undangan online seperti ini :

undangan.ku/rafi-zora/?namatamu

Saya ingin menampilkan nama tamu yang tertera setelah tanda tanya.

Arti tanda tanya itu sendiri adalah location search query pada URL yang dikenali oleh web secara standar.

Jadi pada file html undangan online kita tambahkan script ini.

<script>
const queryString = document.location.search.split("?")[1];

document.write(queryString);
</script>

Cara menggunakannya mudah saja, cukup tulis formatnya seperti di atas. Pastikan menambahkan tanda tanya ? lalu diikuti nama tamu.

Maka pada layar akan tampil nama tamu undangan.

Script ini memiliki fungsi yang sangat basic dan masih bisa dikembangkan.

<script>
const queryString = document.location.search;
const urlParams = new URLSearchParams(queryString);
const namatamu = urlParams.get('mengundang')

document.write(namatamu);

</script>

Untuk yang ini url diset menjadi seperti ini, sehingga bisa merender string dengan spasi (nama yang lebih dari 1 kata).

undangan.ku/rafi-zora/?mengundang=rafi ahmad

Kita tidak perlu mengetik %20 untuk set spasi pada nama tamu, karena sudah dikerjakan oleh javascript halaman web ini.

Semoga bermanfaat.

Ref: MDN Url Location - Javascript

Order web invitation undangan online yang keren di myspclday sekarang!