Bagaimana cara membuat kotak komentar di html?

Phil Leggetter adalah Penginjil Pengembang di Pusher. Dia telah terlibat dalam pengembangan dan penggunaan teknologi web waktu nyata selama lebih dari 10 tahun. Fokusnya adalah … Selengkapnya tentang Phil ↬

Buletin Email

Kiat mingguan tentang front-end & UX
Dipercaya oleh 200.000+ orang

• 
  Pelatihan UX Pola Desain Antarmuka

• 
  Beriklan di Majalah Smashing

• 
  Bersiaplah untuk peran komunikasi hari ini MS Northwestern dalam Desain Informasi

• 
  Front-End SmashingConf 2023

• 
  SmashingConf Freiburg 2023

Menambahkan fungsionalitas real-time ke aplikasi dapat menghasilkan pengalaman pengguna yang lebih interaktif dan menarik. Namun, menyiapkan dan memelihara komponen waktu nyata sisi server dapat menjadi gangguan yang tidak diinginkan. Tapi jangan khawatir, ada solusinya

Layanan Web dan API yang dihosting cloud telah membantu banyak pengembang selama beberapa tahun terakhir, dan fungsionalitas waktu nyata tidak berbeda. Fokus di Pusher, misalnya, adalah membiarkan Anda berkonsentrasi membangun aplikasi Web waktu nyata dengan menawarkan API yang dihosting yang membuatnya cepat dan mudah untuk menambahkan fungsionalitas waktu nyata yang dapat diskalakan ke aplikasi Web dan seluler

Bacaan Lebih Lanjut di SmashingMag.

• Tingkatkan Pengalaman Pengguna Dengan Fitur Real-Time
• Data Real-Time Dan Web Yang Lebih Dipersonalisasi
• Membangun Papan Retrospektif Real-Time Dengan Obrolan Video
• Kemana Perginya Semua Komentar?

Dalam tutorial ini, saya akan menunjukkan cara mengonversi sistem komentar blog dasar menjadi pengalaman yang melibatkan waktu nyata di mana Anda akan melihat komentar yang dibuat di satu jendela browser "secara ajaib" muncul di jendela kedua

Lebih banyak setelah melompat. Lanjutkan membaca di bawah ↓

Temui Smashing Workshops di front-end & UX, dengan takeaway praktis, sesi langsung, rekaman video, dan tanya jawab yang bersahabat. Pada sistem desain, UX, kinerja web, dan CSS/JS. Dengan Brad Frost, Christine Vallaure dan banyak lainnya

Mengapa Kita Harus Peduli Dengan Web Real-Time?

Meskipun Web Real-Time adalah frase arus utama yang relatif baru, teknologi Web real-time telah ada selama lebih dari 10 tahun. Mereka terutama digunakan oleh perusahaan yang membangun perangkat lunak yang ditargetkan pada sektor jasa keuangan atau dalam aplikasi obrolan Web. Solusi awal ini digolongkan sebagai "peretasan". Pada tahun 2006 solusi ini diberi istilah umum yang disebut Comet, tetapi bahkan dengan nama yang ditentukan, solusi tersebut masih dianggap peretasan. Jadi, apa yang berubah?

Menurut pendapat saya, ada sejumlah faktor yang telah memindahkan teknologi Web real-time ke garis depan pengembangan aplikasi Web

Data Media Sosial

Media sosial, dan khususnya Twitter, berarti semakin banyak data yang tersedia secara instan. Lewatlah sudah hari-hari di mana kita harus menunggu selamanya untuk Google menemukan data kita (postingan blog, pembaruan status, gambar). Sekarang ada platform yang tidak hanya membuat data kami dapat ditemukan secara instan, tetapi juga mengirimkannya secara instan kepada mereka yang telah menyatakan minat. Gagasan Publikasikan/Berlangganan ini adalah inti dari Web real-time, terutama saat membangun aplikasi Web

Peningkatan Ekspektasi Pengguna

Semakin banyak pengguna beralih menggunakan aplikasi seperti Twitter dan Facebook, dan pengalaman pengguna yang mereka berikan, persepsi mereka tentang apa yang dapat diharapkan dari aplikasi Web berubah. Meskipun aplikasi menjadi lebih dinamis melalui penggunaan JavaScript, pengalamannya jarang benar-benar interaktif. Facebook, dengan dinding waktu nyata (dan kemudian fitur waktu nyata lainnya) dan Twitter dengan antarmuka pengguna yang berpusat pada arus aktivitas, dan fokus pada percakapan, mendemonstrasikan bagaimana aplikasi Web bisa sangat menarik

Soket Web

Sebelumnya saya menyatakan bahwa solusi sebelumnya untuk membiarkan server secara instan mendorong data ke browser Web dianggap sebagai "peretasan". Tapi ini tidak menghilangkan fakta bahwa ada persyaratan untuk dapat melakukan ini dengan cara lintas-browser dan standar. Doa kami akhirnya dijawab dengan HTML5 WebSockets. WebSockets mewakili API dan protokol berbintang yang memungkinkan server waktu nyata dan klien (browser web) komunikasi dua arah melalui satu koneksi. Solusi yang lebih lama hanya dapat mencapai komunikasi dua arah menggunakan dua koneksi sehingga fakta bahwa WebSockets menggunakan satu koneksi sebenarnya adalah masalah besar. Ini bisa menjadi penghematan sumber daya yang sangat besar untuk server dan klien, dengan yang terakhir menjadi sangat penting untuk perangkat seluler di mana daya baterai sangat berharga.

Bagaimana Teknologi Real-Time digunakan?

Teknologi Web waktu nyata memungkinkan untuk membangun segala macam fungsionalitas yang menarik, yang mengarah pada peningkatan pengalaman pengguna. Berikut adalah beberapa kasus penggunaan umum

