Cara menggunakan reload page wordpress

CARA MEMBUAT WEBSITE (http://namadomain.undip.ac.id)

Table of Contents Show

Apa yang Kita Bangun
Langkah 1 - Membangun Formulir HTML
Langkah 2 - Mulai Menambahkan jQuery
Langkah 3 - Menulis Beberapa Validasi Formulir
Langkah 4 - Proses Penyampaian Formulir Kita dengan Fungsi AJAX jQuery
Langkah 5 - Menampilkan Pesan Kembali ke Pengguna

Login Cpanel
Masuk File Manager
Download CMS (WordPress, Joomla, PHPNuke, Lokopedia dll), simpan di computer (bisa didownload dari website wordpress; contoh : wordpress. 5.4.2.zip
Pada halaman Cpanel pilih tombol “Upload”
Pilih File yang tadi di download, kemudian Upload : tunggu sampai Complete, di close
Kembali ke halaman Cpanel, kalau belum muncul file yang di Upload silakan klik tombol Reload
Lalu File yang telah diupload di ekstrak, dengan cara klik file lalu klik tombol Extract – akan muncul folder baru, hasil ekstrak
File yang di folder dikeluarkan – masuk folder, select all, pilih tombol Move, jangan lupa folder dihapus
Reload halaman namadomain.undip.ac.id
Buat database & User caranya, pada halaman Cpanel pilih MySQL Database
Create Database, jangan lupa di catat database (database : xxx)
Create User Database, ini juga jangan lupa dicatat (user : xxx pass : xxx)
Sambungkan User ke Database, Priviledge pilih sesuai kebutuhan, klik make change
Kembali ke halaman Utama (namadomain.undip.ac.id)

INSTALL WEB WORDPRESS

Pada halaman utama install, pilih bahasa
Pada halaman konfirmasi klik Lets go
Masukkan Database, User, Password, Prefix table, stelah selesai klik Submit
Klik Run Install
Masukkan Title
Username & Password – masuk Dashboard mengelola Web
Klik Install
Selesai
Untuk login silakan masuk menggunakan namadomain/wp-admin (http://namadomain.undip.ac.id/wp-admin)

Mengganti Themes

Login Dashboard (Halaman Admin Web)
Pilih Appearance
Pilih Themes
Pilih Add New – pilih Upload Themes – telusuri letak file themes – klik install now
Pilih Activate

Memasukkan RSS (Load konten dari website lain)

Cari RSS web yg sering update contoh Undip : https://www.undip.ac.id/feed/
Login Dashboard
Pilih Appereance
Pilih Widget, cari widget RSS, drag drop ke sidebar yg diinginkan
Paste RSS, Selesai

I am about to move from W3TC and installed the latest version 9.0.2. All goes very smoothly!! Just one thing. I have many pages, generated from a database. When I change something in the database, I want to refresh some specific cached pages. In W3TC I just deleted the cached page from the cache folder and requested for that page. W3TC generated that page and saved the content in the cache folder.
In WPFC I can delete the cached content, request the page, goes well, but the generated page is not stored in the cache folder.
When I then request the page in my browser, the page is re-generated. In the footer of the page I read: “<!– Need to refresh to see the cached version –>”
Is there a way to enforce the storage of a specific page in php? Or perhaps by calling a public function in your package?
Furthermore only compliments on your plugin!!

The page I need help with: [log in to see the link]

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Sebelumnya di Nettuts+, Philo menunjukkan bagaimana Anda bisa menggunakan jQuery untuk menambahkan validasi formulir ke komentar wordpress yang bekerja tanpa pemuatan ulang halaman. Cara lain yang bagus untuk menerapkan jQuery untuk meningkatkan pengalaman pengguna adalah dengan tidak hanya memvalidasi, namun mengirimkan formulir sepenuhnya tanpa refresh halaman.

Dalam tutorial ini saya akan menunjukkan betapa mudahnya melakukan hal itu -- mengirimkan formulir kontak yang mengirim email, tanpa refresh halaman menggunakan jQuery! (Email sebenarnya dikirim dengan skrip php yang memproses di latar belakang). Mari kita mulai.

Apa yang Kita Bangun

Dalam contoh ini, kita memiliki formulir kontak sederhana dengan nama, email, dan nomor telepon. Formulir mengirimkan semua field ke skrip php tanpa refresh halaman, menggunakan fungsi jQuery asli (artinya asli, Anda tidak perlu mengunduh plugin tambahan agar bisa bekerja.

Jika Anda telah menemukan artikel ini tanpa keakraban sebelumnya dengan jQuery, tempat yang bagus untuk memulai adalah artikel Jeffrey Way di 15 Sumber untuk Anda Memulai dengan jQuery dari Awal.

Langkah 1 - Membangun Formulir HTML

Mari kita lihat markup html kita. Kita mulai dengan formulir html dasar kita:

  <div id="contact_form">
  <form name="contact" action="">
    <fieldset>
      <label for="name" id="name_label">Name</label>
      <input type="text" name="name" id="name" size="30" value="" class="text-input" />
      <label class="error" for="name" id="name_error">This field is required.</label>
      
      <label for="email" id="email_label">Return Email</label>
      <input type="text" name="email" id="email" size="30" value="" class="text-input" />
      <label class="error" for="email" id="email_error">This field is required.</label>
      
      <label for="phone" id="phone_label">Return Phone</label>
      <input type="text" name="phone" id="phone" size="30" value="" class="text-input" />
      <label class="error" for="phone" id="phone_error">This field is required.</label>
      
      <br />
      <input type="submit" name="submit" class="button" id="submit_btn" value="Send" />
    </fieldset>
  </form>
  </div>

Anda mungkin memperhatikan bahwa saya telah menyertakan div dengan id contact_form yang membungkus keseluruhan formulir.
Pastikan untuk tidak melewatkan div itu dalam formulir Anda sendiri karena kita akan membutuhkan div pembungkus ini nanti. Anda
mungkin juga memperhatikan bahwa saya telah meninggalkan kedua bagian action dan method dari tag formulir kosong. Kita
sebenarnya tidak perlu salah satu dari ini di sini, karena jQuery menangani semuanya nanti.

Hal penting lain yang harus dipastikan adalah nilai id untuk setiap field masukan. Nilai id
adalah apa yang akan dicari skrip jQuery Anda untuk memproses formulir dengannya.

Saya telah menambahkan beberapa gaya css dan gambar latar belakang di Photoshop untuk menghasilkan formulir berikut:

Langkah 2 - Mulai Menambahkan jQuery

Langkah selanjutnya dalam proses ini adalah menambahkan beberapa kode jQuery. Saya akan berasumsi bahwa Anda telah mengunduh jQuery, mengunggah ke server Anda, dan mereferensikannya di halaman web Anda.

Selanjutnya, buka file javascript baru lainnya, rujuk ke html Anda seperti file javascript biasa lainnya,
dan tambahkan yang berikut ini:

  $(function() {
    $(".button").click(function() {
      // validate and process form here
    });
  });

Apa yang function() pertama lakukan adalah, memuat event di dalamnya, segera setelah dokumen html siap. Jika Anda pernah melakukan pekerjaan di jQuery sebelumnya, fungsinya sama dengan fungsi document.ready jQuery. Jadi kita mulai dengan itu, dan di dalamnya kita memiliki fungsi click kita yang mengeksekusi pada mengklik tombol submit dengan nama kelas "button". Akhirnya apa yang telah kita capai dengan baris kode ini sama seperti jika kita menambahkan event onclick ke tombol submit di html. Alasan kita melakukannya dengan jQuery adalah pemisahan yang bersih dari presentasi kita dari skrip kita.

Langkah 3 - Menulis Beberapa Validasi Formulir

  $(function() {
    $('.error').hide();
    $(".button").click(function() {
      // validate and process form here
      
      $('.error').hide();
  	  var name = $("input#name").val();
  		if (name == "") {
        $("label#name_error").show();
        $("input#name").focus();
        return false;
      }
  		var email = $("input#email").val();
  		if (email == "") {
        $("label#email_error").show();
        $("input#email").focus();
        return false;
      }
  		var phone = $("input#phone").val();
  		if (phone == "") {
        $("label#phone_error").show();
        $("input#phone").focus();
        return false;
      }
      
    });
  });

Di dalam fungsi kita yang dimuat saat halaman sudah siap, kita menambahkan beberapa validasi formulir. Tapi hal pertama yang Anda lihat yang ditambahkan adalah $('.error').hide();. Apa yang dilakukan adalah menyembunyikan 3 label dengan nama kelas "error" kita. Kita ingin label ini disembunyikan tidak hanya saat
halaman pertama memuat, tapi juga saat Anda mengklik submit, jika salah satu pesan ditunjukkan kepada pengguna sebelumnya. Setiap pesan kesalahan seharusnya hanya muncul jika validasi tidak berhasil.

Kita memvalidasi dengan terlebih dahulu memeriksa apakah field name dibiarkan kosong oleh pengguna, dan jika ya, kita kemudian menunjukkan label dengan id name_error. Kita kemudian menempatkan fokus pada field masukan name, jika pengguna
sama sekali bingung tentang apa yang harus dilakukan selanjutnya! (Saya telah belajar untuk tidak pernah terlalu banyak memikirkan ketika mengenai formulir pengguna).

Untuk menjelaskan secara lebih rinci bagaimana kita membuat ini terjadi, kita tetapkan variabel 'name' ke nilai field input dengan id "name" -- semua dengan satu baris jQuery:

  var name = $("input#name").val();

Kita kemudian memeriksa apakah nilai itu kosong, dan jika memang demikian, kita menggunakan metode show() jQuery untuk menunjukkan labelnya dengan
id "name_error":

  if (name == "") {
    $("label#name_error").show();
  }

Selanjutnya, kita menempatkan fokus formulir kembali pada field input dengan id "name", dan akhirnya mengembalikan false:

  if (name == "") {
    $("label#name_error").show();
    $("input#name").focus();
    return false;
  }

Pastikan untuk mengembalikan false dalam kode Anda, jika tidak seluruh formulir akan dikirim (yang mengalahkan
tujuan dari tutorial ini)! Yang dilakukan return false adalah mencegah pengguna untuk melanjutkan lebih jauh
tanpa mengisi field yang diperlukan.

Langkah 4 - Proses Penyampaian Formulir Kita dengan Fungsi AJAX jQuery

Sekarang kita sampai ke inti tutorial -- mengirimkan formulir tanpa refresh halaman, yang mengirimkan nilai formulir ke skrip php di latar belakang. Mari kita lihat semua kode terlebih dahulu, kemudian saya akan merinci lebih detail selanjutnya. Tambahkan kode berikut tepat di bawah cuplikan validasi yang telah kita tambahkan sebelumnya (dan sebelum fungsi click tombol ditutup):

  var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;
  //alert (dataString);return false;
  $.ajax({
    type: "POST",
    url: "bin/process.php",
    data: dataString,
    success: function() {
      $('#contact_form').html("<div id='message'></div>");
      $('#message').html("<h2>Contact Form Submitted!</h2>")
      .append("<p>We will be in touch soon.</p>")
      .hide()
      .fadeIn(1500, function() {
        $('#message').append("<img id='checkmark' src='images/check.png' />");
      });
    }
  });
  return false;

Kita memiliki banyak hal terjadi di sini! Mari kita rinci semuanya - sangat sederhana dan mudah digunakan begitu Anda memahami prosesnya. Kita pertama kali membuat string dari nilai, yaitu semua nilai formulir yang ingin kita kirimkan ke skrip yang mengirim email.

Ingat sebelumnya, kita telah menetapkan variabel 'name' dengan nilai field masukan dengan id "name", seperti:

  var name = $("input#name").val();

Kita bisa menggunakan nilai 'name' itu lagi, begitu juga nilai 'email' dan 'phone', untuk membuat dataString kita:

  var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;

Saya telah memberi komentar sebuah peringatan bahwa saya kadang-kadang harus memastikan bahwa saya meraih nilai yang benar, yang mungkin berguna bagi Anda dalam prosesnya. Jika Anda menghapus komentar peringatan tersebut dan menguji formulir Anda, dengan asumsi semuanya telah berjalan dengan baik sejauh ini, Anda akan mendapatkan pesan yang serupa dengan yang berikut:

Sekarang kita sampai pada fungsi ajax utama kita, bintang pertunjukan hari ini. Di sinilah semua tindakan terjadi, jadi
perhatikan baik-baik!

  $.ajax({
    type: "POST",
    url: "bin/process.php",
    data: dataString,
    success: function() {
      //display message back to user here
    }
  });
  return false;

Pada dasarnya apa yang terjadi dalam kode adalah: Fungsi .ajax() memproses nilai dari string kita yang disebut dataString (data:dataString) dengan skrip php yang disebut process.php (url:"bin/process.php"), menggunakan metode 'POST' (type:"POST"). Jika skrip kita diproses dengan sukses, kita kemudian dapat menampilkan pesan kembali ke pengguna, dan akhirnya mengembalikan false sehingga halaman tidak memuat ulang. Itu saja! Seluruh proses ditangani di sana dalam beberapa baris ini!

Ada hal-hal yang lebih lanjut yang dapat Anda lakukan di sini, selain mengirim email dan memberikan pesan sukses. Misalnya Anda bisa mengirim nilai Anda ke database, mengolahnya, lalu menampilkan hasilnya kembali ke pengguna. Jadi jika Anda mengirimkan polling kepada pengguna, Anda bisa memproses suara mereka, kemudian mengembalikan hasil pemungutan suara, semua tanpa penyegaran halaman yang diperlukan.

Mari kita meringkas apa yang terjadi dalam contoh kita, untuk memastikan kita telah membahas semuanya. Kita meraih nilai formulir kita dengan jQuery, dan kemudian menempatkannya ke dalam string seperti ini:

  var name = $("input#name").val();
  var email = $("input#email").val();
  var phone = $("input#phone").val();
  var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;

Kemudian kita menggunakan fungsi ajax jQuery untuk mengolah nilai dalam dataString. Setelah
proses itu selesai dengan sukses, kita menampilkan pesan kembali ke pengguna dan menambahkan return false sehingga halaman kita tidak refresh:

    $.ajax({
      type: "POST",
      url: "bin/process.php",
      data: dataString,
      success: function() {
        $('#contact_form').html("<div id='message'></div>");
        $('#message').html("<h2>Contact Form Submitted!</h2>")
        .append("<p>We will be in touch soon.</p>")
        .hide()
        .fadeIn(1500, function() {
          $('#message').append("<img id='checkmark' src='images/check.png' />");
        });
      }
    });
    return false;

Bagian keberhasilan skrip telah diisi dengan beberapa konten spesifik yang bisa ditampilkan kembali ke pengguna. Tapi sejauh fungsi ajax kita berjalan, itu saja yang ada untuk itu. Untuk lebih banyak pilihan dan pengaturan, pastikan untuk memeriksa dokumentasi jQuery pada fungsi ajax. Contoh di sini adalah salah satu implementasi yang lebih sederhana, namun demikian, sangat kuat seperti yang Anda lihat.

Langkah 5 - Menampilkan Pesan Kembali ke Pengguna

Mari kita lihat bagian kode yang menampilkan pesan kita kembali kepada pengguna, untuk menyelesaikan tutorialnya.

Pertama, kita ubah keseluruhan isi div contact_form (ingat saya bilang kita akan membutuhkan div itu) dengan baris berikut:

  $('#contact_form').html("<div id='message'></div>");

Apa yang telah dilakukan adalah mengganti semua konten di dalam div contact_form, menggunakan fungsi html() jQuery. Jadi, bukannya sebuah formulir, sekarang kita hanya memiliki div baru di dalamnya, dengan id 'message'. Selanjutnya, kita isi div itu dengan pesan yang sebenarnya -- sebuah h2 mengatakan "Contact Form Submitted":

  $('#message').html("<h2>Contact Form Submitted!</h2>")

Kita selanjutnya menambahkan lebih banyak konten ke div pesan dengan fungsi append() jQuery, dan untuk melengkapi semuanya, kita menambahkan efek keren dengan menyembunyikan div pesan dengan fungsi jQuery hide(), lalu memudarkan semuanya dengan fungsi fadeIn():

  .append("<p>We will be in touch soon.</p>")
  .hide()
  .fadeIn(1500, function() {
    $('#message').append("<img id='checkmark' src='images/check.png' />");
  });

Jadi pengguna akhirnya melihat berikut setelah mereka mengirimkan formulir:

Sekarang, saya pikir Anda harus setuju bahwa itu sangat mudah untuk mengirimkan formulir tanpa refresh halaman menggunakan fungsi ajax yang bagus dari jQuery. Hanya dapatkan nilai-nilai dalam file javascript Anda, proses mereka dengan fungsi ajax dan mengembalikan false, dan Anda baik untuk pergi. Anda dapat memproses nilai-nilai dalam skrip php Anda seperti file php lainnya, satu-satunya perbedaan adalah bahwa pengguna tidak perlu menunggu refresh halaman - semuanya terjadi diam-diam di latar belakang.

Jadi jika Anda memiliki formulir kontak di situs web Anda, formulir login, atau bahkan formulir yang lebih maju yang memproses nilai melalui database dan mengembalikan hasilnya kembali, Anda dapat melakukannya dengan mudah dan efisien, dan mungkin yang terpenting, Anda meningkatkan pengalaman pengguna akhir pada situs web Anda dengan memberikan interaktivitas tanpa harus menunggu halaman dimuat ulang.

Kesimpulan

Saya ingin menambahkan beberapa kata terakhir tentang contoh demo yang diberikan. Dalam demo, Anda mungkin memperhatikan bahwa sebenarnya ada satu plugin yang digunakan - file runonload.js. Saya menyatakan pada awal tutorial bahwa kita tidak akan menggunakan plugin apapun, dan kemudian Anda temukan di demo ada skrip runonload tambahan, jadi beberapa penjelasan mungkin diperlukan! Bagi siapa saja yang tertarik untuk melihat demo yang bekerja nyata, Anda dapat melihat formulir konsultasi SEO situs web saya.

Penggunaan satu-satunya yang saya buat dengan runonload sebenarnya tidak ada hubungannya dengan pemrosesan formulir. Jadi Anda bisa menyelesaikan fungsi ajax sepenuhnya tanpa plugin tambahan. Saya hanya menggunakan runonload untuk memfokuskan field masukan nama pada pemuatan halaman. Sudah pengalaman saya bahwa memanggil runonload kadang-kadang bisa menjadi pengganti yang lebih baik untuk fungsi document ready asli jQuery, dan saya merasa cocok saat menyusun tutorial ini. Untuk beberapa alasan fungsi focus() tidak akan bekerja pada pemuatan halaman menggunakan fungsi document ready asli jQuery -- tapi fungsinya bekerja dengan runonload, dan karena itulah Anda menemukannya sebagai bagian dari contoh. Jadi jika Anda tahu cara untuk mencapainya tanpa menggunakan runonload, saya akan dengan senang hati mendengar kabar tentang hal itu.