Form Input Form Input PHP: Mudah, Cepat, & Bermanfaat Masdoni Update jam 18:29:00 — 6 min read Daftar Isi Artikel Table of Contents1.1. form input2.1. PHP3.1. database4.1. HTML5.1. keamanan6.1. validasi data7. Memahami Dasar HTML Form7.1. 7.2. 7.3. </a></li><li><a href="#heading-10">7.4. <select></a></li></ul></li><li><a href="#heading-11">8. <h3>Memproses Data Form dengan PHP</h3></a><ul><li><a href="#heading-12">8.1. $_POST</a></li><li><a href="#heading-13">8.2. $_GET</a></li><li><a href="#heading-14">8.3. htmlspecialchars()</a></li></ul></li><li><a href="#heading-15">9. <h3>Validasi Data Form</h3></a><ul><li><a href="#heading-16">9.1. filter_var()</a></li><li><a href="#heading-17">9.2. FILTER_VALIDATE_EMAIL</a></li></ul></li><li><a href="#heading-18">10. <h3>Menyimpan Data ke Database</h3></a><ul><li><a href="#heading-19">10.1. mysqli</a></li><li><a href="#heading-20">10.2. PDO</a></li></ul></li><li><a href="#heading-21">11. <h3>Keamanan Form Input PHP</h3></a><ul><li><a href="#heading-22">11.1. CAPTCHA</a></li></ul></li><li><a href="#heading-23">12. <h3>Tips dan Trik</h3></a><ul></ul></li><li><a href="#heading-24">13. <h3>Framework PHP dan Form Input</h3></a><ul></ul></li><li><a href="#heading-25">14. <h3>Contoh Kasus: Form Login</h3></a><ul></ul></li><li><a href="#heading-26">15. <h3>Masa Depan Form Input PHP</h3></a><ul></ul></li><li><a href="#heading-27">16. <h3>{Akhir Kata}</h3></a><ul></ul></li></ul> </div> <script> void 0===localStorage.tablecc&&(localStorage.tablecc="on"); if(localStorage.getItem("tablecc") == "off"){ document.getElementById('toc').style.display= "none" }else{ document.getElementById('toc').style.display= "block" } function toggleToc() { var toc = document.getElementById('toc'); var tocToggle = document.getElementById('toc-toggle'); var isExpanded = tocToggle.getAttribute('aria-expanded') === 'true'; toc.style.display = isExpanded ? 'none' : 'block'; tocToggle.setAttribute('aria-expanded', !isExpanded); localStorage.setItem("tablecc", "on"); if(isExpanded){ localStorage.setItem("tablecc", "off"); } } </script> <p>Perkembangan teknologi informasi telah mengubah lanskap interaksi manusia dengan sistem komputer. Dulu, pengisian formulir identik dengan kertas dan pena, kini, <b id="heading-0"><a href="/search?q=form+input&results=all">form input</b></a> <a href="/search?q=PHP&results=all"><b id="heading-1">PHP</b></a></b> hadir sebagai solusi efisien dan dinamis. Kemudahan, kecepatan, dan manfaat yang ditawarkan menjadikannya komponen krusial dalam pengembangan web modern. Banyak developer, bahkan pemula, yang mengandalkan PHP untuk menciptakan form yang interaktif dan terhubung dengan <a href="/koneksi-python-ke-database-mysql-panduan-lengkap-dan-praktis"><b id="heading-2">database</b></a>.</p><p>Form input PHP bukan sekadar tentang menampilkan kotak teks dan tombol submit. Ia adalah jembatan antara pengguna dan server, memungkinkan pengumpulan data yang terstruktur dan terotomatisasi. Proses ini melibatkan interaksi kompleks antara <a href="/ubah-teks-konten-html-dengan-javascript"><b id="heading-3">HTML</b></a>, PHP, dan database, namun dengan pemahaman yang tepat, Kalian dapat menguasainya dengan relatif mudah. Penting untuk diingat, <a href="/search?q=keamanan&results=all"><b id="heading-4">keamanan</b></a> data adalah aspek fundamental yang harus Kalian perhatikan.</p><p>Bayangkan sebuah website e-commerce. Setiap kali Kalian mengisi formulir pemesanan, data yang Kalian masukkan diproses melalui form input PHP. Data tersebut kemudian disimpan dalam database, memungkinkan penjual untuk memproses pesanan Kalian. Tanpa form input PHP, proses ini akan jauh lebih rumit dan memakan waktu. Oleh karena itu, penguasaan teknik ini sangat berharga bagi Kalian yang ingin berkecimpung di dunia pengembangan web.</p><p>Artikel ini akan memandu Kalian melalui dasar-dasar form input PHP, mulai dari pembuatan form HTML sederhana hingga pemrosesan data menggunakan PHP dan penyimpanan ke database. Kita akan membahas berbagai aspek penting, termasuk <a href="/search?q=validasi+data&results=all"><b id="heading-5">validasi data</b></a>, keamanan, dan praktik terbaik dalam pengembangan. Tujuan kami adalah memberikan Kalian pemahaman yang komprehensif dan praktis tentang form input PHP.</p><h id="heading-6"><h3>Memahami Dasar HTML Form</h3></h><p>Sebelum melangkah lebih jauh ke PHP, Kalian perlu memahami struktur dasar HTML form. Form HTML adalah kerangka tempat pengguna memasukkan data. Elemen <b id="heading-7"><form></b> adalah wadah utama, sedangkan elemen-elemen lain seperti <b id="heading-8"><input></b>, <b id="heading-9"><textarea></b>, dan <b id="heading-10"><select></b> digunakan untuk membuat berbagai jenis input field. Atribut <i>action</i> pada tag <form> menentukan URL skrip PHP yang akan memproses data form.</p><p>Atribut <i>method</i> menentukan metode pengiriman data ke server. Dua metode yang umum digunakan adalah GET dan POST. Metode GET mengirimkan data melalui URL, sehingga terlihat oleh pengguna, sedangkan metode POST mengirimkan data secara tersembunyi dalam body permintaan HTTP. Untuk data sensitif, seperti password, disarankan untuk menggunakan metode POST. Pemilihan metode yang tepat sangat penting untuk keamanan dan efisiensi.</p><p>Berikut contoh sederhana form HTML:</p><pre><form action=proses_form.php method=post> <label for=nama>Nama:</label> <input type=text id=nama name=nama><br> <label for=email>Email:</label> <input type=email id=email name=email><br> <input type=submit value=Submit></form></pre><p>Perhatikan atribut <i>name</i> pada elemen <input>. Atribut ini digunakan untuk mengidentifikasi data yang dikirimkan ke server. Skrip PHP akan menggunakan nama-nama ini untuk mengakses data yang dimasukkan oleh pengguna.</p><h id="heading-11"><h3>Memproses Data Form dengan PHP</h3></h><p>Setelah form HTML dibuat, Kalian perlu skrip PHP untuk memproses data yang dikirimkan. Data form dapat diakses melalui variabel global <b id="heading-12">$_POST</b> (jika metode POST digunakan) atau <b id="heading-13">$_GET</b> (jika metode GET digunakan). Variabel-variabel ini adalah array asosiatif, di mana kunci adalah nama atribut <i>name</i> pada elemen <input>.</p><p>Contoh skrip PHP untuk memproses data form:</p><pre><?phpif ($_SERVER[REQUEST_METHOD] == POST) { $nama = $_POST[nama]; $email = $_POST[email]; echo Nama: . htmlspecialchars($nama) . <br>; echo Email: . htmlspecialchars($email) . <br>;}?></pre><p>Fungsi <b id="heading-14">htmlspecialchars()</b> digunakan untuk mencegah serangan XSS (Cross-Site Scripting) dengan mengubah karakter-karakter khusus menjadi entitas HTML. Ini adalah praktik keamanan yang penting untuk melindungi aplikasi Kalian dari serangan berbahaya. Selalu validasi dan sanitasi data yang dimasukkan oleh pengguna.</p><h id="heading-15"><h3>Validasi Data Form</h3></h><p>Validasi data adalah proses memastikan bahwa data yang dimasukkan oleh pengguna memenuhi kriteria yang telah ditentukan. Ini penting untuk mencegah kesalahan dan menjaga integritas data. Kalian dapat melakukan validasi data menggunakan PHP dengan memeriksa apakah data yang dimasukkan sesuai dengan tipe data yang diharapkan, panjang karakter yang diizinkan, dan format yang valid.</p><p>Berikut contoh validasi data email:</p><pre><?phpif ($_SERVER[REQUEST_METHOD] == POST) { $nama = $_POST[nama]; $email = $_POST[email]; if (!filter_var($email, FILTER_VALIDATE_EMAIL)) { echo Format email tidak valid.; } else { echo Nama: . htmlspecialchars($nama) . <br>; echo Email: . htmlspecialchars($email) . <br>; }}?></pre><p>Fungsi <b id="heading-16">filter_var()</b> dengan filter <b id="heading-17">FILTER_VALIDATE_EMAIL</b> digunakan untuk memvalidasi format email. Jika format email tidak valid, pesan kesalahan akan ditampilkan. Validasi data yang komprehensif akan meningkatkan kualitas data dan mengurangi risiko kesalahan.</p><h id="heading-18"><h3>Menyimpan Data ke Database</h3></h><p>Setelah data divalidasi, Kalian dapat menyimpannya ke database. PHP mendukung berbagai jenis database, seperti MySQL, PostgreSQL, dan SQLite. Untuk berinteraksi dengan database, Kalian perlu menggunakan ekstensi PHP yang sesuai, seperti <b id="heading-19">mysqli</b> atau <b id="heading-20">PDO</b>.</p><p>Berikut contoh menyimpan data ke database MySQL menggunakan mysqli:</p><pre><?phpif ($_SERVER[REQUEST_METHOD] == POST) { $nama = $_POST[nama]; $email = $_POST[email]; $conn = new mysqli(localhost, username, password, database_name); if ($conn->connect_error) { die(Koneksi gagal: . $conn->connect_error); } $sql = INSERT INTO users (nama, email) VALUES ('$nama', '$email'); if ($conn->query($sql) === TRUE) { echo Data berhasil disimpan.; } else { echo Error: . $sql . <br> . $conn->error; } $conn->close();}?></pre><p>Pastikan untuk mengganti localhost, username, password, dan database_name dengan informasi yang sesuai dengan konfigurasi database Kalian. Selain itu, selalu gunakan prepared statements untuk mencegah serangan SQL injection. Keamanan database adalah prioritas utama.</p><h id="heading-21"><h3>Keamanan Form Input PHP</h3></h><p>Keamanan form input PHP adalah aspek yang sangat penting. Serangan seperti XSS dan SQL injection dapat membahayakan aplikasi Kalian dan data pengguna. Untuk melindungi aplikasi Kalian, Kalian perlu menerapkan beberapa langkah keamanan, seperti validasi data, sanitasi data, penggunaan prepared statements, dan penerapan CAPTCHA.</p><p><b id="heading-22">CAPTCHA</b> (Completely Automated Public Turing test to tell Computers and Humans Apart) adalah tes yang digunakan untuk membedakan antara manusia dan bot. CAPTCHA dapat membantu mencegah pengiriman form otomatis oleh bot jahat. Ada berbagai layanan CAPTCHA yang tersedia, seperti reCAPTCHA dari Google.</p><h id="heading-23"><h3>Tips dan Trik</h3></h><p>Berikut beberapa tips dan trik untuk mengembangkan form input PHP yang efisien dan efektif:</p><ul> <li>Gunakan label yang jelas dan deskriptif untuk setiap input field.</li> <li>Berikan pesan kesalahan yang informatif dan mudah dipahami.</li> <li>Gunakan atribut <i>required</i> untuk memastikan bahwa field yang wajib diisi tidak kosong.</li> <li>Gunakan atribut <i>placeholder</i> untuk memberikan contoh format input yang diharapkan.</li> <li>Optimalkan form Kalian untuk perangkat mobile.</li></ul><h id="heading-24"><h3>Framework PHP dan Form Input</h3></h><p>Banyak framework PHP, seperti Laravel, Symfony, dan CodeIgniter, menyediakan fitur-fitur yang memudahkan pengembangan form input. Framework-framework ini seringkali menyediakan helper functions, form builders, dan validasi data yang terintegrasi. Menggunakan framework dapat mempercepat proses pengembangan dan meningkatkan kualitas kode Kalian.</p><h id="heading-25"><h3>Contoh Kasus: Form Login</h3></h><p>Form login adalah contoh kasus yang umum untuk form input PHP. Form login biasanya terdiri dari dua input field: username dan password. Setelah data form dikirimkan, skrip PHP akan memverifikasi kredensial pengguna terhadap database. Jika kredensial valid, pengguna akan di-login ke aplikasi. Keamanan form login sangat penting untuk melindungi akun pengguna.</p><h id="heading-26"><h3>Masa Depan Form Input PHP</h3></h><p>Form input PHP terus berkembang seiring dengan perkembangan teknologi web. Tren terbaru termasuk penggunaan AJAX untuk pemrosesan form tanpa refresh halaman, penggunaan JavaScript frameworks untuk membuat form yang lebih interaktif, dan penggunaan API untuk integrasi dengan layanan pihak ketiga. Kalian perlu terus belajar dan beradaptasi dengan tren terbaru untuk tetap relevan di dunia pengembangan web.</p><h id="heading-27"><h3>{Akhir Kata}</h3></h><p>Form input PHP adalah komponen fundamental dalam pengembangan web. Dengan pemahaman yang kuat tentang dasar-dasar HTML, PHP, dan database, Kalian dapat menciptakan form yang efisien, aman, dan bermanfaat. Jangan lupa untuk selalu memprioritaskan keamanan data dan menerapkan praktik terbaik dalam pengembangan. Semoga artikel ini bermanfaat bagi Kalian dan membantu Kalian dalam perjalanan Kalian menjadi developer web yang handal.</p> <style>#relBefore { position: relative; margin-top: 42px; padding: 1.5em; border-top: 1px solid #f1f6fd; border-bottom: 1px solid #f1f6fd; font-size: 16px; margin-bottom: 0px; } #relBefore span { font-weight: 400; margin: 0; padding: 6px 14px; background-color: #fefefe; border: 1px solid #e6e6e6; border-radius: 15px; position: absolute; top: -15.5px; left: 20px; } div#relBefore a { display: contents; line-height: 2; } #relBefore ul { margin: 8px 0 0; padding-left: 20px; } #relBefore li { list-style-type: none; transition: all 0.4s ease; background: transparent !important; }</style><div id="relBefore"> <span>Baca Juga:</span> <ul> <li><a href="animasi-powerpoint-teks-gambar-menawan">➝ Animasi PowerPoint: Teks & Gambar Menawan</a></li> <li><a href="pemasaran-digital-terpadu-strategi-pengertiannya">➝ Pemasaran Digital Terpadu: Strategi & Pengertiannya</a></li> <li><a href="transisi-slide-halus-tips-trik-kreatif">➝ Transisi Slide Halus: Tips & Trik Kreatif</a></li> </ul> </div> <!-- WG SHARE POST--> <!-- COMMENT INSD--> <!-- WG AI --> </section> </article> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script> <style> div#slTop { margin-top: 60px!important; } /* Basic styles */ .owl-carousel .item { display: flex; flex-direction: column; align-items: center; text-align: center; } .item img { max-width: 100%; height: auto; border-radius: 5px; } .owl-nav button { background: none; border: none; color: #4d0270; /* Change color as needed */ font-size: 24px; /* Adjust size as needed */ cursor: pointer; /* Ensure pointer cursor for clickable area */ padding: 10px; /* Add padding for better click area */ } .owl-nav button:hover { color: #c6005f; /* Change color on hover */ } </style> <div class="slTop section gh-outer" id="slTop"> <h3 style=" margin-bottom: 20px; ">Baca Juga: </h3> <div class="widget HTML" data-version="2" id="HTML14"> <div class="widget-content"> <div class="owl-carousel owl-loaded owl-drag"> <div class="owl-stage-outer"> <div class="owl-stage"> <div class="owl-item" style="width: 250px;"> <div class="item"> <a href="/data-cleaning-excel-solusi-data-akurat-efisien" title="Data Cleaning Excel: Solusi Data Akurat & Efisien"> <img src="https://tse1.mm.bing.net/th?q=Data+Cleaning+Excel:+Solusi+Data+Akurat+&+Efisien" alt="Data Cleaning Excel: Solusi Data Akurat & Efisien"> </a> <h2 class="rect-title"><a href="/data-cleaning-excel-solusi-data-akurat-efisien">Data Cleaning Excel: Solusi Data Akurat & Efisien</a></h2> <div class="post-meta"><div class="rcDTe">Kemarin jam 01:12:00</div></div> </div> </div><div class="owl-item" style="width: 250px;"> <div class="item"> <a href="/atasi-error-download-google-play-store-lancar" title="Atasi Error Download: Google Play Store Lancar!"> <img src="https://tse1.mm.bing.net/th?q=Atasi+Error+Download:+Google+Play+Store+Lancar!" alt="Atasi Error Download: Google Play Store Lancar!"> </a> <h2 class="rect-title"><a href="/atasi-error-download-google-play-store-lancar">Atasi Error Download: Google Play Store Lancar!</a></h2> <div class="post-meta"><div class="rcDTe">Kemarin jam 00:13:00</div></div> </div> </div><div class="owl-item" style="width: 250px;"> <div class="item"> <a href="/admin-server-peran-fungsi-tanggung-jawab-utama" title="Admin Server: Peran, Fungsi, & Tanggung Jawab Utama"> <img src="https://tse1.mm.bing.net/th?q=Admin+Server:+Peran,+Fungsi,+&+Tanggung+Jawab+Utama" alt="Admin Server: Peran, Fungsi, & Tanggung Jawab Utama"> </a> <h2 class="rect-title"><a href="/admin-server-peran-fungsi-tanggung-jawab-utama">Admin Server: Peran, Fungsi, & Tanggung Jawab Utama</a></h2> <div class="post-meta"><div class="rcDTe">Kemarin jam 00:11:00</div></div> </div> </div><div class="owl-item" style="width: 250px;"> <div class="item"> <a href="/growth-hacking-strategi-cepat-kembangkan-bisnis-anda" title="Growth Hacking: Strategi Cepat Kembangkan Bisnis Anda"> <img src="https://tse1.mm.bing.net/th?q=Growth+Hacking:+Strategi+Cepat+Kembangkan+Bisnis+Anda" alt="Growth Hacking: Strategi Cepat Kembangkan Bisnis Anda"> </a> <h2 class="rect-title"><a href="/growth-hacking-strategi-cepat-kembangkan-bisnis-anda">Growth Hacking: Strategi Cepat Kembangkan Bisnis Anda</a></h2> <div class="post-meta"><div class="rcDTe">Kemarin jam 22:09:00</div></div> </div> </div><div class="owl-item" style="width: 250px;"> <div class="item"> <a href="/manajemen-pemasaran-strategi-tujuan-dan-implementasi" title="Manajemen Pemasaran: Strategi, Tujuan, dan Implementasi"> <img src="https://tse1.mm.bing.net/th?q=Manajemen+Pemasaran:+Strategi,+Tujuan,+dan+Implementasi" alt="Manajemen Pemasaran: Strategi, Tujuan, dan Implementasi"> </a> <h2 class="rect-title"><a href="/manajemen-pemasaran-strategi-tujuan-dan-implementasi">Manajemen Pemasaran: Strategi, Tujuan, dan Implementasi</a></h2> <div class="post-meta"><div class="rcDTe">Kemarin jam 21:08:00</div></div> </div> </div> <!-- Add more items similarly --> </div> </div> </div> </div> </div> </div> <script> $(document).ready(function(){ $('.owl-carousel').owlCarousel({ loop: true, margin: 20, nav: true, items: 5, // Show 5 items on desktop autoplay: true, autoplayTimeout: 3000, autoplayHoverPause: true, responsive: { 0: { items: 1 // 1 item on mobile }, 600: { items: 2 // 2 items on small tablets }, 992: { items: 5 // 5 items on desktop } } }); }); </script> </main> <footer class="gh-footer gh-outer"> <div class="gh-footer-inner gh-inner"> <div class="gh-footer-bar"> <span class="gh-footer-logo is-title"><img style="width:220px!important;height:auto!important;" alt="" class="ls-is-cached lazyloaded" src="https://ik.imagekit.io/masdoni/ChatGPT_Image_Jan_11__2026__07_38_40_-removebg-preview_nosqB8M7l.png" title=""></span> <nav class="gh-footer-menu"><ul class="nav"><li><a href="https://berilmu.eu.org/tentang-kami">Tentang Kami</a></li><li><a href="https://berilmu.eu.org/hubungi-kami">Hubungi Kami</a></li><li><a href="https://berilmu.eu.org/kebijakan-privasi">Kebijakan Privasi</a></li><li><a href="https://berilmu.eu.org/syarat-dan-ketentuan">Syarat dan Ketentuan</a></li></ul></nav> <div class="gh-footer-copyright"> Powered by <a href="/" target="_blank">berilmu.eu.org</a> </div> </div> <section class="gh-footer-signup"> <h2 class="gh-footer-signup-header"><img style="width:220px!important;height:auto!important;" alt="" class="ls-is-cached lazyloaded" src="https://ik.imagekit.io/masdoni/ChatGPT_Image_Jan_11__2026__07_38_40_-removebg-preview_nosqB8M7l.png" title=""></h2> <p class="gh-footer-signup-subhead">Platform edukasi teknologi gratis. Temukan tutorial Excel, belajar Python, tips AI terbaru, dan panduan produktivitas kerja yang praktis dan mudah dipahami.</p> <style> .social-share{display:flex; gap:12px; margin-top:20px; justify-content:center} .social-share a{width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:50%; color:#fff!important; font-size:18px; transition:0.3s} .social-share a:hover{opacity:0.8; transform:translateY(-3px)} .facebook{background:#3b5998} .twitter{background:#1da1f2} .linkedin{background:#0077b5} .instagram{background:#e1306c} .whatsapp{background:#25D366} </style> <div class="social-share"> <a href="https://www.facebook.com/sharer/sharer.php?u=https://berilmu.eu.org" class="facebook" target="_blank"><i class="fab fa-facebook-f"></i></a> <a href="https://twitter.com/intent/tweet?url=https://berilmu.eu.org" class="twitter" target="_blank"><i class="fab fa-twitter"></i></a> <a href="https://www.linkedin.com/shareArticle?url=https://berilmu.eu.org" class="linkedin" target="_blank"><i class="fab fa-linkedin-in"></i></a> <a href="https://api.whatsapp.com/send?text=https://berilmu.eu.org" class="whatsapp" target="_blank"><i class="fab fa-whatsapp"></i></a> </div> </section> </div> </div> </footer> </div> <div id="ghost-portal-root"> <style> .gsmodal { position:fixed; top:0; left:0; width:100%; height:100%; z-index:9999; display:flex; align-items:center; justify-content:center; background:#fff; visibility:hidden; opacity:0; transition:0.3s; } .gsmodal.gsshow { visibility:visible; opacity:1; } .gscontent { width:90%; max-width:600px; text-align:center; } .gscontent input { width:100%; padding:15px; border:0; border-bottom:2px solid #eee; font-size:24px; outline:none; } .gsclose { position:absolute; top:20px; right:20px; background:none; border:0; font-size:30px; cursor:pointer; } </style> <div class="gsmodal"> <button class="gsclose">×</button> <div class="gscontent"> <form action="/search"> <input name="q" placeholder="Search..." required type="search"> <button type="submit" style="display:none"></button> </form> <p style="margin-top:15px; color:#888">Press Enter to search</p> </div> </div> </div> <script> const triggers = document.querySelectorAll('.gh-search'); const modal = document.querySelector('.gsmodal'); const close = document.querySelector('.gsclose'); triggers.forEach(t => t.onclick = () => modal.classList.add('gsshow')); close.onclick = () => modal.classList.remove('gsshow'); window.onclick = (e) => { if(e.target == modal) modal.classList.remove('gsshow'); } </script> <script src="https://cdn.jsdelivr.net/gh/iwgs/newswave@refs/heads/main/js/source.js?v=fce98be120"></script> <script></script> <style> #bannerAds { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; background: #fff; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); overflow: hidden; transition: all 0.5s ease-in-out; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; user-select: none; cursor: default; box-sizing: border-box; } #bannerAds.fixed { position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 50% !important; max-width: none !important; border-radius: 16px !important; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3) !important; z-index: 99999 !important; cursor: pointer; } #bannerAds img { display: block; width: 100%; height: auto; object-fit: cover; border-radius: inherit; pointer-events: none; user-select: none; } #bannerAds .close-btn { position: absolute; top: 12px; right: 12px; background: rgba(255, 255, 255, 0.85); border: none; border-radius: 50%; width: 32px; height: 32px; font-size: 18px; color: #444; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color 0.3s ease, color 0.3s ease; user-select: none; z-index: 10; } #bannerAds .close-btn:hover, #bannerAds .close-btn:focus { background: #e53e3e; color: white; outline: none; } /* Text overlay container */ #bannerAds .text-overlay { position: absolute; bottom: 20px; left: 20px; right: 20px; color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); font-weight: 700; font-size: 1.5rem; line-height: 1.2; pointer-events: none; user-select: none; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } #bannerAds.fixed .text-overlay { font-size: 1.25rem; bottom: 16px; left: 16px; right: 16px; } /* Title container */ #bannerAds .title { position: absolute; top: 12px; left: 20px; right: 60px; color: #222; font-weight: 700; font-size: 1.25rem; line-height: 1.2; user-select: none; pointer-events: none; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #bannerAds.fixed .title { color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); top: 12px; left: 16px; right: 60px; font-size: 1.1rem; } /* Progress bar container */ #bannerAds .progress-bar-container { position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background: rgba(0, 0, 0, 0.1); border-radius: 0 0 12px 12px; overflow: hidden; pointer-events: none; user-select: none; } #bannerAds.fixed .progress-bar-container { border-radius: 0 0 16px 16px; } /* Progress bar fill */ #bannerAds .progress-bar-fill { height: 100%; background: #e53e3e; width: 0%; transition: width linear; } /* Responsive adjustments */ @media (max-width: 400px) { #bannerAds.fixed { width: 90vw !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; } #bannerAds .text-overlay { font-size: 1.1rem; bottom: 14px; left: 14px; right: 14px; } #bannerAds .title { font-size: 1rem; left: 14px; right: 50px; } #bannerAds.fixed .title { font-size: 1rem; left: 14px; right: 50px; } } </style> <!-- Banner Ads Container --> <div aria-label="Promotional banner advertisement" id="bannerAds" role="region" tabindex="0" > <button aria-label="Close banner ad" class="close-btn" id="closeBtn" type="button"> <i aria-hidden="true" class="fas fa-times"></i> </button> <div class="title" aria-hidden="true">Display Ads</div> <div class="progress-bar-container" aria-hidden="true"> <div class="progress-bar-fill" id="progressBar"></div> </div> </div> <script> (function () { const banner = document.getElementById("bannerAds"); const closeBtn = document.getElementById("closeBtn"); const progressBar = document.getElementById("progressBar"); // Constants for timing const INITIAL_DELAY = 5000; // 5 seconds initial delay before fixed popup const BASE_INTERVAL = 10000; // 10 seconds base interval after close const DAY_MILLISECONDS = 24 * 60 * 60 * 1000; const AUTO_CLOSE_DURATION = 10000; // 10 seconds auto close duration when popup shown // Keys for localStorage const STORAGE_KEY = "bannerAdsState"; // State object structure: // { // lastCloseTime: timestamp in ms, // currentIntervalMultiplier: number, // lastShowTime: timestamp in ms // } // Initialize or reset state if 24 hours passed function getState() { const stateRaw = localStorage.getItem(STORAGE_KEY); if (!stateRaw) { return { lastCloseTime: 0, currentIntervalMultiplier: 1, lastShowTime: 0, }; } try { const state = JSON.parse(stateRaw); if (Date.now() - state.lastCloseTime > DAY_MILLISECONDS) { // Reset after 24 hours return { lastCloseTime: 0, currentIntervalMultiplier: 1, lastShowTime: 0, }; } return state; } catch { return { lastCloseTime: 0, currentIntervalMultiplier: 1, lastShowTime: 0, }; } } function saveState(state) { localStorage.setItem(STORAGE_KEY, JSON.stringify(state)); } // Show banner as fixed popup function showFixedPopup() { banner.style.display = "block"; banner.classList.add("fixed"); startProgressBar(AUTO_CLOSE_DURATION); startAutoCloseTimer(AUTO_CLOSE_DURATION); } // Show banner as normal full width banner (initial) function showInitialBanner() { banner.style.display = "block"; banner.classList.remove("fixed"); resetProgressBar(); clearAutoCloseTimer(); } // Hide banner function hideBanner() { banner.style.display = "none"; resetProgressBar(); clearAutoCloseTimer(); } // Variables to hold timers let fixedPopupTimer = null; let recurringTimer = null; let autoCloseTimer = null; // Clear all timers except autoCloseTimer function clearTimers() { if (fixedPopupTimer) { clearTimeout(fixedPopupTimer); fixedPopupTimer = null; } if (recurringTimer) { clearTimeout(recurringTimer); recurringTimer = null; } } // Clear auto close timer function clearAutoCloseTimer() { if (autoCloseTimer) { clearTimeout(autoCloseTimer); autoCloseTimer = null; } } // Start the initial 5 second timer to show fixed popup function startInitialTimer() { showInitialBanner(); fixedPopupTimer = setTimeout(() => { showFixedPopup(); state.lastShowTime = Date.now(); saveState(state); }, INITIAL_DELAY); } // Start recurring popup timer after close function startRecurringTimer() { clearTimers(); const interval = BASE_INTERVAL * state.currentIntervalMultiplier; recurringTimer = setTimeout(() => { showFixedPopup(); state.lastShowTime = Date.now(); saveState(state); }, interval); } // Auto close popup after duration function startAutoCloseTimer(duration) { clearAutoCloseTimer(); autoCloseTimer = setTimeout(() => { hideBanner(); // Update state as if closed by user to increase interval multiplier state.lastCloseTime = Date.now(); state.currentIntervalMultiplier++; saveState(state); startRecurringTimer(); }, duration); } // Progress bar animation function startProgressBar(duration) { progressBar.style.transition = "none"; progressBar.style.width = "0%"; // Force reflow to restart transition void progressBar.offsetWidth; progressBar.style.transition = "width "+ duration + "ms linear"; progressBar.style.width = "100%"; } function resetProgressBar() { progressBar.style.transition = "none"; progressBar.style.width = "0%"; } // On close button click closeBtn.addEventListener("click", () => { hideBanner(); clearTimers(); clearAutoCloseTimer(); // Update state state.lastCloseTime = Date.now(); state.currentIntervalMultiplier++; saveState(state); // Start recurring timer with increased interval startRecurringTimer(); }); // On page load let state = getState(); // If banner was closed less than 24h ago and last show time is recent, show fixed popup immediately // Otherwise start initial 5s timer if ( state.lastCloseTime > 0 && Date.now() - state.lastCloseTime < DAY_MILLISECONDS ) { // Calculate time passed since last close const timeSinceClose = Date.now() - state.lastCloseTime; const nextInterval = BASE_INTERVAL * state.currentIntervalMultiplier; if (timeSinceClose >= nextInterval) { // Show fixed popup immediately showFixedPopup(); state.lastShowTime = Date.now(); saveState(state); // Start next recurring timer with incremented multiplier state.currentIntervalMultiplier++; saveState(state); startRecurringTimer(); } else { // Wait remaining time to show popup showInitialBanner(); fixedPopupTimer = setTimeout(() => { showFixedPopup(); state.lastShowTime = Date.now(); saveState(state); state.currentIntervalMultiplier++; saveState(state); startRecurringTimer(); }, nextInterval - timeSinceClose); } } else { // Reset multiplier and start initial 5s timer state.currentIntervalMultiplier = 1; saveState(state); startInitialTimer(); } })(); </script> </body> <script> void 0===localStorage.loc&&(localStorage.loc="3335000"); const uCore=["scroll"];uCore.forEach(function(event){window.addEventListener(event,ujLdrs,{passive:!0})});function ujLdrs(){rsccore(0);localStorage.setItem('star', 'load');uCore.forEach(function(event){window.removeEventListener(event,ujLdrs,{passive:!0})})} function lscCore(){document.querySelectorAll("script[data-js-host='adsjs']").forEach(function(elem){elem.setAttribute("src",elem.getAttribute("attribute"))})} const uCorecss=["scroll"];uCorecss.forEach(function(event){window.addEventListener(event,ujLdrscss,{passive:!0})});function ujLdrscss(){rsccore(0);localStorage.setItem('loc', '0');uCorecss.forEach(function(event){window.removeEventListener(event,ujLdrscss,{passive:!0})})} function lscCorecss(){document.querySelectorAll("link[data-type='css']").forEach(function(elem){elem.setAttribute("href",elem.getAttribute("attribute")) elem.setAttribute("rel", "stylesheet") })} window.addEventListener(localStorage.getItem('star'), dcores,false); function dcores(){ rsccore(0); } var pvtr = 0; const rsccore = (cffe) => { if (cffe < 1) { setTimeout(() => { ++cffe rsccore(cffe); pvtr +=1; if(pvtr == 1){ lscCorecss(); lscCore(); var WGSLAZY = document.getElementsByTagName("img"); for (var i=0; i < WGSLAZY.length; i++) { if(WGSLAZY[i].getAttribute('oper-src')) { WGSLAZY[i].setAttribute('src',WGSLAZY[i].getAttribute('oper-src')); }} } }, 0); } } </script> </html>