• Realtime Stats - Teknologi ini pertama kali digunakan di bidang keuangan untuk menampilkan informasi bursa sehingga tidak mengherankan jika teknologi ini digunakan lebih dari sebelumnya. Ini juga sangat bermanfaat untuk olahraga, taruhan, dan analitik
• Pemberitahuan - ketika sesuatu yang diminati pengguna tersedia atau berubah
• Aliran Aktivitas - aliran teman atau aktivitas proyek. Ini biasanya terlihat di aplikasi seperti Twitter, Facebook, Trello, Quora, dan banyak lagi
• Obrolan - 101 atau teknologi Web real-time tetapi masih merupakan fungsi yang sangat berharga. Ini membantu pengiriman interaksi instan antara teman, rekan kerja, pelanggan dan layanan pelanggan dll
• Kolaborasi - Google docs menawarkan fungsionalitas semacam ini dalam aplikasi docs, spreadsheet, dan menggambarnya dan kita akan melihat kasus penggunaan serupa di lebih banyak aplikasi
• Game Multi Pemain - Kemampuan untuk mengirimkan gerakan pemain secara instan, perubahan status game, dan pembaruan skor jelas penting untuk game multipemain

Di sisa tutorial ini saya akan membahas membangun sistem komentar blog dasar, bagaimana meningkatkannya secara progresif menggunakan jQuery dan terakhir saya juga akan meningkatkannya secara progresif menggunakan layanan Web real-time tempat saya bekerja, Pusher, yang akan menunjukkan tidak

Membuat Sistem Komentar Blog Generik

Mulai dari Templat

Saya ingin fokus untuk menambahkan komentar real-time ke postingan blog, jadi mari kita mulai dari template

Template ini menggunakan kembali tata letak HTML5 yang ditentukan dalam posting di Pengkodean Tata Letak HTML 5 Dari Awal dan struktur file yang akan kita mulai adalah sebagai berikut (dengan beberapa tambahan yang tidak perlu kita khawatirkan saat ini)

• css (dir)
  • global-forms. css
  • utama. css
  • mengatur ulang. css
• gambar (dir)
• indeks. php

HTML

Template HTML, ditemukan di index. php, telah diubah dari artikel Tata Letak HTML5 untuk fokus pada konten menjadi posting blog dengan komentar. Anda dapat melihat sumber HTML di sini

Elemen utama yang harus diperhatikan adalah

• <?php
  require('Persistence.php');
  
  $db = new Persistence();
  if( $db->add_comment($_POST) ) {
    header( 'Location: index.php' );
  }
  else {
    header( 'Location: index.php?error=Your comment was not posted due to errors in your form submission' );
  }
  ?>

  5 - konten posting blog

• <?php
  require('Persistence.php');
  
  $db = new Persistence();
  if( $db->add_comment($_POST) ) {
    header( 'Location: index.php' );
  }
  else {
    header( 'Location: index.php?error=Your comment was not posted due to errors in your form submission' );
  }
  ?>

  6 - di mana komentar akan muncul. Di sinilah sebagian besar pekerjaan kami akan dilakukan

Komentar

Sekarang setelah kita memiliki HTML untuk entri blog kita dan untuk menampilkan komentar, kita juga memerlukan cara bagi pembaca untuk mengirimkan komentar, jadi mari tambahkan elemen

<?php
require('Persistence.php');

$db = new Persistence();
if( $db->add_comment($_POST) ) {
  header( 'Location: index.php' );
}
else {
  header( 'Location: index.php?error=Your comment was not posted due to errors in your form submission' );
}
?>

<?php
require('Persistence.php');

$db = new Persistence();
if( $db->add_comment($_POST) ) {
  header( 'Location: index.php' );
}
else {
  header( 'Location: index.php?error=Your comment was not posted due to errors in your form submission' );
}
?>

<?php
require('Persistence.php');

$db = new Persistence();
if( $db->add_comment($_POST) ) {
  header( 'Location: index.php' );
}
else {
  header( 'Location: index.php?error=Your comment was not posted due to errors in your form submission' );
}
?>

<div id="respond">

  <h3>Leave a Comment</h3>

  <form action="post_comment.php" method="post" id="commentform">

    <label for="comment_author" class="required">Your name</label>
    <input type="text" name="comment_author" id="comment_author" value="" tabindex="1" required="required">

    <label for="email" class="required">Your email;</label>
    <input type="email" name="email" id="email" value="" tabindex="2" required="required">

    <label for="comment" class="required">Your message</label>
    <textarea name="comment" id="comment" rows="10" tabindex="4"  required="required"></textarea>

    <-- comment_post_ID value hard-coded as 1 -->
    <input type="hidden" name="comment_post_ID" value="1" id="comment_post_ID" />
    <input name="submit" type="submit" value="Submit comment" />

  </form>

</div>

Formulir Komentar CSS

Mari kita terapkan beberapa CSS untuk membuat segalanya terlihat lebih bagus dengan menambahkan berikut ini ke main. css

#respond {
  margin-top: 40px;
}

#respond input[type='text'],
#respond input[type='email'],
#respond textarea {
  margin-bottom: 10px;
  display: block;
  width: 100%;

  border: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;

  line-height: 1.4em;
}

Setelah struktur HTML, formulir komentar, dan CSS terpasang, sistem blog kami mulai terlihat sedikit lebih rapi

Menangani Pengajuan Komentar

Langkah selanjutnya adalah menulis penangan pengiriman formulir PHP yang menerima permintaan dan menyimpan komentar, post_comment. php. Anda harus membuat file ini di root aplikasi Anda

Seperti yang saya katakan sebelumnya, saya ingin fokus pada fungsionalitas real-time sehingga kelas ada di dalam template yang telah Anda unduh yang merangkum beberapa fungsi pengecekan data dan persistensi standar. Kelas ini didefinisikan dalam Persistence. php (Anda dapat melihat sumbernya di sini), sama sekali bukan kualitas produksi, dan menangani

• Validasi dasar
• Sanitasi data dasar
• Kegigihan yang sangat sederhana menggunakan pengguna

  <?php
  require('Persistence.php');
  $comment_post_ID = 1;
  $db = new Persistence();
  $comments = $db->get_comments($comment_post_ID);
  $has_comments = (count($comments) > 0);
  ?>

  0. Artinya, komentar yang disimpan oleh satu pengguna tidak akan tersedia untuk pengguna lain

