Pages
Tampilkan postingan dengan label Javascript. Tampilkan semua postingan
Tampilkan postingan dengan label Javascript. Tampilkan semua postingan

Senin, 14 Februari 2022

Mengambil Nilai dari Radio button dengan javascript

 

 Assalamualaikum Wr, Wb


Kali ini mau sedikit share tentang bagaimana cara nya menampilkan nilai dari radio button ke text area, terkadang kita menemui kasus seperti itu, bagaiman caranya yuk langsung saja kita prakter

Tampilan awal sebelum radio button di klik



Tampilan sesudah Radio button di klik



Buat file index.html kemudian salih kode di bawah ini:


<div id="disposisimodaltelaah" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog modal-lg ">
      <div class="modal-content">
        <div class="modal-header modal-dark">
          <h5 class="modal-title" id="exampleModalLabel">Disposisi Aduan</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        </div>

        <form class="form-horizontal" method="post" action="#" 	enctype="multipart/form-data">
          <div class="modal-body">
            <div class="form-group col-12 mt-10">
              <label for="fm-nama">Disposisi Ke:</label>
	            <select class="form-control" name="kondisiaduan">
		            <option value="DI_TIMINSPEKTUR">TIM INSPEKTUR</option>
		            <option value="DITOLAK">LAPORAN DITOLAK</option>
		        </select>
            </div>

	        <div class="form-group col-12 mt-10">
              <label for="fm-nama">Upload Berkas:</label>
		        <input type="file" class="form-control" name="file" >
            </div>
            
            <div class="form-group col-12 mt-10">
                <label for="fm-nama">Catatan:</label>
                <div class="custom-control custom-radio">
		        <input type="radio" id="ContohRadio1" name="catatan" class="custom-control-input" onclick="displayResult(this.value)" value="Kami Sertkan Dokumen Bukti Bukti Hasil Dari Tim Telaah">
		        <label class="custom-control-label" for="ContohRadio1">Kami Sertkan Dokumen Bukti Bukti Hasil Dari Tim Telaah</label>
	        </div>
            
	        <div class="custom-control custom-radio">
		        <input type="radio" id="ContohRadio2"  name="catatan" class="custom-control-input" onclick="displayResult(this.value)" value="Dukumen Kurang Lengkap">
		        <label class="custom-control-label" for="ContohRadio2">Dukumen Kurang Lengkap</label>
	        </div>

	        <div>
	           <textarea class="form-control" name="catatan" Placeholder="Catatan Catatan Bila Ada" id="pilihan"></textarea>
	        </div>
	    </div>
            
        </div>
        <div class="modal-footer">
            <button  type="submit" class="btn btn-sm" style="background-color: #00a396; color:#ffffff">Disposisi</button>
          </div>
        </form>
      </div>
    </div>
</div>

<script>
    function displayResult(catatan){ 
        document.getElementById("pilihan").value=catatan; 
    }
</script>

Jalankan file di browser kalian. ok nilai dari radio button sudah berhasil di tampilkan di textarea dengan bantuan javascript, gimna gampang kan? semoga bermanfaat 🙏🏻

Kamis, 29 Juli 2021

Menghitung Selisih Waktu dengan Moment JS

 

 



Assalamualaikum Wr, Wb


Bagai mana cara menghitung selisih waktu di php?


Sebelumnya kita intro sedikit ya hehe,

Waktu merupakan salah jenis data yang paling sering kita temui. Bekerja dengan waktu di Javascript secara manual cukup merepotkan apa lagi jika harus berurusan dengan locale masing-masing. Untuk mengatasi masalah ini, moment.js diciptakan.

Moment.js merupakan sebuah pustaka yang didesain untuk dapat mem-parsing, memvalidasi, memanipulasi serta menampilkan tanggal dan waktu di Javascript. Pustaka ini dapat bekerja dengan baik di browser ataupun Node.js. Untuk saat ini browser yang dipakai untuk pengujian moment.js adalah IE 8, 9, dan 10 di Windows 7, IE 11 di Windows 10, Chrome di Windows XP, Firefox terbaru di Linux, dan Safari terbaru di OSX 10.8 dan 10.11.