Ini juga berarti bahwa kita tidak perlu menghabiskan waktu menyiapkan database dan semua yang terkait dengannya dan membuat post_comment. php sangat sederhana dan bersih. Jika Anda ingin menggunakan fungsi ini di lingkungan produksi, Anda perlu menulis ulang konten Persistence. php. Ini kode untuk post_comment. php

<?php
require('Persistence.php');

$db = new Persistence();
if( $db->add_comment($_POST) ) {
  header( 'Location: index.php' );
}
else {
  header( 'Location: index.php?error=Your comment was not posted due to errors in your form submission' );
}
?>

Kode di atas melakukan hal berikut

1. Termasuk Kegigihan. php yang menangani penyimpanan dan pengambilan komentar
2. Membuat instance baru dari objek

   <?php
   require('Persistence.php');
   $comment_post_ID = 1;
   $db = new Persistence();
   $comments = $db->get_comments($comment_post_ID);
   $has_comments = (count($comments) > 0);
   ?>

   _1 dan menugaskannya ke variabel

   <?php
   require('Persistence.php');
   $comment_post_ID = 1;
   $db = new Persistence();
   $comments = $db->get_comments($comment_post_ID);
   $has_comments = (count($comments) > 0);
   ?>

   2
3. Mencoba menambahkan komentar ke

   <?php
   require('Persistence.php');
   $comment_post_ID = 1;
   $db = new Persistence();
   $comments = $db->get_comments($comment_post_ID);
   $has_comments = (count($comments) > 0);
   ?>

   2. Jika komentar berhasil ditambahkan, itu dialihkan kembali ke posting blog. Jika gagal, pengalihan juga terjadi tetapi beberapa teks kesalahan ditambahkan ke parameter kueri kesalahan

Menampilkan Komentar dengan Postingan Blog

Hal terakhir yang perlu kita lakukan agar Sistem Komentar Blog Generik kita aktif dan berjalan adalah memperbarui halaman blog, index. php, untuk mengambil dan menampilkan komentar dari objek

<?php
require('Persistence.php');
$comment_post_ID = 1;
$db = new Persistence();
$comments = $db->get_comments($comment_post_ID);
$has_comments = (count($comments) > 0);
?>

• Karena ini bukan sistem blogging sungguhan, kami akan mengkodekan nilai

  <?php
  require('Persistence.php');
  $comment_post_ID = 1;
  $db = new Persistence();
  $comments = $db->get_comments($comment_post_ID);
  $has_comments = (count($comments) > 0);
  ?>

  5 menjadi

  <?php
  require('Persistence.php');
  $comment_post_ID = 1;
  $db = new Persistence();
  $comments = $db->get_comments($comment_post_ID);
  $has_comments = (count($comments) > 0);
  ?>

  6
• Sertakan Kegigihan. php dan ambil komentar darinya. Komentar dikaitkan dengan entri blog menggunakan

  <?php
  require('Persistence.php');
  $comment_post_ID = 1;
  $db = new Persistence();
  $comments = $db->get_comments($comment_post_ID);
  $has_comments = (count($comments) > 0);
  ?>

  5 yang unik

<?php
require('Persistence.php');
$comment_post_ID = 1;
$db = new Persistence();
$comments = $db->get_comments($comment_post_ID);
$has_comments = (count($comments) > 0);
?>

Karena kita sekarang memiliki

<?php
require('Persistence.php');
$comment_post_ID = 1;
$db = new Persistence();
$comments = $db->get_comments($comment_post_ID);
$has_comments = (count($comments) > 0);
?>

<input type="hidden" name="comment_post_ID" value="<?php echo($comment_post_ID); ?>" id="comment_post_ID" />

Kami sekarang memiliki semua komentar yang terkait dengan posting blog yang direferensikan oleh variabel

<?php
require('Persistence.php');
$comment_post_ID = 1;
$db = new Persistence();
$comments = $db->get_comments($comment_post_ID);
$has_comments = (count($comments) > 0);
?>

<ol id="posts-list" class="hfeed<?php echo($has_comments?' has-comments':’); ?>">
  <li class="no-comments">Be the first to add a comment.</li>
  <?php
    foreach ($comments as $comment) {
      ?>
      <li><article id="comment_<?php echo($comment['id']); ?>" class="hentry">
        <footer class="post-info">
          <abbr class="published" title="<?php echo($comment['date']); ?>">
            <?php echo( date('d F Y', strtotime($comment['date']) ) ); ?>
          </abbr>

          <address class="vcard author">
            By <a class="url fn" href="#"><?php echo($comment['comment_author']); ?></a>
          </address>
        </footer>

        <div class="entry-content">
          <p><?php echo($comment['comment']); ?></p>
        </div>
      </article></li>
      <?php
    }
  ?>
</ol>

Anda akan melihat bahwa jika nilai

<input type="hidden" name="comment_post_ID" value="<?php echo($comment_post_ID); ?>" id="comment_post_ID" />

#posts-list.has-comments li.no-comments {
  display: none;
}

Sekarang setelah semua ini ada, kami memiliki sistem komentar blog yang fungsional. Jika Anda ingin mulai menulis kode dari sistem komentar blog yang berfungsi dasar ini, Anda juga dapat mengunduh kode yang sudah selesai sampai di sini

Peningkatan Progresif Dengan jQuery

Langkah pertama dalam membuat sistem komentar blog kita terasa kurang seperti halaman Web dan lebih seperti aplikasi adalah menghentikan pemuatan ulang halaman saat pengguna mengirimkan komentar. Kita bisa melakukannya dengan mengirimkan komentar ke server menggunakan permintaan AJAX. Karena jQuery mungkin merupakan standar defacto untuk fungsionalitas JavaScript lintas browser, kami akan menggunakannya di sini. Meskipun saya menggunakan jQuery di sini, saya juga ingin menggarisbawahi bahwa sebaiknya tidak selalu menggunakan jQuery. Alih-alih, analisis skenario Anda dan buat keputusan yang dipertimbangkan karena ada beberapa kasus di mana Anda sebaiknya tidak melakukannya

Dalam upaya untuk mencoba dan menyimpan sebanyak mungkin scripting (PHP dan JavaScript) dari index. php kami akan membuat folder baru untuk JavaScript kami dan di sana ada file untuk JavaScript aplikasi kami. Path ke isi ini harus js/app. js. File ini harus disertakan setelah jQuery disertakan

<script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="js/app.js"></script>

Tangkap Pengiriman Formulir Komentar

Saat halaman sudah siap, ikat ke acara

<input type="hidden" name="comment_post_ID" value="<?php echo($comment_post_ID); ?>" id="comment_post_ID" />

$(function() {
  $('#commentform').submit(handleSubmit);
});

Saat formulir dikirimkan dan fungsi

<input type="hidden" name="comment_post_ID" value="<?php echo($comment_post_ID); ?>" id="comment_post_ID" />

<input type="hidden" name="comment_post_ID" value="<?php echo($comment_post_ID); ?>" id="comment_post_ID" />

function handleSubmit() {
  var form = $(this);
  var data = {
    "comment_author": form.find('#comment_author').val(),
    "email": form.find('#email').val(),
    "comment": form.find('#comment').val(),
    "comment_post_ID": form.find('#comment_post_ID').val()
  };

  postComment(data);

  return false;
}

function postComment(data) {
  // send the data to the server
}

POST Komentar dengan AJAX

Dalam fungsi

<input type="hidden" name="comment_post_ID" value="<?php echo($comment_post_ID); ?>" id="comment_post_ID" />

#respond {
  margin-top: 40px;
}

#respond input[type='text'],
#respond input[type='email'],
#respond textarea {
  margin-bottom: 10px;
  display: block;
  width: 100%;

  border: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;

  line-height: 1.4em;
}

Memperbarui Antarmuka Pengguna Secara Dinamis dengan Komentar

Pada titik ini, data komentar dikirim ke server dan disimpan, tetapi respons AJAX tidak memberikan respons yang berarti. Selain itu, bagian komentar tidak diperbarui untuk menampilkan komentar yang baru dikirimkan sehingga pengguna harus menyegarkan halaman untuk melihatnya. Mari kita mulai dengan menulis kode untuk mengupdate UI dan menguji fungsionalitas tersebut

Jika Anda berpikir “Tunggu sebentar. Kami tidak memiliki semua data yang kami butuhkan dari server Web untuk menampilkan komentar” maka Anda benar. Namun, ini tidak menghentikan kami menulis kode untuk memperbarui UI dan juga menguji apakah itu berfungsi. Begini caranya

#respond {
  margin-top: 40px;
}

#respond input[type='text'],
#respond input[type='email'],
#respond textarea {
  margin-bottom: 10px;
  display: block;
  width: 100%;

  border: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;

  line-height: 1.4em;
}

Kode di atas melakukan hal berikut

• Di dalam fungsi

  <input type="hidden" name="comment_post_ID" value="<?php echo($comment_post_ID); ?>" id="comment_post_ID" />

  5 kita menghapus nilai formulir dan memanggil

  <input type="hidden" name="comment_post_ID" value="<?php echo($comment_post_ID); ?>" id="comment_post_ID" />

  8

• <input type="hidden" name="comment_post_ID" value="<?php echo($comment_post_ID); ?>" id="comment_post_ID" />

  8 pertama memanggil fungsi

  <ol id="posts-list" class="hfeed<?php echo($has_comments?' has-comments':’); ?>">
    <li class="no-comments">Be the first to add a comment.</li>
    <?php
      foreach ($comments as $comment) {
        ?>
        <li><article id="comment_<?php echo($comment['id']); ?>" class="hentry">
          <footer class="post-info">
            <abbr class="published" title="<?php echo($comment['date']); ?>">
              <?php echo( date('d F Y', strtotime($comment['date']) ) ); ?>
            </abbr>
  
            <address class="vcard author">
              By <a class="url fn" href="#"><?php echo($comment['comment_author']); ?></a>
            </address>
          </footer>
  
          <div class="entry-content">
            <p><?php echo($comment['comment']); ?></p>
          </div>
        </article></li>
        <?php
      }
    ?>
  </ol>

  0 untuk membuat item daftar (

  <ol id="posts-list" class="hfeed<?php echo($has_comments?' has-comments':’); ?>">
    <li class="no-comments">Be the first to add a comment.</li>
    <?php
      foreach ($comments as $comment) {
        ?>
        <li><article id="comment_<?php echo($comment['id']); ?>" class="hentry">
          <footer class="post-info">
            <abbr class="published" title="<?php echo($comment['date']); ?>">
              <?php echo( date('d F Y', strtotime($comment['date']) ) ); ?>
            </abbr>
  
            <address class="vcard author">
              By <a class="url fn" href="#"><?php echo($comment['comment_author']); ?></a>
            </address>
          </footer>
  
          <div class="entry-content">
            <p><?php echo($comment['comment']); ?></p>
          </div>
        </article></li>
        <?php
      }
    ?>
  </ol>

  1) HTML sebagai

  <ol id="posts-list" class="hfeed<?php echo($has_comments?' has-comments':’); ?>">
    <li class="no-comments">Be the first to add a comment.</li>
    <?php
      foreach ($comments as $comment) {
        ?>
        <li><article id="comment_<?php echo($comment['id']); ?>" class="hentry">
          <footer class="post-info">
            <abbr class="published" title="<?php echo($comment['date']); ?>">
              <?php echo( date('d F Y', strtotime($comment['date']) ) ); ?>
            </abbr>
  
            <address class="vcard author">
              By <a class="url fn" href="#"><?php echo($comment['comment_author']); ?></a>
            </address>
          </footer>
  
          <div class="entry-content">
            <p><?php echo($comment['comment']); ?></p>
          </div>
        </article></li>
        <?php
      }
    ?>
  </ol>

  2