Moment.js dapat dipasang manual dengan memanggil file javascriptnya atau dipasang menggunakan package manager.


Ok langsung praktek saja


Download librari Moment.js 


File moment.js memiliki ukuran hanya 16.6k dan menggunakan Bahasa Inggris. Jika ingin menggunakan bahasa lain dalam format tampilan tanggal dan waktu kita dapat menggunakan moment-with-locales.js mendukung 115 bahasa termasuk Bahasa Indonesia dan Bahasa Jawa. Berikut contoh hasil penggunaan moment.js untuk menampilkan tanggal dan waktu dalam Bahasa Indonesia dan Jawa.


Konfigurasi 

// Bahasa Indonesia
moment().format('MMMM Do YYYY, h:mm:ss a'); // September 4 2017, 10:53:16 pagi
moment().format('dddd');                    // Senin
moment().format("MMM Do YY");               // Sep 4 17
moment().format('YYYY [escaped] YYYY');     // 2017 escaped 2017
moment().format();                         

moment("20111031", "YYYYMMDD").fromNow(); // 6 tahun yang lalu
moment("20120620", "YYYYMMDD").fromNow(); // 5 tahun yang lalu
moment().startOf('day').fromNow();        // 11 jam yang lalu
moment().endOf('day').fromNow();          // dalam 13 jam
moment().startOf('hour').fromNow();      

moment().subtract(10, 'days').calendar(); // 25/08/2017
moment().subtract(6, 'days').calendar();  // Selasa lalu pukul 10.53
moment().subtract(3, 'days').calendar();  // Jumat lalu pukul 10.53
moment().subtract(1, 'days').calendar();  // Kemarin pukul 10.53
moment().calendar();                      // Hari ini pukul 10.53
moment().add(1, 'days').calendar();       // Besok pukul 10.53
moment().add(3, 'days').calendar();       // Kamis pukul 10.53
moment().add(10, 'days').calendar();     

// Bahasa Jawa
moment().format('MMMM Do YYYY, h:mm:ss a'); // September 4 2017, 10:53:54 enjing
moment().format('dddd');                    // Senen
moment().format("MMM Do YY");               // Sep 4 17
moment().format('YYYY [escaped] YYYY');     // 2017 escaped 2017
moment().format();                          // 2017-09-04T10:53:54+07:00

moment("20111031", "YYYYMMDD").fromNow(); // 6 taun ingkang kepengker
moment("20120620", "YYYYMMDD").fromNow(); // 5 taun ingkang kepengker
moment().startOf('day').fromNow();        // 11 jam ingkang kepengker
moment().endOf('day').fromNow();          // wonten ing 13 jam
moment().startOf('hour').fromNow();      

moment().subtract(10, 'days').calendar(); // 25/08/2017
moment().subtract(6, 'days').calendar();  // Seloso kepengker pukul 10.54
moment().subtract(3, 'days').calendar();  // Jemuwah kepengker pukul 10.54
moment().subtract(1, 'days').calendar();  // Kala wingi pukul 10.54
moment().calendar();                      // Dinten puniko pukul 10.54
moment().add(1, 'days').calendar();       // Mbenjang pukul 10.54
moment().add(3, 'days').calendar();       // Kemis pukul 10.54
moment().add(10, 'days').calendar();      // 14/09/2017


Sekian Semoga Bermanfaat

Rabu, 26 Agustus 2020

Belajar Javascript/Jquery Part 4 Menciptakan Efek Visual

 
Assalamualaikum Wr, Wb
Topiknya masih seputar jquery ya, Sedikit Pengantar
Jquery bisa dipakai untuk memberi efek visual. Contoh, untuk menggeser beberapa elemen bisa kesamping, keatas, kebawah untuk contoh kita akan menggeser elemen keatas. kodenya seperti dibawah ini:

Kode Menggeser elemen ke atas

$("#atas").slideUp("slow");

Kode Menggeser elemen ke bawah

$("#bawah").slideDown("slow");