• Kami kemudian mengonversi HTML menjadi objek jQuery menggunakan

  <ol id="posts-list" class="hfeed<?php echo($has_comments?' has-comments':’); ?>">
    <li class="no-comments">Be the first to add a comment.</li>
    <?php
      foreach ($comments as $comment) {
        ?>
        <li><article id="comment_<?php echo($comment['id']); ?>" class="hentry">
          <footer class="post-info">
            <abbr class="published" title="<?php echo($comment['date']); ?>">
              <?php echo( date('d F Y', strtotime($comment['date']) ) ); ?>
            </abbr>
  
            <address class="vcard author">
              By <a class="url fn" href="#"><?php echo($comment['comment_author']); ?></a>
            </address>
          </footer>
  
          <div class="entry-content">
            <p><?php echo($comment['comment']); ?></p>
          </div>
        </article></li>
        <?php
      }
    ?>
  </ol>

  3 dan menyembunyikan elemen tersebut
• Item daftar komentar kemudian ditambahkan ke daftar urutan komentar (

  <ol id="posts-list" class="hfeed<?php echo($has_comments?' has-comments':’); ?>">
    <li class="no-comments">Be the first to add a comment.</li>
    <?php
      foreach ($comments as $comment) {
        ?>
        <li><article id="comment_<?php echo($comment['id']); ?>" class="hentry">
          <footer class="post-info">
            <abbr class="published" title="<?php echo($comment['date']); ?>">
              <?php echo( date('d F Y', strtotime($comment['date']) ) ); ?>
            </abbr>
  
            <address class="vcard author">
              By <a class="url fn" href="#"><?php echo($comment['comment_author']); ?></a>
            </address>
          </footer>
  
          <div class="entry-content">
            <p><?php echo($comment['comment']); ?></p>
          </div>
        </article></li>
        <?php
      }
    ?>
  </ol>

  4). Daftar ini juga memiliki kelas yang disebut has-comments yang ditambahkan ke dalamnya sehingga kita dapat menyembunyikan item daftar pertama yang berisi pernyataan "Be the first to comment"
• Akhirnya, kami memanggil

  <ol id="posts-list" class="hfeed<?php echo($has_comments?' has-comments':’); ?>">
    <li class="no-comments">Be the first to add a comment.</li>
    <?php
      foreach ($comments as $comment) {
        ?>
        <li><article id="comment_<?php echo($comment['id']); ?>" class="hentry">
          <footer class="post-info">
            <abbr class="published" title="<?php echo($comment['date']); ?>">
              <?php echo( date('d F Y', strtotime($comment['date']) ) ); ?>
            </abbr>
  
            <address class="vcard author">
              By <a class="url fn" href="#"><?php echo($comment['comment_author']); ?></a>
            </address>
          </footer>
  
          <div class="entry-content">
            <p><?php echo($comment['comment']); ?></p>
          </div>
        </article></li>
        <?php
      }
    ?>
  </ol>

  _5 sehingga komentar ditampilkan dengan cara yang menjadi standar "ini item baru"

Fungsinya sekarang diterapkan tetapi kami ingin mengujinya. Ini dapat dicapai dengan dua cara

• <input type="hidden" name="comment_post_ID" value="<?php echo($comment_post_ID); ?>" id="comment_post_ID" />

  _8 adalah fungsi global sehingga kita dapat memanggilnya langsung menggunakan konsol JavaScript browser
• Kami dapat mengikat acara di halaman yang memicu pembaruan palsu yang memanggil fungsi

  <input type="hidden" name="comment_post_ID" value="<?php echo($comment_post_ID); ?>" id="comment_post_ID" />

  8

Mari kita lanjutkan dengan yang terakhir dan ikat ke kunci "u" yang dirilis dengan mengikat ke acara

<ol id="posts-list" class="hfeed<?php echo($has_comments?' has-comments':’); ?>">
  <li class="no-comments">Be the first to add a comment.</li>
  <?php
    foreach ($comments as $comment) {
      ?>
      <li><article id="comment_<?php echo($comment['id']); ?>" class="hentry">
        <footer class="post-info">
          <abbr class="published" title="<?php echo($comment['date']); ?>">
            <?php echo( date('d F Y', strtotime($comment['date']) ) ); ?>
          </abbr>

          <address class="vcard author">
            By <a class="url fn" href="#"><?php echo($comment['comment_author']); ?></a>
          </address>
        </footer>

        <div class="entry-content">
          <p><?php echo($comment['comment']); ?></p>
        </div>
      </article></li>
      <?php
    }
  ?>
</ol>

<input type="hidden" name="comment_post_ID" value="<?php echo($comment_post_ID); ?>" id="comment_post_ID" />

<input type="hidden" name="comment_post_ID" value="<?php echo($comment_post_ID); ?>" id="comment_post_ID" />

Tekan tombol "u" ​​beberapa kali dan lihat komentar muncul

#respond {
  margin-top: 40px;
}

#respond input[type='text'],
#respond input[type='email'],
#respond textarea {
  margin-bottom: 10px;
  display: block;
  width: 100%;

  border: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;

  line-height: 1.4em;
}

Besar. Kita sekarang tahu bahwa fungsi

<input type="hidden" name="comment_post_ID" value="<?php echo($comment_post_ID); ?>" id="comment_post_ID" />

Mendeteksi dan Menanggapi permintaan AJAX

Yang perlu dilakukan hanyalah memperbarui post_comment. php untuk mendeteksi panggilan AJAX dan mengembalikan informasi tentang komentar yang baru dibuat

Mendeteksi permintaan AJAX dilakukan dengan memeriksa header

#posts-list.has-comments li.no-comments {
  display: none;
}

#respond {
  margin-top: 40px;
}

#respond input[type='text'],
#respond input[type='email'],
#respond textarea {
  margin-bottom: 10px;
  display: block;
  width: 100%;

  border: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;

  line-height: 1.4em;
}

Setelah kami mengetahui permintaan tersebut adalah permintaan AJAX, kami dapat memperbarui kode untuk merespons dengan kode status yang sesuai dan data yang mewakili komentar. Kami juga perlu memastikan bahwa fungsionalitas asli dipertahankan. post_comment. kode php sekarang terlihat sebagai berikut