Yok langsung saja kita prakter
Persiapan
  • Buka Text editor untuk menulis Halaman Web
  • Buat File index.html
File index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Belajar Jquery</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
       function geserAtas(){
           $("#pertama").slideUp("slow");
       }
       function geserBawah(){
           $("#pertama").slideDown("slow");
       }
    </script>
</head>
<body>
    <center>
    <h1>Menggeser Elemen Paragraf keatas dan kebawah </h1>
    <div>
        <p id="pertama">Paragraf 1</p>
        <p>Paragraf 2</p>
        <p>Paragraf 3</p>
        <p>Paragraf 4</p>
    </div>
    <p>Ini Paragraf 5</p>
    <form>
        <input type="button" value="Geser Keatas" onclick="geserAtas()">
        <input type="button" value="Geser Kebawah" onclick="geserBawah()">
    </form>
    </center>
</body>
</html>

Simpan dan jalankan file index.html dibrowser temen temen klik tombol geserkeatas otomatis paragraf pertama akan hilang, dan untuk menampilkannya klik tombol geserkebawah. lebih jelasnya serperti gambar dibawah ini

Gambar ketika paragraf diklik geserkeatas
Gambar ketikaa paragraf diklik geserkebawah
Gimana? mudah ya, cukup itu dulu dan semoga bermanfaat

Kamis, 20 Agustus 2020

Belajar Javascript/Jquery Part 3 Menampilkan dan Menyembunyikan Eleman Halaman

 
Assalamualaikum Wr,wb
Jquery dapat menampilkan dan menyembunyikan elemen-elemen halaman dengan mudah. menyembunyikan sebuah elemen halaman dengan fungsi hide(), yang digunakan dengan sebuah selektor seperti ini: 
$('p:first').hide();
dan untuk menampilkan sebuah elemen menggunakan fungsi show() contohnya seperti ini: 
$('p:first').show();
Yuk langsung saja kita praktek
Pesiapan
  • Buka Text editor untuk menulis Halaman Web
  • Buat File index.html
File index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Belajar Jquery</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
        function sembunyikan(){
            $('p:first').hide();
        }
        function tampilkan(){
            $('p:first').show();
        }
    </script>
</head>
<body>
    <center>
    <h1>Menyembuyikan dan Menampilkan Elemen Paragraf</h1>
    <div>
        <p>Paragraf 1</p>
        <p>Paragraf 2</p>
        <p>Paragraf 3</p>
        <p>Paragraf 4</p>
    </div>
    <form>
        <input type="button" value="Sembuyikan" onclick="sembunyikan()">
        <input type="button" value="Tampilkan" onclick="tampilkan()">
    </form>
    </center>
</body>
</html>
Simpan file kemudian buka project dibrowser klik tombol sembunyikan, akan terlihat paragraf pertama tidak tampil lagi, untuk menampilkan lagi tinggal klik tombol tampilkan. lebih jelasnya seperti gambar dibawah ini

gambar ketika paragraf tampil semua
gambar ketika paragraf disembunyikan

Mudahkan? oh iya javascript atau jquery biasanya digunakan untuk mempercantik tampilan website.

Belajar Javascript/Jquery Part2 Meyeleksi Beberapa element Halaman

 
Assalamualaikum Wr,Wb
Sesuai judul postingan kita akan belajar bagaimana cara menyeleksi beberapa element halaman sekaligus Ketika kita melewatkan sebuah selektor pada fungsi jquery(), atau fungsi $() itu artinya kita sudah menyeleksi sekumpulan elemen.
Pada contoh kali ini kita akan memakai elemen paragraf pada sebuah halaman menggunakan selektor "p", kalau di tulisa dalam jquery seperti ini $("p"). Selektor ini akan menghasilkan semua elemen paragraf. dan akan menghitung jumlah elemen paragraf dengan fungsi jquery size() dan menampilkanya pada kotak alert. yuk langsung praktek aja
Persiapan
  • Gunakan Editor seperti visual studio code, untuk membuat halaman web
  • Buat File baru dengan akhiran .HTML, disi saya mencontohkan dengan membuat file index.html
  • Panggil File jquery.js
  • Tambhkan kode jquery untuk menghitung jumlah paragraf