#respond {
  margin-top: 40px;
}

#respond input[type='text'],
#respond input[type='email'],
#respond textarea {
  margin-bottom: 10px;
  display: block;
  width: 100%;

  border: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;

  line-height: 1.4em;
}

Poin kunci dari kode di atas adalah

• Panggilan

  #posts-list.has-comments li.no-comments {
    display: none;
  }

  _3 mengembalikan data dari komentar yang ditambahkan yang ditugaskan ke variabel

  #posts-list.has-comments li.no-comments {
    display: none;
  }

  4
• Dengan menyetel Content-Type respons ke "application/json", kami memberi tahu jQuery untuk mengonversi string yang dikembalikan menjadi objek JavaScript. Untuk informasi lebih lanjut tentang memanggil layanan Web JSON, lihat Panduan Pemula Untuk Klien JSON API Berbasis jQuery
• Kode status 201 menunjukkan panggilan yang berhasil dan juga sumber daya (komentar) telah dibuat oleh panggilan tersebut

Sistem komentar blog sekarang bekerja dengan cara yang jauh lebih dinamis, langsung menunjukkan kepada pengguna bahwa komentar mereka telah diposting tanpa menyegarkan halaman. Selain itu, cara kami menambahkan fungsi berbasis JavaScript ke laman berarti bahwa jika JavaScript dinonaktifkan atau file JavaScript gagal dimuat, sistem akan kembali ke fungsi standar yang pertama kali kami implementasikan

Mendapatkan Waktu Nyata—Akhirnya

Seperti halnya tutorial "dari awal", mungkin perlu sedikit waktu untuk sampai ke bagian yang benar-benar menarik, tetapi akhirnya kita sampai di sini. Namun, semua pekerjaan yang kami lakukan tidak sia-sia. Karena kami telah membangun sistem komentar kami dengan cara yang semakin ditingkatkan, memasukkan Pusher ke dalamnya akan menjadi sangat mudah

Apa itu Pendorong?

Di awal tutorial kami mengatakan bahwa kami akan menggunakan Pusher untuk menambahkan fungsionalitas waktu nyata ke aplikasi. Tapi apa itu Pusher?

Pusher adalah layanan yang dihosting untuk menambahkan fitur waktu nyata dengan cepat dan mudah ke dalam aplikasi Web dan seluler. Ini menawarkan API RESTful yang membuatnya sangat mudah untuk mempublikasikan acara dari aplikasi apa pun yang dapat membuat permintaan HTTP dan API WebSocket untuk komunikasi dua arah waktu nyata. Anda bahkan tidak perlu menggunakan API secara langsung karena ada server (PHP, Ruby, node.js). js, ASP. NET, Python, dan lainnya) dan klien (JavaScript, iOS, Android,. NET, ActionScript, Arduino, dan banyak lagi) perpustakaan tersedia di sejumlah teknologi yang berarti Anda dapat menambahkan fungsionalitas waktu nyata ke aplikasi dalam beberapa menit - Saya yakin Anda akan terkejut betapa mudahnya

Daftar ke Pusher dan dapatkan Kredensial API Anda

Untuk menambahkan fungsionalitas real-time bertenaga Pusher ke aplikasi Web, Anda harus terlebih dahulu mendaftar untuk mendapatkan akun Sandbox gratis. Setelah mendaftar, Anda akan dibawa ke dasbor Pusher tempat Anda akan melihat bahwa aplikasi "Utama" telah dibuat untuk Anda. Anda juga akan melihat Anda berada di bagian "Akses API" untuk aplikasi tempat Anda dapat mengambil kredensial API Anda

Untuk kemudahan akses, buat pusher_config. php dan

#posts-list.has-comments li.no-comments {
  display: none;
}

#respond {
  margin-top: 40px;
}

#respond input[type='text'],
#respond input[type='email'],
#respond textarea {
  margin-bottom: 10px;
  display: block;
  width: 100%;

  border: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;

  line-height: 1.4em;
}

Dalam versi pusherconfig Anda. php pastikan untuk mengganti nilai yang menjadi 'YOUR dengan kredensial Anda yang sebenarnya

Anda juga harus

#posts-list.has-comments li.no-comments {
  display: none;
}

#posts-list.has-comments li.no-comments {
  display: none;
}

#respond {
  margin-top: 40px;
}

#respond input[type='text'],
#respond input[type='email'],
#respond textarea {
  margin-bottom: 10px;
  display: block;
  width: 100%;

  border: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;

  line-height: 1.4em;
}

JavaScript waktu nyata

Hal pertama yang perlu Anda lakukan saat menambahkan Pusher ke aplikasi Web adalah menyertakan pustaka JavaScript Pusher dan menghubungkan ke Pusher. Untuk terhubung, Anda harus menggunakan kunci yang Anda ambil dari dasbor Pusher. Di bawah ini Anda dapat melihat semua yang diperlukan untuk menghubungkan aplikasi front-end ke Pusher

Sertakan pustaka JavaScript Pusher setelah aplikasi. j termasuk

#respond {
  margin-top: 40px;
}

#respond input[type='text'],
#respond input[type='email'],
#respond textarea {
  margin-bottom: 10px;
  display: block;
  width: 100%;

  border: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;

  line-height: 1.4em;
}

Tambahkan fungsionalitas Pusher ke aplikasi. js

#respond {
  margin-top: 40px;
}

#respond input[type='text'],
#respond input[type='email'],
#respond textarea {
  margin-bottom: 10px;
  display: block;
  width: 100%;

  border: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;

  line-height: 1.4em;
}

Ini mungkin terlihat terlalu mudah untuk menjadi kenyataan, jadi inilah detail tentang apa yang dilakukan kode di atas

• #posts-list.has-comments li.no-comments {
    display: none;
  }

  8 Membuat instance baru dari objek

  #posts-list.has-comments li.no-comments {
    display: none;
  }

  9 dan dengan demikian menghubungkan Anda ke Pusher. Aplikasi yang akan digunakan ditentukan oleh nilai

  #posts-list.has-comments li.no-comments {
    display: none;
  }

  _7 yang Anda berikan dan yang kami atur sebelumnya

• <script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="js/app.js"></script>

  _1 Saluran menyediakan cara yang bagus untuk mengatur aliran data waktu nyata. Di sini kami berlangganan komentar untuk entri blog saat ini, yang secara unik diidentifikasi dengan nilai elemen masukan formulir tersembunyi

  <script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="js/app.js"></script>

  2

• <script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="js/app.js"></script>

  _3 Peristiwa digunakan untuk memfilter data lebih lanjut dan ideal untuk menautkan pembaruan ke perubahan di UI. Dalam hal ini kami ingin mengikat ke acara yang dipicu setiap kali komentar baru ditambahkan dan menampilkannya. Karena kita telah membuat fungsi

  <input type="hidden" name="comment_post_ID" value="<?php echo($comment_post_ID); ?>" id="comment_post_ID" />

  _8, kita cukup meneruskan referensi ke panggilan ke

  <script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="js/app.js"></script>

  5

Mengirim Acara Real-Time menggunakan Pembuat Acara

Kami juga dapat menguji fungsionalitas ini tanpa menulis kode sisi server apa pun dengan menggunakan Pembuat Acara untuk aplikasi Anda yang juga dapat ditemukan di dasbor Pusher. Pembuat Acara memungkinkan Anda memublikasikan acara di saluran melalui antarmuka pengguna yang sederhana. Dari kode di atas kita dapat melihat bahwa kita ingin memublikasikan sebuah event bernama “new_comment” di channel “comments-1”. Dari fungsi pengujian sebelumnya kita juga memiliki contoh data pengujian yang dapat kita terbitkan

PHP waktu nyata

Sekali lagi, kami telah membuktikan bahwa fungsionalitas sisi klien kami berfungsi tanpa harus menulis kode sisi server apa pun. Sekarang mari tambahkan kode PHP yang kita perlukan untuk memicu event komentar baru segera setelah komentar diposting di sistem komentar kita

Pusher menawarkan sejumlah pustaka sisi server yang memudahkan publikasi acara selain membantu fungsionalitas seperti autentikasi saluran pribadi dan menyediakan informasi pengguna untuk saluran kehadiran. Kami hanya ingin menggunakan fungsionalitas pemicu peristiwa dasar di post_comment. php jadi kita perlu mendownload library Pusher PHP

Setelah Anda mengunduh file zip ini, unzip ke dalam direktori bersama dengan file Anda yang lain. Struktur file Anda sekarang akan terlihat seperti ini

• indeks. php
• css (dir)
• gambar (dir)
• Kirim Komentar. php
• pusher_config. php
• Kegigihan. php
• squeeks-Pusher-PHP (dir)
  • lib (dir)
    • Pendorong. php

Suatu peristiwa dapat dipicu hanya dalam beberapa baris kode

#respond {
  margin-top: 40px;
}

#respond input[type='text'],
#respond input[type='email'],
#respond textarea {
  margin-bottom: 10px;
  display: block;
  width: 100%;

  border: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;

  line-height: 1.4em;
}

Namun, kita perlu menerapkan beberapa logika tambahan sebelum kita memicu kejadian tersebut

• Periksa apakah komentar telah ditambahkan
• Ekstrak pengidentifikasi komentar unik dari larik

  #posts-list.has-comments li.no-comments {
    display: none;
  }

  4
• Buat teks untuk mengidentifikasi nama saluran untuk komentar yang dikirimkan
• Picu peristiwa _newcomment di saluran dengan data

  #posts-list.has-comments li.no-comments {
    display: none;
  }

  4. Catatan. Perpustakaan secara otomatis mengonversi variabel array

  #posts-list.has-comments li.no-comments {
    display: none;
  }

  4 ke JSON untuk dikirim melalui Pusher

Oleh karena itu post_comment lengkap. php akhirnya tampak sebagai berikut

<?php
require('Persistence.php');

$db = new Persistence();
if( $db->add_comment($_POST) ) {
  header( 'Location: index.php' );
}
else {
  header( 'Location: index.php?error=Your comment was not posted due to errors in your form submission' );
}
?>

Jika Anda menjalankan aplikasi sekarang di dua jendela browser yang berbeda, Anda akan melihat bahwa segera setelah Anda mengirimkan komentar di satu jendela, komentar tersebut akan langsung (“secara ajaib”) muncul di jendela kedua. Kami sekarang memiliki sistem komentar waktu nyata

Tapi…, kita belum selesai. Anda juga akan melihat bahwa komentar ditampilkan dua kali di jendela pengguna yang mengirimkannya. Ini karena komentar telah ditambahkan oleh callback AJAX, dan oleh event Pusher. Karena ini adalah skenario yang sangat umum, terutama jika Anda telah membuat aplikasi dengan cara yang semakin ditingkatkan seperti yang kami miliki, pustaka server Pusher menampilkan cara mengecualikan koneksi/pengguna agar tidak menerima acara melalui Pusher

Untuk melakukan ini, Anda perlu mengirim pengidentifikasi koneksi unik yang disebut

<script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="js/app.js"></script>

<?php
require('Persistence.php');

$db = new Persistence();
if( $db->add_comment($_POST) ) {
  header( 'Location: index.php' );
}
else {
  header( 'Location: index.php?error=Your comment was not posted due to errors in your form submission' );
}
?>

Perubahan yang kami lakukan adalah

• Fungsi baru bernama

  $(function() {
    $('#commentform').submit(handleSubmit);
  });

  _0 telah ditambahkan untuk mendapatkan

  <script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="js/app.js"></script>

  9. Itu membungkus cek untuk memastikan bahwa variabel

  $(function() {
    $('#commentform').submit(handleSubmit);
  });

  2 telah ditetapkan dan juga bahwa klien terhubung ke Pusher