File index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Belajar Javascript/Jquery</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <center>
    <h1>Menghitung Halaman Paragraf</h1>
    <div>
        <p>Ini Paragraf 1</p>
        <p>Ini Paragraf 2</p>
        <p>Ini Paragraf 3</p>
        <p>Ini Paragraf 4</p>
    </div>
    <form>
        <input type="button" value="Hitung Paragraf" onclick="hitung()">
    </form>
    </center>
</body>
</html>

File jquery.js CDN
 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

kode untuk menghitung jumlah paragraf

<script>
    function hitung(){
        alert("Ada Sebanyak " + $("p").size() + " Paragraf");
    }
</script>

Taruh kode jquery diantar tag HEAD, kemudian simpan dan dan panggil file index.html dibrowser, klik tombol hitung paragraf, nanti temen akan meliah sebuah kotak alert yang mengitung jumlah paragraf di halaman index.html, coba temen temen tambahkan jumlah paragraf lagi di file index, kemudian simpan, klik lagi tombol hitung paragraf, otomatis jumlah pargraf akan bertambah, Kurang Lebih Tampilanya seperti dibawah ini

Satu lagi Contoh untuk menyeleksi elemen dengan gaya style css. buka halaman index.html copy paste kode dibawah ini
File index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Belajar Javascript/Jquery</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <style>
        p.kedua{
            font-weight: bold;
        }
        p.diwarnai{
            background-color: red;
        }
    </style>
</head>
<body>
    <center>
    <h1>Menghitung Halaman Paragraf</h1>
    <div>
        <p>Ini Paragraf 1</p>
        <p class="kedua">Ini Paragraf 2</p>
        <p>Ini Paragraf 3</p>
        <p>Ini Paragraf 4</p>
    </div>
    <form>
        <input type="button" value="Hitung Paragraf" onclick="hitung()">
        <input type="button" value="Warnai" onclick="warna()">
    </form>
    </center>
</body>
</html>


<script>
    function hitung(){
        alert("Ada Sebanyak " + $("p").size() + " Paragraf");
    }
    function warna(){
        $('p.kedua').toggleClass("diwarnai");
    }
</script>

Penambahakan Fungsi Jquery

<script>
    function hitung(){
        alert("Ada Sebanyak " + $("p").size() + " Paragraf");
    }
    function warna(){
        $('p.kedua').toggleClass("diwarnai");
    }
</script>

jangan lupa save dulu perubahan di file index.html, kemudian refresh browser temen temen, klik tombol warnai, kurang lebih tampilanya seperti dibawah ini
Sekian dulu, semoga bisa dipahami dan bermanfaat, InsaAllah Part belajar jquery akan terus diupdate

Kamis, 12 Maret 2020

Belajar Dasar Dasar Javascript/Jquery Part1

 


Assalamualaikum

Menyeleksi Elemen Halaman dengan ID

Instalasi untuk dapat menggunakan Jquery
  1. Include file jquery.js kedalam halaman html
Langkah Langkah
  1. Buat File index.html simpan (Tidak harus di dalam folder xampp/htdocs)
  2. Buka file index.html dibrowser
Cdn Jquery

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

Code jquery
<script>
        function warna(){
            $('#ketiga').toggleClass('diwarnai');
        }
</script>

Code Lengkap

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
        function warna(){
            $('#ketiga').toggleClass('diwarnai');
        }
    </script>
    <style>
        p.diwarnai{
            background-color: chocolate;
        }
    </style>
</head>
<body>
    <h1>Pilih Paragraf</h1>
    <div>
        <p>Paragraf 1</p>
        <p>Paragraf 2</p>
        <p id="ketiga">Paragraf 3</p>
    </div>
    <input type="button" value="Warnai" onclick="warna()">
</body>
</html>

Hasil Bila dibuka di browser

Demikan Mudah Bukan Silahkan Dicoba dan semoga bermanfaat

Kategori

Subscribe to Newsletter

Popular Posts

© Copyright 2019 LulusanSkom .