• <input type="hidden" name="comment_post_ID" value="<?php echo($comment_post_ID); ?>" id="comment_post_ID" />

  _2 telah diperbarui untuk memeriksa apakah

  <script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="js/app.js"></script>

  9 tersedia. Jika ya, informasi ini diposting ke server bersama dengan data komentar

Di server kita perlu menggunakan parameter

<script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="js/app.js"></script>

$(function() {
  $('#commentform').submit(handleSubmit);
});

<?php
require('Persistence.php');

$db = new Persistence();
if( $db->add_comment($_POST) ) {
  header( 'Location: index.php' );
}
else {
  header( 'Location: index.php?error=Your comment was not posted due to errors in your form submission' );
}
?>

Dan sesederhana itu kami memiliki sistem komentar blog yang diaktifkan secara realtime dan kami hanya mengirimkan pesan kepada pengguna yang benar-benar perlu melihatnya. Seperti fungsionalitas AJAX, fungsionalitas waktu nyata telah ditambahkan dengan cara yang semakin ditingkatkan, untuk memastikannya tidak memengaruhi fungsionalitas lainnya. Anda dapat menemukan demo yang sedang berjalan di sini dan solusi lengkapnya di repositori komentar waktu nyata di github

Praktik Pengembangan Aplikasi Real-Time yang Baik

Pengembangan aplikasi waktu nyata berbagi praktik pengembangan umum yang baik dengan pengembangan Web umum. Namun, saya pikir saya akan membagikan beberapa tip yang bisa sangat berguna

Gunakan Alat Pengembang Browser

Saat Anda mulai melakukan banyak pengembangan JavaScript, alat pengembang browser menjadi teman terbaik Anda. Itu sama ketika menambahkan fungsionalitas waktu nyata ke aplikasi Web Anda, tidak hanya karena Anda menggunakan JavaScript, tetapi juga karena perpustakaan JavaScript yang Anda gunakan cenderung melakukan beberapa hal yang cukup rumit secara internal. Jadi, cara terbaik untuk memahami apa yang sedang terjadi dan jika kode Anda menggunakannya seperti yang diharapkan adalah dengan mengaktifkan pencatatan yang biasanya masuk ke konsol pengembang. Semua vendor browser utama sekarang menawarkan alat pengembang yang bagus termasuk konsol

• Addon pembakar untuk Firefox
• Alat pengembang Internet Explorer F12
• Opera Capung

Pustaka Pusher JavaScript menyediakan cara untuk terhubung ke fungsionalitas logging. Yang perlu Anda lakukan hanyalah menetapkan fungsi ke properti statis. Fungsi ini kemudian akan menerima semua pesan log. Anda dapat melakukan apa yang Anda suka dalam fungsi tetapi praktik terbaik adalah mencatat pesan ke konsol pengembang. Anda dapat melakukan ini sebagai berikut, memastikan kode dijalankan setelah pustaka Pusher JavaScript disertakan

<?php
require('Persistence.php');

$db = new Persistence();
if( $db->add_comment($_POST) ) {
  header( 'Location: index.php' );
}
else {
  header( 'Location: index.php?error=Your comment was not posted due to errors in your form submission' );
}
?>

Kode di atas memeriksa untuk memastikan fungsi

$(function() {
  $('#commentform').submit(handleSubmit);
});

$(function() {
  $('#commentform').submit(handleSubmit);
});

Periksa Konektivitas

Setiap teknologi real-time yang baik akan menjaga koneksi tetap antara klien (browser web) dan server atau layanan Web. Terkadang klien akan kehilangan konektivitas dan saat klien tidak terhubung ke Internet, fungsi real-time tidak akan berfungsi. Hal ini sering terjadi pada aplikasi yang berjalan di perangkat seluler yang bergantung pada jaringan seluler. Jadi, jika aplikasi Anda bergantung pada konektivitas dan fungsionalitas tersebut, penting untuk menangani skenario di mana klien tidak terhubung. Ini mungkin dengan menampilkan pesan untuk memberi tahu pengguna bahwa mereka sedang offline atau Anda mungkin ingin menerapkan beberapa fungsi alternatif

Pustaka Pusher JavaScript memperlihatkan status konektivitas melalui objek

function handleSubmit() {
  var form = $(this);
  var data = {
    "comment_author": form.find('#comment_author').val(),
    "email": form.find('#email').val(),
    "comment": form.find('#comment').val(),
    "comment_post_ID": form.find('#comment_post_ID').val()
  };

  postComment(data);

  return false;
}

function postComment(data) {
  // send the data to the server
}

<script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="js/app.js"></script>

<?php
require('Persistence.php');

$db = new Persistence();
if( $db->add_comment($_POST) ) {
  header( 'Location: index.php' );
}
else {
  header( 'Location: index.php?error=Your comment was not posted due to errors in your form submission' );
}
?>

Kesimpulan

Kami melihat fungsionalitas waktu nyata muncul di sejumlah besar aplikasi profil tinggi. beberapa memilikinya sebagai inti dari apa yang mereka tawarkan sementara yang lain menggunakannya dengan hemat. Tidak peduli bagaimana itu digunakan, tujuan akhirnya pada umumnya sama; . Dengan mengonversi sistem komentar blog dasar menjadi platform komunikasi yang lebih menarik, saya harap saya telah menunjukkan bahwa fungsionalitas dan pengalaman dapat dengan mudah diterapkan pada aplikasi yang ada

Kemudahan akses teknologi ini adalah hal yang relatif baru dan kami baru saja menyentuh potensi penggunaan teknologi tersebut. Statistik waktu nyata, pembaruan berita instan, aliran aktivitas, interaksi sosial, kolaborasi, dan permainan hanyalah beberapa kegunaan umum, tetapi karena semakin banyak pengembang yang menyadari, dan nyaman dengan, teknologi, saya yakin kita akan melihat beberapa . Sebuah “Internet untuk Hal-Hal Real-Time?”?

Bagaimana Anda menyisipkan kotak komentar di HTML?

Bagaimana cara membuat kotak komentar?

Bagaimana Anda berkomentar dalam bentuk HTML